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

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

@@ -1,34 +0,0 @@
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { NsMediumCard } from '../';
-import { ImageData1 } from '../fixtures/ImageData1';
-
-type ComponentType = typeof NsMediumCard;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    component: NsMediumCard,
-    title: 'Components/Containers/Card/NsMediumCard',
-    argTypes: {},
-    decorators: [withCenterDecorator],
-} as MetaStory;
-
-export const Default: Story = {
-    args: {
-        title: 'Sustainability',
-        titleFontWeight: 'bold',
-        subtitle:
-            'We’re committed to keeping our global communities clean, safe, and protected for the future. We’re proud to embrace sustainable practices today for a resource-rich tomorrow.',
-        backgroundImageDetail: ImageData1,
-        button: {
-            showButton: true,
-            buttonText: 'SEE WHAT WE’RE DOING',
-            buttonVariant: 'outlined',
-            buttonColor: 'primary',
-            url: 'https://www.forceforgood.org/',
-        },
-        fluid: false,
-    },
-};

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

@@ -1,20 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { NsPost } from '../';
-import { ImageData1 } from '../fixtures/ImageData1';
-
-type ComponentType = typeof NsPost;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    component: NsPost,
-    title: 'Components/Containers/Card/NsPost',
-} as MetaStory;
-
-export const Default: Story = {
-    args: {
-        text: '38 New Beauty Products Our Editors Are Loving',
-        body: 'SPA & BEAUTY TODAY',
-        backgroundImageDetail: ImageData1,
-    },
-};

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

@@ -1,31 +0,0 @@
-import type { StoryObj, Meta } from '@storybook/react';
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsSmallFullCard } from '../';
-import { ImageData1 } from '../fixtures/ImageData1';
-
-type ComponentType = typeof NsSmallFullCard;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    component: NsSmallFullCard,
-    title: 'Components/Containers/Card/NsSmallFullCard',
-    argTypes: {},
-    decorators: [withCenterDecorator],
-} as MetaStory;
-
-export const Default: Story = {
-    args: {
-        title: 'Title',
-        subtitle: 'Subtitle',
-        backgroundImageDetail: ImageData1,
-        button: {
-            showButton: true,
-            buttonText: 'Placeholder',
-            buttonVariant: 'contained',
-            buttonColor: 'primary',
-            url: '#',
-            fullWidth: true,
-        },
-    },
-};

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

@@ -1,32 +0,0 @@
-import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { NsXLargeCard } from '../';
-import { ImageData1 } from '../fixtures/ImageData1';
-
-type ComponentType = typeof NsXLargeCard;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
-    component: NsXLargeCard,
-    title: 'Components/Containers/Card/NsXLargeCard',
-    argTypes: {},
-    decorators: [withCenterDecorator],
-} as MetaStory;
-
-export const Default: Story = {
-    args: {
-        title: 'Title',
-        subtitle: 'Subtitle',
-        backgroundImageDetail: ImageData1,
-        button: {
-            showButton: true,
-            buttonText: 'Discover more',
-            buttonVariant: 'outlined',
-            buttonColor: 'secondary',
-            url: '#',
-            endIcon: 'home',
-        },
-    },
-};

package/src/common/card/stories/data.ts

@@ -1,43 +0,0 @@
-export const brandImages = [
-    'https://media.nuskin.com/m/63a454ff90d038b4/webimage-brand-epoch.png',
-    'https://media.nuskin.com/m/3eb406f465d4b0fe/webimage-brand-sunright.png',
-    'https://media.nuskin.com/m/2d3276518912283b/webimage-brand-nu_colour.png',
-    'https://media.nuskin.com/m/3855d3836d920639/webimage-brand-nuskin180.png',
-    'https://media.nuskin.com/m/6245528b8f76ad32/webimage-brand-ageLOC.png',
-    'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
-    'https://media.nuskin.com/m/4bd7ab9b46bd456d/webimage-brand-pharmanex.png',
-    'https://media.nuskin.com/m/501d638a8af80087/webimage-brand-ap24.png',
-    'https://media.nuskin.com/m/f3a91129cbbae32/webimage-brand-nutricentials.png',
-];
-
-export const brandBackImages = [
-    'https://media.nuskin.com/m/549aa3e5184434d8/webimage-brand-epoch-optweb.png',
-    'https://media.nuskin.com/m/14e238d7599e1811/webimage-brand-sunright.png',
-    'https://media.nuskin.com/m/2543e79419276727/webimage-brand-nu_colour-optweb.png',
-    'https://media.nuskin.com/m/446c7a2aad513f58/webimage-brand-nu_skin_180-optweb.png',
-    'https://media.nuskin.com/m/42911c8b05600476/webimage-brand-ageloc-optweb.png',
-    'https://media.nuskin.com/m/3604b5202b0b64c6/webimage-brand-lumispa-optweb.png',
-    'https://media.nuskin.com/m/4a1245a63c595262/webimage-brand-pharmanex-optweb.png',
-    'https://media.nuskin.com/m/14a0fd6ef63e5dbb/webimage-brand-ap_24.png',
-    'https://media.nuskin.com/m/298104036e885b40/webimage-brand-nutricentials.png',
-];
-
-export const brandTitles = [
-    'Epoch',
-    'Sunright',
-    'Nu Color',
-    '180 System',
-    'ageLOC',
-    'ageLOC LumiSpa',
-    'Pharmanex',
-    'AP 24',
-    'Nutricentials',
-];
-export const brandEntries = brandTitles.map((title, index) => {
-    return {
-        title,
-        backgroundImage: brandBackImages[index],
-        brandImage: brandImages[index],
-        id: index,
-    };
-});

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

