@nuskin/foundation-ui-components 1.1.0 → 1.2.0

package/src/common/icon/icons/UserIcon.tsx

@@ -1,25 +1,22 @@
 /* eslint-disable max-len */
-import { useTheme } from '@mui/material/styles';
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 /**
  *
  * @param props {fill: color to be filled for icon, color: color of the tick icon}
  */
 const UserIcon = (props: SvgIconProps) => {
-    const { palette } = useTheme();
-    const strokeColor = palette.primary.main;
     return (
-        <SvgIcon viewBox="0 0 24 24" {...props} data-testid="userIcon" xmlns="http://www.w3.org/2000/svg">
+        <SvgIcon viewBox="0 0 24 24" data-testid="userIcon" xmlns="http://www.w3.org/2000/svg" {...props}>
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z"
-                stroke={strokeColor}
+                stroke={props.color}
                 strokeWidth="2"
             />
             <path
                 d="M19 20C18.9425 19.3229 19 17.5669 17.3793 17.2226C14.7126 16.6144 13.931 16.4078 14.1034 14.2272C15.8046 13.0796 15.7816 11.0252 15.7471 8.74139C15.7471 6.67508 14.0695 5 12 5C9.93052 5 8.25287 6.67508 8.25287 8.74139C8.25287 11.0367 8.25287 13.137 9.89655 14.2272C10.0575 16.4078 9.28736 16.6144 6.62069 17.2226C5 17.5669 5.05747 19.3229 5 20"
-                stroke={strokeColor}
+                stroke={props.color}
                 strokeWidth="2"
                 strokeLinecap="round"
             />

package/src/common/icon/icons/UserOutline.tsx

@@ -0,0 +1,24 @@
+/* eslint-disable max-len */
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+
+function UserOutline(props: SvgIconProps) {
+    return (
+        <SvgIcon
+            data-testid="userOutline"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12C21.25 14.5514 20.217 16.8615 18.5465 18.535C18.5373 18.5053 18.5278 18.4757 18.5177 18.4462C18.2909 17.7811 17.7908 17.0816 16.7743 16.861C16.1976 16.7279 15.7597 16.6249 15.4126 16.5154C15.0619 16.4048 14.8722 16.3075 14.7621 16.2197C14.6519 16.1318 14.5229 15.9893 14.534 15.3824C15.2564 14.7722 15.6208 13.9828 15.7989 13.145C15.9917 12.2377 15.9765 11.218 15.9621 10.2575L15.9618 10.2367C15.9587 8.04108 14.1928 6.25 12 6.25C9.80523 6.25 8.03818 8.04427 8.03818 10.2425L8.03818 10.2902C8.03812 11.2492 8.03807 12.2685 8.23093 13.1685C8.40828 13.9961 8.76096 14.7856 9.46415 15.382C9.47219 15.9884 9.34391 16.1319 9.23338 16.2204C9.12398 16.3079 8.93522 16.4051 8.58559 16.5155C8.23946 16.6249 7.80232 16.728 7.22572 16.861C6.20921 17.0816 5.70909 17.7811 5.48226 18.4462C5.47222 18.4757 5.46266 18.5053 5.45354 18.535C3.78298 16.8615 2.75 14.5514 2.75 12ZM6.77658 19.6351C8.26295 20.6539 10.0619 21.25 12 21.25C13.9381 21.25 15.7371 20.6539 17.2234 19.6351C17.206 19.3999 17.1779 19.1646 17.098 18.9304C16.9903 18.6146 16.822 18.4054 16.4533 18.3262L16.4423 18.3239L16.4423 18.3238C15.8787 18.1938 15.3772 18.0771 14.9615 17.946C14.5483 17.8157 14.1512 17.6513 13.8266 17.3922C13.0849 16.8004 12.9768 15.9412 13.0552 14.9385L13.0833 14.58L13.3803 14.3774C13.9081 14.0173 14.1862 13.5172 14.3317 12.8331C14.4843 12.1148 14.477 11.265 14.4619 10.2537L14.4617 10.2425H14.4618C14.4618 8.8592 13.3529 7.75 12 7.75C10.6471 7.75 9.53818 8.8592 9.53818 10.2425C9.53818 11.259 9.54149 12.1256 9.69764 12.8542C9.84777 13.5548 10.1225 14.0439 10.6148 14.3741L10.9184 14.5777L10.9451 14.9423C11.0181 15.9429 10.9092 16.8005 10.1706 17.3915C9.84647 17.6509 9.45024 17.8154 9.03756 17.9458C8.62239 18.077 8.12144 18.1938 7.55771 18.3238L7.54669 18.3263L7.54667 18.3262C7.17801 18.4054 7.00968 18.6146 6.90197 18.9304C6.8221 19.1646 6.79403 19.3999 6.77658 19.6351Z"
+                fill={props.color || '#272525'}
+            />
+        </SvgIcon>
+    );
+}
+
+export default UserOutline;

package/src/common/icon/icons/WarningIcon.tsx

@@ -24,7 +24,7 @@ const WarningIcon = (props: SvgIconProps) => {
                     15.5143276 0.328282319,15.6093523 0.505163987,15.6123832 L17.5120236,15.6123832 C17.6889052,15.6093523 17.8513135,15.5143276 17.940195,15.3618609 C18.0290766,
                     15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z"
                         id="Shape"
-                        fill="#FEBD00"
+                        fill={props.color || '#FEBD00'}
                         fillRule="nonzero"
                     ></path>
                     <path

package/src/common/icon/icons/home.tsx

@@ -3,7 +3,7 @@ import { SvgIconProps, SvgIcon } from '@mui/material';
 
 const Home = (props: SvgIconProps) => {
     return (
-        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} data-testid="home">
+        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="home" {...props}>
             <path
                 fillRule="evenodd"
                 clipRule="evenodd"

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.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/index.ts

@@ -1,8 +1,8 @@
 export * from './accordion';
 export * from './alert';
 export * from './auth-dropdown';
-export * from './autocomplete';
 export * from './banner';
+
 export * from './breadcrumb';
 export * from './brand-components';
 export * from './button';
@@ -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

@@ -16,7 +16,6 @@ export const Default: Story = {
     args: {
         children: 'Label',
         required: false,
-        size: 16,
     },
 };
 
@@ -24,7 +23,6 @@ export const Optional: Story = {
     args: {
         children: 'Label',
         showOptional: true,
-        size: 16,
     },
 };
 
@@ -33,6 +31,5 @@ export const Required: Story = {
         children: 'Label',
         showOptional: true,
         required: true,
-        size: 16,
     },
 };

package/src/common/label/NsLabel.tsx

@@ -27,7 +27,7 @@ const StyledLabel = styled(FormLabel)<{ fontSize?: number; style?: CSSProperties
 const NsLabel = (props: NsLabelProps) => {
     const { required, showOptional, children, size } = props;
     return (
-        <StyledLabel {...props} fontSize={size} required={required}>
+        <StyledLabel fontSize={size} {...props} required={required}>
             {children}
             {!required && showOptional ? <span className="optional-label">{' (Optional)'}</span> : null}
         </StyledLabel>

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%;
+    }
+`;

package/src/common/modal/NsModal.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Dialog from '@mui/material/Dialog';
+import { useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { ModalVariantMap } from './model/NsModalVariantMap';
+import { NsModalProps } from './types';
+
+const NsModal = (props: NsModalProps) => {
+    const { open, handleClose, header, body, additionalProps, footer, statusInfo, variant = 'default' } = props;
+
+    const { className, scrollType = 'paper', ariaLabel } = additionalProps || {};
+
+    const { ariaLabelledby = 'alert-dialog-title', ariaDescribedby = 'alert-dialog-description' } = ariaLabel || {};
+
+    const theme = useTheme();
+
+    const fullScreen: boolean = useMediaQuery(theme.breakpoints.down('md'));
+
+    const Component = ModalVariantMap[variant];
+
+    return (
+        <Dialog
+            data-testid="nsmodal-dialog"
+            fullScreen={fullScreen}
+            open={open}
+            scroll={scrollType}
+            onClose={handleClose}
+            aria-labelledby={ariaLabelledby}
+            aria-describedby={ariaDescribedby}
+            className={className}
+        >
+            <Component {...{ header, handleClose, body, footer, additionalProps, statusInfo, variant, open }} />
+        </Dialog>
+    );
+};
+
+export default NsModal;

package/src/common/modal/helper-component/NsModalContentBox.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from 'react';
+import { DialogContent } from '@mui/material';
+import { NsModalComponentProps } from '../types';
+import NsModalTitle from './NsModalTitle';
+import { NsTypography } from '../..';
+
+const NsModalContentBox = ({ handleClose, statusInfo }: NsModalComponentProps) => {
+    const { title, description } = statusInfo || {};
+
+    const header = useMemo(() => {
+        return {
+            show: true,
+            children: (
+                <NsTypography variant="h5" weight="bold">
+                    {title}
+                </NsTypography>
+            ),
+            isCloseIcon: true,
+        };
+    }, [title]);
+
+    return (
+        <div>
+            <NsModalTitle header={header} handleClose={handleClose} />
+            <DialogContent>
+                <NsTypography variant="p-xs">{description}</NsTypography>
+            </DialogContent>
+        </div>
+    );
+};
+
+export default NsModalContentBox;

package/src/common/modal/helper-component/NsModalDefault.tsx

@@ -0,0 +1,25 @@
+import { DialogContent } from '@mui/material';
+import NsModalTitle from './NsModalTitle';
+import { NsModalComponentProps } from '../types';
+import { ModalFooter } from '../NsModal.styled';
+import { Show } from '../../utility';
+
+const NsDefaultModal = ({ header, handleClose, body, footer, additionalProps }: NsModalComponentProps) => {
+    const { dividers } = additionalProps || {};
+
+    return (
+        <div data-testid="modal-default">
+            <NsModalTitle header={header} handleClose={handleClose} />
+            <DialogContent dividers={dividers}>
+                <Show when={body?.show ?? false}>
+                    <div data-testid="modal-body-content">{body?.children}</div>
+                </Show>
+                <Show when={footer?.show ?? false}>
+                    <ModalFooter data-testid="modal-footer">{footer?.children}</ModalFooter>
+                </Show>
+            </DialogContent>
+        </div>
+    );
+};
+
+export default NsDefaultModal;

package/src/common/modal/helper-component/NsModalStatus.tsx

@@ -0,0 +1,15 @@
+import { NsInfoWrapper } from '../NsModal.styled';
+import { NsModalComponentProps } from '../types';
+import NsModalContentBox from './NsModalContentBox';
+import NsModalStatusIcon from './NsModalStatusIcon';
+
+const NsStatusModal = ({ handleClose, statusInfo, variant }: NsModalComponentProps) => {
+    return (
+        <NsInfoWrapper data-testid="modal-status">
+            <NsModalStatusIcon {...{ variant }} />
+            <NsModalContentBox {...{ handleClose, statusInfo }} />
+        </NsInfoWrapper>
+    );
+};
+
+export default NsStatusModal;

package/src/common/modal/helper-component/NsModalStatusIcon.tsx

@@ -0,0 +1,14 @@
+import { NsIcon, NsIconNameType } from '../../';
+import { StatusIconMap } from '../model/NsModalVariantMap';
+import { NsModalComponentProps, NsModalVariant } from '../types';
+
+const NsModalStatusIcon = ({ variant }: NsModalComponentProps) => {
+    const iconName = variant ? StatusIconMap[variant] : null;
+    return (
+        <div className="status-icon">
+            <NsIcon name={iconName as NsIconNameType} size="medium" color={variant as NsModalVariant} />
+        </div>
+    );
+};
+
+export default NsModalStatusIcon;

package/src/common/modal/helper-component/NsModalTitle.tsx

@@ -0,0 +1,26 @@
+import { NsIcon } from '../..';
+import { DialogTitle } from '@mui/material';
+import { CloseButton, NsInfoWrapper } from '../NsModal.styled';
+import { NsModalComponentProps } from '../types';
+import { Show } from '../../utility';
+
+const NsModalTitle = ({ header, handleClose }: NsModalComponentProps) => {
+    const { show, children, isCloseIcon, iconName } = header || {};
+    return (
+        <Show when={show}>
+            <DialogTitle data-testid="modal-title">
+                <NsInfoWrapper>
+                    {iconName ? <NsIcon name={iconName} className="title-icon" /> : null}
+                    {children}
+                </NsInfoWrapper>
+                <Show when={isCloseIcon}>
+                    <CloseButton aria-label="close" onClick={handleClose} data-testid="modal-close-button">
+                        <NsIcon name="close" size="small" />
+                    </CloseButton>
+                </Show>
+            </DialogTitle>
+        </Show>
+    );
+};
+
+export default NsModalTitle;

package/src/common/modal/index.ts

@@ -0,0 +1,2 @@
+export { default as NsModal } from './NsModal';
+export type { NsModalProps } from './types';

package/src/common/modal/model/NsModalVariantMap.tsx

@@ -0,0 +1,24 @@
+import { ElementType } from 'react';
+import NsDefaultModal from '../helper-component/NsModalDefault';
+import NsStatusModal from '../helper-component/NsModalStatus';
+import { StatusIconMapProps } from '../types';
+
+type ModalMapType = {
+    [key: string]: ElementType;
+};
+
+export const ModalVariantMap: ModalMapType = {
+    default: NsDefaultModal,
+    confirmation: NsDefaultModal,
+    success: NsStatusModal,
+    warning: NsStatusModal,
+    error: NsStatusModal,
+    info: NsStatusModal,
+};
+
+export const StatusIconMap: StatusIconMapProps = {
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+    info: 'infoFilled',
+};