@nuskin/foundation-ui-components 1.0.0-cft-35.3 → 1.0.0-cft-35.5

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [1.0.0-cft-35.5](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.4...v1.0.0-cft-35.5) (2023-03-29)
+
+
+### Fix
+
+* Lint fixed ([929112c](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/929112ce66e5e5e86dcf3a64ee50288cfe244e27))
+
+### New
+
+* adding card component for showing brands ([e5aad64](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/e5aad64b0704f0054028d0eacc0ce603bbb814e4))
+* Brand and Live Tag ([4913a03](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/4913a031130fc28b3259038e6ab87d487690ac63))
+
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/foundation-ui-components",
-  "version": "1.0.0-cft-35.3",
+  "version": "1.0.0-cft-35.5",
   "description": "It is a foundation library written in react, that provides commom components to all UI pages",
   "private": false,
   "main": "src/common/index.ts",
@@ -27,7 +27,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6007",
     "test": "jest",
     "test:coverage": "yarn test --coverage",
     "test:watch": "jest --watch",
@@ -45,6 +45,9 @@
     "next": "13.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-material-ui-carousel": "^3.4.2",
+    "react-slick": "^0.29.0",
+    "slick-carousel": "^1.8.1",
     "typescript": "4.9.5"
   },
   "devDependencies": {
@@ -53,6 +56,7 @@
     "@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",
@@ -67,6 +71,7 @@
     "@types/node": "18.15.0",
     "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
+    "@types/react-slick": "^0.23.10",
     "@types/react-test-renderer": "^18.0.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "babel-jest": "^29.5.0",

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.spec.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', color = 'primary' } = props;
+    const renderBrand = useCallback(() => {
+        const BrandComponent = VariantMap[variant || 'stacked'];
+        return <BrandComponent color={color as any} />;
+    }, [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.spec.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

@@ -3,63 +3,63 @@
 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}>
-      <path
-        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
-        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
-        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
-        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
-        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
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M109.211 25H110.552V6H109.211V25Z"
-        fill={props.color}
-      />
-      <path
-        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
-        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>
-  )
+    return (
+        <SvgIcon
+            viewBox="0 0 135 30"
+            fill="none"
+            data-testid="logo"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}>
+            <path
+                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
+                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
+                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
+                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
+                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
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M109.211 25H110.552V6H109.211V25Z"
+                fill={props.color}
+            />
+            <path
+                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
+                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

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

@@ -1,5 +1,5 @@
 /* eslint-disable max-len */
-import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
 const NSLogoMark = (props: SvgIconProps) => {
     return (