@nuskin/foundation-ui-components 1.0.0-develop.1 → 1.0.0-develop.11

package/src/common/email-simple/NsEmailSimple.tsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react';
+import { NsEmailSimpleProps } from './types';
+import { NsInputField } from '../input';
+import { fieldStateType } from '../input/types';
+import { emailPattern } from '../validations/regex';
+
+const NsEmailSimple = (props: NsEmailSimpleProps) => {
+    const {
+        disabled,
+        label,
+        required,
+        maxLength,
+        invalidEmailMessage,
+        dupedEmailMessage,
+        requiredErrorMessage,
+        checkEmail,
+        additionalProps,
+    } = props;
+    const [fieldState, setFieldState] = useState<fieldStateType>();
+    const [errorMsg, setErrorMessage] = useState('');
+
+    const handleBlur = async (e: React.FocusEvent<HTMLInputElement>) => {
+        const emailInput = e.target.value.toLowerCase().trim();
+        let fieldStateValue: fieldStateType;
+        let errorMessageValue = '';
+        if (required && !emailInput) {
+            fieldStateValue = 'error';
+            errorMessageValue = requiredErrorMessage;
+        } else if (!emailPattern.test(emailInput)) {
+            fieldStateValue = 'error';
+            errorMessageValue = invalidEmailMessage;
+        } else if (typeof checkEmail === 'function') {
+            try {
+                const [isValid, isAvailable] = await checkEmail();
+                if (!isValid) {
+                    fieldStateValue = 'error';
+                    errorMessageValue = invalidEmailMessage;
+                } else if (!isAvailable) {
+                    fieldStateValue = 'error';
+                    errorMessageValue = dupedEmailMessage;
+                } else {
+                    fieldStateValue = undefined;
+                    errorMessageValue = '';
+                }
+            } catch (error) {
+                console.log('API error', error);
+            }
+        } else {
+            //TODO What happens when user does not pass valid checkEmail function
+        }
+        setFieldState(fieldStateValue);
+        setErrorMessage(errorMessageValue);
+    };
+    return (
+        <NsInputField
+            required={required}
+            disabled={disabled}
+            label={label}
+            onBlur={handleBlur}
+            inputProps={{ maxLength }}
+            additionalProps={{ testid: additionalProps?.testid ?? 'email-field-test' }}
+            helperText={errorMsg}
+            fieldState={fieldState}
+            InputProps={{
+                endAdornment: null,
+            }}
+        />
+    );
+};
+
+export default NsEmailSimple;

package/src/common/email-simple/index.ts

@@ -0,0 +1,2 @@
+export { default as NsEmailSimple } from './NsEmailSimple';
+export type { NsEmailSimpleProps } from './types.d';

package/src/common/email-simple/types.d.ts

@@ -0,0 +1,14 @@
+import { TextFieldProps } from '@mui/material';
+import { AdditionalProps } from '../common.types';
+
+export type NsEmailSimpleProps = Pick<TextFieldProps> &
+    AdditionalProps & {
+        disabled?: boolean;
+        label?: string;
+        required?: boolean;
+        maxLength?: number;
+        invalidEmailText?: string;
+        dupedEmailText?: string;
+        requiredErrorMessage?: string;
+        checkEmail?: Function;
+    };

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

@@ -1,35 +1,15 @@
-/**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * Flag.spec.tsx
- * @description In this test case,
- * we use the render function to render the MyComponent with the desired background color and text.
- */
-
 import React from 'react';
-import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
-
-import { render } from '../../../test-utils/index';
-import NsFlag from './NsFlag';
 
-const { palette } = nuskinTheme;
+import { render } from '@/test-utils/index';
+import { NsFlag } from '../';
 
-// Test suite for FlagComponent
 describe('FlagComponent', () => {
-    // Test case for rendering a div element with background color and text.
     it('renders a div element with background color and text', () => {
-        // Render FlagComponent with blue background color and "Nuskin" text
+        const text = 'NU SKIN';
         const { getByText } = render(<NsFlag message="NU SKIN" color="accentColorA" />);
+        const divElement = getByText(text);
 
-        // Get the rendered div element using its text
-        const divElement = getByText('NU SKIN');
-
-        // Assert that the div element is in the document
         expect(divElement).toBeInTheDocument();
-
-        // Assert that the div element has the expected background color
-        expect(divElement).toHaveStyle(`color: ${palette?.primary?.contrastText}`);
-
-        // Assert that the div element has the expected text content
-        expect(divElement).toHaveTextContent('NU SKIN');
+        expect(divElement).toHaveTextContent(text);
     });
 });

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsFlag } from './';
 
 type ComponentType = typeof NsFlag;
