@nuskin/foundation-ui-components 1.0.0-cft-35.12 → 1.0.0-develop.1

package/src/common/autocomplete/NsAutocomplete.spec.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import { NsAutocomplete } from './';
+import { OptionUiComponent } from './mock/MockUI';
+import { AutocompleteMockList } from './mock/MockData';
+import userEvent from '@testing-library/user-event';
+
+describe('CustomAutocomplete', () => {
+    test('should render autocomplete component', () => {
+        render(
+            <NsAutocomplete
+                options={AutocompleteMockList}
+                onSelect={() => {}}
+                placeholder="autocomplete-input"
+                renderOptions={OptionUiComponent}
+            />
+        );
+        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        expect(autocompleteInput).toBeInTheDocument();
+    });
+
+    test('displays options when typing in the input', async () => {
+        render(
+            <NsAutocomplete
+                options={AutocompleteMockList}
+                onSelect={() => {}}
+                renderOptions={OptionUiComponent}
+                placeholder="autocomplete-input"
+            />
+        );
+        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        userEvent.type(autocompleteInput, 'GS Facial');
+        await waitFor(() => {
+            const option1 = screen.getByText('GS Facial Gels 2pk Subscription');
+            expect(option1).toBeInTheDocument();
+        });
+    });
+
+    test('selects an option when clicking on it', async () => {
+        render(
+            <NsAutocomplete
+                options={AutocompleteMockList}
+                renderOptions={OptionUiComponent}
+                placeholder="autocomplete-input"
+            />
+        );
+        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        userEvent.type(autocompleteInput, 'GS Facial');
+        await waitFor(() => {
+            const optionLi = screen.getByText('GS Facial Spa');
+            userEvent.click(optionLi);
+        });
+    });
+
+    test('should load more options when clicking load more button', async () => {
+        render(
+            <NsAutocomplete
+                options={AutocompleteMockList}
+                renderOptions={OptionUiComponent}
+                placeholder="autocomplete-input"
+                seeMore={{
+                    text: '',
+                    show: true,
+                    onSeeMore: () => ({}),
+                }}
+            />
+        );
+        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        userEvent.type(autocompleteInput, 'GS Facial');
+        await waitFor(() => {
+            const loadMoreButton = screen.getByTestId('autocomplete-loadmore-id');
+            userEvent.click(loadMoreButton);
+        });
+    });
+
+    test('should clear options when clicking clear button', async () => {
+        render(
+            <NsAutocomplete
+                options={AutocompleteMockList}
+                renderOptions={OptionUiComponent}
+                placeholder="autocomplete-input"
+                clear={{
+                    text: '',
+                    show: true,
+                    onClear: () => ({}),
+                }}
+            />
+        );
+        const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
+        userEvent.type(autocompleteInput, 'GS Facial');
+        await waitFor(() => {
+            const clearButton = screen.getByTestId('autocomplete-clear-id');
+            userEvent.click(clearButton);
+        });
+    });
+});

package/src/common/autocomplete/NsAutocomplete.stories.tsx

