@nuskin/foundation-ui-components 1.33.0-1253-feature.3 → 2.0.0

package/src/common/nav-product-card/NsNavProductCard.styled.tsx

@@ -1,24 +0,0 @@
-import { styled } from '@nuskin/foundation-theme';
-
-export const ProductCardContainer = styled.div`
-    display: flex;
-
-    img {
-        flex: 1 0 0;
-        display: block;
-        margin-right: 15px;
-        max-height: 200px;
-        min-height: 100px;
-        max-width: 200px;
-        min-width: 100px;
-        position: unset !important;
-        object-fit: contain;
-    }
-
-    .text-container {
-        max-width: 200px;
-        min-width: 100px;
-        flex: 1 0 0;
-        text-align: left;
-    }
-`;

package/src/common/nav-product-card/NsNavProductCard.tsx

@@ -1,27 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { NsTypography } from '../';
-import { BynderMedia } from '../image/BynderMedia';
-import { ProductCardContainer } from './NsNavProductCard.styled';
-import { NsNavProductCardProps } from './types.d';
-
-export const NsNavProductCard = ({
-    productImg,
-    productDescription,
-    productName,
-    className = '',
-}: NsNavProductCardProps): ReactElement => {
-    return (
-        <ProductCardContainer className={className}>
-            <BynderMedia imageDetail={productImg} />
-            <div className="text-container">
-                <NsTypography variant="h5" color="primary" className="mt-11 mb-3.5 underline-hover" weight="bold">
-                    {productName}
-                </NsTypography>
-                <NsTypography variant="body-s" color="primary" weight="light">
-                    {productDescription}
-                </NsTypography>
-            </div>
-        </ProductCardContainer>
-    );
-};

package/src/common/nav-product-card/index.ts

@@ -1,2 +0,0 @@
-export { NsNavProductCard as NsNavProductCard } from './NsNavProductCard';
-export type { NsNavProductCardProps } from './types.d';

package/src/common/nav-product-card/types.d.ts

@@ -1,9 +0,0 @@
-import { AdditionalProps } from '../common.types';
-import { BynderImageDataType } from '../image/types';
-
-export interface NsNavProductCardProps extends AdditionalProps {
-    productImg: BynderImageDataType;
-    productName: string;
-    className?: string;
-    productDescription: string;
-}

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

@@ -1,41 +0,0 @@
-import {
-    ReactElement,
-    ReactNode,
-} from 'react';
-
-import { Show } from '../utility';
-import {
-    NavDrawerContainer,
-    NavDrawerStyled,
-} from './NsNavTab.styled';
-
-type NavDrawerProps = {
-    active: string | null;
-    showDrawer: boolean;
-    content: ReactNode;
-};
-export const NavDrawer = ({ active, showDrawer, content }: NavDrawerProps): ReactElement => {
-    return (
-        <NavDrawerStyled data-testid="nav-drawer-container" className="nav-drawer">
-            <Show when={Boolean(active) && showDrawer}>
-                <NavDrawerContainer
-                    data-testid="nav-drawer"
-                    initial={{
-                        height: 0,
-                    }}
-                    animate={{
-                        height: 'auto',
-                    }}
-                    exit={{
-                        height: 0,
-                    }}
-                    transition={{
-                        duration: 0.3,
-                    }}
-                >
-                    <div className="drawer-container">{content}</div>
-                </NavDrawerContainer>
-            </Show>
-        </NavDrawerStyled>
-    );
-};

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

