@nuskin/foundation-ui-components 1.9.2 → 1.9.3

package/src/common/card/NsXLargeCard.tsx

@@ -1,13 +1,16 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { NsButton, NsImage } from '..';
+import { NsImage } from '../';
+import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsXLargeCardProps = {
     title: string;
     subtitle: string;
     backgroundImageUrl: string;
     backgroundImageAlt: string;
-    cardLink: { href: string; title: string };
+    button?: NsCardButton;
+    className?: string;
 };
 
 const CardContainer = styled(Box)(() => {
@@ -50,9 +53,8 @@ const CardContainer = styled(Box)(() => {
             fontWeight: '400',
             marginTop: '20px',
         },
-        '.action-link': {
+        '.cta': {
             marginTop: '20px',
-            width: '70%',
         },
     };
 });
@@ -62,18 +64,17 @@ export default function NsXLargeCard({
     subtitle,
     backgroundImageUrl,
     backgroundImageAlt,
-    cardLink,
+    button,
+    className,
 }: NsXLargeCardProps) {
     return (
-        <CardContainer role="x-large-card" component="div" data-testid="x-large-card">
+        <CardContainer className={className} role="x-large-card" component="div" data-testid="x-large-card">
             <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
             <div className="gradientOverlay"></div>
             <div className="content">
                 <article className="subtitle">{subtitle}</article>
                 <article className="title">{title}</article>
-                <NsButton className="action-link" variant="outlined" color="secondary" href={cardLink.href}>
-                    {cardLink.title}
-                </NsButton>
+                {button ? <CardButton {...button} /> : null}
             </div>
         </CardContainer>
     );

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import NsAwardCard from '../NsAwardCard';
+
+describe('NsHeroCardLevel1 component', () => {
+    const props = {
+        title: 'AgeLoc LumiSpa iO',
+        awardName: '2023 Bronze Winner',
+        mediaOutlet: 'Edison Awards',
+        backgroundImageUrl: 'https://media.nuskin.com/m/2ec571a87dc9680c/Small-Edison-Bronze-Logo-Homepage.jpg',
+        backgroundImageAlt: 'Edison Bronze Logo',
+    };
+
+    it('1. renders with correct content and styles', () => {
+        render(<NsAwardCard {...props} />);
+
+        const awardCard = screen.getByTestId('award-card');
+        expect(awardCard).toBeInTheDocument();
+
+        const title = screen.queryByText('AgeLoc LumiSpa iO');
+        expect(title).toBeInTheDocument();
+
+        const awardName = screen.queryByText('2023 Bronze Winner');
+        expect(awardName).toBeInTheDocument();
+
+        const mediaOutlet = screen.queryByText('Edison Awards');
+        expect(mediaOutlet).toBeInTheDocument();
+    });
+});

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import NsBrandCard from '../NsBrandCard';
 
 describe('NsBrandCard component', () => {
@@ -8,7 +7,13 @@ describe('NsBrandCard component', () => {
         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',
-        button: true,
+        button: {
+            showButton: true,
+            buttonText: 'Add to Cart',
+            buttonVariant: 'outlined' as 'outlined',
+            url: '#',
+            endIcon: 'cart' as 'cart',
+        },
     };
 
     it('1. renders with correct content and styles', () => {
@@ -39,33 +44,15 @@ describe('NsBrandCard component', () => {
     });
 
     it('4. does not render button when button prop is false', () => {
-        const { container } = render(<NsBrandCard {...{ ...props, button: false }} />);
+        let updatedProps = { ...props };
+        updatedProps.button.showButton = false;
+        const { container } = render(<NsBrandCard {...updatedProps} />);
 
         const addToCartButton = container.querySelector('.cta');
         expect(addToCartButton).toBeNull();
     });
 
-    it.skip('5. calls onClick when the "Add to Cart" button is clicked', () => {
-        const onClickMock = jest.fn();
-        render(<NsBrandCard {...props} onClick={onClickMock} />);
-
-        const addToCartButton = screen.getByText('Add to Cart');
-        userEvent.click(addToCartButton);
-
-        expect(onClickMock).toHaveBeenCalled();
-    });
-
-    it('6. applies hover styles on mouseover', () => {
-        render(<NsBrandCard {...props} />);
-
-        const brandCard = screen.getByTestId('brand-card');
-        userEvent.hover(brandCard);
-
-        const brandTitle = screen.getByText('ageLOC LumiSpa');
-        expect(brandTitle).toHaveStyle('opacity: 0.7');
-    });
-
-    it('7. renders with correct styles when size is "small"', () => {
+    it('5. renders with correct styles when size is "small"', () => {
         const { container } = render(<NsBrandCard {...props} size="small" />);
 
         const cardContainer = container.firstChild;
@@ -79,7 +66,7 @@ describe('NsBrandCard component', () => {
         `);
     });
 
-    it('8. renders with correct styles when size is "large"', () => {
+    it('6. renders with correct styles when size is "large"', () => {
         render(<NsBrandCard {...props} size="large" />);
         const cardContainer = screen.getByTestId('brand-card') as HTMLElement;
         const computedStyles = window.getComputedStyle(cardContainer);
@@ -87,7 +74,7 @@ describe('NsBrandCard component', () => {
         expect(computedStyles.width).toBe('190px');
     });
 
-    it('9. renders with default styles when size is not provided', () => {
+    it('7. renders with default styles when size is not provided', () => {
         render(<NsBrandCard {...props} />);
         const cardContainer = screen.getByTestId('brand-card') as HTMLElement;
         const computedStyles = window.getComputedStyle(cardContainer);

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

@@ -6,9 +6,10 @@ import NsCheckoutCard from '../NsCheckoutCard';
 describe('NsCheckoutCard component', () => {
     const props = {
         title: 'Section Title',
-        address: 'Address',
         icon: 'home' as 'home',
-        onClick: jest.fn(),
+        linkText: 'CHANGE',
+        url: '#',
+        className: '',
     };
 
     it('1. renders with correct content and styles', () => {
@@ -20,11 +21,8 @@ describe('NsCheckoutCard component', () => {
         const titleElement = screen.getByText(props.title);
         expect(titleElement).toBeInTheDocument();
 
-        const addressElement = screen.getByText(props.address);
+        const addressElement = screen.getByText(props.linkText);
         expect(addressElement).toBeInTheDocument();
-
-        const changeLink = screen.getByText('CHANGE');
-        expect(changeLink).toBeInTheDocument();
     });
 
     it('2. toggles dropdown icon on click', () => {
@@ -38,13 +36,4 @@ describe('NsCheckoutCard component', () => {
         // fireEvent.click(dropdownIcon);
         // expect(dropdownIcon).toHaveAttribute('name', 'arrowDown');
     });
-
-    it('3. calls onClick when the card is clicked', () => {
-        render(<NsCheckoutCard {...props} />);
-
-        const checkoutCard = screen.getByTestId('checkout-card');
-        fireEvent.click(checkoutCard);
-
-        expect(props.onClick).toHaveBeenCalled();
-    });
 });

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

@@ -1,22 +1,21 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import NsHeroCardLevel1 from '../NsHeroCardLevel1';
 
 describe('NsHeroCardLevel1 component', () => {
     const props = {
-        cardLink: {
-            href: 'https://www.forceforgood.org/',
-            title: 'SHOP NOW',
-        },
-        text: 'A skin ready for winter',
-        body: 'We have brought these discoveries to life through our powerful skin care products and supplements.',
+        cardTitle: 'A skin ready for winter',
+        cardDescription:
+            'We have brought these discoveries to life through our powerful skin care products and supplements.',
         backgroundImageUrl:
             'https://media.nuskin.com/m/9734240cc191163/webimage-lash-brow-serum-carousel-image-launch.png',
         backgroundImageAlt: 'lash brow serum carousel',
-        onClick: jest.fn(),
-        additionalProps: {
-            testid: 'hero-card-level-1',
+        button: {
+            showButton: true,
+            buttonText: 'SHOP NOW',
+            buttonVariant: 'contained' as 'contained',
+            url: '#',
+            endIcon: 'home' as 'home',
         },
     };
 
@@ -26,23 +25,16 @@ describe('NsHeroCardLevel1 component', () => {
         const heroCard = screen.getByTestId('hero-card-level-1');
         expect(heroCard).toBeInTheDocument();
 
-        const shopNowLink = screen.getByText('SHOP NOW');
+        const shopNowLink = screen.queryByText('SHOP NOW');
         expect(shopNowLink).toBeInTheDocument();
     });
 
-    it.skip('2. calls onClick when the card is clicked', () => {
-        render(<NsHeroCardLevel1 {...props} />);
+    it('2. does not render button when button prop is false', () => {
+        let updatedProps = { ...props };
+        updatedProps.button.showButton = false;
+        const { container } = render(<NsHeroCardLevel1 {...updatedProps} />);
 
-        const heroCard = screen.getByTestId('hero-card-level-1');
-        userEvent.click(heroCard);
-
-        expect(props.onClick).toHaveBeenCalled();
-    });
-
-    it('3. applies hover styles on mouseover', () => {
-        render(<NsHeroCardLevel1 {...props} />);
-
-        const heroCard = screen.getByTestId('hero-card-level-1');
-        userEvent.hover(heroCard);
+        const button = container.querySelector('.action-link');
+        expect(button).toBeNull();
     });
 });

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

@@ -1,24 +1,22 @@
 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',
-        },
+        cardTitle: 'Current shop deals',
+        cardDescription: 'Lumispa, sunscreen and more',
+        brandName: 'Beauty focus™',
         backgroundImageUrl: 'https://media.nuskin.com/m/5f1c423bb57589f0/webimage-autumn-sale-carousel.png',
         backgroundImageAlt: 'lash brow serum carousel',
-        additionalProps: {
-            testid: 'hero-card-level-2',
+        button: {
+            showButton: true,
+            buttonText: 'Discover more',
+            buttonVariant: 'text' as 'text',
+            buttonColor: 'secondary' as 'secondary',
+            url: '#',
+            endIcon: 'home' as 'home',
         },
-        onClick: jest.fn(),
     };
 
     it('1. renders with correct content and styles', () => {
@@ -36,16 +34,16 @@ describe('NsHeroCardLevel2 component', () => {
         const bodyContent = screen.getByText('Lumispa, sunscreen and more');
         expect(bodyContent).toBeInTheDocument();
 
-        const discoverMoreLink = screen.getByRole('link', { name: 'Discover more' });
-        expect(discoverMoreLink).toBeInTheDocument();
+        const button = screen.queryByText('Discover more');
+        expect(button).toBeInTheDocument();
     });
 
-    it.skip('2. calls onClick when the card is clicked', () => {
-        render(<NsHeroCardLevel2 {...props} />);
-
-        const cardContainer = screen.getByTestId('hero-card-level-2');
-        userEvent.click(cardContainer);
+    it('2. does not render button when button prop is false', () => {
+        let updatedProps = { ...props };
+        updatedProps.button.showButton = false;
+        render(<NsHeroCardLevel2 {...updatedProps} />);
 
-        expect(props.onClick).toHaveBeenCalled();
+        const button = screen.queryByText('Discover more');
+        expect(button).not.toBeInTheDocument();
     });
 });

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

@@ -6,9 +6,6 @@ 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', () => {

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

@@ -1,41 +1,48 @@
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import { NsLargeCard } from '../';
 
 describe('NsLargeCard component', () => {
     const props = {
-        title: 'Title',
+        isHorizontal: false,
+        title: 'Personal Care',
         subtitle: 'Subtitle',
-        intro: 'Introduction sentence',
-        icon: 'cart' as 'cart',
-        cardLink: {
-            href: 'https://www.forceforgood.org/',
-            title: 'Button Text',
+        intro: 'Nu Skin® product lines combine nature and science for skincare benefits you can see and feel.',
+        button: {
+            showButton: true,
+            buttonText: 'REVEAL YOUR BEST SKIN',
+            buttonVariant: 'outlined' as 'outlined',
+            buttonColor: 'secondary' as 'secondary',
+            url: 'https://www.forceforgood.org/',
         },
-        backgroundImageUrl: 'https://example.com/image.jpg',
-        backgroundImageAlt: 'Image Alt',
+        backgroundImageUrl:
+            'https://media.nuskin.com/m/95f9cf4143e3882/Small-About_Us-Personal-Care-Products-Image.jpg',
+        backgroundImageAlt: 'Facial Moisturizers',
     };
 
     it('1. renders with correct content and styles', () => {
         render(<NsLargeCard {...props} />);
 
+        const button = screen.queryByText('REVEAL YOUR BEST SKIN');
+
         expect(screen.getByText(props.title)).toBeInTheDocument();
         expect(screen.getByText(props.subtitle)).toBeInTheDocument();
+        expect(screen.getByText(props.intro)).toBeInTheDocument();
+        expect(screen.getByText(props.intro)).toBeInTheDocument();
+        expect(button).toBeInTheDocument();
     });
 
-    it('2. triggers the link when clicked', () => {
-        render(<NsLargeCard {...props} />);
+    it('2. renders with flexDirection=row when isHorizontal is true', () => {
+        const { getByTestId } = render(<NsLargeCard {...{ ...props, isHorizontal: true }} />);
 
-        userEvent.click(screen.getByRole('link'));
+        expect(getByTestId('large-card')).toHaveStyle('flex-direction: row');
     });
 
-    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();
+    it('3. does not render button when button prop is false', () => {
+        let updatedProps = { ...props };
+        updatedProps.button.showButton = false;
+        const { container } = render(<NsLargeCard {...updatedProps} />);
 
-        const parentDiv = actionLink.closest('.cta');
-        expect(parentDiv).toBeInTheDocument();
+        const button = container.querySelector('.cta');
+        expect(button).toBeNull();
     });
 });

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

@@ -4,14 +4,19 @@ 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',
+        title: 'Sustainability',
+        titleFontWeight: 'bold' as '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.',
+        button: {
+            showButton: true,
+            buttonText: 'SEE WHAT WE’RE DOING',
+            buttonVariant: 'outlined' as 'outlined',
+            buttonColor: 'secondary' as 'secondary',
+            url: '#',
         },
+        backgroundImageUrl: 'https://media.nuskin.com/m/3353b9c05cb83860/Small-category-facial_moisturizers.jpg',
+        backgroundImageAlt: 'Lumi Spa',
     };
 
     it('1. renders with correct content and styles', () => {
@@ -20,16 +25,27 @@ describe('NsMediumCard component', () => {
         const mediumCard = screen.getByTestId('medium-card');
         expect(mediumCard).toBeInTheDocument();
 
-        const titleElement = screen.getByText('Sample Title');
+        const titleElement = screen.getByText('Sustainability');
         expect(titleElement).toBeInTheDocument();
 
-        const subtitleElement = screen.getByText('Sample Subtitle');
+        const subtitleElement = screen.getByText(
+            '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.'
+        );
         expect(subtitleElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText('Sample Alt Text');
+        const imageElement = screen.getByAltText('Lumi Spa');
         expect(imageElement).toBeInTheDocument();
 
-        const linkElement = screen.getByText('Sample Link Text');
-        expect(linkElement).toBeInTheDocument();
+        const button = screen.queryByText('SEE WHAT WE’RE DOING');
+        expect(button).toBeInTheDocument();
+    });
+
+    it('2. does not render button when button prop is false', () => {
+        let updatedProps = { ...props };
+        updatedProps.button.showButton = false;
+        const { container } = render(<NsMediumCard {...updatedProps} />);
+
+        const button = container.querySelector('.cta');
+        expect(button).toBeNull();
     });
 });

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

@@ -4,28 +4,25 @@ 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',
-        },
+        text: '38 New Beauty Products Our Editors Are Loving',
+        body: 'SPA & BEAUTY TODAY',
+        backgroundImageUrl: 'https://media.nuskin.com/m/780f8d84bcb9d5ed/Small-Essence_News.jpg',
+        backgroundImageAlt: 'small essence news',
     };
 
     it('1. renders with correct content and styles', () => {
         render(<NsPost {...props} />);
 
-        const postContainer = screen.getByTestId('sample-post');
+        const postContainer = screen.getByTestId('post-card');
         expect(postContainer).toBeInTheDocument();
 
-        const textElement = screen.getByText('Sample Text');
+        const textElement = screen.getByText('38 New Beauty Products Our Editors Are Loving');
         expect(textElement).toBeInTheDocument();
 
-        const bodyElement = screen.getByText('Sample Body');
+        const bodyElement = screen.getByText('SPA & BEAUTY TODAY');
         expect(bodyElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText('Sample Alt Text');
+        const imageElement = screen.getByAltText('small essence news');
         expect(imageElement).toBeInTheDocument();
     });
 });

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

@@ -4,13 +4,16 @@ 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',
+        title: 'Title',
+        subtitle: 'Subtitle',
+        backgroundImageUrl: 'https://media.nuskin.com/m/4f5b0aee8fe3ff90/Small-category-makeup.jpg',
+        backgroundImageAlt: 'Facial Moisturizers',
+        button: {
+            showButton: true,
+            buttonText: 'Placeholder',
+            buttonVariant: 'outlined' as 'outlined',
+            buttonColor: 'secondary' as 'secondary',
+            url: '#',
         },
     };
 
@@ -20,17 +23,25 @@ describe('NsSmallFullCard component', () => {
         const cardContainer = screen.getByTestId('small-full-card');
         expect(cardContainer).toBeInTheDocument();
 
-        const titleElement = screen.getByText('Sample Title');
+        const titleElement = screen.getByText('Title');
         expect(titleElement).toBeInTheDocument();
 
-        const subtitleElement = screen.getByText('Sample Subtitle');
+        const subtitleElement = screen.getByText('Subtitle');
         expect(subtitleElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText('Sample Alt Text');
+        const imageElement = screen.getByAltText('Facial Moisturizers');
         expect(imageElement).toBeInTheDocument();
 
-        const linkElement = screen.getByText('Button Text');
+        const linkElement = screen.getByText('Placeholder');
         expect(linkElement).toBeInTheDocument();
-        expect(linkElement).toHaveAttribute('href', 'https://www.example.com');
+    });
+
+    it('2. does not render button when button prop is false', () => {
+        let updatedProps = { ...props };
+        updatedProps.button.showButton = false;
+        const { container } = render(<NsSmallFullCard {...updatedProps} />);
+
+        const button = container.querySelector('.cta');
+        expect(button).toBeNull();
     });
 });

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

@@ -4,13 +4,16 @@ 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',
+        title: 'Title',
+        subtitle: 'Subtitle',
+        backgroundImageUrl: 'https://media.nuskin.com/m/4f5b0aee8fe3ff90/Small-category-makeup.jpg',
+        backgroundImageAlt: 'Facial Moisturizers',
+        button: {
+            showButton: true,
+            buttonText: 'Discover more',
+            buttonVariant: 'outlined' as 'outlined',
+            buttonColor: 'secondary' as 'secondary',
+            url: '#',
         },
     };
 
@@ -20,16 +23,25 @@ describe('NsXLargeCard component', () => {
         const xLargeCard = screen.getByTestId('x-large-card');
         expect(xLargeCard).toBeInTheDocument();
 
-        const subtitleElement = screen.getByText('Sample Subtitle');
+        const subtitleElement = screen.getByText('Subtitle');
         expect(subtitleElement).toBeInTheDocument();
 
-        const titleElement = screen.getByText('Sample Title');
+        const titleElement = screen.getByText('Title');
         expect(titleElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText('Sample Alt Text');
+        const imageElement = screen.getByAltText('Facial Moisturizers');
         expect(imageElement).toBeInTheDocument();
 
-        const linkElement = screen.getByText('Sample Link Text');
+        const linkElement = screen.getByText('Discover more');
         expect(linkElement).toBeInTheDocument();
     });
+
+    it('2. does not render button when button prop is false', () => {
+        let updatedProps = { ...props };
+        updatedProps.button.showButton = false;
+        const { container } = render(<NsXLargeCard {...updatedProps} />);
+
+        const button = container.querySelector('.cta');
+        expect(button).toBeNull();
+    });
 });

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,13 @@ 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: '#',
         },
     },
 };