@nuskin/foundation-ui-components 1.8.1 → 1.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.8.1",
+    "version": "1.9.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

@@ -2,15 +2,10 @@ import { NsTypography, NsIcon, NsAccordionHeaderProps, AccordionVariant, NsIconP
 import { styled } from '@nuskin/foundation-theme';
 import { isValidIconName } from '../icon/NsIconVariants';
 import { getAccordionColor } from './colorMap';
-const options = {
-    shouldForwardProp: (propKey: string) => !['variant', 'invert'].includes(propKey),
-};
+
 type StyledType = { variant: AccordionVariantType; invert: boolean };
 
-const StyledHeader = styled(
-    'header',
-    options
-)<StyledType>(({ theme, variant, invert }) => {
+const StyledHeader = styled('header')<StyledType>(({ theme, variant, invert }) => {
     const { headBg, headText } = getAccordionColor({ theme, variant, invert, keys: ['headBg', 'headText'] });
     let borderBottom = 'none';
     if (variant === AccordionVariant.Compact) {

package/src/common/accordion/NsCollapse.tsx

@@ -1,59 +1,52 @@
 import { styled } from '@nuskin/foundation-theme';
+import { isValidElement, ReactElement, useMemo } from 'react';
+
 import {
+    AccordionContentTypeObject,
+    AccordionItem,
     AccordionVariant,
     AccordionVariantType,
-    NsCollapseProps,
-    AccordionItem,
     NsAccordion,
-    AccordionContentTypeObject,
+    NsCollapseProps,
 } from '../';
 import { getAccordionColor } from './colorMap';
-import { ReactElement, isValidElement, useMemo } from 'react';
 
 const getLevelOffset = (level: number) => {
     return level > 1 ? (level - 1) * 16 : 0;
 };
+type CollapsePropsType = { variant: AccordionVariantType; level: number; invert: boolean; isChild: boolean };
 
-const options = {
-    shouldForwardProp: (key: string) => !['variant', 'level'].includes(key),
-};
+export const StyledCollapse = styled('section')<CollapsePropsType>(({ theme, variant, level, invert, isChild }) => {
+    const { contentBg, contentText } = getAccordionColor({
+        theme,
+        invert,
+        variant,
+        keys: ['contentBg', 'contentText'],
+    });
 
-export const StyledCollapse = styled(
-    'section',
-    options
-)<{ variant: AccordionVariantType; level: number; invert: boolean; isChild: boolean }>(
-    ({ theme, variant, level, invert, isChild }) => {
-        const { contentBg, contentText } = getAccordionColor({
-            theme,
-            invert,
-            variant,
-            keys: ['contentBg', 'contentText'],
-        });
-
-        let borderBottom = 'none';
-        if (variant === AccordionVariant.Compact) {
-            borderBottom = isChild ? 'none' : '1px solid rgb(0,0,0,0.125)';
-        }
-        return {
-            backgroundColor: contentBg,
-            color: contentText,
-            opacity: 0,
-            padding: '0 16px',
-            height: 0,
-            overflow: 'hidden',
-            transition: '0.3s',
-            '&.expanded': {
-                padding: `9px 0 9px ${getLevelOffset(level)}px`,
-                height: 'auto',
-                opacity: 1,
-                borderBottom,
-            },
-            '.nsa-content-padded': {
-                padding: '0 16px 16px',
-            },
-        };
+    let borderBottom = 'none';
+    if (variant === AccordionVariant.Compact) {
+        borderBottom = isChild ? 'none' : '1px solid rgb(0,0,0,0.125)';
     }
-);
+    return {
+        backgroundColor: contentBg,
+        color: contentText,
+        opacity: 0,
+        padding: '0 16px',
+        height: 0,
+        overflow: 'hidden',
+        transition: '0.3s',
+        '&.expanded': {
+            padding: `9px 0 9px ${getLevelOffset(level)}px`,
+            height: 'auto',
+            opacity: 1,
+            borderBottom,
+        },
+        '.nsa-content-padded': {
+            padding: '0 16px 16px',
+        },
+    };
+});
 
 /**
  * NsCollapse component adds css animation while showing children items if prop `isOpen` is true,

package/src/common/alert/NsAlert.tsx

@@ -1,14 +1,16 @@
 import React, { useEffect, useState } from 'react';
+
 import {
-    AlertContainer,
     Alert,
-    AlertIcon,
-    AlertHead,
+    AlertBody,
     AlertCloseButton,
+    AlertContainer,
     AlertContent,
     AlertFoot,
-    AlertBody,
+    AlertHead,
+    AlertIcon,
 } from './NsAlert.styled';
+
 import type { NsAlertProps, ContextType, AlertType } from './types.d';
 import { NsIcon } from '../icon';
 import Header, { colorMap, iconMap } from './Header';
@@ -59,7 +61,7 @@ export default function NsAlert({
                 </AlertHead>
                 {hasDismissListener && (
                     <AlertCloseButton data-testid="alert-close-button" onClick={onDismiss}>
-                        <NsIcon name="close" size="small" />
+                        <NsIcon name="close" size="small" cursor="pointer" />
                     </AlertCloseButton>
                 )}
                 <AlertContent type={alertType as AlertType}>

package/src/common/auth-dropdown/NsAuthDropdown.styled.ts

@@ -1,6 +1,5 @@
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
 import { DarkModeEnabledOption } from '../common.types';
-import { skipDarkModeEnabled } from '../util';
 
 //[TODO-Arun] - Use from custom color variables
 // const MAGENTA_COLOR = '#bb29bb';
@@ -49,10 +48,7 @@ export const Triangle = styled.div`
         box-shadow: 0 0 5px 0 ${color('neutral', '20')};
     }
 `;
-const options = {
-    shouldForwardProp: skipDarkModeEnabled,
-};
-export const AuthHead = styled('div', options)<DarkModeEnabledOption>`
+export const AuthHead = styled('div')<DarkModeEnabledOption>`
     cursor: pointer;
     padding: 5px 10px;
     display: flex;

package/src/common/autocomplete/helper/AutoCompleteButton.tsx

@@ -15,7 +15,7 @@ export const AutoCompleteButton = (props: AutoCompleteButtonProps) => {
     return (
         <li className="text-right p-3">
             <NsButton onClick={onClick} data-testid={testId}>
-                <NsTypography variant="p-xs" weight="bold">
+                <NsTypography variant="body-xs" weight="bold">
                     {text}
                 </NsTypography>
             </NsButton>

package/src/common/autocomplete/helper/renderGroupName.tsx

@@ -5,7 +5,7 @@ import { NsTypography, OptionsProps } from '../..';
 export const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (
     <li key={key}>
         {group ? (
-            <NsTypography variant="p-m" weight="bold" className="p-3">
+            <NsTypography variant="body-m" weight="bold" className="p-3">
                 {group}
             </NsTypography>
         ) : null}

package/src/common/autocomplete/mock/MockUI.tsx

@@ -8,7 +8,7 @@ const OptionUiComponent = ({ option }: ListUiProps) => {
     return (
         <ListStyled>
             <div className="item-description" role="link" tabIndex={0}>
-                <NsTypography aria-label="Nu Skin Tumbler" variant="p-m" colorOverride="#63666A">
+                <NsTypography aria-label="Nu Skin Tumbler" variant="body-m" colorOverride="#63666A">
                     <img src={option.image} alt="No-image" />
                     {option?.value}
                 </NsTypography>

package/src/common/banner/NsBanner.stories.tsx

@@ -32,7 +32,7 @@ export default {
                 <NsTypography className="w-80" variant="h1" colorOverride="#000000">
                     Limited time offers on LumiSpa iO cleansers and bundles!
                 </NsTypography>
-                <NsTypography variant="p-m" className="my-5" colorOverride="#000000">
+                <NsTypography variant="body-m" className="my-5" colorOverride="#000000">
                     Learn more about what I do and how I can help you
                 </NsTypography>
                 <NsButton variant="contained">Contact me</NsButton>

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

@@ -5,7 +5,6 @@ import { ButtonConfig } from '@nuskin/foundation-theme/src/common/themes/types/b
 
 import { NsButtonProps } from './types.d';
 import { generateContainedStyle, generateIconOnlyStyles, generateOutlinedStyle, generateTextStyles } from './helper';
-import { skipDarkModeEnabled } from '../util';
 
 const { buttonColor, paletteColor } = ColorUtils;
 
@@ -13,49 +12,45 @@ const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonCo
     const { config } = theme || {};
     return config?.components?.button?.[attribute] || '';
 };
-const options = {
-    shouldForwardProp: skipDarkModeEnabled,
-};
 
-export const StyledButton = styled(
-    MUIButton,
-    options
-)<NsButtonProps>(({ theme, color, size, darkModeEnabled, variant, iconOnly }) => {
-    const borderRadius = getButtonConfig(theme, 'borderRadius') || 0;
-    const focusBorderColor = getButtonConfig(theme, 'focusColor');
-    // TODO: remove as any from the theme and color
-    const sizeStyle = (theme as any)?.components?.button?.['size']?.[size ?? '']?.padding ?? {};
-    const btnColor = color as any;
-
-    let buttonStyles = {};
-    const hovered = buttonColor(btnColor, 'hovered')({ theme });
-    const pressed = buttonColor(btnColor, 'pressed')({ theme });
-    const focused = buttonColor(btnColor, 'focused')({ theme });
-    const textColor = paletteColor(btnColor, 'contrastText')({ theme, darkModeEnabled });
-    const backgroundColor = paletteColor(btnColor)({ theme, darkModeEnabled });
-
-    if (variant === 'contained') {
-        buttonStyles = generateContainedStyle({ backgroundColor, textColor, hovered, pressed, focused });
-    } else if (variant === 'outlined') {
-        const activeColor = paletteColor(btnColor)({ theme });
-        buttonStyles = generateOutlinedStyle({ borderColor: backgroundColor, hovered, pressed, activeColor });
-    } else if (variant === 'text') {
-        buttonStyles = generateTextStyles({ underlineColor: backgroundColor, hovered, pressed });
-    } else if (iconOnly) {
-        buttonStyles = generateIconOnlyStyles();
+export const StyledButton = styled(MUIButton)<NsButtonProps>(
+    ({ theme, color, size, darkModeEnabled, variant, iconOnly }) => {
+        const borderRadius = getButtonConfig(theme, 'borderRadius') || 0;
+        const focusBorderColor = getButtonConfig(theme, 'focusColor');
+        // TODO: remove as any from the theme and color
+        const sizeStyle = (theme as any)?.components?.button?.['size']?.[size ?? '']?.padding ?? {};
+        const btnColor = color as any;
+
+        let buttonStyles = {};
+        const hovered = buttonColor(btnColor, 'hovered')({ theme });
+        const pressed = buttonColor(btnColor, 'pressed')({ theme });
+        const focused = buttonColor(btnColor, 'focused')({ theme });
+        const textColor = paletteColor(btnColor, 'contrastText')({ theme, darkModeEnabled });
+        const backgroundColor = paletteColor(btnColor)({ theme, darkModeEnabled });
+
+        if (variant === 'contained') {
+            buttonStyles = generateContainedStyle({ backgroundColor, textColor, hovered, pressed, focused });
+        } else if (variant === 'outlined') {
+            const activeColor = paletteColor(btnColor)({ theme });
+            buttonStyles = generateOutlinedStyle({ borderColor: backgroundColor, hovered, pressed, activeColor });
+        } else if (variant === 'text') {
+            buttonStyles = generateTextStyles({ underlineColor: backgroundColor, hovered, pressed });
+        } else if (iconOnly) {
+            buttonStyles = generateIconOnlyStyles();
+        }
+
+        return {
+            gap: '10px',
+            borderRadius,
+            '&:focus': {
+                border: `1px solid ${focusBorderColor} !important`,
+            },
+            '&:disabled': {
+                backgroundColor: buttonColor(btnColor, 'disabled'),
+                color: buttonColor(btnColor, 'disabledText'),
+            },
+            ...buttonStyles,
+            ...sizeStyle,
+        };
     }
-
-    return {
-        gap: '10px',
-        borderRadius,
-        '&:focus': {
-            border: `1px solid ${focusBorderColor} !important`,
-        },
-        '&:disabled': {
-            backgroundColor: buttonColor(btnColor, 'disabled'),
-            color: buttonColor(btnColor, 'disabledText'),
-        },
-        ...buttonStyles,
-        ...sizeStyle,
-    };
-});
+);

package/src/common/card/NsAwardCard.tsx

@@ -0,0 +1,71 @@
+import Box from '@mui/material/Box';
+import { styled } from '@nuskin/foundation-theme';
+import { NsImage } from '..';
+
+type NsAwardCardProps = {
+    title: string;
+    awardName: string;
+    mediaOutlet: string;
+    backgroundImageUrl: string;
+    backgroundImageAlt: string;
+};
+
+const CardContainer = styled(Box)(() => {
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        position: 'relative',
+        backgroundColor: '#fff',
+        alignItems: 'center',
+        '.image': {
+            width: '150px',
+            height: 'auto',
+            objectFit: 'cover',
+            backgroundColor: 'red',
+        },
+        '.content': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+        },
+        '.title': {
+            fontSize: '16px',
+            fontWeight: 'bold',
+            marginTop: '30px',
+        },
+        '.awardName': {
+            fontSize: '16px',
+            fontWeight: '400',
+            marginTop: '20px',
+        },
+        '.mediaOutlet': {
+            fontSize: '11px',
+            fontWeight: '400',
+            marginTop: '20px',
+        },
+        '.action-link': {
+            marginTop: '10px',
+            fontSize: '14px',
+            alignSelf: 'start',
+        },
+    };
+});
+
+export default function NsAwardCard({
+    title,
+    awardName,
+    mediaOutlet,
+    backgroundImageUrl,
+    backgroundImageAlt,
+}: NsAwardCardProps) {
+    return (
+        <CardContainer role="award-card" component="div" data-testid="award-card">
+            <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
+            <div className="content">
+                <article className="title">{title}</article>
+                <article className="awardName">{awardName}</article>
+                <article className="mediaOutlet">{mediaOutlet}</article>
+            </div>
+        </CardContainer>
+    );
+}

package/src/common/card/NsBgCard.tsx

@@ -1,11 +1,12 @@
 import Card from '@mui/material/Card';
 import { styled } from '@nuskin/foundation-theme';
+import { shouldNotForwardPropsWithKeys } from '../util';
 
 type NsBgCardProps = {
     backgroundImageUrl: string;
 };
 const options = {
-    shouldForwardProp: (propKey: string) => propKey !== 'backgroundImageUrl',
+    shouldForwardProp: shouldNotForwardPropsWithKeys<NsBgCardProps>(['backgroundImageUrl']),
 };
 const Component = ({ backgroundImageUrl }: NsBgCardProps) => {
     const width = 256;

package/src/common/card/NsLargeCard.tsx

@@ -4,9 +4,10 @@ import { NsButton, NsIcon, NsImage, NsLink, NsIconNameType } from '..';
 
 type NsLargeCardProps = {
     title: string;
-    subtitle: string;
+    subtitle?: string;
     intro: string;
-    icon: NsIconNameType;
+    icon?: NsIconNameType;
+    buttonVariant: 'text' | 'outlined' | 'contained';
     backgroundImageUrl: string;
     backgroundImageAlt: string;
     cardLink: { href: string; title: string };
@@ -14,16 +15,16 @@ type NsLargeCardProps = {
 };
 
 const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal }) => {
-    let width = 'fit-content',
+    let width = '375px',
         paddingLeft = '0px',
         justifyContent,
-        fontSizeSub = '11px',
+        fontSizeSub = '16px',
         fontSizeTitle = '26px';
 
     if (isHorizontal) {
-        width = '400px';
+        width = 'unset';
         paddingLeft = '30px';
-        justifyContent = 'space-around';
+        justifyContent = 'center';
         fontSizeSub = '16px';
         fontSizeTitle = '36px';
     }
@@ -33,15 +34,15 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal
         display: 'flex',
         flexDirection: direction,
         position: 'relative',
+        width,
         '.image': {
             width: '375px',
-            height: '392px',
+            height: 'auto',
             objectFit: 'cover',
         },
         '.content': {
             display: 'flex',
             flexDirection: 'column',
-            width,
             paddingLeft,
             justifyContent,
         },
@@ -59,6 +60,7 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal
             display: 'flex',
             flexDirection: 'column' as 'column',
             width: 'fit-content',
+
             borderBottom: '1px solid black',
             ':hover': {
                 opacity: '0.8',
@@ -68,6 +70,7 @@ const CardContainer = styled((props: any) => <Box {...props} />)(({ isHorizontal
             marginTop: '10px',
             display: 'flex',
             fontWeight: 600,
+            width: 'fit-content',
             ':hover': {
                 textDecoration: 'none',
             },
@@ -84,6 +87,7 @@ export default function NsLargeCard({
     backgroundImageUrl,
     backgroundImageAlt,
     cardLink,
+    buttonVariant,
     intro,
     icon,
     isHorizontal,
@@ -105,11 +109,12 @@ export default function NsLargeCard({
                 ) : (
                     <NsButton
                         className="action-link"
-                        variant="outlined"
+                        variant={buttonVariant}
                         color="primary"
                         href={cardLink.href}
                         fullWidth={false}
                         darkModeEnabled={false}
+                        endIcon={buttonVariant !== 'contained' ? <NsIcon className="icon" name={icon} /> : null}
                     >
                         {cardLink.title}
                     </NsButton>

package/src/common/card/NsMediumCard.tsx

@@ -1,12 +1,15 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { NsButton, NsImage } from '..';
+import { NsButton, NsIcon, NsIconNameType, NsImage, NsTypography } from '..';
 
 type NsMediumCardProps = {
     title: string;
+    titleFontWeight?: 'bold' | 'normal' | 'light';
     subtitle: string;
+    icon?: NsIconNameType;
     backgroundImageUrl: string;
     backgroundImageAlt: string;
+    buttonVariant: 'text' | 'outlined' | 'contained';
     cardLink: { href: string; title: string };
 };
 
@@ -22,16 +25,16 @@ const CardContainer = styled(Box)(() => {
         },
         '.content': {
             display: 'flex',
+            width: '300px',
             flexDirection: 'column',
         },
         '.subtitle': {
-            fontSize: '11px',
+            fontSize: '16px',
             fontWeight: '400',
             marginTop: '10px',
         },
         '.title': {
-            fontSize: '16px',
-            fontWeight: '400',
+            fontSize: '20px',
             marginTop: '10px',
         },
         '.action-link': {
@@ -44,18 +47,30 @@ const CardContainer = styled(Box)(() => {
 
 export default function NsMediumCard({
     title,
+    titleFontWeight,
     subtitle,
     backgroundImageUrl,
     backgroundImageAlt,
     cardLink,
+    icon,
+    buttonVariant,
 }: NsMediumCardProps) {
     return (
         <CardContainer role="medium-card" component="div" data-testid="medium-card">
             <NsImage alt={backgroundImageAlt} src={backgroundImageUrl} className="image" />
             <div className="content">
-                <article className="title">{title}</article>
+                <NsTypography variant="h5" color="primary" className="title" weight={titleFontWeight}>
+                    {title}
+                </NsTypography>
                 <article className="subtitle">{subtitle}</article>
-                <NsButton className="action-link" variant="outlined" color="primary" href={cardLink.href}>
+                <NsButton
+                    className="action-link"
+                    variant={buttonVariant}
+                    color="primary"
+                    href={cardLink.href}
+                    fullWidth={false}
+                    endIcon={buttonVariant !== 'contained' ? <NsIcon className="icon" name={icon} /> : null}
+                >
                     {cardLink.title}
                 </NsButton>
             </div>

package/src/common/card/NsPost.tsx

@@ -19,17 +19,14 @@ const CardContainer = styled(Box)(() => {
         position: 'relative',
         overflow: 'hidden',
         height: 'auto',
-        width: '165px',
+        width: '200px',
         backgroundColor: '#fff',
-        '.image': {
-            width: '100%',
-            height: '180px',
-            display: 'block',
-        },
         '.content': {
-            padding: '20px',
+            padding: '10px',
             display: 'flex',
             flexDirection: 'column',
+            minHeight: '150px',
+            justifyContent: 'space-between',
         },
         '.body-title': {
             fontSize: '18px',

package/src/common/card/index.ts

@@ -11,3 +11,4 @@ export { default as NsSmallFullCard } from './NsSmallFullCard';
 export { default as NsXLargeCard } from './NsXLargeCard';
 export { default as NsLargeCard } from './NsLargeCard';
 export { default as NsMediumCard } from './NsMediumCard';
+export { default as NsAwardCard } from './NsAwardCard';

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

@@ -0,0 +1,26 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsAwardCard } from '../';
+
+type ComponentType = typeof NsAwardCard;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsAwardCard,
+    title: 'Components/Containers/Card/NsAwardCard',
+    argTypes: {},
+    decorators: [withCenterDecorator],
+} as MetaStory;
+
+const host = 'https://media.nuskin.com';
+
+export const Default: Story = {
+    args: {
+        title: 'AgeLoc LumiSpa iO',
+        awardName: '2023 Bronze Winner',
+        mediaOutlet: 'Edison Awards',
+        backgroundImageUrl: `${host}/m/2ec571a87dc9680c/Small-Edison-Bronze-Logo-Homepage.jpg`,
+        backgroundImageAlt: 'Edison Bronze Logo',
+    },
+};

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

@@ -18,15 +18,16 @@ const host = 'https://media.nuskin.com';
 export const Default: Story = {
     args: {
         isHorizontal: false,
-        title: 'Title',
+        title: 'Personal Care',
         subtitle: 'Subtitle',
-        intro: 'Introduction sentence',
+        intro: 'Nu Skin® product lines combine nature and science for skincare benefits you can see and feel.',
         icon: 'cart',
         cardLink: {
             href: 'https://www.forceforgood.org/',
-            title: 'Button Text',
+            title: 'REVEAL YOUR BEST SKIN',
         },
-        backgroundImageUrl: `${host}/m/36f2a073f3de08a2/Small-category-facial_cleansers.jpg`,
+        buttonVariant: 'outlined',
+        backgroundImageUrl: `${host}/m/95f9cf4143e3882/Small-About_Us-Personal-Care-Products-Image.jpg`,
         backgroundImageAlt: 'Facial Moisturizers',
     },
 };

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

@@ -17,12 +17,16 @@ const host = 'https://media.nuskin.com';
 
 export const Default: Story = {
     args: {
-        title: 'Introducing LumiSpa',
-        subtitle: 'Lorem ipsum dolor',
+        title: 'Sustainability',
+        titleFontWeight: 'bold',
+        subtitle:
+            'We’re committed to keeping our global communities clean, safe, and protected for the future. We’re proud to embrace sustainable practices today for a resource-rich tomorrow.',
         cardLink: {
             href: 'https://www.forceforgood.org/',
-            title: 'Button Text',
+            title: 'SEE WHAT WE’RE DOING',
         },
+        icon: 'arrowRight',
+        buttonVariant: 'outlined',
         backgroundImageUrl: `${host}/m/3353b9c05cb83860/Small-category-facial_moisturizers.jpg`,
         backgroundImageAlt: 'Lumi Spa',
     },