@@ -1,25 +0,0 @@
-import { AdditionalProps, CslpTag } from '../common.types';
-import { NsIconNameType } from '../icon';
-
-export type NsFfgCardProps = AdditionalProps & {
-    topImageUrl: string;
-    topImageAlt: string;
-    text: string;
-    cardLink: { href: string; title: string };
-    onClick(): void;
-    cslp?: {
-        card_text: CslpTag;
-        action_text: CslpTag;
-    };
-};
-
-export type NsCardButton = {
-    showButton?: boolean;
-    fullWidth?: boolean;
-    url?: string;
-    endIcon?: NsIconNameType;
-    buttonText: string;
-    buttonVariant?: 'text' | 'outlined' | 'contained';
-    buttonColor?: 'secondary' | 'primary';
-    showArrowWithText?: boolean;
-};

package/src/common/carousal/CarousalControl.tsx

@@ -1,47 +0,0 @@
-import { ReactElement } from 'react';
-
-import { styled } from '@nuskin/foundation-theme';
-
-import { NsIcon, NsLink, NsTypography } from '../';
-import IconWrapper from './IconWrapper';
-
-interface CarousalControlProps {
-    next(): void;
-    prev(): void;
-    viewAllLabel: string;
-    viewAllUrl: string;
-}
-/*
-This component is visible over the carousal and it has prev and next buttons and view all link
-*/
-const Wrapper = styled.div`
-    display: flex;
-    justify-content: flex-end;
-`;
-const InnerWrapper = styled.div`
-    display: flex;
-    gap: 20px;
-    align-items: center;
-`;
-const CarousalControl = ({ next, prev, viewAllUrl, viewAllLabel }: CarousalControlProps): ReactElement => {
-    return (
-        <Wrapper>
-            <InnerWrapper>
-                {viewAllUrl ? (
-                    <NsLink href={viewAllUrl} underlineOnHover={false}>
-                        <NsTypography decoration="underline" variant="body-l">
-                            {viewAllLabel}
-                        </NsTypography>
-                    </NsLink>
-                ) : null}
-                <IconWrapper onClick={prev} className="carousal-prev-button">
-                    <NsIcon name="arrowLeft" />
-                </IconWrapper>
-                <IconWrapper onClick={next} className="carousal-next-button">
-                    <NsIcon name="arrowRight" />
-                </IconWrapper>
-            </InnerWrapper>
-        </Wrapper>
-    );
-};
-export default CarousalControl;

package/src/common/carousal/IconWrapper.tsx

@@ -1,33 +0,0 @@
-import { PropsWithChildren, ReactElement } from 'react';
-
-import { Box } from '@mui/material';
-import { styled } from '@nuskin/foundation-theme';
-
-type IconWrapperProps = PropsWithChildren<{
-    onClick(): void;
-    className?: string;
-}>;
-const options = {};
-const Wrapper = styled(
-    Box,
-    options
-)(({ theme }) => {
-    const strokeColor = theme.palette?.primary?.main ?? '#252525';
-    return {
-        display: 'flex',
-        width: 'auto',
-        border: `2px solid ${strokeColor}`,
-        borderRadius: '3px',
-        cursor: 'pointer',
-        padding: '9px',
-        boxSizing: 'content-box',
-    };
-});
-const IconWrapper = ({ children, onClick, className }: IconWrapperProps): ReactElement => {
-    return (
-        <Wrapper component="span" className={className || ''} onClick={onClick}>
-            {children}
-        </Wrapper>
-    );
-};
-export default IconWrapper;

