gatsby-matrix-theme 53.2.50 → 53.2.52

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [53.2.52](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.2.51...v53.2.52) (2025-09-26)
+
+
+### Bug Fixes
+
+* card styles ([203880d](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/203880ddcfe11f801084dd9b6369c75894dd32f9))
+* change author color ([02f82a1](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/02f82a128d3021b8f0191ff21b5701c7556a260c))
+* operator card ([6701d31](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/6701d318e538a794f0e451eb27a1aea0953dd303))
+* remove author as links ([486aa94](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/486aa94180abcb1672c5c7b3b8a6fd47653c20f5))
+* update theme ([4e0592a](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/4e0592a15b7c1c226af592c7455c2a1b42c19508))
+
+
+* Merge branch 'en-55-style-cards' into 'master' ([7380d67](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/7380d6756fd8ddee2b956f040c4fb4e72072ccf5))
+* Merge branch 'en-55-style-cards' into 'master' ([4aa8186](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/4aa81869215ddfe6ae1371cb33926ee55a2af2f6))
+
+## [53.2.51](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.2.50...v53.2.51) (2025-09-16)
+
+
+### Bug Fixes
+
+* added card type to slots ([55fe46c](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/55fe46c0490a0b91a12bf19e69f811ed449df74d))
+* added template for eeat cards ([46eb848](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/46eb848f3f88ad0569a596a36cd952c678668eea))
+* removed date from cards ([220c7a6](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/220c7a6a6d5a04c0821a522dd82a4b423dda2018))
+* storybook ([76a20c8](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/76a20c80b38b6f456d3a7d45c6b36ac6440a99bc))
+
+
+* Merge branch 'en-55-eeat-cards' into 'master' ([8e52e15](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/8e52e15fb16fa391453ef826bc90c0260d495686))
+
 ## [53.2.50](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.2.49...v53.2.50) (2025-09-11)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.2.50",
+  "version": "53.2.52",
   "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.57",
+    "gatsby-core-theme": "44.4.58",
     "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

@@ -0,0 +1,129 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable camelcase */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import { formatDate } from '~helpers/date-time';
+
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import styles from './template-six.module.scss';
+
+const TemplateSix = ({
+  item,
+  width = 277,
+  height = 140,
+  showDate = false,
+  showAuthorAsLink = false,
+  verifyIcon = '',
+  showImageAsLink = false,
+  showByLabel = false,
+}) => {
+  const { title, path, relation, author } = item;
+  const date = item?.updated_at || item?.created_at;
+  const formatedDate = date && formatDate(date, 'DD.MM.YYYY', '/', 'en-GB');
+
+  const defaultImg = (
+    <LazyImage width={width} height={height} src="/images/default-article.jpg" alt={title} />
+  );
+
+  const imageElement = (
+    <LazyImage
+      width={width}
+      height={height}
+      defaultImg={defaultImg}
+      src={
+        relation?.logo?.filename
+          ? imagePrettyUrl(relation?.logo?.filename, width, height)
+          : undefined
+      }
+      alt={title}
+    />
+  );
+  return (
+    <div className={styles.article || ''}>
+      {showImageAsLink ? (
+        <Link
+          to={path}
+          className={`${styles.image || ''} article-card-gtm`}
+          aria-label={useTranslate(`ariaLabel-${title}Link`, `${title} Link`)}
+        >
+          {imageElement}
+          {imageElement}
+        </Link>
+      ) : (
+        <div className={styles.image || ''}>
+          {imageElement}
+          {imageElement}
+        </div>
+      )}
+      <>
+        <Link to={path} className={styles?.cardTitle || ''}>
+          {title}
+        </Link>
+        {typeof author === 'object' && (
+          <div className={styles?.showAuthorOnOneLine}>
+            {!!author?.image && (
+              <div className={styles.authorImages}>
+                <LazyImage
+                  alt={author?.name}
+                  width={40}
+                  height={40}
+                  src={imagePrettyUrl(author?.image, 40, 40)}
+                />
+                {verifyIcon && verifyIcon}
+              </div>
+            )}
+            <div className={styles.authorContainer}>
+              {showByLabel && (
+                <p>
+                  <span className={styles.byText}>{useTranslate('by', 'By')}</span>
+                </p>
+              )}
+              {showAuthorAsLink ? (
+                <Link to={author?.profile_page_path} title={author?.name}>
+                  {author?.name}
+                </Link>
+              ) : (
+                <span className={styles.authorName}>{author?.name}</span>
+              )}
+              {showDate && <span className={styles?.noLink || ''}>{formatedDate}</span>}
+            </div>
+          </div>
+        )}
+      </>
+    </div>
+  );
+};
+
+TemplateSix.propTypes = {
+  item: PropTypes.shape({
+    author: PropTypes.shape({
+      name: PropTypes.string,
+      profile_page_path: PropTypes.string,
+      twitter_profile: PropTypes.string,
+      image: PropTypes.string,
+    }),
+    relation: PropTypes.shape({
+      logo: PropTypes.shape({
+        filename: PropTypes.string,
+      }),
+    }),
+    title: PropTypes.string,
+    updated_at: PropTypes.string,
+    created_at: PropTypes.string,
+    path: PropTypes.string,
+    banner: PropTypes.string,
+    reading_time: PropTypes.string,
+  }).isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  showDate: PropTypes.bool,
+  showAuthorAsLink: PropTypes.bool,
+  verifyIcon: PropTypes.string,
+  showImageAsLink: PropTypes.bool,
+  showByLabel: PropTypes.bool,
+};
+
+export default TemplateSix;

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

