gatsby-matrix-theme 7.1.35 → 7.1.38

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+## [7.1.38](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.37...v7.1.38) (2022-07-19)
+
+
+### Bug Fixes
+
+* module introduction for toplist modules ([21ce3ed](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/21ce3ed8f4eafecf7c7976c1e7f2ff31e85fd92a))
+
+## [7.1.37](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.36...v7.1.37) (2022-07-18)
+
+
+### Bug Fixes
+
+* bug fix on tab list ([e6ec7a7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e6ec7a76944d387227067982a69c87323994208f))
+* package.json ([e5044ba](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e5044baaa47ea241a2fac75af2b4e977e9faab7e))
+* react icons bundle ([1042298](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1042298228100c42e87bddc42348c7bf9936e55b))
+* toplist and cookie adjustments ([2890cf4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2890cf4f4343475ecbcc5cb5cc76d6623c699e6c))
+* update core version ([3ad36bd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3ad36bd274d11e3cb9ca03a27c839e98408f3971))
+* updated to latest core version ([a5fb938](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a5fb938c88d319f75761a4c67b5643b4bf093aa5))
+
+
+### Code Refactoring
+
+* responsive css for dropdown ([aca6b56](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/aca6b56ba79c2ec2f79939abf286d129ba232891))
+
+
+* Merge branch 'tm-2968-tablist-bugfix' into 'master' ([056285f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/056285f8bf5bf99293adb672f3b6d7696621b142))
+* Merge branch 'tm-2963-react-icons' into 'master' ([187f019](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/187f0192928a7e20b55e887a2c4cfc01bbef8847))
+* Merge branch 'tm-2965-dom-size' into 'master' ([d230947](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/d2309471ed714f8756105c490aa367c4a8588716))
+
+## [7.1.36](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.35...v7.1.36) (2022-07-13)
+
+
+### Bug Fixes
+
+* og:locale ([1b31363](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1b31363dc0c6aff4004c1925a76966a6a4bd13ec))
+
 ## [7.1.35](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v7.1.34...v7.1.35) (2022-07-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "7.1.35",
+  "version": "7.1.38",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -24,12 +24,12 @@
   },
   "dependencies": {
     "gatsby": "^4.15.0",
+    "gatsby-core-theme": "^8.0.10",
     "gatsby-plugin-sharp": "^4.10.2",
+    "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",
     "react": "^17.0.2",
-    "gatsby-plugin-sitemap": "^3.3.0",
-    "react-dom": "^17.0.2",
-    "gatsby-core-theme": "^8.0.8"
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",

package/src/components/atoms/cards/comparison-table/table/index.js

@@ -5,7 +5,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
-import { AiOutlineCheckCircle } from 'react-icons/ai';
+import { AiOutlineCheckCircle } from '@react-icons/all-files/ai/AiOutlineCheckCircle';
 import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImg from 'gatsby-core-theme/src/hooks/lazy-image';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/operator-cta';

package/src/components/atoms/link-menu/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FaChevronRight } from 'react-icons/fa';
+import { FaChevronRight } from '@react-icons/all-files/fa/FaChevronRight';
 
 import LinkList from 'gatsby-core-theme/src/components/molecules/link-list';
 import { getFirstModuleByName } from 'gatsby-core-theme/src/helpers/getters';

package/src/components/atoms/modal/index.js

@@ -1,37 +1,41 @@
-import React,{useEffect, useState} from 'react';
-import { MdClose } from 'react-icons/md'
-
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { MdClose } from '@react-icons/all-files/md/MdClose';
 import styles from './modal.module.scss';
 
