@nuskin/foundation-ui-components 1.31.0 → 1.32.1-cdb-1.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.31.0",
+    "version": "1.32.1-cdb-1.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -51,7 +51,6 @@
         "@types/react-dom": "^18.2.0",
         "cliui": "^8.0.1",
         "framer-motion": "^10.16.4",
-        "next": "13.5.6",
         "notistack": "^3.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
@@ -67,6 +66,7 @@
         "@babel/preset-react": "^7.22.15",
         "@babel/preset-typescript": "^7.23.2",
         "@emotion/jest": "^11.11.0",
+        "next": "13.5.6",
         "@nuskin/eslint-config": "^1.0.0-setup.1",
         "@storybook/addon-actions": "^7.5.1",
         "@storybook/addon-essentials": "^7.5.1",

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,6 +1,13 @@
 import React, { PropsWithChildren, ReactElement, useEffect, useRef, useState } from 'react';
 
-import { Autocomplete, AutocompleteRenderInputParams, ListSubheader, Popper, useMediaQuery, useTheme } from '@mui/material';
+import {
+    Autocomplete,
+    AutocompleteRenderInputParams,
+    ListSubheader,
+    Popper,
+    useMediaQuery,
+    useTheme,
+} from '@mui/material';
 
 import { LineLoader } from './helper/LineLoader';
 import { RecentClearAll } from './helper/RecentClearAll';
@@ -33,7 +40,7 @@ const NsAutocomplete = ({
     value,
     isFilterEnabled = true,
     fullWidth,
-    onKeypress
+    onKeypress,
 }: PropsWithChildren<NsAutocompleteProps>): ReactElement => {
     const listboxRef = useRef<any | null>(null);
     const [scrollTopPosition, setScrollTopPosition] = useState(0);

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>