@@ -0,0 +1,164 @@
+.article {
+  width: 100%;
+  overflow: hidden;
+  background: var(--eeat-cards-background-color, #fff);
+  border-radius: var(--eeat-cards-border-radius, 1rem);
+  border: var(--eeat-cards-border, none);
+  box-shadow: 0 6px 8px -2px rgb(27 27 28 / 8%), 0 4px 4px -2px rgb(27 27 28 / 6%);
+  position: relative;
+  height: auto;
+  display: grid;
+  grid-template-rows: 14rem 1fr;
+  padding: 1.6rem;
+}
+
+.cardContent {
+  @include flex-direction(column);
+  @include flex-align(flex-start, space-between);
+
+  position: relative;
+
+  > a {
+    margin-bottom: 3.2rem;
+    margin-top: 1.6rem;
+
+    span {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 2.4rem;
+      text-transform: capitalize;
+      color: #1c1a28;
+      display: flex;
+    }
+  }
+}
+
+.image {
+  height: 14rem;
+  position: relative;
+  border: 0.1rem solid #e2e8f0;
+  overflow: hidden;
+  border-radius: 8px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+    filter: blur(2px);
+
+    &:last-child {
+      position: absolute;
+      object-fit: fill;
+      inset: 10px 0;
+      filter: unset;
+      border: unset;
+      border-radius: 8px;
+      margin: auto;
+      width: 120px;
+      height: 120px;
+    }
+  }
+}
+
+.showAuthorOnOneLine {
+  @include flex-align(center, space-between);
+
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  width: 100%;
+  gap: 0.8rem;
+
+  img {
+    border-radius: 10rem;
+  }
+
+  > div {
+    @include flex-align(flex-start, flex-start);
+
+    gap: 0.2rem;
+    flex-grow: 1;
+  }
+}
+
+.cardTitle {
+  padding-top: 1.6rem;
+  color: var(--heading-base-color) !important;
+  font-size: 2rem;
+  line-height: 28px;
+  margin-bottom: 2.4rem !important;
+  margin-top: 0 !important;
+  text-transform: capitalize;
+  font-weight: bold;
+}
+
+.showAuthorBlock {
+  @include flex-align(center, flex-start);
+
+  font-size: 14px;
+  line-height: 22px;
+  width: 100%;
+  gap: 0.5rem;
+
+  img {
+    border-radius: 10rem;
+  }
+
+  > div {
+    @include flex-align(flex-start, flex-start);
+
+    gap: 0.2rem;
+    flex-direction: column;
+
+    > span {
+      flex-grow: 1;
+
+      @include flex-align(flex-end, flex-end);
+    }
+  }
+}
+
+.authorImages {
+  position: relative;
+  flex-grow: 0 !important;
+
+  svg {
+    position: absolute;
+    width: 1rem;
+    height: 1rem;
+    bottom: 0;
+    right: 0;
+  }
+
+  > img {
+    border: 0.1rem solid #ececec;
+    width: 4.8rem;
+    height: 4.8rem;
+    min-width: 4.8rem;
+  }
+}
+
+.authorContainer {
+  > p {
+    color: #515156;
+  }
+
+  > a {
+    text-decoration: underline;
+    color: #000eee;
+  }
+
+  > span {
+    font-size: 1.4rem;
+    line-height: 2.2rem;
+    font-weight: 500;
+    color: #1b1b1c;
+    text-align: right;
+    margin-left: auto;
+  }
+}
+
+.authorName {
+  margin-left: unset !important;
+}

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import TemplateSix from '.';
+import { sampleOperatorCards } from '../../../../../../tests/factories/modules/matrix/card.factory';
+import gameCardBgThumb from '../../../../../../storybook-images/game-card-bg-thumb.png';
+
+const card = sampleOperatorCards.items[0];
+
+export default {
+  title: 'Theme/Modules/Cards/Game/Template Six',
+  component: TemplateSix,
+  argTypes: {
+    showAuthorAsLink: {
+      name: 'showAuthorAsLink',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show author as a link?',
+    },
+    hasVariableComponent: {
+      name: 'hasVariableComponent',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description:
+        'if needs to show extra details, display them on a separate component at site level',
+    },
+    showDate: {
+      name: 'showDate',
+      type: { name: 'boolean', required: false },
+      defaultValue: true,
+      description: 'Show/hide date',
+    },
+    verifyIcon: {
+      name: 'verifyIcon',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show verify icon',
+    },
+    item: {
+      name: 'item',
+      type: { name: 'object', required: false },
+      defaultValue: null,
+      description: 'The card object.',
+    },
+    translations: {
+      name: 'translations',
+      type: { name: 'object', required: false },
+      defaultValue: {
+        play_now_slots: 'Play Slots LANG',
+      },
+      description: 'The translations object',
+    }
+  }
+};
+
+const Template = (args) => (
+  <div
+    style={{
+      maxWidth: '30rem',
+      margin: '0 auto',
+    }}
+  >
+    <TemplateSix {...args} />
+  </div>
+);
+export const Default = Template.bind({});
+Default.args = {
+  item: {
+    ...card,
+    banner: '',
+    title: 'Wolf Gold',
+    author: {
+      name: 'Melissa Kruger',
+      profile_page_path: '/about-us/melissa-kruger',
+      image_alt: 'Melissa Kruger author at playcasino.co.za',
+      image: 'melissa-kruger.png',
+    },
+    relation: {
+      ...card.relation,
+      game_provider: {
+        name: 'NetEnt',
+        path: 'netent-casinos',
+      },
+    },
+  },
+  translations: {
+    play_now_slots: 'Play Slots LANG',
+  },
+  storybookImage: gameCardBgThumb,
+  page: {
+    reading_time: '5', // Add the reading_time value here (replace '5 mins' with the actual value)
+  },
+};

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

