@nuskin/foundation-ui-components 1.29.1 → 1.30.0

package/src/common/breadcrumb/NsBreadcrumb.tsx

@@ -4,17 +4,32 @@
  * @description NsBreadcrumb component with a navigation items array props
  */
 
-import { PropsWithChildren } from 'react';
+import {
+    PropsWithChildren,
+    ReactElement,
+} from 'react';
 
-import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbList, BreadcrumbStyledLink } from './NsBreadcrumb.styled';
-import { NsTypography, NsIcon } from '../';
-import { NsBreadcrumbProps, ItemProps } from './types.d';
 import { useTheme } from '@mui/material/styles';
 import { ColorUtils } from '@nuskin/foundation-theme';
 
+import {
+    NsIcon,
+    NsTypography,
+} from '../';
+import {
+    BreadcrumbContainer,
+    BreadcrumbItem,
+    BreadcrumbList,
+    BreadcrumbStyledLink,
+} from './NsBreadcrumb.styled';
+import {
+    ItemProps,
+    NsBreadcrumbProps,
+} from './types.d';
+
 const { color } = ColorUtils;
 
-const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>) => {
+const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>):ReactElement => {
     const { items, underline = true, separator = 'chevronRight' } = props;
 
     const theme = useTheme();

package/src/common/button/NsButton.stories.tsx

@@ -1,11 +1,17 @@
-import React from 'react';
-import type { StoryObj, Meta } from '@storybook/react';
-import { NsButton } from './';
-import { ShoppingCart } from '@mui/icons-material';
+import React, { ReactElement } from 'react';
+
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/jest';
+import { ShoppingCart } from '@mui/icons-material';
 import { nuskinTheme } from '@nuskin/foundation-theme';
+import { expect } from '@storybook/jest';
+import type {
+    Meta,
+    StoryObj,
+} from '@storybook/react';
+import { within } from '@storybook/testing-library';
+
+import { NsButton } from './';
+
 const { palette } = nuskinTheme;
 
 type ComponentType = typeof NsButton;
@@ -44,7 +50,7 @@ export const button: Story = {
 };
 
 export const IconOnlyButton: Story = {
-    render: (args: any) => (
+    render: (args: any):ReactElement => (
         <NsButton {...args} iconOnly darkModeEnabled={false}>
             <ShoppingCart />
         </NsButton>
@@ -62,7 +68,7 @@ export const IconOnlyButton: Story = {
     },
 };
 export const ButtonWithIcon: Story = {
-    render: (args: any) => (
+    render: (args: any):ReactElement => (
         <NsButton {...args} darkModeEnabled={false} startIcon={<ShoppingCart />}>
             Add to Cart
         </NsButton>

package/src/common/button/NsButton.tsx

@@ -1,12 +1,15 @@
-import { PropsWithChildren } from 'react';
+import {
+    PropsWithChildren,
+    ReactElement,
+} from 'react';
+
 import { useTheme } from '@mui/material/styles';
 
+import { NsIcon } from '../icon';
 import { StyledButton } from './NsButton.styled';
-
 import { NsButtonProps } from './types.d';
-import { NsIcon } from '../icon';
 
-const NsButton = ({ children, darkModeEnabled = true, ...props }: PropsWithChildren<NsButtonProps>) => {
+const NsButton = ({ children, darkModeEnabled = true, ...props }: PropsWithChildren<NsButtonProps>):ReactElement => {
     const { color, startIconName, endIconName, variant } = props;
     const { palette } = useTheme();
     // TODO: remove any

package/src/common/card/CardButton.tsx

@@ -1,9 +1,10 @@
-import { NsCardButton } from './types';
+import { ReactElement } from 'react';
+
 import { Button } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
 
 import { NsButton, NsIcon } from '../';
+import { NsCardButton } from './types';
 
 const ButtonTextVariant = styled(Button)(() => {
     return {
@@ -25,7 +26,7 @@ const CardButton = ({
     buttonColor = 'primary',
     fullWidth = false,
     showArrowWithText = false,
-}: NsCardButton): ReactNode => {
+}: NsCardButton): ReactElement | null => {
     if (showButton && url) {
         return (
             <div className="cta">

package/src/common/card/NsAwardCard.tsx

@@ -1,15 +1,17 @@
+import { ReactElement } from 'react';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
 
-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;
 };
 
@@ -47,13 +49,12 @@ export default function NsAwardCard({
     title,
     awardName,
     mediaOutlet,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     className,
-}: NsAwardCardProps): ReactNode {
+}: NsAwardCardProps): ReactElement {
     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">
                     {title}

package/src/common/card/NsBgCard.tsx

@@ -1,5 +1,6 @@
 import Card from '@mui/material/Card';
 import { styled } from '@nuskin/foundation-theme';
+
 import { shouldNotForwardPropsWithKeys } from '../util';
 
 type NsBgCardProps = {

package/src/common/card/NsBrandCard.tsx

@@ -1,11 +1,14 @@
+import { ReactElement } from 'react';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
+
 import { NsTypography } from '../';
-import NsBrandWrapper from './NsBrandWrapper';
-import NsBrandLogo from './NsBrandLogo';
-import NsBgCard from './NsBgCard';
-import cardSizes from './cardSizes';
 import CardButton from './CardButton';
+import cardSizes from './cardSizes';
+import NsBgCard from './NsBgCard';
+import NsBrandLogo from './NsBrandLogo';
+import NsBrandWrapper from './NsBrandWrapper';
 import { NsCardButton } from './types';
 
 type NsBrandCardProps = {
@@ -64,7 +67,7 @@ export default function NsBrandCard({
     button,
     size,
     className,
-}: NsBrandCardProps) {
+}: NsBrandCardProps): ReactElement {
     return (
         <CardContainer className={className} role="brand-card" component="div" data-testid="brand-card" size={size}>
             <NsBgCard backgroundImageUrl={backgroundImageUrl} className="image">

package/src/common/card/NsBrandWrapper.tsx

@@ -1,5 +1,6 @@
+import { PropsWithChildren, ReactElement } from 'react';
+
 import Box from '@mui/material/Box';
-import { PropsWithChildren } from 'react';
 import { styled } from '@nuskin/foundation-theme';
 
 const Wrapper = styled(Box)(() => {
@@ -21,6 +22,6 @@ const Wrapper = styled(Box)(() => {
     };
 });
 
-export default function NsBrandWrapper({ children }: PropsWithChildren) {
+export default function NsBrandWrapper({ children }: PropsWithChildren): ReactElement {
     return <Wrapper className="logo-wrapper">{children}</Wrapper>;
 }

package/src/common/card/NsCheckoutCard.tsx

@@ -1,7 +1,9 @@
+import { ReactElement, useState } from 'react';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
+
 import { NsIcon, NsIconNameType, NsLink } from '../';
-import { useState } from 'react';
 
 type NsCheckoutCardProps = {
     icon: NsIconNameType;
@@ -59,7 +61,7 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-export default function NsCheckoutCard({ title, icon, linkText, url, className }: NsCheckoutCardProps) {
+export default function NsCheckoutCard({ title, icon, linkText, url, className }: NsCheckoutCardProps): ReactElement {
     const [dropdownIcon, setDropdownIcon] = useState(false);
     const handleClick = () => {
         setDropdownIcon(!dropdownIcon);

package/src/common/card/NsHeroCardLevel1.tsx

@@ -1,16 +1,17 @@
-import { NsCardButton } from './types';
+import { ReactElement } from 'react';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
 
-import { NsImage } from '../';
+import { BynderMedia } from '../image/BynderMedia';
+import { BynderImageDataType } from '../image/types';
 import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsHeroCardLevel1Props = {
     cardTitle: string;
     cardDescription: string;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
     imagePosition?: 'top' | 'bottom';
@@ -78,15 +79,14 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ imagePositio
 export default function NsHeroCardLevel1({
     cardTitle,
     cardDescription,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     button,
     className,
     imagePosition = 'top',
-}: NsHeroCardLevel1Props): ReactNode {
+}: NsHeroCardLevel1Props): ReactElement {
     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,17 +1,18 @@
-import { NsCardButton } from './types';
+import { ReactElement } from 'react';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
 
-import { NsImage } from '../';
+import { BynderMedia } from '../image/BynderMedia';
+import { BynderImageDataType } from '../image/types';
 import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsHeroCardLevel2Props = {
     brandName: string;
     cardTitle: string;
     cardDescription: string;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
 };
@@ -67,14 +68,13 @@ const NsHeroCardLevel2 = ({
     brandName,
     cardTitle,
     cardDescription,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     button,
     className,
-}: NsHeroCardLevel2Props): ReactNode => {
+}: NsHeroCardLevel2Props): ReactElement => {
     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/NsIconText.tsx

@@ -1,6 +1,7 @@
+import { ReactElement } from 'react';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
 
 type NsIconTextProps = {
     text: string;
@@ -43,7 +44,7 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-const Icon = (): ReactNode => {
+const Icon = (): ReactElement => {
     return (
         <div className="icon">
             <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 80 80" fill="none">

package/src/common/card/NsLargeCard.tsx

@@ -1,17 +1,18 @@
-import { NsCardButton } from './types';
+import { ReactElement } from 'react';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
 
-import { NsImage } from '../';
+import { BynderMedia } from '../image/BynderMedia';
+import { BynderImageDataType } from '../image/types';
 import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsLargeCardProps = {
     title: string;
     subtitle?: string;
     intro: string;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     isHorizontal?: boolean;
     button?: NsCardButton;
     className?: string;
@@ -73,13 +74,12 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal
 export default function NsLargeCard({
     title,
     subtitle,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     intro,
     isHorizontal,
     button,
     className,
-}: NsLargeCardProps): ReactNode  {
+}: NsLargeCardProps): ReactElement {
     return (
         <CardContainer
             className={className}
@@ -88,7 +88,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,17 +1,19 @@
-import { NsCardButton } from './types';
+import { ReactElement } from 'react';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
 
-import { NsImage, NsTypography } from '../';
+import { NsTypography } from '../';
+import { BynderMedia } from '../image/BynderMedia';
+import { BynderImageDataType } from '../image/types';
 import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsMediumCardProps = {
     title: string;
     titleFontWeight?: 'bold' | 'normal' | 'light';
     subtitle: string;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
     fluid?: boolean;
@@ -72,13 +74,12 @@ export default function NsMediumCard({
     title,
     titleFontWeight,
     subtitle,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     button,
     className,
     fluid,
     showArrowWithButtonText = false,
-}: NsMediumCardProps): ReactNode {
+}: NsMediumCardProps): ReactElement {
     return (
         <CardContainer
             className={className}
@@ -88,7 +89,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,14 +1,15 @@
+import { ReactElement } from 'react';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
 
-import { NsImage } from '../';
+import { BynderMedia } from '../image/BynderMedia';
+import { BynderImageDataType } from '../image/types';
 
 type NsPostProps = {
     text: string;
     body: string;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     className?: string;
 };
 
@@ -58,12 +59,10 @@ const CardContainer = styled(Box)(() => {
     };
 });
 
-const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, className }: NsPostProps): ReactNode => {
+const NsPost = ({ text, body, backgroundImageDetail, className }: NsPostProps): ReactElement => {
     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,16 +1,17 @@
-import { NsCardButton } from './types';
+import { ReactElement } from 'react';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
 
-import { NsImage } from '../';
+import { BynderMedia } from '../image/BynderMedia';
+import { BynderImageDataType } from '../image/types';
 import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsSmallFullCardProps = {
     title: string;
     subtitle: string;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
 };
@@ -68,14 +69,13 @@ const CardContainer = styled(Box)(() => {
 export default function NsSmallFullCard({
     title,
     subtitle,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     button,
     className,
-}: NsSmallFullCardProps):ReactNode {
+}: NsSmallFullCardProps): ReactElement {
     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,16 +1,17 @@
-import { NsCardButton } from './types';
+import { ReactElement } from 'react';
+
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
 
-import { NsImage } from '../';
+import { BynderMedia } from '../image/BynderMedia';
+import { BynderImageDataType } from '../image/types';
 import CardButton from './CardButton';
+import { NsCardButton } from './types';
 
 type NsXLargeCardProps = {
     title: string;
     subtitle: string;
-    backgroundImageUrl: string;
-    backgroundImageAlt: string;
+    backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
 };
@@ -64,14 +65,13 @@ const CardContainer = styled(Box)(() => {
 export default function NsXLargeCard({
     title,
     subtitle,
-    backgroundImageUrl,
-    backgroundImageAlt,
+    backgroundImageDetail,
     button,
     className,
-}: NsXLargeCardProps): ReactNode  {
+}: NsXLargeCardProps): ReactElement {
     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', () => {