@nuskin/foundation-ui-components 1.1.1 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.1.1",
+    "version": "1.2.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "private": false,
     "main": "src/common/index.ts",
@@ -41,8 +41,8 @@
         "types:check": "tsc --pretty --noEmit"
     },
     "dependencies": {
-        "@emotion/react": "^11.10.6",
-        "@emotion/styled": "^11.10.6",
+        "@emotion/react": "^11.11.1",
+        "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.11.11",
         "@mui/material": "5.4.2",
         "@mui/utils": "^5.14.1",
@@ -71,7 +71,7 @@
         "@storybook/addon-mdx-gfm": "^7.0.7",
         "@storybook/jest": "^0.1.0",
         "@storybook/nextjs": "^7.0.7",
-        "@storybook/react": "^7.0.7",
+        "@storybook/react": "^7.0.24",
         "@storybook/test-runner": "^0.10.0",
         "@storybook/testing-library": "^0.1.0",
         "@testing-library/jest-dom": "^5.16.5",

package/src/common/auth-dropdown/NsAuthDropdown.tsx

@@ -1,4 +1,5 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useRef, useState } from 'react';
+
 import { NsIcon } from '../icon';
 import {
     AuthDropdownContainer,
@@ -11,6 +12,7 @@ import {
     SignUpLink,
 } from './NsAuthDropdown.styled';
 import { NsAuthDropdownProps } from './types.d';
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
 
 const NsAuthDropdown = ({
     signInRedirectLink,
@@ -23,11 +25,14 @@ const NsAuthDropdown = ({
     darkModeEnabled = true,
 }: NsAuthDropdownProps) => {
     const [isOpen, setIsOpen] = useState(false);
+    const dropdowneRef = useRef<HTMLDivElement | null>(null);
 
     const handleToggle = () => {
-        setIsOpen((prevIsOpen) => !prevIsOpen);
+        setIsOpen(!isOpen);
     };
 
+    useOnClickOutside(dropdowneRef, handleToggle);
+
     const closeDropdown = useCallback(() => {
         if (closeOnMouseLeave) {
             setIsOpen(false);
@@ -35,7 +40,7 @@ const NsAuthDropdown = ({
     }, [closeOnMouseLeave]);
 
     return (
-        <AuthDropdownContainer>
+        <AuthDropdownContainer ref={dropdowneRef}>
             <AuthHead data-testid="auth-head" onClick={handleToggle} darkModeEnabled={darkModeEnabled}>
                 <Button>{titleText}</Button>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />

package/src/common/autocomplete/NsAutocomplete.spec.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
 import { render, screen, waitFor } from '@/test-utils/index';
-import { NsAutocomplete } from '@/common/index';
 import { OptionUiComponent } from './mock/MockUI';
 import { AutocompleteMockList } from './mock/MockData';
-import userEvent from '@testing-library/user-event';
-import { act } from 'react-dom/test-utils';
+import NsAutocomplete from './NsAutocomplete';
 
 describe('CustomAutocomplete', () => {
     it('1. should render autocomplete component', () => {

package/src/common/autocomplete/mock/MockData.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 import { OptionsProps } from '../types';
 
 export const AutocompleteMockList: OptionsProps[] = [

package/src/common/button/NsButton.stories.tsx

@@ -26,7 +26,6 @@ export default {
         color: { name: 'Color Variants' },
         disabled: { control: 'boolean' },
         fullWidth: { control: 'boolean' },
-
         iconOnly: { control: 'hide' },
     },
     args: {

package/src/common/card/styled/NsFfgStyled.tsx

@@ -21,7 +21,6 @@ const Component = () => {
             '.action-link': {
                 color: '#2CD5C4',
                 textDecoration: 'none',
-                fontWeight: 600,
             },
         },
         '.body-text': {

package/src/common/carousal/NsCarousal.tsx

@@ -1,12 +1,11 @@
 import Box from '@mui/material/Box';
 import { styled } from '@nuskin/foundation-theme';
-import { useRef, useCallback } from 'react';
+import { useRef, useCallback, ReactNode } from 'react';
 import Slider from 'react-slick';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import defaultCarousalSettings from './slickSetting';
 import CarousalControl from './CarousalControl';
-import { NsCarousalProps } from './types';
 
 const SlickContainer = styled(Box)(() => {
     return {
@@ -17,8 +16,15 @@ const SlickContainer = styled(Box)(() => {
         },
     };
 });
+interface CarousalProps<T = any> {
+    entries: T[];
+    // eslint-disable-next-line no-unused-vars
+    renderEntry(entry: T, index: number): ReactNode;
+    allEntryLink: string;
+    settings: any;
+}
 
-export default function NsCarousal({ entries, renderEntry, allEntryLink, settings }: NsCarousalProps) {
+export default function NsCarousal({ entries, renderEntry, allEntryLink, settings }: CarousalProps) {
     const sliderRef = useRef();
     const prev = useCallback(() => {
         if (sliderRef.current) {

package/src/common/cart-icon/NsCartIcon.spec.tsx

@@ -3,13 +3,13 @@ import { render, screen } from '@/test-utils/index';
 
 const { getByTestId } = screen;
 describe('NsCartIcon', () => {
-    it('renders Cart icon when item count is 0', () => {
+    it('1. renders Cart icon when item count is 0', () => {
         render(<NsCartIcon itemCount={0} color="primary" size="large" />);
         const cartIcon = getByTestId('cart-badge-icon');
         expect(cartIcon).toBeInTheDocument();
     });
 
-    it('renders item count badge when item count is greater than 0', () => {
+    it('2. renders item count badge when item count is greater than 0', () => {
         const itemCount = 5;
         const { getByText } = render(<NsCartIcon itemCount={5} color="primary" size="large" />);
         const badgeContentElement = getByText(itemCount.toString());

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

@@ -3,7 +3,7 @@ import { CheckboxProps as MUICheckboxProps } from '@material-ui/core/Checkbox';
 import { NsFlagProps } from '../flag';
 
 // Define the props for the custom checkbox component
-export type NsCheckboxProps = Partial<Pick<MUICheckboxProps, 'label' | 'onChange'>> & {
+export type NsCheckboxProps = Pick<MUICheckboxProps, 'label' | 'onChange'> & {
     name: string;
     className?: string;
     checked: boolean;

package/src/common/dropdown/NsDropdown.tsx

@@ -1,7 +1,9 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
+
 import { DropdownContainer, DropdownButton, DropdownList, DropdownHead } from './NsDropdown.styled';
 import { NsIcon } from '../icon';
 import { DropdownProps } from './types.d';
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
 
 const NsDropdown: React.FC<DropdownProps> = ({
     selectedValue,
@@ -17,12 +19,15 @@ const NsDropdown: React.FC<DropdownProps> = ({
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(selectedValue || '');
+    const dropdowneRef = useRef<HTMLDivElement | null>(null);
 
     const handleToggle = () => {
         if (disabled) return;
         setIsOpen(!isOpen);
     };
 
+    useOnClickOutside(dropdowneRef, handleToggle);
+
     const closeDropdown = () => {
         if (closeOnMouseLeave) {
             setIsOpen(false);
@@ -36,7 +41,7 @@ const NsDropdown: React.FC<DropdownProps> = ({
     };
 
     return (
-        <DropdownContainer disabled={disabled}>
+        <DropdownContainer disabled={disabled} ref={dropdowneRef}>
             <DropdownHead data-testid="dropdown-head" disabled={disabled} type={type} onClick={handleToggle}>
                 <DropdownButton>{selectedLabel || placeholder}</DropdownButton>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />

package/src/common/hooks/useOnClickOutside.tsx

@@ -0,0 +1,25 @@
+import { RefObject, useEffect } from 'react';
+
+export type Handler = () => void;
+
+export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+    ref: RefObject<T>,
+    handler: Handler,
+    mouseEvent: 'click' | 'mousedown' | 'mouseup' = 'click'
+): void {
+    const handleEventListener = (event: MouseEvent) => {
+        const el = ref?.current;
+        if (!el || el.contains(event.target as Node)) {
+            return;
+        }
+        handler();
+    };
+    useEffect(() => {
+        if (document) {
+            document.addEventListener(mouseEvent, handleEventListener);
+            return () => {
+                document.removeEventListener(mouseEvent, handleEventListener);
+            };
+        }
+    }, []);
+}

package/src/common/icon/NsIconVariants.ts

@@ -11,6 +11,7 @@ import CheckVerified from './icons/CheckVerified';
 import SuccessIcon from './icons/SuccessIcon';
 import ErrorIcon from './icons/ErrorIcon';
 import TrashIcon from './icons/TrashIcon';
+import SearchIcon from './icons/SearchIcon';
 import SlashIcon from './icons/SlashIcon';
 import Home from './icons/home';
 import AlertErrorIcon from './icons/AlertErrorIcon';
@@ -19,7 +20,6 @@ import CloseIcon from './icons/CloseIcon';
 import UserIcon from './icons/UserIcon';
 import HamburgerIcon from './icons/HamburgerIcon';
 import UserOutline from './icons/UserOutline';
-import SearchIcon from './icons/SearchIcon';
 
 const IconVariants = {
     arrowDown: ArrowDown,

package/src/common/index.ts

@@ -1,8 +1,8 @@
 export * from './accordion';
 export * from './alert';
 export * from './auth-dropdown';
-export * from './autocomplete';
 export * from './banner';
+
 export * from './breadcrumb';
 export * from './brand-components';
 export * from './button';

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,7 @@ 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 +115,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 +133,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;
-`;

package/src/common/select/NsSelect.tsx

@@ -1,8 +1,17 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { SelectContainer, SelectButton, SelectList, SelectHead, SelectLabel } from './NsSelect.styled';
+import React, { useState, useRef, useEffect, Children } from 'react';
+import {
+    SelectContainer,
+    SelectButton,
+    SelectList,
+    SelectHead,
+    SelectLabel,
+    SelectMain,
+    LeftArrowContainer,
+    RightArrowContainer,
+    ErrorContainer,
+} from './NsSelect.styled';
 import { NsIcon } from '../icon';
 import { SelectProps } from './types.d';
-
 const NsSelect: React.FC<SelectProps> = ({
     selectedValue,
     selectedLabel,
@@ -17,9 +26,14 @@ const NsSelect: React.FC<SelectProps> = ({
     label,
     readOnly = false,
     errorMessage,
+    hasArrows,
+    // eslint-disable-next-line no-unused-vars
+    rules,
+    reverseArrowControls,
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(selectedValue || '');
+    const [selectedIndex, setSelectedIndex] = useState(-1);
     const selectContainerRef = useRef<HTMLDivElement>(null);
     const selectHeadRef = useRef<HTMLDivElement>(null);
 
@@ -29,19 +43,16 @@ const NsSelect: React.FC<SelectProps> = ({
         }
     };
 
-    const handleSelect = (input: string) => {
+    const handleSelect = (input: string, index: number) => {
         onSelect(input);
         setIsOpen(false);
         setValue(input);
+        setSelectedIndex(index);
     };
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     const handleClickOutside = (event: MouseEvent) => {
-        if (
-            selectContainerRef.current &&
-            !selectContainerRef.current.contains(event.target as Node) &&
-            isOpen
-        ) {
+        if (selectContainerRef.current && !selectContainerRef.current.contains(event.target as Node) && isOpen) {
             setIsOpen(false);
         }
     };
@@ -55,6 +66,40 @@ const NsSelect: React.FC<SelectProps> = ({
             }, 0);
         }
     };
+    const handleArrowRightClick = () => {
+        if (selectedIndex !== -1) {
+            const nextIndex = reverseArrowControls ? selectedIndex - 1 : selectedIndex + 1;
+            const childrenArray = Children.toArray(children);
+            const optionAtIndex = childrenArray[nextIndex];
+            const { value } = (optionAtIndex as any)?.props ?? {};
+            handleSelect(value, nextIndex);
+        } else {
+            if (!reverseArrowControls) {
+                const nextIndex = selectedIndex + 1;
+                const childrenArray = Children.toArray(children);
+                const optionAtIndex = childrenArray[nextIndex];
+                const { value } = (optionAtIndex as any)?.props ?? {};
+                handleSelect(value, nextIndex);
+            }
+        }
+    };
+    const handleArrowLeftClick = () => {
+        if (selectedIndex !== -1) {
+            const nextIndex = reverseArrowControls ? selectedIndex + 1 : selectedIndex - 1;
+            const childrenArray = Children.toArray(children);
+            const optionAtIndex = childrenArray[nextIndex];
+            const { value } = (optionAtIndex as any)?.props ?? {};
+            handleSelect(value, nextIndex);
+        } else {
+            if (reverseArrowControls) {
+                const nextIndex = selectedIndex + 1;
+                const childrenArray = Children.toArray(children);
+                const optionAtIndex = childrenArray[nextIndex];
+                const { value } = (optionAtIndex as any)?.props ?? {};
+                handleSelect(value, nextIndex);
+            }
+        }
+    };
 
     useEffect(() => {
         document.addEventListener('click', handleClickOutside);
@@ -64,53 +109,73 @@ const NsSelect: React.FC<SelectProps> = ({
     }, [handleClickOutside, isOpen]);
 
     return (
-        <SelectContainer
-            data-testid="select-container"
-            disabled={disabled || readOnly}
-            ref={selectContainerRef}
-            style={{
-                borderColor: errorMessage ? 'red' : undefined,
-                color: errorMessage ? 'red' : 'inherit',
-            }}
-        >
-            {label && <SelectLabel style={{ color: errorMessage ? 'red' : 'inherit' }}>{label}</SelectLabel>}
-            <SelectHead
-                data-testid="select-head"
+        <SelectMain>
+            {hasArrows && (
+                <LeftArrowContainer
+                    onClick={handleArrowLeftClick}
+                    className="LeftArrow"
+                    style={{
+                        visibility:
+                            !reverseArrowControls && (selectedIndex === 0 || selectedIndex < 0) ? 'hidden' : 'visible',
+                    }}
+                >
+                    <NsIcon name="arrowLeft" color="primary" />
+                </LeftArrowContainer>
+            )}
+            <SelectContainer
+                data-testid="select-container"
                 disabled={disabled || readOnly}
-                type={type}
-                onMouseDown={handleMouseClick}
-                tabIndex={0}
-                ref={selectHeadRef}
+                ref={selectContainerRef}
+                errorMessage={errorMessage}
             >
-                <SelectButton>{selectedLabel || placeholder}</SelectButton>
-                {!readOnly && (
-                    <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
-                )}
-            </SelectHead>
-            {isOpen ? (
-                <SelectList
-                    data-testid="select-list"
-                    onMouseLeave={closeSelect}
-                    borderColor={selectBorderColor}
-                    className='selectList'
+                {label && <SelectLabel errorMessage={errorMessage}>{label}</SelectLabel>}
+                <SelectHead
+                    data-testid="select-head"
+                    disabled={disabled || readOnly}
+                    type={type}
+                    onMouseDown={handleMouseClick}
+                    tabIndex={0}
+                    ref={selectHeadRef}
                 >
-                    <div style={{ maxHeight: '200px', overflowY: 'auto' }}>
-                        {React.Children.map(children, (child) => {
+                    <SelectButton>{selectedLabel || placeholder}</SelectButton>
+                    {!readOnly && <NsIcon name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />}
+                </SelectHead>
+                {isOpen ? (
+                    <SelectList
+                        data-testid="select-list"
+                        onMouseLeave={closeSelect}
+                        borderColor={selectBorderColor}
+                        className="selectList"
+                    >
+                        {React.Children.map(children, (child, index) => {
                             if (React.isValidElement(child)) {
                                 return React.cloneElement(child, {
                                     // @ts-ignore
-                                    onSelect: handleSelect,
+                                    onSelect: (input: string) => handleSelect(input, index),
                                     selectedValue: value,
                                     showListDivider,
+                                    index,
                                 });
                             }
                             return null;
                         })}
-                    </div>
-                </SelectList>
-            ) : null}
-            {errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div>}
-        </SelectContainer>
+                    </SelectList>
+                ) : null}
+                {errorMessage && <ErrorContainer>{errorMessage}</ErrorContainer>}
+            </SelectContainer>
+            {hasArrows && (
+                <RightArrowContainer
+                    onClick={handleArrowRightClick}
+                    className="RightArrow"
+                    style={{
+                        visibility:
+                            reverseArrowControls && (selectedIndex === 0 || selectedIndex < 0) ? 'hidden' : 'visible',
+                    }}
+                >
+                    <NsIcon name="arrowRight" color="primary" />
+                </RightArrowContainer>
+            )}
+        </SelectMain>
     );
 };
 

package/src/common/select/NsSelectOption.tsx

@@ -24,7 +24,6 @@ export const NsSelectOption: React.FC<SelectOptionProps> = ({
         >
             <ListItem isSelected={value === selectedValue}>{label}</ListItem>
         </ListItemContainer>
-
     );
 };
 export default NsSelectOption;

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

@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import NsSelect from '../NsSelect';
 import NsSelectOption from '../NsSelectOption';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsSelect;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
 
 export default {
     title: 'Components/Inputs/NsSelect',
-    decorators: [
-        (story) => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{story()}</div>,
-    ],
+    decorators: [withCenterDecorator],
     component: NsSelect,
     argTypes: {
         type: { control: 'select', options: ['unfilled', 'outlined'] },
@@ -26,6 +29,7 @@ export default {
         validateOnBlur: { control: 'boolean' },
         autoComplete: { control: 'text' },
         rules: { control: 'array' },
+        hasArrows: { control: 'boolean' },
     },
     parameters: {
         options: [
@@ -100,17 +104,16 @@ export default {
         validateOnBlur: false,
         autoComplete: '',
         rules: [],
+        hasArrows: false,
     },
-} as ComponentMeta<typeof NsSelect>;
-
-export const Select: ComponentStory<typeof NsSelect> = (args, context) => {
-    const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
-    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
+} as MetaStory;
 
-    const options = context.parameters.options;
+const AppSelect = (props: any) => {
+    const [selectedLabel, setSelectedLabel] = useState(props.selectedLabel);
+    const [selectedValue, setSelectedValue] = useState(props.selectedValue);
     const handleSelect = (value: string) => {
         setSelectedValue(value);
-        options.find((option: any) => {
+        props.options.find((option: any) => {
             if (option.value === value) {
                 setSelectedLabel(option.label);
             }
@@ -120,15 +123,21 @@ export const Select: ComponentStory<typeof NsSelect> = (args, context) => {
 
     return (
         <NsSelect
-            {...args}
+            {...props}
             selectedValue={selectedValue}
             selectedLabel={selectedLabel}
             onSelect={handleSelect}
-            label={args.label}
+            label={props.label}
         >
-            {options.map((option: any) => (
+            {props.options.map((option: any) => (
                 <NsSelectOption key={option.value} value={option.value} label={option.label} />
             ))}
         </NsSelect>
     );
 };
+export const Select: Story = {
+    render: (args, context) => {
+        const options = context.parameters.options;
+        return <AppSelect options={options} {...args} />;
+    },
+};

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

@@ -22,7 +22,9 @@ export interface SelectProps {
     itemValue?: string;
     validateOnBlur?: boolean;
     autoComplete?: string;
-    rules?: any[];
+    // eslint-disable-next-line no-undef
+    rules?: Array;
+    hasArrows?: boolean;
 }
 
 export interface SelectOptionProps {