@nuskin/foundation-ui-components 1.6.0 → 1.7.0

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import NsXLargeCard from '../NsXLargeCard';
+
+describe('NsXLargeCard component', () => {
+    const props = {
+        title: 'Sample Title',
+        subtitle: 'Sample Subtitle',
+        backgroundImageUrl: 'https://example.com/image.jpg',
+        backgroundImageAlt: 'Sample Alt Text',
+        cardLink: {
+            href: 'https://www.example.com',
+            title: 'Sample Link Text',
+        },
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsXLargeCard {...props} />);
+
+        const xLargeCard = screen.getByTestId('x-large-card');
+        expect(xLargeCard).toBeInTheDocument();
+
+        const subtitleElement = screen.getByText('Sample Subtitle');
+        expect(subtitleElement).toBeInTheDocument();
+
+        const titleElement = screen.getByText('Sample Title');
+        expect(titleElement).toBeInTheDocument();
+
+        const imageElement = screen.getByAltText('Sample Alt Text');
+        expect(imageElement).toBeInTheDocument();
+
+        const linkElement = screen.getByText('Sample Link Text');
+        expect(linkElement).toBeInTheDocument();
+    });
+});

package/src/common/card/stories/{NsBrandProductCard.stories.tsx → NsBrandCard.stories.tsx}

@@ -1,14 +1,14 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsBrandProductCard } from '../';
+import { NsBrandCard } from '../';
 
-type ComponentType = typeof NsBrandProductCard;
+type ComponentType = typeof NsBrandCard;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    component: NsBrandProductCard,
-    title: 'Components/Containers/Card/NsBrandProductCard',
+    component: NsBrandCard,
+    title: 'Components/Containers/Card/NsBrandCard',
     argTypes: {},
     decorators: [withCenterDecorator],
 } as MetaStory;
@@ -18,5 +18,10 @@ export const Default: Story = {
         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',
+        size: 'large',
+        button: true,
+        onClick: () => {
+            console.log('onClick called');
+        },
     },
 };

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

@@ -0,0 +1,24 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsCheckoutCard } from '../';
+
+type ComponentType = typeof NsCheckoutCard;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsCheckoutCard,
+    title: 'Components/Containers/Card/NsCheckoutCard',
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+    decorators: [withCenterDecorator],
+} as MetaStory;
+
+export const Default: Story = {
+    args: {
+        title: 'Section Title',
+        address: 'Address',
+        icon: 'home',
+    },
+};

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

@@ -0,0 +1,45 @@
+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 { NsHeroCardLevel1 } from '../';
+
+type ComponentType = typeof NsHeroCardLevel1;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsHeroCardLevel1,
+    title: 'Components/Containers/Card/NsHeroCardLevel1',
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+    decorators: [withCenterDecorator],
+} as MetaStory;
+
+const text = 'A skin ready for winter';
+const body = 'We have brought these discoveries to life through our powerful skin care products and supplements.';
+const host = 'https://media.nuskin.com/';
+
+export const Default: Story = {
+    args: {
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'SHOP NOW',
+        },
+        text,
+        body,
+        backgroundImageUrl: `${host}m/9734240cc191163/webimage-lash-brow-serum-carousel-image-launch.png`,
+        backgroundImageAlt: 'lash brow serum carousel',
+        additionalProps: {
+            testid: 'hero-card-level-1',
+        },
+    },
+    play: async ({ canvasElement }: any) => {
+        const canvas = within(canvasElement);
+        userEvent.hover(canvas.getByTestId('hero-card-level-1'));
+        userEvent.hover(canvas.getByRole('link'));
+        expect(canvas.getByText(text)).toBeInTheDocument();
+        expect(canvas.getByText(body)).toBeInTheDocument();
+    },
+};

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

