@nuskin/foundation-ui-components 1.0.0-develop.7 → 1.0.0-develop.9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.0.0-develop.7",
+    "version": "1.0.0-develop.9",
     "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

@@ -8,7 +8,7 @@ import { StyledAccordionWrapper } from './ToggleSection.styled';
  * 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
+ * items
  * if there are multiple items available for default open, but `allowMultipleExpanded`
  * is false then only first item of default open is made open
  */
@@ -44,6 +44,8 @@ const NsAccordion: FC<NsAccordionProps> = ({
                 const isOpen = itemStateMap[key] ?? false;
                 return (
                     <NsAccordionItem
+                        allowMultipleExpanded={item.allowMultipleExpanded}
+                        type={item.type}
                         closedIconName={closedIconName}
                         content={item.content}
                         headerTypographyVariant={headerTypographyVariant}

package/src/common/accordion/NsAccordionHeader.tsx

@@ -2,26 +2,31 @@ import { NsTypography, NsIcon, NsAccordionHeaderProps, AccordionVariant, NsIconP
 import { styled } from '@nuskin/foundation-theme';
 import { isValidIconName } from '../icon/NsIconVariants';
 import { getAccordionColor } from './colorMap';
+const options = {
+    shouldForwardProp: (propKey: string) => !['variant', 'invert'].includes(propKey),
+};
+type StyledType = { variant: AccordionVariantType; invert: boolean };
 
-const StyledHeader = styled('header')<{ variant: AccordionVariantType; invert: boolean }>(
-    ({ theme, variant, invert }) => {
-        const { headBg, headText } = getAccordionColor({ theme, variant, invert, keys: ['headBg', 'headText'] });
-        let borderBottom = 'none';
-        if (variant === AccordionVariant.Compact) {
-            borderBottom = '1px solid rgb(0,0,0,0.125)';
-        }
-        return {
-            backgroundColor: headBg,
-            color: headText,
-            cursor: 'pointer',
-            display: 'grid',
-            gap: '4px',
-            gridTemplateColumns: 'auto 1fr 24px',
-            padding: '9px 16px',
-            borderBottom,
-        } as any;
+const StyledHeader = styled(
+    'header',
+    options
+)<StyledType>(({ theme, variant, invert }) => {
+    const { headBg, headText } = getAccordionColor({ theme, variant, invert, keys: ['headBg', 'headText'] });
+    let borderBottom = 'none';
+    if (variant === AccordionVariant.Compact) {
+        borderBottom = '1px solid rgb(0,0,0,0.125)';
     }
-);
+    return {
+        backgroundColor: headBg,
+        color: headText,
+        cursor: 'pointer',
+        display: 'grid',
+        gap: '4px',
+        gridTemplateColumns: 'auto 1fr 24px',
+        padding: '9px 16px',
+        borderBottom,
+    } as any;
+});
 
 /**
  * NsAccordionHeader is primarily used by NsToggleSection and NsAccordionItem
@@ -38,6 +43,7 @@ const NsAccordionHeader = ({
     headerTypographyVariant,
     startIcon,
     invert,
+    cslp,
 }: NsAccordionHeaderProps) => {
     return (
         <StyledHeader
@@ -50,7 +56,7 @@ const NsAccordionHeader = ({
         >
             <HeaderIcon {...startIcon} />
             {typeof title === 'string' ? (
-                <NsTypography variant={headerTypographyVariant ?? 'h4'} weight="bold">
+                <NsTypography variant={headerTypographyVariant ?? 'h4'} weight="bold" {...(cslp?.header ?? {})}>
                     {title}
                 </NsTypography>
             ) : (

package/src/common/accordion/NsAccordionItem.tsx

@@ -6,6 +6,7 @@ import { StyledToggleSection } from './ToggleSection.styled';
 /**
  * this component is used by accordion to pass title
  * and content
+ * cslp:{header:CslpTag, content:CslpTag}
  */
 const NsAccordionItem = ({
     isOpen,
@@ -21,6 +22,9 @@ const NsAccordionItem = ({
     level,
     additionalProps,
     invert,
+    type,
+    cslp,
+    allowMultipleExpanded,
 }: NsAccordionItemProps) => {
     return (
         <StyledToggleSection variant={variant}>
@@ -35,14 +39,18 @@ const NsAccordionItem = ({
                 title={title}
                 variant={variant}
                 startIcon={startIcon}
+                cslp={cslp}
             />
             <NsCollapse
+                type={type}
                 isChild={isChild}
                 isOpen={isOpen}
                 variant={variant}
                 level={level}
                 invert={invert}
                 content={content}
+                cslp={cslp}
+                allowMultipleExpanded={allowMultipleExpanded}
             />
         </StyledToggleSection>
     );

package/src/common/accordion/NsCollapse.tsx

@@ -1,5 +1,5 @@
 import { styled } from '@nuskin/foundation-theme';
-import { AccordionVariant, AccordionVariantType, NsCollapseProps, ItemContent, AccordionItem, NsAccordion } from '../';
+import { AccordionVariant, AccordionVariantType, NsCollapseProps, AccordionItem, NsAccordion } from '../';
 import { getAccordionColor } from './colorMap';
 import { ReactElement, isValidElement, useMemo } from 'react';
 
@@ -52,33 +52,49 @@ export const StyledCollapse = styled(
  * 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, content, additionalProps, variant, level, invert, isChild }: NsCollapseProps) => {
+const NsCollapse = ({
+    isOpen,
+    content,
+    additionalProps,
+    variant,
+    level,
+    invert,
+    isChild,
+    type,
+    cslp,
+    allowMultipleExpanded,
+}: NsCollapseProps) => {
     const body = useMemo(() => {
         if (isValidElement(content)) {
             return content as ReactElement;
         }
-        if (content?.type === 'html') {
+        if (type === 'html') {
             return (
                 <div
                     className="nsa-content-padded"
-                    dangerouslySetInnerHTML={{ __html: (content as ItemContent)?.data as string }}
+                    dangerouslySetInnerHTML={{ __html: content as string }}
+                    {...(cslp?.content ?? {})}
                 />
             );
-        } else if (content?.type === 'text') {
-            return <div className="p-4">{(content as ItemContent)?.data as string}</div>;
-        } else if (content?.type === 'accordion') {
+        } else if (type === 'text') {
+            return (
+                <div className="p-4" {...(cslp?.content ?? {})}>
+                    {content as string}
+                </div>
+            );
+        } else if (type === 'accordion') {
             return (
                 <NsAccordion
                     isChild={true}
                     invert={invert}
                     level={level}
                     variant={AccordionVariant.Gray}
-                    items={(content as ItemContent)?.data as AccordionItem[]}
-                    allowMultipleExpanded={(content as ItemContent)?.allowMultipleExpanded ?? false}
+                    items={content as AccordionItem[]}
+                    allowMultipleExpanded={allowMultipleExpanded ?? false}
                 />
             );
         }
-    }, [content, invert, level]);
+    }, [allowMultipleExpanded, content, cslp?.content, invert, level, type]);
     return (
         <StyledCollapse
             isChild={isChild}

package/src/common/accordion/NsToggleSection.tsx

@@ -17,6 +17,7 @@ const NsToggleSection = ({
     variant,
     invert,
     isChild,
+    type,
 }: NsToggleSectionProps) => {
     const [isExpanded, setIsExpanded] = useState(defaultOpen ?? false);
 
@@ -25,6 +26,7 @@ const NsToggleSection = ({
     };
     return (
         <NsAccordionItem
+            type={type}
             level={2}
             variant={variant}
             additionalProps={additionalProps}

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

@@ -2,7 +2,10 @@ import { styled } from '@nuskin/foundation-theme';
 import { AccordionVariant, AccordionVariantType } from '../';
 
 const border = '1px solid rgb(0,0,0,0.125)';
-export const StyledToggleSection = styled('section')<{ variant: AccordionVariantType }>(({ variant }) => {
+
+type StyledType = { variant: AccordionVariantType };
+
+export const StyledToggleSection = styled('section')<StyledType>(({ variant }) => {
     if (variant === AccordionVariant.Compact) {
         return { borderRight: border };
     }
@@ -11,7 +14,7 @@ export const StyledToggleSection = styled('section')<{ variant: AccordionVariant
     };
 });
 
-export const StyledAccordionWrapper = styled('div')<{ variant: AccordionVariantType }>(({ variant }) => {
+export const StyledAccordionWrapper = styled('div')<StyledType>(({ variant }) => {
     if (variant === AccordionVariant.Compact) {
         return {
             display: 'flex',

package/src/common/accordion/enums.ts

@@ -1,10 +1,3 @@
-/* eslint-disable no-unused-vars */
-// export enum AccordionVariant {
-//     Basic = 'basic', // basic is as per figma
-//     Compact = 'compact', // compact is as per test.nuskin.com
-//     Gray = 'gray',
-//     Stripe = 'stripe',
-// }
 export const AccordionVariant = {
     Basic: 'basic',
     Compact: 'compact',

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

@@ -9,6 +9,7 @@ const generateContentArray = (count: number, isDefaultOpen = true) => {
             title: `Title ${i}`,
             content: <div className="p-2">Content {i}</div>,
             isDefaultOpen,
+            type:'jsx',
             id: `Test ${i}`,
         });
     }

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

@@ -9,6 +9,7 @@ describe('NsAccordionItem', () => {
     it('1. renders title correctly', () => {
         const { getByText } = render(
             <NsAccordionItem
+                type="jsx"
                 variant={AccordionVariant.Basic}
                 isOpen={false}
                 toggleOpen={() => {}}
@@ -26,6 +27,7 @@ describe('NsAccordionItem', () => {
         const toggleOpen = jest.fn();
         const { getByText } = render(
             <NsAccordionItem
+                type="jsx"
                 variant={AccordionVariant.Basic}
                 isOpen={false}
                 toggleOpen={toggleOpen}
@@ -47,6 +49,7 @@ describe('NsAccordionItem', () => {
                 isOpen={true}
                 toggleOpen={() => {}}
                 title={title}
+                type="jsx"
                 content={contentElement}
                 isChild={false}
                 invert={false}
@@ -59,6 +62,7 @@ describe('NsAccordionItem', () => {
     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={() => {}}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@/test-utils/index';
-import { NsCollapse, AccordionVariant, ItemContent } from '@/common/index';
-import { createAccordionItem3_1, getTextContent } from '../stories/data';
+import { NsCollapse, AccordionVariant, AccordionItem } from '@/common/index';
+import { createAccordionItem3_1 } from '../stories/data';
 
 describe('NsCollapse', () => {
     it('1. renders children when isOpen is true', () => {
@@ -15,6 +15,7 @@ describe('NsCollapse', () => {
                         <div>Child 2</div>
                     </>
                 }
+                type="jsx"
                 isChild={false}
                 invert={false}
                 level={0}
@@ -24,11 +25,11 @@ describe('NsCollapse', () => {
         expect(getByText('Child 2')).toBeInTheDocument();
     });
     it('2. renders children when isOpen is true and isChild is true', () => {
-        const text = '1. Theme can be set';
-        const content = { ...getTextContent(text) };
+        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}
@@ -36,60 +37,62 @@ describe('NsCollapse', () => {
                 level={0}
             />
         );
-        expect(getByText(text)).toBeInTheDocument();
+        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={createAccordionItem3_1().content}
+                content={content}
+                type={accItem.type}
                 isChild={true}
                 invert={false}
                 level={0}
             />
         );
-        expect(getByText('Example - 3.1.1')).toBeInTheDocument();
-        expect(getByText('Example - 3.1.2')).toBeInTheDocument();
+        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}
-                content={{
-                    type: 'html',
-                    data: '<h2>Lorem ipsum dolor sit amet.</h2>',
-                }}
+                type="html"
+                content={content}
                 isChild={false}
                 invert={true}
                 level={0}
             />
         );
-        expect(screen.queryByText('Lorenm')).toBeNull();
+        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}
-                content={{
-                    type: 'html',
-                    data: '<h2>Lorem ipsum dolor sit amet.</h2>',
-                }}
+                type="html"
+                content={content}
                 isChild={false}
                 invert={true}
                 level={0}
             />
         );
-        expect(screen.queryByText('Lorem')).toBeDefined();
+        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={
@@ -107,11 +110,11 @@ describe('NsCollapse', () => {
         expect(container.querySelector('section')).toHaveClass(`ns-collapse ${additionalClassName}`);
     });
     it('7. skipping allowMultipleExpanded in child data', () => {
-        const { content } = createAccordionItem3_1();
-        delete (content as ItemContent).allowMultipleExpanded;
+        const { content, type } = createAccordionItem3_1();
         const additionalClassName = 'custom-class';
         const { container } = render(
             <NsCollapse
+                type={type}
                 isOpen
                 variant={AccordionVariant.Gray}
                 content={content}

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

@@ -16,6 +16,7 @@ describe('NsToggleSection', () => {
                 content={content}
                 invert={false}
                 isChild={false}
+                type="jsx"
             />
         );
         expect(getByText(title)).toBeInTheDocument();
@@ -28,6 +29,7 @@ describe('NsToggleSection', () => {
                 content={content}
                 invert={false}
                 isChild={false}
+                type="jsx"
             />
         );
         expect(getByText(title)).toBeInTheDocument();
@@ -41,6 +43,7 @@ describe('NsToggleSection', () => {
                 content={content}
                 invert={false}
                 isChild={false}
+                type="jsx"
             />
         );
         const el = queryByText(contentText);
@@ -62,6 +65,7 @@ describe('NsToggleSection', () => {
                 invert={false}
                 isChild={false}
                 defaultOpen
+                type="jsx"
             />
         );
 

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

@@ -22,6 +22,11 @@ const meta = {
             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,

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

@@ -1,6 +1,6 @@
 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>;
@@ -23,6 +23,7 @@ export default {
     },
     args: {
         title: 'Nuskin',
+        variant: AccordionVariant.Compact,
         onClick: () => {
             console.log('accordion header clicked');
         },

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

@@ -1,6 +1,7 @@
 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>;
@@ -20,11 +21,14 @@ 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: <div className="p-2">Nuskin Description</div>,
         title: 'Nuskin',
@@ -33,6 +37,7 @@ export const OpenSection: Story = {
 
 export const ClosedSection: Story = {
     args: {
+        variant: AccordionVariant.Compact,
         isOpen: false,
         content: <div className="p-2">Nuskin Description</div>,
         title: 'Nuskin',

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

@@ -1,6 +1,7 @@
 import type { StoryObj, Meta } from '@storybook/react';
 import { withCenterDecorator } from '@/stories/decorators/withCenterDecorator';
-import { NsCollapse } from '../';
+import { AccordionVariant, NsCollapse } from '../';
+import NsAccordionStory from './NsAccordion.stories';
 
 type ComponentType = typeof NsCollapse;
 type Story = StoryObj<ComponentType>;
@@ -15,10 +16,24 @@ 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: ['jsx', 'html', 'text', 'accordion'],
+            description: 'This type should exactly match the content type to have accordion work correctly',
+        },
+        level: NsAccordionStory.argTypes.level,
+        variant: NsAccordionStory.argTypes.variant,
+    },
+    args: {
+        variant: AccordionVariant.Compact,
     },
 } as MetaStory;
 export const Closed: Story = {

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

@@ -1,6 +1,7 @@
 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>;
@@ -11,9 +12,12 @@ export default {
     component: NsToggleSection,
     decorators: [withCenterDecorator],
     argTypes: {
+        level: NsAccordionStory.argTypes.level,
+        variant: NsAccordionStory.argTypes.variant,
         title: { control: 'string' },
     },
     args: {
+        variant: AccordionVariant.Compact,
         title: 'Nuskin',
         content: <div className="p-2">Nuskin Details</div>,
     },