@nuskin/foundation-ui-components 1.0.0-develop.10 → 1.0.0-develop.11

package/package.json

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

package/src/common/accordion/NsCollapse.tsx

@@ -1,5 +1,12 @@
 import { styled } from '@nuskin/foundation-theme';
-import { AccordionVariant, AccordionVariantType, NsCollapseProps, AccordionItem, NsAccordion } from '../';
+import {
+    AccordionVariant,
+    AccordionVariantType,
+    NsCollapseProps,
+    AccordionItem,
+    NsAccordion,
+    AccordionContentTypeObject,
+} from '../';
 import { getAccordionColor } from './colorMap';
 import { ReactElement, isValidElement, useMemo } from 'react';
 
@@ -68,7 +75,7 @@ const NsCollapse = ({
         if (isValidElement(content)) {
             return content as ReactElement;
         }
-        if (type === 'html') {
+        if (type === AccordionContentTypeObject.html) {
             return (
                 <div
                     className="nsa-content-padded"
@@ -76,13 +83,13 @@ const NsCollapse = ({
                     {...(cslp?.content ?? {})}
                 />
             );
-        } else if (type === 'text') {
+        } else if (type === AccordionContentTypeObject.text) {
             return (
                 <div className="p-4" {...(cslp?.content ?? {})}>
                     {content as string}
                 </div>
             );
-        } else if (type === 'accordion') {
+        } else if (type === AccordionContentTypeObject.accordion) {
             return (
                 <NsAccordion
                     isChild={true}

package/src/common/accordion/enums.ts

@@ -6,3 +6,13 @@ export const AccordionVariant = {
 } as const;
 const variantValues = Object.values(AccordionVariant);
 export type AccordionVariantType = (typeof variantValues)[number];
+
+export const AccordionContentTypeObject = {
+    text: 'text',
+    html: 'html',
+    accordion: 'accordion',
+    jsx: 'jsx',
+};
+
+const contentValues = Object.values(AccordionContentTypeObject);
+export type AccordionContentType = (typeof contentValues)[number];

package/src/common/accordion/specs/NsAccordion.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@/test-utils/index';
-import { AccordionItem, AccordionVariant, NsAccordion } from '@/common/index';
+import { AccordionContentTypeObject, AccordionItem, AccordionVariant, NsAccordion } from '@/common/index';
 
 const generateContentArray = (count: number, isDefaultOpen = true) => {
     const arr = [] as AccordionItem[];
@@ -9,7 +9,7 @@ const generateContentArray = (count: number, isDefaultOpen = true) => {
             title: `Title ${i}`,
             content: <div className="p-2">Content {i}</div>,
             isDefaultOpen,
-            type:'jsx',
+            type: AccordionContentTypeObject.jsx,
             id: `Test ${i}`,
         });
     }

package/src/common/accordion/stories/NsCollapse.stories.tsx

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { AccordionVariant, NsCollapse } from '../';
+import { AccordionContentTypeObject, AccordionVariant, NsCollapse } from '../';
 import NsAccordionStory from './NsAccordion.stories';
 
 type ComponentType = typeof NsCollapse;
@@ -26,7 +26,7 @@ export default {
         },
         type: {
             control: 'select',
-            values: ['jsx', 'html', 'text', 'accordion'],
+            values: Object.values(AccordionContentTypeObject),
             description: 'This type should exactly match the content type to have accordion work correctly',
         },
         level: NsAccordionStory.argTypes.level,

package/src/common/accordion/stories/data.tsx

@@ -1,4 +1,4 @@
-import { NsIconProps } from '../..';
+import { AccordionContentTypeObject, NsIconProps } from '../..';
 import { AccordionItem } from '../types';
 
 const getItem = () => {
@@ -14,7 +14,7 @@ const getIcon = (name = '', color = '') => {
 };
 export const getTextContent = (text = '') => {
     return {
-        type: 'text' as AccordionItem['type'],
+        type: AccordionContentTypeObject.text as AccordionItem['type'],
         content: text || dummyText,
     };
 };
@@ -33,7 +33,7 @@ function createAccordionItem1(): AccordionItem {
         icon: getIcon(),
         title: 'Example - 1 JSX',
         content: getJsxContent(),
-        type: 'jsx',
+        type: AccordionContentTypeObject.jsx,
         isDefaultOpen: true,
     };
 }
@@ -43,14 +43,14 @@ function createAccordionItem2(): AccordionItem {
         isDefaultOpen: true,
         icon: getIcon(),
         title: 'Example - 2',
-        type: 'accordion',
+        type: AccordionContentTypeObject.accordion,
         content: [
             { ...getItem(), title: 'Example - 2.1', ...getTextContent() },
             {
                 ...getItem(),
                 icon: getIcon('hamburgerIcon', 'success'),
                 title: 'Example - 2.2',
-                type: 'jsx',
+                type: AccordionContentTypeObject.jsx,
                 content: <div className="p-2">Example 2.2 Content</div>,
             },
         ],
@@ -61,14 +61,14 @@ function createAccordionItem3(): AccordionItem {
         ...getItem(),
         icon: getIcon('hamburgerIcon', 'success'),
         title: 'Example - 3',
-        type: 'accordion',
+        type: AccordionContentTypeObject.accordion,
         content: [
             createAccordionItem3_1(),
             {
                 ...getItem(),
 
                 title: 'Example - 3.2',
-                type: 'text',
+                type: AccordionContentTypeObject.text,
                 content: dummyText,
             },
         ],
@@ -80,18 +80,18 @@ export function createAccordionItem3_1(): AccordionItem {
         ...getItem(),
         title: 'Example - 3.1',
         allowMultipleExpanded: true,
-        type: 'accordion',
+        type: AccordionContentTypeObject.accordion,
         content: [
             {
                 ...getItem(),
                 title: 'Example - 3.1.1',
-                type: 'text',
+                type: AccordionContentTypeObject.text,
                 content: dummyText,
             },
             {
                 ...getItem(),
                 title: 'Example - 3.1.2',
-                type: 'text',
+                type: AccordionContentTypeObject.text,
                 content: dummyText,
             },
         ],
@@ -103,13 +103,13 @@ function createAccordionItem4(): AccordionItem {
         ...getItem(),
         icon: getIcon(),
         title: 'Example - 4',
-        type: 'accordion',
+        type: AccordionContentTypeObject.accordion,
         content: [
             createAccordionItem4_1(),
             {
                 ...getItem(),
                 title: 'Example - 4.2',
-                type: 'html',
+                type: AccordionContentTypeObject.html,
                 content: '<h2>Lorem ipsum dolor sit amet.</h2>',
             },
         ],
@@ -120,18 +120,18 @@ function createAccordionItem4_1(): AccordionItem {
     return {
         ...getItem(),
         title: 'Example - 4.1',
-        type: 'accordion',
+        type: AccordionContentTypeObject.accordion,
         content: [
             {
                 ...getItem(),
 
                 title: 'Example - 4.1.1',
-                type: 'text',
+                type: AccordionContentTypeObject.text,
                 content: dummyText,
             },
             {
                 ...getItem(),
-                type: 'jsx',
+                type: AccordionContentTypeObject.jsx,
                 content: <div className="p-3">Example 4.1.2. content</div>,
                 title: 'Example - 4.1.2',
             },

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

@@ -2,11 +2,11 @@ import { ReactElement, ReactNode } from 'react';
 import { AdditionalProps } from '../common.types';
 import { NsIconNameType, NsIconProps } from '../icon';
 import { Variants } from '../typography';
-import { AccordionVariantType } from './enums';
+import { AccordionContentType, AccordionVariantType } from './enums';
 
 export type AccordionItem = {
     allowMultipleExpanded?: boolean;
-    type: 'text' | 'html' | 'accordion' | 'jsx';
+    type: AccordionContentType;
     id: string;
     content: string | AccordionItem[] | ReactElement;
     icon?: NsIconProps;
@@ -53,7 +53,7 @@ export type NsCollapseProps = AdditionalProps & {
     isOpen: boolean;
     isChild: boolean;
     allowMultipleExpanded?: boolean;
-    type: 'text' | 'html' | 'accordion' | 'jsx';
+    type: AccordionContentType;
 } & CommonAccordionType;
 
 export type NsToggleSectionProps = AdditionalProps & {
@@ -61,7 +61,7 @@ export type NsToggleSectionProps = AdditionalProps & {
     /** if true, NsToggle is rendered in open state, that collapsible section is visible */
     defaultOpen?: boolean;
     isChild: boolean;
-    type: 'text' | 'html' | 'accordion' | 'jsx';
+    type: AccordionContentType;
 } & Pick<CommonAccordionType, 'invert' | 'variant' | 'content'>;
 
 export type NsAccordionItemProps = AdditionalProps & {
@@ -76,6 +76,6 @@ export type NsAccordionItemProps = AdditionalProps & {
     closedIconName?: NsIconNameType;
     startIcon?: NsIconProps;
     isChild: boolean;
-    type: 'text' | 'html' | 'accordion' | 'jsx';
+    type: AccordionContentType;
     allowMultipleExpanded?: boolean;
 } & CommonAccordionType;

package/src/common/cart-icon/NsCartIcon.spec.tsx

@@ -5,25 +5,14 @@ const { getByTestId } = screen;
 describe('NsCartIcon', () => {
     it('renders Cart icon when item count is 0', () => {
         render(<NsCartIcon itemCount={0} color="primary" size="large" />);
-        const cartIcon = getByTestId('cart-icon');
+        const cartIcon = getByTestId('cart-badge-icon');
         expect(cartIcon).toBeInTheDocument();
     });
-    it('renders Cart icon with optional values', () => {
-        render(<NsCartIcon itemCount={0} />);
-        const cartIcon = getByTestId('cart-icon');
-        expect(cartIcon).toBeInTheDocument();
-    });
-
-    it('renders Cart Badge icon when item count is greater than 0', () => {
-        render(<NsCartIcon itemCount={5} color="primary" size="large" />);
-        const cartBadgeIcon = getByTestId('cart-badge-icon');
-        expect(cartBadgeIcon).toBeInTheDocument();
-    });
 
     it('renders item count badge when item count is greater than 0', () => {
-        render(<NsCartIcon itemCount={5} color="primary" size="large" />);
-        const itemCountBadge = getByTestId('item-count-badge');
-        expect(itemCountBadge).toBeInTheDocument();
-        expect(itemCountBadge.textContent).toBe('5');
+        const itemCount = 5;
+        const { getByText } = render(<NsCartIcon itemCount={5} color="primary" size="large" />);
+        const badgeContentElement = getByText(itemCount.toString());
+        expect(badgeContentElement).toHaveTextContent('5'); // Adjust the value as per your badge content
     });
 });

package/src/common/cart-icon/NsCartIcon.stories.tsx

@@ -19,7 +19,7 @@ export default {
         },
     },
     args: {
-        itemCount: 1,
+        itemCount: 5,
         color: 'primary',
         size: 'large',
     },

package/src/common/cart-icon/NsCartIcon.styled.ts

@@ -1,40 +1,14 @@
-import { Theme } from '@mui/material';
+import { Badge, Theme } from '@mui/material';
 import { styled, FoundationTheme } from '@nuskin/foundation-theme';
-import { NsIconSizeType } from '../icon/types';
 
 type ItemCountParams = {
-    size: NsIconSizeType;
-    color: FoundationTheme.PaletteColors;
     theme?: Theme;
+    bgcolor: FoundationTheme.PaletteColors;
 };
 
-export const CartIconContainer = styled.div`
-    position: relative;
-    display: inline-block;
-`;
-
-const BadgeFontSizeMap = {
-    small: '8px',
-    medium: '10px',
-    large: '12px',
-    xLarge: '14px',
-};
-
-const BadgePosMap = {
-    small: '-8px',
-    medium: '-6px',
-    large: '-4px',
-    xLarge: '-1px',
-};
-
-export const ItemCount = styled.span<ItemCountParams>`
-    color: ${({ color, theme }) => theme?.palette?.[color]?.main};
-    font-size: ${({ size }) => BadgeFontSizeMap[size]};
-    right: ${({ size }) => BadgePosMap[size]};
-    text-align: center;
-    font-weight: 600;
-    position: absolute;
-    width: 32px;
-    height: auto;
-    top: -4px;
+export const StyledBadge = styled(Badge) <ItemCountParams>`
+    & .MuiBadge-badge {
+        background-color: ${({ bgcolor, theme }) => theme?.palette?.[bgcolor]?.main};
+        color: ${({ bgcolor, theme }) => theme?.palette?.[bgcolor]?.contrastText};
+    }
 `;

package/src/common/cart-icon/NsCartIcon.tsx

@@ -1,21 +1,12 @@
 import { NsIcon } from '../icon';
-import { CartIconContainer, ItemCount } from './NsCartIcon.styled';
+import { StyledBadge } from './NsCartIcon.styled';
 import { NsCartIconProps } from './types.d';
 
-const NsCartIcon = ({ itemCount, size = 'large', color = 'primary' }: NsCartIconProps) => {
+const NsCartIcon = ({ itemCount = 0, size = 'large', color = 'primary', maxItemCount = 999 }: NsCartIconProps) => {
     return (
-        <CartIconContainer>
-            {itemCount > 0 ? (
-                <NsIcon testId="cart-badge-icon" name="cartBadge" color={color} size={size} />
-            ) : (
-                <NsIcon testId="cart-icon" name="cart" color={color} size={size} />
-            )}
-            {itemCount > 0 && (
-                <ItemCount data-testid="item-count-badge" color={color} size={size}>
-                    {itemCount}
-                </ItemCount>
-            )}
-        </CartIconContainer>
+        <StyledBadge badgeContent={itemCount} max={maxItemCount} bgcolor={color}>
+            <NsIcon testId="cart-badge-icon" name="cart" size={size} color={color} />
+        </StyledBadge>
     );
 };
 

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

@@ -4,4 +4,5 @@ export type NsCartIconProps = {
     itemCount: number;
     size?: 'small' | 'medium' | 'large' | 'xLarge';
     color?: FoundationTheme.PaletteColors;
+    maxItemCount?:number;
 };

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>
     );
 };