gatsby-matrix-theme 13.0.12 → 13.0.14

package/.storybook/preview.js

@@ -32,6 +32,9 @@ export const parameters = {
               ['Template One', 'Template Two', 'Template Three', 'Template Four'],
               'Operator',
               ['Template One-Two', 'Template Three', 'Template Four', 'Template Five'],
+              'Games',
+              'Payment',
+              ['Template One-Three', 'Template Two', 'Template Four'],
             ],
           ],
           'Atoms',

package/CHANGELOG.md

@@ -1,3 +1,40 @@
+## [13.0.14](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.13...v13.0.14) (2023-03-06)
+
+
+### Bug Fixes
+
+* jest ([3ae9c95](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3ae9c95acb174b75f804b9c4e4967e633c9976f6))
+* payment ([8afc208](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8afc208726ec807978b75c224a10ac5c75e8c952))
+* payment header ([bdd6e76](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/bdd6e764b3bafb70c3974767ad17c522ddd26b9b))
+* payment methods header ([3ea61a1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3ea61a11e1f10c9f061b87aefbe258e0b16cc5af))
+* payment provider banner added ([fefe125](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fefe125aa4f46bf0a5158e6e0de7636adb7d42e0))
+* ratings ([12afe60](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/12afe6044d55999cc7bfdebaaf350cf738f18543))
+* storybook and jest ([e8d21f4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e8d21f4d068e5119ca63faf51df8ba61016d35dd))
+* storybook images ([b3c17d0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b3c17d0f018b2b7a251a7d5eda5d6a5e72480747))
+* template two ([ffbad1f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ffbad1f177ed3d5c8f81b0b14ec5e004f30fe4ba))
+* test ([b6289e3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b6289e30359348a2db19578e1014db6e3b2b0d46))
+* test ([fc98594](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fc985940c88e5498d6998d566bb14b88b7b187c9))
+* update to the latest matrix changes ([4e52d3e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4e52d3ef2a8f776b658d03532e7fd731e0c61b28))
+
+
+* Merge branch 'payment-provider' into 'master' ([6014b26](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6014b26748457d2e2920e88e6d9b9add3d83b174))
+
+## [13.0.13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.12...v13.0.13) (2023-03-01)
+
+
+### Bug Fixes
+
+* add extraprop on module molecule component ([1bfc06a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1bfc06ae104c7b30a1e199fbdd2dc4a8094453e6))
+* resolve conflicts ([10c9101](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/10c9101eb8b193f214027406a0f36c235b97ff2b))
+* update author date data ([83bbf5d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/83bbf5d6c4cd03f016bbc894273b439fe90147dd))
+* update author date data ([c2642e0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c2642e0a4980864cc20fdc6e475a6f3e2bd69497))
+* update core version ([2e8b516](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2e8b51672d3293d06f643e587696483ce0b0bb0d))
+* update date props ([cecd8f2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cecd8f2541009bec27c3c624d4d2d81bd97842db))
+* update main ([9c293db](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9c293dbb6b134e5f78b7ea6c41017359b931d852))
+
+
+* Merge branch 'tm-3307-enable-manual-publushed/updated-date' into 'master' ([6c8b847](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6c8b8470a97e55e5c7e5038460edd9705915bf05))
+
 ## [13.0.12](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.11...v13.0.12) (2023-02-28)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "13.0.12",
+  "version": "13.0.14",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -25,7 +25,7 @@
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^4.20.0",
-    "gatsby-core-theme": "18.0.18",
+    "gatsby-core-theme": "18.0.19",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

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

@@ -4,14 +4,12 @@ import PropTypes from 'prop-types';
 import { Context } from 'gatsby-core-theme/src/context/MainProvider';
 import { translate, getObjectValue } from 'gatsby-core-theme/src/helpers/getters';
 import keygen from 'gatsby-core-theme/src/helpers/keygen';
-import { isMobileDevice } from '../../../helpers/mobile-detect';
 import operatorRatings from '../../../constants/ratings-constant';
 
 import styles from './ratings.module.scss';
 
