@nuskin/foundation-ui-components 1.0.0-develop.2 → 1.0.0-develop.4

package/src/common/accordion/stories/NsAccordionItem.stories.tsx

@@ -0,0 +1,40 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsAccordionItem } from '@/common/index';
+
+type ComponentType = typeof NsAccordionItem;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Accordion/NsAccordionItem',
+    component: NsAccordionItem,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        isOpen: {
+            control: 'boolean',
+            description: 'if true renders NsAccordionItem in open state, and close state otherwise',
+        },
+        content: {},
+        title: {
+            control: 'string',
+            description: 'text used for header of section',
+        },
+    },
+} as MetaStory;
+
+export const OpenSection: Story = {
+    args: {
+        isOpen: true,
+        content: 'Nuskin Description',
+        title: 'Nuskin',
+    },
+};
+
+export const ClosedSection: Story = {
+    args: {
+        isOpen: false,
+        content: 'Nuskin Description',
+        title: 'Nuskin',
+    },
+};

package/src/common/accordion/stories/NsCollapse.stories.tsx

@@ -0,0 +1,35 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsCollapse } from '../';
+
+type ComponentType = typeof NsCollapse;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Accordion/NsCollapse',
+    component: NsCollapse,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        isOpen: {
+            control: 'boolean',
+            description: 'if true renders NsCollapse in open state, and close state otherwise',
+        },
+        children: {
+            control: 'React Node',
+            description: 'Content for NsCollapse',
+        },
+    },
+} as MetaStory;
+export const Closed: Story = {
+    args: {
+        isOpen: false,
+        children: 'Nuskin Description',
+    },
+};
+export const Open: Story = {
+    args: {
+        isOpen: true,
+        children: 'Nuskin Description',
+    },
+};

package/src/common/accordion/stories/NsToggleSection.stories.tsx

@@ -0,0 +1,23 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsToggleSection } from '../..';
+
+type ComponentType = typeof NsToggleSection;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Accordion/NsToggleSection',
+    component: NsToggleSection,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        title: { control: 'string' },
+    },
+    args: {
+        title: 'Nuskin',
+        children: 'Nuskin Details',
+
+    },
+} as MetaStory;
+
+export const DefaultAccordion: Story = {};

package/src/common/accordion/stories/data.tsx

@@ -0,0 +1,22 @@
+import { NsAccordionProps } from '../types';
+
+export const contentArray: NsAccordionProps['contentArray'] = [
+    {
+        title: 'Nuskin',
+        body: <div>Nuskin Details</div>,
+        isDefaultOpen: true,
+    },
+    {
+        title: 'Nuskin',
+        body: <div>Nuskin Details</div>,
+        isDefaultOpen: true,
+    },
+    {
+        title: 'Nuskin',
+        body: <div>Nuskin Details</div>,
+    },
+    {
+        title: 'Nuskin',
+        body: <div>Nuskin Details</div>,
+    },
+];

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

@@ -0,0 +1,73 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { AdditionalProps } from '../common.types';
+import { NsIconNameType } from '../icon';
+import { Variants } from '../typography';
+
+export type NsAccordionHeaderProps = AdditionalProps & {
+    title: string | ReactNode;
+    // eslint-disable-next-line no-unused-vars
+    onClick: (...args: any[]) => void;
+    /** a flag for the header, based on which header can change properties */
+    isOpen?: boolean;
+    /** NsIcon's icon name to be shown in opened state */
+    openedIconName?: NsIconNameType;
+    /** NsIcon's icon name to be shown in closed state */
+    closedIconName?: NsIconNameType;
+    variant: AccordionVariant;
+    headerTypographyVariant?: Variants;
+};
+
+export type NsCollapseProps = AdditionalProps &
+    PropsWithChildren<{
+        isOpen: boolean;
+        variant: AccordionVariant;
+    }>;
+
+export type NsFramerCollapseProps = NsCollapseProps & {
+    transitionDetails?: {
+        duration?: number;
+        ease?: number[];
+    };
+};
+
+export type NsToggleSectionProps = AdditionalProps &
+    PropsWithChildren<{
+        title: string | ReactNode;
+        /** if true, NsToggle is rendered in open state, that collapsible section is visible */
+        defaultOpen?: boolean;
+        variant: AccordionVariant;
+    }>;
+
+export type NsAccordionItemProps = AdditionalProps & {
+    isOpen: boolean;
+    // eslint-disable-next-line no-unused-vars
+    toggleOpen(index: number, isOpen: boolean): void;
+    title: string | ReactNode;
+    content: ReactNode;
+    variant: AccordionVariant;
+    headerTypographyVariant?: Variants;
+    /** NsIcon's icon name to be shown in opened state */
+    openedIconName?: NsIconNameType;
+    /** NsIcon's icon name to be shown in closed state */
+    closedIconName?: NsIconNameType;
+};
+export type NsAccordionProps = AdditionalProps & {
+    allowMultipleExpanded: boolean;
+    contentArray: {
+        title: string | ReactNode;
+        body: ReactNode;
+        isDefaultOpen?: boolean;
+    }[];
+    variant: AccordionVariant;
+    headerTypographyVariant?: Variants;
+    /** NsIcon's icon name to be shown in opened state */
+    openedIconName?: NsIconNameType;
+    /** NsIcon's icon name to be shown in closed state */
+    closedIconName?: NsIconNameType;
+};
+export enum AccordionVariant {
+    // eslint-disable-next-line no-unused-vars
+    Basic = 'basic', // basic is as per figma
+    // eslint-disable-next-line no-unused-vars
+    Compact = 'compact', // compact is as per test.nuskin.com
+}

