@nuskin/foundation-ui-components 1.3.0 → 1.4.1

package/src/common/progress/NsProgress.tsx

@@ -1,26 +1,28 @@
 import React from 'react';
 
 import { NsProgressProps } from './types';
-import StyledLinearProgress, { PercentDiv, StyledCheckCircle } from './NsProgress.styled';
+import { StyledLinearProgress, ProgressInfo, StyledCheckCircle, StyledProgress } from './NsProgress.styled';
 
 const NsProgress = (props: NsProgressProps) => {
-    const { color, backgroundColor, height, value, body } = props;
+    const { barColor, backgroundColor, height, value, body } = props;
     return (
-        <>
-            <PercentDiv>
+        <StyledProgress className="ns-progress">
+            <ProgressInfo variant="p-xs" className="progress-info">
                 {value}
-                {body}
-            </PercentDiv>
-            <StyledLinearProgress
-                variant="determinate"
-                role="progressbar"
-                color={color}
-                value={value}
-                height={height}
-                backgroundColor={backgroundColor}
-            />
-            <StyledCheckCircle />
-        </>
+                <span>{body ?? ' % Complete'}</span>
+            </ProgressInfo>
+            <div className="progress-bar">
+                <StyledLinearProgress
+                    variant="determinate"
+                    role="progressbar"
+                    value={value}
+                    height={height}
+                    barColor={barColor}
+                    backgroundColor={backgroundColor}
+                />
+                <StyledCheckCircle />
+            </div>
+        </StyledProgress>
     );
 };
 

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

