@nuskin/foundation-ui-components 1.29.0-cx130-1216.2 → 1.29.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.29.0-cx130-1216.2",
+    "version": "1.29.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -46,12 +46,13 @@
         "@mui/icons-material": "^5.14.16",
         "@mui/material": "5.14.16",
         "@mui/utils": "5.14.16",
-        "@nuskin/foundation-theme": "^1.5.0",
+        "@nuskin/foundation-theme": "1.6.0",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
         "cliui": "^8.0.1",
         "framer-motion": "^10.16.4",
         "next": "13.5.6",
+        "notistack": "^3.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-material-ui-carousel": "^3.4.2",
@@ -99,6 +100,12 @@
         "jest-environment-jsdom": "^29.7.0",
         "storybook": "^7.5.1"
     },
+    "peerDependencies": {
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "@nuskin/foundation-theme": "1.6.0",
+        "@mui/material": "5.14.16"
+    },
     "files": [
         "src/common"
     ],

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

@@ -56,7 +56,7 @@ describe('CustomAutocomplete', () => {
             await userEvent.click(optionLi);
         });
         expect(onChangeMock).toHaveBeenCalled();
-    }, 90000000);
+    }, 160000);
 
     it('5. should load more options when clicking load more button', async () => {
         const seeMore = {
@@ -72,7 +72,7 @@ describe('CustomAutocomplete', () => {
             await userEvent.click(loadMoreButton);
         });
         expect(seeMore.onSeeMore).toHaveBeenCalled();
-    }, 9000000);
+    }, 160000);
 
     it('6. should clear options when clicking clear button', async () => {
         const clear = {
@@ -87,5 +87,5 @@ describe('CustomAutocomplete', () => {
             const clearButton = screen.getByText(clear.text);
             await userEvent.click(clearButton);
         });
-    }, 90000000);
+    }, 160000);
 });

package/src/common/banner/NsBanner.spec.tsx

@@ -1,28 +1,28 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { NsBanner } from '@/common/';
-import { ImageData1 } from '../card/fixtures/ImageData1';
 
 describe('Hero component', () => {
     const childText = 'Welcome to My Website';
+    const imageURL = 'https://example.com/banner.jpg';
     it('1. renders banner image and title', () => {
         const { getByAltText, getByText } = render(
-            <NsBanner image={ImageData1}>
+            <NsBanner imageUrl={imageURL} altText="Banner image">
                 <h1>{childText}</h1>
             </NsBanner>
         );
         const childElement = getByText(childText);
-        const imageElement = getByAltText(ImageData1.selected?.altText || '');
+        const imageElement = getByAltText('Banner image');
         expect(childElement).toBeInTheDocument();
         expect(imageElement).toBeInTheDocument();
     });
     it('2. renders banner image and title without altText', () => {
         const { getByAltText } = render(
-            <NsBanner image={ImageData1}>
+            <NsBanner imageUrl={imageURL}>
                 <h1>{childText}</h1>
             </NsBanner>
         );
-        const imageElement = getByAltText(ImageData1.selected?.altText || '');
+        const imageElement = getByAltText('NsBanner');
         expect(imageElement).toBeInTheDocument();
     });
 });

package/src/common/banner/NsBanner.tsx

@@ -8,15 +8,30 @@ import React, { PropsWithChildren } from 'react';
 
 import { NsBannerProps } from './types.d';
 import { StyledBanner, StyledHeroText } from './NsBanner.styled';
