@nuskin/foundation-ui-components 1.0.0-cft-35.6 → 1.0.0-cft-35.7

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.0.0-cft-35.7](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.6...v1.0.0-cft-35.7) (2023-04-10)
+
+
+### Fix
+
+* increase test coverage ([91c79cc](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/91c79ccc2a07792ed94a232c6e77593e778cb6e1))
+* refactor component hierarchy and naming components ([107eda4](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/107eda443a56869deacdb47f822ce4af76b8ce17))
+* story book module fix ([9b77c79](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/9b77c79e3507a4f39342378f58d8c0aeb1882c96))
+
+### New
+
+* added new NsInputField ([6f6b4a6](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/6f6b4a6b0db776427e56bbf6d70885cef5660476))
+* CX130-109 Added common icon component and Cart icon ([6cda585](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/6cda58514e3821f886d6d952c8d73751d33e796d))
+
 # [1.0.0-cft-35.6](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.5...v1.0.0-cft-35.6) (2023-03-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/foundation-ui-components",
-  "version": "1.0.0-cft-35.6",
+  "version": "1.0.0-cft-35.7",
   "description": "It is a foundation library written in react, that provides commom components to all UI pages",
   "private": false,
   "main": "src/common/index.ts",
@@ -39,7 +39,7 @@
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "5.4.2",
     "@next/font": "13.2.4",
-    "@nuskin/foundation-theme": "1.0.0-cft-33.10",
+    "@nuskin/foundation-theme": "1.0.0-cft-33.12",
     "@types/jest": "^29.5.0",
     "framer-motion": "^10.8.5",
     "next": "13.2.4",