@@ -1,64 +0,0 @@
-import { ReactElement } from 'react';
-
-import { NavTabs, NsLink, NsTypography } from '../';
-import { Show } from '../utility';
-import { NavTabBox, NavTabUnderLine, NavTitlesBox } from './NsNavTab.styled';
-
-type NavTitlesProps = {
-    tabs: NavTabs[];
-    setActive(_x: string): void;
-    active: string | null;
-    tabTitleClassName?: string;
-};
-
-export const NavTitles = ({ tabs, setActive, active, tabTitleClassName }: NavTitlesProps): ReactElement => {
-    const NavTitleTypography = (tab: NavTabs) => (
-        <NsTypography
-            variant={tab.textVariant}
-            additionalProps={{ ...tab?.liveTag }}
-            className={`${tabTitleClassName} ${!active ? 'opacity-8' : ''}`}
-            color={tab.tabName === active ? tab.activeColor : tab.color}
-            noSpacing
-        >
-            {tab.tabName}
-        </NsTypography>
-    );
-
-    return (
-        <NavTitlesBox className="desktop-nav-titles">
-            {tabs?.map((tab) => {
-                const handleMouseEnter = () => {
-                    setActive(tab.tabName);
-                };
-                return (
-                    <div
-                        key={tab?.tabName}
-                        data-testid={tab?.tabName}
-                        className="relative cursor-pointer"
-                        onMouseEnter={handleMouseEnter}
-                    >
-                        <NavTabBox
-                            className="nav-tab-box"
-                            data-testid={tab.tabName + '-list'}
-                            transition={{
-                                duration: 0.3,
-                            }}
-                            animate
-                        >
-                            {tab?.tabLink ? (
-                                <NavTitleTypography {...tab}>
-                                    <NsLink href={tab.tabLink} underlineOnHover={false} />
-                                </NavTitleTypography>
-                            ) : (
-                                <NavTitleTypography {...tab} />
-                            )}
-                        </NavTabBox>
-                        <Show when={active === tab.tabName}>
-                            <NavTabUnderLine data-testid="underline" layoutId="underline" color={tab.activeColor} />
-                        </Show>
-                    </div>
-                );
-            })}
-        </NavTitlesBox>
-    );
-};

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

@@ -1,64 +0,0 @@
-import { fireEvent } from '@testing-library/react';
-import { NsNavTabComponent } from './NsNavTab';
-import { NavTabs } from './types';
-import { render } from '@/test-utils/index';
-
-const tabs: NavTabs[] = [
-    {
-        tabName: 'Skin & Beauty',
-        tabContent: <>Skin & Beauty</>,
-        activeColor: 'success',
-        textVariant: 'h5',
-    },
-    {
-        tabName: 'Beauty Devices',
-        tabContent: <>Beauty Devices</>,
-        color: 'primary',
-        activeColor: 'success',
-        textVariant: 'h5',
-    },
-    {
-        tabName: 'Product Lines',
-        tabContent: <>Product Lines</>,
-        color: 'primary',
-        activeColor: 'success',
-        textVariant: 'h5',
-    },
-    {
-        tabName: 'New & Loved',
-        tabContent: <>New & Loved</>,
-        color: 'primary',
-        activeColor: 'success',
-        textVariant: 'h5',
-    },
-];
-
-describe('Nav Bar Component', () => {
-    it('1. should render Nav Bar Component with variant', () => {
-        const { container } = render(
-            <NsNavTabComponent tabTitleClassName="text-center" className="mb-2" tabs={tabs} />
-        );
-        const li = container.querySelectorAll('li');
-        expect(li.length).toBe(4);
-        li.forEach((list, i) => expect(list).toHaveTextContent(tabs[i].tabName));
-        expect(container).toBeInTheDocument();
-    });
-
-    it('2. should open and close the drawer', () => {
-        const { container, getByTestId } = render(<NsNavTabComponent showDrawer className="mb-2" tabs={tabs} />);
-        const li = container.querySelectorAll('li');
-        expect(li.length).toBe(4);
-        li.forEach((list, i) => expect(list).toHaveTextContent(tabs[i].tabName));
-        expect(container).toBeInTheDocument();
-        fireEvent.mouseOver(getByTestId('Skin & Beauty'));
-        expect(getByTestId('nav-drawer')).toBeInTheDocument();
-        fireEvent.mouseLeave(getByTestId('Skin & Beauty'));
-        expect(getByTestId('nav-drawer-container').firstChild).not.toBeInTheDocument();
-    });
-
-    it('3. should show the underline on hover', () => {
-        const { getByTestId } = render(<NsNavTabComponent showDrawer={false} className="mb-2" tabs={tabs} />);
-        fireEvent.mouseOver(getByTestId('Skin & Beauty'));
-        expect(getByTestId('underline')).toBeInTheDocument();
-    });
-});

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

