gatsby-matrix-theme 53.13.5 → 53.14.0

package/.storybook/main.js

@@ -106,6 +106,12 @@ module.exports = {
       `./__mocks__/virtual-lazy-client-sync-requires.js`
     );
     config.resolve.mainFields = ['browser', 'module', 'main'];
+    config.module.rules.push({
+      test: /\.m?js/,
+      resolve: {
+        fullySpecified: false,
+      },
+    });
     return config;
   },
 };

package/CHANGELOG.md

@@ -1,3 +1,21 @@
+# [53.14.0](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.13.5...v53.14.0) (2026-04-14)
+
+
+### Bug Fixes
+
+* use text from props, generatePlaceholder should be used in prop ([9a756b4](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/9a756b45dbc7c4bab0e771fa60a714b1413e3755))
+
+
+* Merge branch 'en-416-verification-elements' into 'master' ([b781768](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/b7817680930d70e33bd17a8084f9389db5f4b382))
+
+
+### Features
+
+* add CSS variables to verification badge for child theme overrides ([811fbdf](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/811fbdf6a919e6cea56e7e6eb2f2e142299d4de7))
+* add directional CSS variable overrides for verification badge positioning ([28c466c](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/28c466ccfca7472ffbe9718fe557f2e9584069ed))
+* add verification flag badge to operator details and fix hydration mismatch ([b9b8e67](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/b9b8e670fe5a96061e9439d4931e6be64affd764))
+* verification badge templates ([92766ad](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/commit/92766adc310cb86b09ebaaaddca63847cb354787))
+
 ## [53.13.5](https://gitlab.com/g2m-gentoo/team-floyd/themes/matrix-theme/compare/v53.13.4...v53.13.5) (2026-04-08)
 
 

package/jest.config.js

@@ -26,7 +26,7 @@ module.exports = {
     '^gatsby-core-utils/(.*)$': `gatsby-core-utils/dist/$1`,
   },
   // testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
