@nuskin/foundation-ui-components 1.0.0-cft-35.2 → 1.0.0-cft-35.4

package/CHANGELOG.md

@@ -0,0 +1,59 @@
+# [1.0.0-cft-35.4](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.3...v1.0.0-cft-35.4) (2023-03-28)
+
+
+### Fix
+
+* add eslint and prettier ([7ebcd42](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/7ebcd429e1f2696173db7786fe799e942cf2c907))
+* nslink typography story book update ([8d75d1b](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/8d75d1b44fe343065ad52ca3ec0f405c5b547c30))
+* text underline issue ([4010c89](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/4010c892f0e5a141de59e1b65b633bd7cb8a4ab9))
+
+### New
+
+* Changed Export methods and refactor #CFT-71 ([f3a7f6b](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/f3a7f6bee7d75e7a7f9c7eb4a799e74d710963e1)), closes [#CFT-71](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/issues/CFT-71)
+
+# [1.0.0-cft-35.3](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.2...v1.0.0-cft-35.3) (2023-03-27)
+
+
+### Chore
+
+* CFT-64 jest tests for Typography, BrandComponent and Icons ([eb9bfac](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/eb9bfac26f46ba051b2e0a598a7ad623b4405ba7))
+
+### Docs
+
+* CFT-63 change log ([4544ca9](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/4544ca9bba9c631fed42ddea25c6e8422c7a4fdb))
+
+### fix
+
+* link component #CFT-plaincta ([50923d7](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/50923d74980f86d49b4707dedfa5436dcbe7be91))
+
+### Fix
+
+* Added Icon Only Component and changes #CFT-35 ([8b84575](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/8b8457501f274361eae521a26bcd9b73ef18494c)), closes [#CFT-35](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/issues/CFT-35)
+* build display name for component ([0684225](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/068422599e46e3294f4f285f7884610d2ee16600))
+* changed updatetd ([118bac5](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/118bac54cf8b8fbbfbcf675dd3701f08a227be9d))
+* refactor checkbox component ([07884d7](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/07884d7b2afed6a34b3838657f1ab24e71de5d0e))
+* refactor the ns link component ([ac6b11b](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/ac6b11b477e0f514fb1b71f92acd4f01b1d7db4a))
+
+### New
+
+* Header Common Components #CFT-71 ([1283047](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/1283047b7b61d90ac8aaf359396bf901c679f986)), closes [#CFT-71](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/issues/CFT-71)
+* UI-PlainCta-Component ([9bb9abf](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/9bb9abf7456bd856f4b1e4d4ff1daed4da140867))
+
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The changelog uses principles from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+uses the format from [Project Changelog](https://code.tls.nuskin.io/ns-am/ux/design-components/-/blob/master/CHANGELOG.md) and adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.0.0](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/compare/v1.0.0-cft-35.2...v1.0.0-cft-35.1?from_project_id=4953) (2023-02-20)
+
+### New
+
+* Added Typography component with storybook
+* Added Button component with storybook and jest
+* Added Brand component with storybook
+
+merge request [1](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/merge_requests/1), closes [#CFT-35](https://nuskin.atlassian.net/browse/CFT-35)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/foundation-ui-components",
-  "version": "1.0.0-cft-35.2",
+  "version": "1.0.0-cft-35.4",
   "description": "It is a foundation library written in react, that provides commom components to all UI pages",
   "private": false,
   "main": "src/common/index.ts",
@@ -34,21 +34,26 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@mui/icons-material": "^5.11.9",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.11",
     "@mui/material": "5.4.2",
-    "@next/font": "13.1.6",
-    "@nuskin/foundation-theme": "1.0.0-cft-33.4",
-    "next": "13.1.6",
+    "@next/font": "13.2.4",
+    "@nuskin/foundation-theme": "1.0.0-cft-33.10",
+    "@types/jest": "^29.5.0",
+    "framer-motion": "^10.8.5",
+    "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.9.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/preset-typescript": "^7.18.6",
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.0",
     "@emotion/jest": "^11.10.5",
+    "@nuskin/eslint-config": "^1.0.0-setup.1",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
     "@storybook/addon-interactions": "^6.5.16",
@@ -58,20 +63,24 @@
     "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@types/node": "18.11.18",
-    "@types/react": "18.0.27",
-    "@types/react-dom": "18.0.10",
+    "@testing-library/react": "^14.0.0",
+    "@types/lodash": "^4.14.191",
+    "@types/node": "18.15.0",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
     "@types/react-test-renderer": "^18.0.0",
     "@types/testing-library__jest-dom": "^5.14.5",
-    "babel-loader": "^8.3.0",
+    "babel-jest": "^29.5.0",
+    "babel-loader": "^9.1.2",
     "babel-plugin-emotion": "^11.0.0",
-    "eslint": "8.33.0",
-    "eslint-config-next": "13.1.6",
+    "eslint": "8.36.0",
+    "eslint-config-next": "13.2.4",
+    "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-storybook": "^0.6.10",
-    "jest": "^29.4.2",
-    "jest-environment-jsdom": "^29.4.2"
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-storybook": "^0.6.11",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0"
   },
   "files": [
     "src/common"

package/src/common/brand-components/Brand.stories.tsx

@@ -1,25 +1,25 @@
-import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { BrandComponent } from "./BrandComponent";
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import BrandComponent from './BrandComponent';
 
 export default {
-    title: "Components/Brand",
+    title: 'Components/Brand',
     component: BrandComponent,
     decorators: [
         (story) => (
-            <div style={{ textAlign: "center", marginTop: "20px" }}>{story()}</div>
+            <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>
         ),
     ],
     argTypes: {
-        size: { control: "text", defaultValue: "100px" },
+        size: { control: 'text', defaultValue: '100px' },
         variant: {
-            control: "select",
-            options: ["stacked", "horizontal", "logomark", "wordmark", "poweredBy"],
+            control: 'select',
+            options: ['stacked', 'horizontal', 'logomark', 'wordmark', 'poweredBy'],
         },
     },
     args: {
-        size: "100px",
-        variant: "stacked",
+        size: '100px',
+        variant: 'stacked',
     },
 } as ComponentMeta<typeof BrandComponent>;
 

package/src/common/brand-components/BrandComponent.test.tsx

@@ -0,0 +1,48 @@
+import BrandComponent from './BrandComponent';
+import { render } from '@testing-library/react';
+
+describe('checking brand component', () => {
+    it('1. should render BrandComponent with stacked variant', () => {
+        const { getByTestId } = render(<BrandComponent variant="stacked" />);
+        const svg = getByTestId('logo');
+        const paths = svg.querySelectorAll('path');
+        expect(paths.length).toBe(8);
+    });
+
+    it('2. should render BrandComponent having variant wordmark', () => {
+        const { getByTestId } = render(<BrandComponent variant="wordmark" />);
+        const svg = getByTestId('logo');
+        const paths = svg.querySelectorAll('path');
+        expect(paths.length).toBe(7);
+    });
+
+    it('3. should render BrandComponent having variant horizontal', () => {
+        const { getByTestId } = render(<BrandComponent variant="horizontal" />);
+        const svg = getByTestId('logo');
+        const paths = svg.querySelectorAll('path');
+        expect(paths.length).toBe(8);
+    });
+
+    it('4. should render BrandComponent having variant logomark', () => {
+        const { getByTestId } = render(<BrandComponent variant="logomark" />);
+        const svg = getByTestId('logo');
+        const paths = svg.querySelectorAll('path');
+        expect(paths.length).toBe(5);
+    });
+
+    it('5. should render BrandComponent having powered variant', () => {
+        const { getByTestId } = render(<BrandComponent variant="poweredBy" />);
+        const svg = getByTestId('logo');
+        const paths = svg.querySelectorAll('path');
+        expect(paths.length).toBe(17);
+    });
+
+    /*
+    xit('6. should render BrandComponent with dummy variant', () => {
+        const { getByTestId } = render(<BrandComponent variant="dummy" />);
+        const svg = getByTestId('logo');
+        const paths = svg.querySelectorAll('path');
+        expect(paths.length).toBe(8);
+    });
+    */
+});

package/src/common/brand-components/BrandComponent.tsx

@@ -1,29 +1,27 @@
-import React, { FC } from "react";
-import NSLogoHorizontal from "./icons/NSLogoHorizontal";
-import NSLogoMark from "./icons/NSLogoMark";
-import NSLogoPoweredBy from "./icons/NSLogoPoweredBy";
-import NSLogoStacked from "./icons/NSLogoStacked";
-import NSLogoWordMark from "./icons/NSWordMark";
-import LogoContainer from "./BrandContanier.styled";
-import { BrandComponentProps } from "./types";
+import React, { PropsWithChildren, useCallback } from 'react';
+import NSLogoHorizontal from './icons/NSLogoHorizontal';
+import NSLogoMark from './icons/NSLogoMark';
+import NSLogoPoweredBy from './icons/NSLogoPoweredBy';
+import NSLogoStacked from './icons/NSLogoStacked';
+import NSLogoWordMark from './icons/NSWordMark';
+import LogoContainer from './BrandContanier.styled';
+import { BrandComponentProps } from './types';
 
-export const BrandComponent: FC<BrandComponentProps> = (props) => {
-    const { variant = "stacked", size = "108px" } = props;
-    const renderIcon = () => {
-        switch (variant) {
-            case "stacked":
-                return <NSLogoStacked color="primary" />;
-            case "horizontal":
-                return <NSLogoHorizontal color="primary" />;
-            case "wordmark":
-                return <NSLogoWordMark color="primary" />;
-            case "logomark":
-                return <NSLogoMark color="primary" />;
-            case "poweredBy":
-                return <NSLogoPoweredBy color="primary" />;
-            default:
-                return <NSLogoStacked color="primary" />;
-        }
-    };
-    return <LogoContainer size={size}>{renderIcon()}</LogoContainer>;
+const VariantMap = {
+    'stacked': NSLogoStacked,
+    'horizontal': NSLogoHorizontal,
+    'wordmark': NSLogoWordMark,
+    'logomark': NSLogoMark,
+    'poweredBy': NSLogoPoweredBy,
 };
+
+const BrandComponent = (props: PropsWithChildren<BrandComponentProps>) => {
+    const { variant = 'stacked', size = '108px' } = props;
+    const renderBrand = useCallback(() => {
+        const BrandComponent = VariantMap[variant || 'stacked'];
+        return <BrandComponent color='primary' />
+    }, [variant]);
+    return <LogoContainer size={size}>{renderBrand()}</LogoContainer>;
+};
+
+export default BrandComponent;

package/src/common/brand-components/BrandContanier.styled.tsx

@@ -1,4 +1,4 @@
-import { styled } from "@nuskin/foundation-theme";
+import { styled } from '@nuskin/foundation-theme';
 
 const BrandContainer = styled.div<{ size: string }>`
   svg {

package/src/common/brand-components/icons/Logo.test.tsx

@@ -0,0 +1,84 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import NSWordMark from './NSWordMark'
+import NSLogoHorizontal from './NSLogoHorizontal'
+import NSLogoPoweredBy from './NSLogoPoweredBy'
+import NSLogoStacked from './NSLogoStacked'
+import NSLogoMark from './NSLogoMark'
+describe('verifying logos', () => {
+    it('1. should render NSWordMark logo', () => {
+        const { getByTestId } = render(<NSWordMark color="primary" />)
+
+        const svg = getByTestId('logo')
+
+        expect(svg).toHaveAttribute('viewBox', '0 0 98 20')
+        expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+
+        const paths = svg.querySelectorAll('path')
+        expect(paths.length).toBe(7)
+        for (let i = 0; i < paths.length; i++) {
+            const path = paths[i]
+            expect(path).toHaveAttribute('fill', 'primary')
+        }
+    })
+    it('2. should render NSLogoHorizontal ', () => {
+        const { getByTestId } = render(<NSLogoHorizontal color="primary" />)
+
+        const svg = getByTestId('logo')
+
+        expect(svg).toHaveAttribute('viewBox', '0 0 135 30')
+        expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+
+        const paths = svg.querySelectorAll('path')
+        expect(paths.length).toBe(8)
+        for (let i = 0; i < paths.length; i++) {
+            const path = paths[i]
+            expect(path).toHaveAttribute('fill', 'primary')
+        }
+    })
+    it('3. should render NSLogoPoweredBy', () => {
+        const { getByTestId } = render(<NSLogoPoweredBy color="primary" />)
+
+        const svg = getByTestId('logo')
+
+        expect(svg).toHaveAttribute('viewBox', '0 0 100 38')
+        expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+
+        const paths = svg.querySelectorAll('path')
+        expect(paths.length).toBe(17)
+        for (let i = 0; i < paths.length; i++) {
+            const path = paths[i]
+            expect(path).toHaveAttribute('fill', 'primary')
+        }
+    })
+    it('4. should render NSLogoStacked', () => {
+        const { getByTestId } = render(<NSLogoStacked color="primary" />)
+
+        const svg = getByTestId('logo')
+
+        expect(svg).toHaveAttribute('viewBox', '0 0 155 108')
+        expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+
+        const paths = svg.querySelectorAll('path')
+        expect(paths.length).toBe(8)
+        for (let i = 0; i < paths.length; i++) {
+            const path = paths[i]
+            expect(path).toHaveAttribute('fill', 'primary')
+        }
+    })
+    it('5. should render the NSLogoMark', () => {
+        const { getByTestId } = render(<NSLogoMark color="primary" />)
+
+        const svg = getByTestId('logo')
+
+        expect(svg).toHaveAttribute('viewBox', '0 0 51 52')
+        expect(svg).toHaveAttribute('xmlns', 'http://www.w3.org/2000/svg')
+
+        const paths = svg.querySelectorAll('path')
+        expect(paths.length).toBe(5)
+        for (let i = 0; i < paths.length; i++) {
+            const path = paths[i]
+            expect(path).toHaveAttribute('fill', 'primary')
+        }
+    })
+})

package/src/common/brand-components/icons/NSLogoHorizontal.tsx

@@ -1,65 +1,65 @@
 /* eslint-disable max-len */
 
-import { SvgIconProps, SvgIcon } from "@mui/material";
+import { SvgIconProps, SvgIcon } from '@mui/material'
 
 const NSLogoHorizontal = (props: SvgIconProps) => {
     return (
         <SvgIcon
             viewBox="0 0 135 30"
             fill="none"
+            data-testid="logo"
             xmlns="http://www.w3.org/2000/svg"
-            {...props}
-        >
+            {...props}>
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M133.439 23C132.607 23 131.905 23.7014 131.905 24.5C131.905 25.3004 132.607 26 133.439 26C134.349 26 135 25.3004 135 24.5C135 23.6516 134.349 23 133.439 23ZM133.439 25.8255C132.686 25.8255 132.06 25.1996 132.06 24.5C132.06 23.7765 132.686 23.1762 133.439 23.1762C134.219 23.1762 134.792 23.7765 134.792 24.5C134.792 25.1996 134.219 25.8255 133.439 25.8255ZM134.061 24.151C134.061 23.9766 133.959 23.6265 133.388 23.6265H132.892V25.3997H133.129V24.6252H133.518L133.854 25.3997H134.061L133.75 24.599C133.934 24.5751 134.061 24.3768 134.061 24.151ZM133.412 24.474H133.129V23.8248H133.464C133.698 23.8248 133.879 23.9014 133.879 24.151C133.879 24.3016 133.801 24.474 133.412 24.474Z"
                 fill={props.color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M51.181 25L38.4365 9.34704V24.7232H37V6.07549L37.3395 6L49.9798 21.4768V6.27702H51.4421V24.9497L51.181 25Z"
                 fill={props.color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M62.7499 25C58.2617 25 55.5685 22.4685 55.5685 17.9423V6H57.0471V17.9165C57.0471 21.7525 59.2912 23.696 62.7499 23.696C66.2087 23.696 68.5056 21.7014 68.5056 17.9165V6H70.0106V17.9423C70.0106 22.3406 67.1326 25 62.7499 25Z"
                 fill={props.color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M83.781 25C81.7507 25 79.9289 24.3475 78.2632 23.2933L78.966 22.0636C80.5016 23.0674 82.1934 23.7201 83.9109 23.7201C86.4353 23.7201 88.1273 22.1637 88.1273 20.1307C88.1273 17.9973 86.644 17.0685 83.9371 15.889C80.9961 14.634 79.2002 13.3287 79.2002 10.794C79.2002 8.13339 81.5165 6 84.9257 6C86.5914 6 88.101 6.52701 89.2202 7.2548L88.5176 8.43455C87.5545 7.78181 86.2274 7.27989 84.7959 7.27989C82.2452 7.27989 80.6578 8.78589 80.6578 10.6934C80.6578 12.6762 82.2714 13.6299 84.5877 14.6593C87.8668 16.0898 89.6106 17.3197 89.6106 19.955C89.6106 22.967 87.008 25 83.781 25Z"
                 fill={props.color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M104.227 25L95.1657 15.6169V25H93.7368V6H95.1657V14.8389L103.921 6H105.758L96.5441 15.2276L106.116 25H104.227Z"
                 fill={props.color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M109.211 25H110.552V6H109.211V25Z"
                 fill={props.color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M129.581 25L116.836 9.34704V24.7232H115.4V6.07549L115.74 6L128.379 21.4768V6.27702H129.842V24.9497L129.581 25Z"
                 fill={props.color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M23.3312 7.73077C23.3312 7.73077 26.0255 7.59615 28.0509 9.84615C28.7197 10.5962 29.3694 11.5577 29.7325 12.9038C28.7771 5.63461 22.5669 0 15.0382 0C7.52865 0 1.29935 5.63462 0.324829 12.9231C0.687886 11.5769 1.33757 10.6154 2.00636 9.86538C4.05094 7.61538 6.7261 7.75 6.7261 7.75C13.414 8.09615 13.4522 14.8654 13.4522 14.8654V29.7885C13.758 29.8269 14.0828 29.8462 14.4076 29.8654V13.9038C14.4076 11.7308 13.7388 9.61539 12.2293 8.11539C10.8535 6.73077 9.07642 5.96154 7.20381 5.92308C8.00636 4.51923 9.11464 3.34615 10.4331 2.51923C11.828 1.65385 13.414 1.19231 15.0382 1.19231C16.6624 1.19231 18.2675 1.65385 19.6624 2.51923C20.9809 3.34615 22.0892 4.51923 22.8917 5.92308C21.0191 5.96154 19.2229 6.73077 17.8471 8.11539C16.3376 9.61539 15.6497 11.7308 15.6497 13.9038V29.8269C15.9745 29.8077 16.2802 29.7885 16.6051 29.75V14.8462C16.6051 14.8462 16.6433 8.07692 23.3312 7.73077ZM22.0892 16.3462C21.0764 16.9808 20.0255 18.2692 20.0255 20.9231V28.9808C23.0064 27.9038 25.5478 25.9038 27.3057 23.3077C28.4713 21.4038 28.5095 19.9038 28.2229 18.8077C27.8025 17.4038 26.5223 15.6538 23.9427 15.7885C23.9427 15.7885 22.9299 15.8077 22.0892 16.3462ZM23.4841 11.0385C25.4904 11.0385 26.828 11.5769 27.7261 12.2885C28.4522 12.9231 30.5923 15.1538 29.1783 19.3462C29.1592 16.3269 28.4522 15.25 27.6688 14.3462C25.9872 12.5192 23.7516 12.7308 23.7516 12.7308C21.0955 12.8077 19.8535 14.1346 19.2802 15.3462C18.7452 16.4231 18.7834 17.3846 18.7834 17.3846V29.3654C18.4777 29.4423 18.172 29.5192 17.8471 29.5769V16.0385C17.8471 11.0769 23.4841 11.0385 23.4841 11.0385ZM6.59234 11.0385C4.58598 11.0385 3.2484 11.5769 2.35031 12.2885C1.62419 12.9231 -0.515935 15.1538 0.878969 19.3462C0.898077 16.3269 1.60508 15.25 2.38852 14.3462C4.05094 12.5192 6.30572 12.7308 6.30572 12.7308C8.96177 12.8077 10.2038 14.1346 10.7771 15.3462C11.3121 16.4038 11.2739 17.3846 11.2739 17.3846V29.3654C11.5796 29.4423 11.9044 29.5192 12.2293 29.5769V16.0577C12.2484 11.0769 6.59234 11.0385 6.59234 11.0385ZM6.15285 15.7885C6.15285 15.7885 7.16559 15.8077 8.00636 16.3462C8.99999 16.9808 10.0701 18.2692 10.0701 20.9231V28.9808C7.08916 27.9038 4.54776 25.9038 2.7898 23.3077C1.6433 21.4038 1.58598 19.9038 1.8726 18.8077C2.27387 17.4038 3.55413 15.6346 6.15285 15.7885Z"
                 fill={props.color}
             />
         </SvgIcon>
-    );
-};
+    )
+}
 
-export default NSLogoHorizontal;
+export default NSLogoHorizontal

package/src/common/brand-components/icons/NSLogoMark.tsx

@@ -1,11 +1,12 @@
 /* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
 const NSLogoMark = (props: SvgIconProps) => {
     return (
         <SvgIcon
             viewBox="0 0 51 52"
             fill="none"
+            data-testid="logo"
             xmlns="http://www.w3.org/2000/svg"
             {...props}
         >

package/src/common/brand-components/icons/NSLogoPoweredBy.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
 
 const NSLogoPoweredBy = (props: SvgIconProps) => {
-    const { color } = props;
+    const { color } = props
     return (
         <SvgIcon
             viewBox="0 0 100 38"
+            data-testid="logo"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
-            {...props}
-        >
+            {...props}>
             <path
                 d="M15 8.8855V0.885498H17.7031C18.3307 0.885498 18.8438 0.998779 19.2422 1.22534C19.6432 1.4493 19.9401 1.75269 20.1328 2.1355C20.3255 2.51831 20.4219 2.94539 20.4219 3.41675C20.4219 3.8881 20.3255 4.31649 20.1328 4.7019C19.9427 5.08732 19.6484 5.39461 19.25 5.62378C18.8516 5.85034 18.3411 5.96362 17.7188 5.96362H15.7812V5.10425H17.6875C18.1172 5.10425 18.4622 5.03003 18.7227 4.88159C18.9831 4.73315 19.1719 4.53263 19.2891 4.28003C19.4089 4.02482 19.4688 3.73706 19.4688 3.41675C19.4688 3.09644 19.4089 2.80998 19.2891 2.55737C19.1719 2.30477 18.9818 2.10685 18.7188 1.96362C18.4557 1.81779 18.1068 1.74487 17.6719 1.74487H15.9688V8.8855H15Z"
                 fill={color}
@@ -47,55 +47,55 @@ const NSLogoPoweredBy = (props: SvgIconProps) => {
                 fill={color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M98.8441 32.3669C98.2276 32.3669 97.7076 32.8865 97.7076 33.4781C97.7076 34.0709 98.2276 34.5892 98.8441 34.5892C99.518 34.5892 100 34.0709 100 33.4781C100 32.8496 99.518 32.3669 98.8441 32.3669ZM98.844 34.4599C98.286 34.4599 97.8221 33.9962 97.8221 33.478C97.8221 32.9421 98.286 32.4974 98.844 32.4974C99.4217 32.4974 99.8461 32.9421 99.8461 33.478C99.8461 33.9962 99.4217 34.4599 98.844 34.4599ZM99.3046 33.2195C99.3046 33.0903 99.2286 32.831 98.806 32.831H98.4385V34.1445H98.6138V33.5708H98.9019L99.1514 34.1445H99.3046L99.0743 33.5514C99.2102 33.5337 99.3046 33.3868 99.3046 33.2195ZM98.8239 33.4588H98.6138V32.9779H98.862C99.0358 32.9779 99.1699 33.0347 99.1699 33.2196C99.1699 33.3311 99.1119 33.4588 98.8239 33.4588Z"
                 fill={props.color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M37.9119 33.8485L28.4715 22.2537V33.6435H27.4075V19.8303L27.6589 19.7744L37.0221 31.2387V19.9796H38.1053V33.8112L37.9119 33.8485Z"
                 fill={props.color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M46.4815 33.8485C43.1568 33.8485 41.1619 31.9733 41.1619 28.6206V19.7744H42.2571V28.6015C42.2571 31.443 43.9194 32.8826 46.4815 32.8826C49.0435 32.8826 50.7449 31.4051 50.7449 28.6015V19.7744H51.8597V28.6206C51.8597 31.8786 49.7279 33.8485 46.4815 33.8485Z"
                 fill={color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M62.06 33.8485C60.5561 33.8485 59.2066 33.3652 57.9728 32.5842L58.4934 31.6733C59.6309 32.4169 60.884 32.9004 62.1562 32.9004C64.0262 32.9004 65.2795 31.7475 65.2795 30.2416C65.2795 28.6613 64.1808 27.9733 62.1757 27.0996C59.9971 26.1699 58.6669 25.2031 58.6669 23.3256C58.6669 21.3547 60.3827 19.7744 62.908 19.7744C64.1419 19.7744 65.2601 20.1648 66.0891 20.7039L65.5687 21.5778C64.8553 21.0943 63.8722 20.7225 62.8118 20.7225C60.9224 20.7225 59.7465 21.838 59.7465 23.251C59.7465 24.7198 60.9418 25.4262 62.6576 26.1887C65.0866 27.2483 66.3782 28.1594 66.3782 30.1115C66.3782 32.3426 64.4505 33.8485 62.06 33.8485Z"
                 fill={color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M77.2052 33.8485L70.4931 26.898V33.8485H69.4347V19.7744H70.4931V26.3217L76.9783 19.7744H78.3394L71.5141 26.6097L78.6043 33.8485H77.2052Z"
                 fill={color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M80.8967 33.8485H81.8901V19.7744H80.8967V33.8485Z"
                 fill={color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M95.9857 33.8485L86.5454 22.2537V33.6435H85.4814V19.8303L85.7331 19.7744L95.0958 31.2387V19.9796H96.1793V33.8112L95.9857 33.8485Z"
                 fill={color}
             />
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M17.2824 21.0565C17.2824 21.0565 19.2781 20.9567 20.7785 22.6234C21.2739 23.179 21.7551 23.8912 22.024 24.8884C21.3163 19.5037 16.7162 15.33 11.1394 15.33C5.57676 15.33 0.962469 19.5037 0.240601 24.9026C0.509532 23.9055 0.990778 23.1932 1.48618 22.6376C3.00069 20.971 4.98229 21.0707 4.98229 21.0707C9.93628 21.3271 9.96459 26.3414 9.96459 26.3414V37.3955C10.1911 37.424 10.4317 37.4382 10.6723 37.4525V25.6291C10.6723 24.0194 10.1769 22.4525 9.05872 21.3414C8.03961 20.3157 6.72326 19.7459 5.33614 19.7174C5.93062 18.6775 6.75157 17.8086 7.72822 17.1961C8.76148 16.555 9.93628 16.2131 11.1394 16.2131C12.3425 16.2131 13.5315 16.555 14.5647 17.1961C15.5414 17.8086 16.3623 18.6775 16.9568 19.7174C15.5697 19.7459 14.2392 20.3157 13.2201 21.3414C12.1019 22.4525 11.5923 24.0194 11.5923 25.6291V37.424C11.833 37.4097 12.0594 37.3955 12.3 37.367V26.3271C12.3 26.3271 12.3284 21.3129 17.2824 21.0565ZM17.7353 27.0251C17.7353 27.0251 16.9852 27.0393 16.3624 27.4382C15.6122 27.9083 14.8337 28.8627 14.8337 30.8285V36.7972C17.0418 35.9995 18.9243 34.518 20.2265 32.5949C21.0899 31.1846 21.1182 30.0735 20.9059 29.2616C20.5945 28.2217 19.6462 26.9254 17.7353 27.0251ZM17.3956 23.5066C18.8818 23.5066 19.8726 23.9054 20.5379 24.4325C21.0758 24.9026 22.661 26.555 21.6136 29.6604C21.5995 27.424 21.0758 26.6262 20.4954 25.9567C19.2498 24.6035 17.5938 24.7601 17.5938 24.7601C15.6264 24.8171 14.7063 25.8 14.2817 26.6975C13.8854 27.4952 13.9137 28.2074 13.9137 28.2074V37.0821C13.6872 37.1391 13.4607 37.196 13.2201 37.2388V27.2103C13.2201 23.5351 17.3956 23.5066 17.3956 23.5066ZM4.88322 23.5066C3.39702 23.5066 2.40622 23.9054 1.74097 24.4325C1.20311 24.9026 -0.382169 26.555 0.651093 29.6604C0.665248 27.424 1.18896 26.6262 1.76928 25.9567C3.0007 24.6035 4.67091 24.7601 4.67091 24.7601C6.63835 24.8171 7.55838 25.8 7.98301 26.6975C8.37933 27.4809 8.35102 28.2074 8.35102 28.2074V37.0821C8.57749 37.1391 8.81811 37.196 9.05874 37.2388V27.2245C9.07289 23.5351 4.88322 23.5066 4.88322 23.5066ZM4.55768 27.0251C4.55768 27.0251 5.30786 27.0393 5.93065 27.4382C6.66667 27.9083 7.45931 28.8627 7.45931 30.8285V36.7972C5.25125 35.9995 3.36873 34.518 2.06653 32.5949C1.21727 31.1846 1.17481 30.0735 1.38713 29.2616C1.68437 28.2217 2.6327 26.9111 4.55768 27.0251Z"
                 fill={color}
             />
         </SvgIcon>
-    );
-};
+    )
+}
 
-export default NSLogoPoweredBy;
+export default NSLogoPoweredBy

package/src/common/brand-components/icons/NSLogoStacked.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
 
 const NSLogoStacked = (props: SvgIconProps) => {
     return (
         <SvgIcon
             viewBox="0 0 155 108"
             fill="none"
+            data-testid="logo"
             xmlns="http://www.w3.org/2000/svg"
-            {...props}
-        >
-            <g clip-path="url(#clip0_11117_50399)">
+            {...props}>
+            <g clipPath="url(#clip0_11117_50399)">
                 <path
                     d="M145.803 20.6435C145.084 18.9662 144.039 17.4488 142.728 16.1793C139.943 13.5595 136.017 12.5391 132.31 13.472C128.604 14.4047 125.626 17.1622 124.411 20.7888C123.792 22.4814 123.475 24.2696 123.474 26.0719C123.474 33.9438 123.474 41.8201 123.474 49.7006C123.474 51.0214 123.474 51.0214 122.022 50.9554C122.022 50.7044 122.022 50.4271 122.022 50.1628C122.022 41.2608 122.022 32.3632 122.022 23.47C121.801 17.9191 125.172 12.8556 130.376 10.9226C131.004 10.703 131.648 10.5308 132.303 10.4075C132.936 10.2754 133.622 10.2225 134.256 10.1433C133.451 6.45834 126.746 2.21863 121.309 1.96768C115.508 1.82825 110.13 4.99786 107.439 10.1433C108.059 10.2225 108.667 10.2622 109.247 10.3678C114.641 11.2894 118.805 15.6226 119.515 21.0529C119.661 22.0412 119.736 23.0388 119.739 24.0379C119.739 32.7288 119.739 41.4193 119.739 50.1101C119.739 50.7968 119.58 51.0875 118.842 51.0081C118.102 50.929 118.182 50.7044 118.182 50.2159C118.182 47.4552 118.182 44.6948 118.182 41.9212C118.182 36.4532 118.182 30.9852 118.182 25.5172C118.228 22.3039 117.053 19.193 114.895 16.8132C112.342 14.0518 108.579 12.7501 104.866 13.3445C101.154 13.939 97.9845 16.3508 96.4194 19.7718C96.248 20.102 96.1026 20.4454 95.8652 20.9341C98.0359 8.85927 108.509 0.0553189 120.767 0.000259583C133.026 -0.0547998 143.577 8.65471 145.856 20.7095"
                     fill={props.color}
@@ -49,7 +49,7 @@ const NSLogoStacked = (props: SvgIconProps) => {
                 </clipPath>
             </defs>
         </SvgIcon>
-    );
-};
+    )
+}
 
-export default NSLogoStacked;
+export default NSLogoStacked