@nuskin/foundation-ui-components 1.0.0-cft-35.12 → 1.0.0-develop.1

package/src/common/card/stories/NsFfgCard.stories.tsx

@@ -0,0 +1,40 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+import { NsFfgCard } from '../';
+
+type ComponentType = typeof NsFfgCard;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    component: NsFfgCard,
+    title: 'Components/NsCard/NsFfgCard',
+    argTypes: {},
+    decorators: [withCenterDecorator],
+} as MetaStory;
+
+export const Default: Story = {
+    args: {
+        actionText: 'LEARN MORE',
+        actionLink: 'https://www.forceforgood.org/',
+        text: 'Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation, we’re empowering children around the world with hope for a brighter future.',
+        topImageUrl:
+            'https://images.contentstack.io/v3/assets/blt594f30e2dc643eae/blt34cdb300dc9b93ff/645ccaa7520ba1a1af13a08a/nsffg-foundation.webp',
+        topImageAlt: 'Force for Good Foundation',
+        additionalProps: {
+            testid: 'ffg-card',
+        },
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        await userEvent.hover(canvas.getByTestId('ffg-card'));
+        await userEvent.hover(canvas.getByRole('link'));
+        await expect(
+            canvas.getByText(
+                'Every child deserves a chance to shine. Through our Nu Skin Force for Good Foundation, we’re empowering children around the world with hope for a brighter future.'
+            )
+        ).toBeInTheDocument();
+    },
+};

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

@@ -0,0 +1,44 @@
+import { Box } from '@mui/material';
+import { styled } from '@nuskin/foundation-theme';
+
+const options = {};
+
+const Component = () => {
+    return {
+        backgroundClip: 'border-box',
+        backgroundColor: '#fff',
+        border: '1px solid #eff2f7',
+        borderRadius: '1rem',
+        boxShadow: '0 0.75rem 1.5rem rgba(18, 38, 63, .03)',
+        display: 'flex',
+        flexDirection: 'column' as 'column', // https://github.com/cssinjs/jss/issues/1344
+        marginBottom: '2rem',
+        transition: 'all .2s ease',
+        textAlign: 'center' as 'center',
+        wordWrap: 'break-word' as 'break-word',
+        ':hover': {
+            transform: 'translateY(-10px)',
+            boxShadow: '0 1rem 3rem rgba(31, 45, 61, .125) !important',
+            '.action-link': {
+                color: '#2CD5C4',
+                textDecoration: 'none',
+            },
+        },
+        '.body-text': {
+            padding: '0 1.5rem 3rem',
+            fontSize: '1rem',
+            color: '#8492a6',
+        },
+        '.top-image': {
+            padding: '1.5rem 3rem',
+        },
+        '.action-link': {
+            color: '#3c4858',
+            fontSize: '1.25rem',
+            padding: '0 1.5rem 3rem',
+            fontWeight: 600,
+            marginBottom: '0.67rem',
+        },
+    };
+};
+export const NsFfgStyled = styled(Box, options)<{}>(Component);

