@nuskin/foundation-ui-components 1.26.1 → 1.28.0-cx130-1216.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.26.1",
+    "version": "1.28.0-cx130-1216.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -47,6 +47,7 @@
         "@mui/material": "5.14.16",
         "@mui/utils": "^5.14.16",
         "@next/font": "13.5.6",
+        "@nuskin/foundation-core-app": "^1.6.0",
         "@nuskin/foundation-theme": "^1.5.0",
         "@types/react": "^18.2.34",
         "@types/react-dom": "^18.2.14",

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

@@ -56,7 +56,7 @@ describe('CustomAutocomplete', () => {
             await userEvent.click(optionLi);
         });
         expect(onChangeMock).toHaveBeenCalled();
-    }, 160000);
+    }, 90000000);
 
     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();
-    }, 160000);
+    }, 9000000);
 
     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);
         });
-    }, 160000);
+    }, 90000000);
 });

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,11 +1,11 @@
-import { Autocomplete, AutocompleteRenderInputParams } from '@mui/material';
+import { Autocomplete, AutocompleteRenderInputParams, Popper } from '@mui/material';
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';
 
 import { LineLoader } from './helper/LineLoader';
 import { RecentClearAll } from './helper/RecentClearAll';
 import { renderGroupBy, renderGroupName, renderOptionLabel } from './helper/renderGroupName';
 import { SeeMoreButton } from './helper/SeeMoreButton';
-import { StyledTextField } from './NsAutocomplete.styled';
+import { StyledPopper, StyledTextField } from './NsAutocomplete.styled';
 import { ComponentBoxProps, NsAutocompleteProps, OptionsProps } from './types.d';
 
 const noop = () => {};
@@ -104,8 +104,8 @@ const NsAutocomplete = ({
                 getOptionLabel={renderOptionLabel}
                 renderOption={renderOption as any}
                 renderInput={renderInput}
-                // PopperComponent={fullWidth ? StyledPopper : Popper} // TODO:https://code.tls.nuskin.io/ns-am/content-foundation/nuskin-app/-/jobs/1355817
-                ListboxComponent={renderListBoxComponent as any}
+                PopperComponent={fullWidth ? StyledPopper : Popper}
+                ListboxComponent={renderListBoxComponent}
                 renderGroup={renderGroupName}
                 onChange={onChange}
                 onInputChange={onInputChange}

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

@@ -64,6 +64,7 @@ export default {
         iconStart: <NsIcon name="search" />,
         iconEnd: <NsIcon name="roundedClose" size="small" colorOverride="#F5F5F5" />,
         placeholder: 'Search',
+        fullWidth:false
     },
 } as MetaStory;
 

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 imageUrl={imageURL} altText="Banner image">
+            <NsBanner image={ImageData1}>
                 <h1>{childText}</h1>
             </NsBanner>
         );
         const childElement = getByText(childText);
-        const imageElement = getByAltText('Banner image');
+        const imageElement = getByAltText(ImageData1.selected?.altText || '');
         expect(childElement).toBeInTheDocument();
         expect(imageElement).toBeInTheDocument();
     });
     it('2. renders banner image and title without altText', () => {
         const { getByAltText } = render(
-            <NsBanner imageUrl={imageURL}>
+            <NsBanner image={ImageData1}>
                 <h1>{childText}</h1>
             </NsBanner>
         );
-        const imageElement = getByAltText('NsBanner');
+        const imageElement = getByAltText(ImageData1.selected?.altText || '');
         expect(imageElement).toBeInTheDocument();
     });
 });

package/src/common/banner/NsBanner.tsx

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

package/src/common/card/NsAwardCard.tsx

@@ -1,13 +1,15 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { NsImage, NsTypography } from '../';
+
+import { NsTypography } from '../';
+import { BynderMedia } from '../image/BynderMedia';
+import { BynderImageDataType } from '../image/types';
 
 type NsAwardCardProps = {
     title: string;
     awardName: string;
     mediaOutlet: string;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     className?: string;
 };
 
