gatsby-matrix-theme 37.0.7 → 37.0.9

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+## [37.0.9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.8...v37.0.9) (2023-11-23)
+
+
+### Bug Fixes
+
+* update to latest theme ([b64f909](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b64f90998035c6a60837178f0e97d58f6edf4ba4))
+
+## [37.0.8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.7...v37.0.8) (2023-11-22)
+
+
+### Bug Fixes
+
+* add storybook ([dc13fe4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/dc13fe483c99c8a76923bb6c32a2c99b3220cb5a))
+* clean up ([7b92d6b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7b92d6b251e7fe2db17998abb264ba74e73606c7))
+* clean up ([5bc173d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5bc173d4f0cad7e574eff9cdae88b35d8e94a0c5))
+* cleanup cards ([6c48ddd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6c48ddda337ee792b429d60befecf81866364a3d))
+* enable scroll event ([0d7727a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0d7727addc581359506e5792bce98d3fd6553265))
+* fix tests ([926861b](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/926861bd225f3fda9d8ab26144bc7a46151f2541))
+* follow standart name ([035e8c1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/035e8c1da442c10201b5b52cd06cc034d629be2c))
+* maket logic ([c8ef3a6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c8ef3a67a4e11f92aa1e67ee3e73e0bbc02d593d))
+* rename storybook ([668fb3d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/668fb3d2dd29b0fa82618b1271da7fad0f1d4303))
+* scroll left first time is zero and we need to add shift space ([0f4beb0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0f4beb00f355469cbff874ac63a54de1a889a96c))
+* template cards img ([012bfc9](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/012bfc9e22dd6c6a93916ff351f1a0d55f02c672))
+* update theme ([0b4d6db](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0b4d6dbf7ca0f2e78cf5bb96b92b08a3452955da))
+* updated to latest core theme ([c501e57](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c501e57804b49d8d2aaec7e84e2b8c06734072bb))
+
+
+* Merge branch 'cleanup' into 'master' ([3291de0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3291de071f91d600349dcc5ed3db1b770672b8f4))
+* Merge branch 'tm-3814' into 'master' ([ac45c76](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ac45c765808289b5955a7af361ed477374a93d9c))
+
 ## [37.0.7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v37.0.6...v37.0.7) (2023-11-17)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "37.0.7",
+  "version": "37.0.9",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "30.0.19",
+    "gatsby-core-theme": "30.0.24",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^5.11.0",

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

