@nuskin/foundation-ui-components 1.22.2 → 1.23.0-accordion-update.1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/foundation-ui-components",
-    "version": "1.22.2",
+    "version": "1.23.0-accordion-update.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/NsAccordionHeader.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@nuskin/foundation-theme';
 
-import { AccordionVariant, AccordionVariantType, NsAccordionHeaderProps, NsIcon, NsIconProps, NsTypography } from '..';
+import { AccordionVariant, AccordionVariantType, NsAccordionHeaderProps, NsIcon, NsIconProps, NsTypography } from '../';
 import { isValidIconName } from '../icon/NsIconVariants';
 import { getAccordionColor } from './colorMap';
 
@@ -21,6 +21,9 @@ const StyledHeader = styled('header')<StyledType>(({ theme, variant, invert }) =
         gridTemplateColumns: 'auto 1fr 24px',
         padding: '9px 16px',
         borderBottom,
+        '.nsa-item-title': {
+            color: headText,
+        },
     } as any;
 });
 
@@ -41,6 +44,7 @@ const NsAccordionHeader = ({
     invert,
     cslp,
     showEndIconWhenEmpty,
+    content,
 }: NsAccordionHeaderProps) => {
     return (
         <StyledHeader
@@ -59,7 +63,7 @@ const NsAccordionHeader = ({
             ) : (
                 title
             )}
-            {showEndIconWhenEmpty ? (
+            {content || showEndIconWhenEmpty ? (
                 <span className="header-icon">
                     <NsIcon name={isOpen ? openedIconName ?? 'arrowUp' : closedIconName ?? 'arrowDown'} />
                 </span>

package/src/common/accordion/NsAccordionItem.tsx

@@ -42,8 +42,9 @@ const NsAccordionItem = ({
                 startIcon={startIcon}
                 cslp={cslp}
                 showEndIconWhenEmpty={showEndIconWhenEmpty}
+                content={content}
             />
-            {content ? (
+            {content || showEndIconWhenEmpty ? (
                 <NsCollapse
                     type={type}
                     isChild={isChild}

package/src/common/accordion/NsCollapse.tsx

@@ -1,7 +1,16 @@
-import { styled } from '@nuskin/foundation-theme';
 import { isValidElement, ReactElement, useMemo } from 'react';
 
-import { AccordionContentTypeObject, AccordionItem, AccordionVariant, AccordionVariantType, NsAccordion, NsCollapseProps, NsTypography } from '../';
+import { styled } from '@nuskin/foundation-theme';
+
+import {
+    AccordionContentTypeObject,
+    AccordionItem,
+    AccordionVariant,
+    AccordionVariantType,
+    NsAccordion,
+    NsCollapseProps,
+    NsTypography,
+} from '../';
 import { getAccordionColor } from './colorMap';
 
 const getLevelOffset = (level: number) => {

package/src/common/accordion/colorMap.ts

@@ -1,7 +1,13 @@
-import { AllColorKeyType, ColorUtils } from '@nuskin/foundation-theme';
+import {
+    AllColorKeyType,
+    ColorUtils,
+} from '@nuskin/foundation-theme';
 
 import { Themed } from '../common.types';
-import { AccordionVariant, AccordionVariantType } from './enums';
+import {
+    AccordionVariant,
+    AccordionVariantType,
+} from './enums';
 
 const { getGenomeColor } = ColorUtils;
 const compKeys = ['contentBg', 'contentText', 'headBg', 'headText'];

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

@@ -1,11 +1,44 @@
 import React from 'react';
 import { render, fireEvent } from '@/test-utils/index';
-import { NsAccordionHeader, AccordionVariant } from '@/common/index';
+import { NsAccordionHeader, AccordionVariant, NsLink } from '@/common/index';
+
+const content = [
+    {
+        type: 'text',
+        id: '1',
+        title: 'title1',
+        content: (
+            <div>
+                <p>1</p>
+                <p>2</p>
+            </div>
+        ),
+    },
+    {
+        type: 'text',
+        id: '2',
+        title: <NsLink href={'/test'}>title2</NsLink>,
+        content: null,
+    },
+    {
+        type: 'text',
+        id: '3',
+        title: 'title3',
+        content: (
+            <div>
+                <p>1</p>
+                <p>2</p>
+                <p>3</p>
+            </div>
+        ),
+    },
+];
 
 describe('NsAccordionHeader', () => {
     it('1. renders title correctly', () => {
         const onClick = jest.fn();
         const title = 'Section Header';
+
         const { getByText } = render(
             <NsAccordionHeader
                 variant={AccordionVariant.Basic}
@@ -13,6 +46,7 @@ describe('NsAccordionHeader', () => {
                 onClick={onClick}
                 invert={false}
                 isOpen={true}
+                content={content}
             />
         );
         const el = getByText(title);
@@ -29,6 +63,7 @@ describe('NsAccordionHeader', () => {
                 onClick={onClick}
                 invert={false}
                 isOpen={false}
+                content={content}
             />
         );
         const el = getByText(title);
@@ -44,6 +79,7 @@ describe('NsAccordionHeader', () => {
                 onClick={onClick}
                 invert={false}
                 isOpen={false}
+                content={content}
             />
         );
         const header = container.querySelector('header');
@@ -64,6 +100,7 @@ describe('NsAccordionHeader', () => {
                 additionalProps={{ className: additionalClassName }}
                 onClick={onClick}
                 invert={false}
+                content={content}
             />
         );
         expect(container.querySelector('header')).toHaveClass(`section-header ${additionalClassName}`);
@@ -78,6 +115,7 @@ describe('NsAccordionHeader', () => {
                 isOpen
                 onClick={onClick}
                 invert={false}
+                content={content}
             />
         );
         expect(container.querySelector('header')).toHaveClass('expanded');
@@ -93,6 +131,7 @@ describe('NsAccordionHeader', () => {
                 invert={false}
                 isOpen
                 showEndIconWhenEmpty={true}
+                content={content}
             />
         );
         // this icon refers to end icon which is either arrowUp or arrowDown
@@ -108,6 +147,7 @@ describe('NsAccordionHeader', () => {
                 invert={false}
                 isOpen
                 startIcon={{ name: 'hamburgerIcon', testId: 'hamburger-test' }}
+                content={content}
             />
         );
         expect(getByTestId('hamburger-test')).toBeInTheDocument();
@@ -124,6 +164,7 @@ describe('NsAccordionHeader', () => {
                 invert={false}
                 isOpen
                 startIcon={{ name: invalidIconName as any, testId }}
+                content={content}
             />
         );
         expect(queryByTestId(testId)).toBeNull();

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

@@ -1,4 +1,3 @@
-//types
 import { ReactElement, ReactNode } from 'react';
 import { AdditionalProps } from '../common.types';
 import { NsIconNameType, NsIconProps } from '../icon';
@@ -50,6 +49,7 @@ export type NsAccordionHeaderProps = AdditionalProps & {
     headerTypographyVariant?: Variants;
     startIcon?: NsIconProps;
     showEndIconWhenEmpty?: boolean;
+    content: AccordionItem['content'];
 } & Pick<CommonAccordionType, 'invert' | 'variant'>;
 
 export type NsCollapseProps = AdditionalProps & {

package/src/common/text-strip/NsTextStrip.tsx

@@ -5,10 +5,7 @@
 
 import React from 'react';
 
-import {
-    ColorUtils,
-    styled,
-} from '@nuskin/foundation-theme';
+import { ColorUtils, styled } from '@nuskin/foundation-theme';
 
 import { NsLink } from '../link';
 import { NsTypography } from '../typography';
@@ -46,12 +43,12 @@ const NsTextStrip = (props: NsTextStripProps) => {
         >
             {link?.title ? (
                 <NsTypography weight="bold" variant="label-m" className="text-strip-title whitespace-nowrap" noSpacing>
-                    <span title={link?.title}>{link?.title}</span>
+                    {link.title}
                 </NsTypography>
             ) : null}
             {description ? (
                 <NsTypography className="text-strip-description whitespace-nowrap" variant="body-m" noSpacing>
-                    <span title={description}>{description}</span>
+                    {description}
                 </NsTypography>
             ) : null}
         </StyledHeader>