@nuskin/foundation-ui-components 1.0.0-cft-35.13 → 1.0.0-develop.10

package/src/common/button/helper.ts

@@ -0,0 +1,82 @@
+type ContainedParams = {
+    backgroundColor: string;
+    textColor: string;
+    hovered: string;
+    pressed: string;
+    focused: string;
+};
+
+export function generateContainedStyle({
+    backgroundColor,
+    textColor,
+    hovered,
+    pressed,
+    focused,
+}: ContainedParams): string {
+    return `
+		background-color: ${backgroundColor};
+		color: ${textColor} !important;
+		&:hover {
+			background-color: ${hovered};
+		}
+		&:active {
+			background-color: ${pressed};
+		}
+		&:focus {
+			background-color: ${focused};
+		}
+	`;
+}
+type OutlinedParams = {
+    borderColor: string;
+    hovered: string;
+    pressed: string;
+    activeColor: string;
+};
+export function generateOutlinedStyle({ borderColor, hovered, pressed, activeColor }: OutlinedParams) {
+    return `
+		border-color: ${borderColor};
+		color: ${borderColor};
+		&:hover {
+				border-color: ${hovered};
+				color: ${borderColor};
+		}
+		&:active {
+				border-color: ${pressed};
+				color: ${activeColor};
+		}
+`;
+}
+
+type TextParams = {
+    underlineColor: string;
+    hovered: string;
+    pressed: string;
+};
+
+export function generateTextStyles({ underlineColor, hovered, pressed }: TextParams): string {
+    return `
+    text-decoration: underline 1px !important;
+    text-underline-offset: 4px;
+    padding: 0;
+    min-width: auto;
+    background-color: transparent !important;
+    text-decoration-color: ${underlineColor};
+    color: ${underlineColor};
+    &:hover {
+      color: ${hovered};
+      text-decoration-color: ${hovered};
+    }
+    &:active {
+      color: ${underlineColor};
+      text-decoration-color: ${pressed};
+    }
+  `;
+}
+
+export function generateIconOnlyStyles() {
+    return `
+			padding: 10px;
+	    min-width: unset;
+    `;
+}

package/src/common/button/index.ts

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

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

@@ -14,6 +14,9 @@ export type NsButtonProps = Pick<
   | 'onFocus'
   | 'aria-label'
   | 'className'
+  | 'startIcon'
+  | 'endIcon'
 > & {
   iconOnly?: boolean;
+  darkModeEnabled?: boolean;
 };

package/src/common/card/NsFfgCard.tsx

@@ -1,16 +1,22 @@
 import { NsNextImage, NsLink } from '../';
 import { NsFfgStyled } from './styled/NsFfgStyled';
-import { NsFfgCardProps } from './types';
+import { NsFfgCardProps } from './types.d';
 
-const NsFfgCard = ({ actionText, actionLink, text, topImageUrl, topImageAlt, additionalProps }: NsFfgCardProps) => {
+const NsFfgCard = ({ cardLink, text, topImageUrl, topImageAlt, additionalProps, cslp, onClick }: NsFfgCardProps) => {
     return (
-        <NsFfgStyled data-testid={additionalProps?.testid}>
-            <div className="top-image">
+        <NsFfgStyled
+            data-testid={additionalProps?.testid}
+            onClick={onClick}
+            className={additionalProps?.className ?? ''}
+        >
+            <header className="top-image">
                 <NsNextImage height={192} width={288} alt={topImageAlt} src={topImageUrl} />
-            </div>
-            <div className="body-text">{text}</div>
-            <NsLink className="action-link" href={actionLink}>
-                {actionText || 'LEARN MORE'}
+            </header>
+            <article className="body-text" {...cslp?.card_text}>
+                {text}
+            </article>
+            <NsLink className="action-link" href={cardLink.href} additionalProps={cslp?.action_text}>
+                {cardLink.title || 'LEARN MORE'}
             </NsLink>
         </NsFfgStyled>
     );

package/src/common/card/specs/NsFfgCard.spec.tsx

@@ -0,0 +1,33 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import NsFfgCard from '../NsFfgCard';
+
+describe('NsFfgCard component', () => {
+    const props = {
+        topImageUrl: 'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
+        topImageAlt: 'alt-text',
+        text: 'card text',
+        cardLink: { href: 'https://www.google.com', title: 'Test' },
+        onClick: jest.fn(),
+    };
+    it('1. renders with background image', () => {
+        render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card' }} />);
+        const card = screen.getByTestId('ffg-card');
+        expect(card).toHaveStyle(`
+          background-color: #fff;
+        `);
+    });
+    it('2. renders with cover size', () => {
+        render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card-1' }} />);
+        const card = screen.getByText(props.cardLink.title);
+        expect(card).toBeInTheDocument();
+    });
+    it('3. calls onclick', () => {
+        const handler = jest.fn();
+        const { getByTestId } = render(
+            <NsFfgCard {...props} onClick={handler} additionalProps={{ testid: 'ffg-card-1' }} />
+        );
+        const card = getByTestId('ffg-card-1');
+        fireEvent.click(card);
+        expect(handler).toHaveBeenCalled();
+    });
+});

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsBgCard } from '../';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBgCard;
 type Story = StoryObj<ComponentType>;
@@ -8,13 +8,11 @@ type MetaStory = Meta<ComponentType>;
 
 export default {
     component: NsBgCard,
-    title: 'Components/NsCard/NsBgCard',
+    title: 'Components/Containers/Card/NsBgCard',
     argTypes: {},
     args: {
         title: 'ageLOC LumiSpa',
         backgroundImageUrl: 'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
-        // brandImageUrl:
-        // 'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
     },
     decorators: [withCenterDecorator],
 } as MetaStory;

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsBrandProductCard } from '../';
 
 type ComponentType = typeof NsBrandProductCard;
