@nuskin/foundation-ui-components 1.0.2 → 1.1.1

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

@@ -1,23 +1,27 @@
 import { styled } from '@nuskin/foundation-theme';
-import { AccordionVariant } from './types.d';
+import { AccordionVariant, AccordionVariantType } from '../';
 
-export const StyledToggleSection = styled('section')<{ variant: AccordionVariant }>(({ variant }) => {
+const border = '1px solid rgb(0,0,0,0.125)';
+
+type StyledType = { variant: AccordionVariantType };
+
+export const StyledToggleSection = styled('section')<StyledType>(({ variant }) => {
     if (variant === AccordionVariant.Compact) {
-        return { borderRight: '1px solid rgb(0,0,0,0.125)' };
+        return { borderRight: border };
     }
     return {
-        margin: '5px',
+        margin: '5px 0',
     };
 });
 
-export const StyledAccordionWrapper = styled('div')<{ variant: AccordionVariant }>(({ variant }) => {
+export const StyledAccordionWrapper = styled('div')<StyledType>(({ 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)',
+            borderTop: border,
+            borderLeft: border,
         };
     }
     return {

package/src/common/accordion/colorMap.ts

@@ -0,0 +1,117 @@
+import {Themed} from '../common.types';
+import {AccordionVariantType} from './enums';
+import {ColorUtils, FoundationTheme} from '@nuskin/foundation-theme';
+const {isDarkMode, color} = ColorUtils;
+const compKeys = ['contentBg', 'contentText', 'headBg', 'headText'];
+type CompKeys = (typeof compKeys)[number];
+type VariantColors = Record<
+    CompKeys,
+    {
+        light: [FoundationTheme.AppColors, string];
+        dark: [FoundationTheme.AppColors, string];
+    }
+>;
+
+const colorObject: Record<string, [FoundationTheme.AppColors, string]> = {
+    n10: ['primary', 'dark'], // #121212
+    n20: ['primary', 'black'], // #252525
+    n40: ['neutral', '80'], // #444444
+    n45: ['neutral', '70'], // #5f5f5f
+    n50: ['neutral', '60'], // #8c8c8c
+    n80: ['neutral', '50'], // #b2b2b2
+    n85: ['neutral', '40'], // #e0e0e0
+    n90: ['neutral', '30'], // #ededed
+    n95: ['primary', 'gray'], // #f5f5f5
+    n100: ['primary', 'white'], // #fff
+};
+export const colorMap: Record<AccordionVariantType, VariantColors> = {
+    basic: {
+        contentBg: {
+            light: colorObject.n95,
+            dark: colorObject.n20,
+        },
+        contentText: {
+            light: colorObject.n10,
+            dark: colorObject.n95,
+        },
+        headBg: {
+            light: colorObject.n100,
+            dark: colorObject.n20,
+        },
+        headText: {
+            light: colorObject.n10,
+            dark: colorObject.n95,
+        },
+    },
+    compact: {
+        contentBg: {
+            light: colorObject.n100,
+            dark: colorObject.n10,
+        },
+        contentText: {
+            light: colorObject.n10,
+            dark: colorObject.n90,
+        },
+        headBg: {
+            light: colorObject.n100,
+            dark: colorObject.n10,
+        },
+        headText: {
+            light: colorObject.n10,
+            dark: colorObject.n90,
+        },
+    },
+    gray: {
+        contentBg: {
+            light: colorObject.n85,
+            dark: colorObject.n40,
+        },
+        contentText: {
+            light: colorObject.n40,
+            dark: colorObject.n85,
+        },
+        headBg: {
+            light: colorObject.n90,
+            dark: colorObject.n45,
+        },
+        headText: {
+            light: colorObject.n45,
+            dark: colorObject.n90,
+        },
+    },
+    stripe: {
+        contentBg: {
+            light: colorObject.n90,
+            dark: colorObject.n45,
+        },
+        contentText: {
+            light: colorObject.n45,
+            dark: colorObject.n90,
+        },
+        headBg: {
+            light: colorObject.n100,
+            dark: colorObject.n40,
+        },
+        headText: {
+            light: colorObject.n40,
+            dark: colorObject.n100,
+        },
+    },
+};
+
+type GetAccordionColor = {
+    variant: AccordionVariantType;
+    invert: boolean;
+    keys: CompKeys[];
+} & Themed;
+export const getAccordionColor = ({theme, variant, invert, keys}: GetAccordionColor): Record<CompKeys, string> => {
+    const isDark = invert ? !isDarkMode({theme}) : isDarkMode({theme});
+    const darkLabel = isDark ? 'dark' : 'light';
+    const result: Record<string, string> = {};
+    for (const colorKey of keys) {
+        const [appColorBg, appSubColorBg] = colorMap[variant][colorKey][darkLabel];
+        const colorValue = color(appColorBg, appSubColorBg)({theme});
+        result[colorKey] = colorValue;
+    }
+    return result;
+};

package/src/common/accordion/enums.ts

@@ -0,0 +1,18 @@
+export const AccordionVariant = {
+    Basic: 'basic',
+    Compact: 'compact',
+    Gray: 'gray',
+    Stripe: 'stripe',
+} as const;
+const variantValues = Object.values(AccordionVariant);
+export type AccordionVariantType = (typeof variantValues)[number];
+
+export const AccordionContentTypeObject = {
+    text: 'text',
+    html: 'html',
+    accordion: 'accordion',
+    jsx: 'jsx',
+};
+
+const contentValues = Object.values(AccordionContentTypeObject);
+export type AccordionContentType = (typeof contentValues)[number];

package/src/common/accordion/index.ts

@@ -4,3 +4,4 @@ export { default as NsToggleSection } from './NsToggleSection';
 export { default as NsAccordionItem } from './NsAccordionItem';
 export { default as NsAccordion } from './NsAccordion';
 export * from './types.d';
+export * from './enums';

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

@@ -1,50 +1,56 @@
 import React from 'react';
 import { render, fireEvent, screen } from '@/test-utils/index';
-import { AccordionVariant, NsAccordion, NsAccordionProps } from '@/common/index';
+import { AccordionContentTypeObject, AccordionItem, AccordionVariant, NsAccordion } from '@/common/index';
 
-const generateContentArray = (count: number) => {
-    const arr = [] as NsAccordionProps['contentArray'];
+const generateContentArray = (count: number, isDefaultOpen = true) => {
+    const arr = [] as AccordionItem[];
     for (let i = 1; i <= count; i++) {
-        arr.push({
+        arr?.push({
             title: `Title ${i}`,
-            body: `Content ${i}`,
-            isDefaultOpen: true,
+            content: <div className="p-2">Content {i}</div>,
+            isDefaultOpen,
+            type: AccordionContentTypeObject.jsx,
+            id: `Test ${i}`,
         });
     }
     return arr;
 };
 
 describe('NsAccordion', () => {
-    const contentArray = generateContentArray(3);
+    const items = generateContentArray(3);
     const defaultProps = {
         additionalProps: {
             testid: 'test-accordion',
         },
         allowMultipleExpanded: false,
-        contentArray,
+        items,
         variant: AccordionVariant.Basic,
+        invert: false,
+        level: 0,
     };
 
-    it('renders without error', () => {
+    it('1. 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`, () => {
+    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');
-        expect(screen.queryByText(/Content 1/i)).not.toBeNull();
-        expect(screen.queryByText(/Content 2/i)).toBeNull();
-        expect(screen.queryByText(/Content 3/i)).toBeNull();
+        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('expands second section only when allowMultipleExpanded prop is false and second title is clicked', async () => {
+    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');
@@ -54,40 +60,104 @@ describe('NsAccordion', () => {
             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();
+            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('expands multiple sections by default when allowMultipleExpanded prop is true', () => {
-        const contentArray = generateContentArray(3);
-        contentArray[2].isDefaultOpen = false;
+    it('4. expands multiple sections by default when allowMultipleExpanded prop is true', () => {
+        const items = generateContentArray(3);
+        items[2].isDefaultOpen = false;
         const defaultProps = {
-            additionalProps: {
-                testid: 'test-accordion',
-            },
             allowMultipleExpanded: false,
-            contentArray,
+            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');
-        expect(screen.queryByText(/Content 1/i)).not.toBeNull();
-        expect(screen.queryByText(/Content 2/i)).not.toBeNull();
-        expect(screen.queryByText(/Content 3/i)).toBeNull();
+
+        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');
-        expect(screen.queryByText(/Content 1/i)).not.toBeNull();
-        expect(screen.queryByText(/Content 2/i)).not.toBeNull();
-        expect(screen.queryByText(/Content 3/i)).not.toBeNull();
+
+        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

@@ -3,7 +3,7 @@ import { render, fireEvent } from '@/test-utils/index';
 import { NsAccordionHeader, AccordionVariant } from '@/common/index';
 
 describe('NsAccordionHeader', () => {
-    it('renders title correctly', () => {
+    it('1. renders title correctly', () => {
         const onClick = jest.fn();
         const title = 'Section Header';
         const { getByText } = render(
@@ -11,19 +11,41 @@ describe('NsAccordionHeader', () => {
                 variant={AccordionVariant.Basic}
                 title={title}
                 onClick={onClick}
+                invert={false}
+                isOpen={true}
             />
         );
-        expect(getByText(title)).toBeInTheDocument();
+        const el = getByText(title);
+        expect(el).toBeInTheDocument();
+        expect(el.closest('header')).toHaveAttribute('aria-expanded', 'true');
     });
-
-    it('calls onClick handler when clicked', () => {
+    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);
@@ -31,33 +53,78 @@ describe('NsAccordionHeader', () => {
         }
     });
 
-    it('renders with additional class name', () => {
+    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('renders with expanded class when isOpen is true', () => {
+    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} />
+            <NsAccordionHeader
+                variant={AccordionVariant.Basic}
+                title="Section Header"
+                isOpen
+                onClick={onClick}
+                invert={false}
+            />
         );
         expect(container.querySelector('header')).toHaveClass('expanded');
     });
 
-    it('renders with header icon', () => {
+    it('6. renders with header icon', () => {
         const onClick = jest.fn();
         const { getByTestId } = render(
-            <NsAccordionHeader variant={AccordionVariant.Basic} title="Section Header" onClick={onClick} />
+            <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

@@ -5,58 +5,75 @@ import { NsAccordionItem, AccordionVariant } from '@/common/index';
 describe('NsAccordionItem', () => {
     const title = 'Accordion Section Title';
     const content = 'Accordion Section Content';
-
-    it('renders title correctly', () => {
+    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={content}
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
             />
         );
         expect(getByText(title)).toBeInTheDocument();
     });
 
-    it('calls toggleOpen function when clicked on the section header', () => {
+    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={content}
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
             />
         );
         fireEvent.click(getByText(title));
         expect(toggleOpen).toHaveBeenCalledTimes(1);
     });
 
-    it('renders content when isOpen is true', () => {
+    it('3. renders content when isOpen is true', () => {
         const { getByText } = render(
             <NsAccordionItem
                 variant={AccordionVariant.Basic}
                 isOpen={true}
                 toggleOpen={() => {}}
                 title={title}
-                content={content}
+                type="jsx"
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
             />
         );
         expect(getByText(content)).toBeInTheDocument();
     });
 
-    it('does not render content when isOpen is false', () => {
+    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={content}
+                content={contentElement}
+                isChild={false}
+                invert={false}
+                level={1}
             />
         );
-        expect(queryByText(content)).toBeNull();
+        const bodyElement = queryByText(content);
+        expect(bodyElement?.parentNode).toHaveStyle('height:0px;');
     });
 });