@@ -1,36 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsNavTab } from '.';
-
-type ComponentType = typeof NsNavTab;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    title: 'Components/Navigation/NsNavTab',
-    component: NsNavTab,
-    decorators: [withCenterDecorator],
-    argTypes: {
-        tabs: { control: 'object' },
-    },
-    args: {
-        tabs: [
-            {
-                tabName: 'Tab One',
-                activeColor: 'info',
-                color: 'primary',
-                tabContent: 'Tab one content',
-                textVariant: 'h5',
-            },
-            {
-                tabName: 'Tab Two',
-                activeColor: 'info',
-                color: 'primary',
-                tabContent: 'Tab two content',
-                textVariant: 'h5',
-            },
-        ],
-    },
-} as MetaStory;
-
-export const NavTab: Story = {};

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

@@ -1,74 +0,0 @@
-import { FoundationTheme, styled, ColorUtils } from '@nuskin/foundation-theme';
-import { motion } from 'framer-motion';
-
-const { paletteColor } = ColorUtils;
-
-export const NavTabContainer = styled.div`
-    .shadow {
-        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-    }
-`;
-
-export const NavTabBox = styled(motion.li)`
-    margin: 0px 14px;
-    align-items: center;
-    white-space: normal;
-    text-align: center;
-    cursor: pointer;
-    list-style: none;
-    position: relative;
-    min-width: 60px;
-    padding: 8px 4px;
-`;
-
-export const NavTabUnderLine = styled(motion.div)<{ color?: FoundationTheme.PaletteColors }>`
-    width: 100%;
-    position: absolute;
-    height: 3px;
-    background-color: ${({ theme, color }) => paletteColor(color)({ theme })};
-`;
-
-export const NavDrawerStyled = styled.div`
-    position: absolute;
-    left: 0;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: flex-start;
-    z-index: 600;
-    width: 100%;
-    max-height: 590px;
-
-    background-color: ${paletteColor('primary', 'contrastText')};
-    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-    transition: all 0.15s ease-in-out;
-    overflow: hidden;
-`;
-
-export const NavDrawerContainer = styled(motion.div)`
-    ::before {
-        content: '';
-        position: absolute;
-        top: -5px;
-        width: 100%;
-        height: 5px;
-        box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-        z-index: 1;
-    }
-    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.15);
-    background-color: ${paletteColor('primary', 'contrastText')};
-    width: 100%;
-    text-align: left;
-    max-height: 590px;
-    overflow: auto;
-    .drawer-container {
-        max-width: 1024px;
-        margin: 0 auto;
-        overflow: hidden;
-    }
-`;
-
-export const NavTitlesBox = styled.div`
-    display: flex;
-    height: 39px;
-`;

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

@@ -1,43 +0,0 @@
-import React, {
-    ReactElement,
-    useCallback,
-    useState,
-} from 'react';
-
-import { LayoutGroup } from 'framer-motion';
-
-import { NavDrawer } from './NavDrawer';
-import { NavTitles } from './NavTitles';
-import { NavTabContainer } from './NsNavTab.styled';
-import { NsNavTabComponentProps } from './types.d';
-
-export const NsNavTabComponent = ({
-    tabs,
-    className,
-    tabTitleClassName,
-    showDrawer = true,
-}: NsNavTabComponentProps): ReactElement => {
-    const [active, setActive] = useState<string | null>(null);
-
-    const activeTab = tabs?.find((tab) => tab.tabName === active);
-
-    const handleLeave = useCallback(() => {
-        setActive(null);
-    }, []);
-
-    return (
-        <NavTabContainer data-testid="nav-container" className={`${className} ns-nav-tab-component`}>
-            <LayoutGroup>
-                <div onMouseLeave={handleLeave} data-testid="nav-container-draw" className="p-0 m-0">
-                    <NavTitles
-                        tabTitleClassName={tabTitleClassName}
-                        tabs={tabs}
-                        active={active}
-                        setActive={setActive}
-                    />
-                    <NavDrawer active={active} content={activeTab?.tabContent} showDrawer={showDrawer} />
-                </div>
-            </LayoutGroup>
-        </NavTabContainer>
-    );
-};

