gatsby-matrix-theme 13.0.4 → 13.0.6

package/CHANGELOG.md

@@ -1,3 +1,35 @@
+## [13.0.6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.5...v13.0.6) (2023-02-14)
+
+
+### Bug Fixes
+
+* add extraprop on module molecule component ([06087f5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/06087f510fd46fe6c9142d1021175c7fecec2eda))
+* author template social icons ([29aab2f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/29aab2f2c9977fc81b8abe9409dd7d97ce0ba4a4))
+* get the latest matrix changes ([67398f1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/67398f13b38ab10a80609c25015d7c6c12b234d2))
+* make style ([2d6f2b6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/2d6f2b650eb7b95b4734c3f7d3af37b8d912192f))
+* ratings in operators ([1711774](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1711774583a9e4aeab259cd5e5ce4250c76c1b30))
+* templates styling ([1ef1319](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1ef1319c47f627733ae5a58c885c729ef03118d9))
+
+
+### Code Refactoring
+
+* remove author header template biography line limit ([b5da008](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b5da00868d3b71e8053f57bee4d1785784d2bb12))
+* update author header variants max width ([16542a6](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/16542a6c31b8247da37ad67e9e2a914679f64646))
+
+
+* Merge branch 'master' of git.ilcd.rocks:team-floyd/themes/matrix-theme ([12ebd65](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/12ebd65777e859d6c5628e53dce9df9adce75296))
+* Merge branch 'tm-3290-overlapping-sticky-banners' into 'master' ([2108846](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/21088466d80955f4ed024dbf088d64316759b7ff))
+* Merge branch 'tm-3271-author-header-update' into 'master' ([ac3acaa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/ac3acaad8f1bae1a0e01d451e15b348967a7a680))
+
+## [13.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.4...v13.0.5) (2023-02-09)
+
+
+### Bug Fixes
+
+* page author relation in header ([0e64099](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0e64099037d706eb95a1175e4b96eb7d8bcfcd21))
+* page author relation in header ([322312d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/322312d65e027a9b10cf74bc1d266346c88646ae))
+* page author relation in header ([4be6d62](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/4be6d62033e952494a75174897b60fd1152bc98f))
+
 ## [13.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v13.0.3...v13.0.4) (2023-02-09)
 
 

package/package.json

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

package/src/components/molecules/header/variants/author/assets/socials/index.js

