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

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

@@ -0,0 +1,163 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@/test-utils/index';
+import { AccordionItem, AccordionVariant, NsAccordion } from '@/common/index';
+
+const generateContentArray = (count: number, isDefaultOpen = true) => {
+    const arr = [] as AccordionItem[];
+    for (let i = 1; i <= count; i++) {
+        arr?.push({
+            title: `Title ${i}`,
+            content: <div className="p-2">Content {i}</div>,
+            isDefaultOpen,
+            type:'jsx',
+            id: `Test ${i}`,
+        });
+    }
+    return arr;
+};
+
+describe('NsAccordion', () => {
+    const items = generateContentArray(3);
+    const defaultProps = {
+        additionalProps: {
+            testid: 'test-accordion',
+        },
+        allowMultipleExpanded: false,
+        items,
+        variant: AccordionVariant.Basic,
+        invert: false,
+        level: 0,
+    };
+
+    it('1. renders without error', () => {
+        const { getByTestId } = render(<NsAccordion {...defaultProps} />);
+        const accordion = getByTestId(defaultProps.additionalProps.testid);
+        expect(accordion).toBeInTheDocument();
+    });
+
+    it(`2. only first section should be visible when allowMultipleExpanded prop is false and multiple items have
+    isDefaultOpen true`, () => {
+        const { getAllByText } = render(<NsAccordion {...defaultProps} />);
+        const [title1, title2, title3] = getAllByText(/Title /i);
+
+        expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'true');
+        expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'false');
+        expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'false');
+        const [c1, c2, c3] = getAllByText(/Content /i);
+        expect(c1.parentNode).toHaveStyle('opacity: 1');
+        expect(c2.parentNode).toHaveStyle('opacity: 0');
+        expect(c3.parentNode).toHaveStyle('opacity: 0');
+    });
+
+    it(`3. expands second section only when allowMultipleExpanded
+     prop is false and second title is clicked`, async () => {
+        const { getAllByText } = render(<NsAccordion {...defaultProps} />);
+        const [title1, title2, title3] = getAllByText(/Title /i);
+        const header = title2.closest('header');
+        expect(header).toHaveAttribute('aria-expanded', 'false');
+        if (header) {
+            fireEvent.click(header);
+            expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'false');
+            expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'true');
+            expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'false');
+            const [c1, c2, c3] = getAllByText(/Content /i);
+            expect(c1.parentNode).toHaveStyle('opacity: 0');
+            expect(c2.parentNode).toHaveStyle('opacity: 1');
+            expect(c3.parentNode).toHaveStyle('opacity: 0');
+        }
+    });
+
+    it('4. expands multiple sections by default when allowMultipleExpanded prop is true', () => {
+        const items = generateContentArray(3);
+        items[2].isDefaultOpen = false;
+        const defaultProps = {
+            allowMultipleExpanded: false,
+            items,
+            variant: AccordionVariant.Basic,
+            level: 0,
+            invert: false,
+        };
+        const { getAllByText } = render(<NsAccordion {...defaultProps} allowMultipleExpanded />);
+        const accordion = screen.getByTestId('ns-accordion-testid');
+        expect(accordion).toBeDefined();
+        const [title1, title2, title3] = getAllByText(/Title /i);
+
+        expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'true');
+        expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'true');
+        expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'false');
+
+        const [c1, c2, c3] = getAllByText(/Content /i);
+        expect(c1.parentNode).toHaveStyle('opacity: 1');
+        expect(c2.parentNode).toHaveStyle('opacity: 1');
+        expect(c3.parentNode).toHaveStyle('opacity: 0');
+
+        fireEvent.click(title3);
+
+        expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'true');
+        expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'true');
+        expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'true');
+
+        const [c11, c12, c13] = getAllByText(/Content /i);
+        expect(c11.parentNode).toHaveStyle('opacity: 1');
+        expect(c12.parentNode).toHaveStyle('opacity: 1');
+        expect(c13.parentNode).toHaveStyle('opacity: 1');
+    });
+    it(`5. closes second section also when allowMultipleExpanded
+     prop is true and second title is clicked`, async () => {
+        const items = generateContentArray(3);
+        const defaultProps = {
+            additionalProps: {
+                testid: 'test-accordion',
+            },
+            allowMultipleExpanded: true,
+            items,
+            variant: AccordionVariant.Basic,
+            invert: false,
+            level: 0,
+        };
+        const { getAllByText } = render(<NsAccordion {...defaultProps} />);
+        const [title1, title2, title3] = getAllByText(/Title /i);
+        const header = title2.closest('header');
+        expect(header).toHaveAttribute('aria-expanded', 'true');
+        if (header) {
+            fireEvent.click(header);
+            expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'true');
+            expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'false');
+            expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'true');
+
+            const [c1, c2, c3] = getAllByText(/Content /i);
+            expect(c1.parentNode).toHaveStyle('opacity: 1');
+            expect(c2.parentNode).toHaveStyle('opacity: 0');
+            expect(c3.parentNode).toHaveStyle('opacity: 1');
+        }
+    });
+    it(`6. closes second section also when allowMultipleExpanded
+     prop is true and second title is clicked`, async () => {
+        const items = generateContentArray(3, false);
+        items[1].isDefaultOpen = true;
+        const defaultProps = {
+            additionalProps: {
+                testid: 'test-accordion',
+            },
+            allowMultipleExpanded: false,
+            items,
+            variant: AccordionVariant.Compact,
+            level: 0,
+            invert: false,
+        };
+        const { getAllByText } = render(<NsAccordion {...defaultProps} />);
+        const [title1, title2, title3] = getAllByText(/Title /i);
+        const header = title2.closest('header');
+        expect(header).toHaveAttribute('aria-expanded', 'true');
+        if (header) {
+            fireEvent.click(header);
+            expect(title1.closest('header')).toHaveAttribute('aria-expanded', 'false');
+            expect(title2.closest('header')).toHaveAttribute('aria-expanded', 'false');
+            expect(title3.closest('header')).toHaveAttribute('aria-expanded', 'false');
+            const [c1, c2, c3] = getAllByText(/Content /i);
+            expect(c1.parentNode).toHaveStyle('opacity: 0');
+            expect(c2.parentNode).toHaveStyle('opacity: 0');
+            expect(c3.parentNode).toHaveStyle('opacity: 0');
+        }
+    });
+});

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