@@ -0,0 +1,50 @@
+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 { NsHeroCardLevel2 } from '../';
+
+type ComponentType = typeof NsHeroCardLevel2;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsHeroCardLevel2,
+    title: 'Components/Containers/Card/NsHeroCardLevel2',
+    argTypes: {
+        onClick: { action: 'clicked' },
+    },
+    decorators: [withCenterDecorator],
+} as MetaStory;
+
+const text = 'Current shop deals';
+const body = 'Lumispa, sunscreen and more';
+const icon = 'home';
+const brand = 'Beauty focus™';
+const host = 'https://media.nuskin.com/';
+
+export const Default: Story = {
+    args: {
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'Discover more',
+        },
+        text,
+        body,
+        icon,
+        brand,
+        backgroundImageUrl: `${host}m/5f1c423bb57589f0/webimage-autumn-sale-carousel.png`,
+        backgroundImageAlt: 'lash brow serum carousel',
+        additionalProps: {
+            testid: 'hero-card-level-2',
+        },
+    },
+    play: async ({ canvasElement }: any) => {
+        const canvas = within(canvasElement);
+        userEvent.hover(canvas.getByTestId('hero-card-level-2'));
+        userEvent.hover(canvas.getByRole('link'));
+        expect(canvas.getByText(text)).toBeInTheDocument();
+        expect(canvas.getByText(body)).toBeInTheDocument();
+        expect(canvas.getByText(brand)).toBeInTheDocument();
+    },
+};

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

@@ -0,0 +1,36 @@
+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 { NsIconText } from '../';
+
+type ComponentType = typeof NsIconText;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsIconText,
+    title: 'Components/Containers/Card/NsIconText',
+    argTypes: {},
+    decorators: [withCenterDecorator],
+} as MetaStory;
+
+const text = 'Lorem ipsum';
+const body = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Natoque lacus, in amet nunc. ';
+
+export const Default: Story = {
+    args: {
+        text,
+        body,
+        additionalProps: {
+            testid: 'icon-text-card',
+        },
+    },
+    play: async ({ canvasElement }: any) => {
+        const canvas = within(canvasElement);
+        userEvent.hover(canvas.getByTestId('icon-text-card'));
+        userEvent.hover(canvas.getByRole('link'));
+        expect(canvas.getByText(text)).toBeInTheDocument();
+        expect(canvas.getByText(body)).toBeInTheDocument();
+    },
+};

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

@@ -0,0 +1,32 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsLargeCard } from '../';
+
+type ComponentType = typeof NsLargeCard;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsLargeCard,
+    title: 'Components/Containers/Card/NsLargeCard',
+    argTypes: {},
+    decorators: [withCenterDecorator],
+} as MetaStory;
+
+const host = 'https://media.nuskin.com';
+
+export const Default: Story = {
+    args: {
+        isHorizontal: false,
+        title: 'Title',
+        subtitle: 'Subtitle',
+        intro: 'Introduction sentence',
+        icon: 'cart',
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'Button Text',
+        },
+        backgroundImageUrl: `${host}/m/36f2a073f3de08a2/Small-category-facial_cleansers.jpg`,
+        backgroundImageAlt: 'Facial Moisturizers',
+    },
+};

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

@@ -0,0 +1,29 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsMediumCard } from '../';
+
+type ComponentType = typeof NsMediumCard;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsMediumCard,
+    title: 'Components/Containers/Card/NsMediumCard',
+    argTypes: {},
+    decorators: [withCenterDecorator],
+} as MetaStory;
+
+const host = 'https://media.nuskin.com';
+
+export const Default: Story = {
+    args: {
+        title: 'Introducing LumiSpa',
+        subtitle: 'Lorem ipsum dolor',
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'Button Text',
+        },
+        backgroundImageUrl: `${host}/m/3353b9c05cb83860/Small-category-facial_moisturizers.jpg`,
+        backgroundImageAlt: 'Lumi Spa',
+    },
+};

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

@@ -0,0 +1,39 @@
+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 { NsPost } from '../';
+
+type ComponentType = typeof NsPost;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsPost,
+    title: 'Components/Containers/Card/NsPost',
+    argTypes: {},
+    decorators: [withCenterDecorator],
+} as MetaStory;
+
+const text = 'Heading';
+const body = 'Date';
+const host = 'https://media.nuskin.com/';
+
+export const Default: Story = {
+    args: {
+        text,
+        body,
+        backgroundImageUrl: `${host}m/780f8d84bcb9d5ed/Small-Essence_News.jpg`,
+        backgroundImageAlt: 'small essence news',
+        additionalProps: {
+            testid: 'post-card',
+        },
+    },
+    play: async ({ canvasElement }: any) => {
+        const canvas = within(canvasElement);
+        userEvent.hover(canvas.getByTestId('post-card'));
+        userEvent.hover(canvas.getByRole('link'));
+        expect(canvas.getByText(text)).toBeInTheDocument();
+        expect(canvas.getByText(body)).toBeInTheDocument();
+    },
+};

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