@@ -18,7 +18,7 @@ export default function Socials({ className = '', author }) {
   ].filter((socialLink) => socialLink.link);
 
   return (
-    socialLinks.length && (
+    socialLinks.length > 0 && (
       <div className={`${className} ${styles.socials}`}>
         {socialLinks.map((socialLink) => (
           // eslint-disable-next-line jsx-a11y/control-has-associated-label

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

@@ -9,11 +9,13 @@ import styles from './template-four.module.scss';
 export default function TemplateFour({ author, icons }) {
   return (
     <div className={styles.container}>
-      <Portrait className={styles.portrait} author={author} />
       <div>
-        <Name className={styles.name} name={author.name} icon={icons?.verify} />
-        <div className={styles.title}>{author.author_title}</div>
-        <Socials author={author} />
+        <Portrait className={styles.portrait} author={author} />
+        <div>
+          <Name className={styles.name} name={author.name} icon={icons?.verify} />
+          <div className={styles.title}>{author.author_title}</div>
+          <Socials author={author} />
+        </div>
       </div>
     </div>
   );

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

@@ -1,27 +1,36 @@
 .container {
-  margin: 4.4rem max(1.6rem, 50% - 37.5rem / 2) 0;
-  padding: 4rem;
-  max-width: 37.5rem;
-  @include flex-direction(column);
   align-items: center;
   border: 1.5px solid #e9e9e9;
   border-radius: 1.6rem;
   background: linear-gradient(94.15deg, #f9f6e7 1.69%, #ffffff 49.54%, #dddaee 100%);
-
+  margin: 2rem;
+  max-width: 37.5rem;
   > div {
+   
+    padding: 4rem;
     @include flex-direction(column);
-    align-items: center;
+    @include flex-align(center, center);
+
+    > div {
+      @include flex-direction(column);
+      align-items: center;
+    }
+
+    @include min(tablet) {
+      margin: 0 auto;
+      max-width: 162rem;
+      @include flex-align(center, center);
+      > div {
+        margin-top: 3.4rem;
+      }
+    }
   }
 
   @include min(tablet) {
-    margin: 0;
+    margin: 0 0 1.6rem 0;
     padding: 3.2rem;
-    max-width: 100%;
     border-radius: 0;
-
-    > div {
-      margin-top: 3.4rem;
-    }
+    max-width: 100%;
   }
 }
 

package/src/components/molecules/header/variants/author/template-one/template-one.module.scss

@@ -6,12 +6,14 @@
   border: 1.5px solid #e9e9e9;
   border-radius: 1.6rem;
   background-color: #ffffff;
+  margin-bottom: 2rem;
 
   @include min(tablet) {
     margin: 1.8rem max(1.6rem, 50% - calc(var(--main-container-max) - 4.8rem) / 2) 0;
     padding: 2.4rem;
     max-width: calc(var(--main-container-max) - 4.8rem);
     flex-direction: row;
+    margin-bottom: 2rem;
 
     > div {
       margin-left: 4.8rem;
@@ -66,21 +68,21 @@
 
 .biography {
   margin-bottom: 2.4rem;
-  height: 13.5rem;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 5;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  // height: 13.5rem;
+  // display: -webkit-box;
+  // -webkit-box-orient: vertical;
+  // -webkit-line-clamp: 5;
+  // overflow: hidden;
+  // text-overflow: ellipsis;
   line-height: 2.7rem;
   font-size: 1.6rem;
   font-weight: 400;
   color: #3e3c47;
 
-  @include min(tablet) {
-    height: 5.4rem;
-    -webkit-line-clamp: 2;
-  }
+  // @include min(tablet) {
+  //   height: 5.4rem;
+  //   -webkit-line-clamp: 2;
+  // }
 
   img {
     display: none;

package/src/components/molecules/header/variants/author/template-three/index.js

@@ -10,12 +10,14 @@ import styles from './template-three.module.scss';
 export default function TemplateThree({ author, icons }) {
   return (
     <div className={styles.container}>
-      <Portrait className={styles.portrait} author={author} />
       <div>
-        <Socials className={styles.socials} author={author} />
-        <Name className={styles.name} name={author.name} icon={icons?.verify} />
-        <div className={styles.title}>{author.author_title}</div>
-        <Expertise expertise={author.expertise} icon={icons?.expertise} />
+        <Portrait className={styles.portrait} author={author} />
+        <div>
+          <Socials className={styles.socials} author={author} />
+          <Name className={styles.name} name={author.name} icon={icons?.verify} />
+          <div className={styles.title}>{author.author_title}</div>
+          <Expertise expertise={author.expertise} icon={icons?.expertise} />
+        </div>
       </div>
     </div>
   );

package/src/components/molecules/header/variants/author/template-three/template-three.module.scss

@@ -1,9 +1,4 @@
 .container {
-  margin: 0 max(1.6rem, 50% - 37.5rem / 2);
-  padding: 1.6rem;
-  max-width: 37.5rem;
-  position: relative;
-  @include flex-direction(column);
   border: 1.5px solid #e9e9e9;
   border-radius: 1.6rem;
   background-size: 100% 12.5rem;
@@ -20,20 +15,33 @@
     radial-gradient(at 0% 31%, hsla(247, 40%, 46%, 1) 0px, transparent 50%),
     radial-gradient(at 0% 100%, hsla(247, 40%, 46%, 1) 0px, transparent 50%),
     radial-gradient(at 0% 68%, hsla(247, 40%, 46%, 1) 0px, transparent 50%);
+    @include flex-align(center, center);
+    margin: 0 1rem 1rem 1rem;
+    @include min(tablet){
+      background-size: 100% 16.5rem;
+    }
+  > div {
+    margin: 0 max(1.6rem, 50% - 37.5rem / 2);
+    padding: 1.6rem;
+    position: relative;
+    @include flex-direction(column);
+    width: 100%;
 
-  @include min(tablet) {
-    margin: 0;
-    padding: 4rem;
-    max-width: 100%;
-    flex-direction: row;
-    border-radius: 0;
-    background-size: 100% 16.5rem;
 
-    > div {
-      margin-top: 9.6rem;
-      margin-left: 7.2rem;
-      padding-top: 4.5rem;
-      width: 100%;
+    @include min(tablet) {
+      margin: 0;
+      padding: 4rem 0;
+      max-width: 162rem;
+      flex-direction: row;
+      border-radius: 0;
+    
+
+      > div {
+        margin-top: 9.6rem;
+        margin-left: 7.2rem;
+        padding-top: 4.5rem;
+        width: 100%;
+      }
     }
   }
 }
@@ -42,8 +50,11 @@
   margin-top: 9.6rem;
   margin-bottom: 1.6rem;
   border-radius: 50%;
-
   @include min(tablet) {
+    margin-bottom: 0;
+    margin-left: 2rem;
+  }
+  @include min(laptop) {
     margin-bottom: 0;
     margin-left: 8rem;
   }
@@ -86,7 +97,7 @@
   top: 14.4rem;
   right: 1.6rem;
   position: absolute;
-  
+
   @include min(tablet) {
     float: right;
     position: initial;
@@ -95,7 +106,7 @@
     > a {
       height: 4rem;
       width: 4rem;
-      
+
       > svg {
         height: 1.65rem;
         width: 1.65rem;

package/src/components/molecules/header/variants/author/template-two/index.js

@@ -10,12 +10,14 @@ import styles from './template-two.module.scss';
 export default function TemplateTwo({ author, icons }) {
   return (
     <div className={styles.container}>
-      <Portrait className={styles.portrait} author={author} />
       <div>
-        <div className={styles.title}>{author.author_title}</div>
-        <Name className={styles.name} name={author.name} icon={icons?.verify} />
-        <Socials className={styles.socials} author={author} />
-        <Expertise expertise={author.expertise} icon={icons?.expertise} />
+        <Portrait className={styles.portrait} author={author} />
+        <div>
+          <div className={styles.title}>{author.author_title}</div>
+          <Name className={styles.name} name={author.name} icon={icons?.verify} />
+          <Socials className={styles.socials} author={author} />
+          <Expertise expertise={author.expertise} icon={icons?.expertise} />
+        </div>
       </div>
     </div>
   );

package/src/components/molecules/header/variants/author/template-two/template-two.module.scss

@@ -1,22 +1,25 @@
 .container {
-  margin: 0 max(1.6rem, 50% - 37.5rem / 2);
-  padding: 2.4rem 2.2rem;
-  max-width: 37.5rem;
-  @include flex-direction(column);
   border: 1.5px solid #e9e9e9;
   border-radius: 1.6rem;
   background-color: #ffffff;
+  margin: 0 1rem 1.6rem 1rem;
+  > div {
+    margin: 0 max(1.6rem, 50% - 37.5rem / 2);
+    padding: 2.4rem 2.2rem;
+    max-width: 37.5rem;
+    @include flex-direction(column);
 
-  @include min(tablet) {
-    margin: 0;
-    padding: 4rem 12rem;
-    max-width: 100%;
-    flex-direction: row;
-    border-radius: 0;
+    @include min(tablet) {
+      margin: 0 auto;
+      padding: 4rem 6rem;
+      max-width: 162rem;
+      flex-direction: row;
+      border-radius: 0;
 
-    > div {
-      margin-left: 7.2rem;
-      padding-top: 4.5rem;
+      > div {
+        margin-left: 7.2rem;
+        padding-top: 4.5rem;
+      }
     }
   }
 }

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

@@ -10,7 +10,7 @@
     display: grid;
     padding: 4rem 1.6rem;
 
-    margin: var(--operator-template-five-margin-mobile, 0rem);
+    margin: var(--operator-template-five-margin-mobile, 1.6rem);
 
     @include min(tablet) {
         margin: 0 auto;

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

@@ -18,6 +18,8 @@
         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);
+        margin-left: var(--operator-template-four-margin-left-desktop, 1.6rem);
+        margin-right: var(--operator-template-four-margin-right-desktop, 1.6rem);
     }
 }
 

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

@@ -46,6 +46,8 @@
         margin: 0 auto;
         margin-top: var(--operator-template-three-margin-top-desktop, 1.6rem);
         margin-bottom: var(--operator-template-three-margin-bottom-desktop, 1.6rem);
+        margin-left: var(--operator-template-three-margin-left-desktop, 1.6rem);
+        margin-right: var(--operator-template-three-margin-right-desktop, 1.6rem);
     }
 }
 
@@ -122,7 +124,6 @@
     width: 100%;
     padding-bottom: 0.7rem;
 
-
     >div {
         grid-template-columns: 1fr;
         padding: 16px;

package/src/constants/ratings-constant.js

@@ -17,7 +17,7 @@ export default {
     {
       fieldLabel: 'Bonus',
       translationKey: 'bonus_offers',
-      fieldValue: 'bonus.rating_bonuses',
+      fieldValue: 'rating_bonuses',
       componentToUse: (numOfStars, value) => (
         <StarRating numOfStars={numOfStars} rating={value} icon={<FaStar />} />
       ),
@@ -25,7 +25,7 @@ export default {
     {
       fieldLabel: 'Payment',
       translationKey: 'payment_method',
-      fieldValue: 'bonus.rating_payout',
+      fieldValue: 'rating_payout',
       componentToUse: (numOfStars, value) => (
         <StarRating numOfStars={numOfStars} rating={value} icon={<FaStar />} />
       ),
@@ -33,7 +33,7 @@ export default {
     {
       fieldLabel: 'Support',
       translationKey: 'customer_service',
-      fieldValue: 'bonus.rating_games',
+      fieldValue: 'rating_games',
       componentToUse: (numOfStars, value) => (
         <StarRating numOfStars={numOfStars} rating={value} icon={<FaStar />} />
       ),
@@ -41,7 +41,7 @@ export default {
     {
       fieldLabel: 'Usability',
       translationKey: 'site_usability',
-      fieldValue: 'bonus.rating_customer',
+      fieldValue: 'rating_customer',
       componentToUse: (numOfStars, value) => (
         <StarRating numOfStars={numOfStars} rating={value} icon={<FaStar />} />
       ),
@@ -49,7 +49,7 @@ export default {
     {
       fieldLabel: 'Games',
       translationKey: 'games',
-      fieldValue: 'bonus.rating_casino',
+      fieldValue: 'rating_casino',
       componentToUse: (numOfStars, value) => (
         <StarRating numOfStars={numOfStars} rating={value} icon={<FaStar />} />
       ),
@@ -59,7 +59,7 @@ export default {
     {
       fieldLabel: 'Bonus',
       translationKey: 'bonus_offers',
-      fieldValue: 'bonus.rating_bonuses',
+      fieldValue: 'rating_bonuses',
       componentToUse: (numOfStars, value) => (
         <StarRating numOfStars={numOfStars} rating={value} icon={<FaStar />} />
       ),
@@ -67,7 +67,7 @@ export default {
     {
       fieldLabel: 'Payment',
       translationKey: 'payment_method',
-      fieldValue: 'bonus.rating_payout',
+      fieldValue: 'rating_payout',
       componentToUse: (numOfStars, value) => (
         <StarRating numOfStars={numOfStars} rating={value} icon={<FaStar />} />
       ),
@@ -75,7 +75,7 @@ export default {
     {
       fieldLabel: 'Support',
       translationKey: 'customer_service',
-      fieldValue: 'bonus.rating_games',
+      fieldValue: 'rating_games',
       componentToUse: (numOfStars, value) => (
         <StarRating numOfStars={numOfStars} rating={value} icon={<FaStar />} />
       ),
@@ -83,7 +83,7 @@ export default {
     {
       fieldLabel: 'Usability',
       translationKey: 'site_usability',
-      fieldValue: 'bonus.rating_customer',
+      fieldValue: 'rating_customer',
       componentToUse: (numOfStars, value) => (
         <StarRating numOfStars={numOfStars} rating={value} icon={<FaStar />} />
       ),
@@ -91,7 +91,7 @@ export default {
     {
       fieldLabel: 'Games',
       translationKey: 'games',
-      fieldValue: 'bonus.rating_casino',
+      fieldValue: 'rating_casino',
       componentToUse: (numOfStars, value) => (
         <StarRating numOfStars={numOfStars} rating={value} icon={<FaStar />} />
       ),

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

@@ -82,30 +82,33 @@ export const relationContent = (section) => {
       );
       return <ModuleComponent page={section.page} image="../../../../images/verify.svg" />;
     }
-    // TODO - replace page.author with page.relation
     case 'author': {
+      if (!section.page.relation) {
+        return <></>;
+      }
+
       switch (section?.page?.page_styles?.short_name) {
         case 'template_two':
           ModuleComponent = loadable(() =>
             import('../../../../components/molecules/header/variants/author/template-two')
           );
-          return <ModuleComponent author={section.page.author} />;
+          return <ModuleComponent author={section.page.relation} />;
         case 'template_three':
           ModuleComponent = loadable(() =>
             import('../../../../components/molecules/header/variants/author/template-three')
           );
-          return <ModuleComponent author={section.page.author} />;
+          return <ModuleComponent author={section.page.relation} />;
         case 'template_four':
           ModuleComponent = loadable(() =>
             import('../../../../components/molecules/header/variants/author/template-four')
           );
-          return <ModuleComponent author={section.page.author} />;
+          return <ModuleComponent author={section.page.relation} />;
         case 'template_one':
         default:
           ModuleComponent = loadable(() =>
             import('../../../../components/molecules/header/variants/author/template-one')
           );
-          return <ModuleComponent author={section.page.author} />;
+          return <ModuleComponent author={section.page.relation} />;
       }
     }
     case 'page': {

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

@@ -106,6 +106,7 @@ const Modules = ({ module, page, pageContext, index, exclOperator }) => {
           logo: module?.value?.logo_url,
           hasLink: true,
           prettyLink: prettyTracker(module?.value, 'main', false, page?.template),
+          isStickyCta: false,
         }
       : {};
 

package/storybook/public/iframe.html

@@ -345,4 +345,4 @@
           
       
           
-            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.3c8ed572.iframe.bundle.js"></script><script src="434.757b8672.iframe.bundle.js"></script><script src="main.b6d41d26.iframe.bundle.js"></script></body></html>
+            window['STORIES'] = [{"titlePrefix":"","directory":"./src","files":"**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"},{"titlePrefix":"","directory":"./src","files":"**/**/**/**/**/*.stories.js","importPathMatcher":"^\\.[\\\\/](?:src(?:\\/(?!\\.)(?:(?:(?!(?:^|\\/)\\.).)*?)\\/|\\/|$)(?!\\.)(?=.)[^/]*?\\.stories\\.js)$"}];</script><script src="runtime~main.3c8ed572.iframe.bundle.js"></script><script src="434.757b8672.iframe.bundle.js"></script><script src="main.8e1a414a.iframe.bundle.js"></script></body></html>