gatsby-matrix-theme 53.3.6 → 53.3.8

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## [53.3.8](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.3.7...v53.3.8) (2025-10-21)
+
+
+### Bug Fixes
+
+* update info grid constant and grid item component ([1e13f80](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/1e13f80cea07d3ce95dabca8fe37c77b04de612d))
+* update tests ([fe2d7c5](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/fe2d7c5861fb8528f36002b9ed7e45a4a5606f8e))
+* update theme ([618ee36](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/618ee360f70ca2dff4573bc7ae97d6f5c7b953a9))
+* update theme ([2ddc658](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/2ddc658de836ff06e4f1afca93fbe0b5d6a9fa12))
+
+
+* Merge branch 'en-140-payout-time' into 'master' ([5b4cd38](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/5b4cd380e3ff2cf254ac038b89f0096d1552e490))
+
+## [53.3.7](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.3.6...v53.3.7) (2025-10-14)
+
+
+### Bug Fixes
+
+* cardsv2 new template styling ([711a585](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/711a585434327f4f59fe7a0a86a2624654ce0c7e))
+* software provider card styling ([c9ab33d](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/c9ab33d6d94927361811ac66f30142cb30ab124b))
+
+
+* Merge branch 'fix/cardsv2-styling' into 'master' ([ed0cd8a](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/ed0cd8a4d46433432a1bd5d95e11a282f0c1aca0))
+
 ## [53.3.6](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.3.5...v53.3.6) (2025-10-14)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.3.6",
+  "version": "53.3.8",
   "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": "44.4.62",
+    "gatsby-core-theme": "44.5.0",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",

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