package/src/common/carousal/NsCarousal.tsx

@@ -1,65 +0,0 @@
-import 'slick-carousel/slick/slick-theme.css';
-import 'slick-carousel/slick/slick.css';
-
-import { ReactElement, ReactNode, useCallback, useRef } from 'react';
-
-import Slider from 'react-slick';
-
-import Box from '@mui/material/Box';
-import { styled } from '@nuskin/foundation-theme';
-
-import CarousalControl from './CarousalControl';
-import defaultCarousalSettings from './slickSetting';
-
-const SlickContainer = styled(Box)(() => {
-    return {
-        padding: '30px 0 60px',
-        '.slick-slide': {
-            display: 'flex',
-            justifyContent: 'center',
-        },
-    };
-});
-interface CarousalProps<T = any> {
-    entries: T[];
-    renderEntry(entry: T, index: number): ReactNode;
-    allEntryLink?: string;
-    allEntryLabel?: string;
-    settings: any;
-    showControlButtons?: boolean;
-}
-
-export default function NsCarousal({
-    entries,
-    renderEntry,
-    allEntryLink = '',
-    settings,
-    allEntryLabel = 'View All',
-    showControlButtons = true,
-}: CarousalProps): ReactElement {
-    const sliderRef = useRef();
-    const prev = useCallback(() => {
-        if (sliderRef.current) {
-            const slider = sliderRef.current as any;
-            slider.slickPrev();
-        }
-    }, [sliderRef]);
-    const next = useCallback(() => {
-        if (sliderRef.current) {
-            const slider = sliderRef.current as any;
-            slider.slickNext();
-        }
-    }, [sliderRef]);
-    return (
-        <SlickContainer className="brand-carousal">
-            {showControlButtons ? (
-                <CarousalControl prev={prev} next={next} viewAllUrl={allEntryLink} viewAllLabel={allEntryLabel} />
-            ) : null}
-            <Slider {...{ ...defaultCarousalSettings, ...settings }} ref={sliderRef as any}>
-                {entries.map((entry, index) => {
-                    return renderEntry(entry, index);
-                })}
-            </Slider>
-        </SlickContainer>
-    );
-}

package/src/common/carousal/NsScrollingCarousal.tsx

@@ -1,60 +0,0 @@
-import React, { ReactElement, useMemo } from 'react';
-
-import Slider from 'react-slick';
-
-import { styled } from '@nuskin/foundation-theme';
-
-import { NsScrollingCarousalProps } from '../';
-
-type StyledType = {
-    dotsBottomPixel?: number;
-};
-
-const StyledDiv = styled('div')<StyledType>(({ dotsBottomPixel }) => {
-    return {
-        '.slick-dots': {
-            zIndex: 9,
-            bottom: `${dotsBottomPixel ?? -25}px`,
-            opacity: '0.5',
-        },
-    };
-});
-
-const NsScrollingCarousal = ({
-    slides,
-    scrollSeconds,
-    stillSeconds,
-    renderSlide,
-    settings,
-    dotsBottomPixel,
-    additionalProps,
-}: NsScrollingCarousalProps): ReactElement => {
-    const defaultSettings = useMemo(() => {
-        return {
-            ...settings,
-            autoplay: true,
-            autoplaySpeed: stillSeconds * 1000 || 2000, // autoplaySpeed = delay between scroll in milliseconds
-            accessibility: true,
-            adaptiveHeight: true,
-            arrows: true,
-            draggable: true,
-            dots: false,
-            infinite: true,
-            speed: scrollSeconds * 1000 || 500, // speed = animation speed in milliseconds
-            slidesToShow: 1,
-            slidesToScroll: 1,
-            swipeToSlide: true,
-        };
-    }, [stillSeconds, scrollSeconds, settings]);
-    return (
-        <StyledDiv
-            className="scrolling-carousal-wrapper"
-            dotsBottomPixel={dotsBottomPixel}
-            data-testid={additionalProps?.testid ?? 'scrolling-carousal-test-id'}
-        >
-            <Slider {...defaultSettings}>{slides.map(renderSlide)}</Slider>
-        </StyledDiv>
-    );
-};
-
-export default NsScrollingCarousal;

package/src/common/carousal/RenderBrand.tsx

