@nuskin/foundation-ui-components 1.9.2 → 1.9.4

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

@@ -1,5 +1,4 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsAwardCard } from '../';
 
 type ComponentType = typeof NsAwardCard;
@@ -9,8 +8,6 @@ type MetaStory = Meta<ComponentType>;
 export default {
     component: NsAwardCard,
     title: 'Components/Containers/Card/NsAwardCard',
-    argTypes: {},
-    decorators: [withCenterDecorator],
 } as MetaStory;
 
 const host = 'https://media.nuskin.com';

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

@@ -19,9 +19,14 @@ export const Default: Story = {
         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');
+        button: {
+            showButton: true,
+            buttonText: 'Add to cart',
+            buttonVariant: 'outlined',
+            buttonColor: 'primary',
+            endIcon: 'cart',
+            url: '#',
+            fullWidth: true,
         },
     },
 };

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

@@ -9,16 +9,15 @@ type MetaStory = Meta<ComponentType>;
 export default {
     component: NsCheckoutCard,
     title: 'Components/Containers/Card/NsCheckoutCard',
-    argTypes: {
-        onClick: { action: 'clicked' },
-    },
+    argTypes: {},
     decorators: [withCenterDecorator],
 } as MetaStory;
 
 export const Default: Story = {
     args: {
         title: 'Section Title',
-        address: 'Address',
         icon: 'home',
+        linkText: 'CHANGE',
+        url: '#',
     },
 };

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

@@ -1,7 +1,4 @@
 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;
@@ -11,35 +8,25 @@ 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,
+        cardTitle: 'A skin ready for winter',
+        cardDescription:
+            'We have brought these discoveries to life through our powerful skin care products and supplements.',
         backgroundImageUrl: `${host}m/9734240cc191163/webimage-lash-brow-serum-carousel-image-launch.png`,
         backgroundImageAlt: 'lash brow serum carousel',
-        additionalProps: {
-            testid: 'hero-card-level-1',
+        button: {
+            showButton: true,
+            fullWidth: true,
+            buttonText: 'SHOP NOW',
+            buttonVariant: 'contained',
+            buttonColor: 'primary',
+            url: '#',
         },
-    },
-    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();
+        imagePosition: 'bottom',
     },
 };

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

@@ -1,7 +1,4 @@
 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;
@@ -11,40 +8,24 @@ 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,
+        cardTitle: 'Current shop deals',
+        cardDescription: 'Lumispa, sunscreen and more',
+        brandName: 'Beauty focus™',
         backgroundImageUrl: `${host}m/5f1c423bb57589f0/webimage-autumn-sale-carousel.png`,
         backgroundImageAlt: 'lash brow serum carousel',
-        additionalProps: {
-            testid: 'hero-card-level-2',
+        button: {
+            showButton: true,
+            endIcon: 'arrowRight',
+            buttonText: 'Discover more',
+            buttonVariant: 'text',
+            buttonColor: 'primary',
+            url: 'https://www.forceforgood.org/',
         },
     },
-    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

@@ -1,7 +1,4 @@
 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;
@@ -11,26 +8,11 @@ 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();
+        text: 'Lorem ipsum',
+        body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Natoque lacus, in amet nunc. ',
     },
 };

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

@@ -9,7 +9,6 @@ type MetaStory = Meta<ComponentType>;
 export default {
     component: NsLargeCard,
     title: 'Components/Containers/Card/NsLargeCard',
-    argTypes: {},
     decorators: [withCenterDecorator],
 } as MetaStory;
 
@@ -21,13 +20,15 @@ export const Default: Story = {
         title: 'Personal Care',
         subtitle: 'Subtitle',
         intro: 'Nu Skin® product lines combine nature and science for skincare benefits you can see and feel.',
-        icon: 'cart',
-        cardLink: {
-            href: 'https://www.forceforgood.org/',
-            title: 'REVEAL YOUR BEST SKIN',
-        },
-        buttonVariant: 'outlined',
         backgroundImageUrl: `${host}/m/95f9cf4143e3882/Small-About_Us-Personal-Care-Products-Image.jpg`,
         backgroundImageAlt: 'Facial Moisturizers',
+        button: {
+            showButton: true,
+            buttonText: 'REVEAL YOUR BEST SKIN',
+            buttonVariant: 'outlined',
+            buttonColor: 'primary',
+            url: 'https://www.forceforgood.org/',
+            endIcon: 'cart',
+        },
     },
 };

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

