@nuskin/foundation-ui-components 1.1.0 → 1.2.0

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

@@ -3,7 +3,7 @@ import { CheckboxProps as MUICheckboxProps } from '@material-ui/core/Checkbox';
 import { NsFlagProps } from '../flag';
 
 // Define the props for the custom checkbox component
-export type NsCheckboxProps = Partial<Pick<MUICheckboxProps, 'label' | 'onChange'>> & {
+export type NsCheckboxProps = Pick<MUICheckboxProps, 'label' | 'onChange'> & {
     name: string;
     className?: string;
     checked: boolean;

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,21 @@
-export type ContentStackLiveTags = {
-    'data-cslp'?: string;
-};
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+export type CslpTag = { 'data-cslp': string };
 
 export type AdditionalProps = {
-    darkModeEnabled?: boolean;
     additionalProps?: {
         ariaLabel?: string;
         testid?: string;
         className?: string;
-    } & ContentStackLiveTags;
+        'data-testid'?: string;
+    } & Partial<CslpTag>;
+    cslp?: Record<string, CslpTag>;
+} & 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/NsDropdown.tsx

@@ -1,7 +1,9 @@
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
+
 import { DropdownContainer, DropdownButton, DropdownList, DropdownHead } from './NsDropdown.styled';
 import { NsIcon } from '../icon';
 import { DropdownProps } from './types.d';
+import { useOnClickOutside } from '../hooks/useOnClickOutside';
 
 const NsDropdown: React.FC<DropdownProps> = ({
     selectedValue,
@@ -17,12 +19,15 @@ const NsDropdown: React.FC<DropdownProps> = ({
 }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [value, setValue] = useState(selectedValue || '');
+    const dropdowneRef = useRef<HTMLDivElement | null>(null);
 
     const handleToggle = () => {
         if (disabled) return;
         setIsOpen(!isOpen);
     };
 
+    useOnClickOutside(dropdowneRef, handleToggle);
+
     const closeDropdown = () => {
         if (closeOnMouseLeave) {
             setIsOpen(false);
@@ -36,7 +41,7 @@ const NsDropdown: React.FC<DropdownProps> = ({
     };
 
     return (
-        <DropdownContainer disabled={disabled}>
+        <DropdownContainer disabled={disabled} ref={dropdowneRef}>
             <DropdownHead data-testid="dropdown-head" disabled={disabled} type={type} onClick={handleToggle}>
                 <DropdownButton>{selectedLabel || placeholder}</DropdownButton>
                 <NsIcon testId="chevron-icon" name={isOpen ? 'arrowUp' : 'arrowDown'} color="primary" />

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/useOnClickOutside.tsx

@@ -0,0 +1,25 @@
+import { RefObject, useEffect } from 'react';
+
+export type Handler = () => void;
+
+export function useOnClickOutside<T extends HTMLElement = HTMLElement>(
+    ref: RefObject<T>,
+    handler: Handler,
+    mouseEvent: 'click' | 'mousedown' | 'mouseup' = 'click'
+): void {
+    const handleEventListener = (event: MouseEvent) => {
+        const el = ref?.current;
+        if (!el || el.contains(event.target as Node)) {
+            return;
+        }
+        handler();
+    };
+    useEffect(() => {
+        if (document) {
+            document.addEventListener(mouseEvent, handleEventListener);
+            return () => {
+                document.removeEventListener(mouseEvent, handleEventListener);
+            };
+        }
+    }, []);
+}

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

@@ -7,7 +7,7 @@ describe('NsIcon Component', () => {
         const { getByTestId } = render(<NsIcon name="cart" size="medium" color="secondary" />);
         const icon = getByTestId('icon');
         const svgIcon = icon.querySelector('svg');
-        expect(svgIcon).toHaveClass('MuiSvgIcon-colorSecondary');
+        // expect(svgIcon).toHaveClass('MuiSvgIcon-colorSecondary');
         expect(svgIcon).toHaveClass('MuiSvgIcon-fontSizeMedium');
     });
 

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

@@ -20,6 +20,9 @@ export default {
             control: 'select',
             options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
         },
+        colorOverride: {
+            control: 'color',
+        },
     },
     args: {
         size: 'large',

package/src/common/icon/NsIcon.tsx

@@ -1,7 +1,10 @@
+import { useTheme } from '@mui/material';
+import { ColorUtils } from '@nuskin/foundation-theme';
 import { IconContainer } from './NsIcon.styled';
 import IconVariants from './NsIconVariants';
 import { NsIconProps } from './types.d';
 
+const { paletteColor } = ColorUtils;
 const NsIcon = ({
     name,
     size = 'large',
@@ -11,14 +14,15 @@ const NsIcon = ({
     colorOverride,
 }: NsIconProps) => {
     const Icon = IconVariants[name];
-
+    const theme = useTheme();
+    const iconColor = paletteColor(color)({ theme });
     if (!Icon) {
         return null;
     }
 
     return (
         <IconContainer data-testid={testId} size={size} className={className}>
-            <Icon color={colorOverride ? colorOverride : (color as any)} />
+            <Icon color={colorOverride ? colorOverride : (iconColor as any)} />
         </IconContainer>
     );
 };

package/src/common/icon/NsIconVariants.ts

@@ -19,6 +19,7 @@ import WarningIcon from './icons/WarningIcon';
 import CloseIcon from './icons/CloseIcon';
 import UserIcon from './icons/UserIcon';
 import HamburgerIcon from './icons/HamburgerIcon';
+import UserOutline from './icons/UserOutline';
 
 const IconVariants = {
     arrowDown: ArrowDown,
@@ -41,7 +42,9 @@ const IconVariants = {
     slash: SlashIcon,
     trash: TrashIcon,
     userIcon: UserIcon,
+    userOutline: UserOutline,
     warning: WarningIcon,
 };
 
 export default IconVariants;
+export const isValidIconName = (name: string) => Object.keys(IconVariants).includes(name);

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

@@ -24,7 +24,7 @@ const AlertErrorIcon = (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={props.fill || '#B2140A'}
+                        fill={props.color || '#B2140A'}
                         fillRule="nonzero"
                     ></path>
                     <path
@@ -33,7 +33,7 @@ const AlertErrorIcon = (props: SvgIconProps) => {
                     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={'#FFFFFF'}
                         fillRule="nonzero"
                     ></path>
                 </g>

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

@@ -1,28 +1,25 @@
-import { useTheme } from '@mui/material/styles';
 import { SvgIconProps, SvgIcon } from '@mui/material';
 
 const ArrowLeft = (props: SvgIconProps) => {
-    const { palette } = useTheme();
-    const strokeColor = palette.primary.main;
     return (
         <SvgIcon
-            {...props}
             data-testid="arrowLeft"
             viewBox="0 0 24 24"
             preserveAspectRatio="xMidYMid meet"
             focusable="false"
             style={{ pointerEvents: 'none', display: 'block' }}
+            {...props}
         >
             <g
                 id="icon-narrow-angle-left-24"
-                stroke="none"
+                stroke={props.color}
                 strokeWidth="1"
                 fill="none"
                 fillRule="evenodd"
                 strokeLinecap="round"
                 strokeLinejoin="round"
             >
-                <g transform="translate(-196, -226)" stroke={strokeColor}>
+                <g transform="translate(-196, -226)" stroke={props.color || '#000'}>
                     <polyline
                         // eslint-disable-next-line max-len
                         transform="translate(209.000000, 237.500000) scale(-1.2, 1.2) rotate(90.000000) translate(-209.000000, -237.500000)"

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

@@ -1,11 +1,9 @@
-import { useTheme } from '@mui/material/styles';
-
-export const ArrowRight = () => {
-    const { palette } = useTheme();
-    const strokeColor = palette.primary.main;
+import { SvgIconProps, SvgIcon } from '@mui/material';
 
+export const ArrowRight = (props: SvgIconProps) => {
     return (
-        <svg
+        <SvgIcon
+            {...props}
             data-testid="arrowRight"
             viewBox="0 0 24 24"
             preserveAspectRatio="xMidYMid meet"
@@ -21,7 +19,7 @@ export const ArrowRight = () => {
                 strokeLinecap="round"
                 strokeLinejoin="round"
             >
-                <g transform="translate(-196, -226)" stroke={strokeColor}>
+                <g transform="translate(-196, -226)" stroke={props.color || '#000'}>
                     <polyline
                         // eslint-disable-next-line max-len
                         transform="translate(209.000000, 237.500000) scale(-1.2, 1.2) rotate(-90.000000) translate(-209.000000, -237.500000)"
@@ -29,7 +27,7 @@ export const ArrowRight = () => {
                     ></polyline>
                 </g>
             </g>
-        </svg>
+        </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/CartBadge.tsx

@@ -8,8 +8,8 @@ const CartBadge = (props: SvgIconProps) => {
             viewBox="0 0 30 30"
             preserveAspectRatio="xMidYMid meet"
             focusable="false"
-            {...props}
             data-testid="cartBadge"
+            {...props}
         >
             <g
                 id="cart-icon-badge"
@@ -20,7 +20,7 @@ const CartBadge = (props: SvgIconProps) => {
                 width="30px"
                 height="30px"
             >
-                <g id="Group" transform="translate(0.000000, 0.500000)" stroke="currentColor">
+                <g id="Group" transform="translate(0.000000, 0.500000)" stroke={props.color || 'currentColor'}>
                     <circle id="Oval" cx="11" cy="21.5" r="1.5"></circle>
                     <circle id="Oval" cx="23" cy="21.5" r="1.5"></circle>
                     <polyline

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

@@ -12,7 +12,7 @@ const CloseIcon = (props: SvgIconProps) => {
             {...props}
             data-testid="close"
         >
-            <g fill="none" stroke="#000000" strokeWidth="1">
+            <g fill="none" stroke={props.color || '#000'} strokeWidth="1">
                 <path strokeLinecap="round" d="M 0 0 L 12 12 M 0 12 L 12 0" />
             </g>
         </SvgIcon>

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

@@ -2,7 +2,7 @@
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 /**
  *
- * @param props { fill: color to be filled for icon, color: color of the tick icon}
+ * @param props { color: color to be filled for icon}
  * @returns ErrorIcon, can be used in Input field, when input field is in error state
  */
 const ErrorIcon = (props: SvgIconProps) => {
@@ -18,7 +18,7 @@ const ErrorIcon = (props: SvgIconProps) => {
         >
             <path
                 d="M17.07 2.92999C15.4338 1.29429 13.2811 0.276523 10.9786 0.0501185C8.67611 -0.176286 6.36637 0.402675 4.44291 1.68835C2.51945 2.97403 1.1013 4.88687 0.430089 7.10094C-0.241121 9.31502 -0.123857 11.6933 0.761901 13.8306C1.64766 15.9679 3.24711 17.732 5.28771 18.8222C7.32831 19.9125 9.68381 20.2614 11.9528 19.8096C14.2219 19.3578 16.2641 18.1332 17.7314 16.3445C19.1988 14.5557 20.0005 12.3136 20 9.99999C19.9994 7.34804 18.9455 4.80491 17.07 2.92999ZM9 5.37999C9 5.11477 9.10536 4.86041 9.29289 4.67288C9.48043 4.48534 9.73478 4.37999 10 4.37999C10.2652 4.37999 10.5196 4.48534 10.7071 4.67288C10.8946 4.86041 11 5.11477 11 5.37999V10.6C11 10.8652 10.8946 11.1196 10.7071 11.3071C10.5196 11.4946 10.2652 11.6 10 11.6C9.73478 11.6 9.48043 11.4946 9.29289 11.3071C9.10536 11.1196 9 10.8652 9 10.6V5.37999ZM10 15.51C9.74684 15.51 9.49936 15.4349 9.28887 15.2943C9.07837 15.1536 8.91431 14.9537 8.81743 14.7198C8.72055 14.4859 8.6952 14.2286 8.74459 13.9803C8.79398 13.732 8.91589 13.5039 9.0949 13.3249C9.27391 13.1459 9.50199 13.024 9.75028 12.9746C9.99858 12.9252 10.2559 12.9505 10.4898 13.0474C10.7237 13.1443 10.9236 13.3084 11.0643 13.5189C11.2049 13.7294 11.28 13.9768 11.28 14.23C11.28 14.5695 11.1451 14.895 10.9051 15.1351C10.665 15.3751 10.3395 15.51 10 15.51Z"
-                fill={props.fill || '#C81D1D'}
+                fill={props.color || '#C81D1D'}
             />
         </SvgIcon>
     );

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

@@ -2,22 +2,25 @@
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 /**
  *
- * @param props {fill: color to be filled for icon, color: color of the tick icon}
+ * @param props {stroke}
  */
 const HamburgerIcon = (props: SvgIconProps) => {
     return (
-        <SvgIcon viewBox="0 0 24 24" {...props} data-testid="hamburgerIcon" xmlns="http://www.w3.org/2000/svg">
+        <SvgIcon viewBox="0 0 24 18" {...props} data-testid="hamburgerIcon" xmlns="http://www.w3.org/2000/svg">
             <path
+                stroke={props.color}
                 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
+                stroke={props.color}
                 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
+                stroke={props.color}
                 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"

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

@@ -20,7 +20,7 @@ const SearchIcon = (props: SvgIconProps) => {
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M0 9.98777C0 4.47167 4.46598 0 9.97505 0C15.4841 0 19.9501 4.47167 19.9501 9.98777C19.9501 11.7568 19.49 13.4205 18.6829 14.8629L23.2366 19.4844C24.2593 20.5223 24.2537 22.1921 23.2241 23.2231C22.1755 24.273 20.4704 24.2567 19.442 23.1869L15.0315 18.5988C13.5485 19.4736 11.8192 19.9755 9.97505 19.9755C4.46598 19.9755 0 15.5039 0 9.98777ZM16.6388 17.42L20.8646 21.8159C21.1265 22.0884 21.5608 22.0926 21.8279 21.8251C22.0902 21.5625 22.0916 21.1372 21.8311 20.8728L17.5309 16.5087C17.2531 16.8311 16.9551 17.1355 16.6388 17.42ZM9.97505 1.97696C5.55644 1.97696 1.97444 5.56352 1.97444 9.98777C1.97444 14.412 5.55644 17.9986 9.97505 17.9986C11.7025 17.9986 13.2995 17.4515 14.6063 16.5208C15.3948 15.9594 16.0773 15.2583 16.6179 14.454C17.4753 13.1784 17.9757 11.6431 17.9757 9.98777C17.9757 5.56352 14.3937 1.97696 9.97505 1.97696Z"
-                fill="#5F5F5F"
+                fill={props.color || '#5F5F5F'}
             />
         </SvgIcon>
     );

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

@@ -1,10 +1,5 @@
 /* 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}
- * @returns SuccessIcon, can be used in Input field, when input field is in success state
- */
 const SuccessIcon = (props: SvgIconProps) => {
     return (
         <SvgIcon
@@ -17,7 +12,7 @@ const SuccessIcon = (props: SvgIconProps) => {
             {...props}
         >
             <g id="Check Circle">
-                <circle id="Ellipse 70" cx="10" cy="10" r="10" fill={props.fill || '#5BAC85'} />
+                <circle id="Ellipse 70" cx="10" cy="10" r="10" fill={props.color || '#5BAC85'} />
                 <g id="check 12px">
                     <g id="checkmark">
                         <path
@@ -25,7 +20,7 @@ const SuccessIcon = (props: SvgIconProps) => {
                             fillRule="evenodd"
                             clipRule="evenodd"
                             d="M15.8051 5.79289C16.1956 6.18342 16.1956 6.81658 15.8051 7.20711L8.80508 14.2071C8.61742 14.3948 8.36287 14.5001 8.09748 14.5C7.8321 14.4999 7.57765 14.3943 7.39018 14.2064L3.79218 10.6014C3.40203 10.2105 3.40265 9.57735 3.79355 9.18721C4.18445 8.79706 4.81762 8.79768 5.20776 9.18858L8.09866 12.0851L14.3909 5.79289C14.7814 5.40237 15.4146 5.40237 15.8051 5.79289Z"
-                            fill={props.color || 'white'}
+                            fill={props.fill || '#fff'}
                         />
                     </g>
                 </g>

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

@@ -20,7 +20,7 @@ const TrashIcon = (props: SvgIconProps) => {
                 fillRule="evenodd"
                 clipRule="evenodd"
                 d="M10 0C10.5523 0 11 0.447715 11 1V2.5H19C19.5523 2.5 20 2.94772 20 3.5C20 4.05228 19.5523 4.5 19 4.5H17.5V18C17.5 19.6569 16.1569 21 14.5 21H5.5C3.84315 21 2.5 19.6569 2.5 18V4.5H1C0.447715 4.5 0 4.05228 0 3.5C0 2.94772 0.447715 2.5 1 2.5H9V1C9 0.447715 9.44771 0 10 0ZM4.5 4.5V18C4.5 18.5523 4.94772 19 5.5 19H14.5C15.0523 19 15.5 18.5523 15.5 18V4.5H4.5ZM6.5 5.5C7.05228 5.5 7.5 5.94772 7.5 6.5V17C7.5 17.5523 7.05228 18 6.5 18C5.94772 18 5.5 17.5523 5.5 17V6.5C5.5 5.94772 5.94772 5.5 6.5 5.5ZM10 5.5C10.5523 5.5 11 5.94772 11 6.5V17C11 17.5523 10.5523 18 10 18C9.44771 18 9 17.5523 9 17V6.5C9 5.94772 9.44771 5.5 10 5.5ZM13.5 5.5C14.0523 5.5 14.5 5.94772 14.5 6.5V17C14.5 17.5523 14.0523 18 13.5 18C12.9477 18 12.5 17.5523 12.5 17V6.5C12.5 5.94772 12.9477 5.5 13.5 5.5Z"
-                fill={props.fill || '#252525'}
+                fill={props.color || '#252525'}
             />
         </SvgIcon>
     );