gatsby-matrix-theme 53.28.14 → 53.28.16

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## [53.28.16](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.28.15...v53.28.16) (2026-10-13)
+
+
+### Bug Fixes
+
+* enable multiple ribbons for toplist and for slot cards ([5043e77](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/5043e773fb3e42237b82c5ff597a81b6b593164c))
+
+
+* Merge branch 'EN-720-Ribbons' into 'master' ([4bb4fab](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/4bb4fabc572566d9fabbbeb43c656120fb5f6e69))
+
+## [53.28.15](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.28.14...v53.28.15) (2026-10-08)
+
+
+### Bug Fixes
+
+* update core version ([cb875dc](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/cb875dc6e127f4554da85e101338d779c71eca64))
+
 ## [53.28.14](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.28.13...v53.28.14) (2026-09-24)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.28.14",
+  "version": "53.28.16",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -26,7 +26,7 @@
     "@gigmedia/enigma-utils": "^1.20.0",
     "@react-icons/all-files": "^4.1.0",
     "gatsby": "^5.11.0",
-    "gatsby-core-theme": "44.35.12",
+    "gatsby-core-theme": "44.35.13",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-plugin-sitemap": "^6.13.1",
     "gatsby-transformer-sharp": "^5.11.0",

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Ribbons from '~atoms/ribbons';
+import styles from './ribbons.module.scss';
+
+export default function GameCardRibbons({ item, showRibbon = false, multipleRibbons = false }) {
+  if (!showRibbon) return null;
+
+  const ribbons = item?.relation?.ribbons || item?.ribbons || [];
+  if (!Array.isArray(ribbons) || ribbons.length === 0) return null;
+
+  const visibleRibbons = multipleRibbons ? ribbons : ribbons.slice(0, 1);
+
+  return (
+    <div className={styles.ribbon || ''}>
+      <Ribbons item={visibleRibbons} />
+    </div>
+  );
+}
+
+GameCardRibbons.propTypes = {
+  item: PropTypes.shape({
+    ribbons: PropTypes.arrayOf(PropTypes.string),
+    relation: PropTypes.shape({
+      ribbons: PropTypes.arrayOf(PropTypes.string),
+    }),
+  }),
+  showRibbon: PropTypes.bool,
+  multipleRibbons: PropTypes.bool,
+};

package/src/components/atoms/cards/game-cards/ribbons/ribbons.module.scss

@@ -0,0 +1,14 @@
+.ribbon {
+  position: absolute;
+  top: 2.4rem;
+  left: 2.4rem;
+  z-index: 2;
+  max-width: calc(100% - 4.8rem);
+  pointer-events: none;
+
+  > div {
+    position: static;
+    flex-wrap: wrap;
+    max-width: 100%;
+  }
+}

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

@@ -12,6 +12,7 @@ import LazyImage from '~hooks/lazy-image';
 import { getAltText } from '~helpers/image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api';
+import GameCardRibbons from '../ribbons';
 
 import styles from './template-five.module.scss';
 
@@ -29,6 +30,8 @@ const TemplateFive = ({
   showRoundedRating = false,
   modulePosition,
   itemPosition,
+  showRibbon = false,
+  multipleRibbons = false,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -141,6 +144,7 @@ const TemplateFive = ({
           )}
         </div>
       </div>
+      <GameCardRibbons item={item} showRibbon={showRibbon} multipleRibbons={multipleRibbons} />
     </div>
   );
 };
@@ -190,6 +194,8 @@ TemplateFive.propTypes = {
   showRoundedRating: PropTypes.bool,
   modulePosition: PropTypes.number,
   itemPosition: PropTypes.number,
+  showRibbon: PropTypes.bool,
+  multipleRibbons: PropTypes.bool,
 };
 
 export default TemplateFive;

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

@@ -23,6 +23,20 @@ export default {
     },
     description: 'The translations object',
   },
+  argTypes: {
+    showRibbon: {
+      name: 'showRibbon',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show ribbons. Off by default.',
+    },
+    multipleRibbons: {
+      name: 'multipleRibbons',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show every ribbon. Off by default, so only the first ribbon is shown.',
+    },
+  },
 };
 
 const Template = (args) => <TemplateFive {...args} />;