@@ -0,0 +1,51 @@
+/**
+ * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
+ * NsAutocomplete.stories.tsx
+ * @description NsAutocomplete component.
+ */
+
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { NsAutocomplete } from './';
+import { AutocompleteMockList } from './mock/MockData';
+import { OptionUiComponent } from './mock/MockUI';
+import { NsAutocompleteProps } from './types';
+
+type ComponentType = typeof NsAutocomplete;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/NsAutocomplete',
+    component: NsAutocomplete,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        children: {
+            control: 'text',
+        },
+    },
+    args: {
+        options: AutocompleteMockList,
+        seeMore: {
+            text: 'See More Results',
+            show: false,
+            onSeeMore: () => {
+                throw new Error('Function not implemented.');
+            },
+        },
+        clear: {
+            text: 'Clear Recent Searches',
+            show: false,
+            onClear: () => {
+                throw new Error('Function not implemented.');
+            },
+        },
+        placeholder: 'search',
+    },
+} as MetaStory;
+
+export const Autocomplete: Story = {
+    render: (args: NsAutocompleteProps) => <NsAutocomplete {...args} renderOptions={OptionUiComponent} />,
+};

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { NsInputField } from '../input';
+import { Autocomplete, AutocompleteRenderGroupParams, List, AutocompleteRenderInputParams } from '@mui/material';
+import { useState, PropsWithChildren, useRef } from 'react';
+import { NsTypography } from '../typography';
+import { NsAutocompleteProps, OptionsProps, ComponentboxProps } from './types';
+import { NsButton } from '../button';
+
+const NsAutocomplete = ({
+    id = 'custom_autocomplete_dropdown',
+    options = [],
+    renderOptions,
+    onSelect,
+    clear,
+    seeMore,
+    placeholder,
+    className,
+}: PropsWithChildren<NsAutocompleteProps>) => {
+    const inputRef = useRef(null);
+
+    const [selectedOption, setSelectedOption] = useState<OptionsProps | null>(null);
+    const OptionUI = renderOptions;
+
+    const handleSelect = (event: React.SyntheticEvent<Element, Event>, value: OptionsProps | null) => {
+        setSelectedOption(value);
+        onSelect ? onSelect(value) : null;
+    };
+
+    const renderInput = (params: AutocompleteRenderInputParams) => (
+        <NsInputField {...params} placeholder={placeholder} inputRef={inputRef} />
+    );
+
+    const renderOption = (props: ComponentboxProps, option: OptionsProps) => (
+        <li {...props}>
+            <OptionUI {...props} option={option} />
+        </li>
+    );
+
+    const renderOptionLabel = (option: OptionsProps) => option.value;
+
+    const renderGroupBy = (option: OptionsProps) => option.group as string;
+
+    const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (
+        <li key={key}>
+            {group ? (
+                <NsTypography variant="p-s" className="p-3">
+                    {group}
+                </NsTypography>
+            ) : null}
+            <span>{children}</span>
+        </li>
+    );
+
+    const renderClearButton = () => {
+        const { show, onClear, text = 'See More Results' } = clear || {};
+        if (!show) {
+            return null;
+        }
+        return (
+            <div className="text-right p-3">
+                <NsButton onClick={onClear} data-testid="autocomplete-clear-id">
+                    <NsTypography variant={'p-xs'}>{text}</NsTypography>
+                </NsButton>
+            </div>
+        );
+    };
+
+    const renderSeeMoreButton = () => {
+        const { show, onSeeMore, text = 'See More Results' } = seeMore || {};
+        if (!show) {
+            return null;
+        }
+        return (
+            <div className="text-center p-3">
+                <NsButton onClick={onSeeMore} data-testid="autocomplete-loadmore-id">
+                    <NsTypography variant="p-xs">{text}</NsTypography>
+                </NsButton>
+            </div>
+        );
+    };
+
+    const renderListBoxComponent = ({ children, ...otherProps }: ComponentboxProps) => (
+        <>
+            {renderClearButton()}
+            <List {...otherProps}>
+                {children}
+                {renderSeeMoreButton()}
+            </List>
+        </>
+    );
+
+    return (
+        <Autocomplete
+            id={id}
+            disablePortal
+            className={className}
+            options={options}
+            groupBy={renderGroupBy}
+            getOptionLabel={renderOptionLabel}
+            renderOption={renderOption}
+            renderInput={renderInput}
+            ListboxComponent={renderListBoxComponent}
+            renderGroup={renderGroupName}
+            onChange={handleSelect}
+            value={selectedOption}
+        />
+    );
+};
+
+export default NsAutocomplete;

package/src/common/autocomplete/index.ts

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

package/src/common/autocomplete/mock/Mock.styled.tsx