package/src/common/brand-components/{Brand.stories.tsx → NsBrand.stories.tsx}

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import BrandComponent from './BrandComponent';
+import NsBrandComponent from './NsBrandComponent';
 
 export default {
-    title: 'Components/Brand',
-    component: BrandComponent,
+    title: 'Components/NsBrandComponent',
+    component: NsBrandComponent,
     decorators: [
         (story) => (
             <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>
@@ -21,8 +21,8 @@ export default {
         size: '100px',
         variant: 'stacked',
     },
-} as ComponentMeta<typeof BrandComponent>;
+} as ComponentMeta<typeof NsBrandComponent>;
 
-export const Brand: ComponentStory<typeof BrandComponent> = (args) => (
-    <BrandComponent {...args} />
+export const Brand: ComponentStory<typeof NsBrandComponent> = (args) => (
+    <NsBrandComponent {...args} />
 );

package/src/common/brand-components/{BrandComponent.spec.tsx → NsBrandComponent.spec.tsx}

@@ -1,4 +1,4 @@
-import BrandComponent from './BrandComponent';
+import BrandComponent from './NsBrandComponent';
 import { render } from '@testing-library/react';
 
 describe('checking brand component', () => {
@@ -37,12 +37,11 @@ describe('checking brand component', () => {
         expect(paths.length).toBe(17);
     });
 
-    /*
-    xit('6. should render BrandComponent with dummy variant', () => {
-        const { getByTestId } = render(<BrandComponent variant="dummy" />);
+    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/{BrandComponent.tsx → NsBrandComponent.tsx}

@@ -4,8 +4,8 @@ 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 LogoContainer from './NsBrandContanier.styled';
+import { NsBrandComponentProps } from './types';
 
 const VariantMap = {
     stacked: NSLogoStacked,
@@ -15,7 +15,7 @@ const VariantMap = {
     poweredBy: NSLogoPoweredBy,
 };
 
-const BrandComponent = (props: PropsWithChildren<BrandComponentProps>) => {
+const NsBrandComponent = (props: PropsWithChildren<NsBrandComponentProps>) => {
     const { variant = 'stacked', size = '108px', color = 'primary' } = props;
     const renderBrand = useCallback(() => {
         const BrandComponent = VariantMap[variant || 'stacked'];
@@ -24,4 +24,4 @@ const BrandComponent = (props: PropsWithChildren<BrandComponentProps>) => {
     return <LogoContainer size={size}>{renderBrand()}</LogoContainer>;
 };
 
-export default BrandComponent;
+export default NsBrandComponent;

package/src/common/brand-components/{BrandContanier.styled.tsx → NsBrandContanier.styled.tsx}

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

package/src/common/brand-components/index.ts

@@ -1,2 +1,2 @@
-export { default } from './BrandComponent';
-export type { BrandComponentProps } from './types';
+export { default } from './NsBrandComponent';
+export type { NsBrandComponentProps } from './types';

package/src/common/brand-components/types.d.ts

@@ -1,11 +1,11 @@
-import { PaletteColorNames } from '@nuskin/foundation-theme/src/themes/types';
+import { FoundationTheme } from '@nuskin/foundation-theme';
 
-export type BrandComponentProps = {
+export type NsBrandComponentProps = {
     variant?: 'stacked' | 'horizontal' | 'poweredBy' | 'logomark' | 'wordmark';
     size?: string;
-    color?: PaletteColorNames;
-}
+    color?: FoundationTheme.PaletteColors;
+};
 
 export type SVGLogoProps = {
     color: string;
-}
+};

package/src/common/button/{Button.spec.tsx → NsButton.spec.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '../../../test-utils/index';
 import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
-import Button from './Button';
+import Button from './NsButton';
 
 const { palette } = nuskinTheme;
 

package/src/common/button/{Button.stories.tsx → NsButton.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Button from './Button';
+import NsButton from './NsButton';
 import { ShoppingCart } from '@mui/icons-material';
 
 export default {
-    title: 'Components/Button',
-    component: Button,
+    title: 'Components/NsButton',
+    component: NsButton,
     decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
     argTypes: {
         children: {
@@ -26,14 +26,14 @@ export default {
         variant: 'contained',
         fullWidth: false,
     },
-} as ComponentMeta<typeof Button>;
+} as ComponentMeta<typeof NsButton>;
 
-export const button: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+export const button: ComponentStory<typeof NsButton> = (args) => <NsButton {...args} />;
 
-export const IconOnlyButton: ComponentStory<typeof Button> = (args) => (
-    <Button {...args} iconOnly>
+export const IconOnlyButton: ComponentStory<typeof NsButton> = (args) => (
+    <NsButton {...args} iconOnly>
         <ShoppingCart />
-    </Button>
+    </NsButton>
 );
 
 IconOnlyButton.argTypes = {

package/src/common/button/NsButton.styled.tsx

@@ -0,0 +1,90 @@
+import { Button as MUIButton } from '@mui/material';
+
+import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+import { ButtonConfig } from '@nuskin/foundation-theme/src/themes/types/button';
+import { NsButtonProps } from './types';
+
+const {
+    getPaletteColor,
+    getButtonStateColor,
+} = ColorUtils;
+
+const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonConfig) => {
+    const { config } = theme || {};
+    return config?.components?.button?.[attribute] || '';
+};
+
+const StyledButton = styled(MUIButton)<NsButtonProps>`
+    gap: 10px;
+    border-radius: ${({ theme}) => getButtonConfig(theme, 'borderRadius')} || 0;
+    :focus {
+        border: 1px solid  ${({ theme}) => getButtonConfig(theme, 'focusColor')} !important;
+    }
+    :disabled {
+        background-color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabled')};
+        color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabledText')};
+    }
+    ${({ theme: { config }, size }) => {
+        return size === 'medium' ? config?.components?.button?.size?.medium?.padding : ''
+    }}
+    ${({ theme: { config}, size }) => {
+        return size === 'large' ? config?.components?.button?.size?.large?.padding : ''
+    }}
+    ${({ variant, theme, color = 'primary' }) => {
+        return variant === 'contained' ?
+            `
+                background-color: ${getPaletteColor(theme, color)};
+                :hover {
+                    background-color: ${getButtonStateColor(theme, color, 'hovered')};
+                }
+                :active {
+                    background-color: ${getButtonStateColor(theme, color, 'pressed')};
+                }
+                :focus {
+                    background-color: ${getButtonStateColor(theme, color, 'focused')};
+                }
+            `
+            : ''
+    }}
+  ${({ variant, theme, color = 'primary' }) =>
+        variant === 'outlined' &&
+        `
+            border-color: ${getPaletteColor(theme, color)};
+            color: ${getPaletteColor(theme, color)};
+            :hover {
+                border-color: ${getButtonStateColor(theme, color, 'hovered')};
+                color: ${getPaletteColor(theme, color)};
+            }
+            :active {
+                border-color: ${getButtonStateColor(theme, color, 'pressed')};
+                color: ${getPaletteColor(theme, color)};
+            }
+        `}
+  ${({ variant, theme, color = 'primary' }) =>
+        variant === 'text' &&
+        `
+            text-decoration: underline 1px !important;
+            text-underline-offset: 4px;
+            padding: 0;
+            min-width: auto;
+            background-color: transparent !important;
+            text-decoration-color: ${getPaletteColor(theme, color)};
+            color: ${getPaletteColor(theme, color)};
+            :hover {
+                color:  ${getButtonStateColor(theme, color, 'hovered')};
+                text-decoration-color:  ${getButtonStateColor(theme, color, 'hovered')};
+            }
+            :active {
+                color: ${getPaletteColor(theme, color)};
+                text-decoration-color:  ${getButtonStateColor(theme, color, 'pressed')};
+            }
+        `}
+  ${({ iconOnly }) =>
+        iconOnly &&
+        `
+            padding: 10px;
+            min-width: unset;
+        `}
+`;
+
+export default StyledButton;

package/src/common/button/NsButton.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import StyledButton from './NsButton.styled';
+import { NsButtonProps } from './types';
+
+const NsButton = ({ children, ...props }: PropsWithChildren<NsButtonProps>) => {
+    return (
+        <StyledButton {...props} disableRipple>
+            {children}
+        </StyledButton>
+    );
+};
+
+export default NsButton;

package/src/common/button/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Button';
-export type { ButtonProps } from './types';
+export { default } from './NsButton';
+export type { NsButtonProps } from './types';

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

@@ -1,6 +1,6 @@
 import { ButtonProps as MUIButtonProps } from '@mui/material';
 
-export type ButtonProps = Pick<
+export type NsButtonProps = Pick<
   MUIButtonProps,
   | 'size'
   | 'variant'

package/src/common/card/stories/NsBgCard.stories.tsx

@@ -3,7 +3,7 @@ import NsBgCard from '../NsBgCard';
 
 export default {
     component: NsBgCard,
-    title: 'Components/Card/NsBgCard',
+    title: 'Components/NsCard/NsBgCard',
     argTypes: {},
     decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
 } as ComponentMeta<typeof NsBgCard>;

package/src/common/card/stories/NsBrandProductCard.stories.tsx

@@ -3,7 +3,7 @@ import NsBrandProductCard from '../NsBrandProductCard';
 
 export default {
     component: NsBrandProductCard,
-    title: 'Components/Card/NsBrandProductCard',
+    title: 'Components/NsCard/NsBrandProductCard',
     argTypes: {},
     decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
 } as ComponentMeta<typeof NsBrandProductCard>;

package/src/common/carousal/IconWrapper.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { styled } from '@nuskin/foundation-theme';
 import { Box } from '@mui/material';
-
+// TODO: check if this can be updated with NsIcon
 type IconWrapperProps = PropsWithChildren<{
     onClick(): void;
     className?: string;

package/src/common/cart-icon/NsCartIcon.spec.tsx

@@ -0,0 +1,23 @@
+import { NsCartIcon } from './';
+import { render } from '../../../test-utils';
+
+describe('NsCartIcon', () => {
+    it('renders Cart icon when item count is 0', () => {
+        const { getByTestId } = render(<NsCartIcon itemCount={0} color="primary" size="large" />);
+        const cartIcon = getByTestId('cart-icon');
+        expect(cartIcon).toBeInTheDocument();
+    });
+
+    it('renders Cart Badge icon when item count is greater than 0', () => {
+        const { getByTestId } = render(<NsCartIcon itemCount={5} color="primary" size="large" />);
+        const cartBadgeIcon = getByTestId('cart-badge-icon');
+        expect(cartBadgeIcon).toBeInTheDocument();
+    });
+
+    it('renders item count badge when item count is greater than 0', () => {
+        const { getByTestId } = render(<NsCartIcon itemCount={5} color="primary" size="large" />);
+        const itemCountBadge = getByTestId('item-count-badge');
+        expect(itemCountBadge).toBeInTheDocument();
+        expect(itemCountBadge.textContent).toBe('5');
+    });
+});

package/src/common/cart-icon/NsCartIcon.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { NsCartIcon } from './';
+
+export default {
+    title: 'Components/NsCartIcon',
+    component: NsCartIcon,
+    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+    argTypes: {
+        itemCount: { control: 'number', defaultValue: 1 },
+        size: { control: 'select', options: ['small', 'medium', 'large', 'xLarge'] },
+        color: {
+            control: 'select',
+            options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
+        },
+    },
+    args: {
+        itemCount: 1,
+        color: 'primary',
+        size: 'large',
+    },
+} as ComponentMeta<typeof NsCartIcon>;
+
+export const CartIcon: ComponentStory<typeof NsCartIcon> = (args) => <NsCartIcon {...args} />;

package/src/common/cart-icon/NsCartIcon.styled.ts

@@ -0,0 +1,40 @@
+import { Theme } from '@mui/material';
+import { styled, FoundationTheme } from '@nuskin/foundation-theme';
+import { NsIconSizeType } from '../icon/types';
+
+type ItemCountParams = {
+    size: NsIconSizeType;
+    color: FoundationTheme.PaletteColors;
+    theme?: Theme;
+};
+
+export const CartIconContainer = styled.div`
+    position: relative;
+    display: inline-block;
+`;
+
+const BadgeFontSizeMap = {
+    small: '8px',
+    medium: '10px',
+    large: '12px',
+    xLarge: '14px',
+};
+
+const BadgePosMap = {
+    small: '-8px',
+    medium: '-6px',
+    large: '-4px',
+    xLarge: '-1px',
+};
+
+export const ItemCount = styled.span<ItemCountParams>`
+    color: ${({ color, theme }) => theme?.palette?.[color]?.main};
+    font-size: ${({ size }) => BadgeFontSizeMap[size]};
+    right: ${({ size }) => BadgePosMap[size]};
+    text-align: center;
+    font-weight: 600;
+    position: absolute;
+    width: 32px;
+    height: auto;
+    top: -4px;
+`;

package/src/common/cart-icon/NsCartIcon.tsx

@@ -0,0 +1,22 @@
+import { NsIcon } from '../icon';
+import { CartIconContainer, ItemCount } from './NsCartIcon.styled';
+import { NsCartIconProps } from './types';
+
+const NsCartIcon = ({ itemCount, size = 'large', color = 'primary' }: NsCartIconProps) => {
+    return (
+        <CartIconContainer>
+            {itemCount > 0 ? (
+                <NsIcon testId="cart-badge-icon" name="cartBadge" color={color} size={size} />
+            ) : (
+                <NsIcon testId="cart-icon" name="cart" color={color} size={size} />
+            )}
+            {itemCount > 0 && (
+                <ItemCount data-testid="item-count-badge" color={color} size={size}>
+                    {itemCount}
+                </ItemCount>
+            )}
+        </CartIconContainer>
+    );
+};
+
+export default NsCartIcon;

package/src/common/cart-icon/index.ts

@@ -0,0 +1,2 @@
+export { default as NsCartIcon } from './NsCartIcon';
+export type { NsCartIconProps } from './types';

package/src/common/cart-icon/types.d.ts

@@ -0,0 +1,7 @@
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+export type NsCartIconProps = {
+    itemCount: number;
+    size?: 'small' | 'medium' | 'large' | 'xLarge';
+    color?: FoundationTheme.PaletteColors;
+};

package/src/common/checkbox/NsCheckbox.stories.tsx

@@ -11,7 +11,7 @@ import NsCheckbox from './NsCheckbox';
 
 // In this case, we're only passing the label prop.
 export default {
-    title: 'Components',
+    title: 'Components/NsCheckbox',
     component: NsCheckbox,
     decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
     argTypes: {

package/src/common/flag/NsFlag.stories.tsx

@@ -4,7 +4,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import NsFlag from './NsFlag';
 
 export default {
-    title: 'Components',
+    title: 'Components/NsFlag',
     component: NsFlag,
     decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
     argTypes: {

package/src/common/flag/NsFlag.styled.tsx

@@ -5,14 +5,13 @@
  */
 
 import { Theme } from '@mui/material';
-import { styled } from '@nuskin/foundation-theme';
-import { PaletteColorNames } from '@nuskin/foundation-theme/src/themes/types';
+import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 
 import { NsFlagSize } from './types';
 
 type NsFlagThemeParams = {
     $size: NsFlagSize;
-    $bgColor?: PaletteColorNames;
+    $bgColor?: FoundationTheme.PaletteColors;
     theme?: Theme;
 };
 
@@ -34,15 +33,22 @@ const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
     return sizeValue / FLAG_SCALE_VALUE;
 };
 
-const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme }: NsFlagThemeParams) => {
-    return `${makeFlagSize({ $size })}px solid ${theme?.palette?.[$bgColor].main}`;
+const {
+    getPaletteColor,
+} = ColorUtils;
+
+const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme}: NsFlagThemeParams) => {
+    if (theme) {
+        return `${makeFlagSize({ $size })}px solid ${getPaletteColor(theme, $bgColor)}`;
+    }
+    return '';
 };
 
 export const StyledFlag = styled('span')<NsFlagThemeParams>`
     min-width: 29px;
     height: ${getFlagHeight}px;
-    color: ${({ $bgColor = 'accentColorA', theme }) => theme?.palette?.[$bgColor].contrastText};
-    background: ${({ $bgColor = 'accentColorA', theme }) => theme?.palette?.[$bgColor].main};
+    color: ${({ $bgColor = 'accentColorA', theme }) => getPaletteColor(theme, $bgColor, 'contrastText')};
+    background: ${({ $bgColor = 'accentColorA', theme }) => getPaletteColor(theme, $bgColor)};
     position: relative;
     padding: 0 15px;
     display: inline-grid;

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

@@ -4,7 +4,7 @@
  * @description Extend the FlagProps interface to include message, color and size prop.
  */
 
-import { PaletteColorNames } from '@nuskin/foundation-theme/src/themes/types';
+import { FoundationTheme } from '@nuskin/foundation-theme';
 
 export type NsFlagSize = 'small' | 'medium' | 'large';
 
@@ -14,5 +14,5 @@ export type NsFlagProps = {
     message?: string;
     testId?: string;
     /** Displays background color for flag container */
-    color?: PaletteColorNames;
+    color?: FoundationTheme.PaletteColors;
 };

package/src/common/icon/IconMap.ts

@@ -0,0 +1,23 @@
+import Cart from './icons/Cart';
+import CartBadge from './icons/CartBadge';
+import InfoFilled from './icons/InfoFilled';
+import InfoOutlined from './icons/InfoOutlined';
+import CheckShield from './icons/CheckShield';
+import CheckVerified from './icons/CheckVerified';
+import SuccessIcon from './icons/SuccessIcon';
+import ErrorIcon from './icons/ErrorIcon';
+import TrashIcon from './icons/TrashIcon';
+
+const IconVariants = {
+    cart: Cart,
+    cartBadge: CartBadge,
+    checkShield: CheckShield,
+    checkVerified: CheckVerified,
+    error: ErrorIcon,
+    infoFilled: InfoFilled,
+    infoOutlined: InfoOutlined,
+    success: SuccessIcon,
+    trash: TrashIcon,
+};
+
+export default IconVariants;

package/src/common/icon/NsIcon.spec.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '../../../test-utils';
+import { NsIcon } from './';
+
+describe('NsIcon Component', () => {
+    it('renders cartBadge icon with custom size and color', () => {
+        const { getByTestId } = render(<NsIcon name="cart" size="medium" color="secondary" />);
+        const icon = getByTestId('icon');
+        const svgIcon = icon.querySelector('svg');
+        expect(svgIcon).toHaveClass('MuiSvgIcon-colorSecondary');
+        expect(svgIcon).toHaveClass('MuiSvgIcon-fontSizeMedium');
+    });
+
+    it('renders with custom testId', () => {
+        const { getByTestId } = render(<NsIcon name="cart" testId="custom-icon" />);
+        const icon = getByTestId('custom-icon');
+        expect(icon).toBeInTheDocument();
+        expect(icon.innerHTML).toContain('svg');
+    });
+
+    it('throws an error if invalid icon name is provided', () => {
+        const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+        // @ts-ignore
+        const { queryByTestId } = render(<NsIcon name="invalidIcon" />);
+        expect(queryByTestId('icon')).not.toBeInTheDocument();
+        expect(consoleErrorSpy).not.toHaveBeenCalled();
+        consoleErrorSpy.mockRestore();
+    });
+});

package/src/common/icon/NsIcon.stories.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { NsIcon } from './';
+
+export default {
+    title: 'Components/NsIcon',
+    component: NsIcon,
+    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+    argTypes: {
+        size: { control: 'select', options: ['small', 'medium', 'large', 'xLarge'] },
+        name: {
+            control: 'select',
+            options: [
+                'cart',
+                'cartBadge',
+                'checkShield',
+                'checkVerified',
+                'error',
+                'infoFilled',
+                'infoOutlined',
+                'success',
+                'trash',
+            ],
+        },
+        color: {
+            control: 'select',
+            options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
+        },
+    },
+    args: {
+        size: 'large',
+        name: 'checkShield',
+        color: 'success',
+    },
+} as ComponentMeta<typeof NsIcon>;
+
+export const Icon: ComponentStory<typeof NsIcon> = (args) => <NsIcon {...args} />;