@nuskin/foundation-ui-components 1.0.2 → 1.1.1

package/src/common/input/NsInputField.tsx

@@ -55,7 +55,7 @@ const NsInputField = (props: NsInputFieldProps) => {
     } = props;
     /** EndIcon is created so that we can automatically add success and error icon based of fieldState,
      *  it will override iconEnd. Also to note, InputProps is given to override both iconStart, iconEnd and EndIcon */
-    let EndIcon: AdornmentPropsType = getAdornmentProps({ disabled, fieldState, iconEnd, iconStart });
+    const EndIcon: AdornmentPropsType = getAdornmentProps({ disabled, fieldState, iconEnd, iconStart });
 
     return (
         <InputFieldWrapper>

package/src/common/label/NsLabel.stories.tsx

@@ -8,7 +8,7 @@ type MetaStory = Meta<ComponentType>;
 
 export default {
     component: NsLabel,
-    title: 'Components/NsLabel',
+    title: 'Components/Inputs/NsLabel',
     decorators: [withCenterDecorator],
 } as MetaStory;
 

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

@@ -16,7 +16,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsLink',
+    title: 'Components/Data Display/NsLink',
     component: NsLink,
     decorators: [withCenterDecorator],
     argTypes: {

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@/test-utils/index';
+import NsModal from './NsModal';
+import { NsModalData } from './stories/mock';
+import { NsModalProps } from './types';
+
+describe('NsModal', () => {
+    const onHandleClose = jest.fn();
+
+    const NsModalProp = NsModalData as NsModalProps;
+
+    test('1. check NsModal component open', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('nsmodal-dialog')).toBeInTheDocument();
+    });
+
+    test('2. should render NsModal default component', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-default')).toBeInTheDocument();
+    });
+
+    test('3. should render NsModal status component', () => {
+        const VariantProps: NsModalProps = {
+            ...NsModalProp,
+            variant: 'info',
+        };
+        const { getByTestId } = render(<NsModal {...VariantProps} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-status')).toBeInTheDocument();
+    });
+
+    test('4. should render NsModal title with close button', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-title')).toBeInTheDocument();
+        expect(getByTestId('modal-close-button')).toBeInTheDocument();
+    });
+
+    test('5. should render NsModal body content', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-body-content')).toBeInTheDocument();
+    });
+
+    test('6. should render NsModal footer', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-footer')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,28 @@
+import { styled } from '@nuskin/foundation-theme';
+import { NsButton } from '../button';
+import { DialogActions } from '@mui/material';
+
+export const NsInfoWrapper = styled.div`
+    display: flex;
+    .status-icon {
+        padding: 16px 0px 0px 24px;
+    }
+    .title-icon {
+        padding-right: 10px;
+    }
+`;
+
+export const CloseButton = styled(NsButton)`
+    position: absolute;
+    right: 8px;
+    top: 8px;
+`;
+
+export const ModalFooter = styled(DialogActions)`
+    display: flex;
+    justify-content: space-around;
+    padding: 20px 0px 10px 0px;
+    button {
+        width: 100%;
+    }
+`;

package/src/common/modal/NsModal.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import { useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { ModalVariantMap } from './model/NsModalVariantMap';
+import { NsModalProps } from './types';
+
+const NsModal = (props: NsModalProps) => {
+    const { open, handleClose, header, body, additionalProps, footer, statusInfo, variant = 'default' } = props;
+
+    const { className, scrollType = 'paper', ariaLabel } = additionalProps || {};
+
+    const { ariaLabelledby = 'alert-dialog-title', ariaDescribedby = 'alert-dialog-description' } = ariaLabel || {};
+
+    const theme = useTheme();
+
+    const fullScreen: boolean = useMediaQuery(theme.breakpoints.down('md'));
+
+    const Component = ModalVariantMap[variant];
+
+    return (
+        <Dialog
+            data-testid="nsmodal-dialog"
+            fullScreen={fullScreen}
+            open={open}
+            scroll={scrollType}
+            onClose={handleClose}
+            aria-labelledby={ariaLabelledby}
+            aria-describedby={ariaDescribedby}
+            className={className}
+        >
+            <Component {...{ header, handleClose, body, footer, additionalProps, statusInfo, variant, open }} />
+        </Dialog>
+    );
+};
+
+export default NsModal;

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

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { DialogContent } from '@mui/material';
+import { NsModalComponentProps } from '../types';
+import NsModalTitle from './NsModalTitle';
+import { NsTypography } from '../..';
+
+const NsModalContentBox = ({ handleClose, statusInfo }: NsModalComponentProps) => {
+    const { title, description } = statusInfo || {};
+
+    const header = useMemo(() => {
+        return {
+            show: true,
+            children: (
+                <NsTypography variant="h5" weight="bold">
+                    {title}
+                </NsTypography>
+            ),
+            isCloseIcon: true,
+        };
+    }, [title]);
+
+    return (
+        <div>
+            <NsModalTitle header={header} handleClose={handleClose} />
+            <DialogContent>
+                <NsTypography variant="p-xs">{description}</NsTypography>
+            </DialogContent>
+        </div>
+    );
+};
+
+export default NsModalContentBox;

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

@@ -0,0 +1,25 @@
+import { DialogContent } from '@mui/material';
+import NsModalTitle from './NsModalTitle';
+import { NsModalComponentProps } from '../types';
+import { ModalFooter } from '../NsModal.styled';
+import { Show } from '../../utility';
+
+const NsDefaultModal = ({ header, handleClose, body, footer, additionalProps }: NsModalComponentProps) => {
+    const { dividers } = additionalProps || {};
+
+    return (
+        <div data-testid="modal-default">
+            <NsModalTitle header={header} handleClose={handleClose} />
+            <DialogContent dividers={dividers}>
+                <Show when={body?.show ?? false}>
+                    <div data-testid="modal-body-content">{body?.children}</div>
+                </Show>
+                <Show when={footer?.show ?? false}>
+                    <ModalFooter data-testid="modal-footer">{footer?.children}</ModalFooter>
+                </Show>
+            </DialogContent>
+        </div>
+    );
+};
+
+export default NsDefaultModal;

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

@@ -0,0 +1,15 @@
+import { NsInfoWrapper } from '../NsModal.styled';
+import { NsModalComponentProps } from '../types';
+import NsModalContentBox from './NsModalContentBox';
+import NsModalStatusIcon from './NsModalStatusIcon';
+
+const NsStatusModal = ({ handleClose, statusInfo, variant }: NsModalComponentProps) => {
+    return (
+        <NsInfoWrapper data-testid="modal-status">
+            <NsModalStatusIcon {...{ variant }} />
+            <NsModalContentBox {...{ handleClose, statusInfo }} />
+        </NsInfoWrapper>
+    );
+};
+
+export default NsStatusModal;

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

@@ -0,0 +1,14 @@
+import { NsIcon, NsIconNameType } from '../../';
+import { StatusIconMap } from '../model/NsModalVariantMap';
+import { NsModalComponentProps, NsModalVariant } from '../types';
+
+const NsModalStatusIcon = ({ variant }: NsModalComponentProps) => {
+    const iconName = variant ? StatusIconMap[variant] : null;
+    return (
+        <div className="status-icon">
+            <NsIcon name={iconName as NsIconNameType} size="medium" color={variant as NsModalVariant} />
+        </div>
+    );
+};
+
+export default NsModalStatusIcon;

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

@@ -0,0 +1,26 @@
+import { NsIcon } from '../..';
+import { DialogTitle } from '@mui/material';
+import { CloseButton, NsInfoWrapper } from '../NsModal.styled';
+import { NsModalComponentProps } from '../types';
+import { Show } from '../../utility';
+
+const NsModalTitle = ({ header, handleClose }: NsModalComponentProps) => {
+    const { show, children, isCloseIcon, iconName } = header || {};
+    return (
+        <Show when={show}>
+            <DialogTitle data-testid="modal-title">
+                <NsInfoWrapper>
+                    {iconName ? <NsIcon name={iconName} className="title-icon" /> : null}
+                    {children}
+                </NsInfoWrapper>
+                <Show when={isCloseIcon}>
+                    <CloseButton aria-label="close" onClick={handleClose} data-testid="modal-close-button">
+                        <NsIcon name="close" size="small" />
+                    </CloseButton>
+                </Show>
+            </DialogTitle>
+        </Show>
+    );
+};
+
+export default NsModalTitle;

package/src/common/modal/index.ts

@@ -0,0 +1,2 @@
+export { default as NsModal } from './NsModal';
+export type { NsModalProps } from './types';

package/src/common/modal/model/NsModalVariantMap.tsx

@@ -0,0 +1,24 @@
+import { ElementType } from 'react';
+import NsDefaultModal from '../helper-component/NsModalDefault';
+import NsStatusModal from '../helper-component/NsModalStatus';
+import { StatusIconMapProps } from '../types';
+
+type ModalMapType = {
+    [key: string]: ElementType;
+};
+
+export const ModalVariantMap: ModalMapType = {
+    default: NsDefaultModal,
+    confirmation: NsDefaultModal,
+    success: NsStatusModal,
+    warning: NsStatusModal,
+    error: NsStatusModal,
+    info: NsStatusModal,
+};
+
+export const StatusIconMap: StatusIconMapProps = {
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+    info: 'infoFilled',
+};

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

@@ -0,0 +1,85 @@
+/* eslint-disable @next/next/no-img-element */
+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,
+};
+const imageURL =
+    'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png';
+export const ImageWidthText: Story = {
+    args: {
+        header: {
+            show: true,
+            isCloseIcon: true,
+        },
+        body: {
+            show: true,
+            children: (
+                <Grid container spacing={2}>
+                    <Grid xs={6}>
+                        <img src={imageURL} 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.stories.tsx

@@ -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-tab/NavDrawer.tsx

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+import { Show } from '../utility';
+import { NavDrawerContainer, NavDrawerStyled } from './NsNavTab.styled';
+
+type NavDrawerProps = {
+    active: string | null;
+    showDrawer: boolean;
+    content: ReactNode;
+};
+export const NavDrawer = ({ active, showDrawer, content }: NavDrawerProps) => {
+    return (
+        <NavDrawerStyled data-testid="nav-drawer-container" className="nav-drawer">
+            <Show when={Boolean(active) && showDrawer}>
+                <NavDrawerContainer
+                    data-testid="nav-drawer"
+                    initial={{
+                        height: 0,
+                    }}
+                    animate={{
+                        height: 'auto',
+                    }}
+                    exit={{
+                        height: 0,
+                    }}
+                    transition={{
+                        duration: 0.3,
+                    }}
+                >
+                    <div className="drawer-container">{content}</div>
+                </NavDrawerContainer>
+            </Show>
+        </NavDrawerStyled>
+    );
+};

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

@@ -0,0 +1,52 @@
+import { NsTypography } from '../';
+import { NavTabBox, NavTabUnderLine, NavTitlesBox } from './NsNavTab.styled';
+import { Show } from '../utility';
+
+type NavTitlesProps = {
+    tabs: any[];
+    // eslint-disable-next-line no-unused-vars
+    setActive(_x: string): void;
+    active: string | null;
+    tabTitleClassName?: string;
+};
+
+export const NavTitles = ({ tabs, setActive, active, tabTitleClassName }: NavTitlesProps) => {
+    return (
+        <NavTitlesBox className="desktop-nav-titles">
+            {tabs?.map((tab) => {
+                const handleMouseEnter = () => {
+                    setActive(tab.tabName);
+                };
+                return (
+                    <div
+                        key={tab?.tabName}
+                        data-testid={tab?.tabName}
+                        className="relative cursor-pointer"
+                        onMouseEnter={handleMouseEnter}
+                    >
+                        <NavTabBox
+                            className="nav-tab-box"
+                            data-testid={tab.tabName + '-list'}
+                            transition={{
+                                duration: 0.3,
+                            }}
+                            animate
+                        >
+                            <NsTypography
+                                variant={tab.textVariant}
+                                additionalProps={{ ...tab?.liveTag }}
+                                className={`${tabTitleClassName} ${!active ? 'opacity-8' : ''}`}
+                                color={tab.tabName === active ? tab.activeColor : tab.color}
+                            >
+                                {tab.tabName}
+                            </NsTypography>
+                        </NavTabBox>
+                        <Show when={active === tab.tabName}>
+                            <NavTabUnderLine data-testid="underline" layoutId="underline" color={tab.activeColor} />
+                        </Show>
+                    </div>
+                );
+            })}
+        </NavTitlesBox>
+    );
+};

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

@@ -1,13 +1,12 @@
 import { fireEvent } from '@testing-library/react';
 import { NsNavTabComponent } from './NsNavTab';
-import { NavTabs } from './types.d';
+import { NavTabs } from './types';
 import { render } from '@/test-utils/index';
 
 const tabs: NavTabs[] = [
     {
         tabName: 'Skin & Beauty',
         tabContent: <>Skin & Beauty</>,
-        color: 'primary',
         activeColor: 'success',
         textVariant: 'h5',
     },
@@ -37,7 +36,7 @@ const tabs: NavTabs[] = [
 describe('Nav Bar Component', () => {
     it('1. should render Nav Bar Component with variant', () => {
         const { container } = render(
-            <NsNavTabComponent tabTitleClassName="text-center" showDrawer className="mb-2" tabs={tabs} />
+            <NsNavTabComponent tabTitleClassName="text-center" className="mb-2" tabs={tabs} />
         );
         const li = container.querySelectorAll('li');
         expect(li.length).toBe(4);
@@ -45,7 +44,7 @@ describe('Nav Bar Component', () => {
         expect(container).toBeInTheDocument();
     });
 
-    it('should render and open adn close the drawer', () => {
+    it('2. should open and close the drawer', () => {
         const { container, getByTestId } = render(<NsNavTabComponent showDrawer className="mb-2" tabs={tabs} />);
         const li = container.querySelectorAll('li');
         expect(li.length).toBe(4);
@@ -57,7 +56,7 @@ describe('Nav Bar Component', () => {
         expect(getByTestId('nav-drawer-container').firstChild).not.toBeInTheDocument();
     });
 
-    it('should show the underline on hover', () => {
+    it('3. should show the underline on hover', () => {
         const { getByTestId } = render(<NsNavTabComponent showDrawer={false} className="mb-2" tabs={tabs} />);
         fireEvent.mouseOver(getByTestId('Skin & Beauty'));
         expect(getByTestId('underline')).toBeInTheDocument();

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

@@ -1,13 +1,13 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsNavTab } from './';
+import { NsNavTab } from '.';
 
 type ComponentType = typeof NsNavTab;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsNavTab',
+    title: 'Components/Navigation/NsNavTab',
     component: NsNavTab,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -19,14 +19,14 @@ export default {
                 tabName: 'Tab One',
                 activeColor: 'info',
                 color: 'primary',
-                tabContent: 'test',
+                tabContent: 'Tab one content',
                 textVariant: 'h5',
             },
             {
                 tabName: 'Tab Two',
                 activeColor: 'info',
                 color: 'primary',
-                tabContent: 'test',
+                tabContent: 'Tab two content',
                 textVariant: 'h5',
             },
         ],