@@ -0,0 +1,23 @@
+import { styled } from '@nuskin/foundation-theme';
+
+export const ListStyled = styled.div`
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    flex-direction: row;
+    align-items: center;
+    .item-description {
+        text-decoration: underline;
+    }
+    .add-to-cart-button {
+        margin-right: 5px;
+        height: 70%;
+        width: 40px;
+        border-left: 1px solid rgb(236, 237, 237);
+    }
+    img {
+        width: 50px;
+        height: 30px;
+        vertical-align: middle;
+    }
+`;

package/src/common/autocomplete/mock/MockData.ts

@@ -0,0 +1,46 @@
+import { OptionsProps } from '../types';
+
+export const AutocompleteMockList: OptionsProps[] = [
+    {
+        id: '1',
+        value: 'GS Facial Gels 2pk Subscription',
+        // eslint-disable-next-line max-len
+        image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png',
+    },
+    {
+        id: '2',
+        value: 'GS Facial',
+        // eslint-disable-next-line max-len
+        image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png',
+    },
+    {
+        id: '3',
+        value: 'GS Facial Spa', // eslint-disable-next-line max-len
+        image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png',
+    },
+    {
+        id: '4',
+        value: 'Nu Skin® Facial Spa',
+        group: 'Popular Searches', // eslint-disable-next-line max-len
+        image: 'https://www.nuskin.com/content/products/01/55/00/01550013/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        icon: 'cart',
+        groupBgColor: '#000',
+    },
+    {
+        id: '5',
+        value: 'AP 24® Whitening Fluoride Toothpaste',
+        group: 'Popular Searches', // eslint-disable-next-line max-len
+        image: 'https://www.nuskin.com/content/products/86/99/01/86990100/_jcr_content/fullImage.img.160.160.png.64.64.png',
+        icon: 'cart',
+        groupBgColor: '#000',
+    },
+    {
+        id: '6',
+        value: 'PowerMask + LumiSpa Normal Subscription',
+        group: 'Popular Searches', // eslint-disable-next-line max-len
+        image: 'https://www.nuskin.com/content/products/01/00/16/01001647/jcr:content/fullImage.img.160.160.png/1611763135883-cache.png.64.64.png',
+        icon: 'cart',
+        groupBgColor: '#000',
+    },
+];
+

package/src/common/autocomplete/mock/MockUI.tsx

@@ -0,0 +1,24 @@
+import { ListStyled } from './Mock.styled';
+import { NsTypography } from '../../typography';
+import { NsIcon } from '../../icon';
+import { ListUiProps } from '../types';
+
+const OptionUiComponent = ({ option }: ListUiProps) => {
+    return (
+        <ListStyled className="checker">
+            <div className="item-description" role="link" tabIndex={0}>
+                <NsTypography aria-label="Nu Skin Tumbler" variant="p-m" colorOverride="#63666A">
+                    <img src={option.image} alt="No-image" />
+                    {option?.value}
+                </NsTypography>
+            </div>
+            {option.icon ? (
+                <div className="add-to-cart-button" role="button" tabIndex={0} aria-label="add to cart">
+                    <NsIcon name={option.icon} size="small" />
+                </div>
+            ) : null}
+        </ListStyled>
+    );
+};
+
+export { OptionUiComponent };

package/src/common/autocomplete/types.ts

@@ -0,0 +1,39 @@
+import React, { HTMLAttributes } from 'react';
+import { AdditionalProps } from '../common.types';
+import { NsIconNameType } from '../icon';
+import { ComponentsProps } from '@mui/material';
+
+export type NsAutocompleteProps = {
+    id?: string;
+    options: OptionsProps[];
+    renderOptions: React.ComponentType<any>;
+    // eslint-disable-next-line no-unused-vars
+    onSelect?: (params: OptionsProps | null) => void;
+    clear?: {
+        text: string;
+        show?: boolean; //default to false
+        onClear: () => {};
+    };
+    seeMore?: {
+        text: string;
+        show?: boolean; //default to false
+        onSeeMore: () => {};
+    };
+    placeholder?: string;
+    className?: string;
+} & AdditionalProps;
+
+export type ListUiProps = {
+    option: OptionsProps;
+};
+
+export type OptionsProps = {
+    id: string;
+    group?: string;
+    value: string;
+    icon?: NsIconNameType;
+    image?: string;
+    groupBgColor?: string;
+};
+
+export type ComponentboxProps = ComponentsProps & HTMLAttributes<HTMLElement>;

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

