@nuskin/foundation-ui-components 1.15.0 → 1.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.15.0",
+    "version": "1.15.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {
@@ -102,6 +102,5 @@
     "files": [
         "src/common"
     ],
-    "readme": "./README.md",
-    "packageManager": "yarn@3.6.3"
+    "readme": "./README.md"
 }

package/src/common/dropdown/NsDropdown.spec.tsx

@@ -4,12 +4,15 @@ import NsDropdown from './NsDropdown';
 import NsDropdownOption from './NsDropdownOption';
 
 function createDropdownOptions(options: { value: string; label: string }[]) {
-    return options.map((option) => <NsDropdownOption key={option.value} value={option.value} label={option.label} />);
+    return options.map((option) => (
+        <NsDropdownOption key={option.value} value={option.value}>
+            {option.label}
+        </NsDropdownOption>
+    ));
 }
 
 describe('NsDropdown', () => {
     const onSelect = jest.fn();
-    const selectedValue = '';
     const selectedLabel = '';
 
     const options = [
@@ -18,14 +21,9 @@ describe('NsDropdown', () => {
         { value: 'Option 3', label: 'Option 3' },
     ];
 
-    it('renders the placeholder text when no value is selected', () => {
+    it('1. Should render the placeholder text when no value is selected', () => {
         render(
-            <NsDropdown
-                placeholder="Select an option"
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-            >
+            <NsDropdown placeholder="Select an option" selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
@@ -33,20 +31,23 @@ describe('NsDropdown', () => {
         expect(screen.getByText('Select an option')).toBeInTheDocument();
     });
 
-    it('renders the selected value label', () => {
-        const selectedLabel = 'Option 1';
+    it('2. Should render the selected value label', () => {
         render(
-            <NsDropdown selectedValue="Option 1" selectedLabel={selectedLabel} onSelect={onSelect}>
+            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
+        const dropdownHead = screen.getByTestId('dropdown-head');
+        fireEvent.click(dropdownHead);
+        const dropdownOptionContainer = screen.getByTestId('dropdown-option-container-0');
 
-        expect(screen.getByText(selectedLabel)).toBeInTheDocument();
+        fireEvent.click(dropdownOptionContainer);
+        expect(onSelect).toHaveBeenCalledWith('Option 1');
     });
 
-    it('dropdown opens and closes on click', () => {
+    it('3. Should open and close Dropdown on click', () => {
         render(
-            <NsDropdown selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
+            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
@@ -64,14 +65,9 @@ describe('NsDropdown', () => {
         expect(screen.queryByTestId('option-Option 3')).not.toBeInTheDocument();
     });
 
-    it('dropdown closes on mouse leave when closeOnMouseLeave is set to true', async () => {
+    it('4. Should close dropdown on mouse leave when closeOnMouseLeave is set to true', async () => {
         render(
-            <NsDropdown
-                closeOnMouseLeave
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-            >
+            <NsDropdown closeOnMouseLeave selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
@@ -88,14 +84,9 @@ describe('NsDropdown', () => {
             expect(screen.queryByTestId('option-Option 3')).not.toBeInTheDocument();
         });
     });
-    it('dropdown does not close on mouse leave when closeOnMouseLeave is set to false', () => {
+    it('5. Should not close dropdown on mouse leave when closeOnMouseLeave is set to false', () => {
         render(
-            <NsDropdown
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-                closeOnMouseLeave={false}
-            >
+            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect} closeOnMouseLeave={false}>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
@@ -110,9 +101,9 @@ describe('NsDropdown', () => {
         expect(screen.getByTestId('option-Option 2')).toBeInTheDocument();
         expect(screen.getByTestId('option-Option 3')).toBeInTheDocument();
     });
-    it('dropdown does not open when disabled', () => {
+    it('6. Should not open dropdown when disabled is set to true', () => {
         render(
-            <NsDropdown selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} disabled>
+            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect} disabled>
                 {createDropdownOptions(options)}
             </NsDropdown>
         );
@@ -122,4 +113,14 @@ describe('NsDropdown', () => {
 
         expect(screen.queryByTestId('dropdown-list')).not.toBeInTheDocument();
     });
+    it('7. Should apply no border style when type is not outlined', () => {
+        render(
+            <NsDropdown selectedLabel={selectedLabel} onSelect={onSelect} type="unfilled">
+                {createDropdownOptions(options)}
+            </NsDropdown>
+        );
+
+        const dropdownHead = screen.getByTestId('dropdown-head');
+        expect(dropdownHead).toHaveStyle('border: none');
+    });
 });

package/src/common/dropdown/NsDropdown.styled.tsx

@@ -6,6 +6,7 @@ export const DropdownContainer = styled.div<{ disabled: boolean }>`
     position: relative;
     display: inline-block;
     opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+    cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 `;
 
 /** this function also used for SelectHead */
@@ -22,7 +23,7 @@ export const DropdownHead = styled.div<{ type: string; disabled: boolean }>`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: ${getDropdownHeadBorder}
+    border: ${getDropdownHeadBorder};
     color: ${paletteColor('primary')};
 `;
 
@@ -37,39 +38,29 @@ export const DropdownList = styled.div<{ borderColor: FoundationTheme.PaletteCol
     position: absolute;
     z-index: 100;
     border: 1px solid ${({ borderColor, theme }) => paletteColor(borderColor)({ theme })};
-    padding: 0;
-    margin: 0;
+    margin-top: 10px;
     width: 100%;
     color: ${paletteColor('primary', 'main')};
     background-color: ${paletteColor('primary', 'contrastText')};
 `;
 
-const getDividerColor = (theme: FoundationTheme.Theme) => {
-    return color('neutral', isDarkMode({ theme }) ? '20' : '30')({ theme });
-};
 const getListBgColor = (theme: FoundationTheme.Theme) => {
     return color('accentColorB', isDarkMode({ theme }) ? '50' : '10')({ theme });
 };
-export const ListItemContainer = styled.div<{ showListDivider: boolean }>`
-    cursor: pointer;
-    padding: 5px 0;
-    border-bottom: 1px solid ${({ showListDivider, theme }) => (showListDivider ? getDividerColor(theme) : 'none')};
-
-    &:hover {
-        background-color: ${({ theme }) => getListBgColor(theme)};
-    }
 
+export const DropdownOptionContainer = styled.div`
+    cursor: pointer;
     &:last-child {
         border-bottom: none;
     }
 `;
 
-const getBorder = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
-    const borderColor = paletteColor('primary')({ theme });
-    return isSelected ? `2px solid ${borderColor}` : 'none';
-};
-
-export const ListItem = styled.span<{ isSelected: boolean }>`
-    padding: 5px 10px;
-    border-left: ${getBorder};
+export const ListItem = styled.div`
+    &:hover {
+        background-color: ${({ theme }) => getListBgColor(theme)};
+    }
+    &:active {
+        background-color: #7de3e8;
+    }
+    padding: 10px;
 `;

package/src/common/dropdown/NsDropdown.tsx

@@ -1,24 +1,28 @@
 import React, { useCallback, useRef, useState } from 'react';
 
-import { DropdownContainer, DropdownButton, DropdownList, DropdownHead } from './NsDropdown.styled';
+import {
+    DropdownContainer,
+    DropdownButton,
+    DropdownList,
+    DropdownHead,
+    DropdownOptionContainer,
+} from './NsDropdown.styled';
 import { NsIcon } from '../icon';
 import { DropdownProps } from './types.d';
 import { useOnClickOutside } from '../hooks/useOnClickOutside';
 
 const NsDropdown: React.FC<DropdownProps> = ({
-    selectedValue,
     selectedLabel,
     onSelect,
     children,
     disabled = false,
     type = 'outlined',
-    placeholder = 'Select',
     dropdownBorderColor = 'accentColorB',
     closeOnMouseLeave = false,
-    showListDivider = true,
+    className,
+    placeholder,
 }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [value, setValue] = useState(selectedValue || '');
     const dropdownRef = useRef<HTMLDivElement | null>(null);
 
     const handleToggle = useCallback(() => {
@@ -41,31 +45,45 @@ const NsDropdown: React.FC<DropdownProps> = ({
     const handleSelect = (input: string) => {
         onSelect(input);
         setIsOpen(false);
-        setValue(input);
     };
 
     return (
-        <DropdownContainer disabled={disabled} ref={dropdownRef}>
-            <DropdownHead data-testid="dropdown-head" disabled={disabled} type={type} onClick={handleToggle}>
+        <DropdownContainer disabled={disabled} ref={dropdownRef} className={className}>
+            <DropdownHead
+                data-testid="dropdown-head"
+                id="dropdown-head"
+                disabled={disabled}
+                type={type}
+                onClick={handleToggle}
+            >
                 <DropdownButton>{selectedLabel || placeholder}</DropdownButton>
-                <NsIcon testId="chevron-icon" name="arrowDown" color="primary" />
+                <NsIcon
+                    testId="chevron-icon"
+                    id="chevron-icon"
+                    name="arrowDown"
+                    color="primary"
+                    cursor={disabled ? 'not-allowed' : 'pointer'}
+                />
             </DropdownHead>
             {isOpen ? (
                 <DropdownList
                     data-testid="dropdown-list"
+                    id="dropdown-list"
                     onMouseLeave={handleOnMouseLeave}
                     borderColor={dropdownBorderColor}
                 >
-                    {React.Children.map(children, (child) => {
-                        if (React.isValidElement(child)) {
-                            return React.cloneElement(child, {
-                                // @ts-ignore
-                                onSelect: handleSelect,
-                                selectedValue: value,
-                                showListDivider,
-                            });
-                        }
-                        return null;
+                    {children.map((child, key) => {
+                        const value = React.isValidElement(child) ? child.props.value : child;
+                        return (
+                            <DropdownOptionContainer
+                                data-testid={`dropdown-option-container-${key}`}
+                                className="dropdown-option-container"
+                                key={key}
+                                onClick={() => handleSelect(value)}
+                            >
+                                {child}
+                            </DropdownOptionContainer>
+                        );
                     })}
                 </DropdownList>
             ) : null}

package/src/common/dropdown/NsDropdownOption.tsx

@@ -1,24 +1,12 @@
 import React from 'react';
-import { ListItem, ListItemContainer } from './NsDropdown.styled';
 import { DropdownOptionProps } from './types.d';
+import { ListItem } from './NsDropdown.styled';
 
-export const NsDropdownOption: React.FC<DropdownOptionProps> = ({
-    value,
-    label,
-    onSelect,
-    selectedValue,
-    showListDivider = true,
-}) => {
-    const handleClick = () => {
-        if (onSelect && typeof onSelect === 'function') {
-            onSelect(value);
-        }
-    };
-
+export const NsDropdownOption: React.FC<DropdownOptionProps> = ({ value, children }) => {
     return (
-        <ListItemContainer data-testid={`option-${value}`} showListDivider={showListDivider} onClick={handleClick}>
-            <ListItem isSelected={value === selectedValue}>{label}</ListItem>
-        </ListItemContainer>
+        <ListItem data-testid={`option-${value}`} id="dropdown-item">
+            {children}
+        </ListItem>
     );
 };
 export default NsDropdownOption;

package/src/common/dropdown/stories/NsDropdown.stories.tsx

@@ -20,7 +20,6 @@ export default {
         },
         placeholder: { control: 'text' },
         closeOnMouseLeave: { control: 'boolean' },
-        showListDivider: { control: 'boolean' },
     },
     parameters: {
         options: [
@@ -34,19 +33,16 @@ export default {
         disabled: false,
         dropdownBorderColor: 'primary',
         closeOnMouseLeave: false,
-        showListDivider: true,
-        selectedValue: '',
         selectedLabel: '',
+        placeholder: 'options',
     },
 } as MetaStory;
 
 const RenderStory = (args: any, context: any) => {
     const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
-    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
 
     const options = context.parameters.options;
     const handleSelect = (value: string) => {
-        setSelectedValue(value);
         options.find((option: any) => {
             if (option.value === value) {
                 setSelectedLabel(option.label);
@@ -55,9 +51,11 @@ const RenderStory = (args: any, context: any) => {
     };
 
     return (
-        <NsDropdown {...args} selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={handleSelect}>
+        <NsDropdown {...args} selectedLabel={selectedLabel} onSelect={handleSelect}>
             {options.map((option: any) => (
-                <NsDropdownOption key={option.value} value={option.value} label={option.label} />
+                <NsDropdownOption key={option.value} value={option.value}>
+                    {option.label}
+                </NsDropdownOption>
             ))}
         </NsDropdown>
     );

package/src/common/dropdown/stories/NsDropdownCountry.stories.tsx

@@ -20,7 +20,6 @@ export default {
         },
         placeholder: { control: 'text' },
         closeOnMouseLeave: { control: 'boolean' },
-        showListDivider: { control: 'boolean' },
     },
     parameters: {
         options: [
@@ -30,23 +29,19 @@ export default {
         ],
     },
     args: {
-        selectedValue: 'english',
         selectedLabel: 'United States (US) | English',
         type: 'unfilled',
         disabled: false,
         dropdownBorderColor: 'accentColorB',
         closeOnMouseLeave: true,
-        showListDivider: true,
     },
 } as MetaStory;
 
 const RenderStory = (args: any, context: any) => {
     const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
-    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
 
     const options = context.parameters.options;
     const handleSelect = (value: string) => {
-        setSelectedValue(value);
         options.find((option: any) => {
             if (option.value === value) {
                 setSelectedLabel(`${option.country} | ${option.label}`);
@@ -55,9 +50,11 @@ const RenderStory = (args: any, context: any) => {
     };
 
     return (
-        <NsDropdown {...args} selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={handleSelect}>
+        <NsDropdown {...args} selectedLabel={selectedLabel} onSelect={handleSelect}>
             {options.map((option: any) => (
-                <NsDropdownOption key={option.value} value={option.value} label={option.label} />
+                <NsDropdownOption key={option.value} value={option.value}>
+                    {option.label}
+                </NsDropdownOption>
             ))}
         </NsDropdown>
     );

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

@@ -4,22 +4,20 @@ import { FoundationTheme } from '@nuskin/foundation-theme';
 import { AdditionalProps } from '../common.types';
 
 export interface DropdownProps extends AdditionalProps {
-    selectedValue: string;
-    selectedLabel: string;
-    onSelect: (arg: string) => void; // eslint-disable-line
-    children: ReactNode;
+    selectedLabel: ReactNode;
+    onSelect: (arg: ReactNode) => void; // eslint-disable-line
+    children: ReactNode[];
     disabled?: boolean;
     type?: 'outlined' | 'unfilled';
     placeholder?: string;
     dropdownBorderColor?: FoundationTheme.PaletteColors;
     closeOnMouseLeave?: boolean;
     showListDivider?: boolean;
+    className?: string;
+    placeholder?: string;
 }
 
 export interface DropdownOptionProps {
     value: string;
-    label: string;
-    selectedValue?: string;
-    onSelect?: (arg: string) => void; // eslint-disable-line
-    showListDivider?: boolean;
+    children: ReactNode;
 }