@@ -0,0 +1,125 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* eslint-disable camelcase */
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from 'gatsby-core-theme/src/hooks/link';
+import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
+import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
+import { formatDate } from '~helpers/date-time';
+
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import styles from './template-five.module.scss';
+
+const TemplateFive = ({
+  item,
+  width = 277,
+  height = 140,
+  showDate = false,
+  showAuthorAsLink = false,
+  verifyIcon = '',
+  showImageAsLink = false,
+  showByLabel = false,
+}) => {
+  const { title, path, relation, author } = item;
+  const date = item?.updated_at || item?.created_at;
+  const formatedDate = date && formatDate(date, 'DD.MM.YYYY', '/', 'en-GB');
+
+  const defaultImg = (
+    <LazyImage width={width} height={height} src="/images/default-article.jpg" alt={title} />
+  );
+
+  const imageElement = (
+    <LazyImage
+      width={width}
+      height={height}
+      defaultImg={defaultImg}
+      src={
+        relation?.logo?.filename
+          ? imagePrettyUrl(relation?.logo?.filename, width, height)
+          : undefined
+      }
+      alt={title}
+    />
+  );
+  return (
+    <div className={styles.article || ''}>
+      {showImageAsLink ? (
+        <Link
+          to={path}
+          className={`${styles.image || ''} article-card-gtm`}
+          aria-label={useTranslate(`ariaLabel-${title}Link`, `${title} Link`)}
+        >
+          {imageElement}
+        </Link>
+      ) : (
+        <div className={styles.image || ''}>{imageElement}</div>
+      )}
+      <>
+        <Link to={path} className={styles?.cardTitle || ''}>
+          {title}
+        </Link>
+        {typeof author === 'object' && (
+          <div className={styles?.showAuthorOnOneLine}>
+            {!!author?.image && (
+              <div className={styles.authorImages}>
+                <LazyImage
+                  alt={author?.name}
+                  width={40}
+                  height={40}
+                  src={imagePrettyUrl(author?.image, 40, 40)}
+                />
+                {verifyIcon && verifyIcon}
+              </div>
+            )}
+            <div className={styles.authorContainer}>
+              {showByLabel && (
+                <p>
+                  <span className={styles.byText}>{useTranslate('by', 'By')}</span>
+                </p>
+              )}
+              {showAuthorAsLink ? (
+                <Link to={author?.profile_page_path} title={author?.name}>
+                  {author?.name}
+                </Link>
+              ) : (
+                <span className={styles.authorName}>{author?.name}</span>
+              )}
+              {showDate && <span className={styles?.noLink || ''}>{formatedDate}</span>}
+            </div>
+          </div>
+        )}
+      </>
+    </div>
+  );
+};
+
+TemplateFive.propTypes = {
+  item: PropTypes.shape({
+    author: PropTypes.shape({
+      name: PropTypes.string,
+      profile_page_path: PropTypes.string,
+      twitter_profile: PropTypes.string,
+      image: PropTypes.string,
+    }),
+    relation: PropTypes.shape({
+      logo: PropTypes.shape({
+        filename: PropTypes.string,
+      }),
+    }),
+    title: PropTypes.string,
+    updated_at: PropTypes.string,
+    created_at: PropTypes.string,
+    path: PropTypes.string,
+    banner: PropTypes.string,
+    reading_time: PropTypes.string,
+  }).isRequired,
+  width: PropTypes.number,
+  height: PropTypes.number,
+  showDate: PropTypes.bool,
+  showAuthorAsLink: PropTypes.bool,
+  verifyIcon: PropTypes.string,
+  showImageAsLink: PropTypes.bool,
+  showByLabel: PropTypes.bool,
+};
+
+export default TemplateFive;

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

