@nuskin/foundation-ui-components 1.0.0-develop.3 → 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/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/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

@@ -12,6 +12,7 @@ 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/button/NsButton.spec.tsx

@@ -8,28 +8,29 @@ const { palette } = nuskinTheme;
 describe('<Button />', () => {
     describe(' button primary', () => {
         test('should render default button styles', () => {
+            const text = 'Click Me';
             render(
                 <Button color="primary" variant="contained">
-                    Click Me
+                    {text}
                 </Button>
             );
 
-            const button = screen.getByText('Click Me');
-
+            const button = screen.getByText(text);
             expect(button).toBeInTheDocument();
-            expect(button).toHaveStyle(`color: ${palette.primary.contrastText}`);
-            expect(button).toHaveStyle(`background-color: ${palette.primary.main}`);
+            expect(button).toHaveStyle(`color: ${palette?.primary?.contrastText ?? ''}`);
+            expect(button).toHaveStyle(`background-color: ${palette?.primary?.main ?? ''}`);
         });
     });
     describe('button secondary', () => {
         test('should render default button styles', () => {
+            const text = 'Click Me';
             render(
                 <Button color="success" variant="contained" size="large">
-                    Click Me
+                    {text}
                 </Button>
             );
 
-            const button = screen.getByText('Click Me');
+            const button = screen.getByText(text);
 
             expect(button).toBeInTheDocument();
             expect(button).toHaveStyle(`color: ${palette.success.contrastText}`);
@@ -37,7 +38,7 @@ describe('<Button />', () => {
         });
     });
     describe('button outline success', () => {
-        test('should render outlined sucess button', () => {
+        test('should render outlined success button', () => {
             render(
                 <Button color="success" variant="outlined" size="large">
                     Click Me
@@ -48,11 +49,10 @@ describe('<Button />', () => {
 
             expect(button).toBeInTheDocument();
             expect(button).toHaveStyle(`color: ${palette.success.main}`);
-            expect(button).toHaveStyle(`border-color: ${palette.success.main}`);
         });
     });
     describe('button outline accentColorA', () => {
-        test('should render outlined sucess button', () => {
+        test('should render outlined success button', () => {
             render(
                 <Button color="accentColorA" variant="outlined" size="large">
                     Click Me
@@ -63,7 +63,6 @@ describe('<Button />', () => {
 
             expect(button).toBeInTheDocument();
             expect(button).toHaveStyle(`color: ${palette?.accentColorA?.main}`);
-            expect(button).toHaveStyle(`border-color: ${palette?.accentColorA?.main}`);
         });
     });
 });

package/src/common/checkbox/NsCheckbox.styled.tsx

@@ -38,8 +38,8 @@ export const BpCheckedIcon = styled(BpIcon)(({ theme: { palette } }) => ({
     path: {
         display: 'block',
     },
-    background: palette.primary.main,
-    color: palette.primary.contrastText,
+    background: palette?.primary?.main ?? '#fff',
+    color: palette?.primary?.contrastText ?? '#000',
 }));
 
 export const StyledLabel = styled('span')<{ $hasDisabled: boolean }>`

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

@@ -6,5 +6,6 @@ export type AdditionalProps = {
     additionalProps?: {
         ariaLabel?: string;
         testid?: string;
+        className?: string;
     } & ContentStackLiveTags;
 };