@nuskin/foundation-ui-components 1.19.4-cx130-1001.1 → 1.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.19.4-cx130-1001.1",
+    "version": "1.20.0",
     "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/accordion/NsAccordionHeader.tsx

@@ -1,5 +1,6 @@
-import { NsTypography, NsIcon, NsAccordionHeaderProps, AccordionVariant, NsIconProps, AccordionVariantType } from '..';
 import { styled } from '@nuskin/foundation-theme';
+
+import { AccordionVariant, AccordionVariantType, NsAccordionHeaderProps, NsIcon, NsIconProps, NsTypography } from '..';
 import { isValidIconName } from '../icon/NsIconVariants';
 import { getAccordionColor } from './colorMap';
 

package/src/common/accordion/colorMap.ts

@@ -1,101 +1,38 @@
-import {Themed} from '../common.types';
-import {AccordionVariantType} from './enums';
-import {ColorUtils, FoundationTheme} from '@nuskin/foundation-theme';
-const {isDarkMode, color} = ColorUtils;
+import { Themed } from '../common.types';
+import { ColorUtils } from '@nuskin/foundation-theme';
+import { AllColorKeyType } from '@nuskin/foundation-theme/src/common/themes/genome-colors/AllColors';
+
+import { AccordionVariant, AccordionVariantType } from './enums';
+
+const { getGenomeColor } = ColorUtils;
 const compKeys = ['contentBg', 'contentText', 'headBg', 'headText'];
 type CompKeys = (typeof compKeys)[number];
-type VariantColors = Record<
-    CompKeys,
-    {
-        light: [FoundationTheme.AppColors, string];
-        dark: [FoundationTheme.AppColors, string];
-    }
->;
+type VariantColors = Record<CompKeys, AllColorKeyType>;
 
-const colorObject: Record<string, [FoundationTheme.AppColors, string]> = {
-    n10: ['primary', 'dark'], // #121212
-    n20: ['primary', 'black'], // #252525
-    n40: ['neutral', '80'], // #444444
-    n45: ['neutral', '70'], // #5f5f5f
-    n50: ['neutral', '60'], // #8c8c8c
-    n80: ['neutral', '50'], // #b2b2b2
-    n85: ['neutral', '40'], // #e0e0e0
-    n90: ['neutral', '30'], // #ededed
-    n95: ['primary', 'gray'], // #f5f5f5
-    n100: ['primary', 'white'], // #fff
-};
 export const colorMap: Record<AccordionVariantType, VariantColors> = {
     basic: {
-        contentBg: {
-            light: colorObject.n95,
-            dark: colorObject.n20,
-        },
-        contentText: {
-            light: colorObject.n10,
-            dark: colorObject.n95,
-        },
-        headBg: {
-            light: colorObject.n100,
-            dark: colorObject.n20,
-        },
-        headText: {
-            light: colorObject.n10,
-            dark: colorObject.n95,
-        },
+        contentBg: 'N20',
+        contentText: 'N90',
+        headBg: 'N10',
+        headText: 'N90',
     },
     compact: {
-        contentBg: {
-            light: colorObject.n100,
-            dark: colorObject.n10,
-        },
-        contentText: {
-            light: colorObject.n10,
-            dark: colorObject.n90,
-        },
-        headBg: {
-            light: colorObject.n100,
-            dark: colorObject.n10,
-        },
-        headText: {
-            light: colorObject.n10,
-            dark: colorObject.n90,
-        },
+        contentBg: 'N10',
+        contentText: 'N90',
+        headBg: 'N10',
+        headText: 'N90',
     },
     gray: {
-        contentBg: {
-            light: colorObject.n85,
-            dark: colorObject.n40,
-        },
-        contentText: {
-            light: colorObject.n40,
-            dark: colorObject.n85,
-        },
-        headBg: {
-            light: colorObject.n90,
-            dark: colorObject.n45,
-        },
-        headText: {
-            light: colorObject.n45,
-            dark: colorObject.n90,
-        },
+        contentBg: 'N40',
+        contentText: 'N80',
+        headBg: 'N30',
+        headText: 'N70',
     },
     stripe: {
-        contentBg: {
-            light: colorObject.n90,
-            dark: colorObject.n45,
-        },
-        contentText: {
-            light: colorObject.n45,
-            dark: colorObject.n90,
-        },
-        headBg: {
-            light: colorObject.n100,
-            dark: colorObject.n40,
-        },
-        headText: {
-            light: colorObject.n40,
-            dark: colorObject.n100,
-        },
+        contentBg: 'N30',
+        contentText: 'N70',
+        headBg: 'N10',
+        headText: 'N80',
     },
 };
 