@@ -1,20 +0,0 @@
-import { ReactElement } from 'react';
-
-import NsBrandCard from '../card/NsBrandCard';
-
-interface BrandType {
-    title: string;
-    backgroundImage: string;
-    brandImage: string;
-}
-export const RenderBrand = (entry: BrandType, index: number): ReactElement => {
-    const { title, backgroundImage, brandImage } = entry;
-    return (
-        <NsBrandCard
-            key={title + index}
-            backgroundImageUrl={backgroundImage}
-            title={title}
-            brandImageUrl={brandImage}
-        />
-    );
-};

package/src/common/carousal/index.ts

@@ -1,5 +0,0 @@
-export { default as NsCarousal } from './NsCarousal';
-export { default as NsScrollingCarousal } from './NsScrollingCarousal';
-export { default as NsDefaultCarousalSettings } from './slickSetting';
-
-export type { NsCarousalProps, NsScrollingCarousalProps } from './types.d';

package/src/common/carousal/slickSetting.ts

@@ -1,61 +0,0 @@
-const settings = {
-    dots: true,
-    infinite: false,
-    speed: 2000,
-    slidesToShow: 6,
-    slidesToScroll: 1,
-    swipeToSlide: true,
-    responsive: [
-        {
-            breakpoint: 1800,
-            settings: {
-                slidesToShow: 5,
-                slidesToScroll: 1,
-                infinite: true,
-                dots: true,
-            },
-        },
-        {
-            breakpoint: 1480,
-            settings: {
-                slidesToShow: 4,
-                slidesToScroll: 1,
-                infinite: true,
-                dots: true,
-            },
-        },
-        {
-            breakpoint: 1160,
-            settings: {
-                slidesToShow: 3,
-                slidesToScroll: 1,
-                infinite: true,
-                dots: true,
-            },
-        },
-        {
-            breakpoint: 840,
-            settings: {
-                slidesToShow: 2,
-                slidesToScroll: 1,
-                initialSlide: 1,
-            },
-        },
-        {
-            breakpoint: 580,
-            settings: {
-                slidesToShow: 1.5,
-                slidesToScroll: 1,
-            },
-        },
-        {
-            breakpoint: 440,
-            settings: {
-                slidesToShow: 1,
-                slidesToScroll: 1,
-            },
-        },
-    ],
-};
-
-export default settings;

package/src/common/carousal/specs/Chevron.spec.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-import IconWrapper from '../IconWrapper';
-
-describe('IconCover', () => {
-    it('render the component', () => {
-        const { container } = render(<IconWrapper className="icon-cover" onClick={() => {}} />);
-        const element = container.querySelector('.icon-cover');
-        expect(element).toBeInTheDocument();
-    });
-});

package/src/common/carousal/specs/NsCarousal.spec.tsx

