@nuskin/foundation-ui-components 1.22.2 → 1.22.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -41,6 +41,7 @@ const NsAccordionHeader = ({
|
|
|
41
41
|
invert,
|
|
42
42
|
cslp,
|
|
43
43
|
showEndIconWhenEmpty,
|
|
44
|
+
content,
|
|
44
45
|
}: NsAccordionHeaderProps) => {
|
|
45
46
|
return (
|
|
46
47
|
<StyledHeader
|
|
@@ -59,7 +60,7 @@ const NsAccordionHeader = ({
|
|
|
59
60
|
) : (
|
|
60
61
|
title
|
|
61
62
|
)}
|
|
62
|
-
{showEndIconWhenEmpty ? (
|
|
63
|
+
{content || showEndIconWhenEmpty ? (
|
|
63
64
|
<span className="header-icon">
|
|
64
65
|
<NsIcon name={isOpen ? openedIconName ?? 'arrowUp' : closedIconName ?? 'arrowDown'} />
|
|
65
66
|
</span>
|
|
@@ -1,11 +1,44 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { render, fireEvent } from '@/test-utils/index';
|
|
3
|
-
import { NsAccordionHeader, AccordionVariant } from '@/common/index';
|
|
3
|
+
import { NsAccordionHeader, AccordionVariant, NsLink } from '@/common/index';
|
|
4
|
+
|
|
5
|
+
const content = [
|
|
6
|
+
{
|
|
7
|
+
type: 'text',
|
|
8
|
+
id: '1',
|
|
9
|
+
title: 'title1',
|
|
10
|
+
content: (
|
|
11
|
+
<div>
|
|
12
|
+
<p>1</p>
|
|
13
|
+
<p>2</p>
|
|
14
|
+
</div>
|
|
15
|
+
),
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
type: 'text',
|
|
19
|
+
id: '2',
|
|
20
|
+
title: <NsLink href={'/test'}>title2</NsLink>,
|
|
21
|
+
content: null,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
type: 'text',
|
|
25
|
+
id: '3',
|
|
26
|
+
title: 'title3',
|
|
27
|
+
content: (
|
|
28
|
+
<div>
|
|
29
|
+
<p>1</p>
|
|
30
|
+
<p>2</p>
|
|
31
|
+
<p>3</p>
|
|
32
|
+
</div>
|
|
33
|
+
),
|
|
34
|
+
},
|
|
35
|
+
];
|
|
4
36
|
|
|
5
37
|
describe('NsAccordionHeader', () => {
|
|
6
38
|
it('1. renders title correctly', () => {
|
|
7
39
|
const onClick = jest.fn();
|
|
8
40
|
const title = 'Section Header';
|
|
41
|
+
|
|
9
42
|
const { getByText } = render(
|
|
10
43
|
<NsAccordionHeader
|
|
11
44
|
variant={AccordionVariant.Basic}
|
|
@@ -13,6 +46,7 @@ describe('NsAccordionHeader', () => {
|
|
|
13
46
|
onClick={onClick}
|
|
14
47
|
invert={false}
|
|
15
48
|
isOpen={true}
|
|
49
|
+
content={content}
|
|
16
50
|
/>
|
|
17
51
|
);
|
|
18
52
|
const el = getByText(title);
|
|
@@ -29,6 +63,7 @@ describe('NsAccordionHeader', () => {
|
|
|
29
63
|
onClick={onClick}
|
|
30
64
|
invert={false}
|
|
31
65
|
isOpen={false}
|
|
66
|
+
content={content}
|
|
32
67
|
/>
|
|
33
68
|
);
|
|
34
69
|
const el = getByText(title);
|
|
@@ -44,6 +79,7 @@ describe('NsAccordionHeader', () => {
|
|
|
44
79
|
onClick={onClick}
|
|
45
80
|
invert={false}
|
|
46
81
|
isOpen={false}
|
|
82
|
+
content={content}
|
|
47
83
|
/>
|
|
48
84
|
);
|
|
49
85
|
const header = container.querySelector('header');
|
|
@@ -64,6 +100,7 @@ describe('NsAccordionHeader', () => {
|
|
|
64
100
|
additionalProps={{ className: additionalClassName }}
|
|
65
101
|
onClick={onClick}
|
|
66
102
|
invert={false}
|
|
103
|
+
content={content}
|
|
67
104
|
/>
|
|
68
105
|
);
|
|
69
106
|
expect(container.querySelector('header')).toHaveClass(`section-header ${additionalClassName}`);
|
|
@@ -78,6 +115,7 @@ describe('NsAccordionHeader', () => {
|
|
|
78
115
|
isOpen
|
|
79
116
|
onClick={onClick}
|
|
80
117
|
invert={false}
|
|
118
|
+
content={content}
|
|
81
119
|
/>
|
|
82
120
|
);
|
|
83
121
|
expect(container.querySelector('header')).toHaveClass('expanded');
|
|
@@ -93,6 +131,7 @@ describe('NsAccordionHeader', () => {
|
|
|
93
131
|
invert={false}
|
|
94
132
|
isOpen
|
|
95
133
|
showEndIconWhenEmpty={true}
|
|
134
|
+
content={content}
|
|
96
135
|
/>
|
|
97
136
|
);
|
|
98
137
|
// this icon refers to end icon which is either arrowUp or arrowDown
|
|
@@ -108,6 +147,7 @@ describe('NsAccordionHeader', () => {
|
|
|
108
147
|
invert={false}
|
|
109
148
|
isOpen
|
|
110
149
|
startIcon={{ name: 'hamburgerIcon', testId: 'hamburger-test' }}
|
|
150
|
+
content={content}
|
|
111
151
|
/>
|
|
112
152
|
);
|
|
113
153
|
expect(getByTestId('hamburger-test')).toBeInTheDocument();
|
|
@@ -124,6 +164,7 @@ describe('NsAccordionHeader', () => {
|
|
|
124
164
|
invert={false}
|
|
125
165
|
isOpen
|
|
126
166
|
startIcon={{ name: invalidIconName as any, testId }}
|
|
167
|
+
content={content}
|
|
127
168
|
/>
|
|
128
169
|
);
|
|
129
170
|
expect(queryByTestId(testId)).toBeNull();
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
//types
|
|
2
1
|
import { ReactElement, ReactNode } from 'react';
|
|
3
2
|
import { AdditionalProps } from '../common.types';
|
|
4
3
|
import { NsIconNameType, NsIconProps } from '../icon';
|
|
@@ -50,6 +49,7 @@ export type NsAccordionHeaderProps = AdditionalProps & {
|
|
|
50
49
|
headerTypographyVariant?: Variants;
|
|
51
50
|
startIcon?: NsIconProps;
|
|
52
51
|
showEndIconWhenEmpty?: boolean;
|
|
52
|
+
content: AccordionItem['content'];
|
|
53
53
|
} & Pick<CommonAccordionType, 'invert' | 'variant'>;
|
|
54
54
|
|
|
55
55
|
export type NsCollapseProps = AdditionalProps & {
|