gatsby-matrix-theme 19.0.3 → 19.0.5

package/CHANGELOG.md

@@ -1,3 +1,29 @@
+## [19.0.5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.4...v19.0.5) (2023-04-13)
+
+
+### Bug Fixes
+
+* fix for article default banner and add vars for bards bg ([83a98e7](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/83a98e74bfd5c483e149776bfcd609d37cd86347))
+* game card with operators logic ([600348d](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/600348dcf0f4e455e9ad39c85fb200c6f966a4a5))
+
+## [19.0.4](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.3...v19.0.4) (2023-04-13)
+
+
+### Bug Fixes
+
+* cards and author header ([6438baa](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/6438baa0944d657e56da349fe4fe31af0830ec4e))
+* fix for tnc issue ([b3c3d43](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b3c3d43cd2fc4962cd582e423dfd3b9223cd0f88))
+* tests ([3e947ee](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3e947ee6ac5da548ae9e50d718c4941f4a557e8f))
+
+
+### Config
+
+* update to latest core theme ([c99e868](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c99e8688885628d77861cf9ba4fbe42419bac3cc))
+
+
+* Merge branch 'tm-tnc-issue' into 'master' ([0346e41](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/0346e4132b231811e8cc900999943b98f1c12b64))
+* Merge branch 'cards-fixes-alignment' into 'master' ([87caa40](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/87caa404c76e22f4676693b6803b5f3016b96127))
+
 ## [19.0.3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v19.0.2...v19.0.3) (2023-04-12)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "19.0.3",
+  "version": "19.0.5",
   "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": "20.0.1",
+    "gatsby-core-theme": "20.0.2",
     "gatsby-plugin-sharp": "^4.10.2",
     "gatsby-plugin-sitemap": "^3.3.0",
     "gatsby-transformer-sharp": "^4.10.0",

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

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import { imagePrettyUrl, translate } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
 import { formatDate } from '~helpers/date-time';
 import { Context } from '~context/MainProvider';
 import styles from './article-card.module.scss';
