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

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

@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import NsDropdown from '../NsDropdown';
-import NsDropdownOption from '../NsDropdownOption';
+import type { Meta, StoryObj } from '@storybook/react';
+import { NsDropdown, NsDropdownOption } from '../';
+import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsDropdown;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
 
 export default {
     title: 'Components/NsDropdown',
-    decorators: [
-        (story) => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{story()}</div>,
-    ],
+    decorators: [withCenterDecorator],
     component: NsDropdown,
     argTypes: {
         type: { control: 'select', options: ['unfilled', 'outlined'] },
@@ -36,9 +38,9 @@ export default {
         selectedValue: '',
         selectedLabel: '',
     },
-} as ComponentMeta<typeof NsDropdown>;
+} as MetaStory;
 
-export const Dropdown: ComponentStory<typeof NsDropdown> = (args, context) => {
+const RenderStory = (args: any, context: any) => {
     const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
     const [selectedValue, setSelectedValue] = useState(args.selectedValue);
 
@@ -50,7 +52,6 @@ export const Dropdown: ComponentStory<typeof NsDropdown> = (args, context) => {
                 setSelectedLabel(option.label);
             }
         });
-        console.log('Selected:', value);
     };
 
     return (
@@ -61,3 +62,6 @@ export const Dropdown: ComponentStory<typeof NsDropdown> = (args, context) => {
         </NsDropdown>
     );
 };
+export const Dropdown: Story = {
+    render: RenderStory,
+};

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

@@ -1,13 +1,15 @@
 import React, { useState } from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import NsDropdown from '../NsDropdown';
-import NsDropdownOption from '../NsDropdownOption';
+import type { Meta, StoryObj } from '@storybook/react';
+import { NsDropdown, NsDropdownOption } from '../';
+import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
+
+type ComponentType = typeof NsDropdown;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
 
 export default {
     title: 'Components/NsDropdown',
-    decorators: [
-        (story) => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{story()}</div>,
-    ],
+    decorators: [withCenterDecorator],
     component: NsDropdown,
     argTypes: {
         type: { control: 'select', options: ['unfilled', 'outlined'] },
@@ -36,9 +38,9 @@ export default {
         closeOnMouseLeave: true,
         showListDivider: true,
     },
-} as ComponentMeta<typeof NsDropdown>;
+} as MetaStory;
 
-export const DropdownCountry: ComponentStory<typeof NsDropdown> = (args, context) => {
+const RenderStory = (args: any, context: any) => {
     const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
     const [selectedValue, setSelectedValue] = useState(args.selectedValue);
 
@@ -50,7 +52,6 @@ export const DropdownCountry: ComponentStory<typeof NsDropdown> = (args, context
                 setSelectedLabel(`${option.country} | ${option.label}`);
             }
         });
-        console.log('Selected:', value);
     };
 
     return (
@@ -61,3 +62,6 @@ export const DropdownCountry: ComponentStory<typeof NsDropdown> = (args, context
         </NsDropdown>
     );
 };
+export const DropdownCountry: Story = {
+    render: RenderStory,
+};

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
 import { NsFlag } from './';
 
 type ComponentType = typeof NsFlag;
