@nuskin/foundation-ui-components 1.1.0 → 1.2.0

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,13 +1,17 @@
-import React, { PropsWithChildren } from 'react';
+import React, { HTMLAttributes, PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
 import { Autocomplete, AutocompleteRenderGroupParams, List, AutocompleteRenderInputParams } from '@mui/material';
 import { NsTypography, NsButton } from '../';
 import { NsAutocompleteProps, OptionsProps, ComponentBoxProps } from './types.d';
 import { StyledTextField } from './NsAutocomplete.styled';
 
+const renderOptionLabel = (option: OptionsProps) => option.value;
+
+const renderGroupBy = (option: OptionsProps) => option.group as string;
+
 const NsAutocomplete = ({
     id = 'custom_autocomplete_dropdown',
-    options = [],
-    renderOptions,
+    options,
+    OptionsUI,
     loading,
     noOptionsText,
     onSelect,
@@ -20,16 +24,34 @@ const NsAutocomplete = ({
     iconEnd,
     inputValue,
     value,
+    isFilterEnabled = true,
 }: PropsWithChildren<NsAutocompleteProps>) => {
-    const OptionUI = renderOptions;
+    const [scrollTopPosition, setScrollTopPosition] = useState(0);
+    const listboxRef = useRef<HTMLUListElement | null>(null);
 
-    const handleSelect = (event: React.SyntheticEvent<Element, Event>, value: string | OptionsProps | null) => {
-        onSelect ? onSelect(value) : null;
-    };
+    useEffect(() => {
+        if (listboxRef?.current && options.length > 0) {
+            listboxRef.current.scrollTop = scrollTopPosition;
+        }
+    }, [options, scrollTopPosition]);
 
-    const handleInputChange = (event: React.SyntheticEvent<Element, Event>, newInputValue: string) => {
-        onChange ? onChange(newInputValue) : null;
-    };
+    const handleSelect = useCallback(
+        (event: React.SyntheticEvent, value: string | OptionsProps | null) => {
+            if (typeof onSelect === 'function') {
+                onSelect(value);
+            }
+        },
+        [onSelect]
+    );
+
+    const handleInputChange = useCallback(
+        (event: React.SyntheticEvent, newInputValue: string) => {
+            if (typeof onChange === 'function') {
+                onChange(newInputValue);
+            }
+        },
+        [onChange]
+    );
 
     const renderInput = (params: AutocompleteRenderInputParams) => (
         <StyledTextField
@@ -45,15 +67,11 @@ const NsAutocomplete = ({
 
     // TODO: @vijayprathap need to check if we can remove object spread of ...props and ...params in renderInput
     const renderOption = (props: ComponentBoxProps, option: OptionsProps) => (
-        <li {...props}>
-            <OptionUI {...props} option={option} />
+        <li {...props} key={props.id}>
+            {OptionsUI ? <OptionsUI {...props} option={option} /> : null}
         </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 ? (
@@ -65,7 +83,7 @@ const NsAutocomplete = ({
         </li>
     );
 
-    const renderClearButton = () => {
+    const renderClearButton = useCallback(() => {
         const { show, onClear, text = 'Clear Search' } = clear || {};
         if (!show) {
             return null;
@@ -73,32 +91,47 @@ const NsAutocomplete = ({
         return (
             <li className="text-right p-3">
                 <NsButton onClick={onClear} data-testid="autocomplete-clear-id">
-                    <NsTypography variant={'p-xs'} weight="bold">
+                    <NsTypography variant="p-xs" weight="bold">
                         {text}
                     </NsTypography>
                 </NsButton>
             </li>
         );
-    };
+    }, [clear]);
+
+    const handleSeeMore = useCallback(() => {
+        const { onSeeMore } = seeMore || {};
+        // Remember the current scroll position
+        if (options?.length > 0 && listboxRef?.current) {
+            const lastScrollPosition = listboxRef.current?.scrollTop;
+            if (lastScrollPosition) {
+                setScrollTopPosition(lastScrollPosition);
+            }
+        }
+        if (onSeeMore && typeof onSeeMore === 'function') {
+            onSeeMore();
+        }
+    }, [seeMore, options]);
 
-    const renderSeeMoreButton = () => {
-        const { show, onSeeMore, text = 'See More Results' } = seeMore || {};
+    const renderSeeMoreButton = useCallback(() => {
+        const { show, text = 'See More Results' } = seeMore || {};
         if (!show) {
             return null;
         }
+
         return (
             <li className="text-center p-3">
-                <NsButton onClick={onSeeMore} data-testid="autocomplete-loadmore-id">
+                <NsButton onClick={handleSeeMore} data-testid="autocomplete-loadmore-id">
                     <NsTypography variant="p-xs" weight="bold">
                         {text}
                     </NsTypography>
                 </NsButton>
             </li>
         );
-    };
+    }, [seeMore, handleSeeMore]);
 
     const renderListBoxComponent = ({ children, ...otherProps }: ComponentBoxProps) => (
-        <List {...otherProps}>
+        <List {...otherProps} ref={listboxRef}>
             {renderClearButton()}
             {children}
             {renderSeeMoreButton()}
@@ -118,11 +151,17 @@ const NsAutocomplete = ({
             renderOption={renderOption}
             renderInput={renderInput}
             ListboxComponent={renderListBoxComponent}
+            ListboxProps={{ scrollTopPosition } as HTMLAttributes<HTMLUListElement>} // Pass the current scroll position
             renderGroup={renderGroupName}
             onChange={handleSelect}
             onInputChange={handleInputChange}
             value={value}
             inputValue={inputValue}
+            filterOptions={
+                isFilterEnabled
+                    ? undefined // Use default filtering behavior
+                    : (options) => options
+            }
             freeSolo
         />
     );

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

@@ -1,27 +1,29 @@
+/* eslint-disable max-len */
 import { OptionsProps } from '../types';
 
 export const AutocompleteMockList: OptionsProps[] = [
     {
         id: '1',
         value: 'GS Facial Gels 2pk Subscription',
-        // eslint-disable-next-line max-len
+        group: 'Popular Searches',
         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
+        group: 'Popular Searches',
         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
+        value: 'GS Facial Spa',
+        group: 'Popular Searches',
         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
+        group: 'Popular Searches',
         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',
@@ -29,7 +31,7 @@ export const AutocompleteMockList: OptionsProps[] = [
     {
         id: '5',
         value: 'AP 24® Whitening Fluoride Toothpaste',
-        group: 'Popular Searches', // eslint-disable-next-line max-len
+        group: 'Popular Searches',
         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',
@@ -37,10 +39,52 @@ export const AutocompleteMockList: OptionsProps[] = [
     {
         id: '6',
         value: 'PowerMask + LumiSpa Normal Subscription',
-        group: 'Popular Searches', // eslint-disable-next-line max-len
+        group: 'Popular Searches',
         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',
     },
-];
 
+    {
+        id: '7',
+        value: 'Rejuvenating Cream',
+        group: 'Popular Searches',
+        image: 'https://www.nuskin.com/content/products/86/99/01/86990168/_jcr_content/fullImage.img.160.160.png.64.64.png',
+    },
+    {
+        id: '8',
+        value: 'Epoch® Firewalker® Foot Cream',
+        group: 'Popular Searches',
+        image: 'https://www.nuskin.com/content/products/01/55/00/01550014/_jcr_content/fullImage.img.160.160.png.64.64.png',
+    },
+    {
+        id: '9',
+        value: 'Tri-Phasic White® Night Cream',
+        group: 'Popular Searches',
+        image: 'https://www.nuskin.com/content/products/01/10/12/01101251/_jcr_content/fullImage.img.160.160.png.64.64.png',
+    },
+    {
+        id: '10',
+        value: 'ThirstFix Hydrating Gel Cream (Sample Size)',
+        group: 'Popular Searches',
+        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: '11',
+        value: 'Epoch® Baby Hair',
+        group: 'Popular Searches',
+        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: '12',
+        value: '180° Face Wash',
+        group: 'Popular Searches',
+        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

@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import { ListStyled } from './Mock.styled';
 import { NsTypography } from '../../typography';
 import { NsIcon } from '../../icon';
@@ -5,7 +6,7 @@ import { ListUiProps } from '../types';
 
 const OptionUiComponent = ({ option }: ListUiProps) => {
     return (
-        <ListStyled className="checker">
+        <ListStyled>
             <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" />

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

@@ -1,25 +1,27 @@
 import React, { HTMLAttributes } from 'react';
+
+import { ComponentsProps } from '@mui/material';
+
 import { AdditionalProps } from '../common.types';
 import { NsIconNameType } from '../icon';
-import { ComponentsProps } from '@mui/material';
 
 export type NsAutocompleteProps = {
     id?: string;
     options: OptionsProps[];
     loading?: boolean;
-    renderOptions: React.ComponentType<any>;
+    OptionsUI: React.ComponentType<any>;
     noOptionsText?: string;
     // eslint-disable-next-line no-unused-vars
     onSelect?: (params: string | OptionsProps | null) => void;
     // eslint-disable-next-line no-unused-vars
     onChange?: (params: string) => void;
     clear?: {
-        text: string;
+        text?: string;
         show?: boolean; //default to false
         onClear: () => void;
     };
     seeMore?: {
-        text: string;
+        text?: string;
         show?: boolean; //default to false
         onSeeMore: () => void;
     };
@@ -29,6 +31,7 @@ export type NsAutocompleteProps = {
     iconEnd?: string | React.ReactNode;
     inputValue: string;
     value: string | OptionsProps | null;
+    isFilterEnabled?:boolean
 } & AdditionalProps;
 
 export type ListUiProps = {

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

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

package/src/common/brand-components/NsBrandComponent.tsx

@@ -5,7 +5,7 @@ import NSLogoMark from './icons/NSLogoMark';
 import NSLogoPoweredBy from './icons/NSLogoPoweredBy';
 import NSLogoStacked from './icons/NSLogoStacked';
 import NSLogoWordMark from './icons/NSWordMark';
-import LogoContainer from './NsBrandContanier.styled';
+import LogoContainer from './NsBrandContainer.styled';
 
 import { NsBrandComponentProps } from './types.d';
 
@@ -20,7 +20,7 @@ const VariantMap = {
 const NsBrandComponent = (props: PropsWithChildren<NsBrandComponentProps>) => {
     const { variant = 'stacked', size = '108px', color = 'primary' } = props;
     const renderBrand = useCallback(() => {
-        const BrandComponent = VariantMap[variant || 'stacked'];
+        const BrandComponent = VariantMap[variant];
         // [Todo - Add neutral as FoundationTheme.PaletteColor]
         return <BrandComponent color={color as any} />;
     }, [color, variant]);

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { NsBreadcrumb } from './';
-import { breadcrumbItems } from './data';
+import { breadcrumbItems, dummyItems } from './data';
 const { getByText } = screen;
 
 describe('Breadcrumb', () => {
-    it('renders breadcrumb items', () => {
+    it('1. renders breadcrumb items', () => {
         render(<NsBreadcrumb items={breadcrumbItems} />);
         expect(getByText('Home')).toBeInTheDocument();
         expect(getByText('Products')).toBeInTheDocument();
@@ -13,11 +13,16 @@ describe('Breadcrumb', () => {
         expect(getByText('Blue shirt')).toBeInTheDocument();
     });
 
-    it('renders breadcrumb items with navigation icons', () => {
+    it('2. renders breadcrumb items with navigation icons', () => {
         render(<NsBreadcrumb items={breadcrumbItems} iconVisibility />);
         expect(getByText('Home')).toBeInTheDocument();
         expect(getByText('Products')).toBeInTheDocument();
         expect(getByText('Shirts')).toBeInTheDocument();
         expect(getByText('Blue shirt')).toBeInTheDocument();
     });
+
+    it('3. renders breadcrumb items with navigation icons', () => {
+        render(<NsBreadcrumb items={dummyItems} iconVisibility />);
+        expect(getByText('Home')).toBeInTheDocument();
+    });
 });

package/src/common/breadcrumb/data.ts

@@ -1,7 +1,10 @@
-import { ItemProps } from './types';
+import {ItemProps} from './types';
 export const breadcrumbItems: ItemProps[] = [
-    { label: 'Home', href: '/', icon: 'home' },
-    { label: 'Products', href: '/products' },
-    { label: 'Shirts', href: '/products/shirts' },
-    { label: 'Blue shirt', href: '/products/shirts/blue' },
+    {label: 'Home', href: '/', icon: 'home'},
+    {label: 'Products', href: '/products'},
+    {label: 'Shirts', href: '/products/shirts'},
+    {label: 'Blue shirt', href: '/products/shirts/blue'},
 ];
+export const dummyItems: ItemProps[] = [
+    {label: 'Home', icon: 'home'}
+]

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

@@ -1,68 +1,84 @@
 import React from 'react';
 import { render, screen } from '@/test-utils/index';
+import { NsButton } from '../';
 import { nuskinTheme } from '@nuskin/foundation-theme';
-import Button from './NsButton';
 
 const { palette } = nuskinTheme;
 
 describe('<Button />', () => {
-    describe(' button primary', () => {
-        test('should render default button styles', () => {
-            const text = 'Click Me';
-            render(
-                <Button color="primary" variant="contained">
-                    {text}
-                </Button>
-            );
+    it('1. should render default primary button styles ', () => {
+        const text = 'Click Me';
+        render(
+            <NsButton color="primary" variant="contained">
+                {text}
+            </NsButton>
+        );
 
-            const button = screen.getByText(text);
-            expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette?.primary?.contrastText ?? ''}`);
-            expect(button).toHaveStyle(`background-color: ${palette?.primary?.main ?? ''}`);
-        });
+        const button = screen.getByText(text);
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette?.primary?.contrastText}`);
+        expect(button).toHaveStyle(`background-color: ${palette?.primary?.buttonState?.pressed}`);
     });
-    describe('button secondary', () => {
-        test('should render default button styles', () => {
-            const text = 'Click Me';
-            render(
-                <Button color="success" variant="contained" size="large">
-                    {text}
-                </Button>
-            );
+    it('2. should render default secondary button styles', () => {
+        const text = 'Click Me';
+        render(
+            <NsButton color="success" variant="contained" size="large">
+                {text}
+            </NsButton>
+        );
 
-            const button = screen.getByText(text);
+        const button = screen.getByText(text);
 
-            expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette.success.contrastText}`);
-            expect(button).toHaveStyle(`background-color: ${palette.success.main}`);
-        });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.contrastText}`);
+        expect(button).toHaveStyle(`background-color: ${palette.success.buttonState?.pressed}`);
     });
-    describe('button outline success', () => {
-        test('should render outlined success button', () => {
-            render(
-                <Button color="success" variant="outlined" size="large">
-                    Click Me
-                </Button>
-            );
+    it('3. should render outlined success button', () => {
+        render(
+            <NsButton color="success" variant="outlined" size="large">
+                Click Me
+            </NsButton>
+        );
 
-            const button = screen.getByText('Click Me');
+        const button = screen.getByText('Click Me');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
+    });
+    it('4. should render outlined accentColorA button', () => {
+        render(
+            <NsButton color="accentColorA" variant="outlined" size="large">
+                Click Me
+            </NsButton>
+        );
+
+        const button = screen.getByText('Click Me');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette?.accentColorA?.main}`);
+    });
+    it('5. should render text button styles', () => {
+        const text = 'Click Me';
+        render(
+            <NsButton color="success" variant="text" size="large">
+                {text}
+            </NsButton>
+        );
+
+        const button = screen.getByText(text);
 
-            expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette.success.main}`);
-        });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
     });
-    describe('button outline accentColorA', () => {
-        test('should render outlined success button', () => {
-            render(
-                <Button color="accentColorA" variant="outlined" size="large">
-                    Click Me
-                </Button>
-            );
+    it('6. iconOnly variant', () => {
+        const text = 'Click Me';
+        render(
+            <NsButton color="success" variant="text" size="large" iconOnly>
+                {text}
+            </NsButton>
+        );
 
-            const button = screen.getByText('Click Me');
+        const button = screen.getByText(text);
 
-            expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette?.accentColorA?.main}`);
-        });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
     });
 });

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

@@ -3,6 +3,11 @@ import type { StoryObj, Meta } from '@storybook/react';
 import { NsButton } from './';
 import { ShoppingCart } from '@mui/icons-material';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+import { nuskinTheme } from '@nuskin/foundation-theme';
+
+const { palette } = nuskinTheme;
 
 type ComponentType = typeof NsButton;
 type Story = StoryObj<ComponentType>;
@@ -21,7 +26,6 @@ export default {
         color: { name: 'Color Variants' },
         disabled: { control: 'boolean' },
         fullWidth: { control: 'boolean' },
-        
         iconOnly: { control: 'hide' },
     },
     args: {
@@ -39,7 +43,7 @@ export default {
 export const button: Story = {};
 
 export const IconOnlyButton: Story = {
-    render: (args) => (
+    render: (args: any) => (
         <NsButton {...args} iconOnly darkModeEnabled={false}>
             <ShoppingCart />
         </NsButton>
@@ -57,9 +61,8 @@ export const IconOnlyButton: Story = {
     },
 };
 export const ButtonWithIcon: Story = {
-    render: (args) => (
+    render: (args: any) => (
         <NsButton {...args} darkModeEnabled={false} startIcon={<ShoppingCart />}>
-            
             Add to Cart
         </NsButton>
     ),
@@ -74,3 +77,35 @@ export const ButtonWithIcon: Story = {
     },
 };
 
+export const TextVariant: Story = {
+    args: {
+        color: 'success',
+        variant: 'text',
+        size: 'large',
+        children: 'click me! icon',
+    },
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const button = canvas.getByText('click me! icon');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
+        expect(button).toHaveStyle('background-color: rgba(0, 0, 0, 0);');
+    },
+};
+
+export const IconOnly: Story = {
+    args: {
+        iconOnly: true,
+        color: 'success',
+        variant: 'text',
+        size: 'large',
+        children: 'click me! icon',
+    },
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const button = canvas.getByText('click me! icon');
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveStyle(`color: ${palette.success.main}`);
+        expect(button).toHaveStyle('background-color: rgba(0, 0, 0, 0);');
+    },
+};