@nuskin/foundation-ui-components 1.0.0-cft-35.13 → 1.0.0-develop.10

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

@@ -0,0 +1,86 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import NsModal from '../NsModal';
+import { NsButton } from '../../button';
+import { Grid, Typography } from '@mui/material';
+import { useState } from 'react';
+import { NsModalProps } from '../types';
+import { NsModalData } from './mock';
+
+type ComponentType = typeof NsModal;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/NsModal',
+    component: NsModal,
+    decorators: [withCenterDecorator],
+    argTypes: {},
+    args: {
+        ...NsModalData,
+    },
+} as MetaStory;
+
+const RenderNsModal = (args: NsModalProps) => {
+    const [isOpen, setOpen] = useState(false);
+
+    const onModalHandler = () => {
+        setOpen(!isOpen);
+    };
+
+    return (
+        <>
+            <NsButton onClick={onModalHandler}>Open Modal</NsButton>
+            <NsModal {...args} open={isOpen} handleClose={onModalHandler} />
+        </>
+    );
+};
+
+export const Modal: Story = {
+    args: {
+        header: {
+            ...NsModalData?.header,
+            isCloseIcon: false,
+        },
+    } as NsModalProps,
+    render: RenderNsModal,
+};
+
+export const WithCloseIcon: Story = {
+    render: RenderNsModal,
+};
+
+export const ImageWidthText: Story = {
+    args: {
+        header: {
+            show: true,
+            isCloseIcon: true,
+        },
+        body: {
+            show: true,
+            children: (
+                <Grid container spacing={2}>
+                    <Grid xs={6}>
+                        <img
+                            src="https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png"
+                            alt={'NsImage'}
+                        />
+                    </Grid>
+                    <Grid xs={6} className="p-5">
+                        <Typography gutterBottom variant="h5" component="div">
+                            Lizard
+                        </Typography>
+                        <Typography variant="body2" color="text.secondary">
+                            Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging across
+                            all continents except Antarctica
+                        </Typography>
+                    </Grid>
+                </Grid>
+            ),
+        },
+        footer: {
+            show: false,
+        },
+    },
+    render: RenderNsModal,
+};

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

@@ -0,0 +1,46 @@
+import { NsButton } from '../../button';
+import { NsTypography } from '../../typography';
+
+export const NsModalData = {
+    open: true,
+    handleClose: () => {},
+    variant: 'default',
+    header: {
+        show: true,
+        children: (
+            <NsTypography variant="h4" weight="bold">
+                Dialog with hero icon
+            </NsTypography>
+        ),
+        isCloseIcon: true,
+        iconName: 'infoOutlined',
+    },
+    body: {
+        show: true,
+        children: (
+            <NsTypography variant="p-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.
+            </NsTypography>
+        ),
+    },
+    statusInfo: {
+        title: 'Are you sure you want to delete your account?',
+        description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
+            sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,
+    },
+    footer: {
+        show: true,
+        children: (
+            <>
+                <NsButton onClick={() => {}} variant="outlined">
+                    Cancel
+                </NsButton>
+                <NsButton onClick={() => {}} variant="contained">
+                    Confirm
+                </NsButton>
+            </>
+        ),
+    },
+};

package/src/common/modal/types.ts

@@ -0,0 +1,56 @@
+import { ReactNode } from 'react';
+import { NsIconNameType } from '../icon';
+
+export interface DialogTitleProps {
+    id: string;
+    children?: ReactNode;
+    onClose: () => void;
+}
+
+export interface NsModalProps extends NsModalComponentProps {
+    open: boolean;
+}
+
+export interface NsModalComponentProps {
+    handleClose?: () => void;
+    additionalProps?: NsModalAdditionalProps;
+    variant?: NsModalVariant | 'default';
+    header?: NsModalContentProps;
+    body?: NsModalContentProps;
+    footer?: NsModalContentProps;
+    statusInfo?: NsModalStatusProps;
+}
+
+export interface NsModalContentProps {
+    show?: boolean;
+    children?: string | ReactNode;
+    isCloseIcon?: boolean;
+    iconName?: NsIconNameType;
+}
+
+export interface NsModalStatusProps {
+    title: string;
+    description: string;
+}
+
+export interface NsModalAdditionalProps {
+    className?: string;
+    scrollType?: 'paper' | 'body';
+    ariaLabel?: NsModalAriaLabelProps;
+    dividers?: boolean;
+}
+
+export interface NsModalAriaLabelProps {
+    ariaLabelledby?: string;
+    ariaDescribedby?: string;
+}
+
+export type NsModalVariant = 'success' | 'warning' | 'error' | 'info';
+
+export interface StatusIconMapProps {
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    default?: string;
+}

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

