@nuskin/foundation-ui-components 1.0.0-develop.5 → 1.0.0-develop.7

package/src/common/image/NsImage.spec.tsx

@@ -1,10 +1,60 @@
 import { render, screen } from '@/test-utils/index';
-import NsImage from './NsImage';
-describe('NsImage', () => {
-    it('NsImage element renders', () => {
-        const altText = 'dummy image';
-        render(<NsImage src="https://www.google.com" width={300} height={300} alt={altText} />);
-        const imgElement = screen.getByAltText(altText);
+import { NsImage } from '../';
+
+describe('NsImage component', () => {
+    it('1. renders', () => {
+        const alt = 'test image';
+        render(<NsImage src="image.jpg" width={300} height={300} alt={alt} />);
+        const imgElement = screen.getByAltText(alt);
         expect(imgElement).toBeInTheDocument();
     });
+
+    it('2. renders with correct src and alt attributes', () => {
+        const src = 'image.jpg';
+        const alt = 'test image';
+        const { getByAltText } = render(<NsImage src={src} alt={alt} />);
+        const image = getByAltText(alt);
+        expect(image).toHaveAttribute('src', src);
+    });
+
+    it('3. renders with width and height if variant is not provided', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" width={300} height={300} />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '300');
+        expect(image).toHaveAttribute('height', '300');
+    });
+
+    it('4. renders with correct width and height based on variant', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="icon" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '60');
+        expect(image).toHaveAttribute('height', '60');
+    });
+
+    it('5. renders with correct width and height if variant is "fill"', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="fill" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '100%');
+        expect(image).toHaveAttribute('height', 'auto');
+    });
+
+    it('6. renders with correct width and height if variant is "award"', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="award" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '130');
+        expect(image).toHaveAttribute('height', '130');
+    });
+
+    it('7. renders with correct width and height if variant is "product"', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="product" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '300');
+        expect(image).toHaveAttribute('height', '300');
+    });
+
+    it('8. renders with additional props', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" className="custom-image" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveClass('custom-image');
+    });
 });

package/src/common/image/NsImage.stories.tsx

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

package/src/common/image/NsImage.tsx