@@ -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/flag/NsFlag.styled.tsx

@@ -7,7 +7,9 @@
 import { Theme } from '@mui/material';
 import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
 
-import { NsFlagSize } from './types';
+import { NsFlagSize } from './types.d';
+
+const { paletteColor } = ColorUtils;
 
 type NsFlagThemeParams = {
     $size: NsFlagSize;
@@ -33,13 +35,9 @@ const makeFlagSize = ({ $size }: { $size: NsFlagSize }) => {
     return sizeValue / FLAG_SCALE_VALUE;
 };
 
-const {
-    getPaletteColor,
-} = ColorUtils;
-
-const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme}: NsFlagThemeParams) => {
+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 '';
 };
@@ -47,8 +45,8 @@ const makeFlagBorder = ({ $size, $bgColor = 'accentColorA', theme}: NsFlagThemeP
 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/flag/NsFlag.tsx

@@ -5,10 +5,8 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-
 import { StyledFlag } from './NsFlag.styled';
-
-import { NsFlagProps } from './types';
+import { NsFlagProps } from './types.d';
 
 const NsFlag = (props: PropsWithChildren<NsFlagProps>) => {
     const { className = '', size = 'small', color = 'accentColorA', message, testId = 'ns-flag-component' } = props;

package/src/common/flag/index.ts

@@ -1,2 +1,2 @@
 export { default as NsFlag } from './NsFlag';
-export type { NsFlagProps, NsFlagSize } from './types';
+export type { NsFlagProps, NsFlagSize } from './types.d';

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

@@ -1,6 +1,4 @@
 /**
- * @author [vijayaprathap Kumar] (vpkumar@nuskin.com)
- * types.d.ts
  * @description Extend the FlagProps interface to include message, color and size prop.
  */
 

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.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '../../../test-utils';
+import { render, screen } from '@/test-utils/index';
 import { NsIcon, NsIconNameType, NsIconVariants } from './';
 
 describe('NsIcon Component', () => {

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsIcon, NsIconVariants } from './';
 
 type ComponentType = typeof NsIcon;
@@ -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/NsIcon.styled.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@nuskin/foundation-theme';
-import { NsIconSizeType } from './types';
+import { NsIconSizeType } from './types.d';
 
 const iconSize = {
     small: '16px',

package/src/common/icon/NsIcon.tsx

@@ -1,6 +1,6 @@
 import { IconContainer } from './NsIcon.styled';
 import IconVariants from './NsIconVariants';
-import { NsIconProps } from './types';
+import { NsIconProps } from './types.d';
 
 const NsIcon = ({
     name,

package/src/common/icon/NsIconVariants.ts

@@ -17,27 +17,32 @@ import Home from './icons/home';
 import AlertErrorIcon from './icons/AlertErrorIcon';
 import WarningIcon from './icons/WarningIcon';
 import CloseIcon from './icons/CloseIcon';
+import UserIcon from './icons/UserIcon';
+import HamburgerIcon from './icons/HamburgerIcon';
 
 const IconVariants = {
     arrowDown: ArrowDown,
     arrowUp: ArrowUp,
     arrowLeft: ArrowLeft,
     arrowRight: ArrowRight,
+    alertError: AlertErrorIcon,
     cart: Cart,
     cartBadge: CartBadge,
+    close: CloseIcon,
     checkShield: CheckShield,
     checkVerified: CheckVerified,
     error: ErrorIcon,
+    hamburgerIcon: HamburgerIcon,
+    home: Home,
     infoFilled: InfoFilled,
     infoOutlined: InfoOutlined,
     search: SearchIcon,
     success: SuccessIcon,
-    trash: TrashIcon,
     slash: SlashIcon,
-    home: Home,
-    alertError: AlertErrorIcon,
+    trash: TrashIcon,
+    userIcon: UserIcon,
     warning: WarningIcon,
-    close: CloseIcon
 };
 
 export default IconVariants;
+export const isValidIconName = (name: string) => Object.keys(IconVariants).includes(name);

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

@@ -16,17 +16,26 @@ const AlertErrorIcon = (props: SvgIconProps) => {
             xmlns="http://www.w3.org/2000/svg"
             {...props}
         >
-            <g id="💎-icon/alert/WarningFill-red" transform="translate(1.000000, 1.000000)">
+            <g id="icon/alert/WarningFill-red" transform="translate(1.000000, 1.000000)">
                 <g id="Error2" transform="translate(0.000000, 1.200000)">
-                    <path d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
+                    <path
+                        d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
                         0.100809118 8.58923271,0.246687943 L0.0706452929,14.8670135 C-0.0142965839,15.0216954 -0.0118890438,15.2093943 0.0769925071,15.3618609 C0.165874058,
                         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={props.fill || '#B2140A'} fill-rule="nonzero">
-                    </path>
-                    <path d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
+                        15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z"
+                        id="Shape"
+                        fill={props.fill || '#B2140A'}
+                        fillRule="nonzero"
+                    ></path>
+                    <path
+                        d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
                     12.0467652 9.37034806,12.1211477 9.52,12.265 C9.65709398,12.4241339 9.72701115,12.6303 9.715,12.84 C9.72048715,13.0522748 9.64341383,13.2584012 9.5,
                     13.415 C9.35312473,13.5641498 9.1489517,13.6425377 8.94,13.63 C8.72997224,13.6424095 8.52401376,13.5683367 8.37,13.425 C8.23531653,13.2613056 8.17063593,
-                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z" id="Shape" fill={props.fill || '#FFFFFF'} fill-rule="nonzero"></path>
+                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z"
+                        id="Shape"
+                        fill={props.fill || '#FFFFFF'}
+                        fillRule="nonzero"
+                    ></path>
                 </g>
             </g>
         </SvgIcon>

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

@@ -4,38 +4,13 @@ import { SvgIconProps, SvgIcon } from '@mui/material';
 
 const Cart = (props: SvgIconProps) => {
     return (
-        <SvgIcon
-            viewBox="0 0 20 20"
-            preserveAspectRatio="xMidYMid meet"
-            focusable="false"
-            {...props}
-            data-testid="cart"
-        >
-            <g
-                id="cart-icon"
-                fill="none"
-                strokeWidth="1"
-                stroke="currentColor"
-                transform="translate(-53.000000, -15.000000)"
-            >
-                <g id="Group">
-                    <g id="cart-icon" transform="translate(49.000000, 8.000000)">
-                        <g id="Asset-9Cart" transform="translate(4.000000, 8.000000)">
-                            <circle id="Oval" cx="7" cy="14.5" r="1"></circle>
-                            <circle id="Oval" cx="15" cy="14.5" r="1"></circle>
-                            <polyline
-                                id="Shape"
-                                strokeLinecap="round"
-                                points="5.68434189e-14 0 3 0 6 12 16 12"
-                            ></polyline>
-                            <path
-                                d="M5.5,9 C16.0765368,9 17.2536948,8.11206806 17.6216676,6.82416338 L19,2 L3.5,2"
-                                id="Shape"
-                            ></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
+        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-testid="cart" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0 3.79999C0 3.2477 0.447715 2.79999 1 2.79999H3.19159C4.13466 2.79999 4.94959 3.45879 5.14719 4.38093L5.237 4.80005H21C21.3079 4.80005 21.5987 4.94192 21.7882 5.18464C21.9777 5.42735 22.0448 5.74384 21.9701 6.04258L20.5382 11.7702C20.0931 13.5509 18.4931 14.8 16.6577 14.8H7.3798L7.59407 15.8H19C19.5523 15.8 20 16.2478 20 16.8C20 17.3523 19.5523 17.8 19 17.8H18H7.5H6.78564C6.3141 17.8 5.90664 17.4706 5.80784 17.0096L3.45079 6.00958L3.19159 4.79999H1C0.447715 4.79999 0 4.35227 0 3.79999ZM7.5 17.8C6.39543 17.8 5.5 18.6955 5.5 19.8C5.5 20.9046 6.39543 21.8 7.5 21.8C8.60457 21.8 9.5 20.9046 9.5 19.8C9.5 18.6955 8.60457 17.8 7.5 17.8ZM18 17.8C16.8954 17.8 16 18.6955 16 19.8C16 20.9046 16.8954 21.8 18 21.8C19.1046 21.8 20 20.9046 20 19.8C20 18.6955 19.1046 17.8 18 17.8ZM6.95124 12.8H16.6577C17.5754 12.8 18.3754 12.1755 18.598 11.2851L19.7192 6.80005H5.66557L6.95124 12.8Z"
+                fill={props.color}
+            />
         </SvgIcon>
     );
 };

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

@@ -0,0 +1,29 @@
+/* eslint-disable max-len */
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
+/**
+ *
+ * @param props {fill: color to be filled for icon, color: color of the tick icon}
+ */
+const HamburgerIcon = (props: SvgIconProps) => {
+    return (
+        <SvgIcon viewBox="0 0 24 24" {...props} data-testid="hamburgerIcon" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0 1C0 0.447715 0.447715 0 1 0H19C19.5523 0 20 0.447715 20 1C20 1.55228 19.5523 2 19 2H1C0.447715 2 0 1.55228 0 1Z"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0 9C0 8.44772 0.447715 8 1 8H19C19.5523 8 20 8.44772 20 9C20 9.55228 19.5523 10 19 10H1C0.447715 10 0 9.55228 0 9Z"
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M0 17C0 16.4477 0.447715 16 1 16H19C19.5523 16 20 16.4477 20 17C20 17.5523 19.5523 18 19 18H1C0.447715 18 0 17.5523 0 17Z"
+            />
+        </SvgIcon>
+    );
+};
+
+export default HamburgerIcon;

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

@@ -0,0 +1,30 @@
+/* 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">
+            <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}
+                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}
+                strokeWidth="2"
+                strokeLinecap="round"
+            />
+        </SvgIcon>
+    );
+};
+
+export default UserIcon;

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

@@ -18,15 +18,24 @@ const WarningIcon = (props: SvgIconProps) => {
         >
             <g id="💎-icon/alert/WarningFill-yellow" transform="translate(1.000000, 1.000000)">
                 <g id="Warning2" transform="translate(0.000000, 1.200000)">
-                    <path d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
+                    <path
+                        d="M17.9465423,14.8670135 L9.44311247,0.246687943 C9.35049358,0.100809118 9.18936767,0.012383152 9.01617259,0.012383152 C8.84297751,0.012383152 8.68185161,
                     0.100809118 8.58923271,0.246687943 L0.0706452929,14.8670135 C-0.0142965839,15.0216954 -0.0118890438,15.2093943 0.0769925071,15.3618609 C0.165874058,
                     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-rule="nonzero"></path>
-                    <path d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
+                    15.2093943 18.0314841,15.0216954 17.9465423,14.8670135 Z"
+                        id="Shape"
+                        fill="#FEBD00"
+                        fillRule="nonzero"
+                    ></path>
+                    <path
+                        d="M8.19,12.84 C8.16437588,12.6281014 8.2368299,12.4160897 8.38677958,12.2641927 C8.53672927,12.1122956 8.74778837,12.0371121 8.96,12.06 C9.16715704,
                     12.0467652 9.37034806,12.1211477 9.52,12.265 C9.65709398,12.4241339 9.72701115,12.6303 9.715,12.84 C9.72048715,13.0522748 9.64341383,13.2584012 9.5,
                     13.415 C9.35312473,13.5641498 9.1489517,13.6425377 8.94,13.63 C8.72997224,13.6424095 8.52401376,13.5683367 8.37,13.425 C8.23531653,13.2613056 8.17063593,
-                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero">
-                    </path>
+                    13.0510936 8.19,12.84 Z M9.415,11.195 L8.5,11.195 L8.25,5.96 L9.675,5.96 L9.415,11.195 Z"
+                        id="Shape"
+                        fill="#FFFFFF"
+                        fillRule="nonzero"
+                    ></path>
                 </g>
             </g>
         </SvgIcon>

package/src/common/icon/index.ts

@@ -1,3 +1,3 @@
 export { default as NsIcon } from './NsIcon';
 export { default as NsIconVariants } from './NsIconVariants';
-export type { NsIconProps, NsIconNameType, NsIconSizeType } from './types';
+export type { NsIconProps, NsIconNameType, NsIconSizeType } from './types.d';

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/image/NsImage.spec.tsx

@@ -1,10 +1,60 @@
-import { render, screen } from '../../../test-utils';
-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 { render, screen } from '@/test-utils/index';
+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');
+    });
 });