package/src/common/nav-tab/index.ts

@@ -1,2 +0,0 @@
-export { NsNavTabComponent as NsNavTab } from './NsNavTab';
-export type { NsNavTabComponentProps, NavTabs } from './types';

package/src/common/nav-tab/types.d.ts

@@ -1,21 +0,0 @@
-import { ReactNode } from 'react';
-import { FoundationTheme } from '@nuskin/foundation-theme';
-import { Variants } from '../typography/types';
-import { AdditionalProps, CslpTag } from '../common.types';
-
-export type NavTabs = {
-    tabName: string;
-    tabLink?: string;
-    tabContent?: ReactNode;
-    activeColor: FoundationTheme.PaletteColors;
-    color?: FoundationTheme.PaletteColors;
-    textVariant: Variants;
-    liveTag?: CslpTag;
-};
-
-export type NsNavTabComponentProps = {
-    tabs: NavTabs[];
-    className?: string;
-    tabTitleClassName?: string;
-    showDrawer?: boolean;
-} & AdditionalProps;

package/src/common/progress/NsProgress.spec.tsx

@@ -1,47 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import Progress from './NsProgress';
-
-describe(' NsProgress Component', () => {
-    test('should render Progress bar', () => {
-        render(<Progress barColor="primary" value={10}></Progress>);
-
-        const pbar = screen.getByRole('progressbar');
-
-        expect(pbar).toBeInTheDocument();
-    });
-
-    it('matches the height of the progress bar to the width of the container', () => {
-        // Define the props
-        const value = 50;
-
-        // Render the StyledProgress component with the value prop
-        const { container } = render(<Progress barColor="primary" value={value} />);
-
-        // Get the progress bar element
-        const progressBar = container.querySelector('.MuiLinearProgress-bar');
-
-        // Check if the progress bar element exists
-        if (progressBar) {
-            // Retrieve the computed width of the container element
-            const containerWidth = container.clientWidth;
-
-            // Retrieve the computed styles of the progress bar
-            const progressBarStyle = getComputedStyle(progressBar);
-            const progressBarHeight = parseFloat(progressBarStyle.height);
-            const progressBarPadding =
-                parseFloat(progressBarStyle.paddingTop) + parseFloat(progressBarStyle.paddingBottom);
-            const progressBarBorder =
-                parseFloat(progressBarStyle.borderTopWidth) + parseFloat(progressBarStyle.borderBottomWidth);
-
-            // Calculate the expected height of the progress bar
-            const expectedHeight = containerWidth - progressBarPadding - progressBarBorder;
-
-            // Assert that the height of the progress bar matches the width of the container
-            expect(progressBarHeight).toBe(expectedHeight);
-        } else {
-            // Handle the case where the progress bar element is not found
-            throw new Error('Progress bar element not found');
-        }
-    });
-});

package/src/common/progress/NsProgress.stories.tsx

@@ -1,45 +0,0 @@
-import { ReactElement } from 'react';
-
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { PaletteColors } from '@nuskin/foundation-theme';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import NsProgress from './NsProgress';
-
-type ComponentType = typeof NsProgress;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    component: NsProgress,
-    title: 'Components/Inputs/NsProgress',
-    decorators: [withCenterDecorator],
-    argTypes: {
-        barColor: {
-            control: 'select',
-            options: PaletteColors,
-            description: 'defines the color for the completed progress',
-        },
-        height: {
-            description: 'height of the bar',
-        },
-        value: {
-            description: 'value of the progress done',
-        },
-        backgroundColor: {
-            control: 'select',
-            options: PaletteColors,
-            description: 'color of incomplete progress',
-        },
-    },
-} as MetaStory;
-
-export const ProgressBar: Story = {
-    args: {
-        barColor: 'primary',
-        backgroundColor: 'secondary',
-        value: 40,
-        height: '10px',
-        body: (<span>{'% Complete'}</span>) as ReactElement,
-    },
-};

