@nuskin/foundation-ui-components 1.19.4 → 1.20.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.19.4",
+    "version": "1.20.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/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,6 +51,7 @@ export const StyledButton = styled(MUIButton)<NsButtonProps>(
             },
             ...buttonStyles,
             ...sizeStyle,
+            textTransform: 'none',
         };
     }
 );

package/src/common/card/CardButton.tsx

@@ -1,5 +1,18 @@
+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,
@@ -14,21 +27,27 @@ const CardButton = ({
     if (showButton && url) {
         return (
             <div className="cta">
-                <NsButton
-                    href={url}
-                    color={buttonColor}
-                    variant={buttonVariant}
-                    fullWidth={fullWidth}
-                    endIcon={
-                        showArrowWithText && buttonVariant === 'text' ? (
+                {buttonVariant === 'text' ? (
+                    <ButtonTextVariant href={url}>
+                        {buttonText}
+                        {showArrowWithText ? (
                             <NsIcon name="arrowRight" size="small" color="primary" />
                         ) : endIcon ? (
-                            <NsIcon name={endIcon} color={buttonColor} />
-                        ) : null
-                    }
-                >
-                    {buttonText}
-                </NsButton>
+                            <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>
+                )}
             </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 width, height;
+    let maxWidth, maxHeight;
 
     if (size === 'small') {
-        width = small.width;
-        height = small.height;
+        maxWidth = small.maxWidth;
+        maxHeight = small.maxHeight;
     } else {
-        width = large.width;
-        height = large.height;
+        maxWidth = large.maxWidth;
+        maxHeight = large.maxHeight;
     }
 
     return {
-        width,
+        maxWidth,
         display: 'flex',
         alignItems: 'start',
         justifyContent: 'center',
@@ -38,6 +38,9 @@ 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',
         },
@@ -46,13 +49,9 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ size }) => {
                 opacity: '0.7',
             },
         },
-        '.cta': {
-            marginTop: '15px',
-            width: '100%',
-        },
         '.image': {
-            width,
-            height,
+            maxWidth,
+            maxHeight,
             backgroundSize: 'cover',
             backgroundPosition: 'center',
         },
@@ -74,7 +73,7 @@ export default function NsBrandCard({
                 </NsBrandWrapper>
             </NsBgCard>
             {title ? (
-                <NsTypography weight='normal' variant="h5" className="brand-title">
+                <NsTypography variant="h3" className="brand-title">
                     {title}
                 </NsTypography>
             ) : null}

package/src/common/card/NsPost.tsx

@@ -1,5 +1,5 @@
 import Box from '@mui/material/Box';
-import { NsImage, NsTypography } from '../';
+import { NsImage } from '../';
 import { styled } from '@nuskin/foundation-theme';
 
 type NsPostProps = {
@@ -18,36 +18,40 @@ 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': {
-            paddingTop: '10px',
+            padding: '20px',
             display: 'flex',
             flexDirection: 'column',
-            minHeight: '80px',
-            justifyContent: 'space-between',
-            padding: '20px',
+            minHeight: '92px',
+            maxHeight: '92px',
+            justifyContent: 'space-around',
         },
         '.body-title': {
-            marginBottom: '5px',
+            fontSize: '18px',
+            fontWeight: 600,
             display: '-webkit-box',
             '-webkit-box-orient': 'vertical',
-            '-webkit-line-clamp': '3',
+            '-webkit-line-clamp': '1',
             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',
         },
     };
 });
@@ -56,15 +60,11 @@ const NsPost = ({ text, body, backgroundImageUrl, backgroundImageAlt, className
     return (
         <CardContainer className={className} data-testid="post-card">
             <div className="image">
-                <NsImage height="auto" width="100%" alt={backgroundImageAlt} src={backgroundImageUrl} />
+                <NsImage height={'100%'} width={'auto'} alt={backgroundImageAlt} src={backgroundImageUrl} />
             </div>
             <div className="content">
-                <NsTypography weight="normal" className="body-title" variant="h5">
-                    {text}
-                </NsTypography>
-                <NsTypography className="body-text" variant="body-l">
-                    {body}
-                </NsTypography>
+                <article className="body-title">{text}</article>
+                <article className="body-text">{body}</article>
             </div>
         </CardContainer>
     );

package/src/common/card/NsSmallFullCard.tsx

@@ -17,8 +17,9 @@ const CardContainer = styled(Box)(() => {
     return {
         backgroundColor: '#fff',
         display: 'flex',
-        height: '275px',
-        width: '250px',
+        maxHeight: '320px',
+        maxWidth: '375px',
+        overflow: 'hidden',
         position: 'relative',
         '.image': {
             width: '100%',
@@ -49,12 +50,15 @@ const CardContainer = styled(Box)(() => {
         },
         '.title': {
             color: '#fff',
-            fontSize: '22px',
+            fontSize: '26px',
             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: {
-        width: '180px',
-        height: '200px',
+        maxWidth: '160px',
+        maxHeight: '179px',
     },
     large: {
-        width: '220px',
-        height: '250px',
+        maxWidth: '190px',
+        maxHeight: '211px',
     },
 };
 

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(`
-          width: 180px;
+          maxWidth: 160px;
         `);
         expect(nsBgCardElement).toHaveStyle(`
-          width: 180px;
-          height: 200px;
+          maxWidth: 160px;
+          maxHeight: 179px;
         `);
     });
 
@@ -71,7 +71,7 @@ describe('NsBrandCard component', () => {
         const cardContainer = screen.getByTestId('brand-card') as HTMLElement;
         const computedStyles = window.getComputedStyle(cardContainer);
 
-        expect(computedStyles.width).toBe('220px');
+        expect(computedStyles.maxWidth).toBe('190px');
     });
 
     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.width).toBe('220px');
+        expect(computedStyles.maxWidth).toBe('190px');
     });
 });

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

@@ -27,6 +27,7 @@ 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,

package/src/common/dropdown/NsDropdown.styled.tsx

@@ -36,7 +36,7 @@ export const DropdownButton = styled.div`
 
 export const DropdownList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
     position: absolute;
-    z-index: 100;
+    z-index: 999;
     border: 1px solid ${({ borderColor, theme }) => paletteColor(borderColor)({ theme })};
     margin-top: 10px;
     width: 100%;