@@ -0,0 +1,130 @@
+import React from 'react';
+import { render, fireEvent } from '@/test-utils/index';
+import { NsAccordionHeader, AccordionVariant } from '@/common/index';
+
+describe('NsAccordionHeader', () => {
+    it('1. renders title correctly', () => {
+        const onClick = jest.fn();
+        const title = 'Section Header';
+        const { getByText } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title={title}
+                onClick={onClick}
+                invert={false}
+                isOpen={true}
+            />
+        );
+        const el = getByText(title);
+        expect(el).toBeInTheDocument();
+        expect(el.closest('header')).toHaveAttribute('aria-expanded', 'true');
+    });
+    it('2. renders title correctly', () => {
+        const onClick = jest.fn();
+        const title = 'Section Header';
+        const { getByText } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Compact}
+                title={<span>{title}</span>}
+                onClick={onClick}
+                invert={false}
+                isOpen={false}
+            />
+        );
+        const el = getByText(title);
+        expect(el).toBeInTheDocument();
+        expect(el.closest('header')).toHaveAttribute('aria-expanded', 'false');
+    });
+    it('3. calls onClick handler when clicked', () => {
+        const onClick = jest.fn();
+        const { container } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                onClick={onClick}
+                invert={false}
+                isOpen={false}
+            />
+        );
+        const header = container.querySelector('header');
+        if (header) {
+            fireEvent.click(header);
+            expect(onClick).toHaveBeenCalledTimes(1);
+        }
+    });
+
+    it('4. renders with additional class name', () => {
+        const additionalClassName = 'custom-class';
+        const onClick = jest.fn();
+        const { container } = render(
+            <NsAccordionHeader
+                isOpen={false}
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                additionalProps={{ className: additionalClassName }}
+                onClick={onClick}
+                invert={false}
+            />
+        );
+        expect(container.querySelector('header')).toHaveClass(`section-header ${additionalClassName}`);
+    });
+
+    it('5. renders with expanded class when isOpen is true', () => {
+        const onClick = jest.fn();
+        const { container } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                isOpen
+                onClick={onClick}
+                invert={false}
+            />
+        );
+        expect(container.querySelector('header')).toHaveClass('expanded');
+    });
+
+    it('6. renders with header icon', () => {
+        const onClick = jest.fn();
+        const { getByTestId } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                onClick={onClick}
+                invert={false}
+                isOpen
+            />
+        );
+        // this icon refers to end icon which is either arrowUp or arrowDown
+        expect(getByTestId('icon')).toBeInTheDocument();
+    });
+    it('7. renders with custom start icon', () => {
+        const onClick = jest.fn();
+        const { getByTestId } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                onClick={onClick}
+                invert={false}
+                isOpen
+                startIcon={{ name: 'hamburgerIcon', testId: 'hamburger-test' }}
+            />
+        );
+        expect(getByTestId('hamburger-test')).toBeInTheDocument();
+    });
+    it('8. does not render start icon, when invalid icon name is passed', () => {
+        const onClick = jest.fn();
+        const invalidIconName = 'hambur';
+        const testId = 'hamburger-test';
+        const { queryByTestId } = render(
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                onClick={onClick}
+                invert={false}
+                isOpen
+                startIcon={{ name: invalidIconName as any, testId }}
+            />
+        );
+        expect(queryByTestId(testId)).toBeNull();
+    });
+});

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

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, fireEvent } from '@/test-utils/index';
+import { NsAccordionItem, AccordionVariant } from '@/common/index';
+
+describe('NsAccordionItem', () => {
+    const title = 'Accordion Section Title';
+    const content = 'Accordion Section Content';
+    const contentElement = <div className="p-2">{content}</div>;
+    it('1. renders title correctly', () => {
+        const { getByText } = render(
+            <NsAccordionItem
+                type="jsx"
+                variant={AccordionVariant.Basic}
+                isOpen={false}
+                toggleOpen={() => {}}
+                title={title}
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
+            />
+        );
+        expect(getByText(title)).toBeInTheDocument();
+    });
+
+    it('2. calls toggleOpen function when clicked on the section header', () => {
+        const toggleOpen = jest.fn();
+        const { getByText } = render(
+            <NsAccordionItem
+                type="jsx"
+                variant={AccordionVariant.Basic}
+                isOpen={false}
+                toggleOpen={toggleOpen}
+                title={title}
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
+            />
+        );
+        fireEvent.click(getByText(title));
+        expect(toggleOpen).toHaveBeenCalledTimes(1);
+    });
+
+    it('3. renders content when isOpen is true', () => {
+        const { getByText } = render(
+            <NsAccordionItem
+                variant={AccordionVariant.Basic}
+                isOpen={true}
+                toggleOpen={() => {}}
+                title={title}
+                type="jsx"
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
+            />
+        );
+        expect(getByText(content)).toBeInTheDocument();
+    });
+
+    it('4. when isOpen is false, renders jsx dom content within container with 0 height', () => {
+        const { queryByText } = render(
+            <NsAccordionItem
+                type="jsx"
+                variant={AccordionVariant.Basic}
+                isOpen={false}
+                toggleOpen={() => {}}
+                title={title}
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
+            />
+        );
+        const bodyElement = queryByText(content);
+        expect(bodyElement?.parentNode).toHaveStyle('height:0px;');
+    });
+});

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

