@nuskin/foundation-ui-components 1.1.0 → 1.1.1

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

@@ -3,14 +3,12 @@ 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,
@@ -27,38 +25,39 @@ describe('NsRadioGroup', () => {
     };
     const onChange = jest.fn();
 
-    it('renders options correctly', () => {
-        render(
-            <NsRadioGroup  {...props} onChange={onChange}
-            />,
-        );
+    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)
-        })
-
-    })
+            expect(radioOption.value).toBe(option.value);
+        });
+    });
+    it('2. renders options correctly without additional slot', () => {
+        render(<NsRadioGroup {...props} onChange={onChange} additionalSlot={''} />);
 
-    it('calls OnChange when selecting option', () => {
+        options.forEach((option) => {
+            const radioOption = screen.getByLabelText(option.label) as HTMLInputElement;
+            expect(radioOption).toBeInTheDocument();
+            expect(radioOption.value).toBe(option.value);
+        });
+    });
 
-        render(<NsRadioGroup {...props} onChange={onChange} />)
+    it('3. calls OnChange when selecting option', () => {
+        render(<NsRadioGroup {...props} onChange={onChange} />);
 
-        const radioOption = screen.getByLabelText('Option 2') as HTMLInputElement
+        const radioOption = screen.getByLabelText('Option 2') as HTMLInputElement;
         fireEvent.click(radioOption);
         expect(onChange).toHaveBeenCalledTimes(1);
+    });
 
-    })
-
-    it('does not call Onchange when the same option is clicked', () => {
+    it('4. does not call Onchange when the same option is clicked', () => {
         const onChange = jest.fn();
-        render(<NsRadioGroup {...props} onChange={onChange} />)
+        render(<NsRadioGroup {...props} onChange={onChange} />);
 
-        const radioOption = screen.getByLabelText('Option 1') as HTMLInputElement
-        fireEvent.click(radioOption)
+        const radioOption = screen.getByLabelText('Option 1') as HTMLInputElement;
+        fireEvent.click(radioOption);
         expect(onChange).not.toHaveBeenCalled();
-    })
-
-
-})
+    });
+});

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

@@ -1,8 +1,7 @@
-
 import type { StoryObj, Meta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
-import { NsRadioGroup } from './'
+import { NsRadioGroup } from './';
 import { FoundationTheme } from '@nuskin/foundation-theme';
 
 type ComponentType = typeof NsRadioGroup;
@@ -14,43 +13,29 @@ export default {
     title: 'Components/Inputs/NsRadioGroup',
     argTypes: {
         disable: {
-            description:
-                'Indicates whether the radio button is enabled/disabled',
-
+            description: 'Indicates whether the radio button is enabled/disabled',
         },
         items: {
-            description:
-                'Value of the component to be emitted when selected.',
+            description: 'Value of the component to be emitted when selected.',
         },
         name: {
-            description:
-                'Name of the component',
-
+            description: 'Name of the component',
         },
         label: {
-            description:
-                'Label of the radio group',
-
+            description: 'Label of the radio group',
         },
         color: {
-            description:
-                'Color of the radio button',
-
+            description: 'Color of the radio button',
         },
         size: {
-            description:
-                'Margin Left for Additional Slot text',
-
+            description: 'Margin Left for Additional Slot text',
         },
         labelFontSize: {
-            description:
-                'Used to change font-size of the label'
+            description: 'Used to change font-size of the label',
         },
         additionalSlot: {
-            description:
-                'An additional slot allows for more text',
-
-        }
+            description: 'An additional slot allows for more text',
+        },
     },
 } as MetaStory;
 
@@ -61,7 +46,7 @@ export const RadioGroup: Story = {
             {
                 id: 'individual',
                 label: `Vendeur à domicile indépendant mandataire (The VDI mandataire
-                     enters into sales or service agreements 
+                     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.)`,
@@ -70,7 +55,7 @@ export const RadioGroup: Story = {
             {
                 id: ' retailer',
                 label: `Vendeur à domicile indépendant acheteur-revendeur
-                 (The VDI acheteur-revendeur sells the company's products in his own name and behalf. 
+                 (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',
@@ -91,12 +76,9 @@ export const RadioGroup: Story = {
         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

@@ -1,13 +1,13 @@
 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;
+margin-top :10px;
+justify-self:flex-start;
+padding-left: 0.5em;
 )`;
 
 export const StyledSpan = styled('span')`
@@ -23,7 +23,7 @@ export const StyledLabel = styled(FormLabel)`
 `;
 
 export const StyledRadio = styled(Radio)`
-    color: ${(props) => !isDarkMode(props) ? color('primary', 'black')(props) : color('primary', 'white')(props)}
+    color: ${(props) => color('primary', !isDarkMode(props) ? 'black' : 'white')(props)};
 `;
 
 export const StyledFormControlLabel = styled(FormControlLabel)<{ darkModeEnabled?: boolean }>((props) => {
@@ -31,20 +31,21 @@ export const StyledFormControlLabel = styled(FormControlLabel)<{ darkModeEnabled
         color: paletteColor('primary')(props),
         marginBottom: '10px',
         '.MuiFormControlLabel-label.Mui-disabled': {
-            color: `${!isDarkMode(props) ? color('neutral', 60)(props) : color('neutral', 20)(props)}`
+            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 }),
         },
     };
 });
-
-export const StyledRadioGroup = styled(RadioGroup)<
-    { 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

@@ -22,7 +22,7 @@ const NsRadioGroup = (props: NsRadioGroupProps) => {
         size,
         additionalProps,
         labelFontSize,
-        darkModeEnabled = true
+        darkModeEnabled = true,
     } = props;
 
     return (
@@ -50,10 +50,11 @@ const NsRadioGroup = (props: NsRadioGroupProps) => {
                     ))}
                 </StyledRadioGroup>
             </FormControl>
-            {additionalSlot ? <StyledHelperText className={`ml-${size}`}>
-                <StyledSpan className="text-sm">{additionalSlot}</StyledSpan>
-            </StyledHelperText> : null}
-
+            {additionalSlot ? (
+                <StyledHelperText className={`ml-${size}`}>
+                    <StyledSpan className="text-sm">{additionalSlot}</StyledSpan>
+                </StyledHelperText>
+            ) : null}
         </>
     );
 };

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>