@@ -21,13 +21,14 @@ export const Default: Story = {
         titleFontWeight: 'bold',
         subtitle:
             'We’re committed to keeping our global communities clean, safe, and protected for the future. We’re proud to embrace sustainable practices today for a resource-rich tomorrow.',
-        cardLink: {
-            href: 'https://www.forceforgood.org/',
-            title: 'SEE WHAT WE’RE DOING',
-        },
-        icon: 'arrowRight',
-        buttonVariant: 'outlined',
         backgroundImageUrl: `${host}/m/3353b9c05cb83860/Small-category-facial_moisturizers.jpg`,
         backgroundImageAlt: 'Lumi Spa',
+        button: {
+            showButton: true,
+            buttonText: 'SEE WHAT WE’RE DOING',
+            buttonVariant: 'outlined',
+            buttonColor: 'primary',
+            url: 'https://www.forceforgood.org/',
+        },
     },
 };

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

@@ -1,7 +1,4 @@
 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;
@@ -11,29 +8,15 @@ type MetaStory = Meta<ComponentType>;
 export default {
     component: NsPost,
     title: 'Components/Containers/Card/NsPost',
-    argTypes: {},
-    decorators: [withCenterDecorator],
 } as MetaStory;
 
-const text = '38 New Beauty Products Our Editors Are Loving';
-const body = 'SPA & BEAUTY TODAY';
 const host = 'https://media.nuskin.com/';
 
 export const Default: Story = {
     args: {
-        text,
-        body,
+        text: '38 New Beauty Products Our Editors Are Loving',
+        body: 'SPA & BEAUTY TODAY',
         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

@@ -19,11 +19,14 @@ 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',
+        button: {
+            showButton: true,
+            buttonText: 'Placeholder',
+            buttonVariant: 'contained',
+            buttonColor: 'primary',
+            url: '#',
+        },
     },
 };

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

@@ -19,11 +19,15 @@ 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',
+        button: {
+            showButton: true,
+            buttonText: 'Discover more',
+            buttonVariant: 'outlined',
+            buttonColor: 'secondary',
+            url: '#',
+            endIcon: 'home',
+        },
     },
 };

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

@@ -1,4 +1,6 @@
 import { AdditionalProps, CslpTag } from '../common.types';
+import { NsIconNameType } from '../icon';
+
 export type NsFfgCardProps = AdditionalProps & {
     topImageUrl: string;
     topImageAlt: string;
@@ -10,3 +12,13 @@ export type NsFfgCardProps = AdditionalProps & {
         action_text: CslpTag;
     };
 };
+
+export type NsCardButton = {
+    showButton?: boolean;
+    fullWidth?: boolean;
+    url?: string;
+    endIcon?: NsIconNameType;
+    buttonText: string;
+    buttonVariant?: 'text' | 'outlined' | 'contained';
+    buttonColor?: 'secondary' | 'primary';
+};

package/src/common/carousal/RenderBrand.tsx

@@ -13,7 +13,6 @@ export const RenderBrand = (entry: BrandType, index: number) => {
             backgroundImageUrl={backgroundImage}
             title={title}
             brandImageUrl={brandImage}
-            button={false}
         />
     );
 };

package/src/common/autocomplete/helper/AutoCompleteButton.tsx

@@ -1,24 +0,0 @@
-import { NsButton, NsTypography } from '../..';
-
-type AutoCompleteButtonProps = {
-    text: string;
-    show: boolean;
-    onClick(): void;
-    testId?: string;
-};
-
-export const AutoCompleteButton = (props: AutoCompleteButtonProps) => {
-    const { show, onClick, text, testId } = props;
-    if (!show) {
-        return null;
-    }
-    return (
-        <li className="text-right p-3">
-            <NsButton onClick={onClick} data-testid={testId}>
-                <NsTypography variant="body-xs" weight="bold">
-                    {text}
-                </NsTypography>
-            </NsButton>
-        </li>
-    );
-};