@nuskin/foundation-ui-components 1.0.0-develop.6 → 1.0.0-develop.8

package/src/common/checkbox/NsCheckbox.tsx

@@ -54,7 +54,7 @@ const NsCheckbox = (props: PropsWithChildren<NsCheckboxProps>) => {
         () => (
             <NsTypography variant="p-l">
                 <StyledFlagLabel {...flag} size={size} testId={`${name}-flag-label`} />
-                <StyledLabel className="checkbox-label-text" $hasDisabled={disabled}>
+                <StyledLabel className="checkbox-label-text" isDisabled={disabled}>
                     {label}
                 </StyledLabel>
             </NsTypography>

package/src/common/column-control/stories/DivArray.stories.tsx

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Column/NDivs',
+    title: 'Components/Data Display/Column/NDivs',
     component: DivArray,
     decorators: [withCenterDecorator],
     args: {

package/src/common/column-control/stories/NsColumnControl.stories.tsx

@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Column/NsColumnControl',
+    title: 'Components/Data Display/Column/NsColumnControl',
     component: NsColumnControl,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/column-control/stories/NsFlexColumns.stories.tsx

@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Column/NsFlexColumns',
+    title: 'Components/Data Display/Column/NsFlexColumns',
     component: NsFlexColumns,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/column-control/stories/NsGridColumns.stories.tsx

@@ -9,7 +9,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Column/NsGridColumns',
+    title: 'Components/Data Display/Column/NsGridColumns',
     component: NsGridColumns,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/column-control/styled/common.ts

@@ -21,7 +21,7 @@ export const commonStyles = {
    ['1','2'] => ['27%','53%']
  */
 export function getPercentArray(fractionArray?: string[] | number[]) {
-    let numbers = fractionArray?.map((numberString) => +numberString)?.filter((num) => 0 < num && num < 10) ?? [];
+    const numbers = fractionArray?.map((numberString) => +numberString)?.filter((num) => 0 < num && num < 10) ?? [];
     const sum = numbers.reduce((currentSum, currentNumber) => currentSum + currentNumber, 0);
     return numbers.map((currentNumber) => ((currentNumber / sum) * 80).toFixed(2) + '%');
 }

package/src/common/column-control/utils.ts

@@ -40,15 +40,15 @@ const sizeKeyMap: Record<ValueOf<typeof sizeKeyPrefix>, string> = {
  * @returns {fractions:['1','1','1'], tabletFractions:['1','1'], mobileFractions:['1'] }
  */
 export const getColumnSizes = (inputColumnClass: string): sizeObjectType => {
-    let columnClass = inputColumnClass.trim() as NsColumnControlProps['columnClass'];
+    const columnClass = inputColumnClass.trim();
     const validClasses = columnClass
         .split(' ')
         .filter((e) => Object.values(sizeKeyPrefix).some((prefix) => e.startsWith(prefix)));
     const sizeObject: sizeObjectType = validClasses.reduce((acc: any, current: string) => {
-        for (let key of Object.values(sizeKeyPrefix)) {
+        for (const key of Object.values(sizeKeyPrefix)) {
             if (current.startsWith(key)) {
-                let interClass = current.replace(key, '');
-                let sizes = interClass.split('-').filter((e) => /^[1-9]$/.test(e));
+                const interClass = current.replace(key, '');
+                const sizes = interClass.split('-').filter((e) => /^[1-9]$/.test(e));
                 acc[sizeKeyMap[key]] = sizes;
                 break;
             }

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

@@ -1,12 +1,22 @@
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
 export type ContentStackLiveTags = {
     'data-cslp'?: string;
 };
 
 export type AdditionalProps = {
-    darkModeEnabled?: boolean;
     additionalProps?: {
         ariaLabel?: string;
         testid?: string;
         className?: string;
+        'data-testid'?: string;
     } & ContentStackLiveTags;
+} & DarkModeEnabledOption;
+
+export type Themed = {
+    theme: FoundationTheme.Theme;
+};
+
+export type DarkModeEnabledOption = {
+    darkModeEnabled?: boolean;
 };

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

@@ -1,5 +1,6 @@
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
-const { getPaletteColor, getAppColor } = ColorUtils;
+import { Themed } from '../common.types';
+const { color, paletteColor, isDarkMode } = ColorUtils;
 
 export const DropdownContainer = styled.div<{ disabled: boolean }>`
     position: relative;
@@ -7,15 +8,22 @@ export const DropdownContainer = styled.div<{ disabled: boolean }>`
     opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
 `;
 
+/** this function also used for SelectHead */
+export const getDropdownHeadBorder = ({ type, theme }: { type: string } & Themed) => {
+    if (type === 'outlined') {
+        const borderColor = color('primary', 'black')({ theme });
+        return `1px solid ${borderColor}`;
+    }
+    return 'none';
+};
 export const DropdownHead = styled.div<{ type: string; disabled: boolean }>`
     cursor: ${({ disabled }) => (disabled ? 'inherit' : 'pointer')};
     padding: 5px 10px;
     display: flex;
     justify-content: space-between;
     align-items: center;
-    border: ${({ type, theme }) =>
-        type === 'outlined' ? `1px solid ${getAppColor(theme, 'primary', 'black')}` : 'none'};
-    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+    border: ${getDropdownHeadBorder}
+    color: ${paletteColor('primary')};
 `;
 
 export const DropdownButton = styled.div`
@@ -25,27 +33,19 @@ export const DropdownButton = styled.div`
 export const DropdownList = 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: 100%;
-    color: ${({ theme }) => getPaletteColor(theme, 'primary', 'main')};
-    background-color: ${({ theme }) => getPaletteColor(theme, 'primary', 'contrastText')};
+    color: ${paletteColor('primary', 'main')};
+    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');
-    return dividerColor;
+    return color('neutral', isDarkMode({ theme }) ? '20' : '30')({ theme });
 };
 const getListBgColor = (theme: FoundationTheme.Theme) => {
-    const isLight = getIsLight(theme);
-    const bgColor = isLight ? getAppColor(theme, 'accentColorB', '10') : getAppColor(theme, 'accentColorB', '50');
-    return bgColor;
+    return color('accentColorB', isDarkMode({ theme }) ? '50' : '10')({ theme });
 };
 export const ListItemContainer = styled.div<{ showListDivider: boolean }>`
     cursor: pointer;
@@ -61,7 +61,12 @@ export const ListItemContainer = styled.div<{ showListDivider: boolean }>`
     }
 `;
 
+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: ${({ isSelected, theme }) => (isSelected ? `2px solid ${getPaletteColor(theme, 'primary')}` : 'none')};
+    border-left: ${getBorder};
 `;

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

@@ -8,7 +8,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsDropdown',
+    title: 'Components/Inputs/NsDropdown',
     decorators: [withCenterDecorator],
     component: NsDropdown,
     argTypes: {

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

@@ -8,7 +8,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsDropdown',
+    title: 'Components/Inputs/NsDropdown',
     decorators: [withCenterDecorator],
     component: NsDropdown,
     argTypes: {

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

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsFlag',
+    title: 'Components/Data Display/NsFlag',
     component: NsFlag,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/hooks/index.ts

@@ -0,0 +1,2 @@
+export {default as useWindowSize} from './useWindowSize';
+export {default as useAccordionMap} from './useAccordionMap';

package/src/common/hooks/specs/useWindowSize.spec.tsx

@@ -0,0 +1,19 @@
+import { renderHook, act } from '@testing-library/react-hooks';
+import useWindowSize from '../useWindowSize';
+
+describe('useWindowSize', () => {
+    it('should return the window size', () => {
+        const { result } = renderHook(useWindowSize);
+        expect(result.current).toEqual({ width: window.innerWidth, height: window.innerHeight });
+    });
+
+    it('should update the window size when the window is resized', () => {
+        const { result } = renderHook(() => useWindowSize());
+        act(() => {
+            window.innerWidth = 500;
+            window.innerHeight = 500;
+            window.dispatchEvent(new Event('resize'));
+        });
+        expect(result.current).toEqual({ width: 500, height: 500 });
+    });
+});

package/src/common/hooks/useAccordionMap.tsx

@@ -0,0 +1,39 @@
+import { useState, useEffect, useCallback } from 'react';
+
+type ItemMap = Record<string, boolean>;
+type UseAccordionProp = {
+    allowMultipleExpanded?: boolean;
+    defaultOpenIds?: string[];
+};
+const reducer = (map: ItemMap, id: string) => {
+    map[id] = true;
+    return map;
+};
+
+const useAccordionMap = ({ allowMultipleExpanded, defaultOpenIds }: UseAccordionProp) => {
+    const mapSetter = useCallback(() => {
+        let ids = defaultOpenIds;
+        if (!allowMultipleExpanded) {
+            ids = ids?.slice(0, 1) ?? [];
+        }
+        return ids?.reduce(reducer, {}) ?? {};
+    }, [defaultOpenIds, allowMultipleExpanded]);
+
+    const [itemStateMap, setItemMap] = useState<ItemMap>(mapSetter);
+
+    const toggleOpen = (index: string | number) => {
+        const key = index + '';
+        if (allowMultipleExpanded) {
+            setItemMap((prevState) => ({ ...prevState, [key]: !prevState[key] }));
+        } else {
+            setItemMap({ [key]: !itemStateMap[index] });
+        }
+    };
+
+    useEffect(() => {
+        setItemMap(mapSetter);
+    }, [mapSetter]);
+    return { itemStateMap, toggleOpen };
+};
+
+export default useAccordionMap;

package/src/common/hooks/useWindowSize.tsx

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+
+const useWindowSize = () => {
+    const [windowSize, setWindowSize] = useState({
+        width: window.innerWidth,
+        height: window.innerHeight,
+    });
+
+    useEffect(() => {
+        function handleResize() {
+            setWindowSize({
+                width: window?.innerWidth || 300,
+                height: window?.innerHeight || 300,
+            });
+        }
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', handleResize);
+        }
+
+        return () => {
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('resize', handleResize);
+            }
+        };
+    }, []);
+
+    return windowSize;
+};
+
+export default useWindowSize;

package/src/common/icon/NsIcon.stories.tsx

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsIcon',
+    title: 'Icons/NsIcon',
     component: NsIcon,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/icon/NsIconVariants.ts

@@ -45,3 +45,4 @@ const IconVariants = {
 };
 
 export default IconVariants;
+export const isValidIconName = (name: string) => Object.keys(IconVariants).includes(name);

package/src/common/image/NsImage.spec.tsx

@@ -1,10 +1,60 @@
 import { render, screen } from '@/test-utils/index';
-import NsImage from './NsImage';
-describe('NsImage', () => {
-    it('NsImage element renders', () => {
-        const altText = 'dummy image';
-        render(<NsImage src="https://www.google.com" width={300} height={300} alt={altText} />);
-        const imgElement = screen.getByAltText(altText);
+import { NsImage } from '../';
+
+describe('NsImage component', () => {
+    it('1. renders', () => {
+        const alt = 'test image';
+        render(<NsImage src="image.jpg" width={300} height={300} alt={alt} />);
+        const imgElement = screen.getByAltText(alt);
         expect(imgElement).toBeInTheDocument();
     });
+
+    it('2. renders with correct src and alt attributes', () => {
+        const src = 'image.jpg';
+        const alt = 'test image';
+        const { getByAltText } = render(<NsImage src={src} alt={alt} />);
+        const image = getByAltText(alt);
+        expect(image).toHaveAttribute('src', src);
+    });
+
+    it('3. renders with width and height if variant is not provided', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" width={300} height={300} />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '300');
+        expect(image).toHaveAttribute('height', '300');
+    });
+
+    it('4. renders with correct width and height based on variant', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="icon" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '60');
+        expect(image).toHaveAttribute('height', '60');
+    });
+
+    it('5. renders with correct width and height if variant is "fill"', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="fill" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '100%');
+        expect(image).toHaveAttribute('height', 'auto');
+    });
+
+    it('6. renders with correct width and height if variant is "award"', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="award" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '130');
+        expect(image).toHaveAttribute('height', '130');
+    });
+
+    it('7. renders with correct width and height if variant is "product"', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" variant="product" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveAttribute('width', '300');
+        expect(image).toHaveAttribute('height', '300');
+    });
+
+    it('8. renders with additional props', () => {
+        const { getByAltText } = render(<NsImage src="image.jpg" alt="test image" className="custom-image" />);
+        const image = getByAltText('test image');
+        expect(image).toHaveClass('custom-image');
+    });
 });

package/src/common/image/NsImage.stories.tsx

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsImage',
+    title: 'Components/Data Display/NsImage',
     component: NsImage,
     decorators: [withCenterDecorator],
     args: {

package/src/common/image/NsImage.tsx

@@ -2,18 +2,30 @@ import { NsImageProps } from './types.d';
 
 // eslint-disable-next-line no-unused-vars
 const NsImage = ({ src, width, height, alt, variant, ...rest }: NsImageProps) => {
-    let cHeight: string | number | undefined = height,
-        cWidth: string | number | undefined = width;
-    if (variant === 'product') {
-        (cHeight = 300), (cWidth = 300);
-    } else if (variant === 'icon') {
-        (cHeight = 60), (cWidth = 60);
-    } else if (variant === 'award') {
-        (cHeight = 130), (cWidth = 130);
-    } else if (variant === 'fill') {
-        (cHeight = 'auto'), (cWidth = '100%');
+    let cHeight, cWidth;
+    switch (variant) {
+        case 'product':
+            cHeight = 300;
+            cWidth = 300;
+            break;
+        case 'icon':
+            cHeight = 60;
+            cWidth = 60;
+            break;
+        case 'award':
+            cHeight = 130;
+            cWidth = 130;
+            break;
+        case 'fill':
+            cHeight = 'auto';
+            cWidth = '100%';
+            break;
+        default:
+            cHeight = height;
+            cWidth = width;
+            break;
     }
     // eslint-disable-next-line @next/next/no-img-element
-    return <img src={src} alt={alt} height={cHeight} width={cWidth} />;
+    return <img src={src} alt={alt} height={cHeight} width={cWidth} {...rest} />;
 };
 export default NsImage;

package/src/common/image/NsNextImage.stories.tsx

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsNextImage',
+    title: 'Components/Data Display/NsNextImage',
     component: NsNextImage,
     decorators: [withCenterDecorator],
 } as MetaStory;

package/src/common/index.ts

@@ -13,16 +13,20 @@ export * from './column-control';
 export * from './checkbox';
 export * from './common.types.d';
 export * from './dropdown';
+export * from './email-simple';
 export * from './flag';
+export * from './hooks';
 export * from './icon';
 export * from './image';
 export * from './input';
 export * from './label';
 export * from './link';
+export * from './modal';
 export * from './nav-tab';
 export * from './nav-product-card';
+export * from './radiogroup';
+export * from './spinner';
 export * from './text-strip';
 export * from './table';
 export * from './typography';
-export * from './email-simple';
-export * from './radiogroup';
+export * from './utility';

package/src/common/input/InputWrapper.tsx

@@ -1,20 +1,25 @@
 import { Box } from '@mui/material';
-import { styled, nuskinTheme } from '@nuskin/foundation-theme';
-import { fieldStateType } from './types.d';
+import { styled, nuskinTheme, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+import {fieldStateType} from './types.d';
 
+const { isDarkMode } = ColorUtils;
 const { colors } = nuskinTheme;
 
 const options = {
     shouldForwardProp: (propKey: string) => propKey !== 'fieldState',
 };
 
-const getInputBorderColor = (palette: any, fieldState: fieldStateType, isLight = true): string => {
+const getInputBorderColor = (
+    palette: FoundationTheme.Theme['palette'],
+    fieldState: fieldStateType,
+    isLight = true
+): string => {
     if (fieldState === 'success') {
-        return isLight ? colors.success[40] : colors.success[40];
+        return colors.success[40];
     } else if (fieldState === 'error') {
         return isLight ? colors.red[40] : colors.red[20];
     } else {
-        return palette.primary.main;
+        return palette?.primary.main ?? '';
     }
 };
 
@@ -28,7 +33,7 @@ const InputWrapper = styled(
 )<InputWrapperType>(({ theme, fieldState }) => {
     /* default value added so that unit tests do not fail */
     const { palette = { primary: { main: '', contrastText: '' } } } = theme;
-    const isLight = palette.primary.main === colors.primary.black;
+    const isLight = isDarkMode({ theme });
     const inputFocusedBorder = isLight ? colors.accentColorB[20] : colors.accentColorB[30];
     const inputDisabledBg = isLight ? colors.neutral[30] : colors.neutral[70];
     const inputDisabledBorder = isLight ? colors.neutral[60] : colors.neutral[80];
@@ -56,7 +61,7 @@ const InputWrapper = styled(
                     },
                 },
                 fieldset: {
-                    border: `1px solid ${getInputBorderColor(palette as any, fieldState, isLight)}`,
+                    border: `1px solid ${getInputBorderColor(palette, fieldState, isLight)}`,
                 },
                 input: {
                     color: palette.primary.main,

package/src/common/input/NsInputField.tsx

@@ -55,7 +55,7 @@ const NsInputField = (props: NsInputFieldProps) => {
     } = props;
     /** EndIcon is created so that we can automatically add success and error icon based of fieldState,
      *  it will override iconEnd. Also to note, InputProps is given to override both iconStart, iconEnd and EndIcon */
-    let EndIcon: AdornmentPropsType = getAdornmentProps({ disabled, fieldState, iconEnd, iconStart });
+    const EndIcon: AdornmentPropsType = getAdornmentProps({ disabled, fieldState, iconEnd, iconStart });
 
     return (
         <InputFieldWrapper>

package/src/common/label/NsLabel.stories.tsx

@@ -8,7 +8,7 @@ type MetaStory = Meta<ComponentType>;
 
 export default {
     component: NsLabel,
-    title: 'Components/NsLabel',
+    title: 'Components/Inputs/NsLabel',
     decorators: [withCenterDecorator],
 } as MetaStory;
 

package/src/common/link/NsLink.stories.tsx

@@ -16,7 +16,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsLink',
+    title: 'Components/Data Display/NsLink',
     component: NsLink,
     decorators: [withCenterDecorator],
     argTypes: {

package/src/common/modal/NsModal.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { render } from '@/test-utils/index';
+import NsModal from './NsModal';
+import { NsModalData } from './stories/mock';
+import { NsModalProps } from './types';
+
+describe('NsModal', () => {
+    const onHandleClose = jest.fn();
+
+    const NsModalProp = NsModalData as NsModalProps;
+
+    test('1. check NsModal component open', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('nsmodal-dialog')).toBeInTheDocument();
+    });
+
+    test('2. should render NsModal default component', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-default')).toBeInTheDocument();
+    });
+
+    test('3. should render NsModal status component', () => {
+        const VariantProps: NsModalProps = {
+            ...NsModalProp,
+            variant: 'info',
+        };
+        const { getByTestId } = render(<NsModal {...VariantProps} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-status')).toBeInTheDocument();
+    });
+
+    test('4. should render NsModal title with close button', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-title')).toBeInTheDocument();
+        expect(getByTestId('modal-close-button')).toBeInTheDocument();
+    });
+
+    test('5. should render NsModal body content', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-body-content')).toBeInTheDocument();
+    });
+
+    test('6. should render NsModal footer', () => {
+        const { getByTestId } = render(<NsModal {...NsModalProp} handleClose={onHandleClose} />);
+        expect(getByTestId('modal-footer')).toBeInTheDocument();
+    });
+});

package/src/common/modal/NsModal.styled.tsx

@@ -0,0 +1,28 @@
+import { styled } from '@nuskin/foundation-theme';
+import { NsButton } from '../button';
+import { DialogActions } from '@mui/material';
+
+export const NsInfoWrapper = styled.div`
+    display: flex;
+    .status-icon {
+        padding: 16px 0px 0px 24px;
+    }
+    .title-icon {
+        padding-right: 10px;
+    }
+`;
+
+export const CloseButton = styled(NsButton)`
+    position: absolute;
+    right: 8px;
+    top: 8px;
+`;
+
+export const ModalFooter = styled(DialogActions)`
+    display: flex;
+    justify-content: space-around;
+    padding: 20px 0px 10px 0px;
+    button {
+        width: 100%;
+    }
+`;