@@ -0,0 +1,29 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsSmallFullCard } from '../';
+
+type ComponentType = typeof NsSmallFullCard;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsSmallFullCard,
+    title: 'Components/Containers/Card/NsSmallFullCard',
+    argTypes: {},
+    decorators: [withCenterDecorator],
+} as MetaStory;
+
+const host = 'https://media.nuskin.com';
+
+export const Default: Story = {
+    args: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'Placeholder',
+        },
+        backgroundImageUrl: `${host}/m/4f5b0aee8fe3ff90/Small-category-makeup.jpg`,
+        backgroundImageAlt: 'Facial Moisturizers',
+    },
+};

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

@@ -0,0 +1,29 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsXLargeCard } from '../';
+
+type ComponentType = typeof NsXLargeCard;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsXLargeCard,
+    title: 'Components/Containers/Card/NsXLargeCard',
+    argTypes: {},
+    decorators: [withCenterDecorator],
+} as MetaStory;
+
+const host = 'https://media.nuskin.com';
+
+export const Default: Story = {
+    args: {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'Call to action',
+        },
+        backgroundImageUrl: `${host}/m/4f5b0aee8fe3ff90/Small-category-makeup.jpg`,
+        backgroundImageAlt: 'Facial Moisturizers',
+    },
+};

package/src/common/carousal/RenderBrand.tsx

@@ -1,4 +1,4 @@
-import NsBrandProductCard from '../card/NsBrandProductCard';
+import NsBrandCard from '../card/NsBrandCard';
 
 interface BrandType {
     title: string;
@@ -8,11 +8,12 @@ interface BrandType {
 export const RenderBrand = (entry: BrandType, index: number) => {
     const { title, backgroundImage, brandImage } = entry;
     return (
-        <NsBrandProductCard
+        <NsBrandCard
             key={title + index}
             backgroundImageUrl={backgroundImage}
             title={title}
             brandImageUrl={brandImage}
+            button={false}
         />
     );
 };

package/src/common/input/InputWrapper.tsx

@@ -1,6 +1,6 @@
 import { Box } from '@mui/material';
 import { styled, nuskinTheme, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-import {fieldStateType} from './types.d';
+import { fieldStateType } from './types.d';
 
 const { isDarkMode } = ColorUtils;
 const { colors } = nuskinTheme;

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

@@ -1,108 +0,0 @@
-/**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsAutocomplete.stories.tsx
- * @description NsAutocomplete component.
- */
-
-import React, { useState } from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsAutocomplete } from './';
-import { AutocompleteMockList } from './mock/MockData';
-import { OptionUiComponent } from './mock/MockUI';
-import { NsAutocompleteProps, OptionsProps } from './types.d';
-import { NsIcon } from '../icon';
-import { IconButton } from '@mui/material';
-
-type ComponentType = typeof NsAutocomplete;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-const PAGE_SIZE = 6;
-
-export default {
-    title: 'Components/Inputs/NsAutocomplete',
-    component: NsAutocomplete,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        children: {
-            control: 'text',
-        },
-    },
-    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" />,
-        iconEnd: <NsIcon name="roundedClose" size="small" colorOverride="#F5F5F5" />,
-        placeholder: 'search',
-    },
-} as MetaStory;
-
-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 onSelect = (value: string | OptionsProps | null) => {
-        setSelectedOption(value);
-        setSearchTerms((value = ''));
-    };
-
-    const handleInputChange = (newValue: string) => {
-        setSearchTerms(newValue);
-    };
-
-    const onInputClear = () => {
-        setSelectedOption(null);
-        setSearchTerms('');
-    };
-
-    return (
-        <div>
-            <NsAutocomplete
-                {...AutoCompleteProps}
-                options={args.options.slice(0, pageNo)}
-                onChange={handleInputChange}
-                onSelect={onSelect}
-                OptionsUI={OptionUiComponent}
-                iconEnd={
-                    <IconButton onClick={onInputClear}>
-                        <NsIcon name="roundedClose" size="xLarge" colorOverride="#F5F5F5" />
-                    </IconButton>
-                }
-                value={selectedOption}
-                inputValue={searchTerms}
-            />
-        </div>
-    );
-};
-
-export const Autocomplete: Story = {
-    render: RenderAutocomplete,
-};