@@ -8,7 +8,7 @@ type MetaStory = Meta<ComponentType>;
 
 export default {
     component: NsBrandProductCard,
-    title: 'Components/NsCard/NsBrandProductCard',
+    title: 'Components/Containers/Card/NsBrandProductCard',
     argTypes: {},
     decorators: [withCenterDecorator],
 } as MetaStory;

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

@@ -1,7 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsFfgCard } from '../';
 
 type ComponentType = typeof NsFfgCard;
@@ -10,31 +10,64 @@ type MetaStory = Meta<ComponentType>;
 
 export default {
     component: NsFfgCard,
-    title: 'Components/NsCard/NsFfgCard',
-    argTypes: {},
+    title: 'Components/Containers/Card/NsFfgCard',
+    argTypes: {
+        onClick: {
+            action: 'clicked',
+        },
+    },
     decorators: [withCenterDecorator],
 } as MetaStory;
 
+const text = `Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation,
+ we’re empowering children around the world with hope for a brighter future.`;
+const host = 'https://images.contentstack.io/v3/assets';
+
 export const Default: Story = {
     args: {
-        actionText: 'LEARN MORE',
-        actionLink: 'https://www.forceforgood.org/',
-        text: 'Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation, we’re empowering children around the world with hope for a brighter future.',
-        topImageUrl:
-            'https://images.contentstack.io/v3/assets/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp',
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'LEARN MORE',
+        },
+        text,
+        topImageUrl: `${host}/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp`,
+        topImageAlt: 'Force for Good Foundation',
+        additionalProps: {
+            testid: 'ffg-card',
+        },
+        onClick: () => {
+            console.log('onClick called');
+        },
+    },
+    play: async ({ canvasElement }: any) => {
+        const canvas = within(canvasElement);
+        userEvent.hover(canvas.getByTestId('ffg-card'));
+        userEvent.hover(canvas.getByRole('link'));
+        expect(canvas.getByText(text)).toBeInTheDocument();
+    },
+};
+const d = { count: -1 };
+export const OnClick: Story = {
+    args: {
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'LEARN MORE',
+        },
+        text,
+        topImageUrl: `${host}/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp`,
         topImageAlt: 'Force for Good Foundation',
         additionalProps: {
             testid: 'ffg-card',
         },
+        onClick: () => {
+            d.count = 1;
+            console.log('on click called');
+        },
     },
-    play: async ({ canvasElement }) => {
+    play: async ({ canvasElement }: any) => {
+        d.count = 0;
         const canvas = within(canvasElement);
-        await userEvent.hover(canvas.getByTestId('ffg-card'));
-        await userEvent.hover(canvas.getByRole('link'));
-        await expect(
-            canvas.getByText(
-                'Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation, we’re empowering children around the world with hope for a brighter future.'
-            )
-        ).toBeInTheDocument();
+        userEvent.click(canvas.getByTestId('ffg-card'));
+        expect(d.count).toEqual(1);
     },
 };

package/src/common/card/stories/{data.js → data.ts}

