gatsby-matrix-theme 49.0.13 → 50.0.1

package/.storybook/main.js

@@ -6,8 +6,8 @@ module.exports = {
     '../src/**/**/**/*.stories.js',
     '../src/**/**/**/**/*.stories.js',
     '../src/**/**/**/**/**/*.stories.js',
-    '../../node_modules/gatsby-core-theme/src/components/molecules/header/variants/default/template-one.stories.js',
-    '../../node_modules/gatsby-core-theme/src/components/molecules/header/variants/operator/template-one-two.stories.js',
+    '../../node_modules/gatsby-core-theme/src/components/molecules/header/variants/default/template-one/template-one.stories.js',
+    '../../node_modules/gatsby-core-theme/src/components/molecules/header/variants/operator/template-one-two/template-one-two.stories.js',
     '../../node_modules/gatsby-core-theme/src/components/molecules/footer/variants/template-one.stories.js',
     '../../node_modules/gatsby-core-theme/src/components/molecules/footer/variants/template-two.stories.js',
     '../../node_modules/gatsby-core-theme/src/components/molecules/footer/variants/template-three.stories.js',
@@ -90,6 +90,7 @@ module.exports = {
       '~hooks': path.resolve(rootPath, '../node_modules/gatsby-core-theme/src/hooks'),
       '~tests': path.resolve(rootPath, '../node_modules/gatsby-core-theme/tests'),
       '~context': path.resolve(rootPath, '../node_modules/gatsby-core-theme/src/context'),
+      '~images': path.resolve(rootPath, '../node_modules/gatsby-core-theme/src/images'),
       'gatsby-page-utils': path.resolve(__dirname, '../../node_modules/gatsby-page-utils/dist'),
       'gatsby-core-theme/src/hooks/gatsby-img': path.resolve(
         __dirname,

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+## [50.0.1](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v50.0.0...v50.0.1) (2024-08-27)
+
+
+### Bug Fixes
+
+* lighthouse pipeline ([b7ef863](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/b7ef863a3f3d15628cd56309f065db91d17def10))
+
+
+### Code Refactoring
+
+* add review disclaimer to storybook ([e342961](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e3429612042511a26602bdbaeddb4384c74ae13e))
+
+# [50.0.0](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v49.0.13...v50.0.0) (2024-08-26)
+
+
+### Bug Fixes
+
+* fix issue on storybook, add logo.svg back ([7a4b0bb](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7a4b0bb0139860b837d5517cb6bbfb332d2ef4ae))
+* update to latest ([5549f04](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/5549f0431c8482b791620bdc63a2ab32442ac1cf))
+
+
+### Code Refactoring
+
+* changes ([e84c0cc](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e84c0cc28453ad56dae12dd7be4ba78d8be54af8))
+* changes ([3f033e5](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3f033e5e78208aa73d877eef05400b1cc47e8081))
+* initial commit for svgs ([7609de8](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/7609de876d6b6286175a4e8e32ba50e370f1b26a))
+* revert temp ([3cd2dc3](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/3cd2dc3e8c2d72717eeb6ac524d34653aae16488))
+* temp ([c456c93](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/c456c9353b32d7cdd7e6b70b6b5f29bad133359f))
+
+
+* Merge branch 'tm-3996-svg' into 'master' ([9fa7c1c](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/9fa7c1c66146f4bd6d2823cb40db6da2d9bcb691))
+* Merge branch 'master' into tm-3996-svg ([e88067e](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/e88067e2e30ffd9dbc08cb61b0b1fba358807568))
+* Merge branch 'master' into tm-3996-svg ([1ae0285](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/1ae02855c5ca55bd08ea67c57fbf05e17377adae))
+* Merge branch 'master' into tm-3996-svg ([119921f](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/commit/119921f859b45ad368c46d6eee71085b03dca99a))
+
 ## [49.0.13](https://git.ilcd.rocks/team-floyd/themes/matrix-theme/compare/v49.0.12...v49.0.13) (2024-08-22)
 
 

package/jest.config.js

@@ -18,6 +18,7 @@ module.exports = {
     '^~hooks(.*)$': '<rootDir>../node_modules/gatsby-core-theme/src/hooks$1',
     '^~tests(.*)$': '<rootDir>../node_modules/gatsby-core-theme/tests$1',
     '^~context(.*)$': '<rootDir>../node_modules/gatsby-core-theme/src/context$1',
+    '^~images(.*)$': '<rootDir>../node_modules/gatsby-core-theme/src/images$1',
     // JSON Data
     'data.json': '<rootDir>/__mocks__/search-data.json',
     '^gatsby-plugin-utils/(.*)$': [`gatsby-plugin-utils/dist/$1`, `gatsby-plugin-utils/$1`],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-matrix-theme",
-  "version": "49.0.13",
+  "version": "50.0.1",
   "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": "36.0.4",
+    "gatsby-core-theme": "37.0.3",
     "gatsby-plugin-sharp": "^5.11.0",
     "gatsby-transformer-sharp": "^5.11.0",
     "prop-types": "15.7.2",

package/src/components/atoms/author/socials/index.js

@@ -6,6 +6,7 @@ import { FaFacebookSquare } from '@react-icons/all-files/fa/FaFacebookSquare';
 import { IoLogoTiktok } from '@react-icons/all-files/io5/IoLogoTiktok';
 import { FaLinkedin } from '@react-icons/all-files/fa/FaLinkedin';
 import { SiWikipedia } from '@react-icons/all-files/si/SiWikipedia';
+import TwitterIcon from '~images/icons/twitter';
 import styles from './socials.module.scss';
 
 export default function Socials({
@@ -15,20 +16,7 @@ export default function Socials({
     facebook: <FaFacebookSquare title="Facebook Icon" />,
     instagram: <FaInstagram title="Instagram Icon" />,
     linkedin: <FaLinkedin title="Linkedin Icon" />,
-    twitter: (
-      <svg
-        role="img"
-        aria-labelledby="twitterIcon"
-        width="1em"
-        height="1em"
-        viewBox="0 0 13 12"
-        fill="currentcolor"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <title id="twitterIcon">Twitter Icon</title>
-        <path d="M9.97574 0H11.9181L7.67469 4.84989L12.6667 11.4495H8.75802L5.69659 7.44685L2.19363 11.4495H0.250147L4.78881 6.26203L0 0H4.0079L6.7752 3.65856L9.97574 0ZM9.29408 10.287H10.3703L3.42314 1.1015H2.26822L9.29408 10.287Z" />
-      </svg>
-    ),
+    twitter: <TwitterIcon />,
     tiktok: <IoLogoTiktok title="Tiktok Icon" />,
     wikipedia: <SiWikipedia title="Wikipedia Icon" />,
   },

package/src/components/atoms/author/template-one/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import VerifiedAuthor from '../../../../images/icons/verified-author';
 import styles from './template-one.module.scss';
 
 const AuthorTemplateOne = ({
@@ -9,7 +9,7 @@ const AuthorTemplateOne = ({
   authorName,
   authorPath,
   showLinks = true,
-  verify = '../../../../images/verifiedAuthor.svg',
+  verify = <VerifiedAuthor />,
 }) => {
   const author = authorName?.split(/\s+/);
 
@@ -20,12 +20,12 @@ const AuthorTemplateOne = ({
         {showLinks ? (
           <Link to={authorPath}>
             {`${label} ${`${author[0]} ${author[1]?.slice(0, 1)}.`}`}
-            <LazyImage src={verify} alt="verify" width={14} height={14} />
+            {verify}
           </Link>
         ) : (
           <>
             {`${label} ${`${author[0]} ${author[1]?.slice(0, 1)}.`}`}
-            <LazyImage src={verify} alt="verify" width={14} height={14} />
+            {verify}
           </>
         )}
       </span>
@@ -37,7 +37,7 @@ AuthorTemplateOne.propTypes = {
   label: PropTypes.string,
   authorName: PropTypes.string,
   authorPath: PropTypes.string,
-  verify: PropTypes.string,
+  verify: PropTypes.element,
   showLinks: PropTypes.bool,
 };
 

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

@@ -6,7 +6,7 @@
 
   @include min(mobile) {
     white-space: nowrap;
-    img {
+    svg {
       width: 1.4rem;
       height: 1.4rem;
     }

package/src/components/atoms/author/template-one/template-one.stories.js

@@ -7,7 +7,7 @@ import {
   ArgsTable,
   PRIMARY_STORY,
 } from '@storybook/addon-docs/blocks';
-import verifyIcon from '../../../../../storybook-images/verifiedAuthor.svg';
+import VerifiedAuthor from '../../../../images/icons/verified-author';
 import AuthorTemplateOne from '.';
 
 export default {
@@ -31,8 +31,8 @@ export default {
       defaultValue: true,
     },
     verify: {
-      control: 'text',
-      defaultValue: verifyIcon,
+      control: 'element',
+      defaultValue: <VerifiedAuthor />,
     },
   },
   parameters: {

package/src/components/atoms/author/template-one/template-one.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
+import VerifiedAuthor from '../../../../images/icons/verified-author';
 import AuthorTemplateOne from '.';
 
 describe('AuthorTemplateOne Component', () => {
@@ -9,7 +10,7 @@ describe('AuthorTemplateOne Component', () => {
         label="Written by"
         authorName="John Doe"
         authorPath="/path-to-author"
-        verify="../../../../images/verifiedAuthor.svgs"
+        verify={<VerifiedAuthor />}
       />
     );
 

package/src/components/atoms/author/template-three/index.js

@@ -4,7 +4,7 @@ import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Link from 'gatsby-core-theme/src/hooks/link';
 import useTranslate from '~hooks/useTranslate/useTranslate';
-import FactCheckIcon from '../../../../images/icons/fact-check';
+import VerifiedAuthor from '../../../../images/icons/verified-author';
 import styles from './template-three.module.scss';
 
 const AuthorTemplateThree = ({
@@ -22,7 +22,7 @@ const AuthorTemplateThree = ({
   showTitle = true,
   showVerification = true,
   type,
-  verify = <FactCheckIcon width={15} height={15} />,
+  verify = <VerifiedAuthor />,
 }) => {
   const getPrefixBasedOnPage = type?.includes('review')
     ? useTranslate('reviewed_by', 'Review by')

package/src/components/atoms/author/template-three/template-three.module.scss

@@ -55,4 +55,9 @@
     font-size: var(--author-template-three-reviewer-title-font-size, 1.4rem);
     font-weight: var(--author-template-three-reviewer-title-font-weight, 500);
     line-height: var(--author-template-three-reviewer-title-line-height, 2.2rem);
+
+    svg {
+        width: 1.5rem;
+        height: 1.5rem;
+    }
 }

package/src/components/atoms/author/template-three/template-three.stories.js

@@ -7,7 +7,7 @@ import {
   ArgsTable,
   PRIMARY_STORY,
 } from '@storybook/addon-docs/blocks';
-import FactCheckIcon from '../../../../../storybook-images/icons/fact-check';
+import VerifiedAuthor from '../../../../images/icons/verified-author';
 import AuthorTemplateOne from '.';
 
 export default {
@@ -55,11 +55,11 @@ export default {
     verify: {
       name: 'verify',
       type: { name: 'element', required: false },
-      defaultValue: <FactCheckIcon width={15} height={15} />,
+      defaultValue: <VerifiedAuthor />,
       description: 'Icon for verify badge',
       table: {
         type: { summary: 'element' },
-        defaultValue: { summary: <FactCheckIcon width={15} height={15} /> },
+        defaultValue: { summary: <VerifiedAuthor /> },
       },
     },
     showVerification: {

package/src/components/atoms/author/template-two/index.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { imagePrettyUrl } from 'gatsby-core-theme/src/helpers/getters';
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import Link from 'gatsby-core-theme/src/hooks/link';
+import VerifiedAuthor from '../../../../images/icons/verified-author';
 import styles from './template-two.module.scss';
 
 const AuthorTemplateTwo = ({
@@ -10,7 +11,7 @@ const AuthorTemplateTwo = ({
   authorPath,
   authorImage,
   showLinks = true,
-  verify = '../../../../images/verifiedAuthor.svg',
+  verify = <VerifiedAuthor />,
   width = '21',
   height = '21',
 }) => (
@@ -23,7 +24,7 @@ const AuthorTemplateTwo = ({
           height={height}
           alt={authorName}
         />
-        <LazyImage src={verify} alt="verify" width={10} height={10} />
+        {verify}
       </Link>
     ) : (
       <>
@@ -33,7 +34,7 @@ const AuthorTemplateTwo = ({
           height={height}
           alt={authorName}
         />
-        <LazyImage src={verify} alt="verify" width={10} height={10} />
+        {verify}
       </>
     )}
   </span>
@@ -43,7 +44,7 @@ AuthorTemplateTwo.propTypes = {
   authorName: PropTypes.string,
   authorPath: PropTypes.string,
   authorImage: PropTypes.string,
-  verify: PropTypes.string,
+  verify: PropTypes.element,
   showLinks: PropTypes.bool,
   width: PropTypes.string,
   height: PropTypes.string,

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

@@ -6,10 +6,12 @@
     border: 1px solid #ececec;
     min-width: 2.1rem;
   }
-  > img:nth-child(2) {
+  > svg {
     position: absolute;
     bottom: 4px;
     right: -1px;
+    width: 1rem;
+    height: 1rem;
   }
 
   > a {
@@ -18,10 +20,12 @@
       border: 1px solid #ececec;
       min-width: 2.1rem;
     }
-    > img:nth-child(2) {
+    > svg {
       position: absolute;
       bottom: 4px;
       right: -1px;
+      width: 1rem;
+      height: 1rem;
     }
   }
-}
+}

package/src/components/atoms/author/template-two/template-two.stories.js

@@ -7,7 +7,7 @@ import {
   ArgsTable,
   PRIMARY_STORY,
 } from '@storybook/addon-docs/blocks';
-import verifyIcon from '../../../../../storybook-images/verifiedAuthor.svg';
+import VerifiedAuthor from '../../../../images/icons/verified-author';
 import AuthorTemplateOne from '.';
 
 export default {
@@ -28,8 +28,8 @@ export default {
     },
 
     verify: {
-      control: 'text',
-      defaultValue: verifyIcon,
+      control: 'element',
+      defaultValue: <VerifiedAuthor />,
     },
   },
   parameters: {

package/src/components/atoms/author/template-two/template-two.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render, cleanup } from '@testing-library/react';
+import VerifiedAuthor from '../../../../images/icons/verified-author';
 import AuthorTemplateTwo from '.';
 
 describe('AuthorTemplateOne Component', () => {
@@ -9,7 +10,7 @@ describe('AuthorTemplateOne Component', () => {
         label="Written by"
         authorName="John Doe"
         authorPath="/path-to-author"
-        verify="../../../../images/verifiedAuthor.svgs"
+        verify={<VerifiedAuthor />}
       />
     );
 

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

@@ -6,6 +6,7 @@ import { BiDislike } from '@react-icons/all-files/bi/BiDislike';
 import BonusTemplateDefault from 'gatsby-core-theme/src/components/molecules/bonus-box/template-three';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Rating from 'gatsby-core-theme/src/components/atoms/ratings';
+import Verify from '~images/icons/verify';
 import OperatorDetails from '../../../../molecules/operator-details';
 import styles from './template-four.module.scss';
 
@@ -18,7 +19,7 @@ const TemplateFour = ({
   showRatingLabel = false,
   showRatingDecimal = false,
   authorTemplateTwo = true,
-  verifyIcon = '../../../images/verify.svg',
+  verifyIcon = <Verify />,
   showBonusForAll = false,
   width = '88',
   height = '88',
@@ -120,7 +121,7 @@ TemplateFour.propTypes = {
   authorTemplateTwo: PropTypes.bool,
   showAuthor: PropTypes.bool,
 
-  verifyIcon: PropTypes.string,
+  verifyIcon: PropTypes.element,
   showRibbon: PropTypes.bool,
   useOneStarRating: PropTypes.bool,
   showRatingLabel: PropTypes.bool,

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

@@ -8,7 +8,7 @@ import {
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
 import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
-import verifyIcon from '../../../../../../storybook-images/verify.svg';
+import Verify from '~images/icons/verify';
 import TemplateFour from '.';
 import styles from './template-four.module.scss';
 
@@ -26,8 +26,8 @@ export default {
     },
     verifyIcon: {
       name: 'verifyIcon',
-      type: { name: 'string', required: false },
-      defaultValue: verifyIcon,
+      type: { name: 'element', required: false },
+      defaultValue: <Verify />,
       description: 'verify icon',
     },
     page: {

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

@@ -10,6 +10,7 @@ import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
 import SellingPoints from 'gatsby-core-theme/src/components/atoms/selling-points';
+import Verify from '~images/icons/verify';
 import OperatorDetails from '../../../../molecules/operator-details';
 import styles from './template-one.module.scss';
 import Bonus from '~molecules/bonus-box/template-one';
@@ -29,7 +30,7 @@ const TemplateOne = ({
   authorTemplateTwo = true,
   sellingPointsIcon = <FaCheck title="Check Icon" />,
   showBonusForAll = false,
-  verifyIcon = '../../../images/verify.svg',
+  verifyIcon = <Verify />,
   showOperatorCta = true,
   operatorLogoWidth = '88',
   operatorLogoHeight = '88',
@@ -185,7 +186,7 @@ TemplateOne.propTypes = {
   showAuthor: PropTypes.bool,
   hasVariableComponent: PropTypes.bool,
   sellingPointsIcon: PropTypes.element,
-  verifyIcon: PropTypes.string,
+  verifyIcon: PropTypes.element,
   showRibbon: PropTypes.bool,
   useOneStarRating: PropTypes.bool,
   showRatingLabel: PropTypes.bool,

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

@@ -8,7 +8,7 @@ import {
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
 import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
-import verifyIcon from '../../../../../../storybook-images/verify.svg';
+import Verify from '~images/icons/verify';
 import TemplateOne from '.';
 
 const operatorData = getSampleOperatorCards();
@@ -32,8 +32,8 @@ export default {
     },
     verifyIcon: {
       name: 'verifyIcon',
-      type: { name: 'string', required: false },
-      defaultValue: verifyIcon,
+      type: { name: 'element', required: false },
+      defaultValue: <Verify />,
       description: 'verify icon',
     },
     page: {

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

@@ -7,6 +7,7 @@ import { FaArrowRight } from '@react-icons/all-files/fa/FaArrowRight';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import BonusTemplateDefault from 'gatsby-core-theme/src/components/molecules/bonus-box/template-three';
 import OperatorCta from 'gatsby-core-theme/src/components/atoms/button/operator-cta';
+import Verify from '~images/icons/verify';
 import OperatorDetails from '../../../../molecules/operator-details';
 import VariableComponent from '../variables';
 import styles from './template-three.module.scss';
@@ -17,7 +18,7 @@ const TemplateThree = ({
   useOneStarRating = true,
   page,
   showAuthor = true,
-  verifyIcon = '../../../images/verify.svg',
+  verifyIcon = <Verify />,
   showRatingLabel = false,
   showRatingDecimal = false,
   authorTemplateTwo = true,
@@ -141,7 +142,7 @@ TemplateThree.propTypes = {
   }),
   authorTemplateTwo: PropTypes.bool,
   showAuthor: PropTypes.bool,
-  verifyIcon: PropTypes.string,
+  verifyIcon: PropTypes.element,
   showRibbon: PropTypes.bool,
   hasVariableComponent: PropTypes.bool,
   useOneStarRating: PropTypes.bool,

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

@@ -8,7 +8,7 @@ import {
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
 import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
-import verifyIcon from '../../../../../../storybook-images/verify.svg';
+import Verify from '~images/icons/verify';
 import TemplateThree from '.';
 
 const operatorData = getSampleOperatorCards();
@@ -25,8 +25,8 @@ export default {
     },
     verifyIcon: {
       name: 'verifyIcon',
-      type: { name: 'string', required: false },
-      defaultValue: verifyIcon,
+      type: { name: 'element', required: false },
+      defaultValue: <Verify />,
       description: 'verify icon',
     },
     page: {

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

@@ -7,6 +7,7 @@ import BonusTemplateDefault from 'gatsby-core-theme/src/components/molecules/bon
 import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
 import ReviewLink from 'gatsby-core-theme/src/components/atoms/review-link';
 import Tnc from 'gatsby-core-theme/src/components/molecules/tnc';
+import Verify from '~images/icons/verify';
 import VariableComponent from '../variables';
 import OperatorDetails from '../../../../molecules/operator-details';
 import styles from './template-two.module.scss';
@@ -23,7 +24,7 @@ const TemplateTwo = ({
   authorTemplateTwo = true,
   contentRibbon = false,
   hasVariableComponent = false,
-  verifyIcon = '../../../images/verify.svg',
+  verifyIcon = <Verify />,
   showBonusForAll = false,
   operatorLogoWidth = '88',
   operatorLogoHeight = '88',
@@ -163,7 +164,7 @@ TemplateTwo.propTypes = {
   authorTemplateTwo: PropTypes.bool,
   showPaymentMethods: PropTypes.bool,
   showAuthor: PropTypes.bool,
-  verifyIcon: PropTypes.string,
+  verifyIcon: PropTypes.element,
   showRibbon: PropTypes.bool,
   useOneStarRating: PropTypes.bool,
   showRatingLabel: PropTypes.bool,

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

@@ -8,7 +8,7 @@ import {
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
 import { getSampleOperatorCards } from 'gatsby-core-theme/tests/factories/modules/card.factory';
-import verifyIcon from '../../../../../../storybook-images/verify.svg';
+import Verify from '~images/icons/verify';
 import TemplateTwo from '.';
 
 const operatorData = getSampleOperatorCards();
@@ -25,8 +25,8 @@ export default {
     },
     verifyIcon: {
       name: 'verifyIcon',
-      type: { name: 'string', required: false },
-      defaultValue: verifyIcon,
+      type: { name: 'element', required: false },
+      defaultValue: <Verify />,
       description: 'verify icon',
     },
     useOneStarRating: {

package/src/components/atoms/cards/popup-card/popup-card.stories.js

@@ -12,7 +12,7 @@ import { singleToplistData } from 'gatsby-core-theme/tests/factories/modules/top
 import PopupCard from '.';
 
 export default {
-  title: 'Theme/Atoms/Cards/Popup Card',
+  title: 'Theme/Modules/Cards/Popup/Propup Card',
   component: PopupCard,
   argTypes: {
     item: {

package/src/components/atoms/coupon/coupon.module.scss

@@ -26,6 +26,11 @@
   line-height: 1.7rem;
   letter-spacing: 0.44px;
   text-transform: uppercase;
+
+  svg {
+    width: 2.2rem;
+    height: 2.2rem;
+  }
 }
 
 .copied {

package/src/components/atoms/coupon/coupon.stories.js

@@ -8,8 +8,8 @@ import {
   ArgsTable,
 } from '@storybook/addon-docs/blocks';
 
-import copyIcon from '../../../../storybook-images/copyIcon.svg';
-import checkIconSvg from '../../../../storybook-images/check-circle.svg';
+import CopyIcon from '../../../images/icons/copy-icon';
+import CheckCircleIcon from '../../../images/icons/check-circle';
 
 import Coupon from '.';
 
@@ -68,14 +68,14 @@ export default {
 const Template = (args) => <Coupon {...args} />;
 export const Default = Template.bind({});
 Default.args = {
-  icon: copyIcon,
-  checkIcon: checkIconSvg,
+  icon: <CopyIcon />,
+  checkIcon: <CheckCircleIcon />,
 };
 
 export const TemplateTwo = Template.bind({});
 TemplateTwo.args = {
   templateOne: false,
-  icon: copyIcon,
-  checkIcon: checkIconSvg,
+  icon: <CopyIcon />,
+  checkIcon: <CheckCircleIcon />,
   showprefix: true,
 };