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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.4.2-export-updates.2",
+    "version": "1.5.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/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,7 @@ import UserIcon from './icons/UserIcon';
 import HamburgerIcon from './icons/HamburgerIcon';
 import UserOutline from './icons/UserOutline';
 import Check from './icons/Check';
+import ChevronRight from './icons/ChevronRight';
 
 const IconVariants = {
     arrowDown: ArrowDown,
@@ -46,6 +47,7 @@ const IconVariants = {
     userIcon: UserIcon,
     userOutline: UserOutline,
     warning: WarningIcon,
+    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/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';