@nuskin/foundation-ui-components 1.31.0 → 1.32.1-td-849.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.31.0",
+    "version": "1.32.1-td-849.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,19 +1,30 @@
 import React, { PropsWithChildren, ReactElement, useEffect, useRef, useState } from 'react';
 
-import { Autocomplete, AutocompleteRenderInputParams, ListSubheader, Popper, useMediaQuery, useTheme } from '@mui/material';
+import {
+    Autocomplete,
+    AutocompleteRenderInputParams,
+    Popper,
+} from '@mui/material';
 
 import { LineLoader } from './helper/LineLoader';
 import { RecentClearAll } from './helper/RecentClearAll';
-import { renderGroupBy, renderOptionLabel } from './helper/renderGroupName';
+import {
+    renderGroupBy,
+    renderGroupName,
+    renderOptionLabel,
+} from './helper/renderGroupName';
 import { SeeMoreButton } from './helper/SeeMoreButton';
-import { StyledPopper, StyledTextField } from './NsAutocomplete.styled';
-import { ComponentBoxProps, NsAutocompleteProps, OptionsProps } from './types.d';
-import { VariableSizeList, ListChildComponentProps } from 'react-window';
+import {
+    StyledPopper,
+    StyledTextField,
+} from './NsAutocomplete.styled';
+import {
+    ComponentBoxProps,
+    NsAutocompleteProps,
+    OptionsProps,
+} from './types.d';
 
-const LISTBOX_PADDING = 8;
 const noop = () => {};
