@nuskin/foundation-ui-components 1.0.0-cft-35.6 → 1.0.0-cft-35.8

package/CHANGELOG.md

@@ -1,3 +1,44 @@
+# [1.0.0-cft-35.8](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.7...v1.0.0-cft-35.8) (2023-04-10)
+
+
+### Fis
+
+* format code ([8587727](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/85877278980afed666a55eabd7ba8a86ba14f236))
+
+### Fix
+
+* button import name chnaged ([47522e3](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/47522e3f8c2e940ac720d204d69448a0b46442ce))
+* conflict ([971e4a5](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/971e4a50c88a545f2890a62349f2ebd06759384a))
+* merge issue ([67a72ce](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/67a72ce440c27b88a339e68f4c74a39c1c23b9a1))
+* Typography and banner ui updates ([99a8322](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/99a8322c968c9b31dca4bc1d0d3652d47a65338b))
+
+### FIX
+
+* build issue ([935b132](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/935b1322d47841eb554ad514cb9880b9e9f48e52))
+* typo fix ([32d5fa7](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/32d5fa7dc09ec60ce3698b6c638ea9351405ef28))
+
+### New
+
+* Nsbaner Ui #CFT-118 ([d1896fd](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/d1896fd00fc1c7cc22a0db931507ec6096e7fdef)), closes [#CFT-118](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/issues/CFT-118)
+
+### Update
+
+* Code format ([7244ea1](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/7244ea1fcef2bdb75dd45d7af04809e763cff8dd))
+
+# [1.0.0-cft-35.7](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.6...v1.0.0-cft-35.7) (2023-04-10)
+
+
+### Fix
+
+* increase test coverage ([91c79cc](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/91c79ccc2a07792ed94a232c6e77593e778cb6e1))
+* refactor component hierarchy and naming components ([107eda4](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/107eda443a56869deacdb47f822ce4af76b8ce17))
+* story book module fix ([9b77c79](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/9b77c79e3507a4f39342378f58d8c0aeb1882c96))
+
+### New
+
+* added new NsInputField ([6f6b4a6](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/6f6b4a6b0db776427e56bbf6d70885cef5660476))
+* CX130-109 Added common icon component and Cart icon ([6cda585](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/6cda58514e3821f886d6d952c8d73751d33e796d))
+
 # [1.0.0-cft-35.6](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.5...v1.0.0-cft-35.6) (2023-03-30)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nuskin/foundation-ui-components",
-  "version": "1.0.0-cft-35.6",
+  "version": "1.0.0-cft-35.8",
   "description": "It is a foundation library written in react, that provides commom components to all UI pages",
   "private": false,
   "main": "src/common/index.ts",
@@ -39,7 +39,7 @@
     "@mui/icons-material": "^5.11.11",
     "@mui/material": "5.4.2",
     "@next/font": "13.2.4",
-    "@nuskin/foundation-theme": "1.0.0-cft-33.10",
+    "@nuskin/foundation-theme": "1.0.0-cft-33.12",
     "@types/jest": "^29.5.0",
     "framer-motion": "^10.8.5",
     "next": "13.2.4",

package/src/common/banner/NsBanner.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import NsBanner from './';
+
+describe('Hero component', () => {
+    it('renders banner image and title', () => {
+        const childText = 'Welcome to My Website';
+        const image = 'https://example.com/banner.jpg';
+        const { getByAltText, getByText } = render(
+            <NsBanner imageUrl={image} altText="Banner image">
+                <h1>{childText}</h1>
+            </NsBanner>
+        );
+        const childElement = getByText(childText);
+        const imageElement = getByAltText('Banner image');
+        expect(childElement).toBeInTheDocument();
+        expect(imageElement).toBeInTheDocument();
+    });
+});

package/src/common/banner/NsBanner.stories.tsx