package/src/common/card/NsBrandProductCard.tsx

@@ -1,47 +0,0 @@
-import Box from '@mui/material/Box';
-import { styled } from '@nuskin/foundation-theme';
-import { NsTypography } from '../';
-import NsBrandWrapper from './NsBrandWrapper';
-import NsBrandLogo from './NsBrandLogo';
-import NsBgCard from './NsBgCard';
-
-type NsBrandProductCardProps = {
-    title?: string;
-    brandImageUrl: string;
-    backgroundImageUrl: string;
-};
-const CardContainer = styled(Box)(() => {
-    return {
-        width: '256px',
-        display: 'flex',
-        alignItems: 'start',
-        justifyContent: 'center',
-        position: 'relative',
-        flexDirection: 'column',
-        '.brand-title': {
-            marginTop: '20px',
-            fontSize: '20px',
-        },
-        ':hover': {
-            '.brand-title': {
-                opacity: '0.7',
-            },
-        },
-    };
-});
-export default function NsBrandProductCard({ title, brandImageUrl, backgroundImageUrl }: NsBrandProductCardProps) {
-    return (
-        <CardContainer role="brand-card" component="div" data-testid="brand-product-card">
-            <NsBgCard backgroundImageUrl={backgroundImageUrl}>
-                <NsBrandWrapper>
-                    <NsBrandLogo component="img" image={brandImageUrl} />
-                </NsBrandWrapper>
-            </NsBgCard>
-            {title ? (
-                <NsTypography variant="h3" className="brand-title">
-                    {title}
-                </NsTypography>
-            ) : null}
-        </CardContainer>
-    );
-}

package/src/common/card/NsFfgCard.tsx

@@ -1,24 +0,0 @@
-import { NsLink, NsImage } from '../';
-import { NsFfgStyled } from './styled/NsFfgStyled';
-import { NsFfgCardProps } from './types.d';
-
-const NsFfgCard = ({ cardLink, text, topImageUrl, topImageAlt, additionalProps, cslp, onClick }: NsFfgCardProps) => {
-    return (
-        <NsFfgStyled
-            data-testid={additionalProps?.testid}
-            onClick={onClick}
-            className={additionalProps?.className ?? ''}
-        >
-            <header className="top-image">
-                <NsImage height={192} width={288} alt={topImageAlt} src={topImageUrl} />
-            </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>
-    );
-};
-export default NsFfgCard;

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

@@ -1,32 +0,0 @@
-import { render } from '@testing-library/react';
-import NsBrandProductCard from '../NsBrandProductCard';
-
-describe('NSBgCard component', () => {
-    const props = {
-        title: 'Nutricentials',
-        brandImageUrl: 'https://media.nuskin.com/m/f3a91129cbbae32/webimage-brand-nutricentials.png',
-        backgroundImageUrl: 'https://media.nuskin.com/m/298104036e885b40/webimage-brand-nutricentials.png',
-    };
-    it('render brand image', () => {
-        const { container } = render(<NsBrandProductCard {...props} />);
-        const img = container.querySelector('img');
-        expect(img).toHaveAttribute('src', props.brandImageUrl);
-    });
-    it('render background image', () => {
-        const { container } = render(<NsBrandProductCard {...props} />);
-        const card = container.querySelector('div.MuiPaper-root');
-        expect(card).toHaveStyle(`
-    background-image: url(${props.backgroundImageUrl});
-    `);
-    });
-    it('renders title', () => {
-        const { getByText } = render(<NsBrandProductCard {...props} />);
-        const cardElement = getByText(props.title);
-        expect(cardElement).toBeInTheDocument();
-    });
-    it('does not render title, when title is not passed', () => {
-        const { container } = render(<NsBrandProductCard {...{ ...props, title: undefined }} />);
-        const cardElement = container.querySelector('.brand-title');
-        expect(cardElement).toBeNull();
-    });
-});

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

@@ -1,33 +0,0 @@
-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();
-    });
-});