gatsby-core-theme 1.3.0 → 1.4.2

package/src/components/molecules/pagination/index.js

@@ -32,7 +32,10 @@ const Pagination = ({
         if (i <= totalPages) {
           pages.push(
             <li key={keygen()}>
-              <Link className={i === currentPage ? styles.active : ''} to={getPagePath(i)}>
+              <Link
+                className={`${i === currentPage ? styles.active : ''} pagination-gtm`}
+                to={getPagePath(i)}
+              >
                 {i}
               </Link>
             </li>
@@ -47,13 +50,17 @@ const Pagination = ({
       {/* previous button */}
       {currentPage !== 1 && (
         <li>
-          <Link to={getPagePath(currentPage - 1)}>{previousText}</Link>
+          <Link to={getPagePath(currentPage - 1)} className="pagination-gtm">
+            {previousText}
+          </Link>
         </li>
       )}
       {/* first page link */}
       {currentPage >= numOfItemsEachSide && (
         <li>
-          <Link to={getPagePath(1)}>1</Link>
+          <Link to={getPagePath(1)} className="pagination-gtm">
+            1
+          </Link>
           {currentPage !== numOfItemsEachSide && <span>...</span>}
         </li>
       )}
@@ -63,13 +70,17 @@ const Pagination = ({
       {totalPages - currentPage >= numOfItemsEachSide - 1 && (
         <li>
           {totalPages - currentPage !== numOfItemsEachSide - 1 && <span>...</span>}
-          <Link to={getPagePath(totalPages)}>{totalPages}</Link>
+          <Link to={getPagePath(totalPages)} className="pagination-gtm">
+            {totalPages}
+          </Link>
         </li>
       )}
       {/* next button */}
       {currentPage < totalPages && (
         <li>
-          <Link to={getPagePath(currentPage + 1)}>{nextText}</Link>
+          <Link to={getPagePath(currentPage + 1)} className="pagination-gtm">
+            {nextText}
+          </Link>
         </li>
       )}
     </ul>

package/src/components/molecules/pagination/pagination.test.js

@@ -14,8 +14,8 @@ describe('Pagination Component', () => {
   });
 
   test('current page class name', () => {
-    expect(screen.getByText('3').getAttribute('class')).toEqual('active');
-    expect(screen.getByText('5').getAttribute('class')).toEqual('');
+    expect(screen.getByText('3').getAttribute('class')).toEqual('active pagination-gtm');
+    expect(screen.getByText('5').getAttribute('class')).toEqual(' pagination-gtm');
   });
 
   test('number of items', () => {
@@ -36,7 +36,7 @@ describe('Pagination Component', () => {
     // so the last item is item index 9  = ( 9 + 2 ) - 2
     // and it should link to the total page number ( 26 )
     expect(container.querySelectorAll('li')[9].innerHTML).toEqual(
-      '<span>...</span><a href="/another_type/page/26">26</a>'
+      '<span>...</span><a class="pagination-gtm" href="/another_type/page/26">26</a>'
     );
   });
 });

package/src/components/molecules/pagination/with-midpoints.js

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { MdLastPage, MdFirstPage, MdChevronRight, MdChevronLeft } from 'react-icons/md';
 import { translate } from '~helpers/getters';
 import Link from '~hooks/link';
+import { Context } from '~context/TranslationsProvider';
 import styles from './pagination-with-midpoints.module.scss';
 
 const PaginationWithMidPoints = ({
@@ -13,8 +14,8 @@ const PaginationWithMidPoints = ({
   nextComp = <MdChevronRight />,
   firstComp = <MdFirstPage />,
   lastComp = <MdLastPage />,
-  translations,
 }) => {
+  const { translations } = useContext(Context) || {};
   const current = Number(currentPage);
   const total = Number(totalPages);
   function getPagePath(index) {
@@ -30,7 +31,10 @@ const PaginationWithMidPoints = ({
       {/* got to first page */}
       <li className={styles.showInAll}>
         {current > 1 ? (
-          <Link to={getPagePath(1)} className={`${styles.button} ${styles.isActive}`}>
+          <Link
+            to={getPagePath(1)}
+            className={`${styles.button} ${styles.isActive} pagination-gtm`}
+          >
             {firstComp}
           </Link>
         ) : (
@@ -40,7 +44,10 @@ const PaginationWithMidPoints = ({
       {/* previous button */}
       <li className={styles.showInAll}>
         {current > 1 ? (
-          <Link to={getPagePath(current - 1)} className={`${styles.button} ${styles.isActive}`}>
+          <Link
+            to={getPagePath(current - 1)}
+            className={`${styles.button} ${styles.isActive} pagination-gtm`}
+          >
             {previousComp}
           </Link>
         ) : (
@@ -52,59 +59,76 @@ const PaginationWithMidPoints = ({
         {/* first page link */}
         {current !== 1 && (
           <li>
-            <Link to={getPagePath(1)}>1</Link>
+            <Link to={getPagePath(1)} className="pagination-gtm">
+              1
+            </Link>
             {current > 4 && <span>...</span>}
           </li>
         )}
         {/* first mid page link */}
         {current > 3 && (
           <li>
-            <Link to={getPagePath(firstMidPage)}>{firstMidPage}</Link>
+            <Link to={getPagePath(firstMidPage)} className="pagination-gtm">
+              {firstMidPage}
+            </Link>
             {firstMidPage < current - 2 && <span>...</span>}
           </li>
         )}
         {/* current page -1 link */}
         {current > 2 && (
           <li>
-            <Link to={getPagePath(current - 1)}>{current - 1}</Link>
+            <Link to={getPagePath(current - 1)} className="pagination-gtm">
+              {current - 1}
+            </Link>
           </li>
         )}
         {/* current page link */}
         <li className={styles.showInAll}>
-          <Link to={getPagePath(current)} className={styles.active}>
+          <Link to={getPagePath(current)} className={`${styles.active} pagination-gtm`}>
             {current}
           </Link>
         </li>
         {/* current page +1 link */}
         {current < total - 1 && (
           <li>
-            <Link to={getPagePath(current + 1)}>{current + 1}</Link>
+            <Link to={getPagePath(current + 1)} className="pagination-gtm">
+              {current + 1}
+            </Link>
           </li>
         )}
         {/* last mid page link */}
         {current < total - 3 && (
           <li>
             {lastMidPage > current + 2 && <span>...</span>}
-            <Link to={getPagePath(lastMidPage)}>{lastMidPage}</Link>
+            <Link to={getPagePath(lastMidPage)} className="pagination-gtm">
+              {lastMidPage}
+            </Link>
           </li>
         )}
         {/* last page link */}
         {current !== total && (
           <li>
             {current < total - 2 && <span>...</span>}
-            <Link to={getPagePath(total)}>{total}</Link>
+            <Link to={getPagePath(total)} className="pagination-gtm">
+              {total}
+            </Link>
           </li>
         )}
         <li className={styles.showInMobile}>
           <span>{translate(translations, 'of', 'of')}</span>
-          <Link to={getPagePath(total)}>{total}</Link>
+          <Link to={getPagePath(total)} className="pagination-gtm">
+            {total}
+          </Link>
         </li>
       </div>
 
       {/* next button */}
       <li className={styles.showInAll}>
         {current < total ? (
-          <Link to={getPagePath(current + 1)} className={`${styles.button} ${styles.isActive}`}>
+          <Link
+            to={getPagePath(current + 1)}
+            className={`${styles.button} ${styles.isActive} pagination-gtm`}
+          >
             {nextComp}
           </Link>
         ) : (
@@ -114,7 +138,10 @@ const PaginationWithMidPoints = ({
       {/* got to last page */}
       <li className={styles.showInAll}>
         {current !== total ? (
-          <Link to={getPagePath(total)} className={`${styles.button} ${styles.isActive}`}>
+          <Link
+            to={getPagePath(total)}
+            className={`${styles.button} ${styles.isActive} pagination-gtm`}
+          >
             {lastComp}
           </Link>
         ) : (
@@ -133,9 +160,6 @@ PaginationWithMidPoints.propTypes = {
   previousComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
   firstComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
   lastComp: PropTypes.oneOfType([PropTypes.element, PropTypes.any]),
-  translations: PropTypes.shape({
-    of: PropTypes.string,
-  }),
 };
 
 export default PaginationWithMidPoints;

package/src/components/molecules/pagination/with-midpoints.test.js

@@ -1,12 +1,11 @@
 import React from 'react';
-import { render, screen, cleanup } from '@testing-library/react';
+import { render, cleanup } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
-
 import PaginationWithMidPoints from './with-midpoints';
 
 describe('Pagination Component', () => {
   test('render with props', () => {
-    const { container, getByText , getAllByText } = render(
+    const { container, getByText, getAllByText } = render(
       <PaginationWithMidPoints currentPage={10} pagePath="example" totalPages={60} />
     );
     expect(container).toBeTruthy();
@@ -24,32 +23,32 @@ describe('Pagination Component', () => {
     const { getByText } = render(
       <PaginationWithMidPoints currentPage={15} pagePath="example" totalPages={35} />
     );
-    expect(getByText('15').getAttribute('class')).toEqual('active');
+    expect(getByText('15').getAttribute('class')).toEqual('active pagination-gtm');
   });
 
   test('render with different midpoints', () => {
-    const { container, getByText,getAllByText } = render(
+    const { container, getByText, getAllByText } = render(
       <PaginationWithMidPoints currentPage={40} pagePath="example" totalPages={60} />
     );
     expect(container).toBeTruthy();
     expect(getByText('1').getAttribute('href')).toEqual('/example');
     expect(getByText('20').getAttribute('href')).toEqual('/example/page/20');
     expect(getByText('39').getAttribute('href')).toEqual('/example/page/39');
-    expect(getByText('40').getAttribute('class')).toEqual('active');
+    expect(getByText('40').getAttribute('class')).toEqual('active pagination-gtm');
     expect(getByText('41').getAttribute('href')).toEqual('/example/page/41');
     expect(getByText('50').getAttribute('href')).toEqual('/example/page/50');
     expect(getAllByText('60')[0].getAttribute('href')).toEqual('/example/page/60');
   });
 
   test('render with different midpoints', () => {
-    const { container, getByText,getAllByText } = render(
+    const { container, getByText, getAllByText } = render(
       <PaginationWithMidPoints currentPage={30} pagePath="example" totalPages={60} />
     );
     expect(container).toBeTruthy();
     expect(getByText('1').getAttribute('href')).toEqual('/example');
     expect(getByText('15').getAttribute('href')).toEqual('/example/page/15');
     expect(getByText('29').getAttribute('href')).toEqual('/example/page/29');
-    expect(getByText('30').getAttribute('class')).toEqual('active');
+    expect(getByText('30').getAttribute('class')).toEqual('active pagination-gtm');
     expect(getByText('31').getAttribute('href')).toEqual('/example/page/31');
     expect(getByText('45').getAttribute('href')).toEqual('/example/page/45');
     expect(getAllByText('60')[0].getAttribute('href')).toEqual('/example/page/60');

package/src/components/molecules/search/index.js

@@ -29,6 +29,7 @@ const Search = ({
   pageSearchOptions = null,
   inputPlaceholder = '',
   children,
+  page,
 }) => {
   const { setShowSearch } = useContext(NavigationContext);
   const pageSearchOptionsCopy = pageSearchOptions;
@@ -241,7 +242,7 @@ const Search = ({
   // Use a default or given close button
   if (formSearchOptionsCopy !== null && formSearchOptionsCopy.searchButtonComponent === undefined) {
     formSearchOptionsCopy.searchButtonComponent = (
-      <button aria-label="Search" type="submit">
+      <button aria-label="Search" type="submit" className="search-gtm btn-cta">
         {searchIcon === null ? <FaSearch /> : <img alt="search" src={searchIcon} />}
       </button>
     );
@@ -289,7 +290,7 @@ const Search = ({
               maxLength="60"
             />
             <div className={styles.searchButton}>
-              <button aria-label="Search" type="submit">
+              <button aria-label="Search" type="submit" className="search-gtm btn-cta">
                 {searchIcon === null ? <FaSearch /> : <img alt="search" src={searchIcon} />}
               </button>
             </div>
@@ -310,6 +311,7 @@ const Search = ({
                   {...pageSearchOptionsCopy.tabsOptions}
                   activeTabClass="searchActive"
                   headerClass="searchHeader"
+                  gtmClass="search-tabs-menu-gtm"
                 >
                   {items}
                 </Tabs>
@@ -332,6 +334,7 @@ const Search = ({
                     items,
                     model_type: type,
                     title: titleObj ? titleObj.title : '',
+                    pagination_type: 'load_more',
                     ...pageSearchOptionsCopy.archiveOptions.includeOptions,
                   };
                 }
@@ -353,7 +356,12 @@ const Search = ({
                             module_title_tag: 'h2',
                           }}
                         />
-                        <Archive module={items} loadMore={loadMore} />
+                        <Archive
+                          module={items}
+                          loadMore={loadMore}
+                          page={page}
+                          gtmClass="archive-gtm"
+                        />
                       </>
                     )}
                   </div>
@@ -413,6 +421,9 @@ Search.propTypes = {
   }),
   children: PropTypes.elementType,
   styles: PropTypes.shape({}),
+  page: PropTypes.shape({
+    translations: PropTypes.shape({}),
+  }),
 };
 
 export default Search;

package/src/components/molecules/slider/index.js

@@ -1,3 +1,5 @@
+/* eslint-disable no-unused-expressions */
+/* eslint-disable react-hooks/exhaustive-deps */
 import React, { useState, useRef, useEffect } from 'react';
 import PropTypes, { element } from 'prop-types';
 
@@ -15,11 +17,12 @@ import Arrow from '~atoms/carousel/arrow';
 import Pagination from '~atoms/carousel/pagination-item';
 
 function Slider({
+  gtmClass = '',
   useArrows = true,
   usePagination = true,
   arrows = {
-    prev: <Arrow direction="left" />,
-    next: <Arrow direction="right" />,
+    prev: <Arrow direction="left" gtmClass={gtmClass} />,
+    next: <Arrow direction="right" gtmClass={gtmClass} />,
   },
   settings = {
     swipeEndThreshold: 0.25,
@@ -108,6 +111,23 @@ function Slider({
     sliderConditionsRef
   );
 
+  let throttlePause;
+  const onWheel = (e) => {
+    e.preventDefault();
+    if (useArrows || usePagination) {
+      throttlePause ? null : (throttlePause = true);
+      setTimeout(() => {
+        e.deltaY > 0 ? arrowHandler('next') : arrowHandler('prev');
+        throttlePause = false;
+      }, 300);
+    } else {
+      sliderContainerRef.current.scrollTo({
+        top: 0,
+        left: sliderContainerRef.current.scrollLeft + e.deltaY,
+      });
+    }
+  };
+
   useEffect(() => {
     // Keep slider node reference for multiple carousels in an instance
     const sliderContentNode = sliderContentRef.current;
@@ -145,6 +165,7 @@ function Slider({
     sliderContentNode.addEventListener('touchstart', mousedown);
     sliderContentNode.addEventListener('touchmove', mouseMoveDebounce);
     sliderContentNode.addEventListener('touchend', mouseUpDebounce);
+    sliderContainerRef.current.addEventListener('wheel', onWheel);
 
     return () => {
       sliderContentNode.removeEventListener('click', click);
@@ -154,6 +175,7 @@ function Slider({
       sliderContentNode.removeEventListener('touchstart', mousedown);
       sliderContentNode.removeEventListener('touchmove', mouseMoveDebounce);
       sliderContentNode.removeEventListener('touchend', mouseUpDebounce);
+      sliderContainerRef.current.removeEventListener('wheel', onWheel);
     };
   });
 
@@ -175,7 +197,7 @@ function Slider({
         <div
           tabIndex="0"
           role="button"
-          className={styles.sliderContent}
+          className={`${styles.sliderContent}`}
           style={style}
           ref={sliderContentRef}
         >
@@ -204,6 +226,7 @@ function Slider({
             paginationHandler={paginationHandler}
             slideIndex={state.slideIndex}
             totalSlides={state.length}
+            gtmClass={gtmClass}
           />
         )}
       </div>
@@ -225,6 +248,7 @@ Slider.propTypes = {
   }),
   className: PropTypes.string,
   children: PropTypes.arrayOf(element).isRequired,
+  gtmClass: PropTypes.string,
 };
 
 export default Slider;

package/src/components/molecules/toplist/default-row/index.js

@@ -16,19 +16,42 @@ const Row = ({ item, oneliner = 'main', layout = 'list' }) => {
 
   return (
     <div className={`${styles.row} ${styles[layout]}`}>
-      <a href={prettyLink} title={item.name} target="_blank" rel="noreferrer">
+      <a
+        href={prettyLink}
+        className="casinos-top-list-gtm name-cta"
+        title={item.name}
+        target="_blank"
+        rel="noreferrer"
+      >
         {item.name}
       </a>
-      <a href={prettyLink} title={item.name} target="_blank" rel="noreferrer">
+      <a
+        href={prettyLink}
+        title={item.name}
+        className="casinos-top-list-gtm logo-cta"
+        target="_blank"
+        rel="noreferrer"
+      >
         <LazyImage alt={item.name} src={imagePrettyUrl(item.logo_url, 100)} />
       </a>
       <Bonus item={item} tracker={oneliner} />
       <SellingPoints icon={<MdCheck />} sellingPoints={item.selling_points} />
       <div>
-        <Button to={`/${item.review_link}`} primaryColor={false} btnText="Omtale" />
+        <Button
+          to={`/${item.review_link}`}
+          primaryColor={false}
+          gtmClass="casinos-top-list-gtm btn-cta"
+          btnText="Omtale"
+        />
       </div>
       <div>
-        <Button to={prettyLink} btnText="Spill nå!" primaryColor isInternalLink={false} />
+        <Button
+          to={prettyLink}
+          btnText="Spill nå!"
+          gtmClass="casinos-top-list-gtm btn-cta"
+          primaryColor
+          isInternalLink={false}
+        />
       </div>
     </div>
   );

package/src/components/organisms/accordion/accordion.test.js

@@ -48,8 +48,8 @@ describe('Accordions Component', () => {
     fireEvent.click(thirdtItemBtn);
     const items = container.querySelectorAll('button.title');
     expect(items[2].getAttribute('class')).toContain('invertArrow');
-    expect(items[1].getAttribute('class')).toEqual('title');
-    expect(items[0].getAttribute('class')).toEqual('title');
+    expect(items[1].getAttribute('class')).toEqual('title accordion-gtm btn-cta');
+    expect(items[0].getAttribute('class')).toEqual('title accordion-gtm btn-cta');
   });
 
   test('do not close others when open one', () => {
@@ -61,7 +61,7 @@ describe('Accordions Component', () => {
     fireEvent.click(thirdtItemBtn);
     const items = container.querySelectorAll('button.title');
     expect(items[2].getAttribute('class')).toContain('invertArrow');
-    expect(items[1].getAttribute('class')).toEqual('title');
+    expect(items[1].getAttribute('class')).toEqual('title accordion-gtm btn-cta');
     expect(items[0].getAttribute('class')).toContain('invertArrow');
   });
 });

package/src/components/organisms/accordion/index.js

@@ -62,7 +62,7 @@ const Accordion = ({ module, openAll = false, openItem, closeOthers = false }) =
           <div key={keygen()} className={styles.accordionItem}>
             <button
               onClick={() => toggle(index)}
-              className={styles.title}
+              className={`${styles.title} accordion-gtm btn-cta`}
               type="button"
               ref={(el) => (btnRefs.current[index] = el)}
             >

package/src/components/organisms/anchor/index.js

@@ -28,10 +28,11 @@ function Anchor({ module: { items }, headerOffset = 80, sliderGap = 0 }) {
       usePagination={false}
       settings={{ numberOfSlides: 0, sliderGap }}
       className={styles.sliderWrapper}
+      gtmClass="anchor-carousel-gtm"
     >
       {items.map((anchor) => (
         <a
-          className={styles.link}
+          className={`${styles.link} anchor-carousel-gtm anchor-menu-gtm`}
           key={keygen()}
           onClick={handleClick}
           href={`#${anchor.label && anchorLink(anchor?.label?.toLowerCase().trim())}`}

package/src/components/organisms/archive/archive.test.js

@@ -26,7 +26,14 @@ describe('archive component', () => {
     const archiveModule = getArchiveModule(4, 2);
 
     const { container, getByText } = render(
-      <Archive module={archiveModule} page={{ page: { translations: {} } }} />
+      <Archive
+        module={archiveModule}
+        page={{ page: { translations: {} } }}
+        loadMore={{
+          limit: 3,
+          increment: 6,
+        }}
+      />
     );
     expect(container.querySelectorAll('button')).toHaveLength(1);
     expect(getByText('Load More')).toBeTruthy();

package/src/components/organisms/archive/index.js

@@ -1,4 +1,3 @@
-/* eslint-disable react/forbid-prop-types */
 /* eslint-disable no-nested-ternary */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
@@ -9,23 +8,23 @@ import Button from '~atoms/button';
 import { translate } from '~helpers/getters';
 import styles from './archive.module.scss';
 
-const Archive = ({ module, PaginationComponent, page }) => {
+const Archive = ({ module, PaginationComponent, page, loadMore, gtmClass = '' }) => {
   const [moduleItems, setModuleItems] = useState([...module.items]);
   const updatedModule = { ...module };
-  const loadMore = module.pagination_type === 'load_more';
+  const hasLoadMore = module.pagination_type === 'load_more';
 
   useEffect(() => {
     if (module.pagination_type === 'load_more') {
-      const items = module.items.filter((item, index) => index < parseInt(module.num_of_items));
+      const items = module.items.filter((item, index) => index < parseInt(loadMore.limit));
       setModuleItems(items);
     }
-  }, [module, module.items]);
+  }, [module, module.items, loadMore]);
 
   const loadMoreHandler = () => {
     let items = [...module.items];
     if (items.length > moduleItems.length) {
       items = items.filter(
-        (item, index) => index < moduleItems.length + parseInt(module.num_of_items)
+        (item, index) => index < moduleItems.length + parseInt(loadMore.increment)
       );
       setModuleItems(items);
     }
@@ -34,15 +33,16 @@ const Archive = ({ module, PaginationComponent, page }) => {
   updatedModule.items = moduleItems;
   return (
     <>
-      <Items module={updatedModule} page={page} />
-      {loadMore ? (
+      <Items module={updatedModule} page={page} gtmClass={gtmClass} />
+      {hasLoadMore ? (
         module.items.length > updatedModule.items.length && (
           <div className={styles.loadMoreWrapper}>
             <Button
-              btnText={translate(page.translations, 'load_more', 'Load More')}
+              btnText={translate(page?.translations, 'load_more', 'Load More')}
               onClick={loadMoreHandler}
               isButton
               primaryColor
+              gtmClass="archive-gtm btn-cta"
             />
           </div>
         )
@@ -51,7 +51,6 @@ const Archive = ({ module, PaginationComponent, page }) => {
           pagePath={module.rootPath}
           currentPage={module.currentPage}
           totalPages={module.numOfPages}
-          translations={page.translations}
         />
       ) : (
         <Pagination
@@ -72,7 +71,7 @@ Archive.propTypes = {
     numOfPages: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     items: PropTypes.arrayOf(PropTypes.object),
     pagination_type: PropTypes.string,
-    num_of_items: PropTypes.string,
+    num_of_items: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   }).isRequired,
   loadMore: PropTypes.shape({
     label: PropTypes.string,
@@ -83,8 +82,9 @@ Archive.propTypes = {
   }),
   PaginationComponent: PropTypes.oneOfType([PropTypes.element, PropTypes.node, PropTypes.any]),
   page: PropTypes.shape({
-    translations: PropTypes.object,
+    translations: PropTypes.shape({}),
   }),
+  gtmClass: PropTypes.string,
 };
 
 export default Archive;

package/src/components/organisms/cards/cards.stories.js

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import {
   Title,

package/src/components/organisms/cards/index.js

@@ -46,7 +46,7 @@ const Cards = ({ module, CustomCardComponent, page, desktopColumns = 4 }) => (
       {module.items &&
         module.items.map((item, index) => (
           <div key={keygen()}>
-            {CustomCardComponent !== undefined ? (
+            {CustomCardComponent ? (
               <CustomCardComponent
                 featured={module.style === 'featured'}
                 item={item}