@nuskin/foundation-ui-components 1.0.0-develop.4 → 1.0.0-develop.5

package/src/common/button/NsButton.tsx

@@ -1,10 +1,17 @@
 import { PropsWithChildren } from 'react';
+import { useTheme } from '@mui/material/styles';
+
 import StyledButton from './NsButton.styled';
+
 import { NsButtonProps } from './types.d';
+import { FoundationTheme } from '@nuskin/foundation-theme';
 
-const NsButton = ({ children, ...props }: PropsWithChildren<NsButtonProps>) => {
+const NsButton = ({ children, darkModeEnabled = true, ...props }: PropsWithChildren<NsButtonProps>) => {
+    const { color } = props;
+    const { palette } = useTheme();
+    const btnColor = (color && palette?.[color] ? color : 'primary') as FoundationTheme.PaletteColors;
     return (
-        <StyledButton {...props} disableRipple>
+        <StyledButton {...props} color={btnColor} disableRipple darkModeEnabled={darkModeEnabled}>
             {children}
         </StyledButton>
     );

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

@@ -16,4 +16,5 @@ export type NsButtonProps = Pick<
   | 'className'
 > & {
   iconOnly?: boolean;
+  darkModeEnabled?: boolean;
 };

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

@@ -3,6 +3,7 @@ export type ContentStackLiveTags = {
 };
 
 export type AdditionalProps = {
+    darkModeEnabled?: boolean;
     additionalProps?: {
         ariaLabel?: string;
         testid?: string;

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

@@ -1,7 +1,9 @@
 import { ReactNode } from 'react';
 import { FoundationTheme } from '@nuskin/foundation-theme';
 
-export interface DropdownProps {
+import { AdditionalProps } from '../common.types';
+
+export interface DropdownProps extends AdditionalProps {
     selectedValue: string;
     selectedLabel: string;
     onSelect: (arg: string) => void; // eslint-disable-line

package/src/common/flag/NsFlag.spec.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { render } from '@/test-utils/index';
 import { NsFlag } from '../';
 

package/src/common/flag/NsFlag.styled.tsx

@@ -9,6 +9,8 @@ import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 
 import { NsFlagSize } from './types.d';
 
+const { paletteColor } = ColorUtils;
+
 type NsFlagThemeParams = {
     $size: NsFlagSize;
     $bgColor?: FoundationTheme.PaletteColors;
@@ -33,11 +35,9 @@ const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
     return sizeValue / FLAG_SCALE_VALUE;
 };
 
-const { getPaletteColor } = ColorUtils;
-
 const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme }: NsFlagThemeParams) => {
     if (theme) {
-        return `${makeFlagSize({ $size })}px solid ${getPaletteColor(theme, $bgColor)}`;
+        return `${makeFlagSize({ $size })}px solid ${paletteColor($bgColor)({ theme })}`;
     }
     return '';
 };
@@ -45,8 +45,8 @@ const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme }: NsFlagTheme
 export const StyledFlag = styled('span')<NsFlagThemeParams>`
     min-width: 29px;
     height: ${getFlagHeight}px;
-    color: ${({ $bgColor = 'accentColorA', theme }) => getPaletteColor(theme, $bgColor, 'contrastText')};
-    background: ${({ $bgColor = 'accentColorA', theme }) => getPaletteColor(theme, $bgColor)};
+    color: ${({ $bgColor = 'accentColorA', theme }) => paletteColor($bgColor, 'contrastText')({ theme })};
+    background: ${({ $bgColor = 'accentColorA', theme }) => paletteColor($bgColor)({ theme })};
     position: relative;
     padding: 0 15px;
     display: inline-grid;

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

@@ -4,6 +4,7 @@ import { NsIconVariants } from '.';
 export type NsIconSizeType = 'small' | 'medium' | 'large' | 'xLarge';
 
 export type NsIconNameType = keyof typeof NsIconVariants;
+
 export type NsIconProps = {
     name: NsIconNameType;
     size?: NsIconSizeType;

package/src/common/input/InputFieldWrapper.tsx

@@ -1,6 +1,6 @@
 import { Stack } from '@mui/material';
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-const { getPaletteColor, getAppColor } = ColorUtils;
+const { color, paletteColor } = ColorUtils;
 
 const InputFieldWrapper = styled(Stack)(({ theme }: any) => {
     return {
@@ -10,12 +10,12 @@ const InputFieldWrapper = styled(Stack)(({ theme }: any) => {
         '.MuiFormHelperText-root': {
             fontSize: '11px',
             marginTop: 0,
-            color: getPaletteColor(theme, 'primary', 'main'),
+            color: paletteColor('primary', 'main')({ theme }),
             '&.success': {
-                color: getAppColor(theme, 'success', '40') as string,
+                color: color('success', '40')({ theme }),
             },
             '&.error': {
-                color: getPaletteColor(theme, 'error', 'main'),
+                color: paletteColor('error', 'main')({ theme }),
             },
         },
     };

package/src/common/label/NsLabel.tsx

@@ -1,20 +1,24 @@
+import { CSSProperties } from 'react';
+
 import { FormLabel } from '@mui/material';
-import { NsLabelProps } from './types.d';
+
 import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { CSSProperties } from 'react';
-const { getAppColor, getPaletteColor } = ColorUtils;
+
+import { NsLabelProps } from './types.d';
+
+const { paletteColor, isDarkMode, color } = ColorUtils;
 
 const StyledLabel = styled(FormLabel)<{ fontSize?: number; style?: CSSProperties }>(({ theme, fontSize, style }) => {
-    const isLight = theme.palette?.primary?.main === '#252525';
+    const isLight = !isDarkMode({ theme });
     return {
         fontSize: fontSize ? `${fontSize}px` : '14px',
         textAlign: style?.textAlign ?? 'left',
-        color: getPaletteColor(theme, 'primary', 'main'),
+        color: paletteColor('primary', 'main')({ theme }),
         '.optional-label': {
-            color: isLight ? getAppColor(theme, 'neutral', '60') : getAppColor(theme, 'neutral', '50'),
+            color: isLight ? color('neutral', '60')({ theme }) : color('neutral', '50')({ theme }),
         },
         '.MuiInputLabel-asterisk': {
-            color: isLight ? getAppColor(theme, 'error', '40') : getAppColor(theme, 'error', '20'),
+            color: isLight ? color('error', '40')({ theme }) : color('error', '20')({ theme }),
         },
         ...(style || {}),
     } as any; // TODO: may be this "any" has to be fixed from foundation-theme

package/src/common/nav-tab/NsNavTab.styled.tsx

@@ -1,6 +1,9 @@
-import { FoundationTheme, styled } from '@nuskin/foundation-theme';
+import { FoundationTheme, styled, ColorUtils } from '@nuskin/foundation-theme';
 import { motion } from 'framer-motion';
 
+const { paletteColor } = ColorUtils;
+
+
 export const NavTabContainer = styled.div`
     .shadow {
         box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
@@ -23,7 +26,7 @@ export const NavTabUnderLine = styled(motion.div)<{ color?: FoundationTheme.Pale
     position: absolute;
     bottom: -2px;
     height: 2px;
-    background-color: ${({ theme: { palette }, color = 'primary' }) => palette?.[color]?.main};
+    background-color: ${({ theme, color = 'primary' }) => paletteColor(color)({ theme })};
 `;
 
 export const NavDrawer = styled.div`
@@ -37,7 +40,7 @@ export const NavDrawer = styled.div`
     width: 100%;
     max-height: 590px;
 
-    background-color: ${({ theme }) => theme?.palette?.primary.contrastText};
+    background-color: ${paletteColor('primary', 'contrastText')};
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
     transition: all 0.15s ease-in-out;
     overflow: hidden;
@@ -54,7 +57,7 @@ export const NavDrawerContainer = styled(motion.div)`
         z-index: 1;
     }
     box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-    background-color: ${({ theme }) => theme?.palette?.primary.contrastText};
+    background-color: ${paletteColor('primary', 'contrastText')};
     width: 100%;
     text-align: left;
     max-height: 590px;

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import { NsRadioGroup } from './';
+import { FoundationTheme } from '@nuskin/foundation-theme';
 
 
 describe('NsRadioGroup', () => {
@@ -16,7 +17,7 @@ describe('NsRadioGroup', () => {
         items: options,
         name: 'test',
         label: 'I choose to signup as',
-        color: '#272525',
+        color: '#272525' as FoundationTheme.PaletteColors,
         additionalSlot: 'An additional slot allows for more text',
         size: 24,
         labelFontSize: 16,

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

@@ -3,6 +3,7 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
 import { expect } from '@storybook/jest';
 import { NsRadioGroup } from './'
+import { FoundationTheme } from '@nuskin/foundation-theme';
 
 type ComponentType = typeof NsRadioGroup;
 type Story = StoryObj<ComponentType>;
@@ -77,7 +78,7 @@ export const RadioGroup: Story = {
         ],
         name: 'test',
         label: 'I choose to signup as',
-        color: '#272525',
+        color: '#272525' as FoundationTheme.PaletteColors,
         additionalSlot: 'An additional slot allows for more text',
         size: 10,
         labelFontSize: 16,

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

@@ -1,9 +1,7 @@
 import { Radio, FormControlLabel, FormLabel, RadioGroup } from '@mui/material';
-import { ColorUtils } from '@nuskin/foundation-theme';
-import { styled, nuskinTheme } from '@nuskin/foundation-theme';
+import { ColorUtils, FoundationTheme, styled } from '@nuskin/foundation-theme';
 
-const { getPaletteColor } = ColorUtils;
-const { colors } = nuskinTheme;
+const { paletteColor, isDarkMode, color } = ColorUtils;
 
 export const StyledHelperText = styled('div')`
     margin-top :10px;
@@ -15,42 +13,38 @@ export const StyledHelperText = styled('div')`
 export const StyledSpan = styled('span')`
     font-size: '16px';
     font-weight: 300;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    color: ${paletteColor('primary')};
 `;
 
-export const StyledLabel = styled(FormLabel)(({ theme }) => {
-    return {
-        color: getPaletteColor(theme, 'primary'),
-        marginBottom: '15px',
-        backgroundColor: 'transparent',
-    };
-});
-
-export const StyledRadio = styled(Radio)(({ theme }) => {
-    const isLight = theme.palette?.primary?.main === '#252525';
-
-    return {
-        color: isLight ? colors.primary.black : colors.primary.white,
-    };
-});
+export const StyledLabel = styled(FormLabel)`
+    color: ${paletteColor('primary')},
+    marginBottom: '15px',
+    backgroundColor: 'transparent',
+`;
 
-export const StyledFormControlLabel = styled(FormControlLabel)(({ theme }) => {
-    const isLight = theme.palette?.primary?.main === '#252525';
+export const StyledRadio = styled(Radio)`
+    color: ${(props) => !isDarkMode(props) ? color('primary', 'black')(props) : color('primary', 'white')(props)}
+`;
 
+export const StyledFormControlLabel = styled(FormControlLabel)<{ darkModeEnabled?: boolean }>((props) => {
     return {
-        color: getPaletteColor(theme, 'primary'),
+        color: paletteColor('primary')(props),
         marginBottom: '10px',
         '.MuiFormControlLabel-label.Mui-disabled': {
-            color: isLight ? colors?.neutral?.[60] : colors?.neutral?.[20],
+            color: `${!isDarkMode(props) ? color('neutral', 60)(props) : color('neutral', 20)(props)}`
         },
     };
 });
 
-export const StyledRadioGroup = styled(RadioGroup)(({ color }) => {
-    return {
-        marginTop: '10px',
-        '.MuiRadio-root.custom-radio.Mui-checked': {
-            color: color,
-        },
-    };
-});
+export const StyledRadioGroup = styled(RadioGroup)<
+    { color: FoundationTheme.PaletteColors; darkModeEnabled?: boolean }
+>(
+    ({ theme, color, darkModeEnabled }) => {
+        return {
+            marginTop: '10px',
+            '.MuiRadio-root.custom-radio.Mui-checked': {
+                color: paletteColor(color)({ theme, darkModeEnabled })
+            },
+        };
+    }
+);

package/src/common/radiogroup/NsRadioGroup.tsx

@@ -1,5 +1,5 @@
 import { FormControl } from '@mui/material';
-import { NsRadioGroupProps } from './types';
+
 import {
     StyledHelperText,
     StyledFormControlLabel,
@@ -9,19 +9,33 @@ import {
 } from './NsRadioGroup.styled';
 import { NsLabel } from '../label';
 
+import { NsRadioGroupProps } from './types';
+
 const NsRadioGroup = (props: NsRadioGroupProps) => {
-    const { items, additionalSlot, label, onChange, color, disable, size, additionalProps, labelFontSize } = props;
+    const {
+        items,
+        additionalSlot,
+        label,
+        onChange,
+        color,
+        disable,
+        size,
+        additionalProps,
+        labelFontSize,
+        darkModeEnabled = true
+    } = props;
 
     return (
         <>
             <FormControl data-testid={additionalProps?.testid}>
                 <NsLabel size={labelFontSize}>{label}</NsLabel>
                 <StyledRadioGroup
-                    aria-labelledby="demo-radio-buttons-group-label"
+                    aria-labelledby="radio-buttons-group-label"
                     defaultValue={items?.[0]?.value}
                     name="radio-buttons-group"
                     onChange={onChange}
                     color={color}
+                    darkModeEnabled={darkModeEnabled}
                 >
                     {items?.map((item, index) => (
                         <StyledFormControlLabel
@@ -31,13 +45,14 @@ const NsRadioGroup = (props: NsRadioGroupProps) => {
                             control={<StyledRadio className="custom-radio" />}
                             label={item?.label}
                             disabled={disable}
+                            darkModeEnabled={darkModeEnabled}
                         />
                     ))}
                 </StyledRadioGroup>
             </FormControl>
-            {additionalSlot && <StyledHelperText className={`ml-${size}`}>
+            {additionalSlot ? <StyledHelperText className={`ml-${size}`}>
                 <StyledSpan className="text-sm">{additionalSlot}</StyledSpan>
-            </StyledHelperText>}
+            </StyledHelperText> : null}
 
         </>
     );

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

@@ -1,16 +1,17 @@
+import { FoundationTheme } from '@nuskin/foundation-theme';
 import { AdditionalProps } from '../common.types';
 
-export type NsRadioGroupProps = AdditionalProps & {
+export type NsRadioGroupProps = {
     disable : boolean ;
     name : string; 
     additionalSlot : string;
     label : string ;
     items: RadioItems[] ;
-    color : string;
+    color: FoundationTheme.PaletteColors;
     size : number;
     labelFontSize:number,
     onChange : () => void;
-}
+} & AdditionalProps;
 
 export type RadioItems = {
     label : string ; 

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

@@ -1,5 +1,5 @@
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-const { getPaletteColor, getAppColor } = ColorUtils;
+const { color, paletteColor, isDarkMode } = ColorUtils;
 
 export const SelectContainer = styled.div<{ disabled: boolean }>`
     position: relative;
@@ -14,8 +14,8 @@ export const SelectHead = styled.div<{ type: string; disabled: boolean }>`
     justify-content: space-between;
     align-items: center;
     border: ${({ type, theme }) =>
-        type === 'outlined' ? `1px solid ${getAppColor(theme, 'primary', 'black')}` : 'none'};
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+        type === 'outlined' ? `1px solid ${color('primary', 'black')({ theme })}` : 'none'};
+    color: ${paletteColor('primary')};
     width: 207px;
     position: relative;
     z-index: 2;
@@ -28,38 +28,34 @@ export const SelectButton = styled.div`
 export const SelectList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
     position: absolute;
     z-index: 100;
-    border: 1px solid ${({ borderColor, theme }) => getPaletteColor(theme, borderColor)};
+    border: 1px solid ${({ borderColor, theme }) => paletteColor(borderColor)({ theme })};
     padding: 0;
     margin: 0;
     width: -webkit-fill-available;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary', 'main')};
-    background-color: ${({ theme }) => getPaletteColor(theme, 'primary', 'contrastText')};
+    color: ${paletteColor('primary')};
+    background-color: ${paletteColor('primary', 'contrastText')};
 `;
-const getIsLight = (theme: FoundationTheme.Theme) => {
-    const { palette = { primary: { main: '', contrastText: '' } } } = theme;
-    return palette.primary.main === getAppColor(theme, 'primary', 'black');
-};
 
-const getDividerColor = (theme: FoundationTheme.Theme) => {
-    const isLight = getIsLight(theme);
-    const dividerColor = isLight ? getAppColor(theme, 'neutral', '30') : getAppColor(theme, 'neutral', '20');
+const getDividerColor = (props: { theme: FoundationTheme.Theme}) => {
+    const dividerColor = !isDarkMode(props) ? color('neutral', '30')(props) : color('neutral', '20')(props);
     return dividerColor;
 };
-const getListBgColor = (theme: FoundationTheme.Theme) => {
-    const isLight = getIsLight(theme);
-    const bgColor = isLight ? getAppColor(theme, 'accentColorB', '10') : getAppColor(theme, 'accentColorB', '50');
+
+const getListBgColor = (props: { theme: FoundationTheme.Theme }) => {
+    const bgColor = !isDarkMode(props) ? color('accentColorB', '10')(props) : color('accentColorB', '50')(props);
     return bgColor;
 };
+
 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 ? getPaletteColor(theme, 'primary') : 'white'};
+        border-bottom: 1px solid ${showListDivider ? getDividerColor({ theme }) : 'none'};
+        background-color: ${isSelected ? paletteColor('primary')({ theme }) : 'white'};
         color: ${isSelected ? 'white' : 'black'};
 
         &:hover {
-            background-color: ${getListBgColor(theme)};
+            background-color: ${getListBgColor({ theme })};
         }
 
         &:last-child {
@@ -71,13 +67,13 @@ export const ListItemContainer = styled.div<{ showListDivider: boolean; isSelect
 export const ListItem = styled.div<{ isSelected: boolean}>`
     padding: 5px 10px;
     border-left: ${({ isSelected, theme }) =>
-        isSelected ? `2px solid ${getPaletteColor(theme, 'primary')}` : 'none'};
+        isSelected ? `2px solid ${paletteColor('primary')({ theme })}` : 'none'};
     background-color: ${({ isSelected, theme }) =>
-        isSelected ? getPaletteColor(theme, 'primary', 'main') : 'white'};
+        isSelected ? paletteColor('primary', 'main')({ theme }) : 'white'};
     color: ${({ isSelected }) => (isSelected ? 'white' : 'black')};
     &:hover {
         background-color: ${({ isSelected, theme }) =>
-        isSelected ? getPaletteColor(theme, 'primary', 'main') : getListBgColor(theme)};
+        isSelected ? paletteColor('primary')({ theme }) : getListBgColor({ theme })};
             font-weight: bold; 
     }
 `;
@@ -85,5 +81,5 @@ export const ListItem = styled.div<{ isSelected: boolean}>`
 export const SelectLabel = styled.label`
     display: block;
     margin-bottom: 5px;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    color: ${paletteColor('primary')} !important;
 `;