@@ -13,7 +13,7 @@ import styles from './template-six.module.scss';
 const TemplateSix = ({
   item,
   width = 277,
-  height = 140,
+  height = 277,
   showDate = false,
   showAuthorAsLink = false,
   verifyIcon = '',

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

@@ -13,7 +13,7 @@ import styles from './template-five.module.scss';
 const TemplateFive = ({
   item,
   width = 277,
-  height = 140,
+  height = 277,
   showDate = false,
   showAuthorAsLink = false,
   verifyIcon = '',

package/src/components/atoms/cards/software-provider-card/index.js

@@ -1,10 +1,11 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import PropTypes from 'prop-types';
-import Link from '~hooks/link';
-import LazyImage from '~hooks/lazy-image';
-import { imagePrettyUrl, textWordsLimit } from '~helpers/getters';
-import { getAltText } from '~helpers/image';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import GatsbyImg from 'gatsby-core-theme/src/hooks/gatsby-img';
+import { imagePrettyUrl, textWordsLimit } from 'gatsby-core-theme/src/helpers/getters';
+import { getAltText } from 'gatsby-core-theme/src/helpers/image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 
 import styles from './software-provider-card.module.scss';
@@ -22,8 +23,7 @@ const SoftwareProviderCard = ({
   height = 150,
 }) => {
   const { title, path, relation, sections } = item;
-  const logUrlObject =
-    relation?.standardised_logo_filename_object || relation?.logo_filename_object;
+  const logUrlObject = item.relation?.logo?.filename || item?.relation?.logo;
 
   return (
     <div className={styles?.content || ''}>
@@ -33,13 +33,23 @@ const SoftwareProviderCard = ({
           aria-label={useTranslate(`ariaLabel-${title}Link`, `${title} Link`)}
           to={path}
         >
-          <LazyImage
-            width={width}
-            height={height}
-            className={styles?.logo || ''}
-            src={imagePrettyUrl(logUrlObject?.filename, width, height)}
-            alt={getAltText(logUrlObject, title)}
-          />
+          {logUrlObject ? (
+            <LazyImage
+              width={width}
+              height={height}
+              className={styles?.logo || ''}
+              src={imagePrettyUrl(logUrlObject, width, height)}
+              alt={getAltText(logUrlObject, title)}
+            />
+          ) : (
+            <GatsbyImg
+              alt={title}
+              width="100%"
+              height="100%"
+              loading="lazy"
+              filename="default-article.jpg"
+            />
+          )}
         </Link>
         {showTitle && (
           <Link className={`${styles?.links || ''} software-provider-card-gtm`} to={path}>
@@ -59,7 +69,8 @@ const SoftwareProviderCard = ({
         {relation?.games_count && showProvider && (
           <p>
             {gameProvider.textOne}
-            <span className="counter-number"> {relation?.games_count} </span> {gameProvider.textTwo}
+            <span className={styles['counter-number']}> {relation?.games_count} </span>{' '}
+            {gameProvider.textTwo}
           </p>
         )}
       </div>

package/src/components/atoms/cards/software-provider-card/software-provider-card.module.scss

@@ -7,43 +7,53 @@
   justify-content: space-between;
   border-radius: 0.6rem;
   height: 100%;
+
   .header {
     @include flex-direction(column);
+
     .links {
       @include flex-align(center, center);
+
       &:hover {
         text-decoration: underline;
         color: #08202e;
       }
-      .logo {
-        max-width: 17.9rem;
-        max-height: 4rem;
-        margin-bottom: 1rem;
-      }
-      .title {
-        color: #08202e;
-        font-weight: 400;
-        padding-top: 0.8rem;
-        font-size: 1.6rem;
-      }
     }
   }
+
   .excerpt {
     color: #6b7982;
     font-size: 1.4rem;
     padding-bottom: 1.6rem;
   }
+
+  .logo {
+    max-width: 17.9rem;
+    max-height: 4rem;
+    margin-bottom: 1rem;
+    object-fit: cover;
+  }
+
+  .title {
+    color: #08202e;
+    font-weight: 400;
+    padding-top: 0.8rem;
+    font-size: 1.6rem;
+  }
+
   .bottom {
     @include flex-direction(column);
+
     p {
       color: #00889e;
       font-size: 1.4rem;
       text-align: center;
       padding: 0 3rem 1.6rem;
       font-weight: 400;
-      span {
-        font-weight: 500;
-      }
     }
   }
 }
+
+.counter-number {
+  font-weight: 500;
+}

package/src/components/atoms/info-grid/grid-item/index.js

@@ -19,13 +19,20 @@ const InfoGridItem = ({
   const [showMore, setShowMore] = useState(false);
 
   const title = useTranslate(gridKey, gridLabels[gridKey][1]);
-  const value = generateLabel(gridKey, gridItems[gridKey], gridLabels[gridKey][2], {
+  const label = generateLabel(gridKey, gridItems[gridKey], gridLabels[gridKey][2], {
     template,
     showAll: showMore,
     setShowMore,
     modulePosition,
-    module:'info_grid'
+    module:'info_grid',
   });
+
+
+  const value =
+  gridKey === 'payout_time'
+    ? useTranslate(label?.toLowerCase()?.replace(/[–\s]/g, '_'), label)
+    : label;
+
   const showGrid = (templateThree && value) || !templateThree; // hide entire cell if empty on author info grid only
 
   return (

package/src/components/atoms/info-grid/template-one/info-grid.test.js

@@ -41,7 +41,7 @@ describe('Show Info Grid Component', () => {
     const { container } = render(<InfoGrid page={data} showEmojis showTwoColumns={false} />);
 
     expect(container).toBeInTheDocument();
-    expect(container.querySelectorAll('.gridItem')).toHaveLength(8);
+    expect(container.querySelectorAll('.gridItem')).toHaveLength(9);
     expect(container.querySelector('.gridItem span')).toHaveTextContent(
       Object.values(gridLabels)[0][1]
     );
@@ -114,7 +114,7 @@ describe('Show Info Grid Component', () => {
     const { container } = render(<InfoGrid page={data} showEmojis showTwoColumns={false} />);
 
     expect(container).toBeInTheDocument();
-    expect(container.querySelectorAll('.gridItem')).toHaveLength(8);
+    expect(container.querySelectorAll('.gridItem')).toHaveLength(9);
     expect(container.querySelector('.gridItem span')).toHaveTextContent(
       Object.values(gridLabels)[0][1]
     );
@@ -297,7 +297,7 @@ describe('Show Info Grid Component', () => {
     fireEvent.click(button);
 
     // test after click
-    expect(container.querySelectorAll('.columnItem')).toHaveLength(8);
+    expect(container.querySelectorAll('.columnItem')).toHaveLength(9);
     expect(button).toHaveTextContent('Show less items');
   });
   test('Show how many remaining as button where there is too many items to display in each block', () => {

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 /* eslint-disable no-multi-assign */
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
@@ -16,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(6);
+    expect(container.querySelectorAll('li')).toHaveLength(7);
   });
 });
 

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 /* eslint-disable no-multi-assign */
 import React from 'react';
 import { render, cleanup, waitFor } from '@testing-library/react';
@@ -16,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(6);
+    expect(container.querySelectorAll('li')).toHaveLength(7);
   });
   test('Template Three variable component', async () => {
     const { container } = render(<TemplateThree {...data} hasVariableComponent  type="operator"  />);

package/src/constants/info-grid.js

@@ -44,11 +44,7 @@ export const defaultInfoGrid = {
       (value, props) => latestItems(value, { ...props, showMore: true, tooltip: false }, 2),
     ],
     launch_date: ['launch_date', 'Release Date'],
-    licenses: [
-      'license_objects',
-      '✅  License',
-      (value, props) => latestItems(value, props, 3),
-    ],
+    licenses: ['license_objects', '✅  License', (value, props) => latestItems(value, props, 3)],
     no_games: ['games_amount || games_amount', 'No. of Games'],
     game_providers: [
       'software',
@@ -65,6 +61,7 @@ export const defaultInfoGrid = {
           5
         ),
     ],
+    payout_time: ['payout_time', 'Payout time', (value) => value],
   },
   game_review: {
     launch_date: ['launch_date', 'Launched'],