-const Modal=({children})=>{
-    const [show, setShow] = useState(false)
-    
-    useEffect(()=>{
-        setShow(!show);
-    },[])
+const Modal = ({ children }) => {
+  const [show, setShow] = useState(false);
 
-    const handelClose = (e) =>{
-        if(e.target.className === styles.modal){
-            setShow(false)
-        }
-    }
+  useEffect(() => {
+    setShow(!show);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-    if(show)
-    {
-        return(
-            <div onClick={(e)=>handelClose(e)} className={`${styles.modal}`}>
-                <div className={styles.success}>
-                    {children}
-                    <MdClose className={styles.closeBtn} onClick={()=>setShow(false)} />
-                </div>
-            </div>
-        )
-    }
-    else{
-        return <></>
+  const handelClose = (e) => {
+    if (e.target.className === styles.modal) {
+      setShow(false);
     }
+  };
 
-   
-}
+  if (show) {
+    return (
+      <div
+        role="button"
+        aria-hidden="true"
+        onClick={(e) => handelClose(e)}
+        className={`${styles.modal}`}
+      >
+        <div className={styles.success}>
+          {children}
+          <MdClose className={styles.closeBtn} onClick={() => setShow(false)} />
+        </div>
+      </div>
+    );
+  }
 
-export default Modal;
+  return <></>;
+};
+Modal.propTypes = {
+  children: PropTypes.node,
+};
+export default Modal;

package/src/components/atoms/newsletter/success/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IoMdCheckmarkCircleOutline } from 'react-icons/io';
+import { IoMdCheckmarkCircleOutline } from '@react-icons/all-files/io/IoMdCheckmarkCircleOutline';
 
 import Modal from '../../modal/index';
 

package/src/components/atoms/search/autocomplete/article.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { GrFormNext } from 'react-icons/gr';
+import { GrFormNext } from '@react-icons/all-files/gr/GrFormNext';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 

package/src/components/atoms/search/autocomplete/game.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { GrFormNext } from 'react-icons/gr';
+import { GrFormNext } from '@react-icons/all-files/gr/GrFormNext';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 

package/src/components/atoms/search/autocomplete/operator.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { GrFormNext } from 'react-icons/gr';
+import { GrFormNext } from '@react-icons/all-files/gr/GrFormNext';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 

package/src/components/atoms/search/autocomplete/payment_methods.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { GrFormNext } from 'react-icons/gr';
+import { GrFormNext } from '@react-icons/all-files/gr/GrFormNext';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 

package/src/components/atoms/search/autocomplete/software_provider.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { GrFormNext } from 'react-icons/gr';
+import { GrFormNext } from '@react-icons/all-files/gr/GrFormNext';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import { splitSearchQuery } from '../../../../helpers/splitSearchQuery';
 

package/src/components/atoms/social-icons/index.js

@@ -1,5 +1,9 @@
 import React, { useContext } from 'react';
-import { FaInstagram, FaFacebookSquare, FaTwitter, FaLinkedin, FaYoutube } from 'react-icons/fa';
+import { FaInstagram } from '@react-icons/all-files/fa/FaInstagram';
+import { FaFacebookSquare } from '@react-icons/all-files/fa/FaFacebookSquare';
+import { FaTwitter } from '@react-icons/all-files/fa/FaTwitter';
+import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin';
+import { FaYoutube } from '@react-icons/all-files/fa/FaYoutube';
 import PropTypes from 'prop-types';
 import keygen from 'gatsby-core-theme/src/helpers/keygen';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';

package/src/components/atoms/table/column/index.js

@@ -2,7 +2,8 @@
 /* eslint-disable camelcase */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FaCheck, FaAngleDown } from 'react-icons/fa';
+import { FaCheck } from '@react-icons/all-files/fa/FaCheck';
+import { FaAngleDown } from '@react-icons/all-files/fa/FaAngleDown';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';

package/src/components/molecules/cookie-modal/category/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { AiOutlinePlus, AiOutlineMinus } from 'react-icons/ai';
+import { AiOutlinePlus } from '@react-icons/all-files/ai/AiOutlinePlus';
+import { AiOutlineMinus } from '@react-icons/all-files/ai/AiOutlineMinus';
 import ToggleButton from '../../../atoms/toggle-button/index';
 import { translate } from '~helpers/getters';
 import styles from './category.module.scss';

package/src/components/molecules/cookie-modal/index.js

@@ -2,7 +2,7 @@ import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
-import { MdClose } from 'react-icons/md';
+import { MdClose } from '@react-icons/all-files/md/MdClose';
 import { translate } from '~helpers/getters';
 import CategoryContainer from './category/index';
 import Button from '~atoms/button';

package/src/components/molecules/game-score-gauge/index.js

@@ -1,7 +1,9 @@
 /* eslint-disable react/prop-types */
-import { GiGamepad, GiPresent } from 'react-icons/gi';
+import { GiGamepad } from '@react-icons/all-files/gi/GiGamepad';
+import { GiPresent } from '@react-icons/all-files/gi/GiPresent';
+
 import React, { useContext } from 'react';
-import { TiImage } from 'react-icons/ti';
+import { TiImage } from '@react-icons/all-files/ti/TiImage';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import styles from './game-score-gauge.module.scss';

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

@@ -4,7 +4,7 @@
 /* eslint-disable no-nested-ternary */
 /* eslint-disable no-unused-expressions */
 import React, { useState, useRef } from 'react';
-import { MdClose } from 'react-icons/md';
+import { MdClose } from '@react-icons/all-files/md/MdClose';
 import PropTypes from 'prop-types';
 import { getUrl } from 'gatsby-core-theme/src/helpers/getters';
 import Button from '../../atoms/newsletter/toggle-button/index';

package/src/components/molecules/toplist/row/variant-one.js

@@ -1,7 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { MdCheck } from 'react-icons/md';
 import {
   prettyTracker,
   imagePrettyUrl,
@@ -29,6 +28,7 @@ export default function Row({
   number = 1,
   isPPC = false,
   showLaunchDate = true,
+  className,
 }) {
   const itemName = item.name;
   const itemRating = item.rating;
@@ -52,8 +52,8 @@ export default function Row({
   const launchDate = getLaunchDate(item.founded);
 
   return (
-    <div
-      className={`${styles.row} ${layout === 'grid' ? styles.grid : ''} ${
+    <li
+      className={`${className} ${styles.row} ${layout === 'grid' ? styles.grid : ''} ${
         showLaunchDate ? styles.launchDate : ''
       } ${!tandcEnabled ? styles.rowNoTandC : ''}`}
     >
@@ -127,7 +127,7 @@ export default function Row({
           </span>
         )}
       </a>
-      <SellingPoints icon={<MdCheck />} sellingPoints={sellingPoints} limit={3} />
+      <SellingPoints sellingPoints={sellingPoints} limit={3} />
 
       {showLaunchDate && (
         <div className={styles.launchDate}>
@@ -144,12 +144,13 @@ export default function Row({
       <OperatorCta operator={item} tracker={tracker} gtmClass="toplist-operator-cta-gtm" />
 
       {tandcEnabled && <Tnc onlyMobile={layout === 'list'} operator={item} />}
-    </div>
+    </li>
   );
 }
 
 Row.propTypes = {
   showLaunchDate: PropTypes.bool,
+  className: PropTypes.string,
   tracker: PropTypes.string,
   oneliner: PropTypes.string,
   layout: PropTypes.oneOf(['list', 'grid']),

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

@@ -8,7 +8,7 @@
 /* eslint-disable react/no-danger */
 import React, { useRef, useEffect, useState, useContext } from 'react';
 import PropTypes from 'prop-types';
-import { MdClose } from 'react-icons/md';
+import { MdClose } from '@react-icons/all-files/md/MdClose';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 import PopupCard from '../../atoms/cards/popup-card';

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

@@ -1,7 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { FaAngleRight } from 'react-icons/fa';
+import { FaAngleRight } from '@react-icons/all-files/fa/FaAngleRight';
 import { translate } from 'gatsby-core-theme/src/helpers/getters';
 import { Context } from 'gatsby-core-theme/src/context/TranslationsProvider';
 // eslint-disable-next-line import/no-extraneous-dependencies

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

@@ -2,7 +2,7 @@
 import React, { useState, useEffect, useRef, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
-import { FaSearch } from 'react-icons/fa';
+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';
@@ -415,7 +415,7 @@ Search.propTypes = {
   pageSearchOptions: PropTypes.shape({
     useArchive: PropTypes.bool,
     archiveOptions: PropTypes.shape({
-      titles: PropTypes.arrayOf(PropTypes.object),
+      titles: PropTypes.arrayOf(PropTypes.shape({})),
       includeOptions: PropTypes.objectOf(PropTypes.string),
     }),
     tabs: PropTypes.bool,

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

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { navigate } from 'gatsby';
@@ -22,7 +23,7 @@ const CookieConsent = ({
   // states
   // const [ck, setCk] = useState(true);
   // when component did mount or state has updated
-  const { showModal, setShowModal, ck, setCk } = useContext(ModalContext);
+  const { showModal, ck, setCk } = useContext(ModalContext);
   const { translations } = useContext(Context) || {};
 
   // when user declines
@@ -44,7 +45,6 @@ const CookieConsent = ({
             {settingsCookie && (
               <Modal>
                 <Button
-                  onClick={() => setShowModal(true)}
                   btnText={translate(translations, 'cookie_setting_button', 'Cookie Setting')}
                   isInternalLink={false}
                   isButton

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

@@ -19,7 +19,12 @@ export function getLanguage(language) {
 }
 
 export function getLocale(language) {
-  return language && language.split('_').reverse().join('_');
+  if (language) {
+    const locale = language.split('_').reverse();
+    locale[1] = locale[1].toUpperCase();
+    return locale.join('_');
+  }
+  return null;
 }
 
 export function getCanonicalUrl(page) {

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

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import loadable from '@loadable/component';
-import { FaSearch } from 'react-icons/fa';
+import { FaSearch } from '@react-icons/all-files/fa/FaSearch';
 
 import { toggleScroll } from 'gatsby-core-theme/src/helpers/scroll';
 

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

@@ -45,13 +45,17 @@ export default function List({
     hasLoadMoreButton === '1' && Number(initItemsCount) < toplist.items.length;
 
   function handleClick() {
-    const displayed = elRefs.current.filter((item) => item.classList.contains(styles.show)).length;
+    const displayed = elRefs.current.filter((item) =>
+      item.base.classList.contains(styles.show)
+    ).length;
 
     const nextItem = loadingItems + displayed;
     const lastItem =
       nextItem > elRefs.current.length ? elRefs.current.length + 1 : displayed + loadingItems;
 
-    elRefs.current.slice(displayed, lastItem).forEach((item) => item.classList.toggle(styles.show));
+    elRefs.current
+      .slice(displayed, lastItem)
+      .forEach((item) => item.base.classList.toggle(styles.show));
     forceCheck();
 
     if (loadingItems + displayed >= elRefs.current.length) {
@@ -62,26 +66,23 @@ export default function List({
   return (
     <>
       <ul className={styles.list} key={keygen()}>
-        {items.map((item, index) => (
-          <li
-            className={index + 1 <= initLoadItems ? styles.show : null}
-            key={keygen()}
-            ref={(el) => addToRefs(el, index)}
-          >
-            {CustomRow ? (
-              <CustomRow
-                pagePath={pagePath}
-                item={item}
-                tracker={toplist.tracker}
-                oneliner={toplist.one_liner}
-                isPPC={isPPCPage}
-                index={index}
-              />
-            ) : (
-              <Row item={item} tracker={toplist.tracker} oneliner={toplist.one_liner} />
-            )}
-          </li>
-        ))}
+        {items.map((item, index) =>
+          CustomRow ? (
+            <CustomRow
+              pagePath={pagePath}
+              item={item}
+              tracker={toplist.tracker}
+              oneliner={toplist.one_liner}
+              isPPC={isPPCPage}
+              index={index}
+              className={index + 1 <= initLoadItems ? styles.show : null}
+              key={keygen()}
+              ref={(el) => addToRefs(el, index)}
+            />
+          ) : (
+            <Row item={item} tracker={toplist.tracker} oneliner={toplist.one_liner} />
+          )
+        )}
       </ul>
       {showLoadMoreButton && (
         <div ref={loadMoreBtn} className={styles.loadMore}>

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

@@ -12,7 +12,7 @@
     display: none;
 
     &.show {
-      display: block;
+      display: grid;
     }
 
     &:before {

package/src/gatsby-core-theme/components/pages/body/index.js

@@ -12,8 +12,7 @@ import Header from 'gatsby-core-theme/src/components/molecules/header';
 import ModalProvider from 'gatsby-core-theme/src/hooks/modal/modalContext';
 import ModalContent from 'gatsby-core-theme/src/hooks/modal/modal-content';
 import Footer from '../../molecules/footer';
-import CookieModal from '../../../../components/molecules/cookie-modal';
-
+import { getCookie } from '~helpers/cookies';
 import LinkMenu from '../../../../components/atoms/link-menu';
 import FooterTop from '../../../../components/atoms/footer/top';
 import FooterBottom from '../../../../components/atoms/footer/bottom';
@@ -50,7 +49,8 @@ function Body({ pageContext, children, excludeTemplateInPopup = [], hideOperator
   const isHomePage = pageContext?.page && pageContext?.page.path === '/';
   const pageType = pageContext.page.type;
   const is404 = pageContext.page.path.includes('404');
-
+  const cookieConsentAccepted =
+    (typeof window !== 'undefined' && Boolean(getCookie('CookieConsent'))) || false;
   const Popup = pageContext?.marketSections?.popup
     ? loadable(() => import(`../../../../components/organisms/popup`))
     : null;
@@ -83,6 +83,10 @@ function Body({ pageContext, children, excludeTemplateInPopup = [], hideOperator
       ? loadable(() => import(`gatsby-core-theme/src/components/molecules/operator-banner`))
       : null;
 
+  const CookieModal = !cookieConsentAccepted
+    ? loadable(() => import('../../../../components/molecules/cookie-modal'))
+    : null;
+
   return (
     <>
       {navigation && (
@@ -143,19 +147,23 @@ function Body({ pageContext, children, excludeTemplateInPopup = [], hideOperator
         hasFooterLinks={FooterNavigation !== null}
       />
       <ModalProvider>
-        <CookieConsent template={template} settingsCookie>
-          <p>
-            We use cookies in order to optimise our site and improve your experience with us. By
-            using the site you consent to our
-            <a href="/cookies" className="cookie-consent-gtm">
-              &nbsp; Cookie Policy
-            </a>
-            .
-          </p>
-        </CookieConsent>
-        <ModalContent>
-          <CookieModal />
-        </ModalContent>
+        <>
+          <CookieConsent template={template} settingsCookie>
+            <p>
+              We use cookies in order to optimise our site and improve your experience with us. By
+              using the site you consent to our
+              <a href="/cookies" className="cookie-consent-gtm">
+                &nbsp; Cookie Policy
+              </a>
+              .
+            </p>
+          </CookieConsent>
+          {CookieModal && (
+            <ModalContent>
+              <CookieModal />
+            </ModalContent>
+          )}
+        </>
       </ModalProvider>
       {!excludeTemplateInPopup.includes(pageContext?.page?.template) && Popup && popupData && (
         <Popup module={popupData} />

package/src/hooks/tabs/index.js

@@ -128,10 +128,10 @@ const Tabs = ({
             <></>
           )}
         </div>
-        {ModuleIntro && <ModuleIntro content={module.module_introduction} />}
+
         {HeaderComp && <div className={styles.headerComp}>{HeaderComp}</div>}
       </div>
-
+      {ModuleIntro && <ModuleIntro content={module.module_introduction} />}
       <div className="tab-content">
         {children.map((child, index) => {
           if (

package/src/hooks/tabs/tab/tab-list.module.scss

@@ -2,7 +2,6 @@
   @include flex-align(center, flex-start);
   position: relative;
   margin: 2rem 0;
-  float: right;
   &.right {
     display: unset;
     @include min(tablet){
@@ -24,7 +23,7 @@
     width: 100%;
     background: white;
     border-radius: 6px;
-    padding: 1.5rem 2rem;
+    padding: 1.5rem 3rem 1.5rem 2rem;
     text-align: left;
     font-size: 1.6rem;
     color: #08202e;

package/src/hooks/tabs/tabs.module.scss

@@ -60,6 +60,17 @@
       @include flex-align(center, flex-start);
       display: block;
     }
+
+    .titleAndTab {
+      flex-direction: row;
+
+      button,
+      ol {
+        @include min(tablet) {
+          width: 100%;
+        }
+      }
+    }
   }
 
   h2 {
@@ -71,6 +82,7 @@
   width: 100%;
   display: flex;
   justify-content: space-between;
+  flex-direction: column;
 }
 
 .title {