@@ -1,112 +0,0 @@
-import { ReactElement } from 'react';
-
-import { NsCarousal } from '@/common/';
-import {
-    fireEvent,
-    render,
-    screen,
-} from '@/test-utils/index';
-
-const mockEntries = [
-    { id: 1, title: 'First entry' },
-    { id: 2, title: 'Second entry' },
-    { id: 3, title: 'Third entry' },
-    { id: 4, title: 'Fourth entry' },
-    { id: 5, title: 'Fifth entry' },
-];
-
-const mockRenderEntry = (entry: any, index: number): ReactElement => {
-    return <div key={index}>{entry.title}</div>;
-};
-const mockAllEntryLink = '/view-all';
-const mockSettings = {
-    slidesToShow: 2,
-    slidesToScroll: 1,
-};
-describe('NsCarousal', () => {
-    it('should have prev and next chevron', () => {
-        render(
-            <NsCarousal
-                entries={[]}
-                renderEntry={mockRenderEntry}
-                allEntryLink={mockAllEntryLink}
-                settings={mockSettings}
-            />
-        );
-        const prevSvg = screen.getByTestId('arrowLeft');
-        const nextSvg = screen.getByTestId('arrowRight');
-        expect(prevSvg).toBeInTheDocument();
-        expect(nextSvg).toBeInTheDocument();
-    });
-
-    it('should view all link with correct href and slides', () => {
-        const { container } = render(
-            <NsCarousal
-                entries={mockEntries}
-                renderEntry={mockRenderEntry}
-                allEntryLink={mockAllEntryLink}
-                settings={mockSettings}
-            />
-        );
-
-        const viewAllLink = screen.getByRole('link', { name: /view all/i });
-        const slides = container.querySelectorAll('.slick-slide');
-
-        expect(viewAllLink).toBeInTheDocument();
-        expect(viewAllLink).toHaveAttribute('href', mockAllEntryLink);
-        expect(slides).toHaveLength(mockEntries.length);
-        expect(slides[0]).toHaveTextContent('First entry');
-        expect(slides[1]).toHaveTextContent('Second entry');
-        expect(slides[2]).toHaveTextContent('Third entry');
-    });
-
-    it('should change slides when clicking on prev or next buttons', () => {
-        const { container } = render(
-            <NsCarousal
-                entries={mockEntries}
-                renderEntry={mockRenderEntry}
-                allEntryLink="/view-all"
-                settings={mockSettings}
-            />
-        );
-
-        let currentSlide = container.querySelector('.slick-slide.slick-current');
-        expect(currentSlide!.attributes['data-index' as any].value).toEqual('0');
-
-        /* this is library's button, not our button, it is used for changing slides,
-      clicking svg is not making any slide change in this test */
-        const nextButton = screen.getByRole('button', { name: /next/i });
-        fireEvent.click(nextButton);
-
-        let slickTrack = container.querySelector('.slick-track');
-        currentSlide = slickTrack!.querySelector('.slick-slide.slick-current');
-        expect(currentSlide!.attributes['data-index' as any].value).toEqual('1');
-
-        /* below code is commented because prev button is not working as expected in tests */
-        // const prevButton = screen.getByRole('button', { name: /prev/i })
-        // fireEvent.click(prevButton)
-        // screen.debug(prevButton)
-        // let slickList = container.querySelector('.slick-list')
-        // currentSlide = slickList!.querySelector('.slick-slide.slick-current')
-        // expect(currentSlide!.attributes['data-index' as any].value).toEqual('0')
-
-        // // currentSlide = screen.getByText(mockEntries[0].title)
-        // currentSlide = slickTrack!.querySelector('.slick-slide.slick-current')
-        // expect(currentSlide!.attributes['data-index' as any].value).toEqual('0')
-    });
-
-    it('should change slides when clicking on prev or next buttons', () => {
-        const { container } = render(
-            <NsCarousal
-                entries={mockEntries}
-                renderEntry={mockRenderEntry}
-                allEntryLink="/view-all"
-                settings={mockSettings}
-            />
-        );
-        let next = container.querySelector('.carousal-next-button');
-        let prev = container.querySelector('.carousal-prev-button');
-        fireEvent.click(next!);
-        fireEvent.click(prev!);
-    });
-});

package/src/common/carousal/specs/NsScrollingCarousal.spec.tsx

@@ -1,63 +0,0 @@
-import { ReactElement } from 'react';
-
-import { NsScrollingCarousal } from '@/common/';
-import { fireEvent, render, screen } from '@/test-utils/index';
-
-const mockEntries = [
-    { id: 1, title: 'First entry' },
-    { id: 2, title: 'Second entry' },
-    { id: 3, title: 'Third entry' },
-    { id: 4, title: 'Fourth entry' },
-    { id: 5, title: 'Fifth entry' },
-];
-
-const mockRenderEntry = (entry: any, index: number): ReactElement => {
-    return <div key={index}>{entry.title}</div>;
-};
-const mockSettings = {
-    slidesToShow: 2,
-    slidesToScroll: 1,
-};
-const testId = 'scrolling-carousal';
-describe('NsScrollingCarousal', () => {
-    it('should have slides', () => {
-        render(
-            <NsScrollingCarousal
-                slides={mockEntries}
-                renderSlide={mockRenderEntry}
-                settings={mockSettings}
-                scrollSeconds={1}
-                stillSeconds={9}
-                additionalProps={{
-                    testid: testId,
-                }}
-            />
-        );
-        const el = screen.getAllByText(mockEntries[0].title);
-        expect(el).toHaveLength(2);
-    });
-
-    it('should change slides when clicking on prev or next buttons', () => {
-        const { container } = render(
-            <NsScrollingCarousal
-                slides={mockEntries}
-                renderSlide={mockRenderEntry}
-                settings={mockSettings}
-                scrollSeconds={1}
-                stillSeconds={9}
-            />
-        );
-
-        let currentSlide = container.querySelector('.slick-slide.slick-current');
-        expect(currentSlide!.attributes['data-index' as any].value).toEqual('0');
-
-        /* this is library's button, not our button, it is used for changing slides,
-      clicking svg is not making any slide change in this test */
-        const nextButton = screen.getByRole('button', { name: /next/i });
-        fireEvent.click(nextButton);
-
-        let slickTrack = container.querySelector('.slick-track');
-        currentSlide = slickTrack!.querySelector('.slick-slide.slick-current');
-        expect(currentSlide!.attributes['data-index' as any].value).toEqual('1');
-    });
-});