@nuskin/foundation-ui-components 1.33.0-1253-feature.3 → 2.0.0

package/src/common/autocomplete/stories/NsAutocomplete.stories.tsx

@@ -1,78 +0,0 @@
-import React, { ReactElement, SyntheticEvent } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { NsAutocomplete } from '../';
-import { NsIcon } from '../../icon';
-import { AutocompleteMockList } from '../mock/MockData';
-import { NoCloseAutoComplete } from './NoCloseAutoComplete';
-import { RenderAutoComplete } from './RenderAutoComplete';
-
-type ComponentType = typeof NsAutocomplete;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Inputs/NsAutocomplete',
-    component: NsAutocomplete,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        children: {
-            control: 'text',
-        },
-        options: {
-            description: 'An array of objects representing the available options for the autocomplete.',
-        },
-        OptionsUI: {
-            description: '(optional): A custom component to render each option in the dropdown.',
-        },
-        loading: {
-            description: '(optional): A boolean indicating whether the autocomplete is in a loading state.',
-        },
-        noOptionsText: { description: '(optional): The text to display when there are no options available.' },
-        onSelect: { description: '(optional): A callback function to be called when an option is selected.' },
-        onChange: { description: '(optional): A callback function to be called when the input value changes.' },
-        clear: { description: '(optional): An object containing properties for the clear button.' },
-        seeMore: { description: '(optional): An object containing properties for the "see more" button.' },
-        placeholder: { description: '(optional): The placeholder text for the input field.' },
-        className: { description: '(optional): Additional CSS class name(s) for the autocomplete component.' },
-        iconStart: {
-            description: '(optional): An icon or React node to be displayed at the start of the input field.',
-        },
-        iconEnd: { description: '(optional): An icon or React node to be displayed at the end of the input field.' },
-        inputValue: { description: ' The current value of the input field.' },
-        value: { description: ': The currently selected option.' },
-        isFilterEnabled: { description: ' (optional): A boolean indicating whether filtering of options is enabled.' },
-    },
-    args: {
-        options: AutocompleteMockList,
-        seeMore: {
-            text: 'See More Results',
-            show: true,
-            onSeeMore: () => {
-                throw new Error('Function not implemented.');
-            },
-        },
-        clear: {
-            text: 'Clear Recent Searches',
-            show: true,
-            onClear: () => {
-                throw new Error('Function not implemented.');
-            },
-        },
-        iconStart: (<NsIcon name="search" />) as ReactElement,
-        iconEnd: (<NsIcon name="roundedClose" size="small" colorOverride="#F5F5F5" />) as ReactElement,
-        placeholder: 'Search',
-        fullWidth: false,
-        onKeypress: (e: SyntheticEvent) => console.log(e),
-    },
-} as MetaStory;
-
-export const Autocomplete: Story = {
-    render: RenderAutoComplete,
-};
-
-export const WithoutClose: Story = {
-    render: NoCloseAutoComplete,
-};

package/src/common/autocomplete/stories/RenderAutoComplete.tsx

@@ -1,60 +0,0 @@
-import { NsAutocompleteProps, OptionsProps } from '../types';
-import { IconButton } from '@mui/material';
-import React, { useState, SyntheticEvent } from 'react';
-
-import { NsAutocomplete } from '..';
-import { NsIcon } from '../../icon';
-import { OptionUiComponent } from '../mock/MockUI';
-
-const PAGE_SIZE = 6;
-
-export const RenderAutoComplete = (args: NsAutocompleteProps) => {
-    const [selectedOption, setSelectedOption] = useState<string | OptionsProps | null>(null);
-    const [searchTerms, setSearchTerms] = useState<string>('');
-    const [pageNo, setPageNo] = useState(PAGE_SIZE);
-
-    const onSeeMoreHandler = () => {
-        setPageNo(PAGE_SIZE + PAGE_SIZE);
-    };
-
-    const AutoCompleteProps = {
-        ...args,
-        seeMore: {
-            ...args.seeMore,
-            onSeeMore: onSeeMoreHandler,
-        },
-    } as NsAutocompleteProps;
-
-    const onChange = (event: SyntheticEvent<Element, Event>, value: string | OptionsProps | null) => {
-        setSelectedOption(value);
-        setSearchTerms((value = ''));
-    };
-
-    const onInputChange = (event: SyntheticEvent<Element, Event>, newValue: string) => {
-        setSearchTerms(newValue);
-    };
-
-    const onInputClear = () => {
-        setSelectedOption(null);
-        setSearchTerms('');
-    };
-
-    return (
-        <div>
-            <NsAutocomplete
-                {...AutoCompleteProps}
-                options={args.options.slice(0, pageNo)}
-                onInputChange={onInputChange}
-                onChange={onChange}
-                OptionsUI={OptionUiComponent}
-                iconEnd={
-                    <IconButton onClick={onInputClear}>
-                        <NsIcon name="roundedClose" size="xLarge" colorOverride="#F5F5F5" />
-                    </IconButton>
-                }
-                value={selectedOption}
-                inputValue={searchTerms}
-            />
-        </div>
-    );
-};

