@nuskin/foundation-ui-components 1.1.1 → 1.3.0

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

@@ -16,7 +16,6 @@ export const Default: Story = {
     args: {
         children: 'Label',
         required: false,
-        size: 16,
     },
 };
 
@@ -24,7 +23,6 @@ export const Optional: Story = {
     args: {
         children: 'Label',
         showOptional: true,
-        size: 16,
     },
 };
 
@@ -33,6 +31,5 @@ export const Required: Story = {
         children: 'Label',
         showOptional: true,
         required: true,
-        size: 16,
     },
 };

package/src/common/label/NsLabel.tsx

@@ -27,7 +27,7 @@ const StyledLabel = styled(FormLabel)<{ fontSize?: number; style?: CSSProperties
 const NsLabel = (props: NsLabelProps) => {
     const { required, showOptional, children, size } = props;
     return (
-        <StyledLabel {...props} fontSize={size} required={required}>
+        <StyledLabel fontSize={size} {...props} required={required}>
             {children}
             {!required && showOptional ? <span className="optional-label">{' (Optional)'}</span> : null}
         </StyledLabel>

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;

package/src/common/progress/NsProgress.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { NsProgressProps } from './types';
+import StyledLinearProgress, { PercentDiv, StyledCheckCircle } from './NsProgress.styled';
+
+const NsProgress = (props: NsProgressProps) => {
+    const { color, backgroundColor, height, value, body } = props;
+    return (
+        <>
+            <PercentDiv>
+                {value}
+                {body}
+            </PercentDiv>
+            <StyledLinearProgress
+                variant="determinate"
+                role="progressbar"
+                color={color}
+                value={value}
+                height={height}
+                backgroundColor={backgroundColor}
+            />
+            <StyledCheckCircle />
+        </>
+    );
+};
+
+export default NsProgress;

package/src/common/progress/index.ts

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

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

@@ -0,0 +1,21 @@
+import { FoundationTheme } from '@nuskin/foundation-theme';
+import { ReactNode } from 'react';
+
+declare module '@mui/material/LinearProgress' {
+    // eslint-disable-next-line no-unused-vars
+    interface LinearProgressPropsColorOverrides {
+        neutral: true;
+        accentColorA: true;
+        accentColorB: true;
+        accentColorC: true;
+        accentColorD: true;
+    }
+}
+
+export type NsProgressProps = {
+    color?: FoundationTheme.PaletteColors;
+    backgroundColor?: string;
+    height?: string;
+    value: number;
+    body?: ReactNode;
+};

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

@@ -5,9 +5,10 @@ import { skipDarkModeEnabled } from '../util';
 const { paletteColor, isDarkMode, color } = ColorUtils;
 
 export const StyledHelperText = styled('div')`
-margin-top :10px;
-justify-self:flex-start;
-padding-left: 0.5em;
+    margin-top :10px;
+    padding-left: 0.5em;
+    text-align: left;
+    justify-self: flex-start;
 )`;
 
 export const StyledSpan = styled('span')`

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

@@ -8,7 +8,7 @@ function createSelectOptions(options: { value: string; label: string }[]) {
 }
 
 describe('NsSelectOption', () => {
-    test('renders NsSelectOption component without errors', () => {
+    it('1. renders NsSelectOption component without errors', () => {
         const value = 'option1';
         const label = 'Option 1';
         const { getByTestId, getByText } = render(<NsSelectOption value={value} label={label} />);
@@ -21,7 +21,7 @@ describe('NsSelectOption', () => {
         const optionLabel = getByText(label);
         expect(optionLabel).toBeInTheDocument();
     });
-    test('clicking on NsSelectOption selects the option', () => {
+    it('2. clicking on NsSelectOption selects the option', () => {
         const value = 'option1';
         const label = 'Option 1';
         const onSelect = jest.fn();
@@ -43,7 +43,7 @@ describe('NsSelect', () => {
         { value: 'Option3', label: 'Option 3' },
     ];
 
-    it('renders the placeholder text when no value is selected', () => {
+    it('1. renders the placeholder text when no value is selected', () => {
         render(
             <NsSelect
                 placeholder="Select an option"
@@ -58,9 +58,7 @@ describe('NsSelect', () => {
         expect(screen.getByText('Select an option')).toBeInTheDocument();
     });
 
-    test('clicking outside the select container closes the dropdown', () => {
-        // const value = 'option1';
-        // const label = 'Option 1';
+    it('2. clicking outside the select container closes the dropdown', () => {
         const onSelect = jest.fn();
         const selectedLabel = 'Option 1';
         const { getByTestId, queryByTestId } = render(
@@ -74,7 +72,7 @@ describe('NsSelect', () => {
         expect(queryByTestId('option-Option1')).toBeNull();
     });
 
-    it('renders the selected value label', () => {
+    it('3. renders the selected value label', () => {
         const selectedLabel = 'Option 1';
         render(
             <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
@@ -85,7 +83,7 @@ describe('NsSelect', () => {
         expect(screen.getByText(selectedLabel)).toBeInTheDocument();
     });
 
-    test('clicking on select button opens the dropdown', () => {
+    it('4. clicking on select button opens the dropdown', () => {
         const { getByTestId, getByText } = render(
             <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createSelectOptions(options)}
@@ -105,7 +103,7 @@ describe('NsSelect', () => {
         expect(option2).toBeInTheDocument();
     });
 
-    test('disabling the select component prevents interaction', () => {
+    it('5. disabling the select component prevents interaction', () => {
         const onSelect = jest.fn();
         const { getByTestId, queryByTestId } = render(
             <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect} disabled>
@@ -124,7 +122,7 @@ describe('NsSelect', () => {
         expect(onSelect).not.toHaveBeenCalled();
     });
 
-    it('select closes on mouse leave when closeOnMouseLeave is set to true', async () => {
+    it('6. select closes on mouse leave when closeOnMouseLeave is set to true', async () => {
         render(
             <NsSelect closeOnMouseLeave selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createSelectOptions(options)}
@@ -146,7 +144,7 @@ describe('NsSelect', () => {
             expect(option3).not.toBeInTheDocument();
         });
     });
-    it('select does not open when disabled', () => {
+    it('7. select does not open when disabled', () => {
         render(
             <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} disabled>
                 {createSelectOptions(options)}
@@ -159,7 +157,7 @@ describe('NsSelect', () => {
         expect(screen.queryByTestId('select-list')).not.toBeInTheDocument();
     });
 
-    it('opens the select on "ArrowDown" key press', () => {
+    it('8. opens the select on "ArrowDown" key press', () => {
         render(
             <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createSelectOptions(options)}
@@ -172,9 +170,77 @@ describe('NsSelect', () => {
         expect(selectHead).toBeInTheDocument();
     });
 
-    test('renders SelectContainer with error styles when errorMessage is present', () => {
-        const errorMessage = 'Invalid value';
+    it('9. closes the select when closeSelect is called', () => {
+        const { getByTestId } = render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} closeOnMouseLeave>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectContainer = getByTestId('select-container');
+        fireEvent.mouseLeave(selectContainer);
+
+        expect(screen.queryByTestId('select-list')).not.toBeInTheDocument();
+    });
+
+    it('10. does not open the select when disabled', () => {
         render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} disabled>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectHead = screen.getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+
+        expect(screen.queryByTestId('select-list')).not.toBeInTheDocument();
+    });
+
+    it('11. selects the next option on arrow right click', () => {
+        // Render the NsSelect component with options and onSelect function
+        const onSelect = jest.fn();
+        const { getByTestId } = render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} hasArrows>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        // Simulate the arrow right click on the NsSelect component
+        const selectHead = getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+
+        const rightArrow = document.getElementsByClassName('RightArrow')[0];
+        fireEvent.click(rightArrow);
+
+        // Verify that the next option is selected and the onSelect function is called
+        expect(onSelect).toHaveBeenCalledWith('Option1');
+    });
+
+    it('12. selects the previous option on arrow left click', () => {
+        const { getByTestId } = render(
+            <NsSelect
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+                hasArrows
+                reverseArrowControls
+            >
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectHead = getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+
+        const leftArrow = document.getElementsByClassName('LeftArrow')[0];
+        fireEvent.click(leftArrow);
+
+        expect(onSelect).toHaveBeenCalledWith('Option1');
+    });
+
+    it('13. renders an error message with red styles', () => {
+        const errorMessage = 'Invalid value';
+        const { getByText } = render(
             <NsSelect
                 selectedValue={selectedValue}
                 selectedLabel={selectedLabel}
@@ -185,9 +251,24 @@ describe('NsSelect', () => {
             </NsSelect>
         );
 
-        const selectContainer = screen.getByTestId('select-container');
+        // Check if the error message is rendered correctly with red styles
+        const errorText = getByText(errorMessage);
+        expect(errorText).toBeInTheDocument();
+    });
+    it('14. selecting an option calls the onSelect callback', () => {
+        const onSelect = jest.fn();
+        const { getByTestId } = render(
+            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
+                {createSelectOptions(options)}
+            </NsSelect>
+        );
+
+        const selectHead = getByTestId('select-head');
+        fireEvent.mouseDown(selectHead);
+
+        const option1 = getByTestId('option-Option1');
+        fireEvent.click(option1);
 
-        expect(selectContainer).toHaveStyle('borderColor: red');
-        expect(selectContainer).toHaveStyle('color: red');
+        expect(onSelect).toHaveBeenCalledWith('Option1');
     });
 });

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

@@ -1,12 +1,27 @@
+import { HTMLAttributes } from 'react';
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 import { Themed } from '../common.types';
 import { getDropdownHeadBorder } from '../dropdown/NsDropdown.styled';
 const { color, paletteColor, isDarkMode } = ColorUtils;
 
-export const SelectContainer = styled.div<{ disabled: boolean }>`
+interface SelectLabelProps extends HTMLAttributes<HTMLLabelElement> {
+    errorMessage?: string;
+}
+
+export const SelectContainer = styled.div<{ disabled: boolean; errorMessage?: string }>`
     position: relative;
     display: inline-block;
     opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+    color: ${({ theme, errorMessage }) =>
+        errorMessage ? paletteColor('error')({ theme }) : paletteColor('primary')({ theme })};
+`;
+export const SelectMain = styled.div`
+    position: relative;
+    display: flex;
+`;
+
+export const ErrorContainer = styled.div`
+    color: ${paletteColor('error')};
 `;
 
 export const SelectHead = styled.div<{ type: string; disabled: boolean }>`
@@ -26,6 +41,18 @@ export const SelectButton = styled.div`
     padding-right: 10px;
 `;
 
+export const LeftArrowContainer = styled.div`
+    display: flex;
+    align-items: center;
+    padding-top: 30px;
+`;
+
+export const RightArrowContainer = styled.div`
+    display: flex;
+    align-items: center;
+    padding-top: 30px;
+`;
+
 export const SelectList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
     position: absolute;
     z-index: 100;
@@ -33,18 +60,28 @@ export const SelectList = styled.div<{ borderColor: FoundationTheme.PaletteColor
     padding: 0;
     margin: 0;
     width: -webkit-fill-available;
-    color: ${paletteColor('primary')};
+    color: ${paletteColor('primary', 'main')};
     background-color: ${paletteColor('primary', 'contrastText')};
+    max-height: 200px;
+    overflow-y: auto;
 `;
 
-const getDividerColor = (props: { theme: FoundationTheme.Theme }) => {
-    return !isDarkMode(props) ? color('neutral', '30')(props) : color('neutral', '20')(props);
-};
-
-const getListBgColor = (props: { theme: FoundationTheme.Theme }) => {
+const getDividerColor = ({ theme }: Themed) =>
+    isDarkMode({ theme }) ? color('neutral', '20')({ theme }) : color('neutral', '30')({ theme });
+const getListBgColor = (props: Themed) => {
     return !isDarkMode(props) ? color('accentColorB', '10')(props) : color('accentColorB', '50')(props);
 };
 type ContainerParam = { borderBottom: string; bgColor: string; color: string; hoveredBg: string };
+
+export const ListItemContainer = styled.div<{ showListDivider: boolean; isSelected: boolean }>`
+    ${({ showListDivider, isSelected, theme }) => {
+        const borderBottom = showListDivider ? getDividerColor({ theme }) : 'none';
+        const bgColor = isSelected ? paletteColor('primary')({ theme }) : 'white';
+        const color = isSelected ? 'white' : 'black';
+        const hoveredBg = getListBgColor({ theme });
+        return createListContainerStyle({ borderBottom, bgColor, color, hoveredBg });
+    }}
+`;
 function createListContainerStyle({ borderBottom, bgColor, color, hoveredBg }: ContainerParam) {
     return `
     cursor: pointer;
@@ -62,15 +99,6 @@ function createListContainerStyle({ borderBottom, bgColor, color, hoveredBg }: C
     }
 `;
 }
-export const ListItemContainer = styled.div<{ showListDivider: boolean; isSelected: boolean }>`
-    ${({ showListDivider, isSelected, theme }) => {
-        const borderBottom = showListDivider ? getDividerColor({ theme }) : 'none';
-        const bgColor = isSelected ? paletteColor('primary')({ theme }) : 'white';
-        const color = isSelected ? 'white' : 'black';
-        const hoveredBg = getListBgColor({ theme });
-        return createListContainerStyle({ borderBottom, bgColor, color, hoveredBg });
-    }}
-`;
 const getListItemBgColor = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
     if (isSelected) {
         return paletteColor('primary')({ theme });
@@ -86,6 +114,14 @@ const getListItemBorderLeftColor = ({ isSelected, theme }: { isSelected: boolean
     return 'none';
 };
 
+export const SelectLabel = styled.label<SelectLabelProps>`
+    display: block;
+    margin-bottom: 5px;
+    color: ${({ theme, errorMessage }) =>
+        errorMessage ? paletteColor('error')({ theme }) : paletteColor('primary')({ theme })};
+}
+`;
+
 export const ListItem = styled.div<{ isSelected: boolean }>(({ isSelected, theme }) => ({
     padding: '5px 10px',
     borderLeft: getListItemBorderLeftColor({ isSelected, theme }),
@@ -96,9 +132,3 @@ export const ListItem = styled.div<{ isSelected: boolean }>(({ isSelected, theme
         fontWeight: 'bold',
     },
 }));
-
-export const SelectLabel = styled.label`
-    display: block;
-    margin-bottom: 5px;
-    color: ${paletteColor('primary')} !important;
-`;