@nuskin/foundation-ui-components 1.0.2 → 1.1.1

package/src/common/accordion/specs/NsCollapse.spec.tsx

@@ -1,36 +1,128 @@
 import React from 'react';
 import { render, screen } from '@/test-utils/index';
-import { NsCollapse, AccordionVariant } from '@/common/index';
+import { NsCollapse, AccordionVariant, AccordionItem } from '@/common/index';
+import { createAccordionItem3_1 } from '../stories/data';
 
 describe('NsCollapse', () => {
-    it('renders children when isOpen is true', () => {
+    it('1. renders children when isOpen is true', () => {
         const { getByText } = render(
-            <NsCollapse isOpen variant={AccordionVariant.Basic}>
-                <div>Child 1</div>
-                <div>Child 2</div>
-            </NsCollapse>
+            <NsCollapse
+                isOpen
+                variant={AccordionVariant.Basic}
+                content={
+                    <>
+                        <div>Child 1</div>
+                        <div>Child 2</div>
+                    </>
+                }
+                type="jsx"
+                isChild={false}
+                invert={false}
+                level={0}
+            />
         );
         expect(getByText('Child 1')).toBeInTheDocument();
         expect(getByText('Child 2')).toBeInTheDocument();
     });
+    it('2. renders children when isOpen is true and isChild is true', () => {
+        const content = 'renders children when isOpen is true and isChild is true';
+        const { getByText } = render(
+            <NsCollapse
+                isOpen
+                type="text"
+                variant={AccordionVariant.Basic}
+                content={content}
+                isChild={true}
+                invert={false}
+                level={0}
+            />
+        );
+        expect(getByText(content)).toBeInTheDocument();
+    });
+    it('3. renders children when isOpen is true and variant is compact and content is of type accordion', () => {
+        const accItem = createAccordionItem3_1();
+        const content = accItem.content as AccordionItem[];
+        const { getByText } = render(
+            <NsCollapse
+                isOpen
+                variant={AccordionVariant.Compact}
+                content={content}
+                type={accItem.type}
+                isChild={true}
+                invert={false}
+                level={0}
+            />
+        );
+        expect(getByText(content[0].title)).toBeInTheDocument();
+        expect(getByText(content[1].title)).toBeInTheDocument();
+    });
 
-    it('does not render children when isOpen is false', () => {
+    it('4. does not render children when isOpen is false', () => {
+        const content = '<h2>Lorem ipsum dolor sit amet.</h2>';
+        render(
+            <NsCollapse
+                isOpen={false}
+                variant={AccordionVariant.Basic}
+                type="html"
+                content={content}
+                isChild={false}
+                invert={true}
+                level={0}
+            />
+        );
+        expect(screen.queryByText(content)).toBeNull();
+    });
+    it('5. renders html children when isOpen is true', () => {
+        const content = '<h2>Lorem ipsum dolor sit amet.</h2>';
         render(
-            <NsCollapse isOpen={false} variant={AccordionVariant.Basic}>
-                <div>Child 1</div>
-                <div>Child 2</div>
-            </NsCollapse>
+            <NsCollapse
+                isOpen={true}
+                variant={AccordionVariant.Compact}
+                type="html"
+                content={content}
+                isChild={false}
+                invert={true}
+                level={0}
+            />
         );
-        expect(screen.queryByText('Child')).toBeNull();
+        expect(screen.queryByText(content)).toBeDefined();
     });
 
-    it('renders with additional class name', () => {
+    it('6. renders with additional class name', () => {
+        const additionalClassName = 'custom-class';
+        const { container } = render(
+            <NsCollapse
+                type="jsx"
+                isOpen
+                variant={AccordionVariant.Gray}
+                content={
+                    <>
+                        <div>Child 1</div>
+                        <div>Child 2</div>
+                    </>
+                }
+                additionalProps={{ className: additionalClassName }}
+                isChild={false}
+                invert={false}
+                level={7}
+            />
+        );
+        expect(container.querySelector('section')).toHaveClass(`ns-collapse ${additionalClassName}`);
+    });
+    it('7. skipping allowMultipleExpanded in child data', () => {
+        const { content, type } = createAccordionItem3_1();
         const additionalClassName = 'custom-class';
         const { container } = render(
-            <NsCollapse additionalProps={{ className: additionalClassName }} isOpen variant={AccordionVariant.Basic}>
-                <div>Child 1</div>
-                <div>Child 2</div>
-            </NsCollapse>
+            <NsCollapse
+                type={type}
+                isOpen
+                variant={AccordionVariant.Gray}
+                content={content}
+                additionalProps={{ className: additionalClassName }}
+                isChild={false}
+                invert={true}
+                level={7}
+            />
         );
         expect(container.querySelector('section')).toHaveClass(`ns-collapse ${additionalClassName}`);
     });

package/src/common/accordion/specs/NsToggleSection.spec.tsx

@@ -6,33 +6,69 @@ import { render, fireEvent } from '@/test-utils/index';
 
 describe('NsToggleSection', () => {
     const title = 'Toggle Section Title';
-    const content = 'Toggle Section Content';
-
-    it('renders title correctly', () => {
+    const contentText = 'Toggle Section Content';
+    const content = <div className="p-2">{contentText}</div>;
+    it('1. renders title correctly', () => {
         const { getByText } = render(
-            <NsToggleSection variant={AccordionVariant.Basic} title={title}>{content}</NsToggleSection>
+            <NsToggleSection
+                variant={AccordionVariant.Basic}
+                title={title}
+                content={content}
+                invert={false}
+                isChild={false}
+                type="jsx"
+            />
+        );
+        expect(getByText(title)).toBeInTheDocument();
+    });
+    it('2. renders title correctly', () => {
+        const { getByText } = render(
+            <NsToggleSection
+                variant={AccordionVariant.Compact}
+                title={title}
+                content={content}
+                invert={false}
+                isChild={false}
+                type="jsx"
+            />
         );
         expect(getByText(title)).toBeInTheDocument();
     });
 
-    it('toggles content visibility when clicked on the section header', () => {
+    it('2. toggles content visibility when clicked on the section header', () => {
         const { getByText, queryByText } = render(
-            <NsToggleSection variant={AccordionVariant.Basic} title={title}>{content}</NsToggleSection>
+            <NsToggleSection
+                variant={AccordionVariant.Basic}
+                title={title}
+                content={content}
+                invert={false}
+                isChild={false}
+                type="jsx"
+            />
         );
-        expect(queryByText(content)).toBeNull();
+        const el = queryByText(contentText);
+        expect(el?.parentNode).toHaveStyle('opacity: 0;');
+
         fireEvent.click(getByText(title));
-        expect(getByText(content)).toBeInTheDocument();
+        expect(el?.parentNode).toHaveStyle('opacity: 1;');
+
         fireEvent.click(getByText(title));
-        expect(queryByText(content)).toBeNull();
+        expect(el?.parentNode).toHaveStyle('opacity: 0;');
     });
 
-    it('sets defaultOpen prop correctly', () => {
+    it('3. sets defaultOpen prop correctly', () => {
         const { getByText } = render(
-            <NsToggleSection variant={AccordionVariant.Basic} title={title} defaultOpen>
-                {content}
-            </NsToggleSection>
+            <NsToggleSection
+                variant={AccordionVariant.Basic}
+                title={title}
+                content={content}
+                invert={false}
+                isChild={false}
+                defaultOpen
+                type="jsx"
+            />
         );
 
-        expect(getByText(content)).toBeInTheDocument();
+        expect(getByText(contentText)).toBeInTheDocument();
     });
 });

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`,
         },
@@ -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,13 +1,13 @@
 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>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Accordion/NsAccordionHeader',
+    title: 'Components/Containers/Accordion/NsAccordionHeader',
     component: NsAccordionHeader,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -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,13 +1,14 @@
 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>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Accordion/NsAccordionItem',
+    title: 'Components/Containers/Accordion/NsAccordionItem',
     component: NsAccordionItem,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -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,13 +1,14 @@
 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>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Accordion/NsCollapse',
+    title: 'Components/Containers/Accordion/NsCollapse',
     component: NsCollapse,
     decorators: [withCenterDecorator],
     argTypes: {
@@ -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,22 +1,25 @@
 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>;
 type MetaStory = Meta<ComponentType>;
 
 export default {
-    title: 'Components/Accordion/NsToggleSection',
+    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',
-        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()];
+}