-import { BynderMedia } from '../image/BynderMedia';
+import { NsImage } from '../';
 
 /* TODO: once we have storybook 7, we can try converting this NsImage to NsNextImage */
 const NsBanner = (props: PropsWithChildren<NsBannerProps>) => {
-    const { children, image, alignment = 'center', justify = 'start', className = '', additionalProps = {} } = props;
+    const {
+        children,
+        imageUrl,
+        altText,
+        alignment = 'center',
+        justify = 'start',
+        className = '',
+        additionalProps = {},
+    } = props;
 
     return (
         <StyledBanner className={className}>
-            <BynderMedia className="image" imageDetail={image} {...additionalProps} />
+            <NsImage
+                src={imageUrl}
+                alt={altText || 'NsBanner'}
+                id="bgImage"
+                width={0}
+                height={0}
+                {...additionalProps}
+            />
             <StyledHeroText $alignment={alignment} $justify={justify}>
                 <div className="mx-14">{children}</div>
             </StyledHeroText>

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

@@ -1,13 +1,13 @@
 import React from 'react';
 
 import { AdditionalProps } from '../common.types';
-import { BynderImageDataType } from '../image/types';
 
 export type AlignmentType = 'start' | 'center' | 'end';
 
 export type NsBannerProps = {
     children: React.ReactNode;
-    image: BynderImageDataType;
+    imageUrl: string;
+    altText?: string;
     alignment?: AlignmentType;
     justify?: AlignmentType;
     className?: string;

package/src/common/card/NsAwardCard.tsx

@@ -1,15 +1,13 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-
-import { NsTypography } from '../';
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
+import { NsImage, NsTypography } from '../';
 
 type NsAwardCardProps = {
     title: string;
     awardName: string;
     mediaOutlet: string;
-    backgroundImageDetail: BynderImageDataType;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
     className?: string;
 };
 
@@ -47,14 +45,15 @@ export default function NsAwardCard({
     title,
     awardName,
     mediaOutlet,
-    backgroundImageDetail,
+    backgroundImageUrl,
+    backgroundImageAlt,
     className,
 }: NsAwardCardProps) {
     return (
         <CardContainer className={className} role="award-card" component="div" data-testid="award-card">
-            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
             <div className="content">
-                <NsTypography weight="normal" className="title" variant="h5">
+                <NsTypography weight='normal' className="title" variant="h5">
                     {title}
                 </NsTypography>
                 <NsTypography className="content-text" variant="body-l">

package/src/common/card/NsHeroCardLevel1.tsx

@@ -1,14 +1,14 @@
+import { NsImage } from '../';
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
 import CardButton from './CardButton';
 import { NsCardButton } from './types';
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
 
 type NsHeroCardLevel1Props = {
     cardTitle: string;
     cardDescription: string;
-    backgroundImageDetail: BynderImageDataType;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
     button?: NsCardButton;
     className?: string;
     imagePosition?: 'top' | 'bottom';
@@ -76,14 +76,15 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ imagePositio
 export default function NsHeroCardLevel1({
     cardTitle,
     cardDescription,
-    backgroundImageDetail,
+    backgroundImageUrl,
+    backgroundImageAlt,
     button,
     className,
     imagePosition = 'top',
 }: NsHeroCardLevel1Props) {
     return (
         <CardContainer className={className} data-testid="hero-card-level-1" imagePosition={imagePosition}>
-            <BynderMedia className="bg-image" imageDetail={backgroundImageDetail} />
+            <NsImage variant="fill" alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-image" />
             <div className="content">
                 <article className="body-title">{cardTitle}</article>
                 <article className="body-text">{cardDescription}</article>

package/src/common/card/NsHeroCardLevel2.tsx

@@ -1,15 +1,15 @@
+import { NsImage } from '../';
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
 import CardButton from './CardButton';
 import { NsCardButton } from './types';
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
 
 type NsHeroCardLevel2Props = {
     brandName: string;
     cardTitle: string;
     cardDescription: string;
-    backgroundImageDetail: BynderImageDataType;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
     button?: NsCardButton;
     className?: string;
 };
@@ -65,13 +65,14 @@ const NsHeroCardLevel2 = ({
     brandName,
     cardTitle,
     cardDescription,
-    backgroundImageDetail,
+    backgroundImageUrl,
+    backgroundImageAlt,
     button,
     className,
 }: NsHeroCardLevel2Props) => {
     return (
         <CardContainer className={className} data-testid="hero-card-level-2">
-            <BynderMedia className="bg-image" imageDetail={backgroundImageDetail} />
+            <NsImage variant="fill" alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-image" />
             <div className="content">
                 <div className="brand-container">
                     <article>{brandName}</article>

package/src/common/card/NsLargeCard.tsx

@@ -1,15 +1,15 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
+import { NsImage } from '../';
 import CardButton from './CardButton';
 import { NsCardButton } from './types';
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
 
 type NsLargeCardProps = {
     title: string;
     subtitle?: string;
     intro: string;
-    backgroundImageDetail: BynderImageDataType;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
     isHorizontal?: boolean;
     button?: NsCardButton;
     className?: string;
@@ -71,7 +71,8 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal
 export default function NsLargeCard({
     title,
     subtitle,
-    backgroundImageDetail,
+    backgroundImageUrl,
+    backgroundImageAlt,
     intro,
     isHorizontal,
     button,
@@ -85,7 +86,7 @@ export default function NsLargeCard({
             data-testid="large-card"
             isHorizontal={isHorizontal}
         >
-            <BynderMedia className="bg-image" imageDetail={backgroundImageDetail} />
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-image" />
             <div className="content">
                 <article className="subtitle">{subtitle}</article>
                 <article className="title">{title}</article>

package/src/common/card/NsMediumCard.tsx

@@ -1,17 +1,16 @@
+import { NsCardButton } from './types';
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
 
-import { NsTypography } from '../';
-import { BynderMedia } from '../image/BynderMedia';
+import { NsImage, NsTypography } from '../';
 import CardButton from './CardButton';
-import { NsCardButton } from './types';
-import { BynderImageDataType } from '../image/types';
 
 type NsMediumCardProps = {
     title: string;
     titleFontWeight?: 'bold' | 'normal' | 'light';
     subtitle: string;
-    backgroundImageDetail: BynderImageDataType;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
     button?: NsCardButton;
     className?: string;
     fluid?: boolean;
@@ -72,7 +71,8 @@ export default function NsMediumCard({
     title,
     titleFontWeight,
     subtitle,
-    backgroundImageDetail,
+    backgroundImageUrl,
+    backgroundImageAlt,
     button,
     className,
     fluid,
@@ -87,7 +87,7 @@ export default function NsMediumCard({
             fluid={fluid || false}
             variant={button?.buttonVariant ?? ''}
         >
-            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
             <div className="content">
                 <NsTypography variant="h5" color="primary" className="title" weight={titleFontWeight}>
                     {title}

package/src/common/card/NsPost.tsx

@@ -1,12 +1,12 @@
 import Box from '@mui/material/Box';
+import { NsImage } from '../';
 import { styled } from '@nuskin/foundation-theme';
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
 
 type NsPostProps = {
     text: string;
     body: string;
-    backgroundImageDetail: BynderImageDataType;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
     className?: string;
 };
 
@@ -56,10 +56,12 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-const NsPost = ({ text, body, backgroundImageDetail, className }: NsPostProps) => {
+const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, className }: NsPostProps) => {
     return (
         <CardContainer className={className} data-testid="post-card">
-            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
+            <div className="image">
+                <NsImage height={'100%'} width={'auto'} alt={backgroundImageAlt} src={backgroundImageUrl} />
+            </div>
             <div className="content">
                 <article className="body-title">{text}</article>
                 <article className="body-text">{body}</article>

package/src/common/card/NsSmallFullCard.tsx

@@ -1,14 +1,14 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
+import { NsImage } from '../';
 import { NsCardButton } from './types';
 import CardButton from './CardButton';
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
 
 type NsSmallFullCardProps = {
     title: string;
     subtitle: string;
-    backgroundImageDetail: BynderImageDataType;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
     button?: NsCardButton;
     className?: string;
 };
@@ -66,13 +66,14 @@ const CardContainer = styled(Box)(() => {
 export default function NsSmallFullCard({
     title,
     subtitle,
-    backgroundImageDetail,
+    backgroundImageUrl,
+    backgroundImageAlt,
     button,
     className,
 }: NsSmallFullCardProps) {
     return (
         <CardContainer className={className} role="small-full-card" component="div" data-testid="small-full-card">
-            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
             <div className="gradientOverlay"></div>
             <div className="content">
                 <article className="subtitle">{subtitle}</article>

package/src/common/card/NsXLargeCard.tsx

@@ -1,14 +1,14 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
+import { NsImage } from '../';
 import CardButton from './CardButton';
 import { NsCardButton } from './types';
-import { BynderMedia } from '../image/BynderMedia';
-import { BynderImageDataType } from '../image/types';
 
 type NsXLargeCardProps = {
     title: string;
     subtitle: string;
-    backgroundImageDetail: BynderImageDataType;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
     button?: NsCardButton;
     className?: string;
 };
@@ -59,10 +59,17 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-export default function NsXLargeCard({ title, subtitle, backgroundImageDetail, button, className }: NsXLargeCardProps) {
+export default function NsXLargeCard({
+    title,
+    subtitle,
+    backgroundImageUrl,
+    backgroundImageAlt,
+    button,
+    className,
+}: NsXLargeCardProps) {
     return (
         <CardContainer className={className} role="x-large-card" component="div" data-testid="x-large-card">
-            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
             <div className="gradientOverlay"></div>
             <div className="content">
                 <article className="subtitle">{subtitle}</article>

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NsAwardCard from '../NsAwardCard';
-import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsHeroCardLevel1 component', () => {
     const props = {
         title: 'AgeLoc LumiSpa iO',
         awardName: '2023 Bronze Winner',
         mediaOutlet: 'Edison Awards',
-        backgroundImageDetail: ImageData1,
+        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', () => {

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

@@ -1,14 +1,15 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NsHeroCardLevel1 from '../NsHeroCardLevel1';
-import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsHeroCardLevel1 component', () => {
     const props = {
         cardTitle: 'A skin ready for winter',
         cardDescription:
             'We have brought these discoveries to life through our powerful skin care products and supplements.',
-        backgroundImageDetail: ImageData1,
+        backgroundImageUrl:
+            'https://media.nuskin.com/m/9734240cc191163/webimage-lash-brow-serum-carousel-image-launch.png',
+        backgroundImageAlt: 'lash brow serum carousel',
         button: {
             showButton: true,
             buttonText: 'SHOP NOW',

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

@@ -1,14 +1,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { NsHeroCardLevel2 } from '../';
-import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsHeroCardLevel2 component', () => {
     const props = {
         cardTitle: 'Current shop deals',
         cardDescription: 'Lumispa, sunscreen and more',
         brandName: 'Beauty focus™',
-        backgroundImageDetail: ImageData1,
+        backgroundImageUrl: 'https://media.nuskin.com/m/5f1c423bb57589f0/webimage-autumn-sale-carousel.png',
+        backgroundImageAlt: 'lash brow serum carousel',
         button: {
             showButton: true,
             buttonText: 'Discover more',

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

@@ -1,6 +1,5 @@
 import { render, screen } from '@testing-library/react';
 import { NsLargeCard } from '../';
-import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsLargeCard component', () => {
     const props = {
@@ -15,7 +14,9 @@ describe('NsLargeCard component', () => {
             buttonColor: 'secondary' as 'secondary',
             url: 'https://www.forceforgood.org/',
         },
-        backgroundImageDetail: ImageData1,
+        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', () => {

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NsMediumCard from '../NsMediumCard';
-import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsMediumCard component', () => {
     const props = {
@@ -16,7 +15,8 @@ describe('NsMediumCard component', () => {
             buttonColor: 'secondary' as 'secondary',
             url: '#',
         },
-        backgroundImageDetail: ImageData1,
+        backgroundImageUrl: 'https://media.nuskin.com/m/3353b9c05cb83860/Small-category-facial_moisturizers.jpg',
+        backgroundImageAlt: 'Lumi Spa',
     };
 
     it('1. renders with correct content and styles', () => {
@@ -33,7 +33,7 @@ describe('NsMediumCard component', () => {
         );
         expect(subtitleElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText(ImageData1.selected?.altText || '');
+        const imageElement = screen.getByAltText('Lumi Spa');
         expect(imageElement).toBeInTheDocument();
 
         const button = screen.queryByText('SEE WHAT WE’RE DOING');

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NsPost from '../NsPost';
-import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsPost component', () => {
     const props = {
         text: '38 New Beauty Products Our Editors Are Loving',
         body: 'SPA & BEAUTY TODAY',
-        backgroundImageDetail: ImageData1,
+        backgroundImageUrl: 'https://media.nuskin.com/m/780f8d84bcb9d5ed/Small-Essence_News.jpg',
+        backgroundImageAlt: 'small essence news',
     };
 
     it('1. renders with correct content and styles', () => {
@@ -22,7 +22,7 @@ describe('NsPost component', () => {
         const bodyElement = screen.getByText('SPA & BEAUTY TODAY');
         expect(bodyElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText(ImageData1?.selected?.altText || '');
+        const imageElement = screen.getByAltText('small essence news');
         expect(imageElement).toBeInTheDocument();
     });
 });

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NsSmallFullCard from '../NsSmallFullCard';
-import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsSmallFullCard component', () => {
     const props = {
         title: 'Title',
         subtitle: 'Subtitle',
-        backgroundImageDetail: ImageData1,
+        backgroundImageUrl: 'https://media.nuskin.com/m/4f5b0aee8fe3ff90/Small-category-makeup.jpg',
+        backgroundImageAlt: 'Facial Moisturizers',
         button: {
             showButton: true,
             buttonText: 'Placeholder',
@@ -29,7 +29,7 @@ describe('NsSmallFullCard component', () => {
         const subtitleElement = screen.getByText('Subtitle');
         expect(subtitleElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText(ImageData1.selected?.altText || '');
+        const imageElement = screen.getByAltText('Facial Moisturizers');
         expect(imageElement).toBeInTheDocument();
 
         const linkElement = screen.getByText('Placeholder');

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

@@ -1,13 +1,13 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import NsXLargeCard from '../NsXLargeCard';
-import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsXLargeCard component', () => {
     const props = {
         title: 'Title',
         subtitle: 'Subtitle',
-        backgroundImageDetail: ImageData1,
+        backgroundImageUrl: 'https://media.nuskin.com/m/4f5b0aee8fe3ff90/Small-category-makeup.jpg',
+        backgroundImageAlt: 'Facial Moisturizers',
         button: {
             showButton: true,
             buttonText: 'Discover more',
@@ -29,7 +29,7 @@ describe('NsXLargeCard component', () => {
         const titleElement = screen.getByText('Title');
         expect(titleElement).toBeInTheDocument();
 
-        const imageElement = screen.getByAltText(ImageData1.selected?.altText || '');
+        const imageElement = screen.getByAltText('Facial Moisturizers');
         expect(imageElement).toBeInTheDocument();
 
         const linkElement = screen.getByText('Discover more');

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

@@ -1,6 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsAwardCard } from '../';
-import { ImageData1 } from '../fixtures/ImageData1';
 
 type ComponentType = typeof NsAwardCard;
 type Story = StoryObj<ComponentType>;
@@ -11,11 +10,14 @@ export default {
     title: 'Components/Containers/Card/NsAwardCard',
 } as MetaStory;
 
+const host = 'https://media.nuskin.com';
+
 export const Default: Story = {
     args: {
         title: 'AgeLoc LumiSpa iO',
         awardName: '2023 Bronze Winner',
         mediaOutlet: 'Edison Awards',
-        backgroundImageDetail: ImageData1,
+        backgroundImageUrl: `${host}/m/2ec571a87dc9680c/Small-Edison-Bronze-Logo-Homepage.jpg`,
+        backgroundImageAlt: 'Edison Bronze Logo',
     },
 };