@nuskin/foundation-ui-components 1.14.0 → 1.15.1

package/README.md

@@ -1,39 +1,122 @@
+<div align="right">
+<a href='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/badges/master/pipeline.svg'><img src='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/badges/master/pipeline.svg' alt='Pipeline Badge' /></a>
+<a href='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/badges/release.svg'><img src='https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/badges/release.svg' alt='Latest Release Badge' /></a>
+<a href='https://img.shields.io/npm/dt/%40nuskin/foundation-ui-components'><img src='https://img.shields.io/npm/dt/%40nuskin/foundation-ui-components' alt='Downloads Badge' /></a>
+</div>
+
 # @nuskin/foundation-ui-components
 
-This is a library that contains react components used in NuSkin Pages
+This comprehensive library houses a collection of reusable React components specifically designed for NuSkin Pages. These components are meticulously crafted to ensure consistent UI/UX across all NuSkin digital properties, fostering a seamless user experience.
+
+## Releases
+
+### [CHANGELOG](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/-/blob/master/CHANGELOG.md)
+
+## Installation Guide
+
+To integrate the NuSkin React Components Library into your NuSkin Pages project, follow these steps:
+
+### Clone the repository to your local machine
+
+```shell
+git clone git@code.tls.nuskin.io:ns-am/content-foundation/foundation-ui-components.git
+```
 
-## Installing
+## Running the project
 
-Usng npm:
+### Run the main application using yarn
 
-```bash
-npm add @nuskin/foundation-ui-components
+```shell
+yarn dev
 ```
 
-Usng yarn:
+### Storybook
+
+See how React components look and behave in isolation using Storybook. To get started, follow these steps:
 
-```bash
-yarn add @nuskin/foundation-ui-components
+#### Run storybook using yarn.
+
+```shell
+yarn storybook
 ```
 
-## Example usage
+#### To view the Storybook, use the following URLs
+
+| Environment | URL                                                     |
+| ----------- | ------------------------------------------------------- |
+| Local       | http://localhost:6007                                   |
+| Test        | https://test.nuskin.com/static/foundation-ui-components |
 
-```ts
-import { Button } from "@nuskin/foundation-ui-components";
+## Usage
 
+The following example illustrates how to use this project
+
+```shell
+import { NsButton } from '@nuskin/foundation-ui-components';
 const Page = () => {
   return (
-    <Button variant="contained" color="primary">
+    <NsButton variant="contained" color="primary">
       Sample
-    </Button>
+    </NsButton>
   );
 };
 ```
 
-## Resources
+## Dependencies
+
+This project relies on the following dependencies:
+
+**Emotion UI Libraries**
+
+-   `@emotion/react@^11.11.1`
+-   `@emotion/styled@^11.11.0`
+
+**Material-UI Libraries**
+
+-   `@mui/material@5.14.16`
+-   `@mui/icons-material@^5.14.16`
+-   `@mui/utils@^5.14.16`
+
+**NuSkin Foundation Theme**
+
+-   `@nuskin/foundation-theme@1.2.0`
+
+**Carousel Libraries**
+
+-   `react-material-ui-carousel@^3.4.2`
+-   `react-slick@^0.29.0`
+-   `slick-carousel@^1.8.1`
+
+**Other Libraries**
+
+-   `cliui@^8.0.1`
+-   `framer-motion@^10.16.4`
+
+## Testing
+
+We use Jest for testing our project. Below are the available test scripts:
+
+-   Run all tests and generate coverage report:\*\*
+    ```bash
+    yarn test
+    ```
+-   Run tests for a specific pattern (e.g., accordion/\*):
+    ```bash
+    yarn run test:pattern
+    ```
+-   Run only failed tests from the last test run:
+    ```bash
+    yarn run test:failed
+    ```
+-   Generate and view code coverage report:
+
+    ```bash
+    yarn run test:coverage
+    ```
 
-- 0.1.0 - Initial commit
+-   The yarn test script builds the project using Next.js before running Jest tests.
+-   Feel free to customize the test patterns or add additional options as needed.
 
-## License
+### Coverage Report:
 
-[MIT](https://opensource.org/licenses/MIT)
+After running tests, open the `index.html` file in the `coverage` directory to view the coverage report.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.14.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/card/CardButton.tsx

@@ -1,7 +1,4 @@
-import {
-    NsButton,
-    NsIcon,
-} from '../';
+import { NsButton, NsIcon } from '../';
 import { NsCardButton } from './types';
 
 const CardButton = ({
@@ -12,6 +9,7 @@ const CardButton = ({
     buttonVariant = 'outlined',
     buttonColor = 'primary',
     fullWidth = false,
+    showArrowWithText = false,
 }: NsCardButton) => {
     if (showButton && url) {
         return (
@@ -22,7 +20,7 @@ const CardButton = ({
                     variant={buttonVariant}
                     fullWidth={fullWidth}
                     endIcon={
-                        buttonVariant === 'text' ? (
+                        showArrowWithText && buttonVariant === 'text' ? (
                             <NsIcon name="arrowRight" size="small" color="primary" />
                         ) : endIcon ? (
                             <NsIcon name={endIcon} color={buttonColor} />

package/src/common/card/NsMediumCard.tsx

@@ -14,6 +14,7 @@ type NsMediumCardProps = {
     button?: NsCardButton;
     className?: string;
     fluid?: boolean;
+    showArrowWithButtonText?: boolean;
 };
 const textVariantButton = {
     padding: '0 0 4px',
@@ -76,6 +77,7 @@ export default function NsMediumCard({
     button,
     className,
     fluid,
+    showArrowWithButtonText = false,
 }: NsMediumCardProps) {
     return (
         <CardContainer
@@ -92,7 +94,7 @@ export default function NsMediumCard({
                     {title}
                 </NsTypography>
                 <article className="subtitle">{subtitle}</article>
-                {button ? <CardButton {...button} /> : null}
+                {button ? <CardButton {...button} showArrowWithText={showArrowWithButtonText} /> : null}
             </div>
         </CardContainer>
     );

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

@@ -21,4 +21,5 @@ export type NsCardButton = {
     buttonText: string;
     buttonVariant?: 'text' | 'outlined' | 'contained';
     buttonColor?: 'secondary' | 'primary';
+    showArrowWithText?: boolean;
 };

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;
 }