@nuskin/foundation-ui-components 1.1.0 → 1.2.0

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

@@ -1,14 +1,10 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import NsAccordion from '../NsAccordion';
-import { contentArray } from './data';
-import { AccordionVariant } from '../types.d';
-
-type ComponentType = typeof NsAccordion;
-type Story = StoryObj<ComponentType>;
-type MetaStory = Meta<ComponentType>;
-
-export default {
+import { NsAccordion, AccordionVariant } from '../..';
+import { getAccordionData } from './data';
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+const meta = {
     title: 'Components/Containers/Accordion',
     component: NsAccordion,
     decorators: [withCenterDecorator],
@@ -18,7 +14,7 @@ export default {
             description: `if true, then multiple sections can remain open at a same time, and if false,
             opening a section will close other sections of the accordion`,
         },
-        contentArray: {
+        items: {
             description: ` this should be an array of objects, each object should have 3 properties,
             title, body and isDefaultOpen`,
         },
@@ -26,22 +22,44 @@ export default {
             control: 'select',
             options: [...Object.values(AccordionVariant)],
         },
+        level: {
+            control: 'number',
+            description: `level = 1 means no padding on left from parent to child,
+            level = 2 means padding of 16px, level = 3 means padding of 32px and so on ..`,
+        },
     },
     args: {
         variant: AccordionVariant.Basic,
+        invert: false,
+        level: 2,
     },
-} as MetaStory;
+} satisfies MetaStory;
+
+export default meta;
+
+type MetaStory = Meta<typeof NsAccordion>;
+type Story = StoryObj<typeof meta>;
 
 export const SingleOpen: Story = {
     args: {
         allowMultipleExpanded: false,
-        contentArray,
+        items: getAccordionData(),
+        invert: false,
+    },
+    play: ({ canvasElement }) => {
+        const canvas = within(canvasElement);
+        const el1 = canvas.getByText('Example - 1 JSX');
+        expect(el1).toBeInTheDocument();
+        expect(el1.closest('header')).toHaveAttribute('aria-expanded', 'true');
+        const el2 = canvas.getByText('Example - 2');
+        expect(el2).toBeInTheDocument();
+        expect(el2.closest('header')).toHaveAttribute('aria-expanded', 'false');
     },
 };
 
 export const MultipleOpen: Story = {
     args: {
         allowMultipleExpanded: true,
-        contentArray,
+        items: getAccordionData(),
     },
 };

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

@@ -1,6 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsAccordionHeader, NsIconVariants } from '../..';
+import { AccordionVariant, NsAccordionHeader, NsIconVariants } from '../..';
 
 type ComponentType = typeof NsAccordionHeader;
 type Story = StoryObj<ComponentType>;
@@ -23,9 +23,13 @@ export default {
     },
     args: {
         title: 'Nuskin',
+        variant: AccordionVariant.Compact,
         onClick: () => {
             console.log('accordion header clicked');
         },
+        startIcon: {
+            name: 'home',
+        },
         openedIconName: 'arrowUp',
         closedIconName: 'arrowDown',
         isOpen: false,

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

@@ -1,6 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsAccordionItem } from '@/common/index';
+import { AccordionVariant, NsAccordionItem } from '../../';
+import NsAccordionStory from './NsAccordion.stories';
 
 type ComponentType = typeof NsAccordionItem;
 type Story = StoryObj<ComponentType>;
@@ -20,21 +21,25 @@ export default {
             control: 'string',
             description: 'text used for header of section',
         },
+        level: NsAccordionStory.argTypes.level,
+        variant: NsAccordionStory.argTypes.variant,
     },
 } as MetaStory;
 
 export const OpenSection: Story = {
     args: {
+        variant: AccordionVariant.Compact,
         isOpen: true,
-        content: 'Nuskin Description',
+        content: <div className="p-2">Nuskin Description</div>,
         title: 'Nuskin',
     },
 };
 
 export const ClosedSection: Story = {
     args: {
+        variant: AccordionVariant.Compact,
         isOpen: false,
-        content: 'Nuskin Description',
+        content: <div className="p-2">Nuskin Description</div>,
         title: 'Nuskin',
     },
 };

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

@@ -1,6 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsCollapse } from '../';
+import { AccordionContentTypeObject, AccordionVariant, NsCollapse } from '../';
+import NsAccordionStory from './NsAccordion.stories';
 
 type ComponentType = typeof NsCollapse;
 type Story = StoryObj<ComponentType>;
@@ -15,21 +16,35 @@ export default {
             control: 'boolean',
             description: 'if true renders NsCollapse in open state, and close state otherwise',
         },