@@ -45,15 +47,14 @@ export default function NsAwardCard({
     title,
     awardName,
     mediaOutlet,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     className,
 }: NsAwardCardProps) {
     return (
         <CardContainer className={className} role="award-card" component="div" data-testid="award-card">
-            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
+            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
             <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;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
     imagePosition?: 'top' | 'bottom';
@@ -76,15 +76,14 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ imagePositio
 export default function NsHeroCardLevel1({
     cardTitle,
     cardDescription,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     button,
     className,
     imagePosition = 'top',
 }: NsHeroCardLevel1Props) {
     return (
         <CardContainer className={className} data-testid="hero-card-level-1" imagePosition={imagePosition}>
-            <NsImage variant="fill" alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-image" />
+            <BynderMedia className="bg-image" imageDetail={backgroundImageDetail} />
             <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;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
 };
@@ -65,14 +65,13 @@ const NsHeroCardLevel2 = ({
     brandName,
     cardTitle,
     cardDescription,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     button,
     className,
 }: NsHeroCardLevel2Props) => {
     return (
         <CardContainer className={className} data-testid="hero-card-level-2">
-            <NsImage variant="fill" alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-image" />
+            <BynderMedia className="bg-image" imageDetail={backgroundImageDetail} />
             <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;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     isHorizontal?: boolean;
     button?: NsCardButton;
     className?: string;
@@ -71,8 +71,7 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal
 export default function NsLargeCard({
     title,
     subtitle,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     intro,
     isHorizontal,
     button,
@@ -86,7 +85,7 @@ export default function NsLargeCard({
             data-testid="large-card"
             isHorizontal={isHorizontal}
         >
-            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="bg-image" />
+            <BynderMedia className="bg-image" imageDetail={backgroundImageDetail} />
             <div className="content">
                 <article className="subtitle">{subtitle}</article>
                 <article className="title">{title}</article>

package/src/common/card/NsMediumCard.tsx

@@ -1,16 +1,17 @@
-import { NsCardButton } from './types';
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
 
-import { NsImage, NsTypography } from '../';
+import { NsTypography } from '../';
+import { BynderMedia } from '../image/BynderMedia';
 import CardButton from './CardButton';
+import { NsCardButton } from './types';
+import { BynderImageDataType } from '../image/types';
 
 type NsMediumCardProps = {
     title: string;
     titleFontWeight?: 'bold' | 'normal' | 'light';
     subtitle: string;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
     fluid?: boolean;
@@ -71,8 +72,7 @@ export default function NsMediumCard({
     title,
     titleFontWeight,
     subtitle,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     button,
     className,
     fluid,
@@ -87,7 +87,7 @@ export default function NsMediumCard({
             fluid={fluid || false}
             variant={button?.buttonVariant ?? ''}
         >
-            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
+            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
             <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;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     className?: string;
 };
 
@@ -56,12 +56,10 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, className }: NsPostProps) => {
+const NsPost = ({ text, body, backgroundImageDetail, className }: NsPostProps) => {
     return (
         <CardContainer className={className} data-testid="post-card">
-            <div className="image">
-                <NsImage height={'100%'} width={'auto'} alt={backgroundImageAlt} src={backgroundImageUrl} />
-            </div>
+            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
             <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;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
 };
@@ -66,14 +66,13 @@ const CardContainer = styled(Box)(() => {
 export default function NsSmallFullCard({
     title,
     subtitle,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     button,
     className,
 }: NsSmallFullCardProps) {
     return (
         <CardContainer className={className} role="small-full-card" component="div" data-testid="small-full-card">
-            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
+            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
             <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;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
 };
@@ -59,17 +59,10 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-export default function NsXLargeCard({
-    title,
-    subtitle,
-    backgroundImageUrl,
-    backgroundImageAlt,
-    button,
-    className,
-}: NsXLargeCardProps) {
+export default function NsXLargeCard({ title, subtitle, backgroundImageDetail, button, className }: NsXLargeCardProps) {
     return (
         <CardContainer className={className} role="x-large-card" component="div" data-testid="x-large-card">
-            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
+            <BynderMedia className="image" imageDetail={backgroundImageDetail} />
             <div className="gradientOverlay"></div>
             <div className="content">
                 <article className="subtitle">{subtitle}</article>

package/src/common/card/fixtures/ImageData1.ts

@@ -0,0 +1,38 @@
+import { BynderImageDataType } from '../../image/types';
+
+export const ImageData1: BynderImageDataType = {
+    previewUrls: [],
+    selected: {
+        url: 'https://media.nuskin.com/transform/88d32408-ba18-4b7d-a688-4b91839bae4a/nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
+        width: null,
+        height: null,
+        fileSize: null,
+        imageType: 'transformBaseUrl',
+        altText: 'image-alt-text',
+        type: 'IMAGE',
+        fit: 'cover',
+        position: 'center center',
+        bgColor: '#ffffff',
+    },
+    isPublic: false,
+    type: 'IMAGE',
+    id: 'KEFzc2V0X2lkIDg4RDMyNDA4LUJBMTgtNEI3RC1BNjg4NEI5MTgzOUJBRTRBKQ==',
+    files: {
+        transformBaseUrl: {
+            url: 'https://media.nuskin.com/transform/88d32408-ba18-4b7d-a688-4b91839bae4a/nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
+            width: null,
+            height: null,
+            fileSize: null,
+        },
+        thumbnail: {
+            url: 'https://media.nuskin.com/m/3f1f52fbf00a552c/thul-nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image.png',
+            width: 250,
+            height: 250,
+            fileSize: null,
+        },
+    },
+    databaseId: '88D32408-BA18-4B7D-A6884B91839BAE4A',
+    name: 'nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
+    description: null,
+};
+export const ImageData1Text = JSON.stringify(ImageData1);

package/src/common/card/fixtures/ImageData2.ts

@@ -0,0 +1,38 @@
+import { BynderImageDataType } from '../../image/types';
+
+export const ImageData2: BynderImageDataType = {
+    previewUrls: [],
+    selected: {
+        url: 'https://media.nuskin.com/transform/88d32408-ba18-4b7d-a688-4b91839bae4a/nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
+        width: null,
+        height: null,
+        fileSize: null,
+        imageType: 'transformBaseUrl',
+        altText: 'image-alt-text',
+        type: 'IMAGE',
+        fit: 'cover',
+        position: 'center center',
+        bgColor: '#ffffff',
+    },
+    isPublic: false,
+    type: 'IMAGE',
+    id: 'KEFzc2V0X2lkIDg4RDMyNDA4LUJBMTgtNEI3RC1BNjg4NEI5MTgzOUJBRTRBKQ==',
+    files: {
+        transformBaseUrl: {
+            url: 'https://media.nuskin.com/transform/88d32408-ba18-4b7d-a688-4b91839bae4a/nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
+            width: null,
+            height: null,
+            fileSize: null,
+        },
+        thumbnail: {
+            url: 'https://media.nuskin.com/m/3f1f52fbf00a552c/thul-nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image.png',
+            width: 250,
+            height: 250,
+            fileSize: null,
+        },
+    },
+    databaseId: '88D32408-BA18-4B7D-A6884B91839BAE4A',
+    name: 'nu-skin-ageloc-lumispa-io-face-cleansing-beauty-device-usage-woman-blue-background-image',
+    description: null,
+};
+export const ImageData2Text = JSON.stringify(ImageData2);

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',
-        backgroundImageUrl: 'https://media.nuskin.com/m/2ec571a87dc9680c/Small-Edison-Bronze-Logo-Homepage.jpg',
-        backgroundImageAlt: 'Edison Bronze Logo',
+        backgroundImageDetail: ImageData1,
     };
 
     it('1. renders with correct content and styles', () => {

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

@@ -1,15 +1,14 @@
 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.',
-        backgroundImageUrl:
-            'https://media.nuskin.com/m/9734240cc191163/webimage-lash-brow-serum-carousel-image-launch.png',
-        backgroundImageAlt: 'lash brow serum carousel',
+        backgroundImageDetail: ImageData1,
         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™',
-        backgroundImageUrl: 'https://media.nuskin.com/m/5f1c423bb57589f0/webimage-autumn-sale-carousel.png',
-        backgroundImageAlt: 'lash brow serum carousel',
+        backgroundImageDetail: ImageData1,
         button: {
             showButton: true,
             buttonText: 'Discover more',

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

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { NsLargeCard } from '../';
+import { ImageData1 } from '../fixtures/ImageData1';
 
 describe('NsLargeCard component', () => {
     const props = {
@@ -14,9 +15,7 @@ describe('NsLargeCard component', () => {
             buttonColor: 'secondary' as 'secondary',
             url: 'https://www.forceforgood.org/',
         },
-        backgroundImageUrl:
-            'https://media.nuskin.com/m/95f9cf4143e3882/Small-About_Us-Personal-Care-Products-Image.jpg',
-        backgroundImageAlt: 'Facial Moisturizers',
+        backgroundImageDetail: ImageData1,
     };
 
     it('1. renders with correct content and styles', () => {

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

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