@@ -1,5 +1,5 @@
 import { NsNavProductCard } from '.';
-import { render } from '../../../test-utils';
+import { render } from '@/test-utils/index';
 
 const productImage = `
     https://media.nuskin.com/m/471880e8f6e689f4/Lumi-IO-normal-combo-cleansing-device-and-cleanser.png

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsNavProductCard } from './';
 
 type ComponentType = typeof NsNavProductCard;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsNavProductCard',
+    title: 'Components/Navigation/NsNavProductCard',
     component: NsNavProductCard,
     decorators: [withCenterDecorator],
     args: {

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

@@ -2,7 +2,7 @@
 import React, { PropsWithChildren } from 'react';
 import { NsImage, NsTypography } from '../';
 import { ProductCardContainer } from './NsNavProductCard.styled';
-import { NsNavProductCardProps } from './types';
+import { NsNavProductCardProps } from './types.d';
 
 /* TODO: can we update NsImage with NsNextImage, once storybook 7 is in place */
 export const NsNavProductCard = ({

package/src/common/nav-product-card/index.ts

@@ -1,2 +1,2 @@
 export { NsNavProductCard as NsNavProductCard } from './NsNavProductCard';
-export type { NsNavProductCardProps } from './types';
+export type { NsNavProductCardProps } from './types.d';

package/src/common/nav-tab/NsNavTab.spec.tsx

@@ -1,10 +1,7 @@
 import { fireEvent } from '@testing-library/react';
-import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
 import { NsNavTabComponent } from './NsNavTab';
-import { NavTabs } from './types';
-import { render } from '../../../test-utils';
-
-const { palette } = nuskinTheme;
+import { NavTabs } from './types.d';
+import { render } from '@/test-utils/index';
 
 const tabs: NavTabs[] = [
     {
@@ -54,7 +51,6 @@ describe('Nav Bar Component', () => {
         expect(li.length).toBe(4);
         li.forEach((list, i) => expect(list).toHaveTextContent(tabs[i].tabName));
         expect(container).toBeInTheDocument();
-        expect(getByTestId('Skin & Beauty-list').firstChild).toHaveStyle(`color: ${palette.primary.main}`);
         fireEvent.mouseOver(getByTestId('Skin & Beauty'));
         expect(getByTestId('nav-drawer')).toBeInTheDocument();
         fireEvent.mouseLeave(getByTestId('Skin & Beauty'));
@@ -65,6 +61,5 @@ describe('Nav Bar Component', () => {
         const { getByTestId } = render(<NsNavTabComponent showDrawer={false} className="mb-2" tabs={tabs} />);
         fireEvent.mouseOver(getByTestId('Skin & Beauty'));
         expect(getByTestId('underline')).toBeInTheDocument();
-        expect(getByTestId('underline')).toHaveStyle(`background-color: ${palette.success.main}`);
     });
 });

package/src/common/nav-tab/NsNavTab.stories.tsx

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsNavTab } from './';
 
 type ComponentType = typeof NsNavTab;
@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsNavTab',
+    title: 'Components/Navigation/NsNavTab',
     component: NsNavTab,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/nav-tab/NsNavTab.styled.tsx

@@ -1,6 +1,9 @@
-import { FoundationTheme, styled } from '@nuskin/foundation-theme';
+import { FoundationTheme, styled, ColorUtils } from '@nuskin/foundation-theme';
 import { motion } from 'framer-motion';
 
+const { paletteColor } = ColorUtils;
+
+
 export const NavTabContainer = styled.div`
     .shadow {
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -23,7 +26,7 @@ export const NavTabUnderLine = styled(motion.div)<{ color?: FoundationTheme.Pale
     position: absolute;
     bottom: -2px;
     height: 2px;
-    background-color: ${({ theme: { palette }, color = 'primary' }) => palette?.[color]?.main};
+    background-color: ${({ theme, color = 'primary' }) => paletteColor(color)({ theme })};
 `;
 
 export const NavDrawer = styled.div`
@@ -37,7 +40,7 @@ export const NavDrawer = styled.div`
     width: 100%;
     max-height: 590px;
 
-    background-color: ${({ theme }) => theme?.palette?.primary.contrastText};
+    background-color: ${paletteColor('primary', 'contrastText')};
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
     transition: all 0.15s ease-in-out;
     overflow: hidden;
@@ -54,7 +57,7 @@ export const NavDrawerContainer = styled(motion.div)`
         z-index: 1;
     }
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-    background-color: ${({ theme }) => theme?.palette?.primary.contrastText};
+    background-color: ${paletteColor('primary', 'contrastText')};
     width: 100%;
     text-align: left;
     max-height: 590px;

package/src/common/nav-tab/NsNavTab.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren, useState } from 'react';
 import { LayoutGroup } from 'framer-motion';
 import { NsTypography } from '../typography';
 import { NavDrawerContainer, NavTabContainer, NavTabLine, NavTabUnderLine, NavDrawer } from './NsNavTab.styled';