-        children: {
+        content: {
             control: 'React Node',
             description: 'Content for NsCollapse',
         },
+        allowMultipleExpanded: {
+            control: 'boolean',
+            description: 'This prop is useful when content is an array of accordion items',
+        },
+        type: {
+            control: 'select',
+            values: Object.values(AccordionContentTypeObject),
+            description: 'This type should exactly match the content type to have accordion work correctly',
+        },
+        level: NsAccordionStory.argTypes.level,
+        variant: NsAccordionStory.argTypes.variant,
+    },
+    args: {
+        variant: AccordionVariant.Compact,
     },
 } as MetaStory;
 export const Closed: Story = {
     args: {
         isOpen: false,
-        children: 'Nuskin Description',
+        content: <div className="p-2">Nuskin Description</div>,
     },
 };
 export const Open: Story = {
     args: {
         isOpen: true,
-        children: 'Nuskin Description',
+        content: <div className="p-2">Nuskin Description</div>,
     },
 };

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

@@ -1,6 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsToggleSection } from '../..';
+import { AccordionVariant, NsToggleSection } from '../..';
+import NsAccordionStory from './NsAccordion.stories';
 
 type ComponentType = typeof NsToggleSection;
 type Story = StoryObj<ComponentType>;
@@ -11,12 +12,14 @@ export default {
     component: NsToggleSection,
     decorators: [withCenterDecorator],
     argTypes: {
+        level: NsAccordionStory.argTypes.level,
+        variant: NsAccordionStory.argTypes.variant,
         title: { control: 'string' },
     },
     args: {
+        variant: AccordionVariant.Compact,
         title: 'Nuskin',
-        children: 'Nuskin Details',
-
+        content: <div className="p-2">Nuskin Details</div>,
     },
 } as MetaStory;
 

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

@@ -1,22 +1,143 @@
-import { NsAccordionProps } from '../types';
+import { AccordionContentTypeObject, NsIconProps } from '../..';
+import { AccordionItem } from '../types';
 
-export const contentArray: NsAccordionProps['contentArray'] = [
-    {
-        title: 'Nuskin',
-        body: <div>Nuskin Details</div>,
+const getItem = () => {
+    return {
+        id: parseInt(Math.random() * 10000000 + '') + '',
+    };
+};
+const getIcon = (name = '', color = '') => {
+    return {
+        name: (name || 'home') as NsIconProps['name'],
+        color: (color || 'primary') as NsIconProps['color'],
+    };
+};
+export const getTextContent = (text = '') => {
+    return {
+        type: AccordionContentTypeObject.text as AccordionItem['type'],
+        content: text || dummyText,
+    };
+};
+const getJsxContent = (text = '') => {
+    return <div className="p-4">{text || 'Content type can be jsx, text, html or Accordion'}</div>;
+};
+export const dummyText = `1. Theme can be set to either ‘gray’ or ‘stripe’, adjusting only the appearance of
+the topmost set of accordions.\n
+2. Accordions can be nested repeatedly, internal accordions follow the ‘gray’ theme.\n
+3. Color can be inverted by setting boolean ‘invert’ attribute. This inversion affects all levels of the accordion.\n
+4. Per level offset of accordion can be changed by setting the level attribute.\n
+Defaults to 1 which is zero offset - all level titles appear stacked directly over each other.`;
+function createAccordionItem1(): AccordionItem {
+    return {
+        ...getItem(),
+        icon: getIcon(),
+        title: 'Example - 1 JSX',
+        content: getJsxContent(),
+        type: AccordionContentTypeObject.jsx,
         isDefaultOpen: true,
-    },
-    {
-        title: 'Nuskin',
-        body: <div>Nuskin Details</div>,
+    };
+}
+function createAccordionItem2(): AccordionItem {
+    return {
+        ...getItem(),
         isDefaultOpen: true,
-    },
-    {
-        title: 'Nuskin',
-        body: <div>Nuskin Details</div>,
-    },
-    {
-        title: 'Nuskin',
-        body: <div>Nuskin Details</div>,
-    },
-];
+        icon: getIcon(),
+        title: 'Example - 2',
+        type: AccordionContentTypeObject.accordion,
+        content: [
+            { ...getItem(), title: 'Example - 2.1', ...getTextContent() },
+            {
+                ...getItem(),
+                icon: getIcon('hamburgerIcon', 'success'),
+                title: 'Example - 2.2',
+                type: AccordionContentTypeObject.jsx,
+                content: <div className="p-2">Example 2.2 Content</div>,
+            },
+        ],
+    };
+}
+function createAccordionItem3(): AccordionItem {
+    return {
+        ...getItem(),
+        icon: getIcon('hamburgerIcon', 'success'),
+        title: 'Example - 3',
+        type: AccordionContentTypeObject.accordion,
+        content: [
+            createAccordionItem3_1(),
+            {
+                ...getItem(),
+
+                title: 'Example - 3.2',
+                type: AccordionContentTypeObject.text,
+                content: dummyText,
+            },
+        ],
+    };
+}
+
+export function createAccordionItem3_1(): AccordionItem {
+    return {
+        ...getItem(),
+        title: 'Example - 3.1',
+        allowMultipleExpanded: true,
+        type: AccordionContentTypeObject.accordion,
+        content: [
+            {
+                ...getItem(),
+                title: 'Example - 3.1.1',
+                type: AccordionContentTypeObject.text,
+                content: dummyText,
+            },
+            {
+                ...getItem(),
+                title: 'Example - 3.1.2',
+                type: AccordionContentTypeObject.text,
+                content: dummyText,
+            },
+        ],
+    };
+}
+
+function createAccordionItem4(): AccordionItem {
+    return {
+        ...getItem(),
+        icon: getIcon(),
+        title: 'Example - 4',
+        type: AccordionContentTypeObject.accordion,
+        content: [
+            createAccordionItem4_1(),
+            {
+                ...getItem(),
+                title: 'Example - 4.2',
+                type: AccordionContentTypeObject.html,
+                content: '<h2>Lorem ipsum dolor sit amet.</h2>',
+            },
+        ],
+    };
+}
+
+function createAccordionItem4_1(): AccordionItem {
+    return {
+        ...getItem(),
+        title: 'Example - 4.1',
+        type: AccordionContentTypeObject.accordion,
+        content: [
+            {
+                ...getItem(),
+
+                title: 'Example - 4.1.1',
+                type: AccordionContentTypeObject.text,
+                content: dummyText,
+            },
+            {
+                ...getItem(),
+                type: AccordionContentTypeObject.jsx,
+                content: <div className="p-3">Example 4.1.2. content</div>,
+                title: 'Example - 4.1.2',
+            },
+        ],
+    };
+}
+export function getAccordionData(): AccordionItem[] {
+    return [createAccordionItem1(), createAccordionItem2(), createAccordionItem3(), createAccordionItem4()];
+}

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