@@ -104,13 +41,14 @@ type GetAccordionColor = {
     invert: boolean;
     keys: CompKeys[];
 } & Themed;
-export const getAccordionColor = ({theme, variant, invert, keys}: GetAccordionColor): Record<CompKeys, string> => {
-    const isDark = invert ? !isDarkMode({theme}) : isDarkMode({theme});
-    const darkLabel = isDark ? 'dark' : 'light';
+export const getAccordionColor = ({ theme, variant, invert, keys }: GetAccordionColor): Record<CompKeys, string> => {
     const result: Record<string, string> = {};
+    if (!Object.values(AccordionVariant).includes(variant)) {
+        throw new Error(`Invalid variant ${variant}`);
+    }
     for (const colorKey of keys) {
-        const [appColorBg, appSubColorBg] = colorMap[variant][colorKey][darkLabel];
-        const colorValue = color(appColorBg, appSubColorBg)({theme});
+        const appColorKey = colorMap[variant][colorKey];
+        const colorValue = getGenomeColor(theme, appColorKey, invert ? 'dark' : 'light');
         result[colorKey] = colorValue;
     }
     return result;

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

@@ -51,7 +51,6 @@ export const StyledButton = styled(MUIButton)<NsButtonProps>(
             },
             ...buttonStyles,
             ...sizeStyle,
-            textTransform: 'none',
         };
     }
 );

package/src/common/card/CardButton.tsx

@@ -1,18 +1,5 @@
-import { Button } from '@mui/material';
 import { NsButton, NsIcon } from '../';
 import { NsCardButton } from './types';
