@nuskin/foundation-ui-components 1.0.0-develop.2 → 1.0.0-develop.4

package/src/common/label/NsLabel.tsx

@@ -1,33 +1,30 @@
-import { InputLabel } from '@mui/material';
+import { FormLabel } from '@mui/material';
 import { NsLabelProps } from './types.d';
-import { styled, nuskinTheme } from '@nuskin/foundation-theme';
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+import { CSSProperties } from 'react';
+const { getAppColor, getPaletteColor } = ColorUtils;
 
-const { colors } = nuskinTheme;
-
-const StyledLabel = styled(InputLabel)(({ theme }: any) => {
+const StyledLabel = styled(FormLabel)<{ fontSize?: number; style?: CSSProperties }>(({ theme, fontSize, style }) => {
     const isLight = theme.palette?.primary?.main === '#252525';
     return {
-        fontSize: '14px',
-        color: theme.palette?.primary?.main ?? '#252525',
+        fontSize: fontSize ? `${fontSize}px` : '14px',
+        textAlign: style?.textAlign ?? 'left',
+        color: getPaletteColor(theme, 'primary', 'main'),
         '.optional-label': {
-            color: isLight ? colors?.neutral?.[60] : colors?.neutral?.[50],
+            color: isLight ? getAppColor(theme, 'neutral', '60') : getAppColor(theme, 'neutral', '50'),
         },
         '.MuiInputLabel-asterisk': {
-            color: isLight ? colors?.red?.[40] : colors?.red?.[20],
+            color: isLight ? getAppColor(theme, 'error', '40') : getAppColor(theme, 'error', '20'),
         },
-    };
+        ...(style || {}),
+    } as any; // TODO: may be this "any" has to be fixed from foundation-theme
 });
-/**
- * NOTE: we are passing error = false, in props, because
- *  we do not want to change the color of label to red, in case of error
- * @param props
- * @returns
- */
+
 const NsLabel = (props: NsLabelProps) => {
-    const { required, showOptional } = props;
+    const { required, showOptional, children, size } = props;
     return (
-        <StyledLabel {...props} required={required} error={false}>
-            {props.children}
+        <StyledLabel {...props} fontSize={size} required={required}>
+            {children}
             {!required && showOptional ? <span className="optional-label">{' (Optional)'}</span> : null}
         </StyledLabel>
     );

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

@@ -2,8 +2,9 @@ import { InputLabelProps } from '@mui/material';
 import { PropsWithChildren } from 'react';
 
 export type NsLabelProps = PropsWithChildren &
-    Omit<InputLabelProps, 'sx' | 'classes' | 'color' | 'margin' | 'variant' | 'classes' | 'error'> & {
+    Omit<InputLabelProps, 'sx' | 'classes' | 'color' | 'margin' | 'variant' | 'classes'> & {
         /** purpose of showOptional props is to show additional text 'optional' in the label,
          *  if required = false and this flag is true */
         showOptional?: boolean;
+        size?: number;
     };

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

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 import { NsLink } from './';
 import { NsTypography } from '../typography';

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsNavProductCard } from './';
 
 type ComponentType = typeof NsNavProductCard;

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

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

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsNavTab } from './';
 
 type ComponentType = typeof NsNavTab;

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

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

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

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

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

@@ -0,0 +1,56 @@
+import { Radio, FormControlLabel, FormLabel, RadioGroup } from '@mui/material';
+import { ColorUtils } from '@nuskin/foundation-theme';
+import { styled, nuskinTheme } from '@nuskin/foundation-theme';
+
+const { getPaletteColor } = ColorUtils;
+const { colors } = nuskinTheme;
+
+export const StyledHelperText = styled('div')`
+    margin-top :10px;
+    padding-left: 0.5em;
+    text-align: left;
+    justify-self: flex-start;
+)`;
+
+export const StyledSpan = styled('span')`
+    font-size: '16px';
+    font-weight: 300;
+    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+`;
+
+export const StyledLabel = styled(FormLabel)(({ theme }) => {
+    return {
+        color: getPaletteColor(theme, 'primary'),
+        marginBottom: '15px',
+        backgroundColor: 'transparent',
+    };
+});
+
+export const StyledRadio = styled(Radio)(({ theme }) => {
+    const isLight = theme.palette?.primary?.main === '#252525';
+
+    return {
+        color: isLight ? colors.primary.black : colors.primary.white,
+    };
+});
+
+export const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => {
+    const isLight = theme.palette?.primary?.main === '#252525';
+
+    return {
+        color: getPaletteColor(theme, 'primary'),
+        marginBottom: '10px',
+        '.MuiFormControlLabel-label.Mui-disabled': {
+            color: isLight ? colors?.neutral?.[60] : colors?.neutral?.[20],
+        },
+    };
+});
+
+export const StyledRadioGroup = styled(RadioGroup)(({ color }) => {
+    return {
+        marginTop: '10px',
+        '.MuiRadio-root.custom-radio.Mui-checked': {
+            color: color,
+        },
+    };
+});

package/src/common/radiogroup/NsRadioGroup.tsx

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

package/src/common/radiogroup/index.ts

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

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

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

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