package/src/common/card/tests/NsFfgCard.spec.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import NsFfgCard from '../NsFfgCard';
+
+describe('NsFfgCard component', () => {
+    const props = {
+        topImageUrl: 'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
+        topImageAlt: 'alt-text',
+        text: 'card text',
+        actionLink: 'https://www.google.com',
+    };
+    it('renders with background image', () => {
+        render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card' }} />);
+        const card = screen.getByTestId('ffg-card');
+        expect(card).toHaveStyle(`
+    			background-color: #fff;
+    		`);
+    });
+    it('renders with cover size', () => {
+        render(<NsFfgCard {...props} additionalProps={{ testid: 'ffg-card-1' }} actionText="Details" />);
+        const card = screen.getByText('Details');
+        expect(card).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,9 @@
+import { AdditionalProps } from '../common.types';
+
+export type NsFfgCardProps = AdditionalProps & {
+    topImageUrl: string;
+    topImageAlt: string;
+    text: string;
+    actionLink: string;
+    actionText?: string;
+};

package/src/common/carousal/CarousalControl.tsx

@@ -1,8 +1,6 @@
 import { styled } from '@nuskin/foundation-theme';
-import LeftChevron from './LeftChevron';
 import IconWrapper from './IconWrapper';
-import RightChevron from './RightChevron';
-import { NsTypography, NsLink } from '..';
+import { NsTypography, NsLink, NsIcon } from '..';
 
 interface CarousalControlProps {
     next(): void;
@@ -32,10 +30,10 @@ const CarousalControl = ({ next, prev, viewAllUrl }: CarousalControlProps) => {
                     <NsTypography variant={'h5'}>View All</NsTypography>
                 </NsLink>
                 <IconWrapper onClick={prev} className="carousal-prev-button">
-                    <LeftChevron />
+                    <NsIcon name="arrowLeft" />
                 </IconWrapper>
                 <IconWrapper onClick={next} className="carousal-next-button">
-                    <RightChevron />
+                    <NsIcon name="arrowRight" />
                 </IconWrapper>
             </InnerWrapper>
         </Wrapper>

package/src/common/carousal/IconWrapper.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { styled } from '@nuskin/foundation-theme';
 import { Box } from '@mui/material';
-// TODO: check if this can be updated with NsIcon
+
 type IconWrapperProps = PropsWithChildren<{
     onClick(): void;
     className?: string;
@@ -14,12 +14,12 @@ const Wrapper = styled(
     const strokeColor = theme.palette?.primary?.main ?? '#252525';
     return {
         display: 'flex',
-        height: '20px',
-        width: '20px',
+        width: 'auto',
         border: `2px solid ${strokeColor}`,
         borderRadius: '3px',
         cursor: 'pointer',
-        padding: '10px',
+        padding: '6px 10px',
+        boxSizing: 'content-box',
     };
 });
 const IconWrapper = ({ children, onClick, className }: IconWrapperProps) => {

package/src/common/carousal/tests/NsCarousal.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent } from '../../../../test-utils';
 import NsCarousal from '../NsCarousal';
 
 const mockEntries = [
@@ -19,7 +19,7 @@ const mockSettings = {
 };
 describe('NsCarousal', () => {
     it('should have prev and next chevron', () => {
-        const { getByTestId } = render(
+        render(
             <NsCarousal
                 entries={[]}
                 renderEntry={mockRenderEntry}
@@ -27,8 +27,8 @@ describe('NsCarousal', () => {
                 settings={mockSettings}
             />
         );
-        const prevSvg = getByTestId('prev-chevron');
-        const nextSvg = getByTestId('next-chevron');
+        const prevSvg = screen.getByTestId('arrowLeft');
+        const nextSvg = screen.getByTestId('arrowRight');
         expect(prevSvg).toBeInTheDocument();
         expect(nextSvg).toBeInTheDocument();
     });

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

@@ -1,21 +1,27 @@
 import { NsCartIcon } from './';
-import { render } from '../../../test-utils';
+import { render, screen } from '../../../test-utils';
 
+const { getByTestId } = screen;
 describe('NsCartIcon', () => {
     it('renders Cart icon when item count is 0', () => {
-        const { getByTestId } = render(<NsCartIcon itemCount={0} color="primary" size="large" />);
+        render(<NsCartIcon itemCount={0} color="primary" size="large" />);
+        const cartIcon = getByTestId('cart-icon');
+        expect(cartIcon).toBeInTheDocument();
+    });
+    it('renders Cart icon with optional values', () => {
+        render(<NsCartIcon itemCount={0} />);
         const cartIcon = getByTestId('cart-icon');
         expect(cartIcon).toBeInTheDocument();
     });
 
     it('renders Cart Badge icon when item count is greater than 0', () => {
-        const { getByTestId } = render(<NsCartIcon itemCount={5} color="primary" size="large" />);
+        render(<NsCartIcon itemCount={5} color="primary" size="large" />);
         const cartBadgeIcon = getByTestId('cart-badge-icon');
         expect(cartBadgeIcon).toBeInTheDocument();
     });
 
     it('renders item count badge when item count is greater than 0', () => {
-        const { getByTestId } = render(<NsCartIcon itemCount={5} color="primary" size="large" />);
+        render(<NsCartIcon itemCount={5} color="primary" size="large" />);
         const itemCountBadge = getByTestId('item-count-badge');
         expect(itemCountBadge).toBeInTheDocument();
         expect(itemCountBadge.textContent).toBe('5');

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
 import { NsCartIcon } from './';
 
 type ComponentType = typeof NsCartIcon;
@@ -9,7 +9,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsCartIcon',
     component: NsCartIcon,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
     argTypes: {
         itemCount: { control: 'number', defaultValue: 1 },
         size: { control: 'select', options: ['small', 'medium', 'large', 'xLarge'] },

package/src/common/checkbox/NsCheckbox.stories.tsx

@@ -1,12 +1,8 @@
-/**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsCheckbox.tsx
- * @description Story for NsCheckbox component.
- */
-
 import React, { useState } from 'react';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+import { within } from '@testing-library/react';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
 import type { StoryObj, Meta } from '@storybook/react';
+import { expect } from '@storybook/jest';
 
 import { NsCheckbox } from './';
 
@@ -14,11 +10,12 @@ type ComponentType = typeof NsCheckbox;
 type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
+const labelText = 'Checkbox Label';
 // In this case, we're only passing the label prop.
 export default {
     title: 'Components/NsCheckbox',
     component: NsCheckbox,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
     argTypes: {
         disabled: { control: 'boolean' },
         flag: {
@@ -27,10 +24,10 @@ export default {
         },
     },
     args: {
-        label: 'Label Text',
+        label: labelText,
         disabled: false,
         ariaLabel: 'primary checkbox',
-        size: 'small',
+        size: 'medium',
         flag: {
             message: 'New',
             color: 'accentColorA',
@@ -40,12 +37,6 @@ export default {
 
 const RenderCheckbox = (args: any) => {
     const [isChecked, setIsChecked] = useState(false);
-
-    /*
-        When the checkbox changes, we're calling handleChange,
-        which updates the isChecked state and calls the onChange function,
-        passing in the new isChecked value.
-    */
     const handleChange = (event: { target: { checked: boolean } }) => {
         const isChecked = event.target.checked;
         setIsChecked(isChecked);
@@ -55,4 +46,9 @@ const RenderCheckbox = (args: any) => {
 };
 export const Checkbox: Story = {
     render: RenderCheckbox,
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const el = canvas.getByText(labelText);
+        expect(el).toBeInTheDocument();
+    },
 };

package/src/common/column-control/NDivs.story.tsx

@@ -0,0 +1,35 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+
+type DivArrayProps = {
+    elementsCount: number;
+};
+
+/**
+ * this component return a fragment containing n number of div, with each div numbered as per its index
+ * @param n: number of div to render
+ * @returns
+ */
+export const DivArray = ({ elementsCount }: DivArrayProps) => (
+    <>
+        {Array(elementsCount)
+            .fill(0)
+            .map((e, i) => (
+                <div key={i}>{i + 1}</div>
+            ))}
+    </>
+);
+type ComponentType = typeof DivArray;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/NsColumnControl/NDivs',
+    component: DivArray,
+    decorators: [withCenterDecorator],
+    args: {
+        n: 2,
+    },
+} as MetaStory;
+
+export const Basic: Story = {};

package/src/common/column-control/NsColumnControl.spec.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '../../../test-utils';
+import { NsColumnControl } from './';
+import { DivArray } from './NDivs.story';
+
+describe('NsColumnControl component', () => {
+    it('renders an column with proper grid value for tablet', () => {
+        render(
+            <NsColumnControl columnClass="ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1">
+                <DivArray elementsCount={4} />
+            </NsColumnControl>
+        );
+        const element = screen.getByTestId('ns-column-control');
+        expect(element).toHaveStyle('grid-template-columns: 1fr 1fr 1fr;}');
+    });
+    it('renders an column with proper grid value', () => {
+        console.warn = jest.fn();
+        render(
+            <NsColumnControl columnClass="">
+                <DivArray elementsCount={4} />
+            </NsColumnControl>
+        );
+        expect(console.warn).toHaveBeenCalledWith(expect.stringContaining('Received invalid className'));
+    });
+});

package/src/common/column-control/NsColumnControl.stories.tsx

@@ -0,0 +1,69 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { NsColumnControl } from '.';
+import { DivArray } from './NDivs.story';
+
+type ComponentType = typeof NsColumnControl;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+/* an array from 1 to n */
+const selectDivOptions = Array(16)
+    .fill(0)
+    .map((e, i) => i + 1);
+const childrenMapping = selectDivOptions.reduce((a, c) => {
+    return {
+        ...a,
+        [c]: <DivArray elementsCount={c} />,
+    };
+}, {});
+
+export default {
+    title: 'Components/NsColumnControl',
+    component: NsColumnControl,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        columnClass: {
+            control: 'text',
+            defaultValue: 'ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1',
+        },
+        children: {
+            control: {
+                type: 'select',
+                options: selectDivOptions,
+            },
+            defaultValue: <DivArray elementsCount={8} />,
+            mapping: childrenMapping,
+        },
+    },
+    args: {
+        columnClass: 'ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1',
+        children: <DivArray elementsCount={12} />,
+    },
+} as MetaStory;
+
+export const SingleColumnControl: Story = {};
+export const TwoColumn11: Story = {
+    args: { columnClass: 'ns-col-lg-1-1' },
+};
+export const TwoColumn21: Story = {
+    args: { columnClass: 'ns-col-lg-2-1' },
+};
+export const ThreeColumn111: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1' },
+};
+export const ThreeColumn211: Story = {
+    args: { columnClass: 'ns-col-lg-2-1-1' },
+};
+export const ThreeColumn121: Story = {
+    args: { columnClass: 'ns-col-lg-1-2-1' },
+};
+export const ThreeColumn11Responsive: Story = {
+    args: { columnClass: 'ns-col-lg-1-1 ns-col-md-1' },
+};
+export const FourColumn1111: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1-1' },
+};
+export const FourColumn1111Responsive: Story = {
+    args: { columnClass: 'ns-col-lg-1-1-1-1 ns-col-md-1-1 ns-col-sm-1' },
+};

package/src/common/column-control/NsColumnControl.tsx

@@ -0,0 +1,59 @@
+import { useMemo } from 'react';
+import { Box } from '@mui/material';
+import { styled } from '@nuskin/foundation-theme';
+import { NsColumnControlProps, sizeObjectType } from './types';
+import { getColumnSizes } from './utils';
+
+const options = {
+    shouldForwardProp: (propKey: string) => propKey !== 'sizes',
+};
+type StyledDivProps = {
+    sizes: sizeObjectType;
+    gap?: number;
+};
+const descMaxWidthBreakpoints = [960, 600];
+
+/* media queries */
+const mediaQuery = descMaxWidthBreakpoints.map((bp) => `@media (max-width: ${bp}px)`);
+
+const StyledDiv = styled(
+    Box as any,
+    options
+)<StyledDivProps>(({ sizes, gap }: StyledDivProps) => {
+    const gridTemplateColumns = sizes['fractions']?.map((e) => `${e}fr`).join(' ');
+    const tabletTemplateColumns = sizes['tabletFractions']?.map((e) => `${e}fr`).join(' ');
+    const mobileTemplateColumns = sizes['mobileFractions']?.map((e) => `${e}fr`).join(' ');
+    return {
+        display: 'grid',
+        maxWidth: Array.isArray(sizes?.fractions) && sizes.fractions?.length <= 2 ? '1200px' : '2400px',
+        margin: '32px auto',
+        gap: gap ?? '2rem',
+        overflow: 'scroll',
+        gridTemplateColumns,
+        [mediaQuery[0]]: {
+            gridTemplateColumns: tabletTemplateColumns,
+        },
+        [mediaQuery[1]]: {
+            gridTemplateColumns: mobileTemplateColumns,
+        },
+    };
+});
+
+const NsColumnControl = ({ columnClass, children, gap, additionalProps }: NsColumnControlProps) => {
+    const sizes = useMemo(() => {
+        return getColumnSizes(columnClass);
+    }, [columnClass]);
+
+    return (
+        <StyledDiv
+            sizes={sizes}
+            gap={gap}
+            data-testid={additionalProps?.testid ?? 'ns-column-control'}
+            className={columnClass}
+        >
+            {children}
+        </StyledDiv>
+    );
+};
+
+export default NsColumnControl;

package/src/common/column-control/index.ts

@@ -0,0 +1,2 @@
+export { default as NsColumnControl } from './NsColumnControl';
+export type { NsColumnControlProps } from './types';

package/src/common/column-control/types.d.ts

@@ -0,0 +1,47 @@
+import { PropsWithChildren } from 'react';
+import { AdditionalProps } from '../common.types';
+
+/*
+    options to be shown on content stack
+		1 Column (100%)
+		2 Columns (50%, 50%)
+		2 Columns (33%, 67%)
+		2 Columns (67%, 33%)
+		3 Columns (33%, 33%, 33%)
+		3 Columns (50%, 25%, 25%)
+		3 Columns (25%, 25%, 50%)
+		4 Columns (25%, 25%, 25%, 25%)
+*/
+export type NsColumnControlProps = PropsWithChildren<{
+    /**
+     * follows the convention of ns-col-lg-(column-ratio) (for large screens >= 960px),
+     *  ns-col-md-(column-ratio) (for tablet screens >= 600px),
+     *  and ns-col-sm-(column-ratio) (for mobile screens i.e < 600px)
+     * sample values
+     * 'ns-col-lg-2-1',
+    'ns-col-lg-1-2',
+    'ns-col-lg-1-1',
+    'ns-col-lg-1-1-1',
+    'ns-col-lg-2-1-1',
+    'ns-col-lg-1-1-1-1',
+    'ns-col-md-1',
+    'ns-col-md-1-1',
+    'ns-col-md-1-2',
+    'ns-col-md-2-1',
+    'ns-col-md-1-1-1',
+    'ns-col-md-2-1-1',
+    'ns-col-sm-1',
+    'ns-col-sm-1-1',
+    'ns-col-sm-1-2',
+    'ns-col-sm-2-1',
+     */
+    columnClass: string;
+    gap?: number;
+}> &
+    AdditionalProps;
+
+export type sizeObjectType = {
+    fractions?: number[];
+    tabletFractions?: number[];
+    mobileFractions?: number[];
+};

package/src/common/column-control/utils.ts

@@ -0,0 +1,66 @@
+import { ValueOf } from 'next/dist/shared/lib/constants';
+import { NsColumnControlProps, sizeObjectType } from './types';
+
+export const columnClasses: NsColumnControlProps['columnClass'][] = [
+    'ns-col-lg-2-1',
+    'ns-col-lg-1-2',
+    'ns-col-lg-1-1',
+    'ns-col-lg-1-1-1',
+    'ns-col-lg-2-1-1',
+    'ns-col-lg-1-1-1-1',
+    'ns-col-md-1',
+    'ns-col-md-1-1',
+    'ns-col-md-1-2',
+    'ns-col-md-2-1',
+    'ns-col-md-1-1-1',
+    'ns-col-md-2-1-1',
+    'ns-col-sm-1',
+    'ns-col-sm-1-1',
+    'ns-col-sm-1-2',
+    'ns-col-sm-2-1',
+];
+const sizeKeyPrefix = {
+    desktop: 'ns-col-lg-',
+    tablet: 'ns-col-md-',
+    mobile: 'ns-col-sm-',
+} as const;
+
+const sizeKeyMap: Record<ValueOf<typeof sizeKeyPrefix>, string> = {
+    [sizeKeyPrefix.desktop]: 'fractions',
+    [sizeKeyPrefix.tablet]: 'tabletFractions',
+    [sizeKeyPrefix.mobile]: 'mobileFractions',
+};
+
+/**
+ * getColumnSizes function, we parse the input class and
+ * return an object containing optionally containing 3 keys namely [fractions, tabletFractions, mobileFractions]
+ * value of each of the key is an array of fractions example ['1','1']
+ * meaning that the column should be divided into two fractions each of 1fr
+ * @param inputColumnClass = a string that is mix of ns-col-lg-1-1-1 ns-col-md-1-1 ns-col-sm-1 etc
+ * @returns {fractions:['1','1','1'], tabletFractions:['1','1'], mobileFractions:['1'] }
+ */
+export const getColumnSizes = (inputColumnClass: string): sizeObjectType => {
+    let columnClass = inputColumnClass.trim() as NsColumnControlProps['columnClass'];
+    const validClasses = columnClass
+        .split(' ')
+        .filter((e) => Object.values(sizeKeyPrefix).some((prefix) => e.startsWith(prefix)));
+    const sizeObject: sizeObjectType = validClasses.reduce((acc: any, current: string) => {
+        for (let key of Object.values(sizeKeyPrefix)) {
+            if (current.startsWith(key)) {
+                let interClass = current.replace(key, '');
+                let sizes = interClass.split('-').filter((e) => /^[1-9]$/.test(e));
+                acc[sizeKeyMap[key]] = sizes;
+                break;
+            }
+        }
+        return acc;
+    }, {});
+    if (Object.keys(sizeObject).length < 1) {
+        /* based on string passed as className, no valid size array could be extracted */
+        console.warn(
+            'Received invalid className, valid column-control className starts with ' +
+                Object.values(sizeKeyPrefix).join(', ')
+        );
+    }
+    return sizeObject;
+};

package/src/common/dropdown/NsDropdown.tsx

@@ -39,7 +39,7 @@ const NsDropdown: React.FC<DropdownProps> = ({
         <DropdownContainer disabled={disabled}>
             <DropdownHead data-testid="dropdown-head" disabled={disabled} type={type} onClick={handleToggle}>
                 <DropdownButton>{selectedLabel || placeholder}</DropdownButton>
-                <NsIcon testId="chevron-icon" name={isOpen ? 'arrowDown' : 'arrowUp'} color="primary" />
+                <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />
             </DropdownHead>
             {isOpen ? (
                 <DropdownList