@nuskin/foundation-ui-components 1.0.0-cft-35.7 → 1.0.0-cft-35.9

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# [1.0.0-cft-35.9](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/compare/v1.0.0-cft-35.8...v1.0.0-cft-35.9) (2023-04-20)
+
+
+### New
+
+* Breadcrum ui ([33d6cc8](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/33d6cc8eb2a535965582b91e26f0196f17b930d8))
+* NsBreadcrumb ui ([e40b089](https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/commit/e40b089376db9cf37af7d59b2022972f17c333ad))
+
+# [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)
 
 

package/package.json

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

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import NsBreacrumb from './';
+import { ItemProps } from './types';
+
+const breadcrumbItems: ItemProps[] = [
+    { label: 'Home', href: '/', icon: 'home' },
+    { label: 'Products', href: '/products' },
+    { label: 'Shirts', href: '/products/shirts' },
+    { label: 'Blue shirt', href: '/products/shirts/blue' },
+];
+
+describe('Breadcrumb', () => {
+    it('renders breadcrumb items with navigation icons', () => {
+        const { getByText } = render(<NsBreacrumb items={breadcrumbItems} />);
+        expect(getByText('Home')).toBeInTheDocument();
+        expect(getByText('Products')).toBeInTheDocument();
+        expect(getByText('Shirts')).toBeInTheDocument();
+        expect(getByText('Blue shirt')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,30 @@
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsBanner.stories.tsx
+ * @description NsBanner component.
+ */
+
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import Breadcrumb from './';
+
+export default {
+    title: 'Components',
+    component: Breadcrumb,
+    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+    argTypes: {
+        iconVisibility: { control: 'boolean' },
+    },
+    args: {
+        items: [
+            { label: 'Home', href: 'home', icon: 'home' },
+            { label: 'Call to action', href: '/products' },
+            { label: 'Call to action', href: '/products/shirts' },
+            { label: 'Product', href: '' },
+        ],
+        iconVisibility: false,
+    },
+} as ComponentMeta<typeof Breadcrumb>;
+
+export const NsBreadcrumb: ComponentStory<typeof Breadcrumb> = (args) => <Breadcrumb {...args} />;

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

@@ -0,0 +1,29 @@
+import { styled } from '@nuskin/foundation-theme';
+
+export const BreadcrumbContainer = styled.nav`
+    margin-bottom: 10px;
+`;
+
+export const BreadcrumbList = styled.ol`
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+`;
+
+export const BreadcrumbItem = styled.li`
+    display: flex;
+    align-items: center;
+    :not(:first-child) {
+        margin-left: 12px;
+    }
+    & a {
+        display: flex;
+        gap: 8px;
+        margin-right: 12px;
+    }
+    .slashIcon {
+        transform: rotate(20deg);
+    }
+`;

package/src/common/breadcrumb/NsBreadcrumb.tsx

@@ -0,0 +1,61 @@
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsBreadcrumb.tsx
+ * @description NsBreadcrumb component with a navigation items array props
+ */
+
+import { PropsWithChildren } from 'react';
+
+import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbList } from './NsBreadcrumb.styled';
+import { NsIcon } from '../icon';
+import NsLink from '../link/NsLink';
+import Typography from '../typography';
+import { NsBredacrumbProps, ItemProps } from './types';
+import { useTheme } from '@emotion/react';
+import { ColorUtils } from '@nuskin/foundation-theme';
+
+const NsBreadcrumb = (props: PropsWithChildren<NsBredacrumbProps>) => {
+    const { items, iconVisibility } = props;
+
+    const theme = useTheme();
+    const neutral80 = ColorUtils.getAppColor(theme, 'neutral', '80') as string;
+    const neutral60 = ColorUtils.getAppColor(theme, 'neutral', '60') as string;
+
+    const getLabel = (item: ItemProps) => {
+        if (item?.href) {
+            return (
+                <Typography variant="h6" colorOverride={neutral60}>
+                    <NsLink href={item.href} underlineOnHover>
+                        {iconVisibility && item.icon ? (
+                            <NsIcon name={item.icon} size="small" testId="nav-icon" colorOverride={neutral60} />
+                        ) : null}
+                        {item.label}
+                    </NsLink>
+                </Typography>
+            );
+        } else {
+            return (
+                <Typography variant="h6" colorOverride={neutral80}>
+                    {item.label}
+                </Typography>
+            );
+        }
+    };
+
+    return (
+        <BreadcrumbContainer aria-label="breadcrumb">
+            <BreadcrumbList>
+                {items?.map((item: ItemProps, index: number) => (
+                    <BreadcrumbItem key={item.label}>
+                        {getLabel(item)}
+                        {index !== items.length - 1 ? (
+                            <NsIcon className="slashIcon" name={'slash'} size="small" colorOverride={neutral60} />
+                        ) : null}
+                    </BreadcrumbItem>
+                ))}
+            </BreadcrumbList>
+        </BreadcrumbContainer>
+    );
+};
+
+export default NsBreadcrumb;

package/src/common/breadcrumb/index.ts

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

package/src/common/breadcrumb/types.ts

@@ -0,0 +1,13 @@
+import { AdditionalProps } from '../common.types';
+import { NsIconNameType } from '../icon';
+
+export interface NsBredacrumbProps {
+    items?: ItemProps[];
+    iconVisibility?: boolean;
+}
+
+export type ItemProps = {
+    label?: string;
+    href?: string;
+    icon?: NsIconNameType;
+} & AdditionalProps;

package/src/common/dropdown/NsDropdown.spec.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '../../../test-utils';
+import NsDropdown from './NsDropdown';
+import NsDropdownOption from './NsDropdownOption';
+
+function createDropdownOptions(options: { value: string; label: string }[]) {
+    return options.map((option) => <NsDropdownOption key={option.value} value={option.value} label={option.label} />);
+}
+
+describe('NsDropdown', () => {
+    const onSelect = jest.fn();
+    const selectedValue = '';
+    const selectedLabel = '';
+
+    const options = [
+        { value: 'Option 1', label: 'Option 1' },
+        { value: 'Option 2', label: 'Option 2' },
+        { value: 'Option 3', label: 'Option 3' },
+    ];
+
+    it('renders the placeholder text when no value is selected', () => {
+        render(
+            <NsDropdown
+                placeholder="Select an option"
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+            >
+                {createDropdownOptions(options)}
+            </NsDropdown>
+        );
+
+        expect(screen.getByText('Select an option')).toBeInTheDocument();
+    });
+
+    it('renders the selected value label', () => {
+        const selectedLabel = 'Option 1';
+        render(
+            <NsDropdown selectedValue="Option 1" selectedLabel={selectedLabel} onSelect={onSelect}>
+                {createDropdownOptions(options)}
+            </NsDropdown>
+        );
+
+        expect(screen.getByText(selectedLabel)).toBeInTheDocument();
+    });
+
+    it('dropdown opens and closes on click', () => {
+        render(
+            <NsDropdown selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect}>
+                {createDropdownOptions(options)}
+            </NsDropdown>
+        );
+
+        const dropdownHead = screen.getByTestId('dropdown-head');
+        fireEvent.click(dropdownHead);
+
+        expect(screen.getByTestId('option-Option 1')).toBeInTheDocument();
+        expect(screen.getByTestId('option-Option 2')).toBeInTheDocument();
+        expect(screen.getByTestId('option-Option 3')).toBeInTheDocument();
+
+        fireEvent.click(dropdownHead);
+        expect(screen.queryByTestId('option-Option 1')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('option-Option 2')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('option-Option 3')).not.toBeInTheDocument();
+    });
+
+    it('dropdown closes on mouse leave when closeOnMouseLeave is set to true', async () => {
+        render(
+            <NsDropdown
+                closeOnMouseLeave
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+            >
+                {createDropdownOptions(options)}
+            </NsDropdown>
+        );
+
+        const dropdownHead = screen.getByTestId('dropdown-head');
+        fireEvent.click(dropdownHead);
+
+        const dropdownList = screen.getByTestId('dropdown-list');
+        fireEvent.mouseLeave(dropdownList);
+
+        await waitFor(() => {
+            expect(screen.queryByTestId('option-Option 1')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('option-Option 2')).not.toBeInTheDocument();
+            expect(screen.queryByTestId('option-Option 3')).not.toBeInTheDocument();
+        });
+    });
+    it('dropdown does not close on mouse leave when closeOnMouseLeave is set to false', () => {
+        render(
+            <NsDropdown
+                selectedValue={selectedValue}
+                selectedLabel={selectedLabel}
+                onSelect={onSelect}
+                closeOnMouseLeave={false}
+            >
+                {createDropdownOptions(options)}
+            </NsDropdown>
+        );
+
+        const dropdownHead = screen.getByTestId('dropdown-head');
+        fireEvent.click(dropdownHead);
+
+        const dropdownList = screen.getByTestId('dropdown-list');
+        fireEvent.mouseLeave(dropdownList);
+
+        expect(screen.getByTestId('option-Option 1')).toBeInTheDocument();
+        expect(screen.getByTestId('option-Option 2')).toBeInTheDocument();
+        expect(screen.getByTestId('option-Option 3')).toBeInTheDocument();
+    });
+    it('dropdown does not open when disabled', () => {
+        render(
+            <NsDropdown selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={onSelect} disabled>
+                {createDropdownOptions(options)}
+            </NsDropdown>
+        );
+
+        const dropdownHead = screen.getByTestId('dropdown-head');
+        fireEvent.click(dropdownHead);
+
+        expect(screen.queryByTestId('dropdown-list')).not.toBeInTheDocument();
+    });
+});

package/src/common/dropdown/NsDropdown.styled.tsx

@@ -0,0 +1,64 @@
+import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+const { getPaletteColor, getAppColor } = ColorUtils;
+
+const isLight = (theme: FoundationTheme.Theme) => {
+    const { palette = { primary: { main: '', contrastText: '' } } } = theme;
+    return palette.primary.main === getAppColor(theme, 'primary', 'black');
+};
+
+export const DropdownContainer = styled.div<{ disabled: boolean }>`
+    position: relative;
+    display: inline-block;
+    opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};
+`;
+
+export const DropdownHead = styled.div<{ type: string; disabled: boolean }>`
+    cursor: ${({ disabled }) => (disabled ? 'inherit' : 'pointer')};
+    padding: 5px 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: ${({ type, theme }) =>
+        type === 'outlined' ? `1px solid ${getAppColor(theme, 'primary', 'black')}` : 'none'};
+    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+`;
+
+export const DropdownButton = styled.div`
+    padding-right: 10px;
+`;
+
+export const DropdownList = styled.div<{ borderColor: FoundationTheme.PaletteColors }>`
+    position: absolute;
+    z-index: 100;
+    border: 1px solid ${({ borderColor, theme }) => getPaletteColor(theme, borderColor)};
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    color: ${({ theme }) => getPaletteColor(theme, 'primary')};
+`;
+
+export const ListItemContainer = styled.div<{ showListDivider: boolean }>`
+    cursor: pointer;
+    padding: 5px 0;
+    border-bottom: 1px solid
+        ${({ showListDivider, theme }) =>
+        showListDivider
+            ? isLight(theme)
+                ? getAppColor(theme, 'neutral', '30')
+                : getAppColor(theme, 'neutral', '20')
+            : 'none'};
+    &:hover {
+        background-color: ${({ theme }) =>
+        isLight(theme) ? getAppColor(theme, 'accentColorB', '10') : getAppColor(theme, 'accentColorB', '50')};
+    }
+
+    &:last-child {
+        border-bottom: none;
+    }
+`;
+
+export const ListItem = styled.span<{ isSelected: boolean }>`
+    padding: 5px 10px;
+    border-left: ${({ isSelected, theme }) =>
+        isSelected ? `2px solid ${getPaletteColor(theme, 'primary')}` : 'none'};
+`;

package/src/common/dropdown/NsDropdown.tsx

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { DropdownContainer, DropdownButton, DropdownList, DropdownHead } from './NsDropdown.styled';
+import { NsIcon } from '../icon';
+import { DropdownProps } from './types';
+
+const NsDropdown: React.FC<DropdownProps> = ({
+    selectedValue,
+    selectedLabel,
+    onSelect,
+    children,
+    disabled = false,
+    type = 'outlined',
+    placeholder = 'Select',
+    dropdownBorderColor = 'accentColorB',
+    closeOnMouseLeave = false,
+    showListDivider = true,
+}) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [value, setValue] = useState(selectedValue || '');
+
+    const handleToggle = () => {
+        if (disabled) return;
+        setIsOpen(!isOpen);
+    };
+
+    const closeDropdown = () => {
+        if (closeOnMouseLeave) {
+            setIsOpen(false);
+        }
+    };
+
+    const handleSelect = (input: string) => {
+        onSelect(input);
+        setIsOpen(false);
+        setValue(input);
+    };
+
+    return (
+        <DropdownContainer disabled={disabled}>
+            <DropdownHead data-testid="dropdown-head" disabled={disabled} type={type} onClick={handleToggle}>
+                <DropdownButton>{selectedLabel || placeholder}</DropdownButton>
+                <NsIcon testId="chevron-icon" name={isOpen ? 'arrowDown' : 'arrowUp'} color="primary" />
+            </DropdownHead>
+            {isOpen ? (
+                <DropdownList
+                    data-testid="dropdown-list"
+                    onMouseLeave={closeDropdown}
+                    borderColor={dropdownBorderColor}
+                >
+                    {React.Children.map(children, (child) => {
+                        if (React.isValidElement(child)) {
+                            return React.cloneElement(child, {
+                                // @ts-ignore
+                                onSelect: handleSelect,
+                                selectedValue: value,
+                                showListDivider,
+                            });
+                        }
+                        return null;
+                    })}
+                </DropdownList>
+            ) : null}
+        </DropdownContainer>
+    );
+};
+
+export default NsDropdown;

package/src/common/dropdown/NsDropdownOption.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ListItem, ListItemContainer } from './NsDropdown.styled';
+import { DropdownOptionProps } from './types';
+
+export const NsDropdownOption: React.FC<DropdownOptionProps> = ({
+    value,
+    label,
+    onSelect,
+    selectedValue,
+    showListDivider = true,
+}) => {
+    const handleClick = () => {
+        if (onSelect && typeof onSelect === 'function') {
+            onSelect(value);
+        }
+    };
+
+    return (
+        <ListItemContainer data-testid={`option-${value}`} showListDivider={showListDivider} onClick={handleClick}>
+            <ListItem isSelected={value === selectedValue}>{label}</ListItem>
+        </ListItemContainer>
+    );
+};
+export default NsDropdownOption;

package/src/common/dropdown/index.ts

@@ -0,0 +1,3 @@
+export { default as NsDropdown } from './NsDropdown';
+export { default as NsDropdownOption } from './NsDropdownOption';
+export type { DropdownOptionProps, DropdownProps } from './types';

package/src/common/dropdown/stories/NsDropdown.stories.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import NsDropdown from '../NsDropdown';
+import NsDropdownOption from '../NsDropdownOption';
+
+export default {
+    title: 'Components/NsDropdown',
+    decorators: [
+        (story) => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{story()}</div>,
+    ],
+    component: NsDropdown,
+    argTypes: {
+        type: { control: 'select', options: ['unfilled', 'outlined'] },
+        disabled: { control: 'boolean' },
+        dropdownBorderColor: {
+            control: 'select',
+            options: ['primary', 'secondary', 'accentColorA', 'accentColorB', 'accentColorC'],
+        },
+        placeholder: { control: 'text' },
+        closeOnMouseLeave: { control: 'boolean' },
+        showListDivider: { control: 'boolean' },
+    },
+    parameters: {
+        options: [
+            { label: 'Option 1', value: 'Option 1' },
+            { label: 'Option 2', value: 'Option 2' },
+            { label: 'Option 3', value: 'Option 3' },
+        ],
+    },
+    args: {
+        type: 'outlined',
+        disabled: false,
+        dropdownBorderColor: 'primary',
+        closeOnMouseLeave: false,
+        showListDivider: true,
+        selectedValue: '',
+        selectedLabel: '',
+    },
+} as ComponentMeta<typeof NsDropdown>;
+
+export const Dropdown: ComponentStory<typeof NsDropdown> = (args, context) => {
+    const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
+    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
+
+    const options = context.parameters.options;
+    const handleSelect = (value: string) => {
+        setSelectedValue(value);
+        options.find((option: any) => {
+            if (option.value === value) {
+                setSelectedLabel(option.label);
+            }
+        });
+        console.log('Selected:', value);
+    };
+
+    return (
+        <NsDropdown {...args} selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={handleSelect}>
+            {options.map((option: any) => (
+                <NsDropdownOption key={option.value} value={option.value} label={option.label} />
+            ))}
+        </NsDropdown>
+    );
+};

package/src/common/dropdown/stories/NsDropdownCountry.stories.tsx

@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import NsDropdown from '../NsDropdown';
+import NsDropdownOption from '../NsDropdownOption';
+
+export default {
+    title: 'Components/NsDropdown',
+    decorators: [
+        (story) => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>{story()}</div>,
+    ],
+    component: NsDropdown,
+    argTypes: {
+        type: { control: 'select', options: ['unfilled', 'outlined'] },
+        disabled: { control: 'boolean' },
+        dropdownBorderColor: {
+            control: 'select',
+            options: ['primary', 'secondary', 'accentColorA', 'accentColorB', 'accentColorC'],
+        },
+        placeholder: { control: 'text' },
+        closeOnMouseLeave: { control: 'boolean' },
+        showListDivider: { control: 'boolean' },
+    },
+    parameters: {
+        options: [
+            { label: 'English', value: 'english', country: 'United States (US)' },
+            { label: 'French', value: 'french', country: 'France (FR)' },
+            { label: 'German', value: 'german', country: 'Germany (DE)' },
+        ],
+    },
+    args: {
+        selectedValue: 'english',
+        selectedLabel: 'United States (US) | English',
+        type: 'unfilled',
+        disabled: false,
+        dropdownBorderColor: 'accentColorB',
+        closeOnMouseLeave: true,
+        showListDivider: true,
+    },
+} as ComponentMeta<typeof NsDropdown>;
+
+export const DropdownCountry: ComponentStory<typeof NsDropdown> = (args, context) => {
+    const [selectedLabel, setSelectedLabel] = useState(args.selectedLabel);
+    const [selectedValue, setSelectedValue] = useState(args.selectedValue);
+
+    const options = context.parameters.options;
+    const handleSelect = (value: string) => {
+        setSelectedValue(value);
+        options.find((option: any) => {
+            if (option.value === value) {
+                setSelectedLabel(`${option.country} | ${option.label}`);
+            }
+        });
+        console.log('Selected:', value);
+    };
+
+    return (
+        <NsDropdown {...args} selectedValue={selectedValue} selectedLabel={selectedLabel} onSelect={handleSelect}>
+            {options.map((option: any) => (
+                <NsDropdownOption key={option.value} value={option.value} label={option.label} />
+            ))}
+        </NsDropdown>
+    );
+};

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

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+export interface DropdownProps {
+    selectedValue: string;
+    selectedLabel: string;
+    onSelect: (arg: string) => void; // eslint-disable-line
+    children: ReactNode;
+    disabled?: boolean;
+    type?: 'outlined' | 'unfilled';
+    placeholder?: string;
+    dropdownBorderColor?: FoundationTheme.PaletteColors;
+    closeOnMouseLeave?: boolean;
+    showListDivider?: boolean;
+}
+
+export interface DropdownOptionProps {
+    value: string;
+    label: string;
+    selectedValue?: string;
+    onSelect?: (arg: string) => void; // eslint-disable-line
+    showListDivider?: boolean;
+}

package/src/common/icon/IconMap.ts

@@ -1,3 +1,5 @@
+import ArrowDown from './icons/ArrowDown';
+import ArrowUp from './icons/ArrowUp';
 import Cart from './icons/Cart';
 import CartBadge from './icons/CartBadge';
 import InfoFilled from './icons/InfoFilled';
@@ -7,8 +9,12 @@ import CheckVerified from './icons/CheckVerified';
 import SuccessIcon from './icons/SuccessIcon';
 import ErrorIcon from './icons/ErrorIcon';
 import TrashIcon from './icons/TrashIcon';
+import SlashIcon from './icons/SlashIcon';
+import Home from './icons/home';
 
 const IconVariants = {
+    arrowDown: ArrowDown,
+    arrowUp: ArrowUp,
     cart: Cart,
     cartBadge: CartBadge,
     checkShield: CheckShield,
@@ -18,6 +24,8 @@ const IconVariants = {
     infoOutlined: InfoOutlined,
     success: SuccessIcon,
     trash: TrashIcon,
+    slash: SlashIcon,
+    home: Home,
 };
 
 export default IconVariants;

package/src/common/icon/NsIcon.stories.tsx

@@ -11,6 +11,8 @@ export default {
         name: {
             control: 'select',
             options: [
+                'arrowUp',
+                'arrowDown',
                 'cart',
                 'cartBadge',
                 'checkShield',

package/src/common/icon/NsIcon.styled.tsx

@@ -13,7 +13,7 @@ export const IconContainer = styled.div<{ size: NsIconSizeType }>`
     place-content: center;
     place-items: center;
     svg {
-        font-size: ${({ size }) => iconSize[size]};
-        height: auto;
+        width: ${({ size }) => iconSize[size]};
+        height: ${({ size }) => iconSize[size]};
     }
 `;

package/src/common/icon/NsIcon.tsx

@@ -2,7 +2,14 @@ import { IconContainer } from './NsIcon.styled';
 import IconVariants from './IconMap';
 import { NsIconProps } from './types';
 
-const NsIcon = ({ name, size = 'large', color = 'primary', testId = 'icon' }: NsIconProps) => {
+const NsIcon = ({
+    name,
+    size = 'large',
+    color = 'primary',
+    testId = 'icon',
+    className,
+    colorOverride,
+}: NsIconProps) => {
     const Icon = IconVariants[name];
 
     if (!Icon) {
@@ -10,8 +17,8 @@ const NsIcon = ({ name, size = 'large', color = 'primary', testId = 'icon' }: Ns
     }
 
     return (
-        <IconContainer data-testid={testId} size={size}>
-            <Icon color={color as any} />
+        <IconContainer data-testid={testId} size={size} className={className}>
+            <Icon color={colorOverride ? colorOverride : (color as any)} />
         </IconContainer>
     );
 };

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

@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+
+import { SvgIconProps, SvgIcon } from '@mui/material';
+
+const ArrowDown = (props: SvgIconProps) => {
+    return (
+        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M12.7071 16.2071C12.3166 16.5976 11.6834 16.5976 11.2929 16.2071L4.29289 9.20711C3.90237 8.81658 3.90237 8.18342 4.29289 7.79289C4.68342 7.40237 5.31658 7.40237 5.70711 7.79289L12 14.0858L18.2929 7.79289C18.6834 7.40237 19.3166 7.40237 19.7071 7.79289C20.0976 8.18342 20.0976 8.81658 19.7071 9.20711L12.7071 16.2071Z"
+                fill={props.color}
+            />
+        </SvgIcon>
+    );
+};
+
+export default ArrowDown;

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

@@ -0,0 +1,18 @@
+/* eslint-disable max-len */
+
+import { SvgIconProps, SvgIcon } from '@mui/material';
+
+const ArrowUp = (props: SvgIconProps) => {
+    return (
+        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M11.2929 7.79289C11.6834 7.40237 12.3166 7.40237 12.7071 7.79289L19.7071 14.7929C20.0976 15.1834 20.0976 15.8166 19.7071 16.2071C19.3166 16.5976 18.6834 16.5976 18.2929 16.2071L12 9.91421L5.70711 16.2071C5.31658 16.5976 4.68342 16.5976 4.29289 16.2071C3.90237 15.8166 3.90237 15.1834 4.29289 14.7929L11.2929 7.79289Z"
+                fill={props.color}
+            />
+        </SvgIcon>
+    );
+};
+
+export default ArrowUp;

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

@@ -0,0 +1,17 @@
+import { SvgIconProps, SvgIcon } from '@mui/material';
+
+const SlashIcon = (props: SvgIconProps) => {
+    return (
+        <SvgIcon viewBox="0 0 2 22" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                d="M1 1L1 11L0.999999 21"
+                stroke={props.color}
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+            />
+        </SvgIcon>
+    );
+};
+
+export default SlashIcon;

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

@@ -0,0 +1,16 @@
+import { SvgIconProps, SvgIcon } from '@mui/material';
+
+const Home = (props: SvgIconProps) => {
+    return (
+        <SvgIcon viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+            <path
+                fill-rule="evenodd"
+                clip-rule="evenodd"
+                d="M23.77 12.4971C23.8226 12.577 23.8694 12.6606 23.91 12.7471C23.9626 12.8911 23.9864 13.044 23.98 13.1971C23.9839 13.3413 23.9566 13.4845 23.9 13.6171C23.8531 13.7514 23.7781 13.8741 23.68 13.9771C23.5815 14.0833 23.4624 14.1683 23.33 14.2271C23.206 14.2775 23.0738 14.3046 22.94 14.3071C22.7944 14.3048 22.651 14.2706 22.52 14.2071C22.3902 14.1445 22.2745 14.056 22.18 13.9471L12.28 3.33713C12.2277 3.27493 12.1581 3.22968 12.08 3.20713C12.0087 3.18275 11.9313 3.18275 11.86 3.20713C11.803 3.22861 11.7517 3.26281 11.71 3.30713L1.8 13.9271C1.70627 14.0302 1.59203 14.1126 1.46459 14.169C1.33716 14.2254 1.19935 14.2545 1.06 14.2545C0.920651 14.2545 0.78284 14.2254 0.655406 14.169C0.527971 14.1126 0.413727 14.0302 0.32 13.9271C0.217842 13.8273 0.136296 13.7084 0.08 13.5771C0.0284697 13.4396 0.00139518 13.294 0 13.1471C0.0013101 13.0035 0.0284068 12.8612 0.08 12.7271C0.136065 12.5928 0.217559 12.4705 0.32 12.3671L10.26 1.77713C10.6011 1.40957 11.0475 1.15652 11.538 1.05268C12.0286 0.94884 12.5393 0.999295 13 1.19713C13.2985 1.33692 13.5643 1.53794 13.78 1.78713L15.33 3.48713V3.10713C15.3302 2.82197 15.4372 2.54724 15.63 2.33713C15.7244 2.23535 15.8389 2.15434 15.9663 2.09925C16.0937 2.04415 16.2312 2.01619 16.37 2.01713H20C20.1486 2.0007 20.2989 2.01779 20.44 2.06713C20.5669 2.12598 20.6821 2.20728 20.78 2.30713C20.8776 2.41428 20.9525 2.54016 21 2.67713C21.0449 2.80898 21.0652 2.94794 21.06 3.08713V9.56713L23.77 12.4971ZM19 7.33713V4.17713H17.42V5.67713L19 7.33713ZM19.28 13.94C19.4773 13.7598 19.7329 13.6569 20 13.65C20.2667 13.6586 20.5217 13.7613 20.72 13.94C20.8169 14.0298 20.8951 14.1378 20.95 14.258C21.0049 14.3781 21.0355 14.508 21.04 14.64V22.02C21.0355 22.152 21.0049 22.2819 20.95 22.402C20.8951 22.5222 20.8169 22.6302 20.72 22.72C20.5232 22.8997 20.2665 22.9996 20 23H14.22C13.9504 23.0001 13.6903 22.9004 13.49 22.72C13.3949 22.6294 13.3185 22.5209 13.2653 22.4008C13.2121 22.2807 13.1831 22.1513 13.18 22.02V16.66C13.18 16.6134 13.1691 16.5675 13.1483 16.5258C13.1275 16.4842 13.0972 16.4479 13.06 16.42C13.0207 16.3807 12.9739 16.3498 12.9223 16.3292C12.8707 16.3086 12.8155 16.2986 12.76 16.3H11.3C11.2443 16.2974 11.1887 16.3068 11.137 16.3275C11.0852 16.3482 11.0385 16.3797 11 16.42C10.9597 16.4426 10.9252 16.4743 10.8992 16.5124C10.8732 16.5506 10.8564 16.5943 10.85 16.64V22.04C10.851 22.173 10.8229 22.3046 10.7676 22.4255C10.7123 22.5464 10.6312 22.6538 10.53 22.74C10.4345 22.8321 10.3217 22.9043 10.1981 22.9523C10.0745 23.0004 9.94256 23.0234 9.80997 23.02H3.99997C3.85815 23.0235 3.71703 22.9988 3.58484 22.9473C3.45265 22.8958 3.33202 22.8186 3.22997 22.72C3.13304 22.6302 3.05485 22.5222 2.99993 22.402C2.945 22.2819 2.91443 22.152 2.90997 22.02V14.64C2.91311 14.5063 2.94305 14.3745 2.99802 14.2526C3.05298 14.1306 3.13186 14.0209 3.22997 13.93C3.43312 13.7554 3.69211 13.6594 3.95997 13.6594C4.22783 13.6594 4.48683 13.7554 4.68997 13.93C4.78627 14.0218 4.86329 14.1318 4.91652 14.2538C4.96975 14.3757 4.99812 14.507 4.99997 14.64V21.09H8.76997V16.68C8.7711 16.3671 8.83749 16.0578 8.9649 15.772C9.09232 15.4861 9.27797 15.23 9.50997 15.02C9.74648 14.8043 10.0212 14.6348 10.32 14.52C10.622 14.4001 10.9451 14.3423 11.27 14.35H12.73C13.3796 14.3465 14.0071 14.5854 14.49 15.02C14.7181 15.2289 14.9014 15.482 15.0286 15.7639C15.1558 16.0459 15.2243 16.3507 15.23 16.66V21.07H18.96V14.64C18.9609 14.5073 18.9899 14.3764 19.045 14.2557C19.1002 14.1351 19.1803 14.0275 19.28 13.94Z"
+                fill={props?.color}
+            />
+        </SvgIcon>
+    );
+};
+
+export default Home;

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

@@ -3,6 +3,8 @@ import { FoundationTheme } from '@nuskin/foundation-theme';
 export type NsIconSizeType = 'small' | 'medium' | 'large' | 'xLarge';
 
 export type NsIconNameType =
+    | 'arrowDown'
+    | 'arrowUp'
     | 'cart'
     | 'cartBadge'
     | 'checkShield'
@@ -11,10 +13,14 @@ export type NsIconNameType =
     | 'infoFilled'
     | 'infoOutlined'
     | 'success'
-    | 'trash';
+    | 'trash'
+    | 'slash'
+    | 'home';
 export type NsIconProps = {
     name: NsIconNameType;
     size?: NsIconSizeType;
     color?: FoundationTheme.PaletteColors;
     testId?: string;
+    className?: string;
+    colorOverride?: string;
 };

package/src/common/index.ts

@@ -19,6 +19,12 @@ export * from './nav-tab';
 export { default as NsNavProductCard } from './nav-product-card';
 export * from './nav-product-card';
 
+export { default as NsBanner } from './banner';
+export * from './banner';
+
+export { default as NsBreadcrumb } from './breadcrumb';
+export * from './breadcrumb';
+
 export { default as Typography } from './typography';
 export * from './typography';
 
@@ -29,3 +35,5 @@ export * from './carousal';
 export * from './icon';
 
 export * from './cart-icon';
+
+export * from './dropdown';

package/src/common/nav-tab/NsNavTab.tsx

@@ -20,14 +20,14 @@ export const NsNavTabComponent = (props: PropsWithChildren<NSNavTabComponentProp
                 <div onMouseLeave={handleLeave} data-testid="nav-container-draw" className="p-0 m-0">
                     <div className="pb-0.5">
                         <div className="flex">
-                            {tabs?.map((tab, i) => {
+                            {tabs?.map((tab) => {
                                 const handleMouseEnter = () => {
                                     setActive(tab.tabName);
                                 };
                                 return (
                                     <div
-                                        key={i}
-                                        data-testid={tab.tabName}
+                                        key={tab?.tabName}
+                                        data-testid={tab?.tabName}
                                         className="relative cursor-pointer"
                                         onMouseEnter={handleMouseEnter}
                                     >

package/src/common/typography/NsTypography.tsx

@@ -11,6 +11,7 @@ const NsTypography = ({
     decoration = 'none',
     color = 'primary',
     additionalProps = {},
+    colorOverride = '',
 }: PropsWithChildren<NsTypographyProps>) => {
     return (
         <StyledTypography
@@ -19,6 +20,7 @@ const NsTypography = ({
             weight={weight}
             variant={variant}
             decoration={decoration}
+            colorOverride={colorOverride}
             color={color}
             {...additionalProps}
         >

package/src/common/typography/Typography.styled.tsx

@@ -2,9 +2,7 @@ import { css } from '@emotion/react';
 import { styled, GlobalStyles, ColorUtils } from '@nuskin/foundation-theme';
 import { NsTypographyProps } from './types';
 
-const {
-    getPaletteColor,
-} = ColorUtils;
+const { getPaletteColor } = ColorUtils;
 
 const variantStyles = {
     h1: 'font-size: 36px; line-height: 44px;',
@@ -32,7 +30,8 @@ const fontWeightMap = {
 
 export const StyledTypography = styled.div<NsTypographyProps>`
     font-family: Inter;
-    color: ${({ color, theme }) => getPaletteColor(theme, color)};
+    color: ${({ color, theme, colorOverride }) =>
+        colorOverride?.startsWith('#') ? colorOverride : getPaletteColor(theme, color)};
     font-weight: ${({ weight = 'normal' }) => fontWeightMap[weight]};
     font-style: ${({ fontStyle }) => fontStyle};
     ${({ variant = 'h1' }) => variantStyles[variant]};

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

@@ -26,4 +26,5 @@ export type NsTypographyProps = {
     color?: FoundationTheme.PaletteColors;
     component?: 'div' | 'span' | 'p';
     className?: string;
+    colorOverride?: string;
 } & AdditionalProps;