package/src/common/autocomplete/types.d.ts

@@ -1,67 +0,0 @@
-import { AutocompleteChangeDetails, AutocompleteChangeReason, ComponentsProps } from '@mui/material';
-import React, { HTMLAttributes, SyntheticEvent } from 'react';
-import { AdditionalProps } from '../common.types';
-
-import { NsIconNameType } from '../icon';
-
-export type NsAutocompleteProps = {
-    id?: string;
-    options: OptionsProps[];
-    loading?: boolean;
-    OptionsUI: React.ComponentType<any>;
-    noOptionsText?: string;
-    /*
-        Callback fired when the input value changes.
-        event The event source of the callback.
-        value The new value of the text input.
-        reason Can be: "input" (user input), "reset" (programmatic change), "clear".
-     */
-    onInputChange(event: SyntheticEvent, value: string, reason: string): void;
-    onKeypress?:(event:SyntheticEvent) => void;
-    /*
-        event The event source of the callback.
-        value The new value of the component.
-        reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
-     */
-    onChange(
-        event: SyntheticEvent<Element, Event>,
-        value: string | OptionsProps | null,
-        reason: AutocompleteChangeReason,
-        details?: AutocompleteChangeDetails<OptionsProps> | undefined
-    ): void;
-    onFocus?:() => void;
-    clear?: {
-        text?: string;
-        show?: boolean; //default to false
-        onClear: () => void;
-        recentSearchText?: string;
-    };
-    seeMore?: {
-        text?: string;
-        show?: boolean; //default to false
-        onSeeMore: () => void;
-    };
-    placeholder?: string;
-    className?: string;
-    iconStart?: string | React.ReactNode;
-    iconEnd?: string | React.ReactNode;
-    inputValue: string;
-    value: string | OptionsProps | null;
-    isFilterEnabled?: boolean;
-    fullWidth?:boolean
-} & AdditionalProps;
-
-export type ListUiProps = {
-    option: OptionsProps;
-};
-
-export type OptionsProps = {
-    id: string;
-    group?: string;
-    value: string;
-    icon?: NsIconNameType;
-    image?: string;
-    groupBgColor?: string;
-};
-
-export type ComponentBoxProps = ComponentsProps & HTMLAttributes<HTMLElement>;

package/src/common/banner/NsBanner.spec.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { NsBanner } from '@/common/';
-import { ImageData1 } from '../card/fixtures/ImageData1';
-
-describe('Hero component', () => {
-    const childText = 'Welcome to My Website';
-    it('1. renders banner image and title', () => {
-        const { getByAltText, getByText } = render(
-            <NsBanner image={ImageData1}>
-                <h1>{childText}</h1>
-            </NsBanner>
-        );
-        const childElement = getByText(childText);
-        const imageElement = getByAltText(ImageData1.selected?.altText || '');
-        expect(childElement).toBeInTheDocument();
-        expect(imageElement).toBeInTheDocument();
-    });
-    it('2. renders banner image and title without altText', () => {
-        const { getByAltText } = render(
-            <NsBanner image={ImageData1}>
-                <h1>{childText}</h1>
-            </NsBanner>
-        );
-        const imageElement = getByAltText(ImageData1.selected?.altText || '');
-        expect(imageElement).toBeInTheDocument();
-    });
-});

package/src/common/banner/NsBanner.stories.tsx

@@ -1,47 +0,0 @@
-/**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsBanner.stories.tsx
- * @description NsBanner component.
- */
-
-import React, { ReactElement } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { NsBanner, NsButton, NsTypography } from '../';
-import { ImageData1 } from '../card/fixtures/ImageData1';
-
-type ComponentType = typeof NsBanner;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/NsBanner',
-    component: NsBanner,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        children: {
-            control: 'text', // use the text control to edit children prop
-        },
-    },
-    args: {
-        image: ImageData1,
-        altText: 'NsBanner',
-        alignment: 'center',
-        justify: 'start',
-        children: (
-            <div>
-                <NsTypography className="w-80" variant="h1" colorOverride="#000000">
-                    Limited time offers on LumiSpa iO cleansers and bundles!
-                </NsTypography>
-                <NsTypography variant="body-m" className="my-5" colorOverride="#000000">
-                    Learn more about what I do and how I can help you
-                </NsTypography>
-                <NsButton variant="contained">Contact me</NsButton>
-            </div>
-        ) as ReactElement,
-    },
-} as MetaStory;
-
-export const DefaultNsBanner: Story = {};

package/src/common/banner/NsBanner.styled.tsx