@@ -0,0 +1,42 @@
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsBanner.stories.tsx
+ * @description NsBanner component.
+ */
+
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Banner from './';
+import Typography from '../typography';
+import Button from '../button/NsButton';
+
+export default {
+    title: 'Components',
+    component: Banner,
+    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+    argTypes: {
+        children: {
+            control: 'text', // use the text control to edit children prop
+        },
+    },
+    args: {
+        imageUrl: 'https://media.nuskin.com/m/e2f6d26058b2e7d/webimage-us-collagen-strawberry-hompage-banner.png',
+        altText: 'NsBanner',
+        alignment: 'center',
+        justify: 'start',
+        children: (
+            <div>
+                <Typography className="w-80" variant="h1" colorOverride="#000000">
+                    Limited time offers on LumiSpa iO cleansers and bundles!
+                </Typography>
+                <Typography variant="p-m" className="my-5" colorOverride="#000000">
+                    Learn more about what I do and how I can help you
+                </Typography>
+                <Button variant="contained">Contact me</Button>
+            </div>
+        ),
+    },
+} as ComponentMeta<typeof Banner>;
+
+export const NsBanner: ComponentStory<typeof Banner> = (args) => <Banner {...args} />;

package/src/common/banner/NsBanner.styled.tsx

@@ -0,0 +1,23 @@
+import { styled } from '@nuskin/foundation-theme';
+import { AlignmentType } from './types';
+
+export const StyledBanner = styled.section`
+    position: relative;
+    display: flex;
+    justify-content: space-evenly;
+    img {
+        width: 100%;
+        object-fit: cover;
+    }
+`;
+
+export const StyledHeroText = styled.div<{ $justify: AlignmentType; $alignment: AlignmentType }>`
+    height: 100%;
+    display: flex;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    justify-content: ${({ $justify }) => $justify};
+    align-items: ${({ $alignment }) => $alignment};
+    text-align: left;
+`;

package/src/common/banner/NsBanner.tsx

@@ -0,0 +1,33 @@
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsBanner.tsx
+ * @description NsBanner component with a image background
+ */
+
+import React, { PropsWithChildren } from 'react';
+
+import { NsBannerProps } from './types';
+import { StyledBanner, StyledHeroText } from './NsBanner.styled';
+
+const NsBanner = (props: PropsWithChildren<NsBannerProps>) => {
+    const {
+        children,
+        imageUrl = '',
+        altText = 'NsBanner',
+        alignment = 'center',
+        justify = 'start',
+        className = '',
+        additionalProps = {},
+    } = props;
+
+    return (
+        <StyledBanner className={className}>
+            <img src={imageUrl} alt={altText} id="bgImage" {...additionalProps} />
+            <StyledHeroText $alignment={alignment} $justify={justify}>
+                <div className="mx-14">{children}</div>
+            </StyledHeroText>
+        </StyledBanner>
+    );
+};
+
+export default NsBanner;

package/src/common/banner/index.ts

@@ -0,0 +1 @@
+export { default } from './NsBanner';

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

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { AdditionalProps } from '../common.types';
+
+export type AlignmentType = 'start' | 'center' | 'end';
+
+export type NsBannerProps = {
+    children: React.ReactNode;
+    imageUrl: string;
+    altText?: string;
+    alignment?: AlignmentType;
+    justify?: AlignmentType;
+    className?: string;
+} & AdditionalProps;

package/src/common/brand-components/{Brand.stories.tsx → NsBrand.stories.tsx}