@@ -1,73 +1,81 @@
-import { PropsWithChildren, ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { AdditionalProps } from '../common.types';
-import { NsIconNameType } from '../icon';
+import { NsIconNameType, NsIconProps } from '../icon';
 import { Variants } from '../typography';
+import { AccordionContentType, AccordionVariantType } from './enums';
+
+export type AccordionItem = {
+    allowMultipleExpanded?: boolean;
+    type: AccordionContentType;
+    id: string;
+    content: string | AccordionItem[] | ReactElement;
+    icon?: NsIconProps;
+    title: string;
+    isDefaultOpen?: boolean;
+};
+
+export type NsAccordionProps = AdditionalProps & {
+    invert: boolean;
+    level: number;
+    variant: AccordionVariantType;
+    items?: AccordionItem[];
+    isChild?: boolean;
+    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;
+    allowMultipleExpanded: boolean;
+};
+
+type CommonAccordionType = {
+    invert: boolean;
+    level: number;
+    variant: AccordionVariantType;
+    content: AccordionItem['content'];
+};
 
 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;
+    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;
-};
+    startIcon?: NsIconProps;
+} & Pick<CommonAccordionType, 'invert' | 'variant'>;
 
-export type NsCollapseProps = AdditionalProps &
-    PropsWithChildren<{
-        isOpen: boolean;
-        variant: AccordionVariant;
-    }>;
-
-export type NsFramerCollapseProps = NsCollapseProps & {
-    transitionDetails?: {
-        duration?: number;
-        ease?: number[];
-    };
-};
+export type NsCollapseProps = AdditionalProps & {
+    isOpen: boolean;
+    isChild: boolean;
+    allowMultipleExpanded?: boolean;
+    type: AccordionContentType;
+} & CommonAccordionType;
 
-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 NsToggleSectionProps = AdditionalProps & {
+    title: string | ReactNode;
+    /** if true, NsToggle is rendered in open state, that collapsible section is visible */
+    defaultOpen?: boolean;
+    isChild: boolean;
+    type: AccordionContentType;
+} & Pick<CommonAccordionType, 'invert' | 'variant' | 'content'>;
 
 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
-}
+    startIcon?: NsIconProps;
+    isChild: boolean;
+    type: AccordionContentType;
+    allowMultipleExpanded?: boolean;
+} & CommonAccordionType;

package/src/common/alert/Header.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { FoundationTheme } from '@nuskin/foundation-theme';
+
+import type { HeaderProps } from './types.d';
+import { NsIconNameType } from '../icon/types';
+
+export const colorMap: { [key: string]: FoundationTheme.PaletteColors } = {
+    error: 'error',
+    notice: 'info',
+    success: 'secondary',
+    warning: 'warning',
+    default: 'info',
+};
+
+export const iconMap: { [key: string]: NsIconNameType } = {
+    error: 'alertError',
+    success: 'success',
+    warning: 'warning',
+    default: 'infoFilled',
+};
+
+const Header: React.FC<HeaderProps> = ({ children, head }) => (
+    <>
+        {children}
+        {head}
+    </>
+);
+
+export default Header;

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