@@ -50,6 +64,7 @@ Default.args = {
         name: 'Wildz',
         path: 'wildz-casino',
       },
+      ribbons: ['New', 'Exclusive'],
     },
   },
   translations: {

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

@@ -12,6 +12,7 @@ import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api';
+import GameCardRibbons from '../ribbons';
 import styles from './template-four.module.scss';
 
 const TemplateFour = ({
@@ -27,6 +28,8 @@ const TemplateFour = ({
   showRoundedRating = false,
   modulePosition,
   itemPosition,
+  showRibbon = false,
+  multipleRibbons = false,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -127,6 +130,7 @@ const TemplateFour = ({
           )}
         </div>
       </div>
+      <GameCardRibbons item={item} showRibbon={showRibbon} multipleRibbons={multipleRibbons} />
     </div>
   );
 };
@@ -170,6 +174,8 @@ TemplateFour.propTypes = {
   showRoundedRating: PropTypes.bool,
   modulePosition: PropTypes.number,
   itemPosition: PropTypes.number,
+  showRibbon: PropTypes.bool,
+  multipleRibbons: PropTypes.bool,
 };
 
 export default TemplateFour;

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

@@ -22,6 +22,20 @@ export default {
     },
     description: 'The translations object',
   },
+  argTypes: {
+    showRibbon: {
+      name: 'showRibbon',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show ribbons. Off by default.',
+    },
+    multipleRibbons: {
+      name: 'multipleRibbons',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show every ribbon. Off by default, so only the first ribbon is shown.',
+    },
+  },
 };
 
 const Template = (args) => <TemplateFour {...args} />;
@@ -38,6 +52,7 @@ Default.args = {
         name: 'NetEnt',
         path: 'netent-casinos',
       },
+      ribbons: ['New', 'Exclusive'],
     },
   },
   translations: {

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

@@ -11,6 +11,7 @@ import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api';
+import GameCardRibbons from '../ribbons';
 import styles from './template-one.module.scss';
 
 const TemplateOne = ({
@@ -26,6 +27,8 @@ const TemplateOne = ({
   itemPosition,
   moduleStyle,
   showImageAsLink = true,
+  showRibbon = false,
+  multipleRibbons = false,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -143,6 +146,7 @@ const TemplateOne = ({
           />
         )}
       </div>
+      <GameCardRibbons item={item} showRibbon={showRibbon} multipleRibbons={multipleRibbons} />
     </div>
   );
 };
@@ -187,6 +191,8 @@ TemplateOne.propTypes = {
   itemPosition: PropTypes.number,
   moduleStyle: PropTypes.string,
   showImageAsLink: PropTypes.bool,
+  showRibbon: PropTypes.bool,
+  multipleRibbons: PropTypes.bool,
 };
 
 export default TemplateOne;

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

@@ -22,6 +22,20 @@ export default {
     },
     description: 'The translations object',
   },
+  argTypes: {
+    showRibbon: {
+      name: 'showRibbon',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show ribbons. Off by default.',
+    },
+    multipleRibbons: {
+      name: 'multipleRibbons',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show every ribbon. Off by default, so only the first ribbon is shown.',
+    },
+  },
 };
 
 const Template = (args) => <TemplateOne {...args} />;
@@ -38,6 +52,7 @@ Default.args = {
         name: 'NetEnt',
         path: 'netent-casinos',
       },
+      ribbons: ['New', 'Exclusive'],
     },
   },
   translations: {

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

@@ -17,9 +17,9 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateOne item={card} />);
-    expect(getByText('Wildz Casino')).toBeTruthy();
-    expect(getByText('Test Game Provider')).toBeTruthy();
-    expect(getByText('Play now')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeInTheDocument();
+    expect(getByText('Test Game Provider')).toBeInTheDocument();
+    expect(getByText('Play now')).toBeInTheDocument();
     expect(container.querySelectorAll('a')).toHaveLength(4);
   });
   test('Template One Operator', () => {
@@ -33,11 +33,47 @@ describe('Game Cards', () => {
     };
 
     const { container, getByText } = render(<TemplateOne useOneStarRating={false} item={card} />);
-    expect(getByText('Wildz Casino')).toBeTruthy();
-    expect(getByText('Test Game Operator')).toBeTruthy();
-    expect(getByText('Play now')).toBeTruthy();
+    expect(getByText('Wildz Casino')).toBeInTheDocument();
+    expect(getByText('Test Game Operator')).toBeInTheDocument();
+    expect(getByText('Play now')).toBeInTheDocument();
     expect(container.querySelectorAll('a')).toHaveLength(4);
   });
+
+  test('hides ribbons unless showRibbon is set', () => {
+    const card = getSampleOperatorCards().items[0];
+    card.relation = {
+      ...card.relation,
+      ribbons: ['New', 'Exclusive'],
+    };
+
+    const { queryByText } = render(<TemplateOne item={card} />);
+    expect(queryByText('New')).not.toBeInTheDocument();
+    expect(queryByText('Exclusive')).not.toBeInTheDocument();
+  });
+
+  test('shows only the first ribbon when showRibbon is true', () => {
+    const card = getSampleOperatorCards().items[0];
+    card.relation = {
+      ...card.relation,
+      ribbons: ['New', 'Exclusive'],
+    };
+
+    const { getByText, queryByText } = render(<TemplateOne item={card} showRibbon />);
+    expect(getByText('New')).toBeInTheDocument();
+    expect(queryByText('Exclusive')).not.toBeInTheDocument();
+  });
+
+  test('shows every ribbon when multipleRibbons is true', () => {
+    const card = getSampleOperatorCards().items[0];
+    card.relation = {
+      ...card.relation,
+      ribbons: ['New', 'Exclusive'],
+    };
+
+    const { getByText } = render(<TemplateOne item={card} showRibbon multipleRibbons />);
+    expect(getByText('New')).toBeInTheDocument();
+    expect(getByText('Exclusive')).toBeInTheDocument();
+  });
 });
 
 afterEach(() => {

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

@@ -8,6 +8,7 @@ import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import { formatDate } from '~helpers/date-time';
 
 import useTranslate from '~hooks/useTranslate/useTranslate';
+import GameCardRibbons from '../ribbons';
 import styles from './template-six.module.scss';
 
 const TemplateSix = ({
@@ -19,6 +20,8 @@ const TemplateSix = ({
   verifyIcon = '',
   showImageAsLink = false,
   showByLabel = false,
+  showRibbon = false,
+  multipleRibbons = false,
 }) => {
   const { title, path, relation, author } = item;
   const date = item?.updated_at || item?.created_at;
@@ -93,6 +96,7 @@ const TemplateSix = ({
           </div>
         )}
       </>
+      <GameCardRibbons item={item} showRibbon={showRibbon} multipleRibbons={multipleRibbons} />
     </div>
   );
 };
@@ -124,6 +128,8 @@ TemplateSix.propTypes = {
   verifyIcon: PropTypes.string,
   showImageAsLink: PropTypes.bool,
   showByLabel: PropTypes.bool,
+  showRibbon: PropTypes.bool,
+  multipleRibbons: PropTypes.bool,
 };
 
 export default TemplateSix;

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

@@ -47,8 +47,20 @@ export default {
         play_now_slots: 'Play Slots LANG',
       },
       description: 'The translations object',
-    }
-  }
+    },
+    showRibbon: {
+      name: 'showRibbon',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show ribbons. Off by default.',
+    },
+    multipleRibbons: {
+      name: 'multipleRibbons',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show every ribbon. Off by default, so only the first ribbon is shown.',
+    },
+  },
 };
 
 const Template = (args) => (
@@ -79,6 +91,7 @@ Default.args = {
         name: 'NetEnt',
         path: 'netent-casinos',
       },
+      ribbons: ['New', 'Exclusive'],
     },
   },
   translations: {

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

@@ -12,6 +12,7 @@ import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api';
+import GameCardRibbons from '../ribbons';
 import styles from './template-three.module.scss';
 
 const TemplateThree = ({
@@ -27,6 +28,8 @@ const TemplateThree = ({
   showRoundedRating = false,
   modulePosition,
   itemPosition,
+  showRibbon = false,
+  multipleRibbons = false,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -126,6 +129,7 @@ const TemplateThree = ({
           )}
         </div>
       </div>
+      <GameCardRibbons item={item} showRibbon={showRibbon} multipleRibbons={multipleRibbons} />
     </div>
   );
 };
@@ -173,6 +177,8 @@ TemplateThree.propTypes = {
   showRoundedRating: PropTypes.bool,
   modulePosition: PropTypes.number,
   itemPosition: PropTypes.number,
+  showRibbon: PropTypes.bool,
+  multipleRibbons: PropTypes.bool,
 };
 
 export default TemplateThree;

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

@@ -22,6 +22,20 @@ export default {
     },
     description: 'The translations object',
   },
+  argTypes: {
+    showRibbon: {
+      name: 'showRibbon',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show ribbons. Off by default.',
+    },
+    multipleRibbons: {
+      name: 'multipleRibbons',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show every ribbon. Off by default, so only the first ribbon is shown.',
+    },
+  },
 };
 
 const Template = (args) => <TemplateThree {...args} />;
@@ -38,6 +52,7 @@ Default.args = {
         name: 'NetEnt',
         path: 'netent-casinos',
       },
+      ribbons: ['New', 'Exclusive'],
     },
   },
   translations: {

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

@@ -12,6 +12,7 @@ import Link from '~hooks/link';
 import LazyImage from '~hooks/lazy-image';
 import useTranslate from '~hooks/useTranslate/useTranslate';
 import { TrackingKeys } from '~constants/tracking-api';
+import GameCardRibbons from '../ribbons';
 import styles from './template-two.module.scss';
 
 const TemplateTwo = ({
@@ -27,6 +28,8 @@ const TemplateTwo = ({
   showRoundedRating = false,
   modulePosition,
   itemPosition,
+  showRibbon = false,
+  multipleRibbons = false,
 }) => {
   const { relation, path, banner } = item;
   const { name } = relation || {};
@@ -131,6 +134,7 @@ const TemplateTwo = ({
           )}
         </div>
       </div>
+      <GameCardRibbons item={item} showRibbon={showRibbon} multipleRibbons={multipleRibbons} />
     </div>
   );
 };
@@ -178,6 +182,8 @@ TemplateTwo.propTypes = {
   showRoundedRating: PropTypes.bool,
   modulePosition: PropTypes.number,
   itemPosition: PropTypes.number,
+  showRibbon: PropTypes.bool,
+  multipleRibbons: PropTypes.bool,
 };
 
 export default TemplateTwo;

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

@@ -22,6 +22,20 @@ export default {
     },
     description: 'The translations object',
   },
+  argTypes: {
+    showRibbon: {
+      name: 'showRibbon',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show ribbons. Off by default.',
+    },
+    multipleRibbons: {
+      name: 'multipleRibbons',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show every ribbon. Off by default, so only the first ribbon is shown.',
+    },
+  },
 };
 
 const Template = (args) => <TemplateTwo {...args} />;
