@nuskin/foundation-ui-components 1.0.0-develop.2 → 1.0.0-develop.4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.0.0-develop.2",
+    "version": "1.0.0-develop.4",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "private": false,
     "main": "src/common/index.ts",

package/src/common/accordion/NsAccordion.tsx

@@ -0,0 +1,77 @@
+import { useState, useEffect, useMemo } from 'react';
+import NsAccordionItem from './NsAccordionItem';
+import { NsAccordionProps } from './types';
+import { StyledAccordionWrapper } from './ToggleSection.styled';
+
+/**
+ * NsAccordion can be used to show a list of items with title and body
+ * it accepts a `boolean` prop `allowMultipleExpanded` which when true,
+ * multiple sections of accordion can remain open at a time
+ *
+ * we can define certain section to remain open by default using `isDefaultOpen` in the
+ * contentArray item
+ * if there are multiple items available for default open, but `allowMultipleExpanded`
+ * is false then only first item of default open is made open
+ */
+const NsAccordion = ({
+    additionalProps,
+    allowMultipleExpanded,
+    contentArray,
+    variant,
+    headerTypographyVariant,
+    closedIconName,
+    openedIconName,
+}: NsAccordionProps) => {
+    const defaultOpenIds = useMemo(() => {
+        return contentArray
+            .map((content, index) => (content?.isDefaultOpen ? index : null))
+            .filter((e) => typeof e === 'number') as number[];
+    }, [contentArray]);
+    const [expandedIds, setExpandedIds] = useState<Array<number>>(defaultOpenIds);
+
+    const toggleOpen = (sectionNumber: number, isExpanded: boolean) => {
+        if (allowMultipleExpanded) {
+            if (isExpanded) {
+                setExpandedIds(expandedIds.filter((existingNumber) => existingNumber !== sectionNumber));
+            } else {
+                setExpandedIds([...expandedIds, sectionNumber]);
+            }
+        } else {
+            if (isExpanded) {
+                setExpandedIds([]);
+            } else {
+                setExpandedIds([sectionNumber]);
+            }
+        }
+    };
+    useEffect(() => {
+        setExpandedIds(allowMultipleExpanded ? defaultOpenIds : [defaultOpenIds[0]]);
+    }, [allowMultipleExpanded, defaultOpenIds]);
+
+    return (
+        <StyledAccordionWrapper
+            variant={variant}
+            className="ns-accordion"
+            data-testid={additionalProps?.testid ?? 'ns-accordion-testid'}
+        >
+            {contentArray.map((content, index) => {
+                const isOpen = expandedIds.includes(index);
+                return (
+                    <NsAccordionItem
+                        variant={variant}
+                        headerTypographyVariant={headerTypographyVariant}
+                        closedIconName={closedIconName}
+                        openedIconName={openedIconName}
+                        key={index}
+                        isOpen={isOpen}
+                        toggleOpen={() => toggleOpen(index, isOpen)}
+                        content={content?.body}
+                        title={content?.title}
+                    />
+                );
+            })}
+        </StyledAccordionWrapper>
+    );
+};
+
+export default NsAccordion;

package/src/common/accordion/NsAccordionHeader.tsx