@@ -25,16 +26,13 @@ const ArticleCard = ({
 
   return (
     <div className={styles.article}>
-      {banner && (
-        <Link to={path} className={`${styles.image} article-card-gtm`} aria-label={`${title} Link`}>
-          <LazyImage
-            width={width}
-            height={height}
-            src={imagePrettyUrl(banner, width, height)}
-            alt={title}
-          />
-        </Link>
-      )}
+      <Link to={path} className={`${styles.image} article-card-gtm`} aria-label={`${title} Link`}>
+        {banner ? (
+          <LazyImage width={width} height={height} src={imagePrettyUrl(banner)} alt={title} />
+        ) : (
+          <GatsbyImg alt={title} width="100%" height="100%" filename="default-article.jpg" />
+        )}
+      </Link>
       <div className={`${styles.cardContent}`}>
         <Link to={path} className="article-card-gtm">
           <span className={styles.cardTitle}>{title}</span>

package/src/components/atoms/cards/author/template-one/template-one.module.scss

@@ -28,7 +28,7 @@
 
 .posts {
   position: absolute;
-  background: #5545a9;
+  background: var(--primary-color);
   border-radius: 100px;
   color: #fff;
   top: 2.4rem;

package/src/components/atoms/cards/author/template-two/template-two.module.scss

@@ -15,7 +15,7 @@
 }
 
 .posts {
-  background: #5545a9;
+  background: var(--primary-color);
   border-radius: 100px;
   color: #fff;
   top: 2.4rem;

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

@@ -3,8 +3,6 @@ import loadable from '@loadable/component';
 
 export default (template) => {
   switch (template) {
-    case 'template_one':
-      return loadable(() => import(`./template-one`));
     case 'template_two':
       return loadable(() => import(`./template-two`));
     case 'template_three':
@@ -14,6 +12,6 @@ export default (template) => {
     case 'template_five':
       return loadable(() => import(`./template-five`));
     default:
-      return loadable(() => import(`../game-card`));
+      return loadable(() => import(`./template-one`));
   }
 };

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

@@ -31,7 +31,8 @@ const TemplateFive = ({
   const { relation, title, path, banner } = item;
   const { translations } = useContext(Context) || {};
   const featured = !!getSectionExtraField(null, item, 'card_background_image');
-  const operator = item.extra_fields?.related_operator || relation?.game_provider;
+  const operator = item.extra_fields?.operator;
+  const provider = relation?.game_provider;
   const gameImage = (useThumbnail && relation?.thumbnail_filename_object?.filename) || banner;
   const operatorLogo = operator?.logo_url_object || operator?.logo_filename_object;
   const operatorText = operator?.one_liners?.main?.one_liner
@@ -87,12 +88,14 @@ const TemplateFive = ({
               alt={getAltText(operatorLogo, title)}
             />
           )}
-          {operator?.name && operator?.path ? (
+          {operator && operator.path ? (
             <Link to={operator.path} className={styles.cardProvider}>
               {operatorText}
             </Link>
           ) : (
-            <div className={styles.cardProvider}>{operatorText}</div>
+            <Link to={provider?.path} className={styles.cardProvider}>
+              <div className={styles.cardProvider}>{provider?.name}</div>
+            </Link>
           )}
           {affilateLink ? (
             <>
@@ -155,7 +158,7 @@ TemplateFive.propTypes = {
     path: PropTypes.string,
     banner: PropTypes.string,
     extra_fields: PropTypes.shape({
-      related_operator: PropTypes.shape({
+      operator: PropTypes.shape({
         status: PropTypes.string,
         name: PropTypes.string,
         path: PropTypes.string,

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

@@ -33,10 +33,8 @@ Default.args = {
     ...card,
     banner: '',
     title: 'Wolf Gold',
-    relation: {
-      ...card.relation,
-      rating: '4.5',
-      game_provider: {
+    extra_fields: {
+      operator: {
         name: 'Wildz',
         path: 'wildz-casino',
         one_liners: {
@@ -46,6 +44,14 @@ Default.args = {
         },
       },
     },
+    relation: {
+      ...card.relation,
+      rating: '4.5',
+      game_provider: {
+        name: 'Wildz',
+        path: 'wildz-casino',
+      },
+    },
   },
   translations: {
     play_now_slots: 'Play Slots LANG',

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

@@ -26,7 +26,7 @@ describe('Game Cards', () => {
     const card = getSampleOperatorCards().items[0];
     card.extra_fields = {
       ...card.extra_fields,
-      related_operator: {
+      operator: {
         name: 'Test Game Operator',
         path: 'test-game-operator-path',
         one_liners: {

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

@@ -30,7 +30,8 @@ const TemplateFour = ({
   const { relation, title, path, banner } = item;
   const { translations } = useContext(Context) || {};
   const featured = !!getSectionExtraField(null, item, 'card_background_image');
-  const operator = item.extra_fields?.related_operator || relation?.game_provider;
+  const operator = item.extra_fields?.operator;
+  const provider = relation?.game_provider;
   const gameImage = (useThumbnail && relation?.thumbnail_filename_object?.filename) || banner;
   const StarRating = useOneStarRating
     ? loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'))
@@ -71,12 +72,14 @@ const TemplateFour = ({
         <div className={styles.cardInner}>
           <span>
             Game Powered by:
-            {operator?.name && operator?.path ? (
+            {operator && operator.path ? (
               <Link to={operator.path} className={styles.cardProvider}>
                 {operator.name}
               </Link>
             ) : (
-              <div className={styles.cardProvider}>{operator?.name}</div>
+              <Link to={provider?.path} className={styles.cardProvider}>
+                <div className={styles.cardProvider}>{provider?.name}</div>
+              </Link>
             )}
           </span>
           {affilateLink ? (
@@ -136,7 +139,7 @@ TemplateFour.propTypes = {
     path: PropTypes.string,
     banner: PropTypes.string,
     extra_fields: PropTypes.shape({
-      related_operator: PropTypes.shape({
+      operator: PropTypes.shape({
         status: PropTypes.string,
         name: PropTypes.string,
         path: PropTypes.string,

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

@@ -26,7 +26,7 @@ describe('Game Cards', () => {
     const card = getSampleOperatorCards().items[0];
     card.extra_fields = {
       ...card.extra_fields,
-      related_operator: {
+      operator: {
         name: 'Test Game Operator',
         path: 'test-game-operator-path',
       },

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

@@ -31,7 +31,8 @@ const TemplateOne = ({
   const { relation, title, path, banner } = item;
   const { translations } = useContext(Context) || {};
   const featured = !!getSectionExtraField(null, item, 'card_background_image');
-  const operator = item.extra_fields?.related_operator || relation?.game_provider;
+  const operator = item.extra_fields?.operator;
+  const provider = relation?.game_provider;
   const gameImage = (useThumbnail && relation?.thumbnail_filename_object?.filename) || banner;
   const StarRating = useOneStarRating
     ? loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'))
@@ -56,12 +57,14 @@ const TemplateOne = ({
           <span className={styles.cardTitle}>{title}</span>
         </Link>
         <div className={styles.cardInner}>
-          {operator?.name && operator?.path ? (
+          {operator && operator.path ? (
             <Link to={operator.path} className={styles.cardProvider}>
               {operator.name}
             </Link>
           ) : (
-            <div className={styles.cardProvider}>{operator?.name}</div>
+            <Link to={provider?.path} className={styles.cardProvider}>
+              <div className={styles.cardProvider}>{provider?.name}</div>
+            </Link>
           )}
           <div className={styles.cardRating}>
             {relation && (
@@ -137,7 +140,7 @@ TemplateOne.propTypes = {
     path: PropTypes.string,
     banner: PropTypes.string,
     extra_fields: PropTypes.shape({
-      related_operator: PropTypes.shape({
+      operator: PropTypes.shape({
         status: PropTypes.string,
         name: PropTypes.string,
         path: PropTypes.string,

package/src/components/atoms/cards/game-cards/template-one/template-one.module.scss

@@ -4,7 +4,7 @@
   max-width: 34.5rem;
   width: 100%;
   overflow: hidden;
-  background: #fff;
+  background: var(--cards-background-color, #fff);
   border-radius: var(--cards-border-radius);
   border: var(--cards-border);
   position: relative;

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

@@ -26,7 +26,7 @@ describe('Game Cards', () => {
     const card = getSampleOperatorCards().items[0];
     card.extra_fields = {
       ...card.extra_fields,
-      related_operator: {
+      operator: {
         name: 'Test Game Operator',
         path: 'test-game-operator-path',
       },

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

@@ -30,7 +30,8 @@ const TemplateThree = ({
   const { relation, title, path, banner } = item;
   const { translations } = useContext(Context) || {};
   const featured = !!getSectionExtraField(null, item, 'card_background_image');
-  const operator = item.extra_fields?.related_operator || relation?.game_provider;
+  const operator = item.extra_fields?.operator;
+  const provider = relation?.game_provider;
   const gameImage = (useThumbnail && relation?.thumbnail_filename_object?.filename) || banner;
   const StarRating = useOneStarRating
     ? loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'))
@@ -71,12 +72,14 @@ const TemplateThree = ({
           <span className={styles.cardTitle}>{title}</span>
         </Link>
         <div className={styles.cardInner}>
-          {operator?.name && operator?.path ? (
+          {operator && operator.path ? (
             <Link to={operator.path} className={styles.cardProvider}>
               {operator.name}
             </Link>
           ) : (
-            <div className={styles.cardProvider}>{operator?.name}</div>
+            <Link to={provider?.path} className={styles.cardProvider}>
+              <div className={styles.cardProvider}>{provider?.name}</div>
+            </Link>
           )}
           {affilateLink ? (
             <>
@@ -135,7 +138,7 @@ TemplateThree.propTypes = {
     path: PropTypes.string,
     banner: PropTypes.string,
     extra_fields: PropTypes.shape({
-      related_operator: PropTypes.shape({
+      operator: PropTypes.shape({
         status: PropTypes.string,
         name: PropTypes.string,
         path: PropTypes.string,

package/src/components/atoms/cards/game-cards/template-three/template-three.module.scss

@@ -3,7 +3,7 @@
   max-width: 34.5rem;
   width: 100%;
   overflow: hidden;
-  background: #fff;
+  background: var(--cards-background-color, #fff);
   border-radius: var(--cards-border-radius);
   border: var(--cards-border);
   position: relative;

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

@@ -26,7 +26,7 @@ describe('Game Cards', () => {
     const card = getSampleOperatorCards().items[0];
     card.extra_fields = {
       ...card.extra_fields,
-      related_operator: {
+      operator: {
         name: 'Test Game Operator',
         path: 'test-game-operator-path',
       },

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

@@ -30,7 +30,8 @@ const TemplateTwo = ({
   const { relation, title, path, banner } = item;
   const { translations } = useContext(Context) || {};
   const featured = !!getSectionExtraField(null, item, 'card_background_image');
-  const operator = item.extra_fields?.related_operator || relation?.game_provider;
+  const operator = item.extra_fields?.operator;
+  const provider = relation?.game_provider;
   const gameImage = (useThumbnail && relation?.thumbnail_filename_object?.filename) || banner;
   const StarRating = useOneStarRating
     ? loadable(() => import('gatsby-core-theme/src/components/molecules/star-rating/one-star'))
@@ -73,12 +74,14 @@ const TemplateTwo = ({
           </div>
         </div>
         <div className={styles.cardInnerBottom}>
-          {operator?.name && operator?.path ? (
+          {operator && operator.path ? (
             <Link to={operator.path} className={styles.cardProvider}>
               {operator.name}
             </Link>
           ) : (
-            <div className={styles.cardProvider}>{operator?.name}</div>
+            <Link to={provider?.path} className={styles.cardProvider}>
+              <div className={styles.cardProvider}>{provider?.name}</div>
+            </Link>
           )}
           {affilateLink ? (
             <>
@@ -137,7 +140,7 @@ TemplateTwo.propTypes = {
     path: PropTypes.string,
     banner: PropTypes.string,
     extra_fields: PropTypes.shape({
-      related_operator: PropTypes.shape({
+      operator: PropTypes.shape({
         status: PropTypes.string,
         name: PropTypes.string,
         path: PropTypes.string,

package/src/components/atoms/cards/game-cards/template-two/template-two.module.scss

@@ -4,7 +4,7 @@
   max-width: 34.5rem;
   width: 100%;
   overflow: hidden;
-  background: #fff;
+  background: var(--cards-background-color, #fff);
   border-radius: var(--cards-border-radius);
   border: var(--cards-border);
   position: relative;

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

@@ -26,7 +26,7 @@ describe('Game Cards', () => {
     const card = getSampleOperatorCards().items[0];
     card.extra_fields = {
       ...card.extra_fields,
-      related_operator: {
+      operator: {
         name: 'Test Game Operator',
         path: 'test-game-operator-path',
       },

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

@@ -107,6 +107,7 @@ const TemplateFour = ({
             {relation?.status !== 'not_recommended' && (
               <OperatorCta
                 tracker="main"
+                buttonSize="m"
                 operator={relation}
                 translationsObj={{
                   active: { translationKey: 'play_now', defaultValue: 'Play Now' },

package/src/components/atoms/cards/operator-card/template-four/template-four.module.scss

@@ -77,17 +77,7 @@
     margin-top: 0;
   
     a {
-      width: 100%;
-      height: 5.6rem;
-      font-weight: 700;
-      text-transform: capitalize;      
-      color: var(--color-4);
-      font-size: 1.8rem;
-      line-height: 2rem;
-      gap: 0.4rem;
-      text-decoration: none;
-  
-      @include flex-align(center, center);
+      border-radius: var(--border-radius);
     }
 }
 

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

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

package/src/components/atoms/cards/operator-card/template-one/template-one.module.scss

@@ -55,17 +55,7 @@
     margin-top: 0;
   
     a {
-      width: 100%;
-      height: 5.6rem;
-      font-weight: 700;
-      text-transform: capitalize;      
-      color: var(--color-4);
-      font-size: 1.8rem;
-      line-height: 2rem;
-      gap: 0.4rem;
-      text-decoration: none;
-  
-      @include flex-align(center, center);
+      border-radius: var(--border-radius);
     }
 }
 
@@ -254,7 +244,8 @@
     text-align: left;
 
     &::after {
-      left: 100% !important;
+      left: auto !important;
+      right: 0;
       border-color: var(--color-49) !important;
     }
   }

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

@@ -105,6 +105,7 @@ const TemplateThree = ({
             {relation?.status !== 'not_recommended' && (
               <OperatorCta
                 tracker="main"
+                buttonSize="m"
                 operator={relation}
                 translationsObj={{
                   active: { translationKey: 'play_now', defaultValue: 'Play Now' },

package/src/components/atoms/cards/operator-card/template-three/template-three.module.scss

@@ -49,18 +49,9 @@
     color: var(--color-44);
     @include flex-direction(column);
     margin-top: 0;
-  
+
     a {
-      width: 100%;
-      height: 5.6rem;
-      font-weight: 700;
-      text-transform: capitalize;      
-      color: var(--color-4);
-      font-size: 1.8rem;
-      line-height: 2rem;
-      gap: 0.4rem;
-  
-      @include flex-align(center, center);
+      border-radius: var(--border-radius);
     }
 }
 

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

@@ -116,6 +116,7 @@ const TemplateTwo = ({
             {relation?.status !== 'not_recommended' && (
               <OperatorCta
                 tracker="main"
+                buttonSize="m"
                 operator={relation}
                 translationsObj={{
                   active: { translationKey: 'play_now', defaultValue: 'Play Now' },

package/src/components/atoms/cards/operator-card/template-two/template-two.module.scss

@@ -52,15 +52,7 @@
   
     a {
       width: 100%;
-      height: 5.6rem;
-      font-weight: 700;
-      text-transform: capitalize;      
-      color: var(--color-4);
-      font-size: 1.8rem;
-      line-height: 2rem;
-      gap: 0.4rem;
-      text-decoration: none;  
-      @include flex-align(center, center);
+      border-radius: var(--border-radius);
     }
 
     p {
@@ -260,7 +252,8 @@
     text-align: left;
 
     &::after {
-      left: 100% !important;
+      left: auto !important;
+      right: 0;
       border-color: var(--color-49) !important;
     }
   }

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

@@ -67,8 +67,8 @@ const TemplateOneTwo = ({ item, showSellingPoints = true, width = 150, height =
         </div>
         <Button
           to={path}
+          primaryColor
           icon={<FaArrowRight />}
-          noStyle
           btnText={
             !showSellingPoints
               ? `${translate(translations, 'go_to_review', 'Go To Review')}`

package/src/components/atoms/cards/payment-method/template-one/template-one.module.scss

@@ -11,14 +11,10 @@
   gap: 1.6rem;
   max-width: 34.3rem;
   > a {
-    display: inline-flex;
+    display: flex !important;
     align-items: center;
     justify-content: center;
-    text-align: center;
-    background-color: var(--primary-button-color, #5545a9);
-    color: var(--primary-button-color-text, #ffffff);
-    padding: 1.6rem 2.4rem;
-    border-radius: 0.8rem;
+    padding: 1.6rem 2.4rem !important;
     white-space: nowrap;
     gap: 1.1rem;
     font-weight: 700;

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

@@ -56,7 +56,7 @@ const TemplateThree = ({ item, width = 150, height = 150, useOneStarRating = fal
 
         <Button
           className={`${styles.reviewButton} payment-method-card-gtm`}
-          noStyle
+          primaryColor
           to={path}
           btnText="Read Review"
           icon={<FaArrowRight />}

package/src/components/atoms/cards/payment-method/template-three/template-three.module.scss

@@ -10,15 +10,11 @@
   height: 100%;
   gap: 3.4rem;
    max-width: 34.3rem;
-  > a {
-    display: inline-flex;
+   > a {
+    display: flex !important;
     align-items: center;
     justify-content: center;
-    text-align: center;
-    background-color: var(--primary-button-color, #5545a9);
-    color: var(--primary-button-color-text, #ffffff);
-    padding: 1.6rem 2.4rem;
-    border-radius: 0.8rem;
+    padding: 1.6rem 2.4rem !important;
     white-space: nowrap;
     gap: 1.1rem;
     font-weight: 700;