-const OuterElementContext = React.createContext({});
-
 const NsAutocomplete = ({
     id = 'custom_autocomplete_dropdown',
     options,
@@ -33,10 +44,10 @@ const NsAutocomplete = ({
     value,
     isFilterEnabled = true,
     fullWidth,
-    onKeypress
-}: PropsWithChildren<NsAutocompleteProps>): ReactElement => {
-    const listboxRef = useRef<any | null>(null);
+    onKeypress,
+}: PropsWithChildren<NsAutocompleteProps>):ReactElement => {
     const [scrollTopPosition, setScrollTopPosition] = useState(0);
+    const listboxRef = useRef<HTMLUListElement | null>(null);
 
     useEffect(() => {
         if (listboxRef.current && options.length > 0) {
@@ -44,13 +55,6 @@ const NsAutocomplete = ({
         }
     }, [options, scrollTopPosition]);
 
-    const OuterElementType = React.forwardRef((props: any, ref) => {
-        const outerProps = React.useContext(OuterElementContext);
-        return <ul ref={ref} {...props} {...outerProps} />;
-    });
-
-    OuterElementType.displayName = 'OuterElementType';
-
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <StyledTextField
             {...(params as any)}
@@ -73,132 +77,54 @@ const NsAutocomplete = ({
             </li>
         );
 
-    const renderRow = (props: ListChildComponentProps) => {
-        const { data, index, style } = props;
-        const dataSet = data[index];
-        const option = dataSet?.[1];
-        const inlineStyle = {
-            top: (style.top as number) + LISTBOX_PADDING,
-        };
-
-        if (Object.hasOwn(dataSet, 'group')) {
-            return (
-                <ListSubheader key={dataSet.key} component="div" style={inlineStyle}>
-                    {dataSet.group}
-                </ListSubheader>
-            );
-        }
-
+    const renderListBoxComponent = ({ children, ...rest }: ComponentBoxProps): React.JSX.Element => {
         return (
-            <div component="div" {...dataSet[0]} style={inlineStyle}>
-                {renderOption(props, option)}
-            </div>
+            <ul
+                aria-labelledby={rest['aria-labelledby']}
+                onMouseDown={rest.onMouseDown}
+                role={rest.role}
+                id={rest.id}
+                className={rest.className}
+                ref={listboxRef}
+            >
+                <RecentClearAll
+                    show={clear?.show ?? false}
+                    text={clear?.text ?? 'Clear All'}
+                    onClick={clear?.onClear ?? noop}
+                    testId="autocomplete-clear-id"
+                    recentSearchText={clear?.recentSearchText ?? 'Your Recent Searches'}
+                />
+                {children}
+                <SeeMoreButton
+                    onSeeMore={seeMore?.onSeeMore}
+                    show={seeMore?.show}
+                    text={seeMore?.text}
+                    options={options}
+                    setScrollTopPosition={setScrollTopPosition}
+                    listboxRef={listboxRef}
+                />
+            </ul>
         );
     };
-
-    const useResetCache = (data: any) => {
-        const ref = React.useRef<VariableSizeList>(null);
-        React.useEffect(() => {
-            if (ref.current != null) {
-                ref.current.resetAfterIndex(0, true);
-            }
-        }, [data]);
-        return ref;
-    };
-
-    const ListboxComponent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLElement>>(
-        function ListboxComponent(props, ref) {
-            const { children, ...other } = props;
-            const itemData: React.ReactElement[] = [];
-            (children as React.ReactElement[]).forEach(
-                (item: React.ReactElement & { children?: React.ReactElement[] }) => {
-                    itemData.push(item);
-                    itemData.push(...(item.children || []));
-                }
-            );
-
-            const theme = useTheme();
-            const smUp = useMediaQuery(theme.breakpoints.up('sm'), {
-                noSsr: true,
-            });
-            const itemCount = itemData.length;
-            const itemSize = smUp ? 36 : 48;
-
-            const getChildSize = (child: React.ReactElement) => {
-                if (Object.hasOwn(child, 'group')) {
-                    return 48;
-                }
-
-                return itemSize;
-            };
-
-            const getHeight = () => {
-                if (itemCount > 8) {
-                    return 8 * itemSize;
-                }
-                return itemData.map(getChildSize).reduce((a, b) => a + b, 0);
-            };
-
-            const gridRef = useResetCache(itemCount);
-
-            return (
-                <>
-                    <RecentClearAll
-                        show={clear?.show ?? false}
-                        text={clear?.text ?? 'Clear All'}
-                        onClick={clear?.onClear ?? noop}
-                        testId="autocomplete-clear-id"
-                        recentSearchText={clear?.recentSearchText ?? 'Your Recent Searches'}
-                    />
-                    <div ref={ref}>
-                        <OuterElementContext.Provider value={other}>
-                            <VariableSizeList
-                                itemData={itemData}
-                                height={getHeight() + 2 * LISTBOX_PADDING}
-                                width="100%"
-                                ref={gridRef}
-                                outerElementType={OuterElementType}
-                                innerElementType="ul"
-                                itemSize={(index) => getChildSize(itemData[index])}
-                                overscanCount={5}
-                                itemCount={itemCount}
-                            >
-                                {renderRow}
-                            </VariableSizeList>
-                        </OuterElementContext.Provider>
-                    </div>
-                    <SeeMoreButton
-                        onSeeMore={seeMore?.onSeeMore}
-                        show={seeMore?.show}
-                        text={seeMore?.text}
-                        options={options}
-                        setScrollTopPosition={setScrollTopPosition}
-                        listboxRef={listboxRef}
-                    />
-                </>
-            );
-        }
-    );
-
     return (
         <>
             <LineLoader show={loading ?? false} />
             <Autocomplete
-                open
+                openOnFocus
                 id={id}
-                disableListWrap
+                disablePortal
                 className={className}
+                options={options}
                 loading={loading}
                 noOptionsText={noOptionsText}
-                PopperComponent={fullWidth ? StyledPopper : Popper}
-                ListboxComponent={ListboxComponent}
-                options={options}
                 groupBy={renderGroupBy}
                 getOptionLabel={renderOptionLabel}
-                renderOption={(props, option, state) => [props, option, state.index] as React.ReactNode}
-                renderGroup={(params) => params as any}
-                onChange={onChange}
+                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}
+                renderGroup={renderGroupName}
+                onChange={onChange}
                 onInputChange={onInputChange}
                 value={value}
                 onFocus={onFocus ?? noop}

package/src/common/card/NsAwardCard.tsx

@@ -13,6 +13,7 @@ type NsAwardCardProps = {
     mediaOutlet: string;
     backgroundImageDetail: BynderImageDataType;
     className?: string;
+    fontColor?: 'primary' | 'secondary';
 };
 
 const CardContainer = styled(Box)`
@@ -49,18 +50,19 @@ export default function NsAwardCard({
     mediaOutlet,
     backgroundImageDetail,
     className,
+    fontColor,
 }: NsAwardCardProps): ReactElement {
     return (
         <CardContainer className={className} role="award-card" component="div" data-testid="award-card">
             <BynderMedia className="image" imageDetail={backgroundImageDetail} />
             <div className="content">
-                <NsTypography weight="normal" className="title" variant="h5">
+                <NsTypography weight="normal" className="title" variant="h5" color={fontColor}>
                     {title}
                 </NsTypography>
-                <NsTypography className="content-text" variant="body-l">
+                <NsTypography className="content-text" variant="body-l" color={fontColor}>
                     {awardName}
                 </NsTypography>
-                <NsTypography className="content-text" variant="body-l">
+                <NsTypography className="content-text" variant="body-l" color={fontColor}>
                     {mediaOutlet}
                 </NsTypography>
             </div>

package/src/common/card/NsBrandCard.tsx

@@ -18,6 +18,7 @@ type NsBrandCardProps = {
     size?: 'small' | 'large';
     button?: NsCardButton;
     className?: string;
+    fontColor?: 'primary' | 'secondary';
 };
 
 const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
@@ -67,6 +68,7 @@ export default function NsBrandCard({
     button,
     size,
     className,
+    fontColor,
 }: NsBrandCardProps): ReactElement {
     return (
         <CardContainer className={className} role="brand-card" component="div" data-testid="brand-card" size={size}>
@@ -76,7 +78,7 @@ export default function NsBrandCard({
                 </NsBrandWrapper>
             </NsBgCard>
             {title ? (
-                <NsTypography variant="h3" className="brand-title">
+                <NsTypography variant="h3" className="brand-title" color={fontColor}>
                     {title}
                 </NsTypography>
             ) : null}

package/src/common/card/NsCheckoutCard.tsx

@@ -11,6 +11,7 @@ type NsCheckoutCardProps = {
     linkText: string;
     url: string;
     className?: string;
+    fontColor?: 'primary' | 'secondary';
 };
 
 const CardContainer = styled(Box)`
@@ -18,12 +19,12 @@ const CardContainer = styled(Box)`
     display: flex;
     max-width: 345px;
     height: auto;
-    border: 2px solid #B2B2B2;
+    border: 2px solid #b2b2b2;
     border-radius: 2px;
     .left-bar {
         width: 4px;
         height: auto;
-        background-color: #22D55C;
+        background-color: #22d55c;
     }
     .content {
         display: flex;
@@ -44,7 +45,7 @@ const CardContainer = styled(Box)`
         font-weight: 400;
     }
     .action-link {
-        color: #7123D9;
+        color: #7123d9;
         font-size: 14px;
         font-weight: 700;
         letter-spacing: 0.7;
@@ -57,9 +58,22 @@ const CardContainer = styled(Box)`
             cursor: pointer;
         }
     }
+    .primary {
+        color: #fff;
+    }
+    .secondary {
+        color: #000;
+    }
 `;
-    
-export default function NsCheckoutCard({ title, icon, linkText, url, className }: NsCheckoutCardProps): ReactElement {
+
+export default function NsCheckoutCard({
+    title,
+    icon,
+    linkText,
+    url,
+    className,
+    fontColor,
+}: NsCheckoutCardProps): ReactElement {
     const [dropdownIcon, setDropdownIcon] = useState(false);
     const handleClick = () => {
         setDropdownIcon(!dropdownIcon);
@@ -73,9 +87,9 @@ export default function NsCheckoutCard({ title, icon, linkText, url, className }
                     <NsIcon name={icon} />
                 </span>
                 <div className="text-content">
-                    <article className="title">{title}</article>
-                    <article className="address">Address</article>
-                    <NsLink className="action-link" href={url}>
+                    <article className={`title ${fontColor}`}>{title}</article>
+                    <article className={`address ${fontColor}`}>Address</article>
+                    <NsLink className={`action-link ${fontColor}`} href={url}>
                         {linkText}
                     </NsLink>
                 </div>

package/src/common/card/NsHeroCardLevel1.tsx

@@ -15,6 +15,7 @@ type NsHeroCardLevel1Props = {
     button?: NsCardButton;
     className?: string;
     imagePosition?: 'top' | 'bottom';
+    fontColor?: 'primary' | 'secondary';
 };
 
 const CardContainer = styled((props: any) => <Box {...props} />)(({ imagePosition }) => {
@@ -54,6 +55,12 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ imagePositio
             fontSize: '18px',
             marginBottom: '20px',
         },
+        '.primary': {
+            color: '#fff',
+        },
+        '.secondary': {
+            color: '#000',
+        },
         '.action-link': {
             marginTop: '10px',
         },
@@ -83,13 +90,14 @@ export default function NsHeroCardLevel1({
     button,
     className,
     imagePosition = 'top',
+    fontColor,
 }: NsHeroCardLevel1Props): ReactElement {
     return (
         <CardContainer className={className} data-testid="hero-card-level-1" imagePosition={imagePosition}>
             <BynderMedia className="bg-image" imageDetail={backgroundImageDetail} />
             <div className="content">
-                <article className="body-title">{cardTitle}</article>
-                <article className="body-text">{cardDescription}</article>
+                <article className={`body-title ${fontColor}`}>{cardTitle}</article>
+                <article className={`body-text ${fontColor}`}>{cardDescription}</article>
                 {button ? <CardButton {...button} /> : null}
             </div>
         </CardContainer>

package/src/common/card/NsHeroCardLevel2.tsx

@@ -15,6 +15,7 @@ type NsHeroCardLevel2Props = {
     backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
+    fontColor?: 'primary' | 'secondary';
 };
 
 const CardContainer = styled(Box)`
@@ -55,12 +56,18 @@ const CardContainer = styled(Box)`
         font-weight: 700;
         margin-bottom: 5px;
     }
-    @media (max-width:768px) {
+    .primary {
+        color: #fff;
+    }
+    .secondary {
+        color: #000;
+    }
+    @media (max-width: 768px) {
         .content {
             padding: 5%;
         }
     }
-`
+`;
 
 const NsHeroCardLevel2 = ({
     brandName,
@@ -69,16 +76,17 @@ const NsHeroCardLevel2 = ({
     backgroundImageDetail,
     button,
     className,
+    fontColor,
 }: NsHeroCardLevel2Props): ReactElement => {
     return (
         <CardContainer className={className} data-testid="hero-card-level-2">
             <BynderMedia className="bg-image" imageDetail={backgroundImageDetail} />
             <div className="content">
                 <div className="brand-container">
-                    <article>{brandName}</article>
+                    <article className={fontColor}>{brandName}</article>
                 </div>
-                <article className="body-title">{cardTitle}</article>
-                <article className="body-text">{cardDescription}</article>
+                <article className={`body-title ${fontColor}`}>{cardTitle}</article>
+                <article className={`body-text ${fontColor}`}>{cardDescription}</article>
                 <div>{button ? <CardButton {...button} /> : null}</div>
             </div>
         </CardContainer>

package/src/common/card/NsIconText.tsx

@@ -7,6 +7,7 @@ type NsIconTextProps = {
     text: string;
     body: string;
     className?: string;
+    fontColor?: 'primary' | 'secondary';
 };
 
 const CardContainer = styled(Box)`
@@ -18,7 +19,7 @@ const CardContainer = styled(Box)`
     overflow: hidden;
     height: auto;
     max-width: 222px;
-    background-color: #F5F5F5;
+    background-color: #f5f5f5;
     padding: 20px;
     justify-content: center;
     gap: 30px;
@@ -29,7 +30,7 @@ const CardContainer = styled(Box)`
     .divider {
         width: 182px;
         height: 1px;
-        background: #B2B2B2;
+        background: #b2b2b2;
     }
     .title {
         font-size: 26px;
@@ -40,6 +41,12 @@ const CardContainer = styled(Box)`
         font-weight: 400;
         font-size: 14px;
     }
+    .primary {
+        color: #fff;
+    }
+    .secondary {
+        color: #000;
+    }
 `;
 
 const Icon = (): ReactElement => {
@@ -145,13 +152,13 @@ const Icon = (): ReactElement => {
         </div>
     );
 };
-const NsIconText = ({ text, body, className }: NsIconTextProps) => {
+const NsIconText = ({ text, body, className, fontColor }: NsIconTextProps) => {
     return (
         <CardContainer className={className} data-testid="icon-text-card">
             <Icon />
-            <article className="title">{text}</article>
+            <article className={`title ${fontColor}`}>{text}</article>
             <div className="divider"></div>
-            <article className="text">{body}</article>
+            <article className={`text ${fontColor}`}>{body}</article>
         </CardContainer>
     );
 };

package/src/common/card/NsLargeCard.tsx

@@ -16,6 +16,7 @@ type NsLargeCardProps = {
     isHorizontal?: boolean;
     button?: NsCardButton;
     className?: string;
+    fontColor?: 'primary' | 'secondary';
 };
 
 const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal, matches }) => {
@@ -62,6 +63,12 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal
             fontWeight: '400',
             marginTop: '10px',
         },
+        '.primary': {
+            color: '#fff',
+        },
+        '.secondary': {
+            color: '#000',
+        },
         '.cta': {
             marginTop: '10px',
         },
@@ -79,6 +86,7 @@ export default function NsLargeCard({
     isHorizontal,
     button,
     className,
+    fontColor,
 }: NsLargeCardProps): ReactElement {
     return (
         <CardContainer
@@ -90,9 +98,9 @@ export default function NsLargeCard({
         >
             <BynderMedia className="bg-image" imageDetail={backgroundImageDetail} />
             <div className="content">
-                <article className="subtitle">{subtitle}</article>
-                <article className="title">{title}</article>
-                <article className="subtitle">{intro}</article>
+                <article className={`subtitle ${fontColor}`}>{subtitle}</article>
+                <article className={`title ${fontColor}`}>{title}</article>
+                <article className={`subtitle ${fontColor}`}>{intro}</article>
                 {button ? <CardButton {...button} /> : null}
             </div>
         </CardContainer>

package/src/common/card/NsMediumCard.tsx

@@ -18,6 +18,7 @@ type NsMediumCardProps = {
     className?: string;
     fluid?: boolean;
     showArrowWithButtonText?: boolean;
+    fontColor?: 'primary' | 'secondary';
 };
 const textVariantButton = {
     padding: '0 0 4px',
@@ -63,6 +64,12 @@ const CardContainer = styled(Box)<{ fluid: boolean; variant: string }>(({ fluid,
             fontSize: '20px',
             marginTop: '10px',
         },
+        '.primary': {
+            color: '#fff',
+        },
+        '.secondary': {
+            color: '#000',
+        },
         '.cta': {
             marginTop: 'auto',
             ...textVariantCssModification,
@@ -79,6 +86,7 @@ export default function NsMediumCard({
     className,
     fluid,
     showArrowWithButtonText = false,
+    fontColor,
 }: NsMediumCardProps): ReactElement {
     return (
         <CardContainer
@@ -91,10 +99,10 @@ export default function NsMediumCard({
         >
             <BynderMedia className="image" imageDetail={backgroundImageDetail} />
             <div className="content">
-                <NsTypography variant="h5" color="primary" className="title" weight={titleFontWeight}>
+                <NsTypography variant="h5" color={fontColor} className="title" weight={titleFontWeight}>
                     {title}
                 </NsTypography>
-                <article className="subtitle mt-3 mb-5">{subtitle}</article>
+                <article className={`subtitle mt-3 mb-5 ${fontColor}`}>{subtitle}</article>
                 {button ? <CardButton {...button} showArrowWithText={showArrowWithButtonText} /> : null}
             </div>
         </CardContainer>

package/src/common/card/NsPost.tsx

@@ -11,6 +11,7 @@ type NsPostProps = {
     body: string;
     backgroundImageDetail: BynderImageDataType;
     className?: string;
+    fontColor?: 'primary' | 'secondary';
 };
 
 const CardContainer = styled(Box)`
@@ -26,7 +27,7 @@ const CardContainer = styled(Box)`
     .image {
         height: 180px;
         overflow: hidden;
-        object-fit: contain
+        object-fit: contain;
     }
     .content {
         padding: 20px;
@@ -34,7 +35,7 @@ const CardContainer = styled(Box)`
         flex-direction: column;
         min-height: 92px;
         max-height: 92px;
-        justify-content: space-around
+        justify-content: space-around;
     }
     .body-title {
         font-size: 18px;
@@ -44,7 +45,7 @@ const CardContainer = styled(Box)`
         -webkit-line-clamp: 1;
         overflow: hidden;
         text-overflow: ellipsis;
-        margin: 0
+        margin: 0;
     }
     .body-text {
         font-size: 12px;
@@ -54,20 +55,20 @@ const CardContainer = styled(Box)`
         -webkit-line-clamp: 1;
         overflow: hidden;
         text-overflow: ellipsis;
-        color: #8C8C8C;
-        margin: 0
+        color: #8c8c8c;
+        margin: 0;
     }
 `;
 
-const NsPost = ({ text, body, backgroundImageDetail, className }: NsPostProps): ReactElement => {
+const NsPost = ({ text, body, backgroundImageDetail, className, fontColor }: NsPostProps): ReactElement => {
     return (
         <CardContainer className={className} data-testid="post-card">
             <BynderMedia className="image" imageDetail={backgroundImageDetail} />
             <article className="content">
-                <h2 className="body-title" title={text}>
+                <h2 className={`body-title ${fontColor}`} title={text}>
                     {text}
                 </h2>
-                <p className="body-text" title={body?.substring(0, 80)}>
+                <p className={`body-text ${fontColor}`} title={body?.substring(0, 80)}>
                     {body}
                 </p>
             </article>

package/src/common/card/NsSmallFullCard.tsx

@@ -14,6 +14,7 @@ type NsSmallFullCardProps = {
     backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
+    fontColor?: 'primary' | 'secondary';
 };
 
 const CardContainer = styled(Box)`
@@ -26,7 +27,7 @@ const CardContainer = styled(Box)`
     .image {
         width: 100%;
         height: 100%;
-        object-fit: cover
+        object-fit: cover;
     }
     .gradientOverlay {
         position: absolute;
@@ -34,7 +35,7 @@ const CardContainer = styled(Box)`
         left: 0;
         width: 100%;
         height: 100%;
-        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%);
     }
     .content {
         position: absolute;
@@ -42,27 +43,33 @@ const CardContainer = styled(Box)`
         width: 100%;
         padding: 40px 40px 25px 30px;
         display: flex;
-        flex-direction: column
+        flex-direction: column;
     }
     .subtitle {
         color: #fff;
         font-size: 11px;
         font-weight: 400;
-        margin-top: auto
+        margin-top: auto;
     }
     .title {
         color: #fff;
         font-size: 26px;
         font-weight: 400;
-        margin-top: 20px
+        margin-top: 20px;
     }
     .cta {
         margin-top: 20px;
         max-width: 208px;
         border-radius: 4px;
-        overflow: hidden
+        overflow: hidden;
+    }
+    .primary {
+        color: #fff;
+    }
+    .secondary {
+        color: #000;
     }
-`
+`;
 
 export default function NsSmallFullCard({
     title,
@@ -70,14 +77,15 @@ export default function NsSmallFullCard({
     backgroundImageDetail,
     button,
     className,
+    fontColor,
 }: NsSmallFullCardProps): ReactElement {
     return (
         <CardContainer className={className} role="small-full-card" component="div" data-testid="small-full-card">
             <BynderMedia className="image" imageDetail={backgroundImageDetail} />
             <div className="gradientOverlay"></div>
             <div className="content">
-                <article className="subtitle">{subtitle}</article>
-                <article className="title">{title}</article>
+                <article className={`subtitle ${fontColor}`}>{subtitle}</article>
+                <article className={`title ${fontColor}`}>{title}</article>
                 {button ? <CardButton {...button} /> : null}
             </div>
         </CardContainer>

package/src/common/card/NsXLargeCard.tsx

@@ -14,6 +14,7 @@ type NsXLargeCardProps = {
     backgroundImageDetail: BynderImageDataType;
     button?: NsCardButton;
     className?: string;
+    fontColor?: 'primary' | 'secondary';
 };
 
 const CardContainer = styled(Box)`
@@ -33,7 +34,7 @@ const CardContainer = styled(Box)`
         left: 0;
         width: 100%;
         height: 100%;
-        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
+        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, transparent 50%);
     }
     .content {
         position: absolute;
@@ -55,10 +56,16 @@ const CardContainer = styled(Box)`
         font-weight: 400;
         margin-top: 20px;
     }
+    .primary {
+        color: #fff;
+    }
+    .secondary {
+        color: #000;
+    }
     .cta {
         margin-top: 20px;
     }
-`
+`;
 
 export default function NsXLargeCard({
     title,
@@ -66,14 +73,15 @@ export default function NsXLargeCard({
     backgroundImageDetail,
     button,
     className,
+    fontColor,
 }: NsXLargeCardProps): ReactElement {
     return (
         <CardContainer className={className} role="x-large-card" component="div" data-testid="x-large-card">
             <BynderMedia className="image" imageDetail={backgroundImageDetail} />
             <div className="gradientOverlay"></div>
             <div className="content">
-                <article className="subtitle">{subtitle}</article>
-                <article className="title">{title}</article>
+                <article className={`subtitle ${fontColor}`}>{subtitle}</article>
+                <article className={`title ${fontColor}`}>{title}</article>
                 {button ? <CardButton {...button} /> : null}
             </div>
         </CardContainer>