@@ -6,12 +6,12 @@ const addEventListenerMock = jest.spyOn(window, 'addEventListener');
 const removeEventListenerMock = jest.spyOn(window, 'removeEventListener');
 
 describe('NsAlert', () => {
-    test('renders alert with provided props', () => {
+    test('1. renders alert with provided props', () => {
         render(
             <NsAlert
                 context="error"
                 title="Error Alert"
-                threshhold={800}
+                threshold={800}
                 type="banner"
                 visible
                 head={<span>Alert Head</span>}
@@ -27,13 +27,13 @@ describe('NsAlert', () => {
         expect(screen.getByText('Dismiss')).toBeInTheDocument();
     });
 
-    test('calls onDismiss function when dismissed', () => {
+    test('2. calls onDismiss function when dismissed', () => {
         const onDismissMock = jest.fn();
         render(
             <NsAlert
                 context="info"
                 title="Info Alert"
-                threshhold={600}
+                threshold={600}
                 type="auto"
                 visible
                 head={<span>Alert Head</span>}
@@ -48,12 +48,12 @@ describe('NsAlert', () => {
         expect(onDismissMock).toHaveBeenCalled();
     });
 
-    test('hides alert when not visible', () => {
+    test('3. hides alert when not visible', () => {
         render(
             <NsAlert
                 context="success"
                 title="Success Alert"
-                threshhold={700}
+                threshold={700}
                 type="card"
                 visible={false}
                 head={<span>Alert Head</span>}
@@ -64,13 +64,13 @@ describe('NsAlert', () => {
         expect(screen.getByTestId('alert-container')).toHaveStyle('display: none');
     });
 
-    test('adds and removes event listener on mount/unmount', () => {
+    test('4. adds and removes event listener on mount/unmount', () => {
         act(() => {
             render(
                 <NsAlert
                     context="notice"
                     title="Success Alert"
-                    threshhold={700}
+                    threshold={700}
                     type="card"
                     visible={false}
                     head={<span>Alert Head</span>}
@@ -84,7 +84,22 @@ describe('NsAlert', () => {
         expect(removeEventListenerMock).toHaveBeenCalledWith('resize', expect.any(Function));
     });
 
-    test('updates windowWidth on resize', () => {
+    test('5. updates windowWidth on resize and auto type and greater threshold to select card', () => {
+        const originalInnerWidth = window.innerWidth;
+        window.innerWidth = 500; // Set a desired window width for testing
+
+        act(() => {
+            render(<NsAlert threshold={2000} type="auto" />);
+        });
+
+        // Simulate a resize event by restoring the original innerWidth
+        window.innerWidth = originalInnerWidth;
+
+        act(() => {
+            window.dispatchEvent(new Event('resize'));
+        });
+    });
+    test('6. updates windowWidth on resize', () => {
         const originalInnerWidth = window.innerWidth;
         window.innerWidth = 500; // Set a desired window width for testing
 
@@ -100,12 +115,12 @@ describe('NsAlert', () => {
         });
     });
 
-    test('get props error in console for types', () => {
+    test('7. get props error in console for types', () => {
         render(
             <NsAlert
                 context="warning"
                 title="warning Alert"
-                threshhold={800}
+                threshold={800}
                 type="noCard"
                 visible
                 head={<span>Alert Head</span>}
@@ -116,12 +131,12 @@ describe('NsAlert', () => {
         expect(screen.getByTestId('alert-container')).toHaveStyle('display: block');
     });
 
-    test('get props error in console for context', () => {
+    test('8. get props error in console for context', () => {
         render(
             <NsAlert
                 context="warningError"
                 title="warning Alert"
-                threshhold={800}
+                threshold={800}
                 type="card"
                 visible
                 head={<span>Alert Head</span>}
@@ -131,4 +146,22 @@ describe('NsAlert', () => {
 
         expect(screen.getByTestId('alert-container')).toHaveStyle('display: block');
     });
+    test('9. console.error to be called twice', () => {
+        const original = console.error;
+        console.error = jest.fn();
+        render(
+            <NsAlert
+                context=""
+                title="warning Alert"
+                threshold={2000}
+                type=""
+                visible
+                head={<span>Alert Head</span>}
+                body={<p>Alert Body</p>}
+            />
+        );
+        expect(console.error).toHaveBeenCalledTimes(2);
+        console.error = original;
+        expect(screen.getByTestId('alert-container')).toHaveStyle('display: block');
+    });
 });

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

@@ -24,7 +24,7 @@ export default {
     args: {
         context: 'info',
         title: 'Information',
-        threshhold: 600,
+        threshold: 600,
         type: 'banner',
         visible: true,
         onDismiss: () => {},