@@ -1,24 +0,0 @@
-import { styled } from '@nuskin/foundation-theme';
-import { AlignmentType } from './types.d';
-
-export const StyledBanner = styled.section`
-    position: relative;
-    display: flex;
-    justify-content: space-evenly;
-    img {
-        width: 100%;
-        object-fit: cover;
-        height: auto;
-    }
-`;
-
-export const StyledHeroText = styled.div<{ $justify: AlignmentType; $alignment: AlignmentType }>`
-    height: 100%;
-    display: flex;
-    width: 100%;
-    position: absolute;
-    top: 0;
-    justify-content: ${({ $justify }) => $justify};
-    align-items: ${({ $alignment }) => $alignment};
-    text-align: left;
-`;

package/src/common/banner/NsBanner.tsx

@@ -1,32 +0,0 @@
-/**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsBanner.tsx
- * @description NsBanner component with a image background
- */
-
-import React, { PropsWithChildren, ReactElement } from 'react';
-
-import { getBasicDATWidthHeight } from '../image/bynder-util';
-import { BynderMedia } from '../image/BynderMedia';
-import { StyledBanner, StyledHeroText } from './NsBanner.styled';
-import { NsBannerProps } from './types.d';
-
-const NsBanner = (props: PropsWithChildren<NsBannerProps>): ReactElement => {
-    const { children, image, alignment = 'center', justify = 'start', className = '', additionalProps = {} } = props;
-
-    return (
-        <StyledBanner className={className}>
-            <BynderMedia
-                className="image"
-                imageDetail={image}
-                {...additionalProps}
-                suffix={getBasicDATWidthHeight(1100, 600, 'scale')}
-            />
-            <StyledHeroText $alignment={alignment} $justify={justify}>
-                <div className="mx-14">{children}</div>
-            </StyledHeroText>
-        </StyledBanner>
-    );
-};
-
-export default NsBanner;

package/src/common/banner/index.ts

@@ -1,2 +0,0 @@
-export { default as NsBanner } from './NsBanner';
-export type { NsBannerProps } from './types.d';

package/src/common/banner/types.d.ts

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { AdditionalProps } from '../common.types';
-import { BynderImageDataType } from '../image/types';
-
-export type AlignmentType = 'start' | 'center' | 'end';
-
-export type NsBannerProps = {
-    children: React.ReactNode;
-    image: BynderImageDataType;
-    alignment?: AlignmentType;
-    justify?: AlignmentType;
-    className?: string;
-} & AdditionalProps;

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

@@ -1,26 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { NsBrandComponent } from './';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-
-type ComponentType = typeof NsBrandComponent;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Data Display/NsBrandComponent',
-    component: NsBrandComponent,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        size: { control: 'text', defaultValue: '100px' },
-        variant: {
-            control: 'select',
-            options: ['stacked', 'horizontal', 'logomark', 'wordmark', 'poweredBy'],
-        },
-    },
-    args: {
-        size: '100px',
-        variant: 'stacked',
-    },
-} as MetaStory;
-
-export const Brand: Story = {};

package/src/common/brand-components/NsBrandComponent.spec.tsx

@@ -1,47 +0,0 @@
-import BrandComponent from './NsBrandComponent';
-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);
-    });
-
-    it('6. should render BrandComponent with dummy variant', () => {
-        const { getByTestId } = render(<BrandComponent />);
-        const svg = getByTestId('logo');
-        const paths = svg.querySelectorAll('path');
-        expect(paths.length).toBe(8);
-    });
-
-});

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

@@ -1,33 +0,0 @@
-import React, {
-    PropsWithChildren,
-    ReactElement,
-    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 './NsBrandContainer.styled';
-import { NsBrandComponentProps } from './types.d';
-
-const VariantMap = {
-    stacked: NSLogoStacked,
-    horizontal: NSLogoHorizontal,
-    wordmark: NSLogoWordMark,
-    logomark: NSLogoMark,
-    poweredBy: NSLogoPoweredBy,
-};
-
-const NsBrandComponent = (props: PropsWithChildren<NsBrandComponentProps>):ReactElement => {
-    const { variant = 'stacked', size = '108px', color = 'primary' } = props;
-    const renderBrand = useCallback(() => {
-        const BrandComponent = VariantMap[variant];
-        // [Todo - Add neutral as FoundationTheme.PaletteColor]
-        return <BrandComponent color={color as any} />;
-    }, [color, variant]);
-    return <LogoContainer size={size}>{renderBrand()}</LogoContainer>;
-};
-
-export default NsBrandComponent;

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

@@ -1,10 +0,0 @@
-import { styled } from '@nuskin/foundation-theme';
-
-const NsBrandContainer = styled.div<{ size: string }>`
-  svg {
-    font-size: ${({ size }) => size};
-    height: auto;
-  }
-`;
-
-export default NsBrandContainer;

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

@@ -1,84 +0,0 @@
-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,70 +0,0 @@
-/* eslint-disable max-len */
-
-import { ReactElement } from 'react';
-
-import {
-    SvgIcon,
-    SvgIconProps,
-} from '@mui/material';
-
-const NSLogoHorizontal = (props: SvgIconProps):ReactElement => {
-    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