@@ -8,14 +8,6 @@ export const brandImages = [
     'https://media.nuskin.com/m/4bd7ab9b46bd456d/webimage-brand-pharmanex.png',
     'https://media.nuskin.com/m/501d638a8af80087/webimage-brand-ap24.png',
     'https://media.nuskin.com/m/f3a91129cbbae32/webimage-brand-nutricentials.png',
-    'https://media.nuskin.com/m/63a454ff90d038b4/webimage-brand-epoch.png',
-    'https://media.nuskin.com/m/3eb406f465d4b0fe/webimage-brand-sunright.png',
-    'https://media.nuskin.com/m/2d3276518912283b/webimage-brand-nu_colour.png',
-    'https://media.nuskin.com/m/3855d3836d920639/webimage-brand-nuskin180.png',
-    'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
-    'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
-    'https://media.nuskin.com/m/4bd7ab9b46bd456d/webimage-brand-pharmanex.png',
-    'https://media.nuskin.com/m/501d638a8af80087/webimage-brand-ap24.png',
 ];
 
 export const brandBackImages = [
@@ -28,34 +20,18 @@ export const brandBackImages = [
     'https://media.nuskin.com/m/4a1245a63c595262/webimage-brand-pharmanex-optweb.png',
     'https://media.nuskin.com/m/14a0fd6ef63e5dbb/webimage-brand-ap_24.png',
     'https://media.nuskin.com/m/298104036e885b40/webimage-brand-nutricentials.png',
-    'https://media.nuskin.com/m/549aa3e5184434d8/webimage-brand-epoch-optweb.png',
-    'https://media.nuskin.com/m/14e238d7599e1811/webimage-brand-sunright.png',
-    'https://media.nuskin.com/m/2543e79419276727/webimage-brand-nu_colour-optweb.png',
-    'https://media.nuskin.com/m/446c7a2aad513f58/webimage-brand-nu_skin_180-optweb.png',
-    'https://media.nuskin.com/m/42911c8b05600476/webimage-brand-ageloc-optweb.png',
-    'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
-    'https://media.nuskin.com/m/4a1245a63c595262/webimage-brand-pharmanex-optweb.png',
-    'https://media.nuskin.com/m/14a0fd6ef63e5dbb/webimage-brand-ap_24.png',
 ];
 
 export const brandTitles = [
     'Epoch',
     'Sunright',
-    'Nu Colour',
+    'Nu Color',
     '180 System',
     'ageLOC',
     'ageLOC LumiSpa',
     'Pharmanex',
     'AP 24',
     'Nutricentials',
-    'Epoch',
-    'Sunright',
-    'Nu Colour',
-    '180 System',
-    'ageLOC',
-    'ageLOC LumiSpa',
-    'Pharmanex',
-    'AP 24',
 ];
 export const brandEntries = brandTitles.map((title, index) => {
     return {

package/src/common/card/styled/NsFfgStyled.tsx

@@ -1,8 +1,6 @@
 import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
 
-const options = {};
-
 const Component = () => {
     return {
         backgroundClip: 'border-box',
@@ -10,9 +8,10 @@ const Component = () => {
         border: '1px solid #eff2f7',
         borderRadius: '1rem',
         boxShadow: '0 0.75rem 1.5rem rgba(18, 38, 63, .03)',
+        cursor: 'pointer',
         display: 'flex',
         flexDirection: 'column' as 'column', // https://github.com/cssinjs/jss/issues/1344
-        marginBottom: '2rem',
+        marginBottom: '16px',
         transition: 'all .2s ease',
         textAlign: 'center' as 'center',
         wordWrap: 'break-word' as 'break-word',
@@ -25,12 +24,15 @@ const Component = () => {
             },
         },
         '.body-text': {
-            padding: '0 1.5rem 3rem',
-            fontSize: '1rem',
+            padding: '0 1.5rem 4rem',
+            fontSize: '16px',
             color: '#8492a6',
         },
         '.top-image': {
-            padding: '1.5rem 3rem',
+            padding: '3rem 1.5rem',
+            img: {
+                maxWidth: '100%',
+            },
         },
         '.action-link': {
             color: '#3c4858',
@@ -41,4 +43,4 @@ const Component = () => {
         },
     };
 };
-export const NsFfgStyled = styled(Box, options)<{}>(Component);
+export const NsFfgStyled = styled(Box)(Component);

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

@@ -1,9 +1,12 @@
-import { AdditionalProps } from '../common.types';
-
+import { AdditionalProps, CslpTag } from '../common.types';
 export type NsFfgCardProps = AdditionalProps & {
     topImageUrl: string;
     topImageAlt: string;
     text: string;
-    actionLink: string;
-    actionText?: string;
+    cardLink: { href: string; title: string };
+    onClick(): void;
+    cslp?: {
+        card_text: CslpTag;
+        action_text: CslpTag;
+    };
 };

package/src/common/carousal/NsScrollingCarousal.tsx

@@ -0,0 +1,61 @@
+import React, { useMemo } from 'react';
+import Slider from 'react-slick';
+import { NsScrollingCarousalProps } from '../';
+import { styled } from '@nuskin/foundation-theme';
+
+const options = {
+    shouldForwardProp: (prop: string) => prop !== 'dotsBottomPixel',
+};
+
+const StyledDiv = styled(
+    'div',
+    options
+)<{
+    dotsBottomPixel?: number;
+}>(({ dotsBottomPixel }) => {
+    return {
+        '.slick-dots': {
+            zIndex: 9,
+            bottom: `${dotsBottomPixel ?? -25}px`,
+            opacity: '0.5',
+        },
+    };
+});
+
+const NsScrollingCarousal = ({
+    slides,
+    scrollSeconds,
+    stillSeconds,
+    renderSlide,
+    settings,
+    dotsBottomPixel,
+    additionalProps,
+}: NsScrollingCarousalProps) => {
+    const defaultSettings = useMemo(() => {
+        return {
+            ...settings,
+            autoplay: true,
+            autoplaySpeed: stillSeconds * 1000 || 2000, // autoplaySpeed = delay between scroll in milliseconds
+            accessibility: true,
+            adaptiveHeight: true,
+            arrows: true,
+            draggable: true,
+            dots: true,
+            infinite: true,
+            speed: scrollSeconds * 1000 || 500, // speed = animation speed in milliseconds
+            slidesToShow: 1,
+            slidesToScroll: 1,
+            swipeToSlide: true,
+        };
+    }, [stillSeconds, scrollSeconds, settings]);
+    return (
+        <StyledDiv
+            dotsBottomPixel={dotsBottomPixel}
+            data-testid={additionalProps?.testid ?? 'scrolling-carousal-test-id'}
+        >
+            <Slider {...defaultSettings}>{slides.map(renderSlide)}</Slider>
+        </StyledDiv>
+    );
+};
+
+export default NsScrollingCarousal;

package/src/common/carousal/index.ts

@@ -1,2 +1,5 @@
 export { default as NsCarousal } from './NsCarousal';
+export { default as NsScrollingCarousal } from './NsScrollingCarousal';
 export { default as NsDefaultCarousalSettings } from './slickSetting';
+
+export type { NsCarousalProps, NsScrollingCarousalProps } from './types.d';

package/src/common/carousal/{tests → specs}/NsCarousal.spec.tsx

@@ -1,5 +1,5 @@
-import { render, screen, fireEvent } from '../../../../test-utils';
-import NsCarousal from '../NsCarousal';
+import { render, screen, fireEvent } from '@/test-utils/index';
+import { NsCarousal } from '@/common/';
 
 const mockEntries = [
     { id: 1, title: 'First entry' },

package/src/common/carousal/specs/NsScrollingCarousal.spec.tsx

@@ -0,0 +1,61 @@
+import { render, screen, fireEvent } from '@/test-utils/index';
+import { NsScrollingCarousal } from '@/common/';
+
+const mockEntries = [
+    { id: 1, title: 'First entry' },
+    { id: 2, title: 'Second entry' },
+    { id: 3, title: 'Third entry' },
+    { id: 4, title: 'Fourth entry' },
+    { id: 5, title: 'Fifth entry' },
+];
+
+const mockRenderEntry = (entry: any, index: number) => {
+    return <div key={index}>{entry.title}</div>;
+};
+const mockSettings = {
+    slidesToShow: 2,
+    slidesToScroll: 1,
+};
+const testId = 'scrolling-carousal';
+describe('NsScrollingCarousal', () => {
+    it('should have slides', () => {
+        render(
+            <NsScrollingCarousal
+                slides={mockEntries}
+                renderSlide={mockRenderEntry}
+                settings={mockSettings}
+                scrollSeconds={1}
+                stillSeconds={9}
+                additionalProps={{
+                    testid: testId,
+                }}
+            />
+        );
+        const el = screen.getAllByText(mockEntries[0].title);
+        expect(el).toHaveLength(2);
+    });
+
+    it('should change slides when clicking on prev or next buttons', () => {
+        const { container } = render(
+            <NsScrollingCarousal
+                slides={mockEntries}
+                renderSlide={mockRenderEntry}
+                settings={mockSettings}
+                scrollSeconds={1}
+                stillSeconds={9}
+            />
+        );
+
+        let currentSlide = container.querySelector('.slick-slide.slick-current');
+        expect(currentSlide!.attributes['data-index' as any].value).toEqual('0');
+
+        /* this is library's button, not our button, it is used for changing slides,
+      clicking svg is not making any slide change in this test */
+        const nextButton = screen.getByRole('button', { name: /next/i });
+        fireEvent.click(nextButton);
+
+        let slickTrack = container.querySelector('.slick-track');
+        currentSlide = slickTrack!.querySelector('.slick-slide.slick-current');
+        expect(currentSlide!.attributes['data-index' as any].value).toEqual('1');
+    });
+});

package/src/common/carousal/stories/NSCarousal.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { NsCarousal } from '../';
+import { NsCarousal } from '@/common/';
 import { brandEntries } from '../../card/stories/data';
 import { RenderBrand } from '../RenderBrand';
 import settings from '../slickSetting';
@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsCarousal/Brand',
+    title: 'Components/Containers/NsCarousal/Brand',
     component: NsCarousal,
     argTypes: {},
 } as MetaStory;

package/src/common/carousal/stories/NsScrollingCarousal.stories.tsx

@@ -0,0 +1,52 @@
+/**
+ * NsScrollingText.stories.tsx
+ * @description NsScrollingText component.
+ */
+
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsScrollingCarousal, NsTextStrip } from '@/common/';
+
+type ComponentType = typeof NsScrollingCarousal;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export const renderSlide = (slide: any, i: number) => <NsTextStrip key={i} {...slide} />;
+
+export const slides = [
+    {
+        text: 'Hello Nike App',
+        description: 'Download the app to access everything Nike',
+        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Get Your Great' },
+        alignment: 'center',
+    },
+    {
+        text: 'New Styles on Sale: Up to 40% Off',
+        // description: 'Download the app to access everything Nike',
+        link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'Shop All Our New Markdowns' },
+        alignment: 'center',
+    },
+    {
+        text: 'Free Delivery',
+        // description: 'Applies to orders of ₹ 14 000.00 or more. ',
+        // link: { href: 'https://www.nike.com/in/help/a/shipping-delivery-gs', title: 'View Details' },
+        alignment: 'center',
+    },
+];
+export default {
+    title: 'Components/Containers/NsCarousal/NsScrollingCarousal',
+    component: NsScrollingCarousal,
+    decorators: [withCenterDecorator],
+    argTypes: {},
+    args: {
+        slides,
+        renderSlide,
+        stillSeconds: 3,
+        scrollSeconds: 1,
+        additionalProps: {
+            testid: 'scrolling-carousal',
+        },
+    },
+} as MetaStory;
+
+export const ScrollingText: Story = {};

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { AdditionalProps } from '../common.types';
+
+export type NsCarousalProps<T = any> = {
+    entries: T[];
+    // eslint-disable-next-line no-unused-vars
+    renderEntry(entry: T, index: number): ReactNode;
+    allEntryLink: string;
+    settings: any;
+};
+
+export type NsScrollingCarousalProps<T = any> = {
+    slides: T;
+    // eslint-disable-next-line no-unused-vars
+    renderSlide(slide: T, index: number): ReactNode;
+    /* time it takes while scrolling */
+    scrollSeconds: number;
+    /* time for which slide stays still before scrolling */
+    stillSeconds: number;
+    settings: any;
+    /* value in number, specifying how much the dots should be from bottom of slides container */
+    dotsBottomPixel?: number;
+} & AdditionalProps;

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

@@ -1,5 +1,5 @@
 import { NsCartIcon } from './';
-import { render, screen } from '../../../test-utils';
+import { render, screen } from '@/test-utils/index';
 
 const { getByTestId } = screen;
 describe('NsCartIcon', () => {

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsCartIcon } from './';
 
 type ComponentType = typeof NsCartIcon;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsCartIcon',
+    title: 'Components/Data Display/NsCartIcon',
     component: NsCartIcon,
     decorators: [withCenterDecorator],
     argTypes: {