@nuskin/foundation-ui-components 1.8.1 → 1.9.1

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/carousal/NsCarousal.tsx

@@ -1,11 +1,13 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { useRef, useCallback, ReactNode } from 'react';
+import { ReactNode, useCallback, useRef } from 'react';
 import Slider from 'react-slick';
-import 'slick-carousel/slick/slick.css';
-import 'slick-carousel/slick/slick-theme.css';
-import defaultCarousalSettings from './slickSetting';
+
 import CarousalControl from './CarousalControl';
+import defaultCarousalSettings from './slickSetting';
+
+import 'slick-carousel/slick/slick-theme.css';
+import 'slick-carousel/slick/slick.css';
 
 const SlickContainer = styled(Box)(() => {
     return {
@@ -18,7 +20,6 @@ const SlickContainer = styled(Box)(() => {
 });
 interface CarousalProps<T = any> {
     entries: T[];
-    // eslint-disable-next-line no-unused-vars
     renderEntry(entry: T, index: number): ReactNode;
     allEntryLink: string;
     settings: any;

package/src/common/carousal/NsScrollingCarousal.tsx

@@ -3,16 +3,11 @@ import Slider from 'react-slick';
 import { NsScrollingCarousalProps } from '../';
 import { styled } from '@nuskin/foundation-theme';
 
-const options = {
-    shouldForwardProp: (prop: string) => prop !== 'dotsBottomPixel',
+type StyledType = {
+    dotsBottomPixel?: number;
 };
 
-const StyledDiv = styled(
-    'div',
-    options
-)<{
-    dotsBottomPixel?: number;
-}>(({ dotsBottomPixel }) => {
+const StyledDiv = styled('div')<StyledType>(({ dotsBottomPixel }) => {
     return {
         '.slick-dots': {
             zIndex: 9,
@@ -50,6 +45,7 @@ const NsScrollingCarousal = ({
     }, [stillSeconds, scrollSeconds, settings]);
     return (
         <StyledDiv
+            className="scrolling-carousal-wrapper"
             dotsBottomPixel={dotsBottomPixel}
             data-testid={additionalProps?.testid ?? 'scrolling-carousal-test-id'}
         >

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/column-control/NsColumnControl.tsx

@@ -3,14 +3,17 @@ import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
 import { NsColumnControlProps, sizeObjectType } from './types.d';
 import { getColumnSizes } from './utils';
+import { shouldNotForwardPropsWithKeys } from '../util';
 
-const options = {
-    shouldForwardProp: (propKey: string) => propKey !== 'sizes',
-};
 type StyledDivProps = {
     sizes: sizeObjectType;
     gap?: number;
 };
+
+const options = {
+    shouldForwardProp: shouldNotForwardPropsWithKeys<StyledDivProps>(['sizes']),
+};
+
 const descMaxWidthBreakpoints = [960, 600];
 
 /* media queries */

package/src/common/column-control/styled/StyledFlex.tsx

@@ -2,10 +2,7 @@ import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
 import { sizeObjectType } from '../types';
 import { commonStyles, getPercentArray } from './common';
-
-const options = {
-    shouldForwardProp: (propKey: string) => !['sizes', 'gap', 'isFullWidth'].includes(propKey),
-};
+import { shouldNotForwardPropsWithKeys } from '../../../common/util';
 
 type StyledFlexProps = {
     sizes: sizeObjectType;
@@ -13,6 +10,10 @@ type StyledFlexProps = {
     isFullWidth: boolean;
 };
 
+const options = {
+    shouldForwardProp: shouldNotForwardPropsWithKeys<StyledFlexProps>(['sizes']),
+};
+
 /* main wrapper for column control using css flex */
 export const StyledFlex = styled(
     Box as any,

package/src/common/column-control/styled/StyledGrid.tsx

@@ -2,6 +2,7 @@ import { Box } from '@mui/material';
 import { styled } from '@nuskin/foundation-theme';
 import { sizeObjectType } from '../types';
 import { commonStyles, getPercentArray } from './common';
+import { shouldNotForwardPropsWithKeys } from '../../../common/util';
 
 type StyledGridProps = {
     sizes: sizeObjectType;
@@ -9,7 +10,7 @@ type StyledGridProps = {
     isFullWidth: boolean;
 };
 const options = {
-    shouldForwardProp: (propKey: string) => !['sizes', 'gap', 'isFullWidth'].includes(propKey),
+    shouldForwardProp: shouldNotForwardPropsWithKeys<StyledGridProps>(['sizes']),
 };
 
 /* main wrapper for column control using css grid */

package/src/common/icon/NsIcon.stories.tsx

@@ -1,4 +1,5 @@
 import { PaletteColors } from '@nuskin/foundation-theme';
+
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsIcon, NsIconVariants } from './';
@@ -24,6 +25,47 @@ export default {
         colorOverride: {
             control: 'color',
         },
+        cursor: {
+            control: 'select',
+            options: [
+                'auto',
+                'default',
+                'none',
+                'context-menu',
+                'help',
+                'pointer',
+                'progress',
+                'wait',
+                'cell',
+                'crosshair',
+                'text',
+                'vertical-text',
+                'alias',
+                'copy',
+                'move',
+                'no-drop',
+                'not-allowed',
+                'grab',
+                'grabbing',
+                'e-resize',
+                'n-resize',
+                'ne-resize',
+                'nw-resize',
+                's-resize',
+                'se-resize',
+                'sw-resize',
+                'w-resize',
+                'ew-resize',
+                'ns-resize',
+                'nesw-resize',
+                'nwse-resize',
+                'col-resize',
+                'row-resize',
+                'all-scroll',
+                'zoom-in',
+                'zoom-out',
+            ],
+        },
     },
     args: {
         size: 'large',

package/src/common/icon/NsIcon.styled.tsx

@@ -1,5 +1,6 @@
 import { styled } from '@nuskin/foundation-theme';
-import { NsIconSizeType } from './types.d';
+
+import { NsIconProps, NsIconSizeType } from './types.d';
 
 export const iconSize: Record<NsIconSizeType, string> = {
     small: '16px',
@@ -7,13 +8,14 @@ export const iconSize: Record<NsIconSizeType, string> = {
     large: '24px',
     xLarge: '30px',
 };
-type IconWrapperType = { size: NsIconSizeType };
+type IconWrapperType = { size: NsIconSizeType; cursor: NsIconProps['cursor'] };
 
-export const IconWrapper = styled('div')<IconWrapperType>(({ size }) => {
+export const IconWrapper = styled('div')<IconWrapperType>(({ size, cursor }) => {
     return {
         display: 'flex',
         placeContent: 'center',
         placeItems: 'center',
+        cursor,
         svg: {
             width: iconSize[size],
             height: iconSize[size],

package/src/common/icon/NsIcon.tsx

@@ -15,6 +15,7 @@ const NsIcon = ({
     className,
     colorOverride,
     onClick = () => {},
+    cursor = 'pointer',
     ...rest
 }: NsIconProps) => {
     const Icon = IconVariants[name as NsIconNameType];
@@ -25,7 +26,14 @@ const NsIcon = ({
     }
 
     return (
-        <IconWrapper {...rest} data-testid={testId} size={size || 'large'} className={className} onClick={onClick}>
+        <IconWrapper
+            {...rest}
+            data-testid={testId}
+            size={size || 'large'}
+            className={className}
+            onClick={onClick}
+            cursor={cursor}
+        >
             <Icon color={colorOverride ? colorOverride : (iconColor as any)} />
         </IconWrapper>
     );

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

@@ -13,4 +13,41 @@ export type NsIconProps = HTMLProps & {
     color?: FoundationTheme.PaletteColors;
     testId?: string;
     colorOverride?: string;
+    cursor?:
+        | 'auto'
+        | 'default'
+        | 'none'
+        | 'context-menu'
+        | 'help'
+        | 'pointer'
+        | 'progress'
+        | 'wait'
+        | 'cell'
+        | 'crosshair'
+        | 'text'
+        | 'vertical-text'
+        | 'alias'
+        | 'copy'
+        | 'move'
+        | 'no-drop'
+        | 'not-allowed'
+        | 'grab'
+        | 'grabbing'
+        | 'e-resize'
+        | 'n-resize'
+        | 'ne-resize'
+        | 'nw-resize'
+        | 's-resize'
+        | 'se-resize'
+        | 'sw-resize'
+        | 'w-resize'
+        | 'ew-resize'
+        | 'ns-resize'
+        | 'nesw-resize'
+        | 'nwse-resize'
+        | 'col-resize'
+        | 'row-resize'
+        | 'all-scroll'
+        | 'zoom-in'
+        | 'zoom-out';
 };

package/src/common/input/InputWrapper.tsx

@@ -5,8 +5,8 @@ import { fieldStateType } from './types.d';
 const { isDarkMode } = ColorUtils;
 const { colors } = nuskinTheme;
 
-const options = {
-    shouldForwardProp: (propKey: string) => propKey !== 'fieldState',
+type InputWrapperType = {
+    fieldState: fieldStateType;
 };
 
 const getInputBorderColor = (
@@ -23,14 +23,7 @@ const getInputBorderColor = (
     }
 };
 
-type InputWrapperType = {
-    fieldState: fieldStateType;
-};
-
-const InputWrapper = styled(
-    Box,
-    options
-)<InputWrapperType>(({ theme, fieldState }) => {
+const InputWrapper = styled(Box)<InputWrapperType>(({ theme, fieldState }) => {
     /* default value added so that unit tests do not fail */
     const { palette = { primary: { main: '', contrastText: '' } } } = theme;
     const isLight = isDarkMode({ theme });

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/link/NsLink.styled.tsx

@@ -1,14 +1,7 @@
-/**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsLink.styled.tsx
- * @description Styled Components for NsLink are defined here
- */
-
 import { styled } from '@nuskin/foundation-theme';
 import MUILink from '@mui/material/Link';
 import NextLink from 'next/link';
 
-/** Prop Types doe Styled components */
 type StyledProps = {
     disabled?: boolean;
     $underlineOnHover?: boolean;
@@ -53,16 +46,13 @@ const getLinkStyles = ({ disabled, $underlineOnHover = true }: StyledProps) => {
     }
     return '';
 };
-const options = {
-    shouldForwardProp: (propKey: string) => propKey !== '$underlineOnHover',
-};
 
-export const StyledNextLink = styled(NextLink, options)<StyledProps>`
+export const StyledNextLink = styled(NextLink)<StyledProps>`
     ${linkDefaultStyles};
     ${getLinkStyles}
 `;
 
-export const StyledLink = styled(MUILink, options)<StyledProps>`
+export const StyledLink = styled(MUILink)<StyledProps>`
     ${linkDefaultStyles};
     ${getLinkStyles}
 `;

package/src/common/link/NsLink.tsx

@@ -8,12 +8,6 @@ import React, { PropsWithChildren } from 'react';
 import { StyledLink, StyledNextLink } from './NsLink.styled';
 import { NsLinkProps } from './types.d';
 
-/**
- * @component NsLink
- *
- * Component for displaying an Link tag
- *
- */
 const NsLink = (props: PropsWithChildren<NsLinkProps>) => {
     const {
         className,
@@ -25,6 +19,7 @@ const NsLink = (props: PropsWithChildren<NsLinkProps>) => {
         children,
         passHref,
         prefetch,
+        disabled,
     } = props;
 
     if (isSsr) {
@@ -33,9 +28,10 @@ const NsLink = (props: PropsWithChildren<NsLinkProps>) => {
                 className={className}
                 href={href}
                 $underlineOnHover={underlineOnHover}
-                {...additionalProps}
                 passHref={passHref}
                 prefetch={prefetch}
+                disabled={disabled}
+                {...additionalProps}
             >
                 {children}
             </StyledNextLink>
@@ -46,6 +42,7 @@ const NsLink = (props: PropsWithChildren<NsLinkProps>) => {
         <StyledLink
             className={className}
             href={href}
+            disabled={disabled}
             $underlineOnHover={underlineOnHover}
             target={target}
             {...additionalProps}

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/radiogroup/NsRadioGroup.styled.tsx

@@ -1,6 +1,5 @@
 import { Radio, FormControlLabel, FormLabel, RadioGroup } from '@mui/material';
 import { ColorUtils, FoundationTheme, styled } from '@nuskin/foundation-theme';
-import { skipDarkModeEnabled } from '../util';
 
 const { paletteColor, isDarkMode, color } = ColorUtils;
 
@@ -36,13 +35,13 @@ export const StyledFormControlLabel = styled(FormControlLabel)<{ darkModeEnabled
         },
     };
 });
-const options = {
-    shouldForwardProp: skipDarkModeEnabled,
+
+type StyledRadioPropsType = {
+    color: FoundationTheme.PaletteColors;
+    darkModeEnabled?: boolean;
 };
-export const StyledRadioGroup = styled(
-    RadioGroup,
-    options
-)<{ color: FoundationTheme.PaletteColors; darkModeEnabled?: boolean }>(({ theme, color, darkModeEnabled }) => {
+
+export const StyledRadioGroup = styled(RadioGroup)<StyledRadioPropsType>(({ theme, color, darkModeEnabled }) => {
     return {
         marginTop: '10px',
         '.MuiRadio-root.custom-radio.Mui-checked': {

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;

package/src/common/util.ts

@@ -1 +1,3 @@
-export const skipDarkModeEnabled = (key: string) => key !== 'darkModeEnabled';
+export function shouldNotForwardPropsWithKeys<T>(propArray: Array<keyof T>) {
+    return (propName: string) => !propArray.includes(propName as keyof T);
+}