@nuskin/foundation-ui-components 1.0.0-develop.6 → 1.0.0-develop.7

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

@@ -1,15 +1,11 @@
 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 {
-    title: 'Components/Accordion/NsAccordion',
+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],
     argTypes: {
@@ -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`,
         },
@@ -29,19 +25,36 @@ export default {
     },
     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

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Accordion/NsAccordionHeader',
+    title: 'Components/Containers/Accordion/NsAccordionHeader',
     component: NsAccordionHeader,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -26,6 +26,9 @@ export default {
         onClick: () => {
             console.log('accordion header clicked');
         },
+        startIcon: {
+            name: 'home',
+        },
         openedIconName: 'arrowUp',
         closedIconName: 'arrowDown',
         isOpen: false,

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

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Accordion/NsAccordionItem',
+    title: 'Components/Containers/Accordion/NsAccordionItem',
     component: NsAccordionItem,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -26,7 +26,7 @@ export default {
 export const OpenSection: Story = {
     args: {
         isOpen: true,
-        content: 'Nuskin Description',
+        content: <div className="p-2">Nuskin Description</div>,
         title: 'Nuskin',
     },
 };
@@ -34,7 +34,7 @@ export const OpenSection: Story = {
 export const ClosedSection: Story = {
     args: {
         isOpen: false,
-        content: 'Nuskin Description',
+        content: <div className="p-2">Nuskin Description</div>,
         title: 'Nuskin',
     },
 };

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

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Accordion/NsCollapse',
+    title: 'Components/Containers/Accordion/NsCollapse',
     component: NsCollapse,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -24,12 +24,12 @@ export default {
 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

@@ -7,7 +7,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Accordion/NsToggleSection',
+    title: 'Components/Containers/Accordion/NsToggleSection',
     component: NsToggleSection,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -15,8 +15,7 @@ export default {
     },
     args: {
         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,160 @@
-import { NsAccordionProps } from '../types';
+import { NsIconProps } from '../..';
+import { AccordionItem, ItemContent } 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: 'text' as ItemContent['type'],
+        data: 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(),
         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',
+        content: {
+            type: 'accordion',
+            data: [
+                { ...getItem(), title: 'Example - 2.1', content: getTextContent() },
+                {
+                    ...getItem(),
+                    icon: getIcon('hamburgerIcon', 'success'),
+                    title: 'Example - 2.2',
+                    content: <div className="p-2">Example 2.2 Content</div>,
+                },
+            ],
+        },
+    };
+}
+function createAccordionItem3(): AccordionItem {
+    return {
+        ...getItem(),
+        icon: getIcon('hamburgerIcon', 'success'),
+        title: 'Example - 3',
+        content: {
+            type: 'accordion',
+            data: [
+                createAccordionItem3_1(),
+                {
+                    ...getItem(),
+
+                    title: 'Example - 3.2',
+                    content: {
+                        type: 'text',
+                        data: dummyText,
+                    },
+                },
+            ],
+        },
+    };
+}
+
+export function createAccordionItem3_1(): AccordionItem {
+    return {
+        ...getItem(),
+        title: 'Example - 3.1',
+        content: {
+            type: 'accordion',
+            allowMultipleExpanded: true,
+            data: [
+                {
+                    ...getItem(),
+                    title: 'Example - 3.1.1',
+                    content: {
+                        type: 'text',
+                        data: dummyText,
+                    },
+                },
+                {
+                    ...getItem(),
+                    title: 'Example - 3.1.2',
+                    content: {
+                        type: 'text',
+                        data: dummyText,
+                    },
+                },
+            ],
+        },
+    };
+}
+
+function createAccordionItem4(): AccordionItem {
+    return {
+        ...getItem(),
+        icon: getIcon(),
+        title: 'Example - 4',
+        content: {
+            type: 'accordion',
+            data: [
+                createAccordionItem4_1(),
+                {
+                    ...getItem(),
+                    title: 'Example - 4.2',
+                    content: {
+                        type: 'html',
+                        data: '<h2>Lorem ipsum dolor sit amet.</h2>',
+                    },
+                },
+            ],
+        },
+    };
+}
+
+function createAccordionItem4_1(): AccordionItem {
+    return {
+        ...getItem(),
+        title: 'Example - 4.1',
+        content: {
+            type: 'accordion',
+            data: [
+                {
+                    ...getItem(),
+
+                    title: 'Example - 4.1.1',
+                    content: {
+                        type: 'text',
+                        data: dummyText,
+                    },
+                },
+                {
+                    ...getItem(),
+                    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,80 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { AdditionalProps } from '../common.types';
-import { NsIconNameType } from '../icon';
-import { Variants } from '../typography';
+import {ReactElement, ReactNode} from 'react';
+import {AdditionalProps} from '../common.types';
+import {NsIconNameType, NsIconProps} from '../icon';
+import {Variants} from '../typography';
+import {AccordionVariantType} from './enums';
+
+export interface ItemContent {
+    type: 'text' | 'html' | 'accordion' | 'jsx';
+    allowMultipleExpanded?: boolean;
+    data: string | AccordionItem[];
+}
+
+export type AccordionItem = {
+    id: string;
+    content: ItemContent | 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;
+} & 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;
+} & 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;
+} & 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

@@ -8,7 +8,7 @@ type Story = StoryObj<ComponentType>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsAlert',
+    title: 'Components/Feedback/NsAlert',
     component: NsAlert,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -24,7 +24,7 @@ export default {
     args: {
         context: 'info',
         title: 'Information',
-        threshhold: 600,
+        threshold: 600,
         type: 'banner',
         visible: true,
         onDismiss: () => {},
@@ -40,4 +40,4 @@ export default {
     },
 } as MetaStory;
 
-export const AuthDropdown: Story = {};
+export const Alert: Story = {};