@nuskin/foundation-ui-components 1.22.0-cx130-1102.2 → 1.22.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.22.0-cx130-1102.2",
+    "version": "1.22.1",
     "description": "It is a foundation library written in react, that provides common components to all UI pages",
     "main": "src/common/index.ts",
     "repository": {

package/src/common/accordion/NsAccordion.tsx

@@ -25,6 +25,7 @@ const NsAccordion = ({
     openedIconName,
     additionalProps,
     isChild = false,
+    showEndIconWhenEmpty = false,
 }: NsAccordionProps) => {
     const defaultOpenIds = useMemo(() => {
         return items
@@ -64,6 +65,7 @@ const NsAccordion = ({
                             </NsTypography>
                         }
                         variant={variant}
+                        showEndIconWhenEmpty={showEndIconWhenEmpty}
                     />
                 );
             })}

package/src/common/accordion/NsAccordionHeader.tsx

@@ -40,6 +40,7 @@ const NsAccordionHeader = ({
     startIcon,
     invert,
     cslp,
+    showEndIconWhenEmpty,
 }: NsAccordionHeaderProps) => {
     return (
         <StyledHeader
@@ -58,9 +59,11 @@ const NsAccordionHeader = ({
             ) : (
                 title
             )}
-            <span className="header-icon">
-                <NsIcon name={isOpen ? openedIconName ?? 'arrowUp' : closedIconName ?? 'arrowDown'} />
-            </span>
+            {showEndIconWhenEmpty ? (
+                <span className="header-icon">
+                    <NsIcon name={isOpen ? openedIconName ?? 'arrowUp' : closedIconName ?? 'arrowDown'} />
+                </span>
+            ) : null}
         </StyledHeader>
     );
 };

package/src/common/accordion/NsAccordionItem.tsx

@@ -25,6 +25,7 @@ const NsAccordionItem = ({
     type,
     cslp,
     allowMultipleExpanded,
+    showEndIconWhenEmpty,
 }: NsAccordionItemProps) => {
     return (
         <StyledToggleSection variant={variant}>
@@ -40,18 +41,21 @@ const NsAccordionItem = ({
                 variant={variant}
                 startIcon={startIcon}
                 cslp={cslp}
+                showEndIconWhenEmpty={showEndIconWhenEmpty}
             />
-            <NsCollapse
-                type={type}
-                isChild={isChild}
-                isOpen={isOpen}
-                variant={variant}
-                level={level}
-                invert={invert}
-                content={content}
-                cslp={cslp}
-                allowMultipleExpanded={allowMultipleExpanded}
-            />
+            {content ? (
+                <NsCollapse
+                    type={type}
+                    isChild={isChild}
+                    isOpen={isOpen}
+                    variant={variant}
+                    level={level}
+                    invert={invert}
+                    content={content}
+                    cslp={cslp}
+                    allowMultipleExpanded={allowMultipleExpanded}
+                />
+            ) : null}
         </StyledToggleSection>
     );
 };

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

@@ -160,4 +160,24 @@ describe('NsAccordion', () => {
             expect(c3.parentNode).toHaveStyle('opacity: 0');
         }
     });
+    it('7. shows end icon only when showEndIconWhenEmpty is true', async () => {
+        const items = generateContentArray(3, false);
+        const defaultProps = {
+            additionalProps: {
+                testid: 'test-accordion',
+            },
+            allowMultipleExpanded: false,
+            items,
+            variant: AccordionVariant.Compact,
+            level: 0,
+            invert: false,
+            showEndIconWhenEmpty: true,
+        };
+        const { getAllByTestId } = render(<NsAccordion {...defaultProps} />);
+        const elements = getAllByTestId('arrowDown');
+
+        elements.forEach((element) => {
+            expect(element).toBeInTheDocument();
+        });
+    });
 });

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

@@ -83,7 +83,7 @@ describe('NsAccordionHeader', () => {
         expect(container.querySelector('header')).toHaveClass('expanded');
     });
 
-    it('6. renders with header icon', () => {
+    it('6. renders with header icon when showEndIconWhenEmpty is true', () => {
         const onClick = jest.fn();
         const { getByTestId } = render(
             <NsAccordionHeader
@@ -92,6 +92,7 @@ describe('NsAccordionHeader', () => {
                 onClick={onClick}
                 invert={false}
                 isOpen
+                showEndIconWhenEmpty={true}
             />
         );
         // this icon refers to end icon which is either arrowUp or arrowDown

package/src/common/accordion/types.d.ts

@@ -1,3 +1,4 @@
+//types
 import { ReactElement, ReactNode } from 'react';
 import { AdditionalProps } from '../common.types';
 import { NsIconNameType, NsIconProps } from '../icon';
@@ -8,9 +9,9 @@ export type AccordionItem = {
     allowMultipleExpanded?: boolean;
     type: AccordionContentType;
     id: string;
-    content: string | AccordionItem[] | ReactElement;
+    content: string | AccordionItem[] | ReactElement | null;
     icon?: NsIconProps;
-    title: string;
+    title: string | ReactElement;
     isDefaultOpen?: boolean;
 };
 
@@ -26,6 +27,7 @@ export type NsAccordionProps = AdditionalProps & {
     /** NsIcon's icon name to be shown in closed state */
     closedIconName?: NsIconNameType;
     allowMultipleExpanded: boolean;
+    showEndIconWhenEmpty?: boolean;
 };
 
 type CommonAccordionType = {
@@ -47,6 +49,7 @@ export type NsAccordionHeaderProps = AdditionalProps & {
     closedIconName?: NsIconNameType;
     headerTypographyVariant?: Variants;
     startIcon?: NsIconProps;
+    showEndIconWhenEmpty?: boolean;
 } & Pick<CommonAccordionType, 'invert' | 'variant'>;
 
 export type NsCollapseProps = AdditionalProps & {
@@ -78,4 +81,5 @@ export type NsAccordionItemProps = AdditionalProps & {
     isChild: boolean;
     type: AccordionContentType;
     allowMultipleExpanded?: boolean;
+    showEndIconWhenEmpty?: boolean;
 } & CommonAccordionType;