@nuskin/foundation-ui-components 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.5.0",
+    "version": "1.6.0",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/autocomplete/NsAutocomplete.stories.tsx

@@ -47,7 +47,7 @@ export default {
             },
         },
         iconStart: <NsIcon name="search" />,
-        iconEnd: <NsIcon name="close" size="small" />,
+        iconEnd: <NsIcon name="roundedClose" size="small" colorOverride="#F5F5F5" />,
         placeholder: 'search',
     },
 } as MetaStory;
@@ -93,7 +93,7 @@ const RenderAutocomplete = (args: NsAutocompleteProps) => {
                 OptionsUI={OptionUiComponent}
                 iconEnd={
                     <IconButton onClick={onInputClear}>
-                        <NsIcon name="close" size="small" />
+                        <NsIcon name="roundedClose" size="xLarge" colorOverride="#F5F5F5" />
                     </IconButton>
                 }
                 value={selectedOption}

package/src/common/icon/NsIconVariants.ts

@@ -21,6 +21,7 @@ import UserIcon from './icons/UserIcon';
 import HamburgerIcon from './icons/HamburgerIcon';
 import UserOutline from './icons/UserOutline';
 import Check from './icons/Check';
+import RoundedClose from './icons/RoundedClose';
 import ChevronRight from './icons/ChevronRight';
 
 const IconVariants = {
@@ -47,6 +48,7 @@ const IconVariants = {
     userIcon: UserIcon,
     userOutline: UserOutline,
     warning: WarningIcon,
+    roundedClose: RoundedClose,
     chevronRight: ChevronRight,
 };
 

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

@@ -0,0 +1,28 @@
+/* eslint-disable max-len */
+
+import { SvgIconProps, SvgIcon } from '@mui/material';
+
+const RoundedClose = (props: SvgIconProps) => {
+    return (
+        <SvgIcon
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            {...props}
+            data-testid="roundedClose"
+        >
+            <path
+                d="M4.4443 18.3147C6.08879 19.4135 8.02219 20 10 20C12.6505 19.9946 15.1909 18.9393 17.0651 17.0651C18.9393 15.1909 19.9946 12.6505 20 10C20 8.02219 19.4135 6.08879 18.3147 4.4443C17.2159 2.79981 15.6541 1.51809 13.8268 0.761209C11.9996 0.00433284 9.98891 -0.1937 8.0491 0.192152C6.10929 0.578004 4.32746 1.53041 2.92893 2.92894C1.53041 4.32746 0.578004 6.10929 0.192152 8.0491C-0.1937 9.98891 0.00433242 11.9996 0.761209 13.8268C1.51809 15.6541 2.79981 17.2159 4.4443 18.3147Z"
+                fill={props.color}
+            />
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M6.18907 6.11091C6.5796 5.72039 7.21276 5.72039 7.60329 6.11091L10.0782 8.58579L12.553 6.11091C12.9436 5.72039 13.5767 5.72039 13.9672 6.11091C14.3578 6.50144 14.3578 7.1346 13.9672 7.52513L11.4924 10L13.9672 12.4749C14.3578 12.8654 14.3578 13.4986 13.9672 13.8891C13.5767 14.2796 12.9436 14.2796 12.553 13.8891L10.0782 11.4142L7.60329 13.8891C7.21276 14.2796 6.5796 14.2796 6.18908 13.8891C5.79855 13.4986 5.79855 12.8654 6.18907 12.4749L8.66395 10L6.18907 7.52513C5.79855 7.1346 5.79855 6.50144 6.18907 6.11091Z"
+                fill="#252525"
+            />
+        </SvgIcon>
+    );
+};
+
+export default RoundedClose;