@nuskin/foundation-ui-components 1.8.1 → 1.9.0

package/package.json

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

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

@@ -15,8 +15,8 @@ export default {
     decorators: [withCenterDecorator],
 } as MetaStory;
 
-const text = 'Heading';
-const body = 'Date';
+const text = '38 New Beauty Products Our Editors Are Loving';
+const body = 'SPA & BEAUTY TODAY';
 const host = 'https://media.nuskin.com/';
 
 export const Default: Story = {

package/src/common/checkbox/NsCheckbox.tsx

@@ -52,7 +52,7 @@ const NsCheckbox = (props: PropsWithChildren<NsCheckboxProps>) => {
 
     const renderCheckboxLabel = useCallback(
         () => (
-            <NsTypography variant="p-l">
+            <NsTypography variant="body-l">
                 <StyledFlagLabel {...flag} size={size} testId={`${name}-flag-label`} />
                 <StyledLabel className="checkbox-label-text" isDisabled={disabled}>
                     {label}

package/src/common/link/NsLink.stories.tsx

@@ -36,7 +36,7 @@ export default {
 
 export const Links: Story = {
     render: (args: any) => (
-        <NsTypography variant="sub-h-l">
+        <NsTypography variant="title-l">
             <NsLink {...args} href={args.href} />
         </NsTypography>
     ),
@@ -45,7 +45,7 @@ export const Links: Story = {
 export const ReactComponentLink: Story = {
     render: (args: any) => (
         <NsLink {...args} href={args.href} passHref>
-            <NsTypography variant="sub-h-l">Test Link</NsTypography>
+            <NsTypography variant="title-l">Test Link</NsTypography>
         </NsLink>
     ),
 };

package/src/common/modal/helper-component/NsModalContentBox.tsx

@@ -23,7 +23,7 @@ const NsModalContentBox = ({ handleClose, statusInfo }: NsModalComponentProps) =
         <div>
             <NsModalTitle header={header} handleClose={handleClose} />
             <DialogContent>
-                <NsTypography variant="p-xs">{description}</NsTypography>
+                <NsTypography variant="body-xs">{description}</NsTypography>
             </DialogContent>
         </div>
     );

package/src/common/modal/stories/mock.tsx

@@ -18,7 +18,7 @@ export const NsModalData = {
     body: {
         show: true,
         children: (
-            <NsTypography variant="p-s">
+            <NsTypography variant="body-s">
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet sed odio donec tellus nibh dictum quis.
                 Dis tempus aliquam tristique auctor justo, lacus in pellentesque. Quam semper facilisi posuere hendrerit
                 scelerisque sed.

package/src/common/nav-product-card/NsNavProductCard.tsx

@@ -18,7 +18,7 @@ export const NsNavProductCard = ({
                 <NsTypography variant="h5" color="primary" className="mt-11 mb-3.5 underline-hover" weight="bold">
                     {productName}
                 </NsTypography>
-                <NsTypography variant="p-s" color="primary" weight="light">
+                <NsTypography variant="body-s" color="primary" weight="light">
                     {productDescription}
                 </NsTypography>
             </div>

package/src/common/progress/NsProgress.tsx

@@ -7,7 +7,7 @@ const NsProgress = (props: NsProgressProps) => {
     const { barColor, backgroundColor, height, value, body } = props;
     return (
         <StyledProgress className="ns-progress">
-            <ProgressInfo variant="p-xs" className="progress-info">
+            <ProgressInfo variant="body-xs" className="progress-info">
                 {value}
                 <span>{body ?? ' % Complete'}</span>
             </ProgressInfo>

package/src/common/text-strip/NsTextStrip.tsx

@@ -36,7 +36,7 @@ const NsTextStrip = (props: NsTextStripProps) => {
             <NsTypography variant="h5" weight="bold">
                 {text}
             </NsTypography>
-            <NsTypography variant="p-xs">
+            <NsTypography variant="body-xs">
                 {description}&nbsp;
                 {link?.href ? <NsLink href={link.href}>{link.title}</NsLink> : ''}
             </NsTypography>

package/src/common/typography/HtmlTagVariantMap.tsx

@@ -0,0 +1,24 @@
+import { HtmlTagVariant } from './types';
+
+const HtmlTagVariantMapping: Record<string, HtmlTagVariant> = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    CTA: 'span',
+    'title-l': 'h3',
+    'title-m': 'h5',
+    'title-s': 'h6',
+    'label-l': 'label',
+    'label-m': 'label',
+    'label-s': 'label',
+    'body-xl': 'p',
+    'body-l': 'p',
+    'body-m': 'p',
+    'body-s': 'p',
+    'body-xs': 'p',
+};
+
+export default HtmlTagVariantMapping;

package/src/common/typography/NsTypography.stories.tsx

@@ -20,6 +20,7 @@ export default {
     args: {
         children: 'NsTypography',
         color: 'primary',
+        renderHTMLNode:true
     },
 } as MetaStory;
 

package/src/common/typography/NsTypography.tsx

@@ -1,20 +1,25 @@
 import React, { PropsWithChildren } from 'react';
-import { NsTypographyProps } from './types.d';
+import { HtmlTagVariant, NsTypographyProps } from './types.d';
 import { StyledTypography } from './Typography.styled';
+import HtmlTagVariantMapping from './HtmlTagVariantMap';
 
 const NsTypography = ({
     children,
     fontStyle = 'normal',
     weight = 'normal',
     className = '',
-    variant = 'p-l',
+    variant = 'body-l',
     decoration = 'none',
     color = 'primary',
     additionalProps = {},
     colorOverride = '',
+    renderHTMLNode,
 }: PropsWithChildren<NsTypographyProps>) => {
+    const htmlTagVariant: HtmlTagVariant | undefined = renderHTMLNode ? HtmlTagVariantMapping[variant] : undefined;
+
     return (
         <StyledTypography
+            as={htmlTagVariant}
             fontStyle={fontStyle}
             className={className}
             weight={weight}

package/src/common/typography/Typography.styled.tsx

@@ -10,14 +10,17 @@ const variantStyles = {
     h4: 'font-size: 18px; line-height: 26px',
     h5: 'font-size: 16px; line-height: 22px',
     h6: 'font-size: 14px; line-height: 20px',
-    'sub-h-l': 'font-size: 18px; line-height: 22px; text-transform: uppercase; letter-spacing: 0.05em;',
-    'sub-h-m': 'font-size: 16px; line-height: 20px; text-transform: uppercase; letter-spacing: 0.05em;',
-    'sub-h-s': 'font-size: 14px; line-height: 18px; text-transform: uppercase; letter-spacing: 0.05em;',
-    'p-l': 'font-size: 18px; line-height: 24px',
-    'p-m': 'font-size: 16px; line-height: 22px',
-    'p-s': 'font-size: 14px; line-height: 20px',
-    'p-xs': 'font-size: 12px; line-height: 16px',
-    'p-xxs': 'font-size: 11px; line-height: 14px',
+    'title-l': 'font-size: 22px; line-height: 28px; font-weight:bold',
+    'title-m': 'font-size: 16px; line-height: 20px; font-weight:bold',
+    'title-s': 'font-size: 16px; line-height: 16px; font-weight:bold',
+    'label-l': 'font-size: 20px; line-height: 26px; font-weight:600',
+    'label-m': 'font-size: 16px; line-height: 22px; font-weight:600',
+    'label-s': 'font-size: 14px; line-height: 20px; font-weight:700',
+    'body-xl': 'font-size: 18px; line-height: 22px',
+    'body-l': 'font-size: 16px; line-height: 22px',
+    'body-m': 'font-size: 14px; line-height: 20px',
+    'body-s': 'font-size: 12px; line-height: 16px',
+    'body-xs': 'font-size: 10px; line-height: 15px',
     CTA: 'font-size: 11px; line-height: 16px',
 };
 
@@ -29,8 +32,7 @@ const fontWeightMap = {
 
 export const StyledTypography = styled.div<NsTypographyProps>`
     font-family: Inter;
-    color: ${({ color, colorOverride }) =>
-        colorOverride?.startsWith('#') ? colorOverride : paletteColor(color)};
+    color: ${({ color, colorOverride }) => (colorOverride?.startsWith('#') ? colorOverride : paletteColor(color))};
     font-weight: ${({ weight = 'normal' }) => fontWeightMap[weight]};
     font-style: ${({ fontStyle }) => fontStyle};
     ${({ variant = 'h1' }) => variantStyles[variant]};

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

@@ -8,16 +8,21 @@ export type Variants =
     | 'h4'
     | 'h5'
     | 'h6'
-    | 'sub-h-l'
-    | 'sub-h-m'
-    | 'sub-h-s'
-    | 'p-l'
-    | 'p-m'
-    | 'p-s'
-    | 'p-xs'
-    | 'p-xxs'
+    | 'title-l'
+    | 'title-m'
+    | 'title-s'
+    | 'label-l'
+    | 'label-m'
+    | 'label-s'
+    | 'body-xl'
+    | 'body-l'
+    | 'body-m'
+    | 'body-s'
+    | 'body-xs'
     | 'CTA';
 
+export type HtmlTagVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span' | 'p' | 'label';
+
 export type NsTypographyProps = {
     variant: Variants;
     decoration?: 'underline' | 'none';
@@ -25,6 +30,8 @@ export type NsTypographyProps = {
     weight?: 'bold' | 'normal' | 'light';
     color?: FoundationTheme.PaletteColors;
     component?: 'div' | 'span' | 'p';
+    as?: HtmlTagVariant;
     className?: string;
     colorOverride?: string;
+    renderHTMLNode?: boolean;
 } & AdditionalProps;