gatsby-matrix-theme 8.0.1 → 8.0.2

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+## [8.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v8.0.1...v8.0.2) (2022-10-21)
+
+
+### Bug Fixes
+
+* aligned with master and fixes ([6966281](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/69662815a0359cec2f0973613899d4f2eb80a41a))
+* fixed conflict ([c9609b2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c9609b2b1fbf2684614a59dee7d61f3f1914a5e3))
+* tests ([5340d2c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5340d2ce4da606f949e6849aae83ae8a138cf543))
+
+
+### Code Refactoring
+
+* update tabs loading in search and toplist ([ba81a0b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ba81a0b9b3c5f2338f4bf82d61f1b0f73aeb8ed5))
+* update toplist code splitting ([f4e73eb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/f4e73eb0dfc63dd16081bdc6a677f90ad7e95926))
+* update toplist title contex import ([552339c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/552339c82bb7ad4bb944496f32a5822b5fa97768))
+
+
+* Merge branch 'tm-3076-pagespeed-improvements-toplist-tabs' into 'master' ([b1067ea](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b1067ea6318efb077ee98463bde0cd4988f0edf7))
+
 ## [8.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v8.0.0...v8.0.1) (2022-10-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",

package/src/gatsby-core-theme/components/atoms/author/index.js

@@ -23,7 +23,7 @@ const Author = ({
   dateFormat = 'DD.MM.YYYY',
   isCardsAuthor = false,
   reviewer,
-  clock = '../../../images/clock.svg'
+  clock = '../../../images/clock.svg',
 }) => {
   const { translations } = useContext(Context) || {};
   const prefixstyle = !link || !authorImg;
@@ -33,7 +33,11 @@ const Author = ({
     : translate(translations, 'written_by', 'Written by');
 
   return (
-    <div className={`${styles.authorWraper} ${isCardsAuthor && styles.authorCard} ${styles.authorSeparator}`}>
+    <div
+      className={`${styles.authorWraper} ${isCardsAuthor && styles.authorCard} ${
+        styles.authorSeparator
+      }`}
+    >
       {name && (
         <div className={`${styles.infoContainer} ${isCardsAuthor && styles.infoCardContainer}`}>
           <p className={`${styles.prefixStyle} ${prefixstyle && styles.prefixCardText}`}>
@@ -65,8 +69,10 @@ const Author = ({
       )}
       {readingTime && !isCardsAuthor && (
         <div className={date && styles.readingWithBorder}>
-          <img className={styles.clock} src={clock} alt='clock' />
-          <span className={styles.readingTimeText}>{translate(translations, 'reading_time', 'Reading time')}</span>
+          <img className={styles.clock} src={clock} alt="clock" />
+          <span className={styles.readingTimeText}>
+            {translate(translations, 'reading_time', 'Reading time')}
+          </span>
           {` ${readingTime} ${translate(translations, 'minutes', 'min')}`}
           <span className={styles.readText}>{translate(translations, 'read', 'read')}</span>
         </div>
@@ -75,9 +81,7 @@ const Author = ({
         <div className={styles.dateTimeWrapper}>
           {!isCardsAuthor && <span>{translate(translations, 'published_on', 'Published on')}</span>}
           {` `}
-          <a 
-            href='#authorbox'
-            className={!isCardsAuthor && styles.dateLink}>
+          <a href="#authorbox" className={!isCardsAuthor && styles.dateLink}>
             {formatDate(date, dateFormat, splitDateFormat, 'en-GB')}
           </a>
         </div>
@@ -105,4 +109,4 @@ Author.propTypes = {
   clock: PropTypes.string,
 };
 
-export default Author;
+export default Author;

package/src/gatsby-core-theme/components/molecules/main/index.js

@@ -10,7 +10,7 @@ import styles from 'gatsby-core-theme/src/components/molecules/main/main.module.
 import keygen from 'gatsby-core-theme/src/helpers/keygen';
 import settings from '../../../../constants/settings/newsletter';
 
-const Main = ({ section = {}, pageContext = {}, showAuthor = true, }) => {
+const Main = ({ section = {}, pageContext = {}, showAuthor = true }) => {
   const { page } = pageContext;
   const siteName = process.env.GATSBY_SITE_NAME;
   const showNewsletter = !(
@@ -38,7 +38,11 @@ const Main = ({ section = {}, pageContext = {}, showAuthor = true, }) => {
     : null;
   const AuthorBox = page.author_id ? loadable(() => import(`~atoms/author-box`)) : null;
   const Author =
-    page.path !== '/' && page.path !== 'contact-us' && page.path !== 'news' && page.author && showAuthor
+    page.path !== '/' &&
+    page.path !== 'contact-us' &&
+    page.path !== 'news' &&
+    page.author &&
+    showAuthor
       ? loadable(() => import('~atoms/author'))
       : null;
   const Feedback =
@@ -72,14 +76,15 @@ const Main = ({ section = {}, pageContext = {}, showAuthor = true, }) => {
           />
         ))}
       {SearchPage && <SearchPage page={page} />}
-      {AuthorBox && 
-        <AuthorBox 
-          author={page.author} 
+      {AuthorBox && (
+        <AuthorBox
+          author={page.author}
           page={page}
           date={page.updated_at ? page.updated_at : page.created_at}
           readingTime={page.reading_time}
-          reviewer={page.reviewer_id && page?.reviewer} />
-      }
+          reviewer={page.reviewer_id && page?.reviewer}
+        />
+      )}
       {Feedback && (
         <Feedback
           trueVotes={page?.true_votes}

package/src/gatsby-core-theme/components/molecules/search/index.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
 import { FaSearch } from '@react-icons/all-files/fa/FaSearch';
 import loadable from '@loadable/component';
-import Tabs from 'gatsby-matrix-theme/src/hooks/tabs';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 
@@ -256,6 +255,11 @@ const Search = ({
       </button>
     );
   }
+
+  const Tabs =
+    searchResultsRef.current.length !== 0 &&
+    loadable(() => import('gatsby-core-theme/src/hooks/tabs'));
+
   return (
     <>
       {formSearchOptionsCopy !== null && (

package/src/gatsby-core-theme/components/organisms/toplist/index.js

@@ -1,48 +1,73 @@
 /* eslint-disable react/forbid-prop-types */
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import PropTypes from 'prop-types';
-// eslint-disable-next-line import/no-extraneous-dependencies
+import loadable from '@loadable/component';
 import keygen from '~helpers/keygen';
 import List from './list';
-import Tabs from '~hooks/tabs';
 import Row from '../../../../components/molecules/toplist/row/variant-one';
+import styles from './toplist.module.scss';
 
-// eslint-disable-next-line no-unused-vars
-const TopList = ({ module, toplistHeading, CustomRow, page, isHomepageFirstModule = false }) => {
-  const template = page?.template;
+const TopList = ({
+  module,
+  toplistHeading,
+  CustomRow = Row,
+  page,
+  isHomepageFirstModule = false,
+}) => {
+  const showTabs = module.items.length > 1;
+  const content = module.items.map((toplist) => (
+    <div label={toplist.title} key={keygen()}>
+      {toplistHeading}
+      <List
+        pagePath={page.path}
+        toplist={toplist}
+        CustomRow={CustomRow}
+        modulestyle={module?.style}
+        hasLoadMoreButton={toplist.show_load_more}
+        initItemsCount={toplist.num_items_initial_load}
+        loadItemsCount={toplist.num_items_load_more}
+        pageTemplate={page?.template}
+      />
+    </div>
+  ));
 
-  return (
+  const Tabs = showTabs && loadable(() => import('~hooks/tabs'));
+  const Title =
+    !showTabs &&
+    (module.title || module.module_title) &&
+    loadable(() => import('gatsby-matrix-theme/src/gatsby-core-theme/hooks/tabs/title'));
+  const ModuleIntro =
+    !showTabs && module.module_introduction && loadable(() => import('~molecules/content'));
+
+  return showTabs ? (
     <Tabs
-      title={module.title}
       module={module}
       tabsAlign="right"
       gtmClass="toplist-tabs-menu-gtm"
       isHomepageFirstModule={isHomepageFirstModule}
     >
-      {module.items.map((toplist) => (
-        <div label={toplist.title} key={keygen()}>
-          {toplistHeading}
-          <List
-            pagePath={page.path}
-            toplist={toplist}
-            CustomRow={Row}
-            modulestyle={module?.style}
-            hasLoadMoreButton={toplist.show_load_more}
-            initItemsCount={toplist.num_items_initial_load}
-            loadItemsCount={toplist.num_items_load_more}
-            pageTemplate={template}
-          />
-        </div>
-      ))}
+      {content}
     </Tabs>
+  ) : (
+    <>
+      {Title && (
+        <div className={`${styles.tabsHeader} ${styles.titleAndTab}`}>
+          <Title module={module} />
+        </div>
+      )}
+      {ModuleIntro && <ModuleIntro module={{ value: module.module_introduction }} />}
+      {content}
+    </>
   );
 };
 
 TopList.propTypes = {
   module: PropTypes.shape({
-    items: PropTypes.arrayOf(PropTypes.object),
+    items: PropTypes.arrayOf(PropTypes.shape({})),
     title: PropTypes.string,
+    module_title: PropTypes.string,
+    module_introduction: PropTypes.string,
     style: PropTypes.string,
   }),
   isHomepageFirstModule: PropTypes.bool,

package/src/gatsby-core-theme/components/organisms/toplist/toplist.module.scss

@@ -0,0 +1,18 @@
+.tabsHeader {
+  margin-bottom: 2rem !important;
+  display: grid;
+  grid-template-columns: auto;
+  @include min(tablet) {
+    grid-template-columns: 1fr;
+  }
+  h2 {
+    margin: 0;
+  }
+}
+
+.titleAndTab {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+}

package/src/gatsby-core-theme/hooks/tabs/index.js

@@ -1,6 +1,90 @@
-import React from 'react';
-import TabListMatrix from '../../../hooks/tabs/index';
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
+import styles from './tabs.module.scss';
 
-const TabList = (props) => <TabListMatrix {...props} />;
+const Tabs = ({
+  module = {},
+  siteName = '',
+  children,
+  showAll,
+  tabsAlign,
+  activeTabClass = '',
+  HeaderComp,
+  headerClass = '',
+  gtmClass = '',
+}) => {
+  const showAllTabId = `${showAll}_0`;
+  const [activeTab, setActiveTab] = useState(
+    showAll ? showAllTabId : `${children[0].props.label}_0`
+  );
+  const Title =
+    module?.name === 'top_list' &&
+    (module?.title || module?.module_title) &&
+    loadable(() => import('./title'));
+  const TabList = children.length > 1 && loadable(() => import('./tab/tab-list'));
+  const { forceCheck } = TabList && loadable(() => import('react-lazyload'));
+  const ModuleIntro = module.module_introduction && loadable(() => import('~molecules/content'));
+  const tabHeaderClass = `${styles.tabsHeader} ${!HeaderComp && styles.tabsOnly} ${
+    styles[headerClass]
+  } ${tabsAlign === 'right' && styles.invertOrder}`;
 
-export default TabList;
+  return (
+    <>
+      <div className={tabHeaderClass}>
+        <div className={styles.titleAndTab}>
+          {Title && <Title module={module} />}
+          {TabList && (
+            <TabList
+              siteName={siteName}
+              title={module.title}
+              onClick={(tabId) => {
+                setActiveTab(tabId);
+                setTimeout(forceCheck);
+              }}
+              items={children}
+              activeTab={activeTab}
+              activeTabClass={activeTabClass}
+              showAll={showAll}
+              alignRight={tabsAlign === 'right'}
+              module={module}
+              gtmClass={gtmClass}
+            />
+          )}
+        </div>
+        {HeaderComp && <div className={styles.headerComp}>{HeaderComp}</div>}
+      </div>
+      {ModuleIntro && <ModuleIntro module={{ value: module.module_introduction }} />}
+      <div className="tab-content">
+        {children.map(
+          (child, index) =>
+            child !== null &&
+            (`${child.props.label}_${showAll ? index + 1 : index}` === activeTab ||
+              activeTab === showAllTabId) &&
+            child.props.children
+        )}
+      </div>
+    </>
+  );
+};
+
+Tabs.defaultProps = {
+  showAll: null,
+};
+
+Tabs.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.any).isRequired,
+  showAll: PropTypes.string,
+  tabsAlign: PropTypes.string,
+  activeTabClass: PropTypes.string,
+  HeaderComp: PropTypes.objectOf(PropTypes.any),
+  headerClass: PropTypes.string,
+  module: PropTypes.shape({}),
+  siteName: PropTypes.string,
+  gtmClass: PropTypes.string,
+};
+
+export default Tabs;

package/src/{hooks → gatsby-core-theme/hooks}/tabs/tab/tab-list.js

@@ -1,7 +1,9 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import Tab from 'gatsby-matrix-theme/src/hooks/tabs/tab/tab';
+import Tab from 'gatsby-core-theme/src/hooks/tabs/tab/tab';
 import styles from './tab-list.module.scss';
 import keygen from '~helpers/keygen';
 import useWindowSize from '~hooks/useWindowSize';

package/src/{hooks → gatsby-core-theme/hooks}/tabs/tab/tab.js

@@ -1,3 +1,5 @@
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
 import styles from './tab.module.scss';

package/src/{hooks → gatsby-core-theme/hooks}/tabs/tabs.module.scss

@@ -5,18 +5,6 @@
     grid-template-columns: max-content;
     margin-bottom: 2rem;
   }
-  .noTag {
-    display: block;
-    color: var(--heading-base-color);
-    margin: 1rem 0.3rem 0 0;
-    font: {
-      weight: bold;
-      size: var(--h2-mobile-size);
-    }
-    @include min(tablet) {
-      font-size: var(--h2-size);
-    }
-  }
   @include min(tablet) {
     grid-template-columns: 1fr 0.4fr;
     &.tabsonly {
@@ -28,21 +16,6 @@
       margin-bottom: 2rem;
     }
   }
-  .toplistDate {
-    color: var(--color-6);
-    font-weight: 300;
-    font-size: 1.4rem;
-    padding-left: 0.5rem;
-    display: inline-block;
-    position: relative;
-    top: -4px;
-    small {
-      padding-right: 0.5rem;
-      font-size: 1.2rem;
-      font-weight: 400;
-    }
-  }
-
   &.invertOrder {
     display: flex;
     justify-content: space-between;
@@ -85,10 +58,6 @@
   flex-direction: column;
 }
 
-.title {
-  margin: 2rem 0;
-}
-
 .headerComp {
   select {
     margin: 2rem 0;
@@ -107,4 +76,4 @@
 
 .titleContainer {
   @include flex-align(center, center);
-}
+}

package/src/gatsby-core-theme/hooks/tabs/title/index.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable react/jsx-no-bind */
+/* eslint-disable react/forbid-prop-types */
+/* eslint-disable import/no-extraneous-dependencies */
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
+import styles from './title.module.scss';
+
+const TabsTitle = ({ module }) => {
+  const TitleTag = module?.module_title_tag
+    ? `${module?.module_title_tag}`
+    : module?.module_title
+    ? 'span'
+    : 'h2';
+  const showDate = module?.show_last_updated_date;
+  const { Context = {} } =
+    showDate && loadable(() => import('gatsby-core-theme/src/context/TranslationsProvider'));
+  const { translations } = useContext(Context) || {};
+  const { translate } = showDate && loadable(() => import('gatsby-core-theme/src/helpers/getters'));
+  const { getDate } = showDate && loadable(() => import('../../../../helpers/strings'));
+  const { month, year } = showDate && getDate();
+  const titleText = module?.module_title || module?.title;
+
+  return (
+    <TitleTag className={styles.noTag}>
+      {module?.module_title_tag ? <div className={styles.title}>{titleText}</div> : titleText}
+      {showDate && (
+        <span className={styles.toplistDate}>
+          <small>•</small>
+          {`${translate(translations, month, month)} ${year}`}
+        </span>
+      )}
+    </TitleTag>
+  );
+};
+
+TabsTitle.propTypes = {
+  module: PropTypes.shape({
+    title: PropTypes.string,
+    module_title: PropTypes.string,
+    module_title_tag: PropTypes.string,
+    show_last_updated_date: PropTypes.string,
+  }),
+};
+
+export default TabsTitle;

package/src/gatsby-core-theme/hooks/tabs/title/title.module.scss

@@ -0,0 +1,29 @@
+.title {
+  margin: 2rem 0;
+}
+.noTag {
+  display: block;
+  color: var(--heading-base-color);
+  margin: 1rem 0.3rem 0 0;
+  font: {
+    weight: bold;
+    size: var(--h2-mobile-size);
+  }
+  @include min(tablet) {
+    font-size: var(--h2-size);
+  }
+}
+.toplistDate {
+  color: var(--color-6);
+  font-weight: 300;
+  font-size: 1.4rem;
+  padding-left: 0.5rem;
+  display: inline-block;
+  position: relative;
+  top: -4px;
+  small {
+    padding-right: 0.5rem;
+    font-size: 1.2rem;
+    font-weight: 400;
+  }
+}

package/src/helpers/strings.js

@@ -72,3 +72,31 @@ export function transformMetaTitle(relation, metaTitle, type) {
       return metaTitle;
   }
 }
+
+const monthNames = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+];
+
+export const getDate = () => {
+  const dateTime = new Date();
+  const date = dateTime.getDate();
+  const month = monthNames[dateTime.getMonth()];
+  const year = dateTime.getFullYear();
+
+  return {
+    date,
+    month,
+    year,
+  };
+};

package/src/helpers/strings.test.js

@@ -7,6 +7,7 @@ import {
   getTwitterUsername,
   getLaunchDate,
   transformMetaTitle,
+  getDate,
 } from './strings';
 
 describe('String helper component', () => {
@@ -53,4 +54,8 @@ describe('String helper component', () => {
   test('Meta title other types', () => {
     expect(transformMetaTitle(singleToplistData.items[0].items[0], 'Page', 'page')).toBe('Page');
   });
+
+  test('Get date', () => {
+    expect(getDate()).toBeTruthy();
+  });
 });

package/src/hooks/tabs/index.js

@@ -1,174 +0,0 @@
-/* eslint-disable react/forbid-prop-types */
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable import/no-extraneous-dependencies */
-import React, { useContext, useState } from 'react';
-import PropTypes from 'prop-types';
-import { forceCheck } from 'react-lazyload';
-import loadable from '@loadable/component';
-import { translate } from 'gatsby-core-theme/src/helpers/getters';
-import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
-import styles from './tabs.module.scss';
-
-const Tabs = ({
-  title = '',
-  module = {},
-  siteName = '',
-  children,
-  showAll,
-  tabsAlign,
-  activeTabClass = '',
-  HeaderComp,
-  headerClass = '',
-  gtmClass = '',
-  isHomepageFirstModule = false,
-}) => {
-  const showAllTabId = `${showAll}_0`;
-  const showTabs = children.length > 1;
-  const [activeTab, setActiveTab] = useState(
-    showAll ? showAllTabId : `${children[0].props.label}_0`
-  );
-
-  const TabList = showTabs ? loadable(() => import('./tab/tab-list')) : null;
-  const CustomTag = `${module?.module_title_tag}`;
-  const { translations } = useContext(Context) || {};
-  const monthNames = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ];
-  const d = new Date();
-  const year = d.getFullYear();
-  const month = monthNames[d.getMonth()];
-  const currentMonth = module?.show_last_updated_date
-    ? translate(translations, month, month)
-    : false;
-
-  const tabHeaderClass = `${styles.tabsHeader} ${!HeaderComp && styles.tabsOnly} ${
-    styles[headerClass]
-  } ${tabsAlign === 'right' && styles.invertOrder} ${
-    isHomepageFirstModule && styles.tabsHeaderFirstModule
-  }`;
-  const getTitle = () => {
-    if (!module?.module_title && !module?.title) {
-      return null;
-    }
-
-    if (!module?.module_title) {
-      return (
-        <h2 className={styles.noTag}>
-          {module.title}
-          {currentMonth ? (
-            <span className={styles.toplistDate}>
-              <small>•</small>
-              {`${currentMonth} ${year}`}
-            </span>
-          ) : null}
-        </h2>
-      );
-    }
-
-    if (module?.module_title_tag)
-      return (
-        <CustomTag className={styles.titleContainer}>
-          <div className={styles.title}>{module.module_title}</div>
-          {currentMonth ? (
-            <span className={styles.toplistDate}>
-              <small>•</small>
-              {`${currentMonth} ${year}`}
-            </span>
-          ) : null}
-        </CustomTag>
-      );
-    return (
-      <span className={styles.noTag}>
-        {module.module_title}
-        {currentMonth ? (
-          <span className={styles.toplistDate}>
-            <small>•</small>
-            {`${currentMonth} ${year}`}
-          </span>
-        ) : null}
-      </span>
-    );
-  };
-
-  function onClickTabItem(tabId) {
-    setActiveTab(tabId);
-    setTimeout(forceCheck);
-  }
-
-  const ModuleIntro = module.module_introduction && loadable(() => import('~molecules/content'));
-
-  return (
-    <>
-      <div className={tabHeaderClass}>
-        <div className={styles.titleAndTab}>
-          {module.name === 'top_list' && getTitle(module)}
-          {TabList ? (
-            <TabList
-              siteName={siteName}
-              title={title}
-              onClick={onClickTabItem}
-              items={children}
-              activeTab={activeTab}
-              activeTabClass={activeTabClass}
-              showAll={showAll}
-              alignRight={tabsAlign === 'right'}
-              module={module}
-              gtmClass={gtmClass}
-            />
-          ) : (
-            <></>
-          )}
-        </div>
-        {HeaderComp && <div className={styles.headerComp}>{HeaderComp}</div>}
-      </div>
-      {ModuleIntro && (
-        <ModuleIntro
-          module={{ value: module.module_introduction }}
-          isHomepageFirstModule={isHomepageFirstModule}
-        />
-      )}
-      <div className="tab-content">
-        {children.map((child, index) => {
-          if (
-            child === null ||
-            (`${child.props.label}_${showAll ? index + 1 : index}` !== activeTab &&
-              activeTab !== showAllTabId)
-          )
-            return undefined;
-          return child.props.children;
-        })}
-      </div>
-    </>
-  );
-};
-
-Tabs.defaultProps = {
-  showAll: null,
-};
-
-Tabs.propTypes = {
-  children: PropTypes.arrayOf(PropTypes.any).isRequired,
-  showAll: PropTypes.string,
-  isHomepageFirstModule: PropTypes.bool,
-  tabsAlign: PropTypes.string,
-  activeTabClass: PropTypes.string,
-  HeaderComp: PropTypes.objectOf(PropTypes.any),
-  headerClass: PropTypes.string,
-  title: PropTypes.string,
-  module: PropTypes.shape({}),
-  siteName: PropTypes.string,
-  gtmClass: PropTypes.string,
-};
-
-export default Tabs;