@nuskin/foundation-ui-components 1.0.2 → 1.1.1

package/package.json

@@ -1,103 +1,107 @@
 {
-  "name": "@nuskin/foundation-ui-components",
-  "version": "1.0.2",
-  "description": "It is a foundation library written in react, that provides common components to all UI pages",
-  "private": false,
-  "main": "src/common/index.ts",
-  "repository": {
-    "type": "git",
-    "url": "git@code.tls.nuskin.io:ns-am/content-foundation/foundation-ui-components.git"
-  },
-  "homepage": "https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/blob/master/README.md",
-  "author": {
-    "name": "Josh Porter"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "keywords": [
-    "react",
-    "foundation-ui",
-    "foundation-ui-components"
-  ],
-  "license": "MIT",
-  "scripts": {
-    "dev": "next dev",
-    "start": "next start",
-    "lint": "next lint",
-    "test": "next build && jest --coverage",
-    "test:watch": "jest --watch",
-    "storybook": "storybook dev -p 6007",
-    "sb": "yarn storybook",
-    "build-dev": "yarn build-storybook",
-    "build-prod": "yarn build-storybook --mode=production",
-    "build-test": "yarn build-storybook",
-    "build-storybook": "storybook build -o dist",
-    "export": "next export",
-    "prepare": "husky install",
-    "types:check": "tsc --pretty --noEmit"
-  },
-  "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/styled": "^11.10.6",
-    "@mui/icons-material": "^5.11.11",
-    "@mui/material": "5.4.2",
-    "@next/font": "13.2.4",
-    "@nuskin/foundation-theme": "1.0.0-develop.5",
-    "framer-motion": "^10.8.5",
-    "next": "13.2.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-material-ui-carousel": "^3.4.2",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "^1.8.1",
-    "typescript": "4.9.5"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.21.0",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.0",
-    "@emotion/jest": "^11.10.5",
-    "@nuskin/eslint-config": "^1.0.0-setup.1",
-    "@storybook/addon-actions": "^7.1.0",
-    "@storybook/addon-essentials": "^7.1.0",
-    "@storybook/addon-interactions": "^7.1.0",
-    "@storybook/addon-links": "^7.1.0",
-    "@storybook/addon-mdx-gfm": "^7.1.0",
-    "@storybook/jest": "^0.1.0",
-    "@storybook/nextjs": "^7.1.0",
-    "@storybook/react": "^7.1.0",
-    "@storybook/test-runner": "^0.11.0",
-    "@storybook/testing-library": "^0.2.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.0",
-    "@types/lodash": "^4.14.191",
-    "@types/node": "18.15.0",
-    "@types/ramda": "^0.29.3",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "18.0.11",
-    "@types/react-slick": "^0.23.10",
-    "@types/react-test-renderer": "^18.0.0",
-    "@types/testing-library__jest-dom": "^5.14.5",
-    "babel-jest": "^29.5.0",
-    "babel-loader": "^9.1.2",
-    "babel-plugin-emotion": "^11.0.0",
-    "chromatic": "^6.17.3",
-    "eslint": "8.36.0",
-    "eslint-config-next": "13.2.4",
-    "eslint-config-prettier": "^8.7.0",
-    "eslint-plugin-json": "^3.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-storybook": "^0.6.12",
-    "husky": "^8.0.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "storybook": "^7.1.0"
-  },
-  "files": [
-    "src/common"
-  ],
-  "readme": "./README.md"
+    "name": "@nuskin/foundation-ui-components",
+    "version": "1.1.1",
+    "description": "It is a foundation library written in react, that provides common components to all UI pages",
+    "private": false,
+    "main": "src/common/index.ts",
+    "repository": {
+        "type": "git",
+        "url": "git@code.tls.nuskin.io:ns-am/content-foundation/foundation-ui-components.git"
+    },
+    "homepage": "https://code.tls.nuskin.io/ns-am/content-foundation/foundation-ui-components/blob/master/README.md",
+    "author": {
+        "name": "Josh Porter"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "keywords": [
+        "react",
+        "foundation-ui",
+        "foundation-ui-components"
+    ],
+    "license": "MIT",
+    "scripts": {
+        "build-storybook": "storybook build -o dist",
+        "build-dev": "yarn build-storybook",
+        "build-prod": "yarn build-storybook --mode=production",
+        "build-test": "yarn build-storybook",
+        "build": "next build",
+        "dev": "next dev",
+        "export": "next export",
+        "lint": "next lint",
+        "storybook": "storybook dev -p 6007",
+        "sb": "yarn storybook",
+        "start": "next start",
+        "test": "next build && jest --coverage",
+        "test:pattern": "jest --coverage --testNamePattern accordion/*",
+        "test:watch": "jest --watch",
+        "test:failed": "npx jest --onlyFailures",
+        "test:coverage": "yarn test --coverage",
+        "types:check": "tsc --pretty --noEmit"
+    },
+    "dependencies": {
+        "@emotion/react": "^11.10.6",
+        "@emotion/styled": "^11.10.6",
+        "@mui/icons-material": "^5.11.11",
+        "@mui/material": "5.4.2",
+        "@mui/utils": "^5.14.1",
+        "@next/font": "13.2.4",
+        "@nuskin/foundation-theme": "1.0.0-develop.5",
+        "framer-motion": "^10.8.5",
+        "next": "13.2.4",
+        "react": "18.2.0",
+        "react-dom": "18.2.0",
+        "react-material-ui-carousel": "^3.4.2",
+        "react-slick": "^0.29.0",
+        "slick-carousel": "^1.8.1",
+        "typescript": "4.9.5"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.21.0",
+        "@babel/preset-env": "^7.20.2",
+        "@babel/preset-react": "^7.18.6",
+        "@babel/preset-typescript": "^7.21.0",
+        "@emotion/jest": "^11.10.5",
+        "@nuskin/eslint-config": "^1.0.0-setup.1",
+        "@storybook/addon-actions": "^7.0.7",
+        "@storybook/addon-essentials": "^7.0.7",
+        "@storybook/addon-interactions": "^7.0.7",
+        "@storybook/addon-links": "^7.0.7",
+        "@storybook/addon-mdx-gfm": "^7.0.7",
+        "@storybook/jest": "^0.1.0",
+        "@storybook/nextjs": "^7.0.7",
+        "@storybook/react": "^7.0.7",
+        "@storybook/test-runner": "^0.10.0",
+        "@storybook/testing-library": "^0.1.0",
+        "@testing-library/jest-dom": "^5.16.5",
+        "@testing-library/react": "^14.0.0",
+        "@testing-library/react-hooks": "^8.0.1",
+        "@types/jest": "^29.5.0",
+        "@types/lodash": "^4.14.191",
+        "@types/node": "18.15.0",
+        "@types/ramda": "^0.29.3",
+        "@types/react": "18.0.28",
+        "@types/react-dom": "18.0.11",
+        "@types/react-slick": "^0.23.10",
+        "@types/react-test-renderer": "^18.0.0",
+        "@types/testing-library__jest-dom": "^5.14.5",
+        "babel-jest": "^29.5.0",
+        "babel-loader": "^9.1.2",
+        "babel-plugin-emotion": "^11.0.0",
+        "chromatic": "^6.17.3",
+        "eslint": "8.36.0",
+        "eslint-config-next": "13.2.4",
+        "eslint-config-prettier": "^8.7.0",
+        "eslint-plugin-json": "^3.1.0",
+        "eslint-plugin-prettier": "^4.2.1",
+        "eslint-plugin-storybook": "^0.6.11",
+        "jest": "^29.5.0",
+        "jest-environment-jsdom": "^29.5.0",
+        "storybook": "^7.0.7"
+    },
+    "files": [
+        "src/common"
+    ],
+    "readme": "./README.md"
 }

package/src/common/accordion/NsAccordion.tsx

@@ -1,6 +1,5 @@
-import { useState, useEffect, useMemo } from 'react';
-import NsAccordionItem from './NsAccordionItem';
-import { NsAccordionProps } from './types';
+import React, { FC, useMemo } from 'react';
+import { NsAccordionItem, useAccordionMap, NsAccordionProps, AccordionItem } from '..';
 import { StyledAccordionWrapper } from './ToggleSection.styled';
 
 /**
@@ -9,44 +8,30 @@ 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
  */
-const NsAccordion = ({
-    additionalProps,
+const createKey = (item: AccordionItem, index: number) => item?.id + index;
+const NsAccordion: FC<NsAccordionProps> = ({
     allowMultipleExpanded,
-    contentArray,
+    invert,
+    level,
     variant,
+    items,
     headerTypographyVariant,
     closedIconName,
     openedIconName,
-}: NsAccordionProps) => {
+    additionalProps,
+    isChild = false,
+}) => {
     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);
+        return items
+            ?.map?.((content, index) => (content?.isDefaultOpen ? createKey(content, index) : null))
+            .filter((e) => e !== null) as string[];
+    }, [items]);
 