@@ -2,18 +2,30 @@ import { NsImageProps } from './types.d';
 
 // eslint-disable-next-line no-unused-vars
 const NsImage = ({ src, width, height, alt, variant, ...rest }: NsImageProps) => {
-    let cHeight: string | number | undefined = height,
-        cWidth: string | number | undefined = width;
-    if (variant === 'product') {
-        (cHeight = 300), (cWidth = 300);
-    } else if (variant === 'icon') {
-        (cHeight = 60), (cWidth = 60);
-    } else if (variant === 'award') {
-        (cHeight = 130), (cWidth = 130);
-    } else if (variant === 'fill') {
-        (cHeight = 'auto'), (cWidth = '100%');
+    let cHeight, cWidth;
+    switch (variant) {
+        case 'product':
+            cHeight = 300;
+            cWidth = 300;
+            break;
+        case 'icon':
+            cHeight = 60;
+            cWidth = 60;
+            break;
+        case 'award':
+            cHeight = 130;
+            cWidth = 130;
+            break;
+        case 'fill':
+            cHeight = 'auto';
+            cWidth = '100%';
+            break;
+        default:
+            cHeight = height;
+            cWidth = width;
+            break;
     }
     // eslint-disable-next-line @next/next/no-img-element
-    return <img src={src} alt={alt} height={cHeight} width={cWidth} />;
+    return <img src={src} alt={alt} height={cHeight} width={cWidth} {...rest} />;
 };
 export default NsImage;

package/src/common/image/NsNextImage.stories.tsx

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

package/src/common/index.ts

@@ -14,6 +14,7 @@ export * from './checkbox';
 export * from './common.types.d';
 export * from './dropdown';
 export * from './flag';
+export * from './hooks';
 export * from './icon';
 export * from './image';
 export * from './input';
@@ -26,3 +27,4 @@ export * from './table';
 export * from './typography';
 export * from './email-simple';
 export * from './radiogroup';
+export * from './spinner';

package/src/common/input/InputWrapper.tsx

@@ -1,20 +1,25 @@
 import { Box } from '@mui/material';
-import { styled, nuskinTheme } from '@nuskin/foundation-theme';
-import { fieldStateType } from './types.d';
+import { styled, nuskinTheme, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+import {fieldStateType} from './types.d';
 
+const { isDarkMode } = ColorUtils;
 const { colors } = nuskinTheme;
 
 const options = {
     shouldForwardProp: (propKey: string) => propKey !== 'fieldState',
 };
 
-const getInputBorderColor = (palette: any, fieldState: fieldStateType, isLight = true): string => {
+const getInputBorderColor = (
+    palette: FoundationTheme.Theme['palette'],
+    fieldState: fieldStateType,
+    isLight = true
+): string => {
     if (fieldState === 'success') {
-        return isLight ? colors.success[40] : colors.success[40];
+        return colors.success[40];
     } else if (fieldState === 'error') {
         return isLight ? colors.red[40] : colors.red[20];
     } else {
-        return palette.primary.main;
+        return palette?.primary.main ?? '';
     }
 };
 
@@ -28,7 +33,7 @@ const InputWrapper = styled(
 )<InputWrapperType>(({ theme, fieldState }) => {
     /* default value added so that unit tests do not fail */
     const { palette = { primary: { main: '', contrastText: '' } } } = theme;
-    const isLight = palette.primary.main === colors.primary.black;
+    const isLight = isDarkMode({ theme });
     const inputFocusedBorder = isLight ? colors.accentColorB[20] : colors.accentColorB[30];
     const inputDisabledBg = isLight ? colors.neutral[30] : colors.neutral[70];
     const inputDisabledBorder = isLight ? colors.neutral[60] : colors.neutral[80];
@@ -56,7 +61,7 @@ const InputWrapper = styled(
                     },
                 },
                 fieldset: {
-                    border: `1px solid ${getInputBorderColor(palette as any, fieldState, isLight)}`,
+                    border: `1px solid ${getInputBorderColor(palette, fieldState, isLight)}`,
                 },
                 input: {
                     color: palette.primary.main,

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/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/NsNavTab.stories.tsx

@@ -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/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;
@@ -11,46 +10,32 @@ type MetaStory = Meta<ComponentType>;
 
 export default {
     component: NsRadioGroup,
-    title: 'Components/NsRadioGroup',
+    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,5 +1,6 @@
 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;
 
@@ -23,7 +24,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 +32,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>

package/src/common/select/NsSelect.spec.tsx

@@ -11,9 +11,7 @@ describe('NsSelectOption', () => {
     test('renders NsSelectOption component without errors', () => {
         const value = 'option1';
         const label = 'Option 1';
-        const { getByTestId, getByText } = render(
-            <NsSelectOption value={value} label={label} />
-        );
+        const { getByTestId, getByText } = render(<NsSelectOption value={value} label={label} />);
 
         // Check if the option container element exists
         const optionContainer = getByTestId(`option-${value}`);
@@ -27,14 +25,11 @@ describe('NsSelectOption', () => {
         const value = 'option1';
         const label = 'Option 1';
         const onSelect = jest.fn();
-        const { getByTestId } = render(
-            <NsSelectOption value={value} label={label} onSelect={onSelect} />
-        );
+        const { getByTestId } = render(<NsSelectOption value={value} label={label} onSelect={onSelect} />);
         const optionElement = getByTestId(`option-${value}`);
         fireEvent.click(optionElement);
         expect(onSelect).toHaveBeenCalledWith(value);
     });
-    
 });
 
 describe('NsSelect', () => {
@@ -69,8 +64,7 @@ describe('NsSelect', () => {
         const onSelect = jest.fn();
         const selectedLabel = 'Option 1';
         const { getByTestId, queryByTestId } = render(
-            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
-            </NsSelect>
+            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect} />
         );
         const selectButton = getByTestId('select-head');
         fireEvent.mouseDown(selectButton);
@@ -132,12 +126,7 @@ describe('NsSelect', () => {
 
     it('select closes on mouse leave when closeOnMouseLeave is set to true', async () => {
         render(
-            <NsSelect
-                closeOnMouseLeave
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-            >
+            <NsSelect closeOnMouseLeave selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createSelectOptions(options)}
             </NsSelect>
         );
@@ -186,7 +175,12 @@ describe('NsSelect', () => {
     test('renders SelectContainer with error styles when errorMessage is present', () => {
         const errorMessage = 'Invalid value';
         render(
-            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} errorMessage={errorMessage}>
+            <NsSelect
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+                errorMessage={errorMessage}
+            >
                 {createSelectOptions(options)}
             </NsSelect>
         );
@@ -196,5 +190,4 @@ describe('NsSelect', () => {
         expect(selectContainer).toHaveStyle('borderColor: red');
         expect(selectContainer).toHaveStyle('color: red');
     });
-
 });