-import { styled } from '@nuskin/foundation-theme';
-
-const ButtonTextVariant = styled(Button)(() => {
-    return {
-        padding: 0,
-        borderBottom: '1px solid black',
-        borderRadius: 0,
-        textTransform: 'none',
-        fontSize: '14px',
-        fontWeight: 600,
-    };
-});
 
 const CardButton = ({
     url,
@@ -27,27 +14,21 @@ const CardButton = ({
     if (showButton && url) {
         return (
             <div className="cta">
-                {buttonVariant === 'text' ? (
-                    <ButtonTextVariant href={url}>
-                        {buttonText}
-                        {showArrowWithText ? (
+                <NsButton
+                    href={url}
+                    color={buttonColor}
+                    variant={buttonVariant}
+                    fullWidth={fullWidth}
+                    endIcon={
+                        showArrowWithText && buttonVariant === 'text' ? (
                             <NsIcon name="arrowRight" size="small" color="primary" />
                         ) : endIcon ? (
-                            <NsIcon name={endIcon} size="small" color="primary" />
-                        ) : null}
-                    </ButtonTextVariant>
-                ) : (
-                    <NsButton
-                        href={url}
-                        color={buttonColor}
-                        variant={buttonVariant}
-                        fullWidth={fullWidth}
-                        endIcon={endIcon ? <NsIcon name={endIcon} color={buttonColor} /> : null}
-                        className="cta-text"
-                    >
-                        {buttonText}
-                    </NsButton>
-                )}
+                            <NsIcon name={endIcon} color={buttonColor} />
+                        ) : null
+                    }
+                >
+                    {buttonText}
+                </NsButton>
             </div>
         );
     }

package/src/common/card/NsBrandCard.tsx

@@ -19,18 +19,18 @@ type NsBrandCardProps = {
 
 const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
     const { small, large } = cardSizes;
-    let maxWidth, maxHeight;
+    let width, height;
 
     if (size === 'small') {
-        maxWidth = small.maxWidth;
-        maxHeight = small.maxHeight;
+        width = small.width;
+        height = small.height;
     } else {
-        maxWidth = large.maxWidth;
-        maxHeight = large.maxHeight;
+        width = large.width;
+        height = large.height;
     }
 
     return {
-        maxWidth,
+        width,
         display: 'flex',
         alignItems: 'start',
         justifyContent: 'center',
@@ -38,9 +38,6 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
         flexDirection: 'column',
         '.brand-title': {
             marginTop: '15px',
-            fontSize: '18px',
-            fontWeight: 600,
-            lineHeight: '26px',
             display: 'inline-block',
             wordBreak: 'break-word',
         },
@@ -49,9 +46,13 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
                 opacity: '0.7',
             },
         },
+        '.cta': {
+            marginTop: '15px',
+            width: '100%',
+        },
         '.image': {
-            maxWidth,
-            maxHeight,
+            width,
+            height,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
         },
@@ -73,7 +74,7 @@ export default function NsBrandCard({
                 </NsBrandWrapper>
             </NsBgCard>
             {title ? (
-                <NsTypography variant="h3" className="brand-title">
+                <NsTypography weight='normal' variant="h5" className="brand-title">
                     {title}
                 </NsTypography>
             ) : null}

package/src/common/card/NsCheckoutCard.tsx

@@ -15,7 +15,7 @@ const CardContainer = styled(Box)(() => {
     return {
         backgroundColor: '#fff',
         display: 'flex',
-        width: '345px',
+        maxWidth: '345px',
         height: 'auto',
         border: '2px solid #B2B2B2',
         borderRadius: '2px',

package/src/common/card/NsHeroCardLevel1.tsx

@@ -23,8 +23,8 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ imagePositio
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
-        width: '100%',
-        height: '500px',
+        maxWidth: '820px',
+        height: '532px',
         flexDirection: 'row',
         '.content': {
             width: '50%',

package/src/common/card/NsHeroCardLevel2.tsx

@@ -22,8 +22,8 @@ const CardContainer = styled(Box)(() => {
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
-        height: '250px',
-        width: '100%',
+        height: '236px',
+        maxWidth: '536px',
         '.content': {
             height: '100%',
             padding: '50px',

package/src/common/card/NsIconText.tsx

@@ -16,7 +16,7 @@ const CardContainer = styled(Box)(() => {
         position: 'relative',
         overflow: 'hidden',
         height: 'auto',
-        width: '222px',
+        maxWidth: '222px',
         backgroundColor: '#F5F5F5',
         padding: '20px',
         justifyContent: 'center',

package/src/common/card/NsPost.tsx

@@ -1,5 +1,5 @@
 import Box from '@mui/material/Box';
-import { NsImage } from '../';
+import { NsImage, NsTypography } from '../';
 import { styled } from '@nuskin/foundation-theme';
 
 type NsPostProps = {
@@ -18,40 +18,36 @@ const CardContainer = styled(Box)(() => {
         wordWrap: 'break-word' as 'break-word',
         position: 'relative',
         overflow: 'hidden',
+        height: 'auto',
         maxWidth: '165px',
-        height: '272px',
         backgroundColor: '#fff',
-        '.image': {
-            height: '180px',
-            overflow: 'hidden',
-            objectFit: 'contain',
-        },
         '.content': {
-            padding: '20px',
+            paddingTop: '10px',
             display: 'flex',
             flexDirection: 'column',
-            minHeight: '92px',
-            maxHeight: '92px',
-            justifyContent: 'space-around',
+            minHeight: '80px',
+            justifyContent: 'space-between',
+            padding: '20px',
         },
         '.body-title': {
-            fontSize: '18px',
-            fontWeight: 600,
+            marginBottom: '5px',
             display: '-webkit-box',
             '-webkit-box-orient': 'vertical',
-            '-webkit-line-clamp': '1',
+            '-webkit-line-clamp': '3',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
+            fontSize: '18px',
+            fontWeight: 600,
+            lineHeight: '22px',
+            fontFamily: 'Inter',
         },
         '.body-text': {
-            fontSize: '12px',
-            fontWeight: 700,
-            display: '-webkit-box',
-            '-webkit-box-orient': 'vertical',
-            '-webkit-line-clamp': '1',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
             color: '#8C8C8C',
+            margin: '0px',
+            fontSize: '16px',
+            fontWeight: 600,
+            lineHeight: '16px',
+            fontFamily: 'Inter',
         },
     };
 });
@@ -60,11 +56,15 @@ const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, className
     return (
         <CardContainer className={className} data-testid="post-card">
             <div className="image">
-                <NsImage height={'100%'} width={'auto'} alt={backgroundImageAlt} src={backgroundImageUrl} />
+                <NsImage height="auto" width="100%" alt={backgroundImageAlt} src={backgroundImageUrl} />
             </div>
             <div className="content">
-                <article className="body-title">{text}</article>
-                <article className="body-text">{body}</article>
+                <NsTypography weight="normal" className="body-title" variant="h5">
+                    {text}
+                </NsTypography>
+                <NsTypography className="body-text" variant="body-l">
+                    {body}
+                </NsTypography>
             </div>
         </CardContainer>
     );

package/src/common/card/NsSmallFullCard.tsx

@@ -17,9 +17,8 @@ const CardContainer = styled(Box)(() => {
     return {
         backgroundColor: '#fff',
         display: 'flex',
-        maxHeight: '320px',
-        maxWidth: '375px',
-        overflow: 'hidden',
+        height: '275px',
+        width: '250px',
         position: 'relative',
         '.image': {
             width: '100%',
@@ -50,15 +49,12 @@ const CardContainer = styled(Box)(() => {
         },
         '.title': {
             color: '#fff',
-            fontSize: '26px',
+            fontSize: '22px',
             fontWeight: '400',
             marginTop: '20px',
         },
         '.cta': {
             marginTop: '20px',
-            maxWidth: '208px',
-            borderRadius: '4px',
-            overflow: 'hidden',
         },
     };
 });

package/src/common/card/cardSizes.ts

@@ -1,11 +1,11 @@
 const cardSizes = {
     small: {
-        maxWidth: '160px',
-        maxHeight: '179px',
+        width: '180px',
+        height: '200px',
     },
     large: {
-        maxWidth: '190px',
-        maxHeight: '211px',
+        width: '220px',
+        height: '250px',
     },
 };
 

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

@@ -58,11 +58,11 @@ describe('NsBrandCard component', () => {
         const cardContainer = container.firstChild;
         const nsBgCardElement = cardContainer?.firstChild;
         expect(cardContainer).toHaveStyle(`
-          maxWidth: 160px;
+          width: 180px;
         `);
         expect(nsBgCardElement).toHaveStyle(`
-          maxWidth: 160px;
-          maxHeight: 179px;
+          width: 180px;
+          height: 200px;
         `);
     });
 
@@ -71,7 +71,7 @@ describe('NsBrandCard component', () => {
         const cardContainer = screen.getByTestId('brand-card') as HTMLElement;
         const computedStyles = window.getComputedStyle(cardContainer);
 
-        expect(computedStyles.maxWidth).toBe('190px');
+        expect(computedStyles.width).toBe('220px');
     });
 
     it('7. renders with default styles when size is not provided', () => {
@@ -79,6 +79,6 @@ describe('NsBrandCard component', () => {
         const cardContainer = screen.getByTestId('brand-card') as HTMLElement;
         const computedStyles = window.getComputedStyle(cardContainer);
 
-        expect(computedStyles.maxWidth).toBe('190px');
+        expect(computedStyles.width).toBe('220px');
     });
 });

package/src/common/card/stories/NsSmallFullCard.stories.tsx

@@ -27,7 +27,6 @@ export const Default: Story = {
             buttonVariant: 'contained',
             buttonColor: 'primary',
             url: '#',
-            fullWidth: true,
         },
     },
 };

package/src/common/carousal/NsScrollingCarousal.tsx

@@ -1,7 +1,8 @@
+import { styled } from '@nuskin/foundation-theme';
 import React, { useMemo } from 'react';
 import Slider from 'react-slick';
+
 import { NsScrollingCarousalProps } from '../';
-import { styled } from '@nuskin/foundation-theme';
 
 type StyledType = {
     dotsBottomPixel?: number;
@@ -35,7 +36,7 @@ const NsScrollingCarousal = ({
             adaptiveHeight: true,
             arrows: true,
             draggable: true,
-            dots: true,
+            dots: false,
             infinite: true,
             speed: scrollSeconds * 1000 || 500, // speed = animation speed in milliseconds
             slidesToShow: 1,