package/src/common/alert/NsAlert.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import NsAlert from './NsAlert';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsAlert;
 type Story = StoryObj<ComponentType>;
@@ -12,14 +12,14 @@ export default {
     component: NsAlert,
     decorators: [withCenterDecorator],
     argTypes: {
-        context: { 
+        context: {
             control: 'select',
-            options: ['error', 'info', 'notice', 'success', 'warning']
+            options: ['error', 'info', 'notice', 'success', 'warning'],
         },
-        type: { 
+        type: {
             control: 'select',
-            options: ['auto', 'banner', 'card']
-        }
+            options: ['auto', 'banner', 'card'],
+        },
     },
     args: {
         context: 'info',
@@ -28,15 +28,16 @@ export default {
         type: 'banner',
         visible: true,
         onDismiss: () => {},
-        body:
-        <span>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
+        body: (
+            <span>{`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
          ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
-          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
-          qui officia deserunt mollit anim id est laborum.`}</span>,
-        foot: <span>Some message goes here.</span>
-    }
+          laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
+          qui officia deserunt mollit anim id est laborum.`}</span>
+        ),
+        foot: <span>Some message goes here.</span>,
+    },
 } as MetaStory;
 
 export const AuthDropdown: Story = {};

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

@@ -1,15 +1,15 @@
 import { ReactNode, CSSProperties } from 'react';
 
 export interface NsAlertProps {
-    context?: string,
-    title?: string,
-    threshhold?: number,
-    type?: string,
-    visible?: boolean,
-    head?: ReactNode,
-    body?: ReactNode,
-    onDismiss?: () => void,
-    foot?: ReactNode
+    context?: string;
+    title?: string;
+    threshhold?: number; // TODO: update to threshold, i.e. remove extra h
+    type?: string;
+    visible?: boolean;
+    head?: ReactNode;
+    body?: ReactNode;
+    onDismiss?: () => void;
+    foot?: ReactNode;
 }
 
 export interface HeaderProps {
@@ -18,28 +18,28 @@ export interface HeaderProps {
 }
 
 export type AlertContainerParams = {
-    visible: boolean
+    visible: boolean;
 };
 
-export type ContextType = 'error' | 'info' | 'notice'| 'success' | 'warning';
+export type ContextType = 'error' | 'info' | 'notice' | 'success' | 'warning';
 export type AlertType = 'auto' | 'banner' | 'card';
 
 export type AlertParams = {
-    context: ContextType,
-    type: AlertType
-}
+    context: ContextType;
+    type: AlertType;
+};
 
 export type CustomCSSProperties = CSSProperties & {
     'min-height'?: string;
-    'content-column-start'? : string;
-    'content-column-end'? : string;
-    'bar-position'? : string;
-    'foot-visibility'? : string;
-    'foot-display'? : string;
+    'content-column-start'?: string;
+    'content-column-end'?: string;
+    'bar-position'?: string;
+    'foot-visibility'?: string;
+    'foot-display'?: string;
 };
 
 export interface TypeMapCSS {
-    banner: CustomCSSProperties,
-    card: CustomCSSProperties,
-    auto?: CustomCSSProperties
+    banner: CustomCSSProperties;
+    card: CustomCSSProperties;
+    auto?: CustomCSSProperties;
 }

package/src/common/auth-dropdown/NsAuthDropdown.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { NsAuthDropdown } from './';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsAuthDropdown;
 type Story = StoryObj<ComponentType>;

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@/test-utils/index';
 import { NsAutocomplete } from '@/common/index';
 import { OptionUiComponent } from './mock/MockUI';
 import { AutocompleteMockList } from './mock/MockData';
 import userEvent from '@testing-library/user-event';
+import { act } from 'react-dom/test-utils';
 
 describe('CustomAutocomplete', () => {
     test('should render autocomplete component', () => {
@@ -29,11 +30,16 @@ describe('CustomAutocomplete', () => {
             />
         );
         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();
+        act(() => {
+            userEvent.type(autocompleteInput, 'GS Facial');
         });
+        await waitFor(
+            () => {
+                const option1 = screen.getByText('GS Facial Gels 2pk Subscription');
+                expect(option1).toBeInTheDocument();
+            },
+            { timeout: 5000 }
+        );
     }, 40000);
 
     test('selects an option when clicking on it', async () => {
@@ -45,7 +51,9 @@ describe('CustomAutocomplete', () => {
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        userEvent.type(autocompleteInput, 'GS Facial');
+        act(() => {
+            userEvent.type(autocompleteInput, 'GS Facial');
+        });
         await waitFor(() => {
             const optionLi = screen.getByText('GS Facial Spa');
             userEvent.click(optionLi);
@@ -66,7 +74,9 @@ describe('CustomAutocomplete', () => {
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        userEvent.type(autocompleteInput, 'GS Facial');
+        act(() => {
+            userEvent.type(autocompleteInput, 'GS Facial');
+        });
         await waitFor(() => {
             const loadMoreButton = screen.getByTestId('autocomplete-loadmore-id');
             userEvent.click(loadMoreButton);
@@ -87,7 +97,9 @@ describe('CustomAutocomplete', () => {
             />
         );
         const autocompleteInput = screen.getByPlaceholderText('autocomplete-input');
-        userEvent.type(autocompleteInput, 'GS Facial');
+        act(() => {
+            userEvent.type(autocompleteInput, 'GS Facial');
+        });
         await waitFor(() => {
             const clearButton = screen.getByTestId('autocomplete-clear-id');
             userEvent.click(clearButton);

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

@@ -7,11 +7,12 @@
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 import { NsAutocomplete } from './';
 import { AutocompleteMockList } from './mock/MockData';
 import { OptionUiComponent } from './mock/MockUI';
 import { NsAutocompleteProps } from './types.d';
+import { NsIcon } from '../icon';
 
 type ComponentType = typeof NsAutocomplete;
 type Story = StoryObj<ComponentType>;
@@ -42,6 +43,8 @@ export default {
                 throw new Error('Function not implemented.');
             },
         },
+        iconStart: <NsIcon name="search" />,
+        iconEnd: <NsIcon name="close" size='small'/>,
         placeholder: 'search',
     },
 } as MetaStory;

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

@@ -0,0 +1,12 @@
+import { styled } from '@nuskin/foundation-theme';
+
+import { NsInputField } from '../input';
+
+export const StyledTextField = styled(NsInputField)`
+    .MuiAutocomplete-inputRoot {
+        padding-right: 10px !important;
+    }
+    .muiautocomplete-popupindicator {
+        display: none;
+    }
+`;

package/src/common/autocomplete/NsAutocomplete.tsx

@@ -1,20 +1,23 @@
-import * as React from 'react';
-import { NsInputField } from '../input';
+import React, { useState, PropsWithChildren, useRef } from 'react';
 import { Autocomplete, AutocompleteRenderGroupParams, List, AutocompleteRenderInputParams } from '@mui/material';
-import { useState, PropsWithChildren, useRef } from 'react';
-import { NsTypography } from '../typography';
-import { NsAutocompleteProps, OptionsProps, ComponentboxProps } from './types.d';
-import { NsButton } from '../button';
+import { NsTypography, NsButton } from '../';
+import { NsAutocompleteProps, OptionsProps, ComponentBoxProps } from './types.d';
+import { StyledTextField } from './NsAutocomplete.styled';
 
 const NsAutocomplete = ({
     id = 'custom_autocomplete_dropdown',
     options = [],
     renderOptions,
+    loading,
+    noOptionsText,
     onSelect,
+    onChange,
     clear,
     seeMore,
     placeholder,
     className,
+    iconStart,
+    iconEnd,
 }: PropsWithChildren<NsAutocompleteProps>) => {
     const inputRef = useRef(null);
 
@@ -27,10 +30,21 @@ const NsAutocomplete = ({
     };
 
     const renderInput = (params: AutocompleteRenderInputParams) => (
-        <NsInputField {...params} placeholder={placeholder} inputRef={inputRef} />
+        <StyledTextField
+            {...params}
+            onChange={onChange}
+            placeholder={placeholder}
+            inputRef={inputRef}
+            InputProps={{
+                ...params.InputProps,
+                startAdornment: iconStart,
+                endAdornment: iconEnd,
+            }}
+        />
     );
 
-    const renderOption = (props: ComponentboxProps, option: OptionsProps) => (
+    // 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>
@@ -43,7 +57,7 @@ const NsAutocomplete = ({
     const renderGroupName = ({ key, group, children }: AutocompleteRenderGroupParams) => (
         <li key={key}>
             {group ? (
-                <NsTypography variant="p-s" className="p-3">
+                <NsTypography variant="p-m" weight="bold" className="p-3">
                     {group}
                 </NsTypography>
             ) : null}
@@ -59,7 +73,9 @@ const NsAutocomplete = ({
         return (
             <div className="text-right p-3">
                 <NsButton onClick={onClear} data-testid="autocomplete-clear-id">
-                    <NsTypography variant={'p-xs'}>{text}</NsTypography>
+                    <NsTypography variant={'p-xs'} weight="bold">
+                        {text}
+                    </NsTypography>
                 </NsButton>
             </div>
         );
@@ -73,20 +89,20 @@ const NsAutocomplete = ({
         return (
             <div className="text-center p-3">
                 <NsButton onClick={onSeeMore} data-testid="autocomplete-loadmore-id">
-                    <NsTypography variant="p-xs">{text}</NsTypography>
+                    <NsTypography variant="p-xs" weight="bold">
+                        {text}
+                    </NsTypography>
                 </NsButton>
             </div>
         );
     };
 
-    const renderListBoxComponent = ({ children, ...otherProps }: ComponentboxProps) => (
-        <>
+    const renderListBoxComponent = ({ children, ...otherProps }: ComponentBoxProps) => (
+        <List {...otherProps}>
             {renderClearButton()}
-            <List {...otherProps}>
-                {children}
-                {renderSeeMoreButton()}
-            </List>
-        </>
+            {children}
+            {renderSeeMoreButton()}
+        </List>
     );
 
     return (
@@ -95,6 +111,8 @@ const NsAutocomplete = ({
             disablePortal
             className={className}
             options={options}
+            loading={loading}
+            noOptionsText={noOptionsText}
             groupBy={renderGroupBy}
             getOptionLabel={renderOptionLabel}
             renderOption={renderOption}

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

@@ -6,9 +6,13 @@ import { ComponentsProps } from '@mui/material';
 export type NsAutocompleteProps = {
     id?: string;
     options: OptionsProps[];
+    loading?:boolean;
     renderOptions: React.ComponentType<any>;
+    noOptionsText ?:string;
     // eslint-disable-next-line no-unused-vars
     onSelect?: (params: OptionsProps | null) => void;
+    // eslint-disable-next-line no-unused-vars
+    onChange?: (params) => void;
     clear?: {
         text: string;
         show?: boolean; //default to false
@@ -21,6 +25,8 @@ export type NsAutocompleteProps = {
     };
     placeholder?: string;
     className?: string;
+    iconStart?: string | React.ReactNode;
+    iconEnd?: string | React.ReactNode;
 } & AdditionalProps;
 
 export type ListUiProps = {
@@ -36,4 +42,4 @@ export type OptionsProps = {
     groupBgColor?: string;
 };
 
-export type ComponentboxProps = ComponentsProps & HTMLAttributes<HTMLElement>;
+export type ComponentBoxProps = ComponentsProps & HTMLAttributes<HTMLElement>;

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 { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBanner;
 type Story = StoryObj<ComponentType>;

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

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { NsBrandComponent } from './';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
 
 type ComponentType = typeof NsBrandComponent;
 type Story = StoryObj<ComponentType>;

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

@@ -1,14 +1,8 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { NsBreadcrumb } from './';
-import { ItemProps } from './types.d';
+import { breadcrumbItems } from './data';
 const { getByText } = screen;
-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' },
-];
 
 describe('Breadcrumb', () => {
     it('renders breadcrumb items', () => {

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

@@ -1,14 +1,12 @@
 /**
- * @author [Vijayaprathap Kumar] (vpkumar@nuskin.com)
- * NsBanner.stories.tsx
  * @description NsBanner component.
  */
 
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { NsBreadcrumb } from './';
-import { withCenterDecorator } from '../../stories/decorators/withCenterDecorator';
-import { breadcrumbItems } from './NsBreadcrumb.spec';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { breadcrumbItems } from './data';
 
 type ComponentType = typeof NsBreadcrumb;
 type Story = StoryObj<ComponentType>;

package/src/common/breadcrumb/data.ts

@@ -0,0 +1,7 @@
+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' },
+];