@@ -102,6 +102,7 @@ export default function ComparisonTable({
               <span>{itemName}</span>
               {item?.relation?.status !== 'not_recommended' && (
                 <OperatorCta
+                  module="comparison-table"
                   tracker="main"
                   operator={item?.relation}
                   translationsObj={{

package/src/components/atoms/cards/game-cards/template-five/index.js

@@ -106,6 +106,7 @@ const TemplateFive = ({
             <>
               {operator && operator.status !== 'not_recommended' ? (
                 <OperatorCta
+                  module="cards_v2"
                   tracker="main"
                   operator={operator}
                   translationsObj={{

package/src/components/atoms/cards/game-cards/template-four/index.js

@@ -92,6 +92,7 @@ const TemplateFour = ({
               {operator && operator.status !== 'not_recommended' ? (
                 <OperatorCta
                   tracker="main"
+                  module="cards_v2"
                   operator={operator}
                   translationsObj={{
                     active: { translationKey: 'play_now_game', defaultValue: 'Play for Real' },

package/src/components/atoms/cards/game-cards/template-one/index.js

@@ -92,6 +92,7 @@ const TemplateOne = ({
             {operator && operator.status !== 'not_recommended' ? (
               <OperatorCta
                 tracker="main"
+                module="cards_v2"
                 operator={operator}
                 translationsObj={{
                   active: { translationKey: 'play_now_game', defaultValue: 'Play for Real' },

package/src/components/atoms/cards/game-cards/template-three/index.js

@@ -90,6 +90,7 @@ const TemplateThree = ({
             <>
               {operator && operator.status !== 'not_recommended' ? (
                 <OperatorCta
+                  module="cards_v2"
                   tracker="main"
                   operator={operator}
                   translationsObj={{

package/src/components/atoms/cards/game-cards/template-two/index.js

@@ -92,6 +92,7 @@ const TemplateTwo = ({
             <>
               {operator && operator.status !== 'not_recommended' ? (
                 <OperatorCta
+                  module="cards_v2"
                   tracker="main"
                   operator={operator}
                   translationsObj={{

package/src/components/atoms/cards/operator-card/template-one/index.js

@@ -84,6 +84,7 @@ const TemplateOne = ({
           {relation?.status !== 'not_recommended' && (
             <OperatorCta
               tracker="main"
+              module="cards_v2"
               operator={relation}
               buttonSize="m"
               translationsObj={{

package/src/components/atoms/cards/operator-card/template-three/index.js

@@ -61,6 +61,7 @@ const TemplateThree = ({
               <OperatorCta
                 tracker="main"
                 buttonSize="m"
+                module="cards_v2"
                 operator={relation}
                 translationsObj={{
                   active: { translationKey: 'play_now', defaultValue: 'Play Now' },

package/src/components/atoms/cards/popup-card/index.js

@@ -43,6 +43,7 @@ const PopupCard = ({
       <div className={styles?.buttonContainer || ''}>
         <OperatorCta
           tracker={tracker}
+          module="Popup"
           operator={item}
           buttonSize={buttonSize}
           buttonType={buttonType}

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

@@ -63,7 +63,11 @@ const Index = ({
                 <p>{item.name}</p>
               </div>
               <div className={styles?.cta || ''}>
-                <OperatorCta operator={item} gtmClass="table-operator-cta-gtm" />
+                <OperatorCta
+                  module="comparison_table"
+                  operator={item}
+                  gtmClass="table-operator-cta-gtm"
+                />
               </div>
             </div>
           </td>

package/src/components/molecules/operator-exclusive/index.js

@@ -60,6 +60,7 @@ const Banner = ({ bonus, template, closeButtonIcon = true }) => {
               <div className={styles?.button || ''}>
                 <OperatorCta
                   operator={bonus.value}
+                  module="exclusive_operator"
                   translationsObj={{
                     active: { translationKey: 'play_now', defaultValue: 'Play now' },
                     not_recommended: {

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

@@ -59,6 +59,7 @@ export default function Row({
         operator={item}
         tracker={tracker}
         gtmClass="toplist-operator-cta-gtm"
+        module="top_list"
         pageTemplate={template}
       />
     </>

package/src/components/molecules/wagering-calculator/index.js

@@ -201,7 +201,12 @@ const WageringCalculator = ({
                     />
                   </a>
                   <Bonus item={operator} tracker="main" />
-                  <OperatorCta operator={operator} tracker="main" buttonType={buttonType} />
+                  <OperatorCta
+                    module="wagering_calculator"
+                    operator={operator}
+                    tracker="main"
+                    buttonType={buttonType}
+                  />
                 </div>
               );
             })}

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import GridLayout from './template-one';
+import SrcollLayout from './template-two';
+import ModuleIntroduction from './module-introduction';
+
+export default function index(props) {
+  const { module, page } = props;
+  const Component = () => {
+    switch (module?.style) {
+      case 'template_two':
+        return <SrcollLayout module={module} page={page} />;
+      default:
+        return <GridLayout module={module} page={page} />;
+    }
+  };
+
+  return (
+    <>
+      <ModuleIntroduction module={module} />
+      <Component />
+    </>
+  );
+}

package/src/components/organisms/cards/module-introduction/index.js

@@ -0,0 +1,54 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import PropTypes from 'prop-types';
+import loadable from '@loadable/component';
+import { FiArrowRight } from '@react-icons/all-files/fi/FiArrowRight';
+import { anchorLink } from 'gatsby-core-theme/src/helpers/strings';
+import styles from './styles.module.scss';
+import ModuleTitle from '../../../../gatsby-core-theme/components/atoms/module-title';
+import Link from '~hooks/link';
+import { removeSymbols } from '../../../../helpers/strings';
+
+const ModuleIntroduction = ({ module }) => {
+  const anchorLabel = module?.anchor_label && removeSymbols(anchorLink(module?.anchor_label));
+
+  const ModuleIntro = module?.module_introduction
+    ? loadable(() => import('~molecules/content'))
+    : null;
+
+  return (
+    <div className={ModuleIntro ? '' : styles.noIntroModuleCards}>
+      <ModuleTitle
+        module={module}
+        anchorLabel={module.name === 'archive' && anchorLabel}
+        showMoreLink={!ModuleIntro}
+      />
+      {ModuleIntro && (
+        <ModuleIntro
+          isModuleIntroduction={module?.module_introduction}
+          module={{ value: module?.module_introduction }}
+        />
+      )}
+      {ModuleIntro && module.see_more_link?.value && (
+        <Link to="/" className={`${styles.viewMore || ''} module-title-gtm`}>
+          {module.see_more_link.title}
+          <FiArrowRight title="Right-pointing Arrow Icon" />
+        </Link>
+      )}
+    </div>
+  );
+};
+
+ModuleIntroduction.propTypes = {
+  module: PropTypes.shape({
+    anchor_label: PropTypes.string,
+    name: PropTypes.string.isRequired,
+    module_introduction: PropTypes.string,
+    see_more_link: PropTypes.shape({
+      value: PropTypes.string,
+      title: PropTypes.string,
+    }),
+  }),
+};
+
+export default ModuleIntroduction;

package/src/components/organisms/cards/module-introduction/styles.module.scss

@@ -0,0 +1,31 @@
+.noIntroModuleCards {
+    > div {
+      @include flex-align(flex-start, space-between);
+      width: 100%;
+      flex-direction: column;
+  
+      @include min(tablet) {
+        flex-direction: row;
+        align-items: space-between;
+      }
+  
+      a {
+        @include flex-align(center, space-between);
+      }
+    }
+  }
+
+
+.viewMore {
+  font-size: 1.6rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 2.7rem; 
+  text-transform: capitalize;
+  @include flex-align(center, flex-start);
+  color: #165AF8;
+  gap: .4rem;
+  svg{
+    margin-top: .2rem;
+  }
+}

package/src/{gatsby-core-theme/components/organisms/cards → components/organisms/cards/template-one}/index.js

@@ -5,20 +5,16 @@ import React from 'react';
 import Card from 'gatsby-core-theme/src/components/organisms/cards/index';
 import { getCard } from '../../../../helpers/cards';
 
-export default (props) => {
-  const customCardComponent = getCard(
-    props.module.model_type || props.module.cards_page_type,
-    props.module.style
-  );
-
+export default ({ module, page }) => {
+  const customCardComponent = getCard(module?.model_type || module?.cards_page_type);
   return (
     <Card
-      {...props}
+      module={module}
       mobileColumns={1}
       tabletColumns={2}
       desktopColumns={3}
       CustomCardComponent={customCardComponent}
-      pageTemplate={props?.page?.template}
+      pageTemplate={page?.template}
     />
   );
 };

package/src/components/organisms/cards/template-one/template-one.stories.js

@@ -0,0 +1,40 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import { sampleOperatorCards } from '../../../../../tests/factories/modules/matrix/card.factory';
+import TemplateOne from '.';
+
+const operatorData = sampleOperatorCards;
+
+export default {
+  title: 'Theme/Modules/Cards/Layout/Template One',
+  component: TemplateOne,
+  args: {
+    module: operatorData,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A Default Footer Component - Template One',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <TemplateOne {...args} />;
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/organisms/cards/template-two/buttons/buttons.module.scss

@@ -0,0 +1,58 @@
+.buttLeft,
+.buttRight {
+  position: absolute;
+  left: 3.8rem;
+  bottom: 4rem;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 100px;
+  background: var(--background-card-slider-button, #262629);
+  color: var(--card-color-slider-button, white);
+  display: none;
+
+  @include min(tablet) {
+    @include flex-direction(column);
+    @include flex-align(center, center);
+    bottom: 1.6rem;
+    left: 5.6rem;
+  }
+
+  @include min(desktop) {
+    left: 9.6rem;
+  }
+}
+
+.buttRight {
+  left: 12.4rem;
+
+  @include min(tablet) {
+    left: 10rem;
+  }
+
+  @include min(desktop) {
+    left: 14rem;
+  }
+}
+
+.disabled {
+  background: var(--disabled-background-card-slider-button, #dedede);
+  color: var(--disabled-color-card-slider-button, #262629);
+}
+
+.nointroButtLeft {
+  left: 1%;
+  bottom: 4rem;
+
+  @include min(desktop) {
+    left: 15%;
+  }
+}
+
+.nointroButtRight {
+  left: calc(1% + 4.5rem);
+  bottom: 4rem;
+
+  @include min(desktop) {
+    left: calc(15% + 4.5rem);
+  }
+}

package/src/components/organisms/cards/template-two/buttons/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { IoIosArrowBack } from '@react-icons/all-files/io/IoIosArrowBack';
+import { IoIosArrowForward } from '@react-icons/all-files/io/IoIosArrowForward';
+import styles from './buttons.module.scss';
+
+const Buttons = ({ scrollX, noModuleIntro, scrollEnd, scroll }) => (
+  <>
+    <button
+      className={`${styles.buttLeft} ${noModuleIntro ? styles.nointroButtLeft : ''} ${
+        scrollX <= 0 ? styles.disabled : ''
+      }`}
+      onClick={() => scroll(-200)}
+      type="button"
+    >
+      <IoIosArrowBack />
+    </button>
+    <button
+      className={`${styles.buttRight} ${noModuleIntro ? styles.nointroButtRight : ''} ${
+        !scrollEnd ? '' : styles.disabled
+      }`}
+      onClick={() => scroll(200)}
+      type="button"
+    >
+      <IoIosArrowForward />
+    </button>
+  </>
+);
+
+Buttons.propTypes = {
+  scrollX: PropTypes.number,
+  noModuleIntro: PropTypes.bool,
+  scrollEnd: PropTypes.bool,
+  scroll: PropTypes.func,
+};
+
+export default Buttons;

package/src/components/organisms/cards/template-two/index.js

@@ -0,0 +1,77 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable react/forbid-prop-types */
+import React, { useRef, useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import ScrollX from 'gatsby-core-theme/src/hooks/scroll-x';
+import Compoo from './item';
+import Buttons from './buttons';
+
+const CustomCarousel = ({ page, module, noModuleIntro }) => {
+  const container = useRef(null);
+  const [scrollX, setScrollX] = useState(0);
+  const [scrollEnd, setScrollEnd] = useState(false);
+  const [showButtons, setShowButtons] = useState(false);
+
+  const updateButtons = (shift) => {
+    setScrollEnd(
+      Math.floor(container.current.scrollWidth - (container.current.scrollLeft + shift)) <=
+        container.current.offsetWidth
+    );
+  };
+
+  const scroll = (shift) => {
+    container.current.scrollTo({
+      left: container.current.scrollLeft + shift,
+      behavior: 'smooth',
+    });
+    updateButtons(shift);
+    setScrollX(scrollX + shift);
+  };
+
+  const onStopScrolling = () => {
+    setScrollX(container.current.scrollLeft);
+    updateButtons(0);
+  };
+
+  const onScroll = (scrollLeft) => {
+    updateButtons(0);
+    setScrollX(scrollLeft);
+  };
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setShowButtons(container.current.scrollWidth > container.current.offsetWidth);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, []);
+
+  return (
+    <ScrollX refTag={container} scroll stopScrolling={() => onStopScrolling()} onScroll={onScroll}>
+      <div ref={container}>
+        {module.items &&
+          module.items.map((item, index) => (
+            <Compoo key={index} index={index} item={item} page={page} module={module} />
+          ))}
+        {showButtons && (
+          <Buttons
+            scroll={scroll}
+            noModuleIntro={noModuleIntro}
+            scrollX={scrollX}
+            scrollEnd={scrollEnd}
+          />
+        )}
+      </div>
+    </ScrollX>
+  );
+};
+
+CustomCarousel.propTypes = {
+  page: PropTypes.shape({}),
+  module: PropTypes.shape({
+    items: PropTypes.arrayOf(PropTypes.object),
+    style: PropTypes.string,
+  }).isRequired,
+  noModuleIntro: PropTypes.bool,
+};
+
+export default CustomCarousel;

package/src/components/organisms/cards/template-two/item/index.js

@@ -0,0 +1,36 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { memo } from 'react';
+import PropTypes from 'prop-types';
+import { getCard } from '../../../../../helpers/cards';
+import keygen from '~helpers/keygen';
+
+const CustomCardComponent = memo(({ module, item, page, index, template = 'template_five' }) => {
+  const Compo = getCard(module.model_type || module.cards_page_type, template);
+  return (
+    <Compo
+      key={keygen()}
+      featured={module.style === 'featured'}
+      item={item}
+      type={item.type}
+      number={index + 1}
+      page={page}
+    />
+  );
+});
+
+CustomCardComponent.propTypes = {
+  page: PropTypes.shape({}),
+  module: PropTypes.shape({
+    items: PropTypes.array,
+    style: PropTypes.string,
+    model_type: PropTypes.string,
+    cards_page_type: PropTypes.string,
+  }),
+  item: PropTypes.shape({
+    type: PropTypes.string,
+  }),
+  index: PropTypes.number,
+  template: PropTypes.string,
+};
+
+export default CustomCardComponent;

package/src/components/organisms/cards/template-two/template-two.stories.js

@@ -0,0 +1,56 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import React from 'react';
+import {
+  Title,
+  Description,
+  Primary,
+  ArgsTable,
+  PRIMARY_STORY,
+} from '@storybook/addon-docs/blocks';
+import { sampleOperatorCards } from '../../../../../tests/factories/modules/matrix/card.factory';
+import TemplateTwo from '../../../../gatsby-core-theme/components/molecules/module';
+
+const operatorData = sampleOperatorCards;
+
+export default {
+  title: 'Theme/Modules/Cards/Layout/Template Two',
+  component: TemplateTwo,
+  argTypes: {
+    module: {
+      control: 'object',
+    },
+  },
+  args: {
+    module: {
+      ...operatorData,
+    },
+    removeModuleIntroduction: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A Cards Layout Component - Template Two',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <TemplateTwo {...args} />;
+export const VariantOne = Template.bind({});
+VariantOne.args = {};
+
+export const VariantTwo = Template.bind({});
+VariantTwo.args = {
+  module: {
+    ...operatorData,
+    module_introduction: null,
+  },
+};