@@ -9,7 +9,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsFlag',
     component: NsFlag,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
     argTypes: {
         color: { name: 'Color Variants' },
     },

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { render } from '../../../test-utils';
-import { NsIcon } from './';
+import { render, screen } from '../../../test-utils';
+import { NsIcon, NsIconNameType, NsIconVariants } from './';
 
 describe('NsIcon Component', () => {
     it('renders cartBadge icon with custom size and color', () => {
@@ -11,6 +11,13 @@ describe('NsIcon Component', () => {
         expect(svgIcon).toHaveClass('MuiSvgIcon-fontSizeMedium');
     });
 
+    it('renders with testId', () => {
+        Object.keys(NsIconVariants).forEach((iconName) => {
+            render(<NsIcon name={iconName as NsIconNameType} />);
+            const icon = screen.getByTestId(iconName);
+            expect(icon).toBeInTheDocument();
+        });
+    });
     it('renders with custom testId', () => {
         const { getByTestId } = render(<NsIcon name="cart" testId="custom-icon" />);
         const icon = getByTestId('custom-icon');

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

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
-import { NsIcon } from './';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { NsIcon, NsIconVariants } from './';
 
 type ComponentType = typeof NsIcon;
 type Story = StoryObj<ComponentType>;
@@ -9,25 +9,12 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsIcon',
     component: NsIcon,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
     argTypes: {
         size: { control: 'select', options: ['small', 'medium', 'large', 'xLarge'] },
         name: {
             control: 'select',
-            options: [
-                'arrowUp',
-                'arrowDown',
-                'cart',
-                'cartBadge',
-                'checkShield',
-                'checkVerified',
-                'error',
-                'infoFilled',
-                'infoOutlined',
-                'search',
-                'success',
-                'trash',
-            ],
+            options: Object.keys(NsIconVariants),
         },
         color: {
             control: 'select',

package/src/common/icon/NsIcon.tsx

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

package/src/common/icon/{IconMap.ts → NsIconVariants.ts}

@@ -1,5 +1,7 @@
 import ArrowDown from './icons/ArrowDown';
 import ArrowUp from './icons/ArrowUp';
+import ArrowLeft from './icons/ArrowLeft';
+import ArrowRight from './icons/ArrowRight';
 import Cart from './icons/Cart';
 import CartBadge from './icons/CartBadge';
 import InfoFilled from './icons/InfoFilled';
@@ -12,10 +14,15 @@ import TrashIcon from './icons/TrashIcon';
 import SearchIcon from './icons/SearchIcon';
 import SlashIcon from './icons/SlashIcon';
 import Home from './icons/home';
+import AlertErrorIcon from './icons/AlertErrorIcon';
+import WarningIcon from './icons/WarningIcon';
+import CloseIcon from './icons/CloseIcon';
 
 const IconVariants = {
     arrowDown: ArrowDown,
     arrowUp: ArrowUp,
+    arrowLeft: ArrowLeft,
+    arrowRight: ArrowRight,
     cart: Cart,
     cartBadge: CartBadge,
     checkShield: CheckShield,
@@ -28,6 +35,9 @@ const IconVariants = {
     trash: TrashIcon,
     slash: SlashIcon,
     home: Home,
+    alertError: AlertErrorIcon,
+    warning: WarningIcon,
+    close: CloseIcon
 };
 
 export default IconVariants;

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

@@ -0,0 +1,36 @@
+/* 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 ErrorIcon, can be used in Input field, when input field is in error state
+ */
+const AlertErrorIcon = (props: SvgIconProps) => {
+    return (
+        <SvgIcon
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            data-testid="alertError"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            <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,
+                        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,
+                    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>
+                </g>
+            </g>
+        </SvgIcon>
+    );
+};
+
+export default AlertErrorIcon;

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

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

package/src/common/{carousal/LeftChevron.tsx → icon/icons/ArrowLeft.tsx}

@@ -1,11 +1,13 @@
 import { useTheme } from '@mui/material/styles';
+import { SvgIconProps, SvgIcon } from '@mui/material';
 
-const LeftChevron = () => {
+const ArrowLeft = (props: SvgIconProps) => {
     const { palette } = useTheme();
     const strokeColor = palette.primary.main;
     return (
-        <svg
-            data-testid="prev-chevron"
+        <SvgIcon
+            {...props}
+            data-testid="arrowLeft"
             viewBox="0 0 24 24"
             preserveAspectRatio="xMidYMid meet"
             focusable="false"
@@ -28,7 +30,7 @@ const LeftChevron = () => {
                     ></polyline>
                 </g>
             </g>
-        </svg>
+        </SvgIcon>
     );
 };
-export default LeftChevron;
+export default ArrowLeft;

package/src/common/{carousal/RightChevron.tsx → icon/icons/ArrowRight.tsx}

@@ -1,12 +1,12 @@
 import { useTheme } from '@mui/material/styles';
 
-export const RightChevron = () => {
+export const ArrowRight = () => {
     const { palette } = useTheme();
     const strokeColor = palette.primary.main;
 
     return (
         <svg
-            data-testid="next-chevron"
+            data-testid="arrowRight"
             viewBox="0 0 24 24"
             preserveAspectRatio="xMidYMid meet"
             focusable="false"
@@ -33,4 +33,4 @@ export const RightChevron = () => {
     );
 };
 
-export default RightChevron;
+export default ArrowRight;

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

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

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

@@ -4,7 +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}>
+        <SvgIcon
+            viewBox="0 0 20 20"
+            preserveAspectRatio="xMidYMid meet"
+            focusable="false"
+            {...props}
+            data-testid="cart"
+        >
             <g
                 id="cart-icon"
                 fill="none"

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

@@ -4,7 +4,13 @@ import { SvgIconProps, SvgIcon } from '@mui/material';
 
 const CartBadge = (props: SvgIconProps) => {
     return (
-        <SvgIcon viewBox="0 0 30 30" preserveAspectRatio="xMidYMid meet" focusable="false" {...props}>
+        <SvgIcon
+            viewBox="0 0 30 30"
+            preserveAspectRatio="xMidYMid meet"
+            focusable="false"
+            {...props}
+            data-testid="cartBadge"
+        >
             <g
                 id="cart-icon-badge"
                 fill="none"

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

@@ -4,7 +4,13 @@ import { SvgIconProps, SvgIcon } from '@mui/material';
 
 const CheckShield = (props: SvgIconProps) => {
     return (
-        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <SvgIcon
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+            data-testid="checkShield"
+        >
             <path
                 d="M20.3941 1H2.7631C2.29568 1.00061 1.84758 1.18656 1.51707 1.51707C1.18656 1.84759 1.00061 2.29568 1 2.7631V9.22751C1 19.0855 9.35492 22.3543 11.0311 22.9096C11.3861 23.0301 11.7711 23.0301 12.1261 22.9096C13.8014 22.3543 22.1572 19.0864 22.1572 9.22751V2.7631C22.1566 2.29568 21.9706 1.84758 21.6401 1.51707C21.3096 1.18656 20.8615 1.00061 20.3941 1ZM17.0358 8.69031L10.5705 14.8612C10.4064 15.0176 10.1885 15.1048 9.96185 15.1048C9.7352 15.1048 9.51725 15.0176 9.3532 14.8612L6.12142 11.7757C6.03753 11.6958 5.97021 11.6002 5.9233 11.4943C5.87639 11.3883 5.85082 11.2742 5.84805 11.1584C5.84528 11.0425 5.86536 10.9273 5.90715 10.8193C5.94893 10.7112 6.01161 10.6124 6.09158 10.5286C6.17156 10.4448 6.26726 10.3776 6.37324 10.3308C6.47921 10.2839 6.59338 10.2585 6.7092 10.2558C6.82502 10.2531 6.94023 10.2733 7.04825 10.3152C7.15627 10.3571 7.25497 10.4199 7.33872 10.4999L9.96185 13.0042L15.8185 7.41448C15.9022 7.33443 16.0009 7.27167 16.1089 7.22978C16.217 7.1879 16.3322 7.16772 16.448 7.17038C16.5638 7.17305 16.678 7.19852 16.7839 7.24533C16.8899 7.29214 16.9856 7.35938 17.0656 7.4432C17.1456 7.52702 17.2083 7.62578 17.25 7.73384C17.2918 7.84189 17.3119 7.95712 17.3091 8.07294C17.3064 8.18876 17.2808 8.3029 17.2339 8.40883C17.187 8.51477 17.1197 8.61042 17.0358 8.69031H17.0358Z"
                 fill={props.color}

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

@@ -4,7 +4,13 @@ import { SvgIconProps, SvgIcon } from '@mui/material';
 
 const CheckVerified = (props: SvgIconProps) => {
     return (
-        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <SvgIcon
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+            data-testid="checkVerified"
+        >
             <path
                 d="M22.4852 9.30165C22.0811 8.8802 21.6632 8.44451 21.5053 8.06271C21.3601 7.71198 21.3514 7.13107 21.3429 6.5692C21.3271 5.52361 21.3092 4.33855 20.4853 3.51468C19.6614 2.69081 18.4764 2.67292 17.4308 2.65712C16.8689 2.64865 16.288 2.63986 15.9373 2.49473C15.5556 2.33684 15.1198 1.91895 14.6983 1.51475C13.9581 0.804722 13.1188 0 12 0C10.8812 0 10.042 0.804722 9.30165 1.51475C8.8802 1.91895 8.44451 2.33684 8.06271 2.49473C7.71198 2.63986 7.13107 2.64865 6.5692 2.65712C5.52361 2.67292 4.33855 2.69081 3.51468 3.51468C2.69081 4.33855 2.67292 5.52361 2.65712 6.5692C2.64865 7.13107 2.63986 7.71198 2.49473 8.06271C2.33684 8.44441 1.91895 8.8802 1.51475 9.30165C0.804722 10.0419 0 10.8812 0 12C0 13.1188 0.804722 13.958 1.51475 14.6983C1.91895 15.1198 2.33684 15.5555 2.49473 15.9373C2.63986 16.288 2.64865 16.8689 2.65712 17.4308C2.67292 18.4764 2.69081 19.6614 3.51468 20.4853C4.33855 21.3092 5.52361 21.3271 6.5692 21.3429C7.13107 21.3514 7.71198 21.3601 8.06271 21.5053C8.44441 21.6632 8.8802 22.0811 9.30165 22.4852C10.0419 23.1953 10.8812 24 12 24C13.1188 24 13.958 23.1953 14.6983 22.4852C15.1198 22.0811 15.5555 21.6632 15.9373 21.5053C16.288 21.3601 16.8689 21.3514 17.4308 21.3429C18.4764 21.3271 19.6614 21.3092 20.4853 20.4853C21.3092 19.6614 21.3271 18.4764 21.3429 17.4308C21.3514 16.8689 21.3601 16.288 21.5053 15.9373C21.6632 15.5556 22.0811 15.1198 22.4852 14.6983C23.1953 13.9581 24 13.1188 24 12C24 10.8812 23.1953 10.042 22.4852 9.30165ZM17.3061 10.0486L11.0203 16.0486C10.8609 16.2008 10.6489 16.2857 10.4285 16.2857C10.2081 16.2857 9.99618 16.2008 9.83674 16.0486L6.69392 13.0486C6.61244 12.9709 6.54708 12.8779 6.50155 12.7749C6.45603 12.672 6.43123 12.561 6.42859 12.4485C6.42595 12.3359 6.4455 12.224 6.48614 12.119C6.52678 12.014 6.58771 11.918 6.66544 11.8366C6.74318 11.7551 6.83619 11.6898 6.93918 11.6443C7.04217 11.5988 7.15311 11.5741 7.26567 11.5715C7.37823 11.5688 7.49019 11.5884 7.59517 11.6291C7.70016 11.6698 7.79609 11.7308 7.87751 11.8085L10.4285 14.2436L16.1225 8.80852C16.2039 8.73076 16.2998 8.6698 16.4048 8.62912C16.5098 8.58844 16.6218 8.56885 16.7343 8.57145C16.8469 8.57405 16.9578 8.59881 17.0608 8.64429C17.1638 8.68978 17.2568 8.75511 17.3346 8.83656C17.4123 8.918 17.4732 9.01397 17.5139 9.11896C17.5545 9.22396 17.5741 9.33593 17.5714 9.44849C17.5688 9.56104 17.544 9.67198 17.4984 9.77495C17.4529 9.87792 17.3876 9.97091 17.3061 10.0486Z"
                 fill={props.color}

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

@@ -0,0 +1,22 @@
+/* eslint-disable max-len */
+
+import { SvgIconProps, SvgIcon } from '@mui/material';
+
+const CloseIcon = (props: SvgIconProps) => {
+    return (
+        <SvgIcon
+            viewBox="0 0 12 12"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            {...props}
+            data-testid="close"
+        >
+            <g fill="none" stroke="#000000" strokeWidth="1">
+                <path strokeLinecap="round" d="M 0 0 L 12 12 M 0 12 L 12 0" />
+            </g>
+        </SvgIcon>
+    );
+};
+
+export default CloseIcon;

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

@@ -11,7 +11,7 @@ const ErrorIcon = (props: SvgIconProps) => {
             width="20"
             height="20"
             viewBox="0 0 20 20"
-            data-testid="error-icon"
+            data-testid="error"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             {...props}

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

@@ -4,7 +4,7 @@ import { SvgIconProps, SvgIcon } from '@mui/material';
 
 const InfoFilled = (props: SvgIconProps) => {
     return (
-        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} data-testid="infoFilled">
             <path
                 d="M12 0C9.62663 0 7.30655 0.703788 5.33316 2.02236C3.35977 3.34094 1.8217 5.21508 0.913451 7.4078C0.00519941 9.60051 -0.232441 12.0133 0.230582 14.3411C0.693605 16.6689 1.83649 18.807 3.51472 20.4853C5.19295 22.1635 7.33115 23.3064 9.65892 23.7694C11.9867 24.2324 14.3995 23.9948 16.5922 23.0865C18.7849 22.1783 20.6591 20.6402 21.9776 18.6668C23.2962 16.6934 24 14.3734 24 12C23.9963 8.81853 22.7309 5.76842 20.4812 3.51878C18.2316 1.26914 15.1815 0.00367709 12 0ZM11.9999 5.53846C12.2737 5.53846 12.5414 5.61967 12.7691 5.77181C12.9968 5.92395 13.1743 6.1402 13.2791 6.39321C13.3839 6.64621 13.4113 6.92461 13.3579 7.1932C13.3045 7.46179 13.1726 7.7085 12.979 7.90215C12.7853 8.09579 12.5386 8.22766 12.27 8.28109C12.0014 8.33451 11.723 8.30709 11.47 8.20229C11.217 8.0975 11.0008 7.92002 10.8486 7.69233C10.6965 7.46463 10.6153 7.19693 10.6153 6.92308C10.6153 6.74125 10.6511 6.56119 10.7207 6.39321C10.7903 6.22522 10.8922 6.07258 11.0208 5.944C11.1494 5.81543 11.302 5.71344 11.47 5.64386C11.638 5.57427 11.8181 5.53846 11.9999 5.53846H11.9999ZM12.9231 18.4615H12C11.8788 18.4616 11.7587 18.4378 11.6467 18.3914C11.5347 18.345 11.4329 18.2771 11.3471 18.1913C11.2614 18.1056 11.1934 18.0038 11.147 17.8918C11.1007 17.7798 11.0769 17.6597 11.0769 17.5385V12C10.8321 12 10.5973 11.9027 10.4242 11.7296C10.2511 11.5565 10.1538 11.3217 10.1538 11.0769C10.1538 10.8321 10.2511 10.5973 10.4242 10.4242C10.5973 10.2511 10.8321 10.1538 11.0769 10.1538H12C12.1212 10.1538 12.2413 10.1776 12.3533 10.224C12.4654 10.2703 12.5671 10.3383 12.6529 10.4241C12.7386 10.5098 12.8066 10.6116 12.853 10.7236C12.8993 10.8356 12.9232 10.9557 12.9231 11.0769V16.6154C13.1679 16.6154 13.4027 16.7126 13.5758 16.8857C13.7489 17.0589 13.8462 17.2936 13.8462 17.5385C13.8462 17.7833 13.7489 18.0181 13.5758 18.1912C13.4027 18.3643 13.1679 18.4615 12.9231 18.4615Z"
                 fill={props.color}

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

@@ -4,7 +4,13 @@ import { SvgIconProps, SvgIcon } from '@mui/material';
 
 const InfoOutlined = (props: SvgIconProps) => {
     return (
-        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <SvgIcon
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+            data-testid="infoOutlined"
+        >
             <g clipPath="url(#clip0_12033_52181)">
                 <path
                     d="M12 2C14.67 2 17.18 3.04 19.07 4.93C20.96 6.82 22 9.33 22 12C22 13.98 21.42 15.91 20.31 17.56C19.21 19.21 17.66 20.48 15.82 21.24C14.6 21.75 13.31 22 11.99 22C11.34 22 10.68 21.94 10.04 21.81C8.09001 21.42 6.32001 20.48 4.92001 19.07C3.52001 17.67 2.57001 15.9 2.18001 13.95C1.79001 12 1.99001 10.01 2.75001 8.17C3.51001 6.34 4.78001 4.78 6.43001 3.68C8.08001 2.58 10 2 11.98 1.99L12 2ZM11.98 -0.0100002C9.61001 -0.0100002 7.29001 0.69 5.31001 2.01C3.36001 3.34 1.82001 5.22 0.910006 7.41C5.48363e-06 9.6 -0.229994 12.01 0.230006 14.34C0.690006 16.67 1.84001 18.81 3.51001 20.48C5.19001 22.16 7.33001 23.3 9.65001 23.76C10.42 23.91 11.21 23.99 11.99 23.99C13.56 23.99 15.12 23.68 16.58 23.08C18.77 22.17 20.65 20.63 21.97 18.66C23.29 16.69 23.99 14.37 23.99 11.99C23.99 8.81 22.72 5.76 20.47 3.51C18.23 1.27 15.18 -2.29105e-07 12 -2.29105e-07L11.98 -0.0100002Z"

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

@@ -11,7 +11,7 @@ const SearchIcon = (props: SvgIconProps) => {
             width="24"
             height="24"
             viewBox="0 0 24 24"
-            data-testid="search-icon"
+            data-testid="search"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             {...props}

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

@@ -2,13 +2,13 @@ import { SvgIconProps, SvgIcon } from '@mui/material';
 
 const SlashIcon = (props: SvgIconProps) => {
     return (
-        <SvgIcon viewBox="0 0 2 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+        <SvgIcon viewBox="0 0 2 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} data-testid="slash">
             <path
                 d="M1 1L1 11L0.999999 21"
                 stroke={props.color}
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
             />
         </SvgIcon>
     );

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

@@ -11,7 +11,7 @@ const SuccessIcon = (props: SvgIconProps) => {
             width="20"
             height="20"
             viewBox="0 0 20 20"
-            data-testid="success-icon"
+            data-testid="success"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             {...props}

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

@@ -6,13 +6,12 @@ import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
  * @returns returns TrashIcon, used for marking delete symbol
  */
 const TrashIcon = (props: SvgIconProps) => {
-    console.log('trash props', props);
     return (
         <SvgIcon
             width="20"
             height="21"
             viewBox="0 0 20 21"
-            data-testid="trash-icon"
+            data-testid="trash"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
             {...props}

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

@@ -0,0 +1,36 @@
+/* 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 ErrorIcon, can be used in Input field, when input field is in error state
+ */
+const WarningIcon = (props: SvgIconProps) => {
+    return (
+        <SvgIcon
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            data-testid="warning"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+        >
+            <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,
+                    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,
+                    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>
+                </g>
+            </g>
+        </SvgIcon>
+    );
+};
+
+export default WarningIcon;

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

@@ -1,11 +1,12 @@
+/* eslint-disable max-len */
 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}>
+        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} data-testid="home">
             <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M23.77 12.4971C23.8226 12.577 23.8694 12.6606 23.91 12.7471C23.9626 12.8911 23.9864 13.044 23.98 13.1971C23.9839 13.3413 23.9566 13.4845 23.9 13.6171C23.8531 13.7514 23.7781 13.8741 23.68 13.9771C23.5815 14.0833 23.4624 14.1683 23.33 14.2271C23.206 14.2775 23.0738 14.3046 22.94 14.3071C22.7944 14.3048 22.651 14.2706 22.52 14.2071C22.3902 14.1445 22.2745 14.056 22.18 13.9471L12.28 3.33713C12.2277 3.27493 12.1581 3.22968 12.08 3.20713C12.0087 3.18275 11.9313 3.18275 11.86 3.20713C11.803 3.22861 11.7517 3.26281 11.71 3.30713L1.8 13.9271C1.70627 14.0302 1.59203 14.1126 1.46459 14.169C1.33716 14.2254 1.19935 14.2545 1.06 14.2545C0.920651 14.2545 0.78284 14.2254 0.655406 14.169C0.527971 14.1126 0.413727 14.0302 0.32 13.9271C0.217842 13.8273 0.136296 13.7084 0.08 13.5771C0.0284697 13.4396 0.00139518 13.294 0 13.1471C0.0013101 13.0035 0.0284068 12.8612 0.08 12.7271C0.136065 12.5928 0.217559 12.4705 0.32 12.3671L10.26 1.77713C10.6011 1.40957 11.0475 1.15652 11.538 1.05268C12.0286 0.94884 12.5393 0.999295 13 1.19713C13.2985 1.33692 13.5643 1.53794 13.78 1.78713L15.33 3.48713V3.10713C15.3302 2.82197 15.4372 2.54724 15.63 2.33713C15.7244 2.23535 15.8389 2.15434 15.9663 2.09925C16.0937 2.04415 16.2312 2.01619 16.37 2.01713H20C20.1486 2.0007 20.2989 2.01779 20.44 2.06713C20.5669 2.12598 20.6821 2.20728 20.78 2.30713C20.8776 2.41428 20.9525 2.54016 21 2.67713C21.0449 2.80898 21.0652 2.94794 21.06 3.08713V9.56713L23.77 12.4971ZM19 7.33713V4.17713H17.42V5.67713L19 7.33713ZM19.28 13.94C19.4773 13.7598 19.7329 13.6569 20 13.65C20.2667 13.6586 20.5217 13.7613 20.72 13.94C20.8169 14.0298 20.8951 14.1378 20.95 14.258C21.0049 14.3781 21.0355 14.508 21.04 14.64V22.02C21.0355 22.152 21.0049 22.2819 20.95 22.402C20.8951 22.5222 20.8169 22.6302 20.72 22.72C20.5232 22.8997 20.2665 22.9996 20 23H14.22C13.9504 23.0001 13.6903 22.9004 13.49 22.72C13.3949 22.6294 13.3185 22.5209 13.2653 22.4008C13.2121 22.2807 13.1831 22.1513 13.18 22.02V16.66C13.18 16.6134 13.1691 16.5675 13.1483 16.5258C13.1275 16.4842 13.0972 16.4479 13.06 16.42C13.0207 16.3807 12.9739 16.3498 12.9223 16.3292C12.8707 16.3086 12.8155 16.2986 12.76 16.3H11.3C11.2443 16.2974 11.1887 16.3068 11.137 16.3275C11.0852 16.3482 11.0385 16.3797 11 16.42C10.9597 16.4426 10.9252 16.4743 10.8992 16.5124C10.8732 16.5506 10.8564 16.5943 10.85 16.64V22.04C10.851 22.173 10.8229 22.3046 10.7676 22.4255C10.7123 22.5464 10.6312 22.6538 10.53 22.74C10.4345 22.8321 10.3217 22.9043 10.1981 22.9523C10.0745 23.0004 9.94256 23.0234 9.80997 23.02H3.99997C3.85815 23.0235 3.71703 22.9988 3.58484 22.9473C3.45265 22.8958 3.33202 22.8186 3.22997 22.72C3.13304 22.6302 3.05485 22.5222 2.99993 22.402C2.945 22.2819 2.91443 22.152 2.90997 22.02V14.64C2.91311 14.5063 2.94305 14.3745 2.99802 14.2526C3.05298 14.1306 3.13186 14.0209 3.22997 13.93C3.43312 13.7554 3.69211 13.6594 3.95997 13.6594C4.22783 13.6594 4.48683 13.7554 4.68997 13.93C4.78627 14.0218 4.86329 14.1318 4.91652 14.2538C4.96975 14.3757 4.99812 14.507 4.99997 14.64V21.09H8.76997V16.68C8.7711 16.3671 8.83749 16.0578 8.9649 15.772C9.09232 15.4861 9.27797 15.23 9.50997 15.02C9.74648 14.8043 10.0212 14.6348 10.32 14.52C10.622 14.4001 10.9451 14.3423 11.27 14.35H12.73C13.3796 14.3465 14.0071 14.5854 14.49 15.02C14.7181 15.2289 14.9014 15.482 15.0286 15.7639C15.1558 16.0459 15.2243 16.3507 15.23 16.66V21.07H18.96V14.64C18.9609 14.5073 18.9899 14.3764 19.045 14.2557C19.1002 14.1351 19.1803 14.0275 19.28 13.94Z"
                 fill={props?.color}
             />

package/src/common/icon/index.ts

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

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

@@ -1,22 +1,9 @@
 import { FoundationTheme } from '@nuskin/foundation-theme';
+import { NsIconVariants } from '.';
 
 export type NsIconSizeType = 'small' | 'medium' | 'large' | 'xLarge';
 
-export type NsIconNameType =
-    | 'arrowDown'
-    | 'arrowUp'
-    | 'cart'
-    | 'cartBadge'
-    | 'checkShield'
-    | 'checkVerified'
-    | 'error'
-    | 'infoFilled'
-    | 'infoOutlined'
-    | 'search'
-    | 'success'
-    | 'trash'
-    | 'slash'
-    | 'home';
+export type NsIconNameType = keyof typeof NsIconVariants;
 export type NsIconProps = {
     name: NsIconNameType;
     size?: NsIconSizeType;

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
 import { NsImage } from './';
 
 type ComponentType = typeof NsImage;
@@ -9,7 +9,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsImage',
     component: NsImage,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
     args: {
         src: 'https://media.nuskin.com/m/42911c8b05600476/webimage-brand-ageloc-optweb.png',
         width: 300,

package/src/common/image/NsImage.tsx

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