@@ -13,8 +13,8 @@ declare module '@mui/material/LinearProgress' {
 }
 
 export type NsProgressProps = {
-    color?: FoundationTheme.PaletteColors;
-    backgroundColor?: string;
+    barColor?: FoundationTheme.PaletteColors;
+    backgroundColor?: FoundationTheme.PaletteColors;
     height?: string;
     value: number;
     body?: ReactNode;

package/src/common/radiogroup/NsRadioGroup.spec.tsx

@@ -16,7 +16,7 @@ describe('NsRadioGroup', () => {
         name: 'test',
         label: 'I choose to signup as',
         color: '#272525' as FoundationTheme.PaletteColors,
-        additionalSlot: 'An additional slot allows for more text',
+        helperText: 'help text for more information',
         size: 24,
         labelFontSize: 16,
         additionalProps: {
@@ -35,7 +35,7 @@ describe('NsRadioGroup', () => {
         });
     });
     it('2. renders options correctly without additional slot', () => {
-        render(<NsRadioGroup {...props} onChange={onChange} additionalSlot={''} />);
+        render(<NsRadioGroup {...props} onChange={onChange} helperText={''} />);
 
         options.forEach((option) => {
             const radioOption = screen.getByLabelText(option.label) as HTMLInputElement;

package/src/common/radiogroup/NsRadioGroup.stories.tsx

@@ -33,7 +33,7 @@ export default {
         labelFontSize: {
             description: 'Used to change font-size of the label',
         },
-        additionalSlot: {
+        helperText: {
             description: 'An additional slot allows for more text',
         },
     },
@@ -64,7 +64,7 @@ export const RadioGroup: Story = {
         name: 'test',
         label: 'I choose to signup as',
         color: '#272525' as FoundationTheme.PaletteColors,
-        additionalSlot: 'An additional slot allows for more text',
+        helperText: 'An additional slot allows for more text',
         size: 10,
         labelFontSize: 16,
         additionalProps: {

package/src/common/radiogroup/NsRadioGroup.tsx

@@ -14,7 +14,7 @@ import { NsRadioGroupProps } from './types';
 const NsRadioGroup = (props: NsRadioGroupProps) => {
     const {
         items,
-        additionalSlot,
+        helperText,
         label,
         onChange,
         color,
@@ -23,6 +23,7 @@ const NsRadioGroup = (props: NsRadioGroupProps) => {
         additionalProps,
         labelFontSize,
         darkModeEnabled = true,
+        row,
     } = props;
 
     return (
@@ -30,6 +31,7 @@ const NsRadioGroup = (props: NsRadioGroupProps) => {
             <FormControl data-testid={additionalProps?.testid}>
                 <NsLabel size={labelFontSize}>{label}</NsLabel>
                 <StyledRadioGroup
+                    row={row}
                     aria-labelledby="radio-buttons-group-label"
                     defaultValue={items?.[0]?.value}
                     name="radio-buttons-group"
@@ -50,9 +52,9 @@ const NsRadioGroup = (props: NsRadioGroupProps) => {
                     ))}
                 </StyledRadioGroup>
             </FormControl>
-            {additionalSlot ? (
+            {helperText ? (
                 <StyledHelperText className={`ml-${size}`}>
-                    <StyledSpan className="text-sm">{additionalSlot}</StyledSpan>
+                    <StyledSpan className="text-sm">{helperText}</StyledSpan>
                 </StyledHelperText>
             ) : null}
         </>

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

@@ -1,20 +1,19 @@
 import { FoundationTheme } from '@nuskin/foundation-theme';
+import { RadioGroupProps } from '@mui/material';
 import { AdditionalProps } from '../common.types';
 
-export type NsRadioGroupProps = {
-    disable : boolean ;
-    name : string; 
-    additionalSlot : string;
-    label : string ;
-    items: RadioItems[] ;
+export type NsRadioGroupProps = Pick<RadioGroupProps, 'name' | 'onChange' | 'value' | 'defaultValue' | 'row'> & {
+    disable: boolean;
+    helperText: string;
+    label: string;
+    items: RadioItems[];
     color: FoundationTheme.PaletteColors;
-    size : number;
-    labelFontSize:number,
-    onChange : () => void;
+    size: number;
+    labelFontSize: number;
 } & AdditionalProps;
 
 export type RadioItems = {
-    label : string ; 
-    value :string | number ;
+    label: string;
+    value: string | number;
     id: string | number;
-}
+};

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

@@ -1,8 +1,9 @@
+import { ColorUtils, FoundationTheme, styled } from '@nuskin/foundation-theme';
 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;
+
+const { paletteColor, themeColor } = ColorUtils;
 
 interface SelectLabelProps extends HTMLAttributes<HTMLLabelElement> {
     errorMessage?: string;
@@ -30,7 +31,8 @@ export const SelectHead = styled.div<{ type: string; disabled: boolean }>`
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: ${getDropdownHeadBorder}
+    border: ${getDropdownHeadBorder};
+    background: ${paletteColor('primary', 'contrastText')};
     color: ${paletteColor('primary')};
     width: 207px;
     position: relative;
@@ -41,13 +43,7 @@ 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`
+export const StyledArrowContainer = styled.div`
     display: flex;
     align-items: center;
     padding-top: 30px;
@@ -66,54 +62,6 @@ export const SelectList = styled.div<{ borderColor: FoundationTheme.PaletteColor
     overflow-y: auto;
 `;
 
-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;
-    padding: 5px 0;
-    border-bottom: 1px solid ${borderBottom};
-    background-color: ${bgColor};
-    color: ${color};
-
-    &:hover {
-        background-color: ${hoveredBg};
-    }
-
-    &:last-child {
-        border-bottom: none;
-    }
-`;
-}
-const getListItemBgColor = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
-    if (isSelected) {
-        return paletteColor('primary')({ theme });
-    }
-    return getListBgColor({ theme });
-};
-
-const getListItemBorderLeftColor = ({ isSelected, theme }: { isSelected: boolean } & Themed) => {
-    if (isSelected) {
-        const color = paletteColor('primary')({ theme });
-        return `2px solid ${color}`;
-    }
-    return 'none';
-};
-
 export const SelectLabel = styled.label<SelectLabelProps>`
     display: block;
     margin-bottom: 5px;
@@ -121,14 +69,34 @@ export const SelectLabel = styled.label<SelectLabelProps>`
         errorMessage ? paletteColor('error')({ theme }) : paletteColor('primary')({ theme })};
 }
 `;
+type StyledSelectOptionType = { showListDivider: boolean };
+export const StyledSelectOption = styled('div')<StyledSelectOptionType>(({ showListDivider, theme }) => {
+    const dividerColor = themeColor(
+        { colorType: 'neutral', variant: '30' },
+        { colorType: 'neutral', variant: '20' }
+    )({ theme });
+    const borderBottom = showListDivider ? dividerColor : 'none';
+    const hoveredBg = themeColor(
+        { colorType: 'accentColorB', variant: '20' },
+        { colorType: 'accentColorB', variant: '40' }
+    )({ theme });
 
-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',
-    },
-}));
+    return {
+        cursor: 'pointer',
+        borderBottom: `1px solid ${borderBottom}`,
+        backgroundColor: 'white',
+        color: 'black',
+        padding: '5px 10px',
+        '&.selected-option': {
+            backgroundColor: paletteColor('accentColorA')({ theme }),
+            color: 'white',
+        },
+        '&:hover': {
+            color: 'white',
+            backgroundColor: hoveredBg,
+        },
+        '&:last-child': {
+            borderBottom: 'none',
+        },
+    };
+});

package/src/common/select/NsSelect.tsx

@@ -1,22 +1,53 @@
-import React, { useState, useRef, useEffect, Children } from 'react';
+import React, { MouseEvent, useCallback, useMemo, useRef, useState } from 'react';
+
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
+import { NsIcon } from '../icon';
+import { Show } from '../utility';
 import {
-    SelectContainer,
+    ErrorContainer,
+    StyledArrowContainer,
     SelectButton,
-    SelectList,
+    SelectContainer,
     SelectHead,
     SelectLabel,
+    SelectList,
     SelectMain,
-    LeftArrowContainer,
-    RightArrowContainer,
-    ErrorContainer,
 } from './NsSelect.styled';
-import { NsIcon } from '../icon';
-import { SelectProps } from './types.d';
+import { LabelValueType, SelectProps } from './types.d';
+
+const factorMap: any = {
+    reverse: {
+        right: -1,
+        left: 1,
+    },
+    forward: {
+        right: 1,
+        left: -1,
+    },
+};
+
+const arrowVisibility = (
+    total: number,
+    direction: 'left' | 'right',
+    reverse: boolean = false,
+    currentIndex: number | undefined = -1
+) => {
+    if (direction === 'left') {
+        if (!reverse) {
+            return currentIndex < 1 ? 'hidden' : 'visible';
+        } else {
+            return currentIndex >= total - 1 ? 'hidden' : 'visible';
+        }
+    }
+    if (!reverse) {
+        return currentIndex >= total - 1 ? 'hidden' : 'visible';
+    } else {
+        return currentIndex < 1 ? 'hidden' : 'visible';
+    }
+};
 const NsSelect: React.FC<SelectProps> = ({
-    selectedValue,
-    selectedLabel,
+    selected,
     onSelect,
-    children,
     disabled = false,
     type = 'outlined',
     placeholder = '',
@@ -30,32 +61,33 @@ const NsSelect: React.FC<SelectProps> = ({
     // eslint-disable-next-line no-unused-vars
     rules,
     reverseArrowControls,
+    renderOption,
+    options,
 }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [value, setValue] = useState(selectedValue || '');
-    const [selectedIndex, setSelectedIndex] = useState(-1);
+    const optionIndex = useMemo(() => {
+        if (typeof selected?.index === 'number') return selected.index;
+        return options.findIndex((option) => option.value === selected.value);
+    }, [options, selected]);
+    const [value, setValue] = useState<LabelValueType>({ ...selected, index: optionIndex });
     const selectContainerRef = useRef<HTMLDivElement>(null);
     const selectHeadRef = useRef<HTMLDivElement>(null);
 
-    const closeSelect = () => {
+    const closeMenuOnMouseLeave = useCallback(() => {
         if (closeOnMouseLeave) {
             setIsOpen(false);
         }
-    };
+    }, [closeOnMouseLeave]);
 
-    const handleSelect = (input: string, index: number) => {
-        onSelect(input);
+    const handleSelect = (val: LabelValueType) => {
+        onSelect(val);
         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) {
-            setIsOpen(false);
-        }
+        setValue(val);
     };
+    const closeMenu = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    useOnClickOutside(selectContainerRef.current, closeMenu);
 
     const handleMouseClick = () => {
         if (disabled) return;
@@ -66,61 +98,27 @@ 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);
-            }
+    const handleArrowClick = (event: MouseEvent) => {
+        const direction = event.currentTarget?.className.includes('Right') ? 'right' : 'left';
+        const adder = factorMap[reverseArrowControls ? 'reverse' : 'forward'][direction];
+        const nextIndex = (selected?.index ?? -1) + adder;
+        if (nextIndex > -1 && nextIndex < options.length) {
+            handleSelect({ ...options[nextIndex], index: nextIndex });
         }
     };
 
-    useEffect(() => {
-        document.addEventListener('click', handleClickOutside);
-        return () => {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, [handleClickOutside, isOpen]);
-
     return (
         <SelectMain>
             {hasArrows && (
-                <LeftArrowContainer
-                    onClick={handleArrowLeftClick}
+                <StyledArrowContainer
+                    onClick={handleArrowClick}
                     className="LeftArrow"
                     style={{
-                        visibility:
-                            !reverseArrowControls && (selectedIndex === 0 || selectedIndex < 0) ? 'hidden' : 'visible',
+                        visibility: arrowVisibility(options.length, 'left', reverseArrowControls, value?.index),
                     }}
                 >
                     <NsIcon name="arrowLeft" color="primary" />
-                </LeftArrowContainer>
+                </StyledArrowContainer>
             )}
             <SelectContainer
                 data-testid="select-container"
@@ -137,43 +135,40 @@ const NsSelect: React.FC<SelectProps> = ({
                     tabIndex={0}
                     ref={selectHeadRef}
                 >
-                    <SelectButton>{selectedLabel || placeholder}</SelectButton>
+                    <SelectButton>{value?.label || placeholder}</SelectButton>
                     {!readOnly && <NsIcon name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />}
                 </SelectHead>
-                {isOpen ? (
+                <Show when={isOpen}>
                     <SelectList
-                        data-testid="select-list"
-                        onMouseLeave={closeSelect}
+                        data-testid="select-menu-list"
+                        onMouseLeave={closeMenuOnMouseLeave}
                         borderColor={selectBorderColor}
                         className="selectList"
                     >
-                        {React.Children.map(children, (child, index) => {
-                            if (React.isValidElement(child)) {
-                                return React.cloneElement(child, {
-                                    // @ts-ignore
-                                    onSelect: (input: string) => handleSelect(input, index),
-                                    selectedValue: value,
-                                    showListDivider,
-                                    index,
-                                });
-                            }
-                            return null;
+                        {options.map((opt, optionIndex) => {
+                            return renderOption({
+                                value: opt.value,
+                                label: opt.label,
+                                index: optionIndex,
+                                onClick: () => handleSelect({ label: opt.label, value: opt.value, index: optionIndex }),
+                                selected: value,
+                                showListDivider,
+                            });
                         })}
                     </SelectList>
-                ) : null}
+                </Show>
                 {errorMessage && <ErrorContainer>{errorMessage}</ErrorContainer>}
             </SelectContainer>
             {hasArrows && (
-                <RightArrowContainer
-                    onClick={handleArrowRightClick}
+                <StyledArrowContainer
+                    onClick={handleArrowClick}
                     className="RightArrow"
                     style={{
-                        visibility:
-                            reverseArrowControls && (selectedIndex === 0 || selectedIndex < 0) ? 'hidden' : 'visible',
+                        visibility: arrowVisibility(options.length, 'right', reverseArrowControls, selected?.index),
                     }}
                 >
                     <NsIcon name="arrowRight" color="primary" />
-                </RightArrowContainer>
+                </StyledArrowContainer>
             )}
         </SelectMain>
     );

package/src/common/select/NsSelectOption.tsx

@@ -1,29 +1,25 @@
 import React from 'react';
-import { ListItem, ListItemContainer } from './NsSelect.styled';
+
+import { StyledSelectOption } from './NsSelect.styled';
 import { SelectOptionProps } from './types.d';
 
 export const NsSelectOption: React.FC<SelectOptionProps> = ({
     value,
     label,
-    onSelect,
-    selectedValue,
+    onClick,
+    selected,
     showListDivider = true,
 }) => {
-    const handleClick = () => {
-        if (onSelect && typeof onSelect === 'function') {
-            onSelect(value);
-        }
-    };
-
+    const isSelected = value === selected?.value;
     return (
-        <ListItemContainer
+        <StyledSelectOption
+            className={isSelected ? 'selected-option' : ''}
             data-testid={`option-${value}`}
-            isSelected={value === selectedValue}
             showListDivider={showListDivider}
-            onClick={handleClick}
+            onClick={onClick}
         >
-            <ListItem isSelected={value === selectedValue}>{label}</ListItem>
-        </ListItemContainer>
+            {label}
+        </StyledSelectOption>
     );
 };
 export default NsSelectOption;