@@ -0,0 +1,149 @@
+.article {
+  width: 100%;
+  overflow: hidden;
+  background: var(--eeat-cards-background-color, #fff);
+  border-radius: var(--eeat-cards-border-radius, 1rem);
+  border: var(--eeat-cards-border, none);
+  box-shadow: 0 6px 8px -2px rgb(27 27 28 / 8%), 0 4px 4px -2px rgb(27 27 28 / 6%);
+  position: relative;
+  height: auto;
+  display: grid;
+  grid-template-rows: 14rem 1fr;
+  padding: 1.6rem;
+}
+
+.cardContent {
+  @include flex-direction(column);
+  @include flex-align(flex-start, space-between);
+
+  position: relative;
+
+  > a {
+    margin-bottom: 3.2rem;
+    margin-top: 1.6rem;
+
+    span {
+      font-style: normal;
+      font-weight: 700;
+      font-size: 2.4rem;
+      text-transform: capitalize;
+      color: #1c1a28;
+      display: flex;
+    }
+  }
+}
+
+.image {
+  height: 14rem;
+  position: relative;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 8px;
+    border: 0.1rem solid #e2e8f0;
+  }
+}
+
+.showAuthorOnOneLine {
+  @include flex-align(center, space-between);
+
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  width: 100%;
+  gap: 0.8rem;
+
+  img {
+    border-radius: 10rem;
+  }
+
+  > div {
+    @include flex-align(flex-start, flex-start);
+
+    gap: 0.2rem;
+    flex-grow: 1;
+  }
+}
+
+.cardTitle {
+  padding-top: 1.6rem;
+  color: var(--heading-base-color) !important;
+  font-size: 2rem;
+  line-height: 28px;
+  margin-bottom: 2.4rem !important;
+  margin-top: 0 !important;
+  text-transform: capitalize;
+  font-weight: bold;
+}
+
+.showAuthorBlock {
+  @include flex-align(center, flex-start);
+
+  font-size: 14px;
+  line-height: 22px;
+  width: 100%;
+  gap: 0.5rem;
+
+  img {
+    border-radius: 10rem;
+  }
+
+  > div {
+    @include flex-align(flex-start, flex-start);
+
+    gap: 0.2rem;
+    flex-direction: column;
+
+    > span {
+      flex-grow: 1;
+
+      @include flex-align(flex-end, flex-end);
+    }
+  }
+}
+
+.authorImages {
+  position: relative;
+  flex-grow: 0 !important;
+
+  svg {
+    position: absolute;
+    width: 1rem;
+    height: 1rem;
+    bottom: 0;
+    right: 0;
+  }
+
+  > img {
+    border: 0.1rem solid #ececec;
+    width: 4.8rem;
+    height: 4.8rem;
+    min-width: 4.8rem;
+  }
+}
+
+.authorContainer {
+  > p {
+    color: #515156;
+  }
+
+  > a {
+    text-decoration: underline;
+    color: #000eee;
+  }
+
+  > span {
+    font-size: 1.4rem;
+    line-height: 2.2rem;
+    font-weight: 500;
+    color: #1b1b1c;
+    text-align: right;
+    margin-left: auto;
+  }
+}
+
+.authorName {
+  margin-left: unset !important;
+}