-export default function Ratings({ item, type, numOfStars = 5 }) {
+export default function Ratings({ item, type, numOfStars = 5, currency = '€' }) {
   const { translations } = useContext(Context) || {};
-  const isMobile = isMobileDevice();
 
   const ratings = operatorRatings[type] || [];
   const rangeText = { 0: 'Low', 1: 'Medium', 2: 'High' };
@@ -21,17 +19,13 @@ export default function Ratings({ item, type, numOfStars = 5 }) {
   }
 
   return (
-    <ul className={styles.ratingList}>
+    <ul className={`${styles.ratingList} ${type && styles[type]}`}>
       {ratings?.map((rating) => {
-        if (rating?.showOnlyMobile && !isMobile) {
-          return null;
-        }
-
         const { fieldValue, translationKey, fieldLabel, componentToUse } = rating || {};
 
         let valueDiplayed;
         const value = getObjectValue(item, fieldValue);
-        const component = componentToUse ? componentToUse(numOfStars, value) : false;
+        const component = componentToUse ? componentToUse(numOfStars, value, currency) : false;
 
         if (component && value) {
           valueDiplayed = component || '-';
@@ -67,4 +61,5 @@ Ratings.propTypes = {
   }),
   type: PropTypes.string,
   numOfStars: PropTypes.string,
+  currency: PropTypes.string,
 };

package/src/components/atoms/rating/rating.test.js

@@ -31,7 +31,7 @@ describe('Rating component', () => {
   test('Rating', () => {
     const { container } = render(<Ratings item={page()} type="operator" />);
     expect(container.querySelectorAll('ul')).toHaveLength(1);
-    expect(container.querySelectorAll('li')).toHaveLength(5);
+    expect(container.querySelectorAll('li')).toHaveLength(6);
   });
 
   test('Rating with diferent data text', () => {

package/src/components/atoms/rating/ratings.module.scss

@@ -60,6 +60,7 @@
     font-size: 18px;
     line-height: 28px;
     color: #1C1A28;
+    display: flex;
 
 
     >div {
@@ -109,4 +110,13 @@
     font-size: 14px;
     line-height: 22px;
 
+}
+
+.operator,
+.payment_method {
+    >li:nth-child(1) {
+        @include min(tablet) {
+            display: none;
+        }
+    }
 }

package/src/components/molecules/header/variants/operator/template-five/template-five.module.scss

@@ -286,7 +286,7 @@
     display: flex;
     flex-direction: row;
     overflow-x: auto;
-    width: 85vw;
+    width: 75vw;
     gap: 0.8rem;
     margin-top: 3.2rem;
 

package/src/components/molecules/header/variants/operator/template-four/template-four.module.scss

@@ -121,6 +121,7 @@
         display: flex;
         flex-direction: column;
         gap: 2.3rem;
+        padding: 2rem;
         padding-left: 0rem;
         margin-left: 2rem;
     }

package/src/components/molecules/header/variants/operator/template-four/template-four.test.js

@@ -17,7 +17,7 @@ describe('Operator template four component', () => {
     expect(getByText('100% Bonus')).toBeTruthy();
     expect(getByText('+ Big Promotions')).toBeTruthy();
     expect(container.querySelectorAll('ul')).toHaveLength(1);
-    expect(container.querySelectorAll('li')).toHaveLength(5);
+    expect(container.querySelectorAll('li')).toHaveLength(6);
   });
 });
 

package/src/components/molecules/header/variants/operator/template-one-two/template-one-two.test.js

@@ -17,7 +17,7 @@ describe('Operator template one two component', () => {
     expect(getByText('100% Bonus')).toBeTruthy();
     expect(getByText('+ Big Promotions')).toBeTruthy();
     expect(container.querySelectorAll('ul')).toHaveLength(1);
-    expect(container.querySelectorAll('li')).toHaveLength(5);
+    expect(container.querySelectorAll('li')).toHaveLength(6);
   });
 
   test('Template Two Status Active', () => {
@@ -29,7 +29,7 @@ describe('Operator template one two component', () => {
     expect(getByText('100% Bonus')).toBeTruthy();
     expect(getByText('+ Big Promotions')).toBeTruthy();
     expect(container.querySelectorAll('ul')).toHaveLength(1);
-    expect(container.querySelectorAll('li')).toHaveLength(5);
+    expect(container.querySelectorAll('li')).toHaveLength(6);
   });
 });
 

package/src/components/molecules/header/variants/operator/template-three/template-three.test.js

@@ -17,7 +17,7 @@ describe('Operator template three component', () => {
     expect(getByText('100% Bonus')).toBeTruthy();
     expect(getByText('+ Big Promotions')).toBeTruthy();
     expect(container.querySelectorAll('ul')).toHaveLength(1);
-    expect(container.querySelectorAll('li')).toHaveLength(5);
+    expect(container.querySelectorAll('li')).toHaveLength(6);
   });
 });
 

package/src/components/molecules/header/variants/payment/template-four/index.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { imagePrettyUrl, getAltText } from 'gatsby-core-theme/src/helpers/getters';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import Rating from '../../../../../atoms/rating';
+import OperatorBanner from '../../../../../atoms/header-operator-bannner';
+import styles from './template-four.module.scss';
+
+const TemplateFour = ({
+  relation,
+  type,
+  image,
+  name,
+  sections = {},
+  pageTemplate,
+  icon,
+  numOfStars = 5,
+}) => {
+  const headerBonus = sections?.header?.modules?.find((bonus) => bonus?.name === 'bonus');
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.topSection}>
+        <LazyImage
+          loading="eager"
+          src={imagePrettyUrl(image?.filename, 300, 300)}
+          width={300}
+          height={300}
+          alt={getAltText(image, relation?.name)}
+        />
+      </div>
+      <div className={styles.bottomSection}>
+        <div className={styles.name}>
+          <h1>{name}</h1>
+          <LazyImage
+            src={icon || '../../../../../../images/verify.svg'}
+            loading="eager"
+            alt="Verified"
+            width={24}
+            height={24}
+          />
+        </div>
+        <div className={styles.ratings}>
+          <Rating item={relation} type={type} numOfStars={numOfStars} />
+        </div>
+        {headerBonus && (
+          <OperatorBanner
+            logo={
+              headerBonus?.value?.standardised_logo_url_object ||
+              headerBonus?.value?.logo_url_object
+            }
+            operator={headerBonus?.value}
+            template={pageTemplate}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+TemplateFour.propTypes = {
+  relation: PropTypes.shape({
+    type: PropTypes.string,
+    template: PropTypes.string,
+    name: PropTypes.string,
+    rating: PropTypes.string,
+    status: PropTypes.string,
+  }),
+  sections: PropTypes.shape({}),
+  name: PropTypes.string,
+  type: PropTypes.string,
+  image: PropTypes.shape({
+    filename: PropTypes.string,
+  }),
+  pageTemplate: PropTypes.string,
+  numOfStars: PropTypes.number,
+  icon: PropTypes.node,
+};
+
+export default TemplateFour;

package/src/components/molecules/header/variants/payment/template-four/template-four.module.scss

@@ -0,0 +1,195 @@
+.container {
+    display: grid;
+    grid-template-columns: 1fr;
+    position: relative;
+    background: #FFFFFF;
+    border: 1.5px solid #E9E9E9;
+    border-radius: 1.6rem;
+    max-width: var(--main-container-max, 96rem);
+
+    @include min(tablet) {
+        margin-top: auto;
+        grid-template-columns: auto 1fr;
+        min-height: 36.4rem;
+    }
+
+    @include min(laptop) {
+        margin: 0 auto;
+        margin-top: var(--operator-template-four-margin-top-desktop, 1.6rem);
+        margin-bottom: var(--operator-template-four-margin-bottom-desktop, 1.6rem);
+    }
+}
+
+.topSection {
+    display: flex;
+    justify-content: center;
+    position: relative;
+
+    >img {
+        position: relative;
+        bottom: 2.4rem;
+        width: 14rem;
+        height: 14rem;
+        background-color: white;
+        border: 1.5px solid #E9E9E9;
+        filter: drop-shadow(4px 4px 12px rgba(0, 0, 0, 0.1));
+        border-radius: 1.6rem;
+
+        @include min(tablet) {
+            width: 25rem;
+            height: 25rem;
+            right: 0rem;
+            bottom: unset;
+        }
+
+
+        @include min(laptop) {
+            width: 30rem;
+            height: 30rem;
+            right: 4rem;
+        }
+    }
+
+    @include min(tablet) {
+        justify-content: unset;
+        align-items: center;
+        padding-left: 1rem;
+    }
+
+    @include min(laptop) {
+        padding-left: 0rem;
+    }
+}
+
+.bottomSection {
+    padding: 2.4rem 1.6rem;
+    padding-top: 0rem;
+    margin-top: -0.8rem;
+
+    >div:nth-child(3) {
+        margin-top: 1.6rem;
+
+        >a>svg {
+            display: none;
+            height: 1.4rem;
+            width: 1.4rem;
+
+            @include min(tablet) {
+                display: inline;
+            }
+        }
+
+        @include min(tablet) {
+            grid-template-columns: 2fr 1fr;
+
+            >img {
+                display: none;
+            }
+
+            margin-top: 0rem;
+        }
+
+    }
+
+    @include min(tablet) {
+        display: flex;
+        flex-direction: column;
+        gap: 2.3rem;
+        padding: 1.6rem;
+        padding-left: 0rem;
+        margin-left: 2rem;
+        margin-top: 0rem;
+    }
+
+    @include min(laptop) {
+        padding: 3.2rem;
+        padding-left: 0.8rem;
+        margin-left: 0rem;
+    }
+}
+
+.name {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 1.6rem;
+
+    >h1 {
+        margin: 0;
+        font-weight: 700;
+        font-size: 2.4rem;
+        line-height: 3.4rem;
+        color: #1C1A28;
+        text-align: center;
+        text-transform: capitalize;
+
+        @include min(tablet) {
+            font-size: 3.2rem;
+            line-height: 4.2rem;
+            text-align: start;
+        }
+    }
+
+    >img {
+        margin-left: 0.8rem;
+        color: #165AF8;
+        flex: none;
+        width: 1.6rem;
+        height: 1.6rem;
+        margin-left: .4rem;
+
+        @include min(tablet) {
+            width: 2.4rem;
+            height: 2.4rem;
+            margin-left: .8rem;
+
+        }
+    }
+
+    @include min(tablet) {
+        padding-bottom: 0rem;
+        margin-top: 1.8rem;
+        justify-content: flex-start;
+        width: 70%;
+    }
+}
+
+.ratings {
+    display: grid;
+    overflow-x: auto;
+
+    >ul {
+        display: flex;
+        overflow: scroll;
+
+        grid-gap: 0.8rem;
+
+        >li>p:nth-child(2) {
+            font-weight: 700;
+            font-size: 1.6rem;
+            line-height: 2.7rem;
+            color: #33313D;
+        }
+
+        @include min(tablet) {
+            grid-gap: 1.6rem;
+            display: grid;
+            overflow: hidden;
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+    }
+}
+
+.ratingInactive {
+    display: flex;
+    align-items: center;
+    background-color: #FBFBFB !important;
+    color: #6B6A72 !important;
+    font-weight: 800;
+    font-size: 1.4rem !important;
+    line-height: 2.2rem !important;
+
+    >svg {
+        margin-right: 6.32px;
+        color: var(--icons-rating-color, #FFDB20);
+    }
+}

package/src/components/molecules/header/variants/payment/template-four/template-four.stories.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import TemplateFour from '.';
+import getPaymentData from '../../../../../../../tests/factories/pages/payment.factory';
+import checkMark from '../../../../../../../storybook-images/verify.svg';
+
+const pagePayment = getPaymentData();
+
+export default {
+  title: 'Matrix-Theme/Layout/Header/Payment/Template Four',
+  component: TemplateFour,
+  argTypes: {
+    type: {
+      name: 'Type',
+      type: { name: 'String' },
+      defaultValue: pagePayment?.type,
+    },
+    sections: {
+      name: 'Sections',
+      defaultValue: pagePayment?.sections,
+    },
+    image: {
+      name: 'Image',
+      type: { name: 'img' },
+      defaultValue: pagePayment?.standardised_logo_filename_object,
+    },
+    name: {
+      name: 'Operator Name',
+      type: { name: 'String' },
+      defaultValue: pagePayment?.name,
+    },
+    numOfStars: {
+      name: 'Number of Stars',
+      type: { name: 'number' },
+      defaultValue: pagePayment?.numOfStars,
+    },
+    relation: {
+      name: 'Relation',
+      type: { name: 'object' },
+      defaultValue: pagePayment?.relation,
+    },
+    icon: {
+      name: 'Icon',
+      defaultValue: checkMark,
+    },
+  },
+};
+
+const Template = (args) => <TemplateFour {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {};

package/src/components/molecules/header/variants/payment/template-four/template-four.test.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-multi-assign */
+import React from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import getPaymentData from '../../../../../../../tests/factories/pages/payment.factory';
+import TemplateFour from '.';
+
+describe('Payment template four component', () => {
+  const data = getPaymentData();
+
+  test('Template Four Active', () => {
+    const { container, getByText } = render(<TemplateFour {...data} />);
+    expect(getByText('Next')).toBeTruthy();
+    expect(container.querySelectorAll('h1')).toHaveLength(1);
+    expect(getByText('20 Free Spins No Deposit Bonus')).toBeTruthy();
+    expect(getByText('+ 300% & 555 Spins Welcome Bonus')).toBeTruthy();
+    expect(getByText('Play now')).toBeTruthy();
+    expect(container.querySelectorAll('a')).toHaveLength(1);
+    expect(container.getElementsByClassName('desc')).toBeTruthy();
+    expect(container.querySelectorAll('li')).toHaveLength(4);
+  });
+});
+
+afterEach(() => {
+  cleanup();
+});