-  transformIgnorePatterns: [`node_modules/(?!gatsby-core-theme|gatsby-script|gatsby-link|gatsby)`],
+  transformIgnorePatterns: [`node_modules/(?!gatsby-core-theme|gatsby-script|gatsby-link|gatsby|@gigmedia/enigma-utils)`],
   coveragePathIgnorePatterns: ['src/constants', 'src/components/atoms/admin/card/button'],
   globals: {
     __PATH_PREFIX__: ``,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "53.13.5",
+  "version": "53.14.0",
   "main": "index.js",
   "description": "Matrix Theme NPM Package",
   "author": "",
@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
+    "@gigmedia/enigma-utils": "^1.20.0",
     "gatsby": "^5.11.0",
     "gatsby-core-theme": "^44.21.1",
     "gatsby-plugin-sharp": "^5.11.0",

package/src/components/atoms/verification-badge/template-one/index.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { classNames } from '@gigmedia/enigma-utils';
+import PropTypes from 'prop-types';
+import { generatePlaceholderString } from 'gatsby-core-theme/src/helpers/generators.mjs';
+import useTranslate from '~hooks/useTranslate/useTranslate';
+import styles from './verification-badge.module.scss';
+import VerifyIcon from '../../../../images/icons/verified-author';
+
+const VerificationBadge = ({
+  text = generatePlaceholderString(`${useTranslate('verified_on', 'Verified on')} [month]`),
+  icon = <VerifyIcon color="#3B82F6" />,
+  extraClass,
+}) => (
+  <div className={classNames([styles.badgeContainer, extraClass])}>
+    {icon}
+    {text}
+  </div>
+);
+
+VerificationBadge.propTypes = {
+  text: PropTypes.string,
+  icon: PropTypes.element,
+  extraClass: PropTypes.string,
+};
+
+export default VerificationBadge;

package/src/components/atoms/verification-badge/template-one/verification-badge.module.scss

@@ -0,0 +1,19 @@
+.badgeContainer {
+  display: flex;
+  height: var(--verification-badge-height, 20px);
+  padding: var(--verification-badge-padding, 6px 8px 6px 4px);
+  align-items: center;
+  gap: var(--verification-badge-gap, 4px);
+  background: var(--verification-badge-background, #cfdeff);
+  border-radius: var(--verification-badge-border-radius, 4px);
+  width: var(--verification-badge-width, fit-content);
+  color: var(--verification-badge-color, #000);
+  font-size: var(--verification-badge-font-size, 12px);
+  font-weight: var(--verification-badge-font-weight, 400);
+  line-height: var(--verification-badge-line-height, 18px);
+
+  > svg {
+    height: var(--verification-badge-icon-size, 14px);
+    width: var(--verification-badge-icon-size, 14px);
+  }
+}

package/src/components/atoms/verification-badge/template-one/verification-badge.stories.js

@@ -0,0 +1,47 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import VerificationBadge from '.';
+
+export default {
+  title: 'Theme/Atoms/VerificationBadge/Template One',
+  component: VerificationBadge,
+  argTypes: {
+    text: {
+      name: 'text',
+      description: 'Translation key for the badge text',
+      defaultValue: 'verified_on',
+      control: { type: 'text' },
+    },
+    extraClass: {
+      name: 'extraClass',
+      description: 'Additional CSS class',
+      control: { type: 'text' },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A badge that displays a verification status',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <VerificationBadge {...args} />;
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/atoms/verification-badge/template-one/verification-badge.test.js

@@ -0,0 +1,45 @@
+import React, { Suspense } from 'react';
+import { render, cleanup } from '@testing-library/react';
+
+import VerificationBadge from '.';
+import '@testing-library/jest-dom/extend-expect';
+
+jest.mock('../../../../images/icons/verified-author', () => {
+  const MockIcon = (props) => <svg data-testid="verify-icon" {...props} />;
+  return { __esModule: true, default: MockIcon };
+});
+
+const renderWithSuspense = (ui) =>
+  render(<Suspense fallback={<div>Loading...</div>}>{ui}</Suspense>);
+
+describe('VerificationBadge Component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders with default props', async () => {
+    const { container, findByText } = renderWithSuspense(<VerificationBadge />);
+    await findByText(/Verified on/);
+    expect(container.querySelector('.badgeContainer')).toBeInTheDocument();
+  });
+
+  test('renders default translated text', async () => {
+    const { findByText } = renderWithSuspense(<VerificationBadge />);
+    const element = await findByText(/Verified on/);
+    expect(element).toBeInTheDocument();
+  });
+
+  test('renders with custom icon', () => {
+    const customIcon = <span data-testid="custom-icon">✓</span>;
+    const { getByTestId } = renderWithSuspense(<VerificationBadge icon={customIcon} />);
+    expect(getByTestId('custom-icon')).toBeInTheDocument();
+  });
+
+  test('applies extraClass', async () => {
+    const { container, findByText } = renderWithSuspense(
+      <VerificationBadge extraClass="my-class" />
+    );
+    await findByText(/Verified on/);
+    expect(container.querySelector('.badgeContainer')).toHaveClass('my-class');
+  });
+});

package/src/components/atoms/verification-badge/template-two/index.js

@@ -0,0 +1,25 @@
+import React, { lazy } from 'react';
+import { classNames } from '@gigmedia/enigma-utils';
+import PropTypes from 'prop-types';
+import { FaCheckCircle } from '@react-icons/all-files/fa/FaCheckCircle';
+import styles from './verification-badge.module.scss';
+
+const FlagIcon = lazy(() => import('../../../../images/icons/country-flag'));
+const VerificationBadge = ({
+  flag = <FlagIcon />,
+  icon = <FaCheckCircle color="#FFB612" />,
+  extraClass,
+}) => (
+  <div className={classNames([styles.badgeContainer, extraClass])}>
+    {flag}
+    {icon}
+  </div>
+);
+
+VerificationBadge.propTypes = {
+  flag: PropTypes.element,
+  icon: PropTypes.element,
+  extraClass: PropTypes.string,
+};
+
+export default VerificationBadge;

package/src/components/atoms/verification-badge/template-two/verification-badge.module.scss

@@ -0,0 +1,45 @@
+.badgeContainer {
+  display: flex;
+  position: relative;
+  padding: var(--verification-badge-t2-padding, 2px);
+  align-items: flex-start;
+  width: var(--verificaction-badge-t2-width, fit-content);
+  border-radius: var(--verification-badge-t2-border-radius, 4px);
+  background: var(--verification-badge-t2-background, #171f49);
+
+  &::before {
+    content: '';
+    width: var(--verification-badge-t2-dot-size, 6px);
+    height: var(--verification-badge-t2-dot-size, 6px);
+    position: absolute;
+    right: var(--verification-badge-t2-dot-right, var(--verification-badge-t2-dot-offset, -1.3px));
+    bottom: var(
+      --verification-badge-t2-dot-bottom,
+      var(--verification-badge-t2-dot-offset, -1.3px)
+    );
+    background: var(--verification-badge-t2-dot-background, #000);
+    border-radius: 100%;
+  }
+
+  > svg {
+    &:first-child {
+      height: var(--verification-badge-t2-flag-height, 16px);
+      width: var(--verification-badge-t2-flag-width, 22px);
+    }
+
+    &:last-child {
+      width: var(--verification-badge-t2-icon-size, 8px);
+      height: var(--verification-badge-t2-icon-size, 8px);
+      position: absolute;
+      right: var(
+        --verification-badge-t2-icon-right,
+        var(--verification-badge-t2-icon-offset, -2px)
+      );
+      bottom: var(
+        --verification-badge-t2-icon-bottom,
+        var(--verification-badge-t2-icon-offset, -2px)
+      );
+      border-radius: 100%;
+    }
+  }
+}

package/src/components/atoms/verification-badge/template-two/verification-badge.stories.js

@@ -0,0 +1,41 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Title,
+  Description,
+  Primary,
+  PRIMARY_STORY,
+  ArgsTable,
+} from '@storybook/addon-docs/blocks';
+import VerificationBadge from '.';
+
+export default {
+  title: 'Theme/Atoms/VerificationBadge/Template Two',
+  component: VerificationBadge,
+  argTypes: {
+    extraClass: {
+      name: 'extraClass',
+      description: 'Additional CSS class',
+      control: { type: 'text' },
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A badge that displays a country flag with a verification icon',
+      },
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <ArgsTable story={PRIMARY_STORY} />
+        </>
+      ),
+    },
+  },
+};
+
+const Template = (args) => <VerificationBadge {...args} />;
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/atoms/verification-badge/template-two/verification-badge.test.js

@@ -0,0 +1,53 @@
+import React, { Suspense } from 'react';
+import { render, cleanup } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import VerificationBadge from '.';
+
+jest.mock('../../../../images/icons/verified-author', () => {
+  const MockIcon = (props) => <svg data-testid="verify-icon" {...props} />;
+  return { __esModule: true, default: MockIcon };
+});
+
+jest.mock('../../../../images/icons/country-flag', () => {
+  const MockFlag = (props) => <svg data-testid="flag-icon" {...props} />;
+  return { __esModule: true, default: MockFlag };
+});
+
+const renderWithSuspense = (ui) =>
+  render(<Suspense fallback={<div>Loading...</div>}>{ui}</Suspense>);
+
+describe('VerificationBadge Component', () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  test('renders with default props', () => {
+    const { container } = renderWithSuspense(<VerificationBadge />);
+    expect(container.querySelector('.badgeContainer')).toBeInTheDocument();
+  });
+
+  test('renders with custom icon', () => {
+    const customIcon = <span data-testid="custom-icon">✓</span>;
+    const { getByTestId } = renderWithSuspense(
+      <VerificationBadge icon={customIcon} />
+    );
+    expect(getByTestId('custom-icon')).toBeInTheDocument();
+  });
+
+  test('renders with custom flag', () => {
+    const customFlag = <span data-testid="custom-flag">🏳</span>;
+    const { getByTestId } = renderWithSuspense(
+      <VerificationBadge flag={customFlag} />
+    );
+    expect(getByTestId('custom-flag')).toBeInTheDocument();
+  });
+
+  test('applies extraClass', async () => {
+    const { container, findByTestId } = renderWithSuspense(
+      <VerificationBadge extraClass="my-class" />
+    );
+    await findByTestId('flag-icon');
+    expect(container.querySelector('.badgeContainer')).toHaveClass('my-class');
+  });
+});

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

@@ -13,6 +13,7 @@ import useTranslate from '~hooks/useTranslate/useTranslate';
 import PrettyLink from '~atoms/pretty-link';
 import VerifiedAuthor from '../../../images/icons/verified-author';
 import Author from '../../atoms/author/template-one';
+import VerificationFlagBadge from '../../atoms/verification-badge/template-two';
 import styles from './operator-details.module.scss';
 
 const OperatorDetails = ({
@@ -49,6 +50,7 @@ const OperatorDetails = ({
   showRoundedRating = false,
   modulePosition,
   itemPosition,
+  showVerificationBadge = false,
 }) => {
   const itemName = item?.name || item?.relation?.name;
   const status = item?.status || item?.relation?.status;
@@ -138,6 +140,7 @@ const OperatorDetails = ({
           ${(!useOneStarRating && styles.starRatings) || ''}
           ${(showRatingLabel && useOneStarRating && styles.ratinglabel) || ''}`}
           >
+            {showVerificationBadge && item?.status === 'active' && <VerificationFlagBadge />}
             {showRating &&
               (useOneStarRating ? (
                 <StarRating
@@ -234,6 +237,7 @@ OperatorDetails.propTypes = {
   showRoundedRating: PropTypes.bool,
   modulePosition: PropTypes.number,
   itemPosition: PropTypes.number,
+  showVerificationBadge: PropTypes.bool,
 };
 
 export default OperatorDetails;