@nuskin/foundation-ui-components 1.6.1 → 1.7.0

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NsHeroCardLevel2 } from '../';
+
+describe('NsHeroCardLevel2 component', () => {
+    const props = {
+        brand: 'Beauty focus™',
+        text: 'Current shop deals',
+        body: 'Lumispa, sunscreen and more',
+        icon: 'home' as 'home',
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'Discover more',
+        },
+        backgroundImageUrl: 'https://media.nuskin.com/m/5f1c423bb57589f0/webimage-autumn-sale-carousel.png',
+        backgroundImageAlt: 'lash brow serum carousel',
+        additionalProps: {
+            testid: 'hero-card-level-2',
+        },
+        onClick: jest.fn(),
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsHeroCardLevel2 {...props} />);
+
+        const cardContainer = screen.getByTestId('hero-card-level-2');
+        expect(cardContainer).toBeInTheDocument();
+
+        const brandText = screen.getByText('Beauty focus™');
+        expect(brandText).toBeInTheDocument();
+
+        const textContent = screen.getByText('Current shop deals');
+        expect(textContent).toBeInTheDocument();
+
+        const bodyContent = screen.getByText('Lumispa, sunscreen and more');
+        expect(bodyContent).toBeInTheDocument();
+
+        const discoverMoreLink = screen.getByRole('link', { name: 'Discover more' });
+        expect(discoverMoreLink).toBeInTheDocument();
+    });
+
+    it('2. calls onClick when the card is clicked', () => {
+        render(<NsHeroCardLevel2 {...props} />);
+
+        const cardContainer = screen.getByTestId('hero-card-level-2');
+        userEvent.click(cardContainer);
+
+        expect(props.onClick).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { NsIconText } from '../';
+
+describe('NsIconText component', () => {
+    const props = {
+        text: 'Lorem ipsum',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Natoque lacus, in amet nunc. ',
+        additionalProps: {
+            testid: 'icon-text-card',
+        },
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsIconText {...props} />);
+
+        const cardContainer = screen.getByTestId('icon-text-card');
+        expect(cardContainer).toBeInTheDocument();
+
+        const textContent = screen.getByText('Lorem ipsum');
+        expect(textContent).toBeInTheDocument();
+
+        const bodyContent = screen.getByText(
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Natoque lacus, in amet nunc.'
+        );
+        expect(bodyContent).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NsLargeCard } from '../';
+
+describe('NsLargeCard component', () => {
+    const props = {
+        title: 'Title',
+        subtitle: 'Subtitle',
+        intro: 'Introduction sentence',
+        icon: 'cart' as 'cart',
+        cardLink: {
+            href: 'https://www.forceforgood.org/',
+            title: 'Button Text',
+        },
+        backgroundImageUrl: 'https://example.com/image.jpg',
+        backgroundImageAlt: 'Image Alt',
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsLargeCard {...props} />);
+
+        expect(screen.getByText(props.title)).toBeInTheDocument();
+        expect(screen.getByText(props.subtitle)).toBeInTheDocument();
+    });
+
+    it('2. triggers the link when clicked', () => {
+        render(<NsLargeCard {...props} />);
+
+        userEvent.click(screen.getByRole('link'));
+    });
+
+    it('3. renders NsLink and NsIcon when isHorizontal is true', () => {
+        render(<NsLargeCard {...props} isHorizontal={true} />);
+
+        const actionLink = screen.getByText(props.cardLink.title);
+        expect(actionLink).toBeInTheDocument();
+
+        const parentDiv = actionLink.closest('.cta');
+        expect(parentDiv).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import NsMediumCard from '../NsMediumCard';
+
+describe('NsMediumCard 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(<NsMediumCard {...props} />);
+
+        const mediumCard = screen.getByTestId('medium-card');
+        expect(mediumCard).toBeInTheDocument();
+
+        const titleElement = screen.getByText('Sample Title');
+        expect(titleElement).toBeInTheDocument();
+
+        const subtitleElement = screen.getByText('Sample Subtitle');
+        expect(subtitleElement).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/specs/NsPost.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import NsPost from '../NsPost';
+
+describe('NsPost component', () => {
+    const props = {
+        text: 'Sample Text',
+        body: 'Sample Body',
+        backgroundImageUrl: 'https://example.com/image.jpg',
+        backgroundImageAlt: 'Sample Alt Text',
+        additionalProps: {
+            testid: 'sample-post',
+        },
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsPost {...props} />);
+
+        const postContainer = screen.getByTestId('sample-post');
+        expect(postContainer).toBeInTheDocument();
+
+        const textElement = screen.getByText('Sample Text');
+        expect(textElement).toBeInTheDocument();
+
+        const bodyElement = screen.getByText('Sample Body');
+        expect(bodyElement).toBeInTheDocument();
+
+        const imageElement = screen.getByAltText('Sample Alt Text');
+        expect(imageElement).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import NsSmallFullCard from '../NsSmallFullCard';
+
+describe('NsSmallFullCard 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: 'Button Text',
+        },
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsSmallFullCard {...props} />);
+
+        const cardContainer = screen.getByTestId('small-full-card');
+        expect(cardContainer).toBeInTheDocument();
+
+        const titleElement = screen.getByText('Sample Title');
+        expect(titleElement).toBeInTheDocument();
+
+        const subtitleElement = screen.getByText('Sample Subtitle');
+        expect(subtitleElement).toBeInTheDocument();
+
+        const imageElement = screen.getByAltText('Sample Alt Text');
+        expect(imageElement).toBeInTheDocument();
+
+        const linkElement = screen.getByText('Button Text');
+        expect(linkElement).toBeInTheDocument();
+        expect(linkElement).toHaveAttribute('href', 'https://www.example.com');
+    });
+});

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}
         />
     );
 };