@@ -0,0 +1,129 @@
+import React from 'react';
+import { render, screen } from '@/test-utils/index';
+import { NsCollapse, AccordionVariant, AccordionItem } from '@/common/index';
+import { createAccordionItem3_1 } from '../stories/data';
+
+describe('NsCollapse', () => {
+    it('1. renders children when isOpen is true', () => {
+        const { getByText } = render(
+            <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('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={true}
+                variant={AccordionVariant.Compact}
+                type="html"
+                content={content}
+                isChild={false}
+                invert={true}
+                level={0}
+            />
+        );
+        expect(screen.queryByText(content)).toBeDefined();
+    });
+
+    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
+                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

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { AccordionVariant, NsToggleSection } from '@/common/index';
+
+import { render, fireEvent } from '@/test-utils/index';
+
+describe('NsToggleSection', () => {
+    const title = 'Toggle Section Title';
+    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={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('2. toggles content visibility when clicked on the section header', () => {
+        const { getByText, queryByText } = render(
+            <NsToggleSection
+                variant={AccordionVariant.Basic}
+                title={title}
+                content={content}
+                invert={false}
+                isChild={false}
+                type="jsx"
+            />
+        );
+        const el = queryByText(contentText);
+        expect(el?.parentNode).toHaveStyle('opacity: 0;');
+
+        fireEvent.click(getByText(title));
+        expect(el?.parentNode).toHaveStyle('opacity: 1;');
+
+        fireEvent.click(getByText(title));
+        expect(el?.parentNode).toHaveStyle('opacity: 0;');
+    });
+
+    it('3. sets defaultOpen prop correctly', () => {
+        const { getByText } = render(
+            <NsToggleSection
+                variant={AccordionVariant.Basic}
+                title={title}
+                content={content}
+                invert={false}
+                isChild={false}
+                defaultOpen
+                type="jsx"
+            />
+        );
+
+        expect(getByText(contentText)).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,65 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+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: {
+        allowMultipleExpanded: {
+            control: 'boolean',
+            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`,
+        },
+        items: {
+            description: ` this should be an array of objects, each object should have 3 properties,
+            title, body and isDefaultOpen`,
+        },
+        variant: {
+            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,
+    },
+} satisfies MetaStory;
+
+export default meta;
+
+type MetaStory = Meta<typeof NsAccordion>;
+type Story = StoryObj<typeof meta>;
+
+export const SingleOpen: Story = {
+    args: {
+        allowMultipleExpanded: false,
+        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,
+        items: getAccordionData(),
+    },
+};

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

@@ -0,0 +1,44 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { AccordionVariant, NsAccordionHeader, NsIconVariants } from '../..';
+
+type ComponentType = typeof NsAccordionHeader;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/Containers/Accordion/NsAccordionHeader',
+    component: NsAccordionHeader,
+    decorators: [withCenterDecorator],
+    argTypes: {
+        title: { control: 'string' },
+        openedIconName: {
+            control: 'select',
+            options: Object.keys(NsIconVariants),
+        },
+        closedIconName: {
+            control: 'select',
+            options: Object.keys(NsIconVariants),
+        },
+    },
+    args: {
+        title: 'Nuskin',
+        variant: AccordionVariant.Compact,
+        onClick: () => {
+            console.log('accordion header clicked');
+        },
+        startIcon: {
+            name: 'home',
+        },
+        openedIconName: 'arrowUp',
+        closedIconName: 'arrowDown',
+        isOpen: false,
+    },
+} as MetaStory;
+
+export const ClosedHeader: Story = {};
+export const OpenedHeader: Story = {
+    args: {
+        isOpen: true,
+    },
+};