@@ -0,0 +1,56 @@
+import { NsTypography, NsIcon, NsAccordionHeaderProps, AccordionVariant } from '..';
+import { styled, ColorUtils } from '@nuskin/foundation-theme';
+const { getPaletteColor } = ColorUtils;
+
+const StyledHeader = styled('header')<{ variant: AccordionVariant }>(({ theme, variant }) => {
+    const backgroundColor = getPaletteColor(theme, 'primary', 'contrastText') as string;
+    let borderBottom = 'none';
+    if (variant === AccordionVariant.Compact) {
+        borderBottom = '1px solid rgb(0,0,0,0.125)';
+    }
+    return {
+        backgroundColor,
+        cursor: 'pointer',
+        display: 'grid',
+        gridTemplateColumns: '1fr 24px',
+        padding: '9px 16px',
+        borderBottom,
+    } as any;
+});
+
+/**
+ * NsAccordionHeader is primarily used by NsToggleSection and NsAccordionItem
+ * as a header, so it accepts `title` , `isOpen` and `onClick`
+ */
+const NsAccordionHeader = ({
+    title,
+    onClick,
+    isOpen,
+    additionalProps,
+    openedIconName,
+    closedIconName,
+    variant,
+    headerTypographyVariant,
+}: NsAccordionHeaderProps) => {
+    return (
+        <StyledHeader
+            role="button"
+            aria-expanded={isOpen ? 'true' : 'false'}
+            className={`section-header ${isOpen ? 'expanded' : ''} ${additionalProps?.className ?? ''}`}
+            onClick={onClick}
+            variant={variant}
+        >
+            {typeof title === 'string' ? (
+                <NsTypography variant={headerTypographyVariant ?? 'h4'} weight="bold">
+                    {title}
+                </NsTypography>
+            ) : (
+                title
+            )}
+            <span className="header-icon">
+                <NsIcon name={isOpen ? openedIconName ?? 'arrowUp' : closedIconName ?? 'arrowDown'} />
+            </span>
+        </StyledHeader>
+    );
+};
+export default NsAccordionHeader;

package/src/common/accordion/NsAccordionItem.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { NsAccordionItemProps, NsCollapse } from '..';
+import NsAccordionHeader from './NsAccordionHeader';
+import { StyledToggleSection } from './ToggleSection.styled';
+
+/**
+ * this component is used by accordion to pass title
+ * and content
+ */
+const NsAccordionItem = ({
+    isOpen,
+    toggleOpen,
+    title,
+    content,
+    variant,
+    headerTypographyVariant,
+    closedIconName,
+    openedIconName,
+}: NsAccordionItemProps) => {
+    return (
+        <StyledToggleSection variant={variant}>
+            <NsAccordionHeader
+                additionalProps={{ className: 'accordion-section' }}
+                closedIconName={closedIconName}
+                headerTypographyVariant={headerTypographyVariant}
+                isOpen={isOpen}
+                openedIconName={openedIconName}
+                onClick={toggleOpen}
+                title={title}
+                variant={variant}
+            />
+            <NsCollapse isOpen={isOpen} variant={variant}>
+                {content}
+            </NsCollapse>
+        </StyledToggleSection>
+    );
+};
+
+export default NsAccordionItem;

package/src/common/accordion/NsCollapse.tsx

@@ -0,0 +1,56 @@
+import { styled, ColorUtils, FoundationTheme } from '@nuskin/foundation-theme';
+import { AccordionVariant, NsCollapseProps } from './types.d';
+const { getAppColor, getPaletteColor } = ColorUtils;
+const getIsLight = (theme: FoundationTheme.Theme) => {
+    const { palette = { primary: { main: '', contrastText: '' } } } = theme;
+    return palette.primary.main === getAppColor(theme, 'primary', 'black');
+};
+const options = {
+    shouldForwardProp: (key: string) => key !== 'variant',
+};
+export const StyledCollapse = styled(
+    'section',
+    options
+)<{ variant: AccordionVariant }>(({ theme, variant }) => {
+    let backgroundColor = getIsLight(theme)
+        ? (getAppColor(theme, 'primary', 'gray') as string)
+        : (getAppColor(theme, 'primary', 'dark') as string);
+    let borderBottom = 'none';
+    if (variant === AccordionVariant.Compact) {
+        backgroundColor = getIsLight(theme)
+            ? (getAppColor(theme, 'primary', 'white') as string)
+            : (getAppColor(theme, 'primary', 'dark') as string);
+        borderBottom = '1px solid rgb(0,0,0,0.125)';
+    }
+    return {
+        backgroundColor,
+        color: getPaletteColor(theme, 'primary', 'main') as string,
+        opacity: 0,
+        padding: '0 16px',
+        height: 0,
+        overflow: 'hidden',
+        transition: '0.3s',
+        '&.expanded': {
+            padding: '9px 16px',
+            height: 'auto',
+            opacity: 1,
+            borderBottom,
+        },
+    };
+});
+
+/**
+ * NsCollapse component adds css animation while showing children items if prop `isOpen` is true,
+ * and while removing children if prop `isOpen` is false
+ */
+const NsCollapse = ({ isOpen, children, additionalProps, variant }: NsCollapseProps) => {
+    return (
+        <StyledCollapse
+            className={`ns-collapse ${isOpen ? 'expanded' : ''} ${additionalProps?.className ?? ''}`}
+            variant={variant}
+        >
+            {isOpen ? children : null}
+        </StyledCollapse>
+    );
+};
+export default NsCollapse;