-import { NSNavTabComponentProps } from './types';
+import { NSNavTabComponentProps } from './types.d';
 
 export const NsNavTabComponent = (props: PropsWithChildren<NSNavTabComponentProps>) => {
     const { tabs, className, tabTitleClassName, showDrawer = true } = props;

package/src/common/nav-tab/index.ts

@@ -1,2 +1,2 @@
 export { NsNavTabComponent as NsNavTab } from './NsNavTab';
-export type { NSNavTabComponentProps, NavTabs } from './types';
+export type { NSNavTabComponentProps, NavTabs } from './types.d';

package/src/common/nav-tab/types.d.ts

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react';
 import { FoundationTheme } from '@nuskin/foundation-theme';
 import { Variants } from '../typography/types';
-import { AdditionalProps, ContentStackLiveTags } from '../common.types';
+import { AdditionalProps, CslpTag } from '../common.types';
 
 export type NavTabs = {
     tabName: string;
@@ -9,7 +9,7 @@ export type NavTabs = {
     activeColor: FoundationTheme.PaletteColors;
     color?: FoundationTheme.PaletteColors;
     textVariant: Variants;
-    liveTag?: ContentStackLiveTags;
+    liveTag?: CslpTag;
 };
 
 export type NSNavTabComponentProps = {

package/src/common/radiogroup/NsRadioGroup.spec.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import { NsRadioGroup } from './';
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+describe('NsRadioGroup', () => {
+    const options = [
+        { id: 'Option1', label: 'Option 1', value: 'Option1' },
+        { id: 'Option2', label: 'Option 2', value: 'Option2' },
+        { id: 'Option3', label: 'Option 3', value: 'Option3' },
+    ];
+
+    const props = {
+        disable: false,
+        items: options,
+        name: 'test',
+        label: 'I choose to signup as',
+        color: '#272525' as FoundationTheme.PaletteColors,
+        additionalSlot: 'An additional slot allows for more text',
+        size: 24,
+        labelFontSize: 16,
+        additionalProps: {
+            testid: 'radio-group',
+        },
+    };
+    const onChange = jest.fn();
+
+    it('1. renders options correctly', () => {
+        render(<NsRadioGroup {...props} onChange={onChange} />);
+
+        options.forEach((option) => {
+            const radioOption = screen.getByLabelText(option.label) as HTMLInputElement;
+            expect(radioOption).toBeInTheDocument();
+            expect(radioOption.value).toBe(option.value);
+        });
+    });
+    it('2. renders options correctly without additional slot', () => {
+        render(<NsRadioGroup {...props} onChange={onChange} additionalSlot={''} />);
+
+        options.forEach((option) => {
+            const radioOption = screen.getByLabelText(option.label) as HTMLInputElement;
+            expect(radioOption).toBeInTheDocument();
+            expect(radioOption.value).toBe(option.value);
+        });
+    });
+
+    it('3. calls OnChange when selecting option', () => {
+        render(<NsRadioGroup {...props} onChange={onChange} />);
+
+        const radioOption = screen.getByLabelText('Option 2') as HTMLInputElement;
+        fireEvent.click(radioOption);
+        expect(onChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('4. does not call Onchange when the same option is clicked', () => {
+        const onChange = jest.fn();
+        render(<NsRadioGroup {...props} onChange={onChange} />);
+
+        const radioOption = screen.getByLabelText('Option 1') as HTMLInputElement;
+        fireEvent.click(radioOption);
+        expect(onChange).not.toHaveBeenCalled();
+    });
+});

package/src/common/radiogroup/NsRadioGroup.stories.tsx

@@ -0,0 +1,84 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { NsRadioGroup } from './';
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+type ComponentType = typeof NsRadioGroup;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsRadioGroup,
+    title: 'Components/Inputs/NsRadioGroup',
+    argTypes: {
+        disable: {
+            description: 'Indicates whether the radio button is enabled/disabled',
+        },
+        items: {
+            description: 'Value of the component to be emitted when selected.',
+        },
+        name: {
+            description: 'Name of the component',
+        },
+        label: {
+            description: 'Label of the radio group',
+        },
+        color: {
+            description: 'Color of the radio button',
+        },
+        size: {
+            description: 'Margin Left for Additional Slot text',
+        },
+        labelFontSize: {
+            description: 'Used to change font-size of the label',
+        },
+        additionalSlot: {
+            description: 'An additional slot allows for more text',
+        },
+    },
+} as MetaStory;
+
+export const RadioGroup: Story = {
+    args: {
+        disable: false,
+        items: [
+            {
+                id: 'individual',
+                label: `Vendeur à domicile indépendant mandataire (The VDI mandataire
+                     enters into sales or service agreements
+                    with customers in the name and on behalf of the company.
+                     His remuneration will be based on commissions made
+                     on the sales of products to customers.)`,
+                value: 'individual',
+            },
+            {
+                id: ' retailer',
+                label: `Vendeur à domicile indépendant acheteur-revendeur
+                 (The VDI acheteur-revendeur sells the company's products in his own name and behalf.
+                 His remuneration will be based on commissions and on the margins made on the sales of
+                  products to customers.)`,
+                value: 'retailer',
+            },
+        ],
+        name: 'test',
+        label: 'I choose to signup as',
+        color: '#272525' as FoundationTheme.PaletteColors,
+        additionalSlot: 'An additional slot allows for more text',
+        size: 10,
+        labelFontSize: 16,
+        additionalProps: {
+            testid: 'radio-group',
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.hover(canvas.getByTestId('radio-group'));
+        await expect(
+            canvas.getByText(
+                // eslint-disable-next-line max-len
+                'Vendeur à domicile indépendant mandataire (The VDI mandataire enters into sales or service agreements with customers in the name and on behalf of the company. His remuneration will be based on commissions made on the sales of products to customers.)'
+            )
+        ).toBeInTheDocument();
+    },
+};

package/src/common/radiogroup/NsRadioGroup.styled.tsx

@@ -0,0 +1,52 @@
+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;
+
+export const StyledHelperText = styled('div')`
+    margin-top :10px;
+    padding-left: 0.5em;
+    text-align: left;
+    justify-self: flex-start;
+)`;
+
+export const StyledSpan = styled('span')`
+    font-size: '16px';
+    font-weight: 300;
+    color: ${paletteColor('primary')};
+`;
+
+export const StyledLabel = styled(FormLabel)`
+    color: ${paletteColor('primary')},
+    marginBottom: '15px',
+    backgroundColor: 'transparent',
+`;
+
+export const StyledRadio = styled(Radio)`
+    color: ${(props) => color('primary', !isDarkMode(props) ? 'black' : 'white')(props)};
+`;
+
+export const StyledFormControlLabel = styled(FormControlLabel)<{ darkModeEnabled?: boolean }>((props) => {
+    return {
+        color: paletteColor('primary')(props),
+        marginBottom: '10px',
+        '.MuiFormControlLabel-label.Mui-disabled': {
+            color: `${color('neutral', !isDarkMode(props) ? 60 : 20)(props)}`,
+        },
+    };
+});
+const options = {
+    shouldForwardProp: skipDarkModeEnabled,
+};
+export const StyledRadioGroup = styled(
+    RadioGroup,
+    options
+)<{ color: FoundationTheme.PaletteColors; darkModeEnabled?: boolean }>(({ theme, color, darkModeEnabled }) => {
+    return {
+        marginTop: '10px',
+        '.MuiRadio-root.custom-radio.Mui-checked': {
+            color: paletteColor(color)({ theme, darkModeEnabled }),
+        },
+    };
+});

package/src/common/radiogroup/NsRadioGroup.tsx

@@ -0,0 +1,62 @@
+import { FormControl } from '@mui/material';
+
+import {
+    StyledHelperText,
+    StyledFormControlLabel,
+    StyledRadio,
+    StyledSpan,
+    StyledRadioGroup,
+} from './NsRadioGroup.styled';
+import { NsLabel } from '../label';
+
+import { NsRadioGroupProps } from './types';
+
+const NsRadioGroup = (props: NsRadioGroupProps) => {
+    const {
+        items,
+        additionalSlot,
+        label,
+        onChange,
+        color,
+        disable,
+        size,
+        additionalProps,
+        labelFontSize,
+        darkModeEnabled = true,
+    } = props;
+
+    return (
+        <>
+            <FormControl data-testid={additionalProps?.testid}>
+                <NsLabel size={labelFontSize}>{label}</NsLabel>
+                <StyledRadioGroup
+                    aria-labelledby="radio-buttons-group-label"
+                    defaultValue={items?.[0]?.value}
+                    name="radio-buttons-group"
+                    onChange={onChange}
+                    color={color}
+                    darkModeEnabled={darkModeEnabled}
+                >
+                    {items?.map((item, index) => (
+                        <StyledFormControlLabel
+                            id={`${index} `}
+                            key={item?.id}
+                            value={item?.value}
+                            control={<StyledRadio className="custom-radio" />}
+                            label={item?.label}
+                            disabled={disable}
+                            darkModeEnabled={darkModeEnabled}
+                        />
+                    ))}
+                </StyledRadioGroup>
+            </FormControl>
+            {additionalSlot ? (
+                <StyledHelperText className={`ml-${size}`}>
+                    <StyledSpan className="text-sm">{additionalSlot}</StyledSpan>
+                </StyledHelperText>
+            ) : null}
+        </>
+    );
+};
+
+export default NsRadioGroup;

package/src/common/radiogroup/index.ts

@@ -0,0 +1,2 @@
+export { default as NsRadioGroup } from './NsRadioGroup';
+export type { NsRadioGroupProps} from './types.d'

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

@@ -0,0 +1,20 @@
+import { FoundationTheme } from '@nuskin/foundation-theme';
+import { AdditionalProps } from '../common.types';
+
+export type NsRadioGroupProps = {
+    disable : boolean ;
+    name : string; 
+    additionalSlot : string;
+    label : string ;
+    items: RadioItems[] ;
+    color: FoundationTheme.PaletteColors;
+    size : number;
+    labelFontSize:number,
+    onChange : () => void;
+} & AdditionalProps;
+
+export type RadioItems = {
+    label : string ; 
+    value :string | number ;
+    id: string | number;
+}

package/src/common/search-bar/NsSeachBar.spec.tsx

@@ -1,4 +1,4 @@
-import { render } from '../../../test-utils';
+import { render } from '@/test-utils/index';
 import NsSearchBar from './NsSearchBar';
 
 describe('Search Bar Component', () => {

package/src/common/search-bar/NsSearchBar.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import InputBase from '@mui/material/InputBase';
 import { styled } from '@nuskin/foundation-theme';
 
-interface NsSearchBarProps {}
-
 const Search = styled('div')`
     position: relative;
     borderRadius: 0;
@@ -31,7 +29,7 @@ const StyledInputBase = styled(InputBase)(() => ({
     },
 }));
 
-const NsSearchBar: React.FC<NsSearchBarProps> = () => {
+const NsSearchBar: React.FC = () => {
     return (
         <div>
             <Search>