@nuskin/foundation-ui-components 1.1.0 → 1.1.1

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

@@ -11,9 +11,7 @@ describe('NsSelectOption', () => {
     test('renders NsSelectOption component without errors', () => {
         const value = 'option1';
         const label = 'Option 1';
-        const { getByTestId, getByText } = render(
-            <NsSelectOption value={value} label={label} />
-        );
+        const { getByTestId, getByText } = render(<NsSelectOption value={value} label={label} />);
 
         // Check if the option container element exists
         const optionContainer = getByTestId(`option-${value}`);
@@ -27,14 +25,11 @@ describe('NsSelectOption', () => {
         const value = 'option1';
         const label = 'Option 1';
         const onSelect = jest.fn();
-        const { getByTestId } = render(
-            <NsSelectOption value={value} label={label} onSelect={onSelect} />
-        );
+        const { getByTestId } = render(<NsSelectOption value={value} label={label} onSelect={onSelect} />);
         const optionElement = getByTestId(`option-${value}`);
         fireEvent.click(optionElement);
         expect(onSelect).toHaveBeenCalledWith(value);
     });
-    
 });
 
 describe('NsSelect', () => {
@@ -69,8 +64,7 @@ describe('NsSelect', () => {
         const onSelect = jest.fn();
         const selectedLabel = 'Option 1';
         const { getByTestId, queryByTestId } = render(
-            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect}>
-            </NsSelect>
+            <NsSelect selectedValue="Option1" selectedLabel={selectedLabel} onSelect={onSelect} />
         );
         const selectButton = getByTestId('select-head');
         fireEvent.mouseDown(selectButton);
@@ -132,12 +126,7 @@ describe('NsSelect', () => {
 
     it('select closes on mouse leave when closeOnMouseLeave is set to true', async () => {
         render(
-            <NsSelect
-                closeOnMouseLeave
-                selectedValue={selectedValue}
-                selectedLabel={selectedLabel}
-                onSelect={onSelect}
-            >
+            <NsSelect closeOnMouseLeave selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
                 {createSelectOptions(options)}
             </NsSelect>
         );
@@ -186,7 +175,12 @@ describe('NsSelect', () => {
     test('renders SelectContainer with error styles when errorMessage is present', () => {
         const errorMessage = 'Invalid value';
         render(
-            <NsSelect selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} errorMessage={errorMessage}>
+            <NsSelect
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+                errorMessage={errorMessage}
+            >
                 {createSelectOptions(options)}
             </NsSelect>
         );
@@ -196,5 +190,4 @@ describe('NsSelect', () => {
         expect(selectContainer).toHaveStyle('borderColor: red');
         expect(selectContainer).toHaveStyle('color: red');
     });
-
 });

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

@@ -1,4 +1,6 @@
 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 }>`
@@ -13,8 +15,7 @@ export const SelectHead = styled.div<{ type: string; disabled: boolean }>`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: ${({ type, theme }) =>
-        type === 'outlined' ? `1px solid ${color('primary', 'black')({ theme })}` : 'none'};
+    border: ${getDropdownHeadBorder}
     color: ${paletteColor('primary')};
     width: 207px;
     position: relative;
@@ -36,47 +37,65 @@ export const SelectList = styled.div<{ borderColor: FoundationTheme.PaletteColor
     background-color: ${paletteColor('primary', 'contrastText')};
 `;
 
-const getDividerColor = (props: { theme: FoundationTheme.Theme}) => {
-    const dividerColor = !isDarkMode(props) ? color('neutral', '30')(props) : color('neutral', '20')(props);
-    return dividerColor;
+const getDividerColor = (props: { theme: FoundationTheme.Theme }) => {
+    return !isDarkMode(props) ? color('neutral', '30')(props) : color('neutral', '20')(props);
 };
 
 const getListBgColor = (props: { theme: FoundationTheme.Theme }) => {
-    const bgColor = !isDarkMode(props) ? color('accentColorB', '10')(props) : color('accentColorB', '50')(props);
-    return bgColor;
+    return !isDarkMode(props) ? color('accentColorB', '10')(props) : color('accentColorB', '50')(props);
 };
+type ContainerParam = { borderBottom: string; bgColor: string; color: string; hoveredBg: string };
+function createListContainerStyle({ borderBottom, bgColor, color, hoveredBg }: ContainerParam) {
+    return `
+    cursor: pointer;
+    padding: 5px 0;
+    border-bottom: 1px solid ${borderBottom};
+    background-color: ${bgColor};
+    color: ${color};
 
-export const ListItemContainer = styled.div<{ showListDivider: boolean; isSelected: boolean }>`
-     ${({ showListDivider, isSelected, theme }) => `
-        cursor: pointer;
-        padding: 5px 0;
-        border-bottom: 1px solid ${showListDivider ? getDividerColor({ theme }) : 'none'};
-        background-color: ${isSelected ? paletteColor('primary')({ theme }) : 'white'};
-        color: ${isSelected ? 'white' : 'black'};
-
-        &:hover {
-            background-color: ${getListBgColor({ theme })};
-        }
+    &:hover {
+        background-color: ${hoveredBg};
+    }
 
-        &:last-child {
-            border-bottom: none;
-        }
-    `}
+    &:last-child {
+        border-bottom: none;
+    }
+`;
+}
+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 });
+    }
+    return getListBgColor({ theme });
+};
 
-export const ListItem = styled.div<{ isSelected: boolean}>`
-    padding: 5px 10px;
-    border-left: ${({ isSelected, theme }) =>
-        isSelected ? `2px solid ${paletteColor('primary')({ theme })}` : 'none'};
-    background-color: ${({ isSelected, theme }) =>
-        isSelected ? paletteColor('primary', 'main')({ theme }) : 'white'};
-    color: ${({ isSelected }) => (isSelected ? 'white' : 'black')};
-    &:hover {
-        background-color: ${({ isSelected, theme }) =>
-        isSelected ? paletteColor('primary')({ theme }) : getListBgColor({ theme })};
-            font-weight: bold; 
+const getListItemBorderLeftColor = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
+    if (isSelected) {
+        const color = paletteColor('primary')({ theme });
+        return `2px solid ${color}`;
     }
-`;
+    return 'none';
+};
+
+export const ListItem = styled.div<{ isSelected: boolean }>(({ isSelected, theme }) => ({
+    padding: '5px 10px',
+    borderLeft: getListItemBorderLeftColor({ isSelected, theme }),
+    backgroundColor: isSelected ? paletteColor('primary', 'main')({ theme }) : 'white',
+    color: isSelected ? 'white' : 'black',
+    '&:hover': {
+        backgroundColor: getListItemBgColor({ isSelected, theme }),
+        fontWeight: 'bold',
+    },
+}));
 
 export const SelectLabel = styled.label`
     display: block;

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

@@ -21,11 +21,11 @@ export default {
         showListDivider: { control: 'boolean' },
         label: { control: 'text' },
         name: { control: 'text' },
-        menuProps:{ control: 'text' },
-        reverseArrowControls:{ control: 'boolean' },
-        validateOnBlur:{ control: 'boolean' },
+        menuProps: { control: 'text' },
+        reverseArrowControls: { control: 'boolean' },
+        validateOnBlur: { control: 'boolean' },
         autoComplete: { control: 'text' },
-        rules: {control: 'array'},
+        rules: { control: 'array' },
     },
     parameters: {
         options: [
@@ -91,15 +91,15 @@ export default {
         selectedValue: '',
         selectedLabel: '',
         label: 'State',
-        placeholder:'',
-        name:'',
-        menuProps:'auto',
+        placeholder: '',
+        name: '',
+        menuProps: 'auto',
         reverseArrowControls: false,
-        itemText:'Text',
-        itemValue:'Value',
+        itemText: 'Text',
+        itemValue: 'Value',
         validateOnBlur: false,
         autoComplete: '',
-        rules:[]
+        rules: [],
     },
 } as ComponentMeta<typeof NsSelect>;
 

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

@@ -5,7 +5,7 @@ export interface SelectProps {
     selectedValue: string;
     selectedLabel: string;
     onSelect: (arg: string) => void; // eslint-disable-line
-    children: ReactNode;
+    children?: ReactNode | null;
     disabled?: boolean;
     type?: 'outlined' | 'unfilled';
     placeholder?: string;
@@ -14,11 +14,11 @@ export interface SelectProps {
     showListDivider?: boolean;
     label?: string;
     readOnly?: boolean;
-    name?: string; 
+    name?: string;
     errorMessage?: string;
     menuProps?: string | object;
     reverseArrowControls?: boolean;
-    itemText?: string; 
+    itemText?: string;
     itemValue?: string;
     validateOnBlur?: boolean;
     autoComplete?: string;

package/src/common/spinner/NsSpinner.spec.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render, screen } from '@/test-utils/index';
+import NsSpinner from './NsSpinner';
+
+describe('NsSpinner', () => {
+    test('1.renders spinner', () => {
+        const { container } = render(<NsSpinner additionalProps={{ 'data-testid': 'spinner' }} />);
+
+        expect(screen.getByTestId('spinner')).toBeInTheDocument();
+        expect(container.getElementsByTagName('svg')).toHaveLength(1);
+        expect(screen.getByTestId('spinner')).toHaveStyle('width:100px');
+    });
+
+    test('2.renders spinner with different size', () => {
+        render(<NsSpinner size={200} additionalProps={{ 'data-testid': 'spinner' }} />);
+
+        expect(screen.getByTestId('spinner')).toBeInTheDocument();
+        expect(screen.getByTestId('spinner')).toHaveStyle('width:200px');
+        expect(screen.getByTestId('spinner')).toHaveStyle('height:200px');
+    });
+});

package/src/common/spinner/NsSpinner.stories.tsx

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NsSpinner from './NsSpinner';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsSpinner;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Feedback/NsSpinner',
+    component: NsSpinner,
+    decorators: [
+        (Story) => (
+            <div className="flex place-content-center">
+                <Story />
+            </div>
+        ),
+        withCenterDecorator,
+    ],
+    argTypes: {},
+    args: {
+        size: 200,
+    },
+} as MetaStory;
+
+export const Spinner: Story = {};

package/src/common/spinner/NsSpinner.styled.tsx

@@ -0,0 +1,344 @@
+import { styled } from '@nuskin/foundation-theme';
+
+export const SpinnerContainer = styled.div<{ size: number }>`
+    width: ${(prop) => prop.size}px;
+    height: ${(prop) => prop.size}px;
+    svg {
+        width: ${(prop) => prop.size}px;
+        height: ${(prop) => prop.size}px;
+    }
+    #ns-spinner-7_tr {
+        animation: ns-spinner-7_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-7_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        80% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.495, 0.49, 0.82, 0.11);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-7 {
+        animation: ns-spinner-7_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-7_c_o {
+        0% {
+            opacity: 0;
+        }
+        77.500000% {
+            opacity: 0;
+        }
+        80% {
+            opacity: 1;
+        }
+        97.500000% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-8_tr {
+        animation: ns-spinner-8_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-8_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        77.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-8 {
+        animation: ns-spinner-8_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-8_c_o {
+        0% {
+            opacity: 0;
+        }
+        75% {
+            opacity: 0;
+        }
+        77.500000% {
+            opacity: 1;
+        }
+        97.500000% {
+            opacity: 1;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-9_tr {
+        animation: ns-spinner-9_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-9_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        30% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.5, 0.495, 0.82, 0.11);
+        }
+        50% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-9 {
+        animation: ns-spinner-9_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-9_c_o {
+        0% {
+            opacity: 0;
+        }
+        25% {
+            opacity: 0;
+        }
+        27.500000% {
+            opacity: 1;
+        }
+        47.500000% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-10_tr {
+        animation: ns-spinner-10_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-10_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        27.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        50% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-10 {
+        animation: ns-spinner-10_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-10_c_o {
+        0% {
+            opacity: 0;
+        }
+        25% {
+            opacity: 0;
+        }
+        27.500000% {
+            opacity: 1;
+        }
+        47.500000% {
+            opacity: 1;
+        }
+        50% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-11_tr {
+        animation: ns-spinner-11_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-11_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        55% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.495, 0.49, 0.82, 0.11);
+        }
+        75% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-11 {
+        animation: ns-spinner-11_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-11_c_o {
+        0% {
+            opacity: 0;
+        }
+        52.500000% {
+            opacity: 0;
+        }
+        55% {
+            opacity: 1;
+        }
+        72.500000% {
+            opacity: 1;
+        }
+        75% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-12_tr {
+        animation: ns-spinner-12_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-12_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        52.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        75% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-12 {
+        animation: ns-spinner-12_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-12_c_o {
+        0% {
+            opacity: 0;
+        }
+        50% {
+            opacity: 0;
+        }
+        52.500000% {
+            opacity: 1;
+        }
+        72.500000% {
+            opacity: 1;
+        }
+        75% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-13_tr {
+        animation: ns-spinner-13_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-13_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        5% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.495, 0.49, 0.82, 0.11);
+        }
+        25% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-13 {
+        animation: ns-spinner-13_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-13_c_o {
+        0% {
+            opacity: 1;
+        }
+        5% {
+            opacity: 1;
+        }
+        25% {
+            opacity: 1;
+        }
+        27.500000% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-14_tr {
+        animation: ns-spinner-14_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-14_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+        }
+        2.500000% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0.1, 0.365, 0.82, 0.11);
+        }
+        25% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+        }
+    }
+    #ns-spinner-14 {
+        animation: ns-spinner-14_c_o 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-14_c_o {
+        0% {
+            opacity: 1;
+        }
+        2.500000% {
+            opacity: 1;
+        }
+        25% {
+            opacity: 1;
+        }
+        27.500000% {
+            opacity: 0;
+        }
+        100% {
+            opacity: 0;
+        }
+    }
+    #ns-spinner-15_tr {
+        animation: ns-spinner-15_tr__tr 4000ms linear infinite normal forwards;
+    }
+    @keyframes ns-spinner-15_tr__tr {
+        0% {
+            transform: translate(232.873721px, 220.430229px) rotate(71.000016deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        25% {
+            transform: translate(232.873721px, 220.430229px) rotate(430deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        50% {
+            transform: translate(232.873721px, 220.430229px) rotate(791deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        75% {
+            transform: translate(232.873721px, 220.430229px) rotate(1151deg);
+            animation-timing-function: cubic-bezier(0, 0.25, 0.795, 0.345);
+        }
+        100% {
+            transform: translate(232.873721px, 220.430229px) rotate(1511deg);
+        }
+    }
+`;

package/src/common/spinner/NsSpinner.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import SpinnerIcon from './icons/Spinner';
+import { SpinnerContainer } from './NsSpinner.styled';
+import { NsSpinnerProps } from './types';
+
+const NsSpinner: React.FC<NsSpinnerProps> = ({ size = 100, additionalProps }) => {
+    return (
+        <SpinnerContainer size={size} className="spinner" {...additionalProps}>
+            <SpinnerIcon />
+        </SpinnerContainer>
+    );
+};
+
+export default NsSpinner;