@nuskin/foundation-ui-components 1.0.0-cft-35.13 → 1.0.0-develop.10

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

@@ -0,0 +1,45 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { AccordionVariant, NsAccordionItem } from '../../';
+import NsAccordionStory from './NsAccordion.stories';
+
+type ComponentType = typeof NsAccordionItem;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Containers/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',
+        },
+        level: NsAccordionStory.argTypes.level,
+        variant: NsAccordionStory.argTypes.variant,
+    },
+} as MetaStory;
+
+export const OpenSection: Story = {
+    args: {
+        variant: AccordionVariant.Compact,
+        isOpen: true,
+        content: <div className="p-2">Nuskin Description</div>,
+        title: 'Nuskin',
+    },
+};
+
+export const ClosedSection: Story = {
+    args: {
+        variant: AccordionVariant.Compact,
+        isOpen: false,
+        content: <div className="p-2">Nuskin Description</div>,
+        title: 'Nuskin',
+    },
+};

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

@@ -0,0 +1,50 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { AccordionVariant, NsCollapse } from '../';
+import NsAccordionStory from './NsAccordion.stories';
+
+type ComponentType = typeof NsCollapse;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Containers/Accordion/NsCollapse',
+    component: NsCollapse,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        isOpen: {
+            control: 'boolean',
+            description: 'if true renders NsCollapse in open state, and close state otherwise',
+        },
+        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: ['jsx', 'html', 'text', 'accordion'],
+            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,
+        content: <div className="p-2">Nuskin Description</div>,
+    },
+};
+export const Open: Story = {
+    args: {
+        isOpen: true,
+        content: <div className="p-2">Nuskin Description</div>,
+    },
+};

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

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

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

@@ -0,0 +1,143 @@
+import { NsIconProps } from '../..';
+import { AccordionItem } from '../types';
+
+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 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: 'jsx',
+        isDefaultOpen: true,
+    };
+}
+function createAccordionItem2(): AccordionItem {
+    return {
+        ...getItem(),
+        isDefaultOpen: true,
+        icon: getIcon(),
+        title: 'Example - 2',
+        type: 'accordion',
+        content: [
+            { ...getItem(), title: 'Example - 2.1', ...getTextContent() },
+            {
+                ...getItem(),
+                icon: getIcon('hamburgerIcon', 'success'),
+                title: 'Example - 2.2',
+                type: 'jsx',
+                content: <div className="p-2">Example 2.2 Content</div>,
+            },
+        ],
+    };
+}
+function createAccordionItem3(): AccordionItem {
+    return {
+        ...getItem(),
+        icon: getIcon('hamburgerIcon', 'success'),
+        title: 'Example - 3',
+        type: 'accordion',
+        content: [
+            createAccordionItem3_1(),
+            {
+                ...getItem(),
+
+                title: 'Example - 3.2',
+                type: 'text',
+                content: dummyText,
+            },
+        ],
+    };
+}
+
+export function createAccordionItem3_1(): AccordionItem {
+    return {
+        ...getItem(),
+        title: 'Example - 3.1',
+        allowMultipleExpanded: true,
+        type: 'accordion',
+        content: [
+            {
+                ...getItem(),
+                title: 'Example - 3.1.1',
+                type: 'text',
+                content: dummyText,
+            },
+            {
+                ...getItem(),
+                title: 'Example - 3.1.2',
+                type: 'text',
+                content: dummyText,
+            },
+        ],
+    };
+}
+
+function createAccordionItem4(): AccordionItem {
+    return {
+        ...getItem(),
+        icon: getIcon(),
+        title: 'Example - 4',
+        type: 'accordion',
+        content: [
+            createAccordionItem4_1(),
+            {
+                ...getItem(),
+                title: 'Example - 4.2',
+                type: 'html',
+                content: '<h2>Lorem ipsum dolor sit amet.</h2>',
+            },
+        ],
+    };
+}
+
+function createAccordionItem4_1(): AccordionItem {
+    return {
+        ...getItem(),
+        title: 'Example - 4.1',
+        type: 'accordion',
+        content: [
+            {
+                ...getItem(),
+
+                title: 'Example - 4.1.1',
+                type: 'text',
+                content: dummyText,
+            },
+            {
+                ...getItem(),
+                type: '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

@@ -0,0 +1,81 @@
+import { ReactElement, ReactNode } from 'react';
+import { AdditionalProps } from '../common.types';
+import { NsIconNameType, NsIconProps } from '../icon';
+import { Variants } from '../typography';
+import { AccordionVariantType } from './enums';
+
+export type AccordionItem = {
+    allowMultipleExpanded?: boolean;
+    type: 'text' | 'html' | 'accordion' | 'jsx';
+    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;
+    /** NsIcon's icon name to be shown in opened state */
+    openedIconName?: NsIconNameType;
+    /** NsIcon's icon name to be shown in closed state */
+    closedIconName?: NsIconNameType;
+    headerTypographyVariant?: Variants;
+    startIcon?: NsIconProps;
+} & Pick<CommonAccordionType, 'invert' | 'variant'>;
+
+export type NsCollapseProps = AdditionalProps & {
+    isOpen: boolean;
+    isChild: boolean;
+    allowMultipleExpanded?: boolean;
+    type: 'text' | 'html' | 'accordion' | 'jsx';
+} & CommonAccordionType;
+
+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: 'text' | 'html' | 'accordion' | 'jsx';
+} & 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;
+    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;
+    startIcon?: NsIconProps;
+    isChild: boolean;
+    type: 'text' | 'html' | 'accordion' | 'jsx';
+    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

@@ -1,18 +1,17 @@
 import React from 'react';
-import { render, fireEvent, screen, act } from '../../../test-utils';
-// import { act } from 'react-dom/test-utils';
+import { render, fireEvent, screen, act } from '@/test-utils/index';
 import NsAlert from './NsAlert';
 
 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>}
@@ -28,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>}
@@ -49,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>}
@@ -65,47 +64,63 @@ 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}
-                type="card"
-                visible={false}
-                head={<span>Alert Head</span>}
-                body={<p>Alert Body</p>}
-            />);
+            render(
+                <NsAlert
+                    context="notice"
+                    title="Success Alert"
+                    threshold={700}
+                    type="card"
+                    visible={false}
+                    head={<span>Alert Head</span>}
+                    body={<p>Alert Body</p>}
+                />
+            );
         });
-    
+
         expect(addEventListenerMock).toHaveBeenCalledWith('resize', expect.any(Function));
-    
-    
+
         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
+
         act(() => {
             render(<NsAlert />);
         });
-    
+
         // Simulate a resize event by restoring the original innerWidth
         window.innerWidth = originalInnerWidth;
-    
+
         act(() => {
             window.dispatchEvent(new Event('resize'));
         });
     });
 
-    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

@@ -1,42 +1,43 @@
 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>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/NsAlert',
+    title: 'Components/Feedback/NsAlert',
     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',
         title: 'Information',
-        threshhold: 600,
+        threshold: 600,
         type: 'banner',
         visible: true,
         onDismiss: () => {},
-        body:
-        <p>{`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.`}</p>,
-        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 = {};
+export const Alert: Story = {};