@@ -0,0 +1,200 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@/test-utils/index';
+import NsSelect from './NsSelect';
+import NsSelectOption from './NsSelectOption';
+
+function createSelectOptions(options: { value: string; label: string }[]) {
+    return options.map((option) => <NsSelectOption key={option.value} value={option.value} label={option.label} />);
+}
+
+describe('NsSelectOption', () => {
+    test('renders NsSelectOption component without errors', () => {
+        const value = 'option1';
+        const label = 'Option 1';
+        const { getByTestId, getByText } = render(
+            <NsSelectOption value={value} label={label} />
+        );
+
+        // Check if the option container element exists
+        const optionContainer = getByTestId(`option-${value}`);
+        expect(optionContainer).toBeInTheDocument();
+
+        // Check if the option label is rendered correctly
+        const optionLabel = getByText(label);
+        expect(optionLabel).toBeInTheDocument();
+    });
+    test('clicking on NsSelectOption selects the option', () => {
+        const value = 'option1';
+        const label = 'Option 1';
+        const onSelect = jest.fn();
+        const { getByTestId } = render(
+            <NsSelectOption value={value} label={label} onSelect={onSelect} />
+        );
+        const optionElement = getByTestId(`option-${value}`);
+        fireEvent.click(optionElement);
+        expect(onSelect).toHaveBeenCalledWith(value);
+    });
+    
+});
+
+describe('NsSelect', () => {
+    const onSelect = jest.fn();
+    const selectedValue = '';
+    const selectedLabel = '';
+
+    const options = [
+        { value: 'Option1', label: 'Option 1' },
+        { value: 'Option2', label: 'Option 2' },
+        { value: 'Option3', label: 'Option 3' },
+    ];
+
+    it('renders the placeholder text when no value is selected', () => {
+        render(
+            <NsSelect
+                placeholder="Select an option"
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+            >
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        expect(screen.getByText('Select an option')).toBeInTheDocument();
+    });
+
+    test('clicking outside the select container closes the dropdown', () => {
+        // const value = 'option1';
+        // const label = 'Option 1';
+        const onSelect = jest.fn();
+        const selectedLabel = 'Option 1';
+        const { getByTestId, queryByTestId } = render(
+            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
+            </NsSelect>
+        );
+        const selectButton = getByTestId('select-head');
+        fireEvent.mouseDown(selectButton);
+        const outsideElement = document.createElement('div');
+        fireEvent.mouseDown(outsideElement);
+        // Add assertions to check if the dropdown is closed (isOpen state is false)
+        expect(queryByTestId('option-Option1')).toBeNull();
+    });
+
+    it('renders the selected value label', () => {
+        const selectedLabel = 'Option 1';
+        render(
+            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        expect(screen.getByText(selectedLabel)).toBeInTheDocument();
+    });
+
+    test('clicking on select button opens the dropdown', () => {
+        const { getByTestId, getByText } = render(
+            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+        const selectButton = getByTestId('select-head');
+        fireEvent.mouseDown(selectButton);
+
+        // Check if the dropdown is opened (isOpen state is true)
+        const dropdownList = getByTestId('select-list');
+        expect(dropdownList).toBeInTheDocument();
+
+        // Check if the options are rendered in the dropdown
+        const option1 = getByText('Option 1');
+        const option2 = getByText('Option 2');
+        expect(option1).toBeInTheDocument();
+        expect(option2).toBeInTheDocument();
+    });
+
+    test('disabling the select component prevents interaction', () => {
+        const onSelect = jest.fn();
+        const { getByTestId, queryByTestId } = render(
+            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect} disabled>
+                <NsSelectOption value="option1" label="Option 1" onSelect={onSelect} />
+                <NsSelectOption value="option2" label="Option 2" onSelect={onSelect} />
+            </NsSelect>
+        );
+        const selectButton = getByTestId('select-head');
+        fireEvent.mouseDown(selectButton);
+
+        // Check if the dropdown does not open (select list is not present)
+        const dropdownList = queryByTestId('select-list');
+        expect(dropdownList).toBeNull();
+
+        // Check if the onSelect callback is not called
+        expect(onSelect).not.toHaveBeenCalled();
+    });
+
+    it('select closes on mouse leave when closeOnMouseLeave is set to true', async () => {
+        render(
+            <NsSelect
+                closeOnMouseLeave
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+            >
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectHead = screen.getByTestId('select-head');
+        fireEvent.click(selectHead);
+
+        // const selectList = screen.queryByTestId ('select-list');
+        const option1 = screen.queryByTestId('option-Option1');
+        const option2 = screen.queryByTestId('option-Option2');
+        const option3 = screen.queryByTestId('option-Option3');
+        fireEvent.click(selectHead);
+
+        await waitFor(() => {
+            expect(option1).not.toBeInTheDocument();
+            expect(option2).not.toBeInTheDocument();
+            expect(option3).not.toBeInTheDocument();
+        });
+    });
+    it('select does not open when disabled', () => {
+        render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} disabled>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectHead = screen.getByTestId('select-head');
+        fireEvent.click(selectHead);
+
+        expect(screen.queryByTestId('select-list')).not.toBeInTheDocument();
+    });
+
+    it('opens the select on "ArrowDown" key press', () => {
+        render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectHead = screen.getByTestId('select-head');
+        fireEvent.keyDown(selectHead, { key: 'arrowDown' });
+
+        expect(selectHead).toBeInTheDocument();
+    });
+
+    test('renders SelectContainer with error styles when errorMessage is present', () => {
+        const errorMessage = 'Invalid value';
+        render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} errorMessage={errorMessage}>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectContainer = screen.getByTestId('select-container');
+
+        expect(selectContainer).toHaveStyle('borderColor: red');
+        expect(selectContainer).toHaveStyle('color: red');
+    });
+
+});