@@ -1,10 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import BrandComponent from './BrandComponent';
+import NsBrandComponent from './NsBrandComponent';
 
 export default {
-    title: 'Components/Brand',
-    component: BrandComponent,
+    title: 'Components/NsBrandComponent',
+    component: NsBrandComponent,
     decorators: [
         (story) => (
             <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>
@@ -21,8 +21,8 @@ export default {
         size: '100px',
         variant: 'stacked',
     },
-} as ComponentMeta<typeof BrandComponent>;
+} as ComponentMeta<typeof NsBrandComponent>;
 
-export const Brand: ComponentStory<typeof BrandComponent> = (args) => (
-    <BrandComponent {...args} />
+export const Brand: ComponentStory<typeof NsBrandComponent> = (args) => (
+    <NsBrandComponent {...args} />
 );

package/src/common/brand-components/{BrandComponent.spec.tsx → NsBrandComponent.spec.tsx}

@@ -1,4 +1,4 @@
-import BrandComponent from './BrandComponent';
+import BrandComponent from './NsBrandComponent';
 import { render } from '@testing-library/react';
 
 describe('checking brand component', () => {
@@ -37,12 +37,11 @@ describe('checking brand component', () => {
         expect(paths.length).toBe(17);
     });
 
-    /*
-    xit('6. should render BrandComponent with dummy variant', () => {
-        const { getByTestId } = render(<BrandComponent variant="dummy" />);
+    it('6. should render BrandComponent with dummy variant', () => {
+        const { getByTestId } = render(<BrandComponent />);
         const svg = getByTestId('logo');
         const paths = svg.querySelectorAll('path');
         expect(paths.length).toBe(8);
     });
-    */
+
 });

package/src/common/brand-components/{BrandComponent.tsx → NsBrandComponent.tsx}

@@ -4,8 +4,8 @@ import NSLogoMark from './icons/NSLogoMark';
 import NSLogoPoweredBy from './icons/NSLogoPoweredBy';
 import NSLogoStacked from './icons/NSLogoStacked';
 import NSLogoWordMark from './icons/NSWordMark';
-import LogoContainer from './BrandContanier.styled';
-import { BrandComponentProps } from './types';
+import LogoContainer from './NsBrandContanier.styled';
+import { NsBrandComponentProps } from './types';
 
 const VariantMap = {
     stacked: NSLogoStacked,
@@ -15,7 +15,7 @@ const VariantMap = {
     poweredBy: NSLogoPoweredBy,
 };
 
-const BrandComponent = (props: PropsWithChildren<BrandComponentProps>) => {
+const NsBrandComponent = (props: PropsWithChildren<NsBrandComponentProps>) => {
     const { variant = 'stacked', size = '108px', color = 'primary' } = props;
     const renderBrand = useCallback(() => {
         const BrandComponent = VariantMap[variant || 'stacked'];
@@ -24,4 +24,4 @@ const BrandComponent = (props: PropsWithChildren<BrandComponentProps>) => {
     return <LogoContainer size={size}>{renderBrand()}</LogoContainer>;
 };
 
-export default BrandComponent;
+export default NsBrandComponent;

package/src/common/brand-components/{BrandContanier.styled.tsx → NsBrandContanier.styled.tsx}

@@ -1,10 +1,10 @@
 import { styled } from '@nuskin/foundation-theme';
 
-const BrandContainer = styled.div<{ size: string }>`
+const NsBrandContainer = styled.div<{ size: string }>`
   svg {
     font-size: ${({ size }) => size};
     height: auto;
   }
 `;
 
-export default BrandContainer;
+export default NsBrandContainer;

package/src/common/brand-components/index.ts

@@ -1,2 +1,2 @@
-export { default } from './BrandComponent';
-export type { BrandComponentProps } from './types';
+export { default } from './NsBrandComponent';
+export type { NsBrandComponentProps } from './types';

package/src/common/brand-components/types.d.ts

@@ -1,11 +1,11 @@
-import { PaletteColorNames } from '@nuskin/foundation-theme/src/themes/types';
+import { FoundationTheme } from '@nuskin/foundation-theme';
 
-export type BrandComponentProps = {
+export type NsBrandComponentProps = {
     variant?: 'stacked' | 'horizontal' | 'poweredBy' | 'logomark' | 'wordmark';
     size?: string;
-    color?: PaletteColorNames;
-}
+    color?: FoundationTheme.PaletteColors;
+};
 
 export type SVGLogoProps = {
     color: string;
-}
+};

package/src/common/button/{Button.spec.tsx → NsButton.spec.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '../../../test-utils/index';
 import nuskinTheme from '@nuskin/foundation-theme/src/themes/genome-foundation';
-import Button from './Button';
+import Button from './NsButton';
 
 const { palette } = nuskinTheme;
 

package/src/common/button/{Button.stories.tsx → NsButton.stories.tsx}

@@ -1,11 +1,11 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Button from './Button';
+import NsButton from './NsButton';
 import { ShoppingCart } from '@mui/icons-material';
 
 export default {
-    title: 'Components/Button',
-    component: Button,
+    title: 'Components/NsButton',
+    component: NsButton,
     decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
     argTypes: {
         children: {
@@ -26,14 +26,14 @@ export default {
         variant: 'contained',
         fullWidth: false,
     },
-} as ComponentMeta<typeof Button>;
+} as ComponentMeta<typeof NsButton>;
 
-export const button: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+export const button: ComponentStory<typeof NsButton> = (args) => <NsButton {...args} />;
 
-export const IconOnlyButton: ComponentStory<typeof Button> = (args) => (
-    <Button {...args} iconOnly>
+export const IconOnlyButton: ComponentStory<typeof NsButton> = (args) => (
+    <NsButton {...args} iconOnly>
         <ShoppingCart />
-    </Button>
+    </NsButton>
 );
 
 IconOnlyButton.argTypes = {

package/src/common/button/NsButton.styled.tsx

@@ -0,0 +1,90 @@
+import { Button as MUIButton } from '@mui/material';
+
+import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+import { ButtonConfig } from '@nuskin/foundation-theme/src/themes/types/button';
+import { NsButtonProps } from './types';
+
+const {
+    getPaletteColor,
+    getButtonStateColor,
+} = ColorUtils;
+
+const getButtonConfig = (theme: FoundationTheme.Theme, attribute: keyof ButtonConfig) => {
+    const { config } = theme || {};
+    return config?.components?.button?.[attribute] || '';
+};
+
+const StyledButton = styled(MUIButton)<NsButtonProps>`
+    gap: 10px;
+    border-radius: ${({ theme}) => getButtonConfig(theme, 'borderRadius')} || 0;
+    :focus {
+        border: 1px solid  ${({ theme}) => getButtonConfig(theme, 'focusColor')} !important;
+    }
+    :disabled {
+        background-color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabled')};
+        color: ${({ theme, color }) => getButtonStateColor(theme, color, 'disabledText')};
+    }
+    ${({ theme: { config }, size }) => {
+        return size === 'medium' ? config?.components?.button?.size?.medium?.padding : ''
+    }}
+    ${({ theme: { config}, size }) => {
+        return size === 'large' ? config?.components?.button?.size?.large?.padding : ''
+    }}
+    ${({ variant, theme, color = 'primary' }) => {
+        return variant === 'contained' ?
+            `
+                background-color: ${getPaletteColor(theme, color)};
+                :hover {
+                    background-color: ${getButtonStateColor(theme, color, 'hovered')};
+                }
+                :active {
+                    background-color: ${getButtonStateColor(theme, color, 'pressed')};
+                }
+                :focus {
+                    background-color: ${getButtonStateColor(theme, color, 'focused')};
+                }
+            `
+            : ''
+    }}
+  ${({ variant, theme, color = 'primary' }) =>
+        variant === 'outlined' &&
+        `
+            border-color: ${getPaletteColor(theme, color)};
+            color: ${getPaletteColor(theme, color)};
+            :hover {
+                border-color: ${getButtonStateColor(theme, color, 'hovered')};
+                color: ${getPaletteColor(theme, color)};
+            }
+            :active {
+                border-color: ${getButtonStateColor(theme, color, 'pressed')};
+                color: ${getPaletteColor(theme, color)};
+            }
+        `}
+  ${({ variant, theme, color = 'primary' }) =>
+        variant === 'text' &&
+        `
+            text-decoration: underline 1px !important;
+            text-underline-offset: 4px;
+            padding: 0;
+            min-width: auto;
+            background-color: transparent !important;
+            text-decoration-color: ${getPaletteColor(theme, color)};
+            color: ${getPaletteColor(theme, color)};
+            :hover {
+                color:  ${getButtonStateColor(theme, color, 'hovered')};
+                text-decoration-color:  ${getButtonStateColor(theme, color, 'hovered')};
+            }
+            :active {
+                color: ${getPaletteColor(theme, color)};
+                text-decoration-color:  ${getButtonStateColor(theme, color, 'pressed')};
+            }
+        `}
+  ${({ iconOnly }) =>
+        iconOnly &&
+        `
+            padding: 10px;
+            min-width: unset;
+        `}
+`;
+
+export default StyledButton;

package/src/common/button/NsButton.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react';
+import StyledButton from './NsButton.styled';
+import { NsButtonProps } from './types';
+
+const NsButton = ({ children, ...props }: PropsWithChildren<NsButtonProps>) => {
+    return (
+        <StyledButton {...props} disableRipple>
+            {children}
+        </StyledButton>
+    );
+};
+
+export default NsButton;

package/src/common/button/index.ts

@@ -1,2 +1,2 @@
-export { default } from './Button';
-export type { ButtonProps } from './types';
+export { default } from './NsButton';
+export type { NsButtonProps } from './types';

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

@@ -1,6 +1,6 @@
 import { ButtonProps as MUIButtonProps } from '@mui/material';
 
-export type ButtonProps = Pick<
+export type NsButtonProps = Pick<
   MUIButtonProps,
   | 'size'
   | 'variant'

package/src/common/card/stories/NsBgCard.stories.tsx

@@ -3,7 +3,7 @@ import NsBgCard from '../NsBgCard';
 
 export default {
     component: NsBgCard,
-    title: 'Components/Card/NsBgCard',
+    title: 'Components/NsCard/NsBgCard',
     argTypes: {},
     decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
 } as ComponentMeta<typeof NsBgCard>;

package/src/common/card/stories/NsBrandProductCard.stories.tsx

@@ -3,7 +3,7 @@ import NsBrandProductCard from '../NsBrandProductCard';
 
 export default {
     component: NsBrandProductCard,
-    title: 'Components/Card/NsBrandProductCard',
+    title: 'Components/NsCard/NsBrandProductCard',
     argTypes: {},
     decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
 } as ComponentMeta<typeof NsBrandProductCard>;

package/src/common/carousal/IconWrapper.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
 import { styled } from '@nuskin/foundation-theme';
 import { Box } from '@mui/material';
-
+// TODO: check if this can be updated with NsIcon
 type IconWrapperProps = PropsWithChildren<{
     onClick(): void;
     className?: string;

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

@@ -0,0 +1,23 @@
+import { NsCartIcon } from './';
+import { render } from '../../../test-utils';
+
+describe('NsCartIcon', () => {
+    it('renders Cart icon when item count is 0', () => {
+        const { getByTestId } = render(<NsCartIcon itemCount={0} color="primary" size="large" />);
+        const cartIcon = getByTestId('cart-icon');
+        expect(cartIcon).toBeInTheDocument();
+    });
+
+    it('renders Cart Badge icon when item count is greater than 0', () => {
+        const { getByTestId } = 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', () => {
+        const { getByTestId } = render(<NsCartIcon itemCount={5} color="primary" size="large" />);
+        const itemCountBadge = getByTestId('item-count-badge');
+        expect(itemCountBadge).toBeInTheDocument();
+        expect(itemCountBadge.textContent).toBe('5');
+    });
+});

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { NsCartIcon } from './';
+
+export default {
+    title: 'Components/NsCartIcon',
+    component: NsCartIcon,
+    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+    argTypes: {
+        itemCount: { control: 'number', defaultValue: 1 },
+        size: { control: 'select', options: ['small', 'medium', 'large', 'xLarge'] },
+        color: {
+            control: 'select',
+            options: ['primary', 'secondary', 'success', 'error', 'warning', 'info'],
+        },
+    },
+    args: {
+        itemCount: 1,
+        color: 'primary',
+        size: 'large',
+    },
+} as ComponentMeta<typeof NsCartIcon>;
+
+export const CartIcon: ComponentStory<typeof NsCartIcon> = (args) => <NsCartIcon {...args} />;

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

@@ -0,0 +1,40 @@
+import { 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;
+};
+
+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;
+`;

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

@@ -0,0 +1,22 @@
+import { NsIcon } from '../icon';
+import { CartIconContainer, ItemCount } from './NsCartIcon.styled';
+import { NsCartIconProps } from './types';
+
+const NsCartIcon = ({ itemCount, size = 'large', color = 'primary' }: 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>
+    );
+};
+
+export default NsCartIcon;

package/src/common/cart-icon/index.ts

@@ -0,0 +1,2 @@
+export { default as NsCartIcon } from './NsCartIcon';
+export type { NsCartIconProps } from './types';

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

@@ -0,0 +1,7 @@
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+export type NsCartIconProps = {
+    itemCount: number;
+    size?: 'small' | 'medium' | 'large' | 'xLarge';
+    color?: FoundationTheme.PaletteColors;
+};

package/src/common/checkbox/NsCheckbox.stories.tsx

@@ -11,7 +11,7 @@ import NsCheckbox from './NsCheckbox';
 
 // In this case, we're only passing the label prop.
 export default {
-    title: 'Components',
+    title: 'Components/NsCheckbox',
     component: NsCheckbox,
     decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
     argTypes: {