@@ -38,6 +52,7 @@ Default.args = {
         name: 'NetEnt',
         path: 'netent-casinos',
       },
+      ribbons: ['New', 'Exclusive'],
     },
   },
   translations: {

package/src/components/molecules/operator-details/index.js

@@ -28,6 +28,7 @@ const OperatorDetails = ({
   showReviewLink = true,
   showAuthorAsLink = true,
   showRibbon = false,
+  multipleRibbons = false,
   contentRibbon = false,
   useOneStarRating = true,
   showRatingLabel = false,
@@ -58,6 +59,10 @@ const OperatorDetails = ({
   const itemName = item?.name || item?.relation?.name;
   const status = item?.status || item?.relation?.status;
   const hasRibbons = typeof ribbons !== 'undefined' && ribbons.length > 0;
+  let visibleRibbons = [];
+  if (hasRibbons) {
+    visibleRibbons = multipleRibbons ? ribbons : [ribbons[0]];
+  }
   const trackerType = tracker.toLowerCase().replace(' ', '_');
 
   const image = item?.logo;
@@ -101,7 +106,7 @@ const OperatorDetails = ({
         (status === 'active'
           ? hasRibbons && (
               <Ribbons
-                item={[ribbons[0]]}
+                item={visibleRibbons}
                 customStyle={`${styles.ribbon} ${contentRibbon && styles.contentRibbon}`}
               />
             )
@@ -130,7 +135,7 @@ const OperatorDetails = ({
           (status === 'active'
             ? hasRibbons && (
                 <Ribbons
-                  item={[ribbons[0]]}
+                  item={visibleRibbons}
                   customStyle={`${styles.ribbon} ${contentRibbon && styles.contentRibbon}`}
                 />
               )
@@ -244,6 +249,7 @@ OperatorDetails.propTypes = {
   showAuthorAsLink: PropTypes.bool,
   authorTemplateTwo: PropTypes.bool,
   showRibbon: PropTypes.bool,
+  multipleRibbons: PropTypes.bool,
   template: PropTypes.string,
   imageWidth: PropTypes.number,
   imageHeight: PropTypes.number,

package/src/components/molecules/operator-details/operator-details.module.scss

@@ -28,6 +28,12 @@
   position: static;
 }
 
+.ribbon {
+  flex-wrap: wrap;
+  row-gap: 0.4rem;
+  max-width: 28rem;
+}
+
 .operatorName {
   font-size: 1.8rem;
   font-weight: 700;

package/src/components/molecules/operator-details/operator-details.stories.js

@@ -29,6 +29,16 @@ export default {
     ribbons: {
       defaultValue: ['Test'],
     },
+    showRibbon: {
+      control: 'boolean',
+      defaultValue: false,
+      description: 'Show ribbons',
+    },
+    multipleRibbons: {
+      control: 'boolean',
+      defaultValue: false,
+      description: 'Show every ribbon. Off by default, so only the first ribbon is shown.',
+    },
     link: {
       control: 'text',
       defaultValue: 'https://example.com',

package/src/components/molecules/operator-details/operator-details.test.js

@@ -58,6 +58,21 @@ describe('OperatorDetails', () => {
   //   });
   // });
 
+  it('shows only the first ribbon unless multipleRibbons is set', () => {
+    const item = { ...mockItem, status: 'active' };
+    const { getByText, queryByText, rerender } = render(
+      <OperatorDetails item={item} ribbons={['New', 'Exclusive']} showRibbon />
+    );
+
+    expect(getByText('New')).toBeInTheDocument();
+    expect(queryByText('Exclusive')).not.toBeInTheDocument();
+
+    rerender(<OperatorDetails item={item} ribbons={['New', 'Exclusive']} showRibbon multipleRibbons />);
+
+    expect(getByText('New')).toBeInTheDocument();
+    expect(getByText('Exclusive')).toBeInTheDocument();
+  });
+
   it('does not display author information when showAuthor is false', async () => {
     const { queryByText } = render(
       <OperatorDetails item={mockItem} itemName={mockItemName} showAuthor={false} />

package/src/components/molecules/toplist/row/variant-one.js

@@ -33,6 +33,7 @@ export default function Row({
   height = 96,
   modulePosition,
   itemPosition,
+  multipleRibbons = false,
 }) {
   const sellingPoints = item.selling_points;
   const { ribbons } = item;
@@ -60,6 +61,7 @@ export default function Row({
         authorTemplateTwo={!!((layout === 'grid' && firstRowItems) || authorTemplateTwo)}
         ribbons={ribbons}
         showRibbon
+        multipleRibbons={multipleRibbons}
         icon={verifyIcon}
         isPPC={isPPC}
         moduleName={moduleName}
@@ -150,4 +152,5 @@ Row.propTypes = {
   isPPC: PropTypes.bool,
   width: PropTypes.number,
   height: PropTypes.number,
+  multipleRibbons: PropTypes.bool,
 };

package/src/components/molecules/toplist/row/variant-one.stories.js

@@ -19,7 +19,7 @@ export default {
     item: {
       name: 'item',
       type: { name: 'object', required: true },
-      defaultValue: getToplistItem(),
+      defaultValue: { ...getToplistItem(), ribbons: ['Exclusive Bonus', 'New'] },
       description: 'toplist item',
     },
     tracker: {
@@ -104,6 +104,16 @@ export default {
       defaultValue: <VerifiedAuthor />,
       description: 'Show the correct author',
     },
+    multipleRibbons: {
+      name: 'multipleRibbons',
+      type: { name: 'boolean', required: false },
+      defaultValue: false,
+      description: 'Show every ribbon. Off by default, so only the first ribbon is shown.',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
   },
   parameters: {
     docs: {