package/src/common/progress/NsProgress.styled.tsx

@@ -1,56 +0,0 @@
-import { styled, ColorUtils } from '@nuskin/foundation-theme';
-import { LinearProgress } from '@mui/material';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { NsProgressProps } from './types';
-import { NsTypography } from '../typography';
-
-const { color, paletteColor } = ColorUtils;
-export const StyledCheckCircle = styled(CheckCircleIcon)`
-    color: ${color('neutral', '50')};
-    padding-top: 0.6em;
-    padding-right: 0.5em;
-    justify-self: flex-end;
-`;
-
-export const ProgressInfo = styled(NsTypography)`
-    display: flex;
-    justify-content: flex-end;
-    font-weight: 700;
-    text-transform: uppercase;
-`;
-
-export const StyledLinearProgress = styled(LinearProgress)<Omit<NsProgressProps, 'value'>>(
-    ({ height, backgroundColor, barColor, theme }) => ({
-        width: '334px',
-        height,
-        backgroundColor: paletteColor(backgroundColor)({ theme }),
-        borderRadius: '8px',
-        display: 'inline-block',
-
-        '.MuiLinearProgress-bar': {
-            backgroundColor: paletteColor(barColor)({ theme }),
-        },
-    })
-);
-export const StyledProgress = styled('div')`
-    display: grid;
-    grid-template-rows: 30px 30px;
-    .progress-info {
-        justify-content: flex-end;
-        display: flex;
-        align-items: center;
-    }
-    .progress-bar {
-        display: flex;
-        align-items: center;
-        .MuiSvgIcon-root {
-            padding: 0;
-            margin: 0;
-            height: 100%;
-            position: relative;
-            left: -4px;
-            scale: 1.3
-        }
-    }
-`;
-

package/src/common/progress/NsProgress.tsx

@@ -1,29 +0,0 @@
-import React, { ReactElement } from 'react';
-
-import { ProgressInfo, StyledCheckCircle, StyledLinearProgress, StyledProgress } from './NsProgress.styled';
-import { NsProgressProps } from './types';
-
-const NsProgress = (props: NsProgressProps): ReactElement => {
-    const { barColor, backgroundColor, height, value, body } = props;
-    return (
-        <StyledProgress className="ns-progress">
-            <ProgressInfo variant="body-xs" className="progress-info">
-                {value}
-                <span>{body ?? ' % Complete'}</span>
-            </ProgressInfo>
-            <div className="progress-bar">
-                <StyledLinearProgress
-                    variant="determinate"
-                    role="progressbar"
-                    value={value}
-                    height={height}
-                    barColor={barColor}
-                    backgroundColor={backgroundColor}
-                />
-                <StyledCheckCircle />
-            </div>
-        </StyledProgress>
-    );
-};
-
-export default NsProgress;

package/src/common/progress/index.ts

@@ -1,2 +0,0 @@
-export { default as NsProgress } from './NsProgress';
-export type { NsProgressProps } from './types.d';

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

@@ -1,21 +0,0 @@
-import { FoundationTheme } from '@nuskin/foundation-theme';
-import { ReactNode } from 'react';
-
-declare module '@mui/material/LinearProgress' {
-    // eslint-disable-next-line no-unused-vars
-    interface LinearProgressPropsColorOverrides {
-        neutral: true;
-        accentColorA: true;
-        accentColorB: true;
-        accentColorC: true;
-        accentColorD: true;
-    }
-}
-
-export type NsProgressProps = {
-    barColor?: FoundationTheme.PaletteColors;
-    backgroundColor?: FoundationTheme.PaletteColors;
-    height?: string;
-    value: number;
-    body?: ReactNode;
-};