package/src/common/accordion/NsToggleSection.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import { NsToggleSectionProps, NsAccordionItem } from '../';
+
+/**
+ * NsToggleSection takes prop `title` and prop `children` and toggles
+ * children with animation when clicked on title
+ *
+ * it also has a `defaultOpen` prop, which when true, children is visible
+ * by default, otherwise children is hidden by default and toggles between visible
+ * and hidden on clicking title
+ */
+const NsToggleSection = ({ title, children, additionalProps, defaultOpen, variant }: NsToggleSectionProps) => {
+    const [isExpanded, setIsExpanded] = useState(defaultOpen ?? false);
+
+    const toggleAccordion = () => {
+        setIsExpanded(!isExpanded);
+    };
+    return (
+        <NsAccordionItem
+            variant={variant}
+            additionalProps={{ ...additionalProps, className: 'toggle-section ' + additionalProps?.className ?? '' }}
+            isOpen={isExpanded}
+            title={title}
+            content={children}
+            toggleOpen={toggleAccordion}
+        />
+    );
+};
+
+export default NsToggleSection;

package/src/common/accordion/ToggleSection.styled.tsx

@@ -0,0 +1,28 @@
+import { styled } from '@nuskin/foundation-theme';
+import { AccordionVariant } from './types.d';
+
+export const StyledToggleSection = styled('section')<{ variant: AccordionVariant }>(({ variant }) => {
+    if (variant === AccordionVariant.Compact) {
+        return { borderRight: '1px solid rgb(0,0,0,0.125)' };
+    }
+    return {
+        margin: '5px',
+    };
+});
+
+export const StyledAccordionWrapper = styled('div')<{ variant: AccordionVariant }>(({ variant }) => {
+    if (variant === AccordionVariant.Compact) {
+        return {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0',
+            borderTop: '1px solid rgb(0,0,0,0.125)',
+            borderLeft: '1px solid rgb(0,0,0,0.125)',
+        };
+    }
+    return {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+    };
+});

package/src/common/accordion/index.ts

@@ -0,0 +1,6 @@
+export { default as NsCollapse } from './NsCollapse';
+export { default as NsAccordionHeader } from './NsAccordionHeader';
+export { default as NsToggleSection } from './NsToggleSection';
+export { default as NsAccordionItem } from './NsAccordionItem';
+export { default as NsAccordion } from './NsAccordion';
+export * from './types.d';

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