-    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]);
+    const { toggleOpen, itemStateMap } = useAccordionMap({ allowMultipleExpanded, defaultOpenIds });
 
     return (
         <StyledAccordionWrapper
@@ -54,19 +39,26 @@ const NsAccordion = ({
             className="ns-accordion"
             data-testid={additionalProps?.testid ?? 'ns-accordion-testid'}
         >
-            {contentArray.map((content, index) => {
-                const isOpen = expandedIds.includes(index);
+            {items?.map?.((item, index) => {
+                const key = createKey(item, index);
+                const isOpen = itemStateMap[key] ?? false;
                 return (
                     <NsAccordionItem
-                        variant={variant}
-                        headerTypographyVariant={headerTypographyVariant}
+                        allowMultipleExpanded={item.allowMultipleExpanded}
+                        type={item.type}
                         closedIconName={closedIconName}
-                        openedIconName={openedIconName}
-                        key={index}
+                        content={item.content}
+                        headerTypographyVariant={headerTypographyVariant}
+                        invert={invert}
                         isOpen={isOpen}
-                        toggleOpen={() => toggleOpen(index, isOpen)}
-                        content={content?.body}
-                        title={content?.title}
+                        isChild={isChild}
+                        key={key}
+                        level={level}
+                        openedIconName={openedIconName}
+                        startIcon={item.icon}
+                        toggleOpen={() => toggleOpen(createKey(item, index))}
+                        title={<div className="nsa-item-title">{item.title}</div>}
+                        variant={variant}
                     />
                 );
             })}

package/src/common/accordion/NsAccordionHeader.tsx

@@ -1,18 +1,28 @@
-import { NsTypography, NsIcon, NsAccordionHeaderProps, AccordionVariant } from '..';
-import { styled, ColorUtils } from '@nuskin/foundation-theme';
-const { getPaletteColor } = ColorUtils;
+import { NsTypography, NsIcon, NsAccordionHeaderProps, AccordionVariant, NsIconProps, AccordionVariantType } from '..';
+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: AccordionVariant }>(({ theme, variant }) => {
-    const backgroundColor = getPaletteColor(theme, 'primary', 'contrastText') as string;
+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,
+        backgroundColor: headBg,
+        color: headText,
         cursor: 'pointer',
         display: 'grid',
-        gridTemplateColumns: '1fr 24px',
+        gap: '4px',
+        gridTemplateColumns: 'auto 1fr 24px',
         padding: '9px 16px',
         borderBottom,
     } as any;
@@ -31,17 +41,22 @@ const NsAccordionHeader = ({
     closedIconName,
     variant,
     headerTypographyVariant,
+    startIcon,
+    invert,
+    cslp,
 }: NsAccordionHeaderProps) => {
     return (
         <StyledHeader
+            invert={invert}
             role="button"
             aria-expanded={isOpen ? 'true' : 'false'}
             className={`section-header ${isOpen ? 'expanded' : ''} ${additionalProps?.className ?? ''}`}
             onClick={onClick}
             variant={variant}
         >
+            <HeaderIcon {...startIcon} />
             {typeof title === 'string' ? (
-                <NsTypography variant={headerTypographyVariant ?? 'h4'} weight="bold">
+                <NsTypography variant={headerTypographyVariant ?? 'h4'} weight="bold" {...(cslp?.header ?? {})}>
                     {title}
                 </NsTypography>
             ) : (
@@ -54,3 +69,9 @@ const NsAccordionHeader = ({
     );
 };
 export default NsAccordionHeader;
+
+const HeaderIcon = (props: Partial<NsIconProps>) => {
+    const hasIcon = props?.name ? isValidIconName(props?.name) : false;
+    if (!hasIcon) return <span />;
+    return <NsIcon {...(props as NsIconProps)} />;
+};

package/src/common/accordion/NsAccordionItem.tsx

@@ -6,9 +6,11 @@ import { StyledToggleSection } from './ToggleSection.styled';
 /**
  * this component is used by accordion to pass title
  * and content
+ * cslp:{header:CslpTag, content:CslpTag}
  */
 const NsAccordionItem = ({
     isOpen,
+    isChild,
     toggleOpen,
     title,
     content,
@@ -16,11 +18,19 @@ const NsAccordionItem = ({
     headerTypographyVariant,
     closedIconName,
     openedIconName,
+    startIcon,
+    level,
+    additionalProps,
+    invert,
+    type,
+    cslp,
+    allowMultipleExpanded,
 }: NsAccordionItemProps) => {
     return (
         <StyledToggleSection variant={variant}>
             <NsAccordionHeader
-                additionalProps={{ className: 'accordion-section' }}
+                invert={invert}
+                additionalProps={{ ...additionalProps, className: 'accordion-section ' + additionalProps?.className }}
                 closedIconName={closedIconName}
                 headerTypographyVariant={headerTypographyVariant}
                 isOpen={isOpen}
@@ -28,10 +38,20 @@ const NsAccordionItem = ({
                 onClick={toggleOpen}
                 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}
             />
-            <NsCollapse isOpen={isOpen} variant={variant}>
-                {content}
-            </NsCollapse>
         </StyledToggleSection>
     );
 };

package/src/common/accordion/NsCollapse.tsx

@@ -1,55 +1,116 @@
-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');
+import { styled } from '@nuskin/foundation-theme';
+import {
+    AccordionVariant,
+    AccordionVariantType,
+    NsCollapseProps,
+    AccordionItem,
+    NsAccordion,
+    AccordionContentTypeObject,
+} from '../';
+import { getAccordionColor } from './colorMap';
+import { ReactElement, isValidElement, useMemo } from 'react';
+
+const getLevelOffset = (level: number) => {
+    return level > 1 ? (level - 1) * 16 : 0;
 };
+
 const options = {
-    shouldForwardProp: (key: string) => key !== 'variant',
+    shouldForwardProp: (key: string) => !['variant', 'level'].includes(key),
 };
+
 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)';
+)<{ variant: AccordionVariantType; level: number; invert: boolean; isChild: boolean }>(
+    ({ theme, variant, level, invert, isChild }) => {
+        const { contentBg, contentText } = getAccordionColor({
+            theme,
+            invert,
+            variant,
+            keys: ['contentBg', 'contentText'],
+        });
+
+        let borderBottom = 'none';
+        if (variant === AccordionVariant.Compact) {
+            borderBottom = isChild ? 'none' : '1px solid rgb(0,0,0,0.125)';
+        }
+        return {
+            backgroundColor: contentBg,
+            color: contentText,
+            opacity: 0,
+            padding: '0 16px',
+            height: 0,
+            overflow: 'hidden',
+            transition: '0.3s',
+            '&.expanded': {
+                padding: `9px 0 9px ${getLevelOffset(level)}px`,
+                height: 'auto',
+                opacity: 1,
+                borderBottom,
+            },
+            '.nsa-content-padded': {
+                padding: '0 16px 16px',
+            },
+        };
     }
-    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) => {
+const NsCollapse = ({
+    isOpen,
+    content,
+    additionalProps,
+    variant,
+    level,
+    invert,
+    isChild,
+    type,
+    cslp,
+    allowMultipleExpanded,
+}: NsCollapseProps) => {
+    const body = useMemo(() => {
+        if (isValidElement(content)) {
+            return content as ReactElement;
+        }
+        if (type === AccordionContentTypeObject.html) {
+            return (
+                <div
+                    className="nsa-content-padded"
+                    dangerouslySetInnerHTML={{ __html: content as string }}
+                    {...(cslp?.content ?? {})}
+                />
+            );
+        } else if (type === AccordionContentTypeObject.text) {
+            return (
+                <div className="p-4" {...(cslp?.content ?? {})}>
+                    {content as string}
+                </div>
+            );
+        } else if (type === AccordionContentTypeObject.accordion) {
+            return (
+                <NsAccordion
+                    isChild={true}
+                    invert={invert}
+                    level={level}
+                    variant={AccordionVariant.Gray}
+                    items={content as AccordionItem[]}
+                    allowMultipleExpanded={allowMultipleExpanded ?? false}
+                />
+            );
+        }
+    }, [allowMultipleExpanded, content, cslp?.content, invert, level, type]);
     return (
         <StyledCollapse
+            isChild={isChild}
+            level={level}
             className={`ns-collapse ${isOpen ? 'expanded' : ''} ${additionalProps?.className ?? ''}`}
             variant={variant}
+            invert={invert}
         >
-            {isOpen ? children : null}
+            {body}
         </StyledCollapse>
     );
 };

package/src/common/accordion/NsToggleSection.tsx

@@ -9,7 +9,16 @@ import { NsToggleSectionProps, NsAccordionItem } from '../';
  * 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 NsToggleSection = ({
+    title,
+    content,
+    additionalProps,
+    defaultOpen,
+    variant,
+    invert,
+    isChild,
+    type,
+}: NsToggleSectionProps) => {
     const [isExpanded, setIsExpanded] = useState(defaultOpen ?? false);
 
     const toggleAccordion = () => {
@@ -17,12 +26,16 @@ const NsToggleSection = ({ title, children, additionalProps, defaultOpen, varian
     };
     return (
         <NsAccordionItem
+            type={type}
+            level={2}
             variant={variant}
-            additionalProps={{ ...additionalProps, className: 'toggle-section ' + additionalProps?.className ?? '' }}
+            additionalProps={additionalProps}
             isOpen={isExpanded}
             title={title}
-            content={children}
+            content={content}
             toggleOpen={toggleAccordion}
+            invert={invert}
+            isChild={isChild}
         />
     );
 };