@@ -5,9 +5,9 @@ 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 imageURL = 'https://example.com/banner.jpg';
         const { getByAltText, getByText } = render(
-            <NsBanner imageUrl={image} altText="Banner image">
+            <NsBanner imageUrl={imageURL} altText="Banner image">
                 <h1>{childText}</h1>
             </NsBanner>
         );

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

@@ -7,7 +7,7 @@
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsBanner, NsTypography, NsButton } from '../';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBanner;
 type Story = StoryObj<ComponentType>;
@@ -16,7 +16,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsBanner',
     component: NsBanner,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
     argTypes: {
         children: {
             control: 'text', // use the text control to edit children prop

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

@@ -8,6 +8,7 @@ export const StyledBanner = styled.section`
     img {
         width: 100%;
         object-fit: cover;
+        height: auto;
     }
 `;
 

package/src/common/banner/NsBanner.tsx

@@ -8,12 +8,14 @@ import React, { PropsWithChildren } from 'react';
 
 import { NsBannerProps } from './types';
 import { StyledBanner, StyledHeroText } from './NsBanner.styled';
+import { NsImage } from '../';
 
+/* TODO: once we have storybook 7, we can try converting this NsImage to NsNextImage */
 const NsBanner = (props: PropsWithChildren<NsBannerProps>) => {
     const {
         children,
-        imageUrl = '',
-        altText = 'NsBanner',
+        imageUrl,
+        altText,
         alignment = 'center',
         justify = 'start',
         className = '',
@@ -22,7 +24,14 @@ const NsBanner = (props: PropsWithChildren<NsBannerProps>) => {
 
     return (
         <StyledBanner className={className}>
-            <img src={imageUrl} alt={altText} id="bgImage" {...additionalProps} />
+            <NsImage
+                src={imageUrl}
+                alt={altText || 'NsBanner'}
+                id="bgImage"
+                width={0}
+                height={0}
+                {...additionalProps}
+            />
             <StyledHeroText $alignment={alignment} $justify={justify}>
                 <div className="mx-14">{children}</div>
             </StyledHeroText>

package/src/common/brand-components/NsBrand.stories.tsx

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsBrandComponent } from './';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBrandComponent;
 type Story = StoryObj<ComponentType>;
@@ -9,7 +9,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsBrandComponent',
     component: NsBrandComponent,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
     argTypes: {
         size: { control: 'text', defaultValue: '100px' },
         variant: {

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

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

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

@@ -4,15 +4,20 @@
  * @description NsBanner component.
  */
 
-import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
-import Breadcrumb from './NsBreadcrumb';
+import { NsBreadcrumb } from './';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { breadcrumbItems } from './NsBreadcrumb.spec';
+
+type ComponentType = typeof NsBreadcrumb;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components',
-    component: Breadcrumb,
-    decorators: [(story) => <div style={{ textAlign: 'center', marginTop: '20px' }}>{story()}</div>],
+    title: 'Components/NsBreadcrumb',
+    component: NsBreadcrumb,
+    decorators: [withCenterDecorator],
     argTypes: {
         iconVisibility: { control: 'boolean' },
     },
@@ -25,6 +30,12 @@ export default {
         ],
         iconVisibility: false,
     },
-} as ComponentMeta<typeof Breadcrumb>;
+} as MetaStory;
 
-export const NsBreadcrumb: ComponentStory<typeof Breadcrumb> = (args) => <Breadcrumb {...args} />;
+export const Breadcrumb: Story = {};
+export const WithIcons: Story = {
+    args: {
+        items: breadcrumbItems,
+        iconVisibility: true,
+    },
+};

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

@@ -15,7 +15,7 @@ export const BreadcrumbList = styled.ol`
 export const BreadcrumbItem = styled.li`
     display: flex;
     align-items: center;
-    :not(:first-child) {
+    :not(:first-of-type) {
         margin-left: 12px;
     }
     & a {

package/src/common/breadcrumb/NsBreadcrumb.tsx

@@ -7,11 +7,9 @@
 import { PropsWithChildren } from 'react';
 
 import { BreadcrumbContainer, BreadcrumbItem, BreadcrumbList } from './NsBreadcrumb.styled';
-import { NsIcon } from '../icon';
-import NsLink from '../link/NsLink';
-import { NsTypography } from '../typography';
+import { NsTypography, NsLink, NsIcon } from '../';
 import { NsBreadcrumbProps, ItemProps } from './types';
-import { useTheme } from '@emotion/react';
+import { useTheme } from '@mui/material/styles';
 import { ColorUtils } from '@nuskin/foundation-theme';
 
 const NsBreadcrumb = (props: PropsWithChildren<NsBreadcrumbProps>) => {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsButton } from './';
 import { ShoppingCart } from '@mui/icons-material';
-import { CenterStoryDecorator } from '../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsButton;
 type Story = StoryObj<ComponentType>;
@@ -11,7 +11,7 @@ type MetaStory = Meta<ComponentType>;
 export default {
     title: 'Components/NsButton',
     component: NsButton,
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
     argTypes: {
         children: {
             control: 'text',

package/src/common/card/NsFfgCard.tsx

@@ -0,0 +1,18 @@
+import { NsNextImage, NsLink } from '../';
+import { NsFfgStyled } from './styled/NsFfgStyled';
+import { NsFfgCardProps } from './types';
+
+const NsFfgCard = ({ actionText, actionLink, text, topImageUrl, topImageAlt, additionalProps }: NsFfgCardProps) => {
+    return (
+        <NsFfgStyled data-testid={additionalProps?.testid}>
+            <div className="top-image">
+                <NsNextImage height={192} width={288} alt={topImageAlt} src={topImageUrl} />
+            </div>
+            <div className="body-text">{text}</div>
+            <NsLink className="action-link" href={actionLink}>
+                {actionText || 'LEARN MORE'}
+            </NsLink>
+        </NsFfgStyled>
+    );
+};
+export default NsFfgCard;

package/src/common/card/index.ts

@@ -1,4 +1,5 @@
 export { default as NsBrandWrapper } from './NsBrandWrapper';
 export { default as NsBgCard } from './NsBgCard';
+export { default as NsFfgCard } from './NsFfgCard';
 export { default as NsBrandLogo } from './NsBrandLogo';
 export { default as NsBrandProductCard } from './NsBrandProductCard';

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

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsBgCard } from '../';
-import { CenterStoryDecorator } from '../../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBgCard;
 type Story = StoryObj<ComponentType>;
@@ -16,7 +16,7 @@ export default {
         // brandImageUrl:
         // 'https://media.nuskin.com/m/2571a0407433a6e8/webimage-brand-lumispa.png',
     },
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
 } as MetaStory;
 
 export const BgCard: Story = {};

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

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { CenterStoryDecorator } from '../../../stories/CenterStoryDecorator';
+import { withCenterDecorator } from '../../../stories/decorators/withCenterDecorator';
 import { NsBrandProductCard } from '../';
 
 type ComponentType = typeof NsBrandProductCard;
@@ -10,7 +10,7 @@ export default {
     component: NsBrandProductCard,
     title: 'Components/NsCard/NsBrandProductCard',
     argTypes: {},
-    decorators: [CenterStoryDecorator],
+    decorators: [withCenterDecorator],
 } as MetaStory;
 
 export const Default: Story = {