@@ -0,0 +1,91 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@/test-utils/index';
+import { NsAccordion, NsAccordionProps } from '@/common/index';
+
+const generateContentArray = (count: number) => {
+    const arr = [] as NsAccordionProps['contentArray'];
+    for (let i = 1; i <= count; i++) {
+        arr.push({
+            title: `Title ${i}`,
+            body: `Content ${i}`,
+            isDefaultOpen: true,
+        });
+    }
+    return arr;
+};
+
+describe('NsAccordion', () => {
+    const contentArray = generateContentArray(3);
+    const defaultProps = {
+        additionalProps: {
+            testid: 'test-accordion',
+        },
+        allowMultipleExpanded: false,
+        contentArray,
+    };
+
+    it('renders without error', () => {
+        const { getByTestId } = render(<NsAccordion {...defaultProps} />);
+        const accordion = getByTestId(defaultProps.additionalProps.testid);
+        expect(accordion).toBeInTheDocument();
+    });
+
+    it(`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');
+        expect(screen.queryByText(/Content 1/i)).not.toBeNull();
+        expect(screen.queryByText(/Content 2/i)).toBeNull();
+        expect(screen.queryByText(/Content 3/i)).toBeNull();
+    });
+
+    it('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');
+            expect(screen.queryByText(/Content 1/i)).toBeNull();
+            expect(screen.queryByText(/Content 2/i)).not.toBeNull();
+            expect(screen.queryByText(/Content 3/i)).toBeNull();
+        }
+    });
+
+    it('expands multiple sections by default when allowMultipleExpanded prop is true', () => {
+        const contentArray = generateContentArray(3);
+        contentArray[2].isDefaultOpen = false;
+        const defaultProps = {
+            additionalProps: {
+                testid: 'test-accordion',
+            },
+            allowMultipleExpanded: false,
+            contentArray,
+        };
+        const { getAllByText } = render(<NsAccordion {...defaultProps} allowMultipleExpanded />);
+        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');
+        expect(screen.queryByText(/Content 1/i)).not.toBeNull();
+        expect(screen.queryByText(/Content 2/i)).not.toBeNull();
+        expect(screen.queryByText(/Content 3/i)).toBeNull();
+
+        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');
+        expect(screen.queryByText(/Content 1/i)).not.toBeNull();
+        expect(screen.queryByText(/Content 2/i)).not.toBeNull();
+        expect(screen.queryByText(/Content 3/i)).not.toBeNull();
+    });
+});

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { render, fireEvent } from '@/test-utils/index';
+import { NsAccordionHeader } from '@/common/index';
+
+describe('NsAccordionHeader', () => {
+    it('renders title correctly', () => {
+        const onClick = jest.fn();
+        const title = 'Section Header';
+        const { getByText } = render(<NsAccordionHeader title={title} onClick={onClick} />);
+        expect(getByText(title)).toBeInTheDocument();
+    });
+
+    it('calls onClick handler when clicked', () => {
+        const onClick = jest.fn();
+        const { container } = render(<NsAccordionHeader title="Section Header" onClick={onClick} />);
+        const header = container.querySelector('header');
+        if (header) {
+            fireEvent.click(header);
+            expect(onClick).toHaveBeenCalledTimes(1);
+        }
+    });
+
+    it('renders with additional class name', () => {
+        const additionalClassName = 'custom-class';
+        const onClick = jest.fn();
+        const { container } = render(
+            <NsAccordionHeader
+                title="Section Header"
+                additionalProps={{ className: additionalClassName }}
+                onClick={onClick}
+            />
+        );
+        expect(container.querySelector('header')).toHaveClass(`section-header ${additionalClassName}`);
+    });
+
+    it('renders with expanded class when isOpen is true', () => {
+        const onClick = jest.fn();
+        const { container } = render(<NsAccordionHeader title="Section Header" isOpen onClick={onClick} />);
+        expect(container.querySelector('header')).toHaveClass('expanded');
+    });
+
+    it('renders with header icon', () => {
+        const onClick = jest.fn();
+        const { getByTestId } = render(<NsAccordionHeader title="Section Header" onClick={onClick} />);
+        expect(getByTestId('icon')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { render, fireEvent } from '@/test-utils/index';
+import { NsAccordionItem } from '@/common/index';
+
+describe('NsAccordionItem', () => {
+    const title = 'Accordion Section Title';
+    const content = 'Accordion Section Content';
+
+    it('renders title correctly', () => {
+        const { getByText } = render(
+            <NsAccordionItem isOpen={false} toggleOpen={() => {}} title={title} content={content} />
+        );
+        expect(getByText(title)).toBeInTheDocument();
+    });
+
+    it('calls toggleOpen function when clicked on the section header', () => {
+        const toggleOpen = jest.fn();
+        const { getByText } = render(
+            <NsAccordionItem isOpen={false} toggleOpen={toggleOpen} title={title} content={content} />
+        );
+        fireEvent.click(getByText(title));
+        expect(toggleOpen).toHaveBeenCalledTimes(1);
+    });
+
+    it('renders content when isOpen is true', () => {
+        const { getByText } = render(
+            <NsAccordionItem isOpen={true} toggleOpen={() => {}} title={title} content={content} />
+        );
+        expect(getByText(content)).toBeInTheDocument();
+    });
+
+    it('does not render content when isOpen is false', () => {
+        const { queryByText } = render(
+            <NsAccordionItem isOpen={false} toggleOpen={() => {}} title={title} content={content} />
+        );
+        expect(queryByText(content)).toBeNull();
+    });
+});

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { render, screen } from '@/test-utils/index';
+import { NsCollapse } from '@/common/index';
+
+describe('NsCollapse', () => {
+    it('renders children when isOpen is true', () => {
+        const { getByText } = render(
+            <NsCollapse isOpen>
+                <div>Child 1</div>
+                <div>Child 2</div>
+            </NsCollapse>
+        );
+        expect(getByText('Child 1')).toBeInTheDocument();
+        expect(getByText('Child 2')).toBeInTheDocument();
+    });
+
+    it('does not render children when isOpen is false', () => {
+        render(
+            <NsCollapse isOpen={false}>
+                <div>Child 1</div>
+                <div>Child 2</div>
+            </NsCollapse>
+        );
+        expect(screen.queryByText('Child')).toBeNull();
+    });
+
+    it('renders with additional class name', () => {
+        const additionalClassName = 'custom-class';
+        const { container } = render(
+            <NsCollapse additionalProps={{ className: additionalClassName }} isOpen>
+                <div>Child 1</div>
+                <div>Child 2</div>
+            </NsCollapse>
+        );
+        expect(container.querySelector('section')).toHaveClass(`ns-collapse ${additionalClassName}`);
+    });
+});

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { render, fireEvent } from '@/test-utils/index';
+import { NsToggleSection } from '@/common/index';
+
+describe('NsToggleSection', () => {
+    const title = 'Toggle Section Title';
+    const content = 'Toggle Section Content';
+
+    it('renders title correctly', () => {
+        const { getByText } = render(<NsToggleSection title={title}>{content}</NsToggleSection>);
+        expect(getByText(title)).toBeInTheDocument();
+    });
+
+    it('toggles content visibility when clicked on the section header', () => {
+        const { getByText, queryByText } = render(<NsToggleSection title={title}>{content}</NsToggleSection>);
+
+        expect(queryByText(content)).toBeNull();
+        fireEvent.click(getByText(title));
+        expect(getByText(content)).toBeInTheDocument();
+        fireEvent.click(getByText(title));
+        expect(queryByText(content)).toBeNull();
+    });
+
+    it('sets defaultOpen prop correctly', () => {
+        const { getByText } = render(
+            <NsToggleSection title={title} defaultOpen>
+                {content}
+            </NsToggleSection>
+        );
+
+        expect(getByText(content)).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,47 @@
+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',
+    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`,
+        },
+        contentArray: {
+            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)],
+        },
+    },
+    args: {
+        variant: AccordionVariant.Basic,
+    },
+} as MetaStory;
+
+export const SingleOpen: Story = {
+    args: {
+        allowMultipleExpanded: false,
+        contentArray,
+    },
+};
+
+export const MultipleOpen: Story = {
+    args: {
+        allowMultipleExpanded: true,
+        contentArray,
+    },
+};

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

@@ -0,0 +1,40 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
+import { NsAccordionHeader, NsIconVariants } from '../..';
+
+type ComponentType = typeof NsAccordionHeader;
+type Story = StoryObj<ComponentType>;
+type MetaStory = Meta<ComponentType>;
+
+export default {
+    title: 'Components/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',
+        onClick: () => {
+            console.log('accordion header clicked');
+        },
+        openedIconName: 'arrowUp',
+        closedIconName: 'arrowDown',
+        isOpen: false,
+    },
+} as MetaStory;
+
+export const ClosedHeader: Story = {};
+export const OpenedHeader: Story = {
+    args: {
+        isOpen: true,
+    },
+};