@nuskin/foundation-ui-components 1.1.0 → 1.2.0

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-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,6 +1,6 @@
 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>;
@@ -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',
             },
         ],

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

@@ -3,14 +3,13 @@ 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);
     }
 `;
 
-export const NavTabLine = styled(motion.li)`
+export const NavTabBox = styled(motion.li)`
     margin: 0px 14px;
     align-items: center;
     white-space: normal;
@@ -19,17 +18,17 @@ export const NavTabLine = styled(motion.li)`
     list-style: none;
     position: relative;
     min-width: 60px;
+    padding: 8px 4px;
 `;
 
 export const NavTabUnderLine = styled(motion.div)<{ color?: FoundationTheme.PaletteColors }>`
     width: 100%;
     position: absolute;
-    bottom: -2px;
-    height: 2px;
-    background-color: ${({ theme, color = 'primary' }) => paletteColor(color)({ theme })};
+    height: 3px;
+    background-color: ${({ theme, color }) => paletteColor(color)({ theme })};
 `;
 
-export const NavDrawer = styled.div`
+export const NavDrawerStyled = styled.div`
     position: absolute;
     left: 0;
     display: flex;
@@ -63,6 +62,13 @@ export const NavDrawerContainer = styled(motion.div)`
     max-height: 590px;
     overflow: auto;
     .drawer-container {
-        max-width: 1410px;
+        max-width: 1024px;
+        margin: 0 auto;
+        overflow: hidden;
     }
 `;
+
+export const NavTitlesBox = styled.div`
+    display: flex;
+    height: 39px;
+`;

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

@@ -1,89 +1,35 @@
-import React, { PropsWithChildren, useState } from 'react';
+import React, { useCallback, 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.d';
+import { NavTabContainer } from './NsNavTab.styled';
+import { NavDrawer } from './NavDrawer';
+import { NsNavTabComponentProps } from './types.d';
+import { NavTitles } from './NavTitles';
 
-export const NsNavTabComponent = (props: PropsWithChildren<NSNavTabComponentProps>) => {
-    const { tabs, className, tabTitleClassName, showDrawer = true } = props;
+export const NsNavTabComponent = ({
+    tabs,
+    className,
+    tabTitleClassName,
+    showDrawer = true,
+}: NsNavTabComponentProps) => {
     const [active, setActive] = useState<string | null>(null);
 
     const activeTab = tabs?.find((tab) => tab.tabName === active);
 
-    const handleLeave = () => {
+    const handleLeave = useCallback(() => {
         setActive(null);
-    };
+    }, []);
 
     return (
-        <NavTabContainer data-testid="nav-container" className={className}>
+        <NavTabContainer data-testid="nav-container" className={`${className} ns-nav-tab-component`}>
             <LayoutGroup>
                 <div onMouseLeave={handleLeave} data-testid="nav-container-draw" className="p-0 m-0">
-                    <div className="pb-0.5">
-                        <div className="flex">
-                            {tabs?.map((tab) => {
-                                const handleMouseEnter = () => {
-                                    setActive(tab.tabName);
-                                };
-                                return (
-                                    <div
-                                        key={tab?.tabName}
-                                        data-testid={tab?.tabName}
-                                        className="relative cursor-pointer"
-                                        onMouseEnter={handleMouseEnter}
-                                    >
-                                        <NavTabLine
-                                            data-testid={tab.tabName + '-list'}
-                                            transition={{
-                                                duration: 0.3,
-                                            }}
-                                            animate
-                                        >
-                                            <NsTypography
-                                                variant={tab.textVariant}
-                                                additionalProps={{ ...tab?.liveTag }}
-                                                className={`mb-2  ${tabTitleClassName} ${!active ? 'opacity-8' : ''}`}
-                                                color={tab.tabName === active ? tab.activeColor : tab.color}
-                                            >
-                                                {tab.tabName}
-                                            </NsTypography>
-                                        </NavTabLine>
-                                        {active === tab.tabName && (
-                                            <NavTabUnderLine
-                                                data-testid="underline"
-                                                layoutId="underline"
-                                                color={tab.activeColor}
-                                            />
-                                        )}
-                                    </div>
-                                );
-                            })}
-                        </div>
-                    </div>
-                    <NavDrawer data-testid="nav-drawer-container">
-                        {active && showDrawer ? (
-                            <NavDrawerContainer
-                                data-testid="nav-drawer"
-                                initial={{
-                                    height: 0,
-                                }}
-                                animate={{
-                                    height: 'auto',
-                                }}
-                                exit={{
-                                    height: 0,
-                                }}
-                                transition={{
-                                    duration: 0.3,
-                                }}
-                            >
-                                {active ? (
-                                    <div className="flex w-full overflow-hidden justify-center">
-                                        <div className="drawer-container w-full">{activeTab?.tabContent}</div>
-                                    </div>
-                                ) : null}
-                            </NavDrawerContainer>
-                        ) : null}
-                    </NavDrawer>
+                    <NavTitles
+                        tabTitleClassName={tabTitleClassName}
+                        tabs={tabs}
+                        active={active}
+                        setActive={setActive}
+                    />
+                    <NavDrawer active={active} content={activeTab?.tabContent} showDrawer={showDrawer} />
                 </div>
             </LayoutGroup>
         </NavTabContainer>

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

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

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,10 +9,10 @@ export type NavTabs = {
     activeColor: FoundationTheme.PaletteColors;
     color?: FoundationTheme.PaletteColors;
     textVariant: Variants;
-    liveTag?: ContentStackLiveTags;
+    liveTag?: CslpTag;
 };
 
-export type NSNavTabComponentProps = {
+export type NsNavTabComponentProps = {
     tabs: NavTabs[];
     className?: string;
     tabTitleClassName?: string;

package/src/common/progress/NsProgress.spec.tsx

@@ -0,0 +1,47 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import Progress from './NsProgress';
+
+describe(' NsProgress Component', () => {
+    test('should render Progress bar', () => {
+        render(<Progress color="primary" value={10}></Progress>);
+
+        const pbar = screen.getByRole('progressbar');
+
+        expect(pbar).toBeInTheDocument();
+    });
+
+    it('matches the height of the progress bar to the width of the container', () => {
+        // Define the props
+        const value = 50;
+
+        // Render the StyledProgress component with the value prop
+        const { container } = render(<Progress color="primary" value={value} />);
+
+        // Get the progress bar element
+        const progressBar = container.querySelector('.MuiLinearProgress-bar');
+
+        // Check if the progress bar element exists
+        if (progressBar) {
+            // Retrieve the computed width of the container element
+            const containerWidth = container.clientWidth;
+
+            // Retrieve the computed styles of the progress bar
+            const progressBarStyle = getComputedStyle(progressBar);
+            const progressBarHeight = parseFloat(progressBarStyle.height);
+            const progressBarPadding =
+                parseFloat(progressBarStyle.paddingTop) + parseFloat(progressBarStyle.paddingBottom);
+            const progressBarBorder =
+                parseFloat(progressBarStyle.borderTopWidth) + parseFloat(progressBarStyle.borderBottomWidth);
+
+            // Calculate the expected height of the progress bar
+            const expectedHeight = containerWidth - progressBarPadding - progressBarBorder;
+
+            // Assert that the height of the progress bar matches the width of the container
+            expect(progressBarHeight).toBe(expectedHeight);
+        } else {
+            // Handle the case where the progress bar element is not found
+            throw new Error('Progress bar element not found');
+        }
+    });
+});

package/src/common/progress/NsProgress.stories.tsx

@@ -0,0 +1,37 @@
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import type { StoryObj, Meta } from '@storybook/react';
+import NsProgress from './NsProgress';
+
+type ComponentType = typeof NsProgress;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsProgress,
+    title: 'Input/NsProgress',
+    decorators: [withCenterDecorator],
+    argTypes: {
+        color: {
+            description: 'defines the color for the completed progress',
+        },
+        height: {
+            description: 'height of the bar',
+        },
+        value: {
+            description: 'value of the progress done',
+        },
+        backgroundColor: {
+            description: 'color of incomplete progress',
+        },
+    },
+} as MetaStory;
+
+export const ProgressBar: Story = {
+    args: {
+        color: 'primary',
+        backgroundColor: '#19dbdb',
+        value: undefined,
+        height: '10px',
+        body: <span>{'% Complete'}</span>,
+    },
+};

package/src/common/progress/NsProgress.styled.tsx

@@ -0,0 +1,39 @@
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+import { LinearProgress } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import { NsProgressProps } from './types';
+
+const { color } = ColorUtils;
+export const StyledCheckCircle = styled(CheckCircleIcon)`
+    color: ${color('neutral', '50')};
+    padding-top: 0.6em;
+    padding-right: 0.5em;
+    justify-self: flex-end;
+`;
+
+export const PercentDiv = styled('div')`
+    color: ${color('primary', '100')};
+    display: flex;
+    justify-content: flex-end;
+    font-family: Inter;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 700;
+    text-transform: uppercase;
+`;
+
+export const StyledLinearProgress = styled(LinearProgress)<Omit<NsProgressProps, 'value'>>(
+    ({ height, backgroundColor, color }) => ({
+        width: '334px',
+        height,
+        backgroundColor,
+        borderRadius: '3px',
+        display: 'inline-block',
+
+        '.MuiLinearProgress-bar': {
+            backgroundColor: color,
+        },
+    })
+);
+
+export default StyledLinearProgress;