@nuskin/foundation-ui-components 1.30.2 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.30.2",
+    "version": "1.32.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -57,6 +57,7 @@
         "react-dom": "^18.2.0",
         "react-material-ui-carousel": "^3.4.2",
         "react-slick": "^0.29.0",
+        "react-window": "^1.8.10",
         "slick-carousel": "^1.8.1",
         "typescript": "^5.4.2"
     },
@@ -86,6 +87,7 @@
         "@types/ramda": "^0.29.7",
         "@types/react-slick": "^0.23.11",
         "@types/react-test-renderer": "^18.0.5",
+        "@types/react-window": "^1.8.8",
         "babel-jest": "^29.7.0",
         "babel-loader": "^9.1.3",
         "babel-plugin-emotion": "^11.0.0",

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

@@ -1,6 +1,6 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { NsInputField } from '../input';
-import { Popper } from '@mui/material';
+import { Popper, autocompleteClasses } from '@mui/material';
 const { getGenomeColor } = ColorUtils;
 
 export const StyledTextField = styled(NsInputField)`
@@ -13,9 +13,12 @@ export const StyledTextField = styled(NsInputField)`
     }
 `;
 
-export const StyledPopper = styled(Popper)`
-    width: 100% !important;
-    #custom_autocomplete_dropdown-listbox{
-        overflow-x:hidden;
-    }
-`
+export const StyledPopper = styled(Popper)({
+    [`& .${autocompleteClasses.listbox}`]: {
+        boxSizing: 'border-box',
+        '& ul': {
+            padding: 0,
+            margin: 0,
+        },
+    },
+});

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,36 +1,26 @@
-import React, {
-    PropsWithChildren,
-    ReactElement,
-    useEffect,
-    useRef,
-    useState,
-} from 'react';
+import React, { PropsWithChildren, ReactElement, useEffect, useRef, useState } from 'react';
 
 import {
     Autocomplete,
     AutocompleteRenderInputParams,
+    ListSubheader,
     Popper,
+    useMediaQuery,
+    useTheme,
 } from '@mui/material';
 
 import { LineLoader } from './helper/LineLoader';
 import { RecentClearAll } from './helper/RecentClearAll';
-import {
-    renderGroupBy,
-    renderGroupName,
-    renderOptionLabel,
-} from './helper/renderGroupName';
+import { renderGroupBy, renderOptionLabel } from './helper/renderGroupName';
 import { SeeMoreButton } from './helper/SeeMoreButton';
-import {
-    StyledPopper,
-    StyledTextField,
-} from './NsAutocomplete.styled';
-import {
-    ComponentBoxProps,
-    NsAutocompleteProps,
-    OptionsProps,
-} from './types.d';
+import { StyledPopper, StyledTextField } from './NsAutocomplete.styled';
+import { ComponentBoxProps, NsAutocompleteProps, OptionsProps } from './types.d';
+import { VariableSizeList, ListChildComponentProps } from 'react-window';
 
+const LISTBOX_PADDING = 8;
 const noop = () => {};
+const OuterElementContext = React.createContext({});
+
 const NsAutocomplete = ({
     id = 'custom_autocomplete_dropdown',
     options,
@@ -50,9 +40,10 @@ const NsAutocomplete = ({
     value,
     isFilterEnabled = true,
     fullWidth,
-}: PropsWithChildren<NsAutocompleteProps>):ReactElement => {
+    onKeypress,
+}: PropsWithChildren<NsAutocompleteProps>): ReactElement => {
+    const listboxRef = useRef<any | null>(null);
     const [scrollTopPosition, setScrollTopPosition] = useState(0);
-    const listboxRef = useRef<HTMLUListElement | null>(null);
 
     useEffect(() => {
         if (listboxRef.current && options.length > 0) {
@@ -60,6 +51,13 @@ 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)}
@@ -82,54 +80,132 @@ const NsAutocomplete = ({
             </li>
         );
 
-    const renderListBoxComponent = ({ children, ...rest }: ComponentBoxProps): React.JSX.Element => {
+    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>
+            );
+        }
+
         return (
-            <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>
+            <div component="div" {...dataSet[0]} style={inlineStyle}>
+                {renderOption(props, option)}
+            </div>
         );
     };
+
+    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
-                openOnFocus
+                open
                 id={id}
-                disablePortal
+                disableListWrap
                 className={className}
-                options={options}
                 loading={loading}
                 noOptionsText={noOptionsText}
+                PopperComponent={fullWidth ? StyledPopper : Popper}
+                ListboxComponent={ListboxComponent}
+                options={options}
                 groupBy={renderGroupBy}
                 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}
-                renderGroup={renderGroupName}
+                renderOption={(props, option, state) => [props, option, state.index] as React.ReactNode}
+                renderGroup={(params) => params as any}
                 onChange={onChange}
+                renderInput={renderInput}
                 onInputChange={onInputChange}
                 value={value}
                 onFocus={onFocus ?? noop}
@@ -140,6 +216,7 @@ const NsAutocomplete = ({
                         : (options) => options
                 }
                 freeSolo
+                onKeyDown={onKeypress}
             />
         </>
     );

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

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, SyntheticEvent } from 'react';
 
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -65,6 +65,7 @@ export default {
         iconEnd: (<NsIcon name="roundedClose" size="small" colorOverride="#F5F5F5" />) as ReactElement,
         placeholder: 'Search',
         fullWidth: false,
+        onKeypress: (e: SyntheticEvent) => console.log(e),
     },
 } as MetaStory;
 

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

@@ -17,6 +17,7 @@ export type NsAutocompleteProps = {
         reason Can be: "input" (user input), "reset" (programmatic change), "clear".
      */
     onInputChange(event: SyntheticEvent, value: string, reason: string): void;
+    onKeypress?:(event:SyntheticEvent) => void;
     /*
         event The event source of the callback.
         value The new value of the component.

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>