@nuskin/foundation-ui-components 1.4.2-export-updates.2 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.4.2-export-updates.2",
+    "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": {
@@ -46,7 +46,7 @@
         "@mui/material": "5.4.2",
         "@mui/utils": "^5.14.1",
         "@next/font": "13.2.4",
-        "@nuskin/foundation-theme": "^1.0.0",
+        "@nuskin/foundation-theme": "^1.0.1",
         "framer-motion": "^10.8.5",
         "next": "13.2.4",
         "react": "18.2.0",

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/breadcrumb/NsBreadcrumb.spec.tsx

@@ -14,7 +14,7 @@ describe('Breadcrumb', () => {
     });
 
     it('2. renders breadcrumb items with navigation icons', () => {
-        render(<NsBreadcrumb items={breadcrumbItems} iconVisibility />);
+        render(<NsBreadcrumb items={breadcrumbItems} />);
         expect(getByText('Home')).toBeInTheDocument();
         expect(getByText('Products')).toBeInTheDocument();
         expect(getByText('Shirts')).toBeInTheDocument();
@@ -22,7 +22,7 @@ describe('Breadcrumb', () => {
     });
 
     it('3. renders breadcrumb items with navigation icons', () => {
-        render(<NsBreadcrumb items={dummyItems} iconVisibility />);
+        render(<NsBreadcrumb items={dummyItems} />);
         expect(getByText('Home')).toBeInTheDocument();
     });
 });

package/src/common/breadcrumb/NsBreadcrumb.stories.tsx

@@ -17,7 +17,7 @@ export default {
     component: NsBreadcrumb,
     decorators: [withCenterDecorator],
     argTypes: {
-        iconVisibility: { control: 'boolean' },
+        underline: { control: 'boolean' },
     },
     args: {
         items: [
@@ -26,14 +26,14 @@ export default {
             { label: 'Call to action', href: '/products/shirts' },
             { label: 'Product', href: '' },
         ],
-        iconVisibility: false,
+        underline: true,
+        separator: 'chevronRight',
     },
 } as MetaStory;
 
 export const Breadcrumb: Story = {};
 export const WithIcons: Story = {
     args: {
-        items: breadcrumbItems,
-        iconVisibility: true,
+        items: breadcrumbItems
     },
 };

package/src/common/breadcrumb/NsBreadcrumb.styled.tsx

@@ -1,4 +1,5 @@
 import { styled } from '@nuskin/foundation-theme';
+import { NsLink } from '../link';
 
 export const BreadcrumbContainer = styled.nav`
     margin-bottom: 10px;
@@ -27,3 +28,9 @@ export const BreadcrumbItem = styled.li`
         transform: rotate(20deg);
     }
 `;
+
+export const BreadcrumbStyledLink = styled(NsLink)<{ underlineVisibility?: boolean }>`
+    text-decoration: ${({ underlineVisibility }) => (underlineVisibility ? 'underline' : 'none')};
+    text-underline-offset: 4px;
+    font-weight: 700;
+`;

package/src/common/breadcrumb/NsBreadcrumb.tsx

@@ -6,8 +6,8 @@
 
 import { PropsWithChildren } from 'react';
 
-import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbList } from './NsBreadcrumb.styled';
-import { NsTypography, NsLink, NsIcon } from '../';
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbList, BreadcrumbStyledLink } from './NsBreadcrumb.styled';
+import { NsTypography, NsIcon } from '../';
 import { NsBreadcrumbProps, ItemProps } from './types.d';
 import { useTheme } from '@mui/material/styles';
 import { ColorUtils } from '@nuskin/foundation-theme';
@@ -15,7 +15,7 @@ import { ColorUtils } from '@nuskin/foundation-theme';
 const { color } = ColorUtils;
 
 const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>) => {
-    const { items, iconVisibility } = props;
+    const { items, underline = true, separator = 'chevronRight' } = props;
 
     const theme = useTheme();
     const neutral80 = color('neutral', '80')({ theme });
@@ -25,17 +25,21 @@ const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>) => {
         if (item?.href) {
             return (
                 <NsTypography variant="h6" colorOverride={neutral60}>
-                    <NsLink href={item.href} underlineOnHover>
-                        {iconVisibility && item.icon ? (
-                            <NsIcon name={item.icon} size="small" testId="nav-icon" colorOverride={neutral60} />
+                    <BreadcrumbStyledLink
+                        underlineVisibility={underline}
+                        href={item.href}
+                        underlineOnHover={!underline}
+                    >
+                        {item.icon ? (
+                            <NsIcon name={item.icon} size="medium" testId="nav-icon" colorOverride={neutral60} />
                         ) : null}
                         {item.label}
-                    </NsLink>
+                    </BreadcrumbStyledLink>
                 </NsTypography>
             );
         } else {
             return (
-                <NsTypography variant="h6" colorOverride={neutral80}>
+                <NsTypography variant="h6" weight="bold" colorOverride={neutral80}>
                     {item.label}
                 </NsTypography>
             );
@@ -49,7 +53,12 @@ const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>) => {
                     <BreadcrumbItem key={item.label}>
                         {getLabel(item)}
                         {index !== items.length - 1 ? (
-                            <NsIcon className="slashIcon" name={'slash'} size="small" colorOverride={neutral60} />
+                            <NsIcon
+                                className={separator === 'slash' && 'slashIcon'}
+                                name={separator}
+                                size="medium"
+                                colorOverride={neutral80}
+                            />
                         ) : null}
                     </BreadcrumbItem>
                 ))}

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

@@ -3,7 +3,8 @@ import { NsIconNameType } from '../icon';
 
 export type NsBreadcrumbProps = {
     items?: ItemProps[];
-    iconVisibility?: boolean;
+    underline?: boolean;
+    separator?: 'chevronRight' | 'slash';
 };
 
 export type ItemProps = {

package/src/common/icon/NsIconVariants.ts

@@ -21,6 +21,8 @@ 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 = {
     arrowDown: ArrowDown,
@@ -46,6 +48,8 @@ const IconVariants = {
     userIcon: UserIcon,
     userOutline: UserOutline,
     warning: WarningIcon,
+    roundedClose: RoundedClose,
+    chevronRight: ChevronRight,
 };
 
 export default IconVariants;

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

@@ -0,0 +1,26 @@
+import { SvgIcon, SvgIconProps } from '@mui/material';
+
+export const ChevronRight = (props: SvgIconProps) => {
+    return (
+        <SvgIcon
+            {...props}
+            data-testid="chevronRight"
+            viewBox="0 0 18 18" 
+            fill="none" 
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g id="arrow-right">
+                <path
+                    id="icon"
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                    // eslint-disable-next-line max-len
+                    d="M12.1553 8.46967C12.4482 8.76256 12.4482 9.23744 12.1553 9.53033L6.90533 14.7803C6.61244 15.0732 6.13756 15.0732 5.84467 14.7803C5.55178 14.4874 5.55178 14.0126 5.84467 13.7197L10.5643 9L5.84467 4.28033C5.55178 3.98744 5.55178 3.51256 5.84467 3.21967C6.13756 2.92678 6.61244 2.92678 6.90533 3.21967L12.1553 8.46967Z"
+                    fill={props.color}
+                />
+            </g>
+        </SvgIcon>
+    );
+};
+
+export default 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;

package/src/common/index.ts

@@ -1,37 +1,36 @@
-export { NsAccordion, NsAccordionItem, NsAccordionHeader } from './accordion';
+export * from './accordion';
+export * from './alert';
+export * from './auth-dropdown';
+export * from './autocomplete';
+export * from './banner';
 
-export { NsAlert } from './alert';
-export { NsAuthDropdown } from './auth-dropdown';
-export { NsAutocomplete } from './autocomplete';
-export { NsBanner } from './banner';
-
-export { NsBrandComponent } from './brand-components';
-export { NsBreadcrumb } from './breadcrumb';
-export { NsButton } from './button';
-export { NsBgCard } from './card';
-export { NsCarousal } from './carousal';
-export { NsCartIcon } from './cart-icon';
-export { NsCheckbox } from './checkbox';
+export * from './brand-components';
+export * from './breadcrumb';
+export * from './button';
+export * from './card';
+export * from './carousal';
+export * from './cart-icon';
+export * from './checkbox';
 export * from './common.types.d';
-export { NsColumnControl } from './column-control';
-export { NsDropdown } from './dropdown';
-export { NsEmailSimple } from './email-simple';
-export { NsFlag } from './flag';
+export * from './column-control';
+export * from './dropdown';
+export * from './email-simple';
+export * from './flag';
 export * from './hooks';
-export { NsIcon } from './icon';
-export { NsImage } from './image';
-export { NsInputField } from './input';
-export { NsLabel } from './label';
-export { NsLink } from './link';
-export { NsModal } from './modal';
-export { NsNavProductCard } from './nav-product-card';
-export { NsNavTab } from './nav-tab';
-export { NsProgress } from './progress';
-export { NsRadioGroup } from './radiogroup';
-export { NsSelect } from './select';
-export { NsSpinner } from './spinner';
-export { NsTable } from './table';
-export { NsTextStrip } from './text-strip';
+export * from './icon';
+export * from './image';
+export * from './input';
+export * from './label';
+export * from './link';
+export * from './modal';
+export * from './nav-product-card';
+export * from './nav-tab';
+export * from './progress';
+export * from './radiogroup';
+export * from './select';
+export * from './spinner';
+export * from './table';
+export * from './text-strip';
 export * from './typography';
 export * from './utility';
-export { NsVideo } from './videos';
+export * from './videos';