gatsby-matrix-theme 12.0.0 → 12.0.2

package/.storybook/preview.js

@@ -1,4 +1,5 @@
 import '../../node_modules/gatsby-core-theme/gatsby-browser';
+require('../src/gatsby-core-theme/styles/utils/variables/_main.scss');
 import React from 'react';
 
 global.___loader = {
@@ -25,7 +26,11 @@ export const parameters = {
           'Layout',
           [
             'Header',
-            ['Operator', ['Template One-Two', 'Template Three', 'Template Four', 'Template Five']],
+            [
+              'Default',
+              'Operator',
+              ['Template One-Two', 'Template Three', 'Template Four', 'Template Five'],
+            ],
           ],
           'Atoms',
           'Molecules',
@@ -41,7 +46,13 @@ export const parameters = {
 // Global decorators for stories
 export const decorators = [
   (Story) => (
-    <div style={{ margin: '1.5rem auto 0' }}>
+    <div style={{ margin: '1.5rem auto 0', fontFamily: 'Plus Jakarta Sans' }}>
+      <link rel="preconnect" href="https://fonts.googleapis.com"></link>
+      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin></link>
+      <link
+        href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;700&display=swap"
+        rel="stylesheet"
+      ></link>
       <Story />
     </div>
   ),

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+## [12.0.2](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v12.0.1...v12.0.2) (2023-02-02)
+
+
+### Bug Fixes
+
+* added extra headers ([fe9102f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/fe9102fe9290802e1ea40b02a2f86c7f13451aee))
+* conflicts ([5bff960](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5bff9603523daf3ce179ae661f01fb27be392502))
+* cta button inactive ([0630bd5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0630bd5ffcfa8e86d76c61b1808ac9fe3f835b50))
+* header cta ([10a1545](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/10a1545c3154c8053f638075abd9ec729deb259d))
+* operator cta ([6396877](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6396877c4362aa8989f48cf641bd4dcc37e3c912))
+* operator header ([e804dd0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e804dd0198bcec80160c83df3c7e791b22510e8a))
+* operator-header final ([b99397e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b99397eb24054b67d9ef0c707b11945df576b0f5))
+* remove colors variables ([59b0425](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/59b0425fd0d76c2803f771ecb412c81e7d6785b6))
+* sort order of headers in storybook ([a4f1eb0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a4f1eb0de605629c957ab83cb7428ef551b1b808))
+* star color ([879b2ac](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/879b2ac7658cff6055eba1f249fb012652dfcc82))
+* tests ([5a3133f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5a3133f02d3d9628555894514c1ec663c46704d2))
+
+
+* Merge branch 'tm-3253-operator-header' into 'master' ([0892011](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/08920118658b319ba521fa443b5a2059408acaae))
+
+## [12.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v12.0.0...v12.0.1) (2023-01-31)
+
+
+### Bug Fixes
+
+* added demo font for demo site and storybook ([00d66fb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/00d66fb18cdf2c456be66e413c37c1b13b34e036))
+* added demo font for demo site and storybook ([a902a86](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a902a864346642dd75c9e7d20c21d84cb4422e65))
+* operator--header small fix ([cf7edf3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/cf7edf388f596babed7240fe198447339fa7d449))
+* ratings operator header ([8906dbd](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/8906dbd22723847bb2a59183998cf2157dc39cb0))
+* update storybook ([e4d3b81](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e4d3b813ff9e4b283d45427d78a85c8a9e68890f))
+* update storybook ([e438c5e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e438c5e0e339e156cc206ffb46076fe4bab3e786))
+* update theme ([43c6e93](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/43c6e93aa3ed3d31a98adef8842c6bc12f99c773))
+
+
+### Code Refactoring
+
+* update footer navigation event listeners ([a1411ec](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/a1411ec89a756e9fe86adb4f5c8058a1b5069755))
+
+
+* Merge branch 'tm-3254-update-storybook' into 'master' ([7a0367a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7a0367ae244d40a8bef323426708cbf553edef5e))
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([0f2897a](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0f2897ac3d50b460c89e75967505599412ca0838))
+
 # [12.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v11.0.2...v12.0.0) (2023-01-30)
 
 

package/jest.config.js

@@ -25,6 +25,7 @@ module.exports = {
   },
   // testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
   transformIgnorePatterns: [`node_modules/(?!gatsby-core-theme|gatsby-script)`],
+  coveragePathIgnorePatterns: ['src/constants'],
   globals: {
     __PATH_PREFIX__: ``,
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "12.0.0",
+  "version": "12.0.2",
   "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.5",
+    "gatsby-core-theme": "18.0.6",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

package/src/components/atoms/header-operator-bannner/header-operator-bannner.module.scss

@@ -8,6 +8,11 @@
     border: 1px solid #E9E9E9;
     padding: .8rem;
 
+    >a {
+        place-self: end;
+        align-self: center;
+    }
+
     >img {
         width: 4rem;
         height: 4rem;
@@ -59,8 +64,6 @@
 
 }
 
-
-
 .bonusTitle {
     display: none;
 
@@ -88,52 +91,3 @@
         line-height: 30px;
     }
 }
-
-.cta {
-    display: flex;
-    align-items: center;
-    justify-content: end;
-
-    >a {
-        display: flex !important;
-        align-items: center !important;
-        padding: 8px 16px !important;
-        font-weight: 700;
-        font-size: 14px !important;
-        line-height: 18px;
-        border-radius: 8px !important;
-        text-transform: capitalize;
-        background-color: #5545A9 !important;
-        color: white !important;
-        border-radius: 8px !important;
-
-        &:hover {
-            background-color: #5545A9 !important;
-            background: #5545A9 !important;
-            color: #FFFFFF !important;
-        }
-
-        >svg {
-            width: 14px;
-            height: 14px;
-            margin-left: 0.8rem;
-        }
-
-        @include min(tablet) {
-            font-size: 18px;
-            line-height: 20px;
-            padding: 16px 24px !important;
-            border-radius: 12px !important;
-        }
-    }
-
-    &.coming_soon,
-    &.inactive,
-    &.not_recommended {
-        >a {
-            background-color: #BBB5DD !important;
-            color: #776ABA !important;
-        }
-
-    }
-}

package/src/components/atoms/header-operator-bannner/index.js

@@ -54,17 +54,15 @@ const HeaderOperatorBaner = ({ operator, logo, template }) => {
           />
         )}
         <div className={`${styles.bonus}`}>{main}</div>
-        <div className={styles.cta}>
-          <OperatorCta
-            page={operator}
-            playText="Play now"
-            operator={operator}
-            gtmClass="operator-banner-operator-cta-gtm"
-            icon={
-              !['coming_soon', 'inactive'].includes(operator?.status) && <IoMdArrowRoundForward />
-            }
-          />
-        </div>
+        <OperatorCta
+          page={operator}
+          playText="Play now"
+          operator={operator}
+          gtmClass="operator-banner-operator-cta-gtm"
+          icon={
+            !['coming_soon', 'inactive'].includes(operator?.status) && <IoMdArrowRoundForward />
+          }
+        />
       </div>
     )
   );

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

@@ -3,6 +3,17 @@
     overflow-x: scroll;
     gap: .8rem;
 
+    &::-webkit-scrollbar {
+        width: 3px;
+        height: 3px;
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        border-radius: 100px;
+        background: #929292;
+    }
+
     @include min(tablet) {
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
@@ -27,7 +38,6 @@
 
     @include min(tablet) {
         margin-bottom: inherit;
-        min-height: 11.2rem;
     }
 }
 
@@ -54,7 +64,7 @@
     >div {
         display: inline-flex;
         align-items: center;
-        font-weight: 700;
+        font-weight: 800;
         font-size: 18px;
         line-height: 28px;
         border: none;
@@ -70,8 +80,16 @@
         >span:last-child {
             font-size: 16px;
             line-height: 27px;
+            font-weight: 700;
+
+            @include min(tablet) {
+                font-weight: 800;
+                font-size: 18px;
+                line-height: 28px;
+            }
         }
 
+
     }
 
     >svg {

package/src/components/molecules/header/variants/default/template-one/index.js

@@ -13,11 +13,13 @@ export default function TemplateOne({ title, description, extraFields, imageObj
     <div className={styles.templateOne}>
       <div className={styles.headerContainer}>
         <h1>{title}</h1>
-        <div
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: description }}
-          className={styles.description}
-        />
+        {description && (
+          <div
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: description }}
+            className={styles.description}
+          />
+        )}
         {link && (
           <Button
             to={link}

package/src/components/molecules/header/variants/operator/template-five/index.js

@@ -14,7 +14,6 @@ import StarRating from 'gatsby-core-theme/src/components/molecules/star-rating';
 import { FaStar } from '@react-icons/all-files/fa/FaStar';
 import operatorRatings from '../../../../../../constants/ratings-constant';
 import OperatorBanner from '../../../../../atoms/header-operator-bannner';
-import { isMobileDevice } from '../../../../../../helpers/mobile-detect';
 
 import styles from './template-five.module.scss';
 
@@ -27,10 +26,10 @@ const TemplateFive = ({
   extraFields,
   type,
   numOfStars = 5,
+  icon,
 }) => {
   const prettyLink = prettyTracker(relation, 'main', false, pageTemplate);
   const { translations } = useContext(Context) || {};
-  const isMobile = isMobileDevice();
 
   const logo = () => (
     <a href={prettyLink} target="_blank" rel="noreferrer" className="header-gtm logo-cta ">
@@ -44,13 +43,12 @@ const TemplateFive = ({
     </a>
   );
 
-  const header = (classNamecss) => (
-    <div className={`${styles.header} ${classNamecss && styles.nameHeader}`}>
+  const header = () => (
+    <div className={`${styles.header}`}>
       <div className={`${styles.name} `}>
-        {isMobile && classNamecss && <h1>{name}</h1>}
-        {!isMobile && !classNamecss && <h1>{name}</h1>}
+        <h1>{name}</h1>
         <LazyImage
-          src="../../../../../../images/verify.svg"
+          src={icon || '../../../../../../images/verify.svg'}
           loading="eager"
           alt="Verified"
           width={24}
@@ -70,14 +68,9 @@ const TemplateFive = ({
 
   return (
     <div className={styles.container}>
-      <div className={styles.topSection}>
-        {logo()}
-        {header('header')}
-      </div>
-
+      <div className={styles.topSection}>{logo()}</div>
+      {header()}
       <div className={styles.main}>
-        {header()}
-
         {extraFields?.summary && (
           <div className={styles.decs} dangerouslySetInnerHTML={{ __html: extraFields?.summary }} />
         )}
@@ -87,7 +80,6 @@ const TemplateFive = ({
             return (
               <div className>
                 <span className={styles.ratingLabel}>
-                  {' '}
                   {translate(translations, elm?.translationKey, elm?.fieldLabel)}
                 </span>
                 <span className={styles.ratingValue}>
@@ -99,7 +91,9 @@ const TemplateFive = ({
             );
           })}
         </div>
+      </div>
 
+      <div className={styles.featureImage}>
         {featureImg?.filename && (
           <LazyImage
             src={imagePrettyUrl(featureImg?.filename, 413, 413)}
@@ -142,6 +136,7 @@ TemplateFive.propTypes = {
   extraFields: PropTypes.shape({
     summary: PropTypes.node,
   }),
+  icon: PropTypes.node,
 };
 
 export default TemplateFive;

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

@@ -47,42 +47,26 @@
         background-color: white;
         border-top-left-radius: 16px;
         border-top-right-radius: 16px;
+        box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.05);
     }
 }
 
 .main {
     display: flex;
     flex-direction: column;
-    grid-row: 3;
-
-    >img {
-        display: none;
-    }
 
     @include min(tablet) {
+        margin-top: -5.5rem;
         display: grid;
         grid-template-rows: min-content;
-        grid-row: 1/5;
-        grid-column: 2/5;
+        grid-row: 2/5;
+        grid-column: 2/4;
         margin-left: 4.8rem;
     }
-
-    @include min(laptop) {
-        >img {
-            margin-left: 1rem;
-            display: block;
-            grid-column: 5;
-            grid-row: 1/4;
-            max-width: 413px;
-            object-fit: cover;
-        }
-    }
 }
 
-
-
-
 .operatorBanner {
+    grid-row: 3;
 
     >div {
         padding: 1.6rem;
@@ -134,20 +118,18 @@
             }
         }
 
-        >div:last-child {
-            background-color: transparent;
-            padding: 0;
 
-            >a {
-                width: 100%;
-                font-size: 18px !important;
-                line-height: 20px;
-                border-radius: 12px !important;
-                padding: 16px 24px !important;
-            }
+
+        >a {
+            width: 100%;
+            font-size: 18px !important;
+            line-height: 20px;
+            border-radius: 12px !important;
+            padding: 16px 24px !important;
         }
 
 
+
         @include min(tablet) {
             border: none;
             padding-top: 0rem;
@@ -162,6 +144,7 @@
         padding-top: 0rem;
         border-bottom-left-radius: 1.6rem;
         border-bottom-right-radius: 1.6rem;
+        box-shadow: 2px 2px 7px rgb(0 0 0 / 5%);
     }
 
 }
@@ -169,7 +152,6 @@
 .name {
     display: flex;
     justify-content: center;
-    display: none;
     padding-top: 1.6rem;
     padding-bottom: .8rem;
 
@@ -180,11 +162,13 @@
         line-height: 34px;
         color: #1C1A28;
         text-transform: capitalize;
+        text-align: center;
 
 
         @include min(tablet) {
             font-size: 32px;
             line-height: 42px;
+            text-align: unset;
         }
     }
 
@@ -204,7 +188,6 @@
     }
 
     @include min(tablet) {
-        display: flex;
         justify-content: unset;
         padding-top: 0rem;
         padding-bottom: 1.6rem;
@@ -214,7 +197,9 @@
 
 
 .header {
-    display: none;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 
     >div:last-child {
         display: flex;
@@ -255,27 +240,17 @@
     }
 
     @include min(tablet) {
-        display: flex;
-        flex-direction: column;
+        align-items: start;
+        grid-row: 1;
+        grid-column: 2/4;
         margin-top: 5rem;
+        margin-left: 4.8rem;
         margin-bottom: 2.4rem;
-    }
-}
 
-.nameHeader {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    >div {
-        display: flex;
-    }
-
-    @include min(tablet) {
-        display: none;
     }
 }
 
+
 .decs {
     font-weight: 400;
     font-size: 16px;
@@ -287,7 +262,7 @@
     @include min(tablet) {
         margin-bottom: 4rem;
         margin-top: 0;
-        grid-row: 2;
+
     }
 
 }
@@ -306,7 +281,6 @@
         grid-template-columns: 1fr 1fr 1fr;
         overflow: hidden;
         overflow-x: auto;
-        grid-row: 3;
     }
 
     >div {
@@ -318,7 +292,7 @@
         border: none;
         padding: 0;
         min-height: 97px;
-        min-width: 141px;
+        min-width: 149px;
         border-right: 1px solid #E9E9E9;
 
 
@@ -370,4 +344,21 @@
         color: var(--icons-rating-color, #FFDB20);
     }
 
+}
+
+.featureImage {
+    display: none;
+
+    @include min(laptop) {
+        display: block;
+        grid-row: 1/5;
+        grid-column: 4/5;
+
+        >img {
+            width: 41.3rem;
+            height: 41.3rem;
+            min-width: 41.3rem;
+
+        }
+    }
 }

package/src/components/molecules/header/variants/operator/template-five/template-five.stories.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import TemplateFive from '.';
 import getOperatorData from '../../../../../../../tests/factories/pages/operator.factory';
+import checkMark from '../../../../../../../storybook-images/verify.svg';
 
 const pageOperatorData = getOperatorData();
 
@@ -48,6 +49,10 @@ export default {
       type: { name: 'object' },
       defaultValue: pageOperatorData?.relation,
     },
+    icon: {
+      name: 'Icon',
+      defaultValue: checkMark,
+    },
   },
 };
 

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

@@ -14,7 +14,16 @@ 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, ribbons, pageTemplate, numOfStars = 5 }) => {
+const TemplateFour = ({
+  relation,
+  type,
+  image,
+  name,
+  ribbons,
+  pageTemplate,
+  icon,
+  numOfStars = 5,
+}) => {
   const prettyLink = prettyTracker(relation, 'main', false, pageTemplate);
   const { translations } = useContext(Context) || {};
   const ribbon = ribbons?.length > 0 ? ribbons[0] : null;
@@ -49,7 +58,7 @@ const TemplateFour = ({ relation, type, image, name, ribbons, pageTemplate, numO
         <div className={styles.name}>
           <h1>{name}</h1>
           <LazyImage
-            src="../../../../../../images/verify.svg"
+            src={icon || '../../../../../../images/verify.svg'}
             loading="eager"
             alt="Verified"
             width={24}
@@ -82,6 +91,7 @@ TemplateFour.propTypes = {
   ribbons: PropTypes.PropTypes.arrayOf(PropTypes.shape({})),
   pageTemplate: PropTypes.string,
   numOfStars: PropTypes.number,
+  icon: PropTypes.node,
 };
 
 export default TemplateFour;