@arbor-education/design-system.components 0.24.3 → 0.25.0
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/CHANGELOG.md +6 -0
- package/dist/components/section/Section.d.ts +3 -6
- package/dist/components/section/Section.d.ts.map +1 -1
- package/dist/components/section/Section.js +2 -2
- package/dist/components/section/Section.js.map +1 -1
- package/dist/components/section/Section.stories.d.ts +1 -0
- package/dist/components/section/Section.stories.d.ts.map +1 -1
- package/dist/components/section/Section.stories.js +125 -52
- package/dist/components/section/Section.stories.js.map +1 -1
- package/dist/components/section/Section.test.js +13 -2
- package/dist/components/section/Section.test.js.map +1 -1
- package/package.json +1 -1
- package/src/components/section/Section.stories.tsx +198 -70
- package/src/components/section/Section.test.tsx +14 -8
- package/src/components/section/Section.tsx +7 -15
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.25.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#214](https://github.com/arbor-education/design-system.components/pull/214) [`ed28e24`](https://github.com/arbor-education/design-system.components/commit/ed28e24c48dbf5d6a248172852a0116ba9d568ec) Thanks [@Alex-DN-SP](https://github.com/Alex-DN-SP)! - MIS-70551 Passed Button props to Section
|
|
8
|
+
|
|
3
9
|
## 0.24.3
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { type
|
|
1
|
+
import { type ButtonProps } from '../button/Button.js';
|
|
2
2
|
import { type HeadingLevel } from '../heading/Heading.js';
|
|
3
3
|
import type { IconName } from '../icon/allowedIcons.js';
|
|
4
|
-
import { type HTMLAttributes
|
|
4
|
+
import { type HTMLAttributes } from 'react';
|
|
5
5
|
type SectionProps = {
|
|
6
6
|
title?: string;
|
|
7
7
|
headingLevel?: HeadingLevel;
|
|
@@ -10,10 +10,7 @@ type SectionProps = {
|
|
|
10
10
|
titleIconScreenReaderText?: string;
|
|
11
11
|
collapsible?: boolean;
|
|
12
12
|
collapsed?: boolean;
|
|
13
|
-
|
|
14
|
-
buttonOnClick?: MouseEventHandler<HTMLButtonElement>;
|
|
15
|
-
buttonVariant?: ButtonVariant;
|
|
16
|
-
buttonSize?: ButtonSize;
|
|
13
|
+
headerButtonProps?: ButtonProps;
|
|
17
14
|
} & HTMLAttributes<HTMLElement>;
|
|
18
15
|
export declare const Section: (props: SectionProps) => import("react/jsx-runtime").JSX.Element;
|
|
19
16
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/components/section/Section.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,
|
|
1
|
+
{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../../src/components/section/Section.tsx"],"names":[],"mappings":"AACA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACpE,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACxE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,EAAY,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAGtD,KAAK,YAAY,GAAG;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yBAAyB,CAAC,EAAE,MAAM,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,iBAAiB,CAAC,EAAE,WAAW,CAAC;CACjC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAC;AAEhC,eAAO,MAAM,OAAO,GAAI,OAAO,YAAY,4CA0G1C,CAAC"}
|
|
@@ -6,7 +6,7 @@ import { Icon } from '../icon/Icon.js';
|
|
|
6
6
|
import { useState } from 'react';
|
|
7
7
|
import { ENTER_KEY, SPACE_KEY } from '../../utils/keyboardConstants.js';
|
|
8
8
|
export const Section = (props) => {
|
|
9
|
-
const { className, children, title, headingLevel = 1, titleIconName, titleIconColor, titleIconScreenReaderText, collapsible = false, collapsed: initialCollapsed = false,
|
|
9
|
+
const { className, children, title, headingLevel = 1, titleIconName, titleIconColor, titleIconScreenReaderText, collapsible = false, collapsed: initialCollapsed = false, headerButtonProps, } = props;
|
|
10
10
|
const [collapsed, setCollapsed] = useState(initialCollapsed);
|
|
11
11
|
const toggleCollapsedState = () => {
|
|
12
12
|
if (collapsible) {
|
|
@@ -25,7 +25,7 @@ export const Section = (props) => {
|
|
|
25
25
|
e.stopPropagation();
|
|
26
26
|
toggleCollapsedState();
|
|
27
27
|
}
|
|
28
|
-
}, level: headingLevel, tabIndex: collapsible ? 0 : -1, children: [_jsxs(Heading.InnerContainer, { children: [title, titleIconName && (_jsx(Icon, { name: titleIconName, color: titleIconColor, screenReaderText: titleIconScreenReaderText, size: 24 }))] }), _jsxs(Heading.InnerContainer, { children: [
|
|
28
|
+
}, level: headingLevel, tabIndex: collapsible ? 0 : -1, children: [_jsxs(Heading.InnerContainer, { children: [title, titleIconName && (_jsx(Icon, { name: titleIconName, color: titleIconColor, screenReaderText: titleIconScreenReaderText, size: 24 }))] }), _jsxs(Heading.InnerContainer, { children: [headerButtonProps && (_jsx(Button, { ...headerButtonProps, children: headerButtonProps.children })), collapsible && (_jsx("button", { className: "remove-default-button-styles", onClick: (e) => {
|
|
29
29
|
e.preventDefault();
|
|
30
30
|
e.stopPropagation();
|
|
31
31
|
toggleCollapsedState();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../src/components/section/Section.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"Section.js","sourceRoot":"","sources":["../../../src/components/section/Section.tsx"],"names":[],"mappings":"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"}
|
|
@@ -7,6 +7,7 @@ export declare const Default: Story;
|
|
|
7
7
|
export declare const WithHeadingLevel: Story;
|
|
8
8
|
export declare const WithTitleIcon: Story;
|
|
9
9
|
export declare const WithActionButton: Story;
|
|
10
|
+
export declare const WithActionButtonVariants: Story;
|
|
10
11
|
export declare const Collapsible: Story;
|
|
11
12
|
export declare const CollapsibleInitiallyCollapsed: Story;
|
|
12
13
|
export declare const CollapsibleWithActionButton: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../../../src/components/section/Section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAa5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAoHvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,
|
|
1
|
+
{"version":3,"file":"Section.stories.d.ts","sourceRoot":"","sources":["../../../src/components/section/Section.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAa5D,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAoHvC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,OAAO,CAuH9B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAkBnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA8D9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KA8C3B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA4D9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,KAwItC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAyCzB,CAAC;AAEF,eAAO,MAAM,6BAA6B,EAAE,KA4C3C,CAAC;AAEF,eAAO,MAAM,2BAA2B,EAAE,KAsDzC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAuDtB,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,KAiEvC,CAAC"}
|
|
@@ -51,11 +51,11 @@ const DEVELOPER_NOTES = [
|
|
|
51
51
|
'',
|
|
52
52
|
'---',
|
|
53
53
|
'',
|
|
54
|
-
'###
|
|
54
|
+
'### Pass all button props via `headerButtonProps`',
|
|
55
55
|
'',
|
|
56
|
-
'The action button only renders when `
|
|
57
|
-
'
|
|
58
|
-
'
|
|
56
|
+
'The action button only renders when `headerButtonProps` is provided.',
|
|
57
|
+
'Pass a single `headerButtonProps` object containing at minimum `children` (button label) and `onClick`.',
|
|
58
|
+
'Always include `variant` and `size` to avoid relying on `Button` defaults, which may not look right in the heading context.',
|
|
59
59
|
'',
|
|
60
60
|
'---',
|
|
61
61
|
'',
|
|
@@ -176,41 +176,16 @@ const meta = {
|
|
|
176
176
|
defaultValue: { summary: 'false' },
|
|
177
177
|
},
|
|
178
178
|
},
|
|
179
|
-
|
|
179
|
+
headerButtonProps: {
|
|
180
180
|
description: [
|
|
181
|
-
'
|
|
182
|
-
'
|
|
181
|
+
'Props forwarded directly to the `Button` component rendered in the section heading.',
|
|
182
|
+
'Omit this prop entirely to render no button.',
|
|
183
|
+
'When provided, always include `children` (button label), `onClick`, `variant`, and `size`',
|
|
184
|
+
"to avoid unexpected visual results from `Button` defaults. Use `size: 'S'` to keep it lightweight alongside the title.",
|
|
183
185
|
].join(' '),
|
|
184
|
-
control: 'text',
|
|
185
|
-
table: {
|
|
186
|
-
type: { summary: 'string' },
|
|
187
|
-
defaultValue: { summary: 'undefined' },
|
|
188
|
-
},
|
|
189
|
-
},
|
|
190
|
-
buttonOnClick: {
|
|
191
|
-
description: 'Click handler for the heading action button.',
|
|
192
|
-
action: 'buttonOnClick',
|
|
193
186
|
control: false,
|
|
194
187
|
table: {
|
|
195
|
-
type: { summary: '
|
|
196
|
-
defaultValue: { summary: 'undefined' },
|
|
197
|
-
},
|
|
198
|
-
},
|
|
199
|
-
buttonVariant: {
|
|
200
|
-
description: 'Visual variant for the heading action button. Always supply when `buttonText` is set.',
|
|
201
|
-
control: 'select',
|
|
202
|
-
options: ['primary', 'secondary', 'tertiary', 'primary-destructive', 'secondary-destructive', 'tertiary-destructive', 'ghost'],
|
|
203
|
-
table: {
|
|
204
|
-
type: { summary: "'primary' | 'secondary' | 'tertiary' | 'primary-destructive' | 'secondary-destructive' | 'tertiary-destructive' | 'ghost'" },
|
|
205
|
-
defaultValue: { summary: 'undefined' },
|
|
206
|
-
},
|
|
207
|
-
},
|
|
208
|
-
buttonSize: {
|
|
209
|
-
description: "Size of the heading action button. Always supply when `buttonText` is set. Use `'S'` to keep it visually lightweight alongside the title.",
|
|
210
|
-
control: 'select',
|
|
211
|
-
options: ['S', 'M', 'L'],
|
|
212
|
-
table: {
|
|
213
|
-
type: { summary: "'S' | 'M' | 'L'" },
|
|
188
|
+
type: { summary: 'ButtonProps' },
|
|
214
189
|
defaultValue: { summary: 'undefined' },
|
|
215
190
|
},
|
|
216
191
|
},
|
|
@@ -256,7 +231,7 @@ export const Default = withDescription({
|
|
|
256
231
|
children: (_jsxs("p", { children: ["Section content goes here. Add", _jsx("code", { children: "Row" }), ' ', "components, nested", _jsx("code", { children: "Section" }), ' ', "components, or any content relevant to the section topic."] })),
|
|
257
232
|
},
|
|
258
233
|
render: args => _jsx(Section, { ...args }),
|
|
259
|
-
}, 'The default story is wired to the Controls panel. Toggle `collapsible` to add expand/collapse behaviour, or
|
|
234
|
+
}, 'The default story is wired to the Controls panel. Toggle `collapsible` to add expand/collapse behaviour, or pass `headerButtonProps` to surface an action in the heading.');
|
|
260
235
|
export const WithHeadingLevel = withDescription({
|
|
261
236
|
parameters: {
|
|
262
237
|
controls: { disable: true },
|
|
@@ -329,10 +304,13 @@ function PersonalDetailsSection() {
|
|
|
329
304
|
<Section
|
|
330
305
|
title="Personal Details"
|
|
331
306
|
headingLevel={2}
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
307
|
+
headerButtonProps={{
|
|
308
|
+
children: 'Edit',
|
|
309
|
+
iconLeftName: 'pencil',
|
|
310
|
+
onClick: () => openEditModal(),
|
|
311
|
+
variant: 'secondary',
|
|
312
|
+
size: 'S',
|
|
313
|
+
}}
|
|
336
314
|
>
|
|
337
315
|
<p>Section content here.</p>
|
|
338
316
|
</Section>
|
|
@@ -343,8 +321,89 @@ export default PersonalDetailsSection;
|
|
|
343
321
|
},
|
|
344
322
|
},
|
|
345
323
|
},
|
|
346
|
-
render: () => (_jsx(Section, { title: "Personal Details", headingLevel: 2,
|
|
347
|
-
|
|
324
|
+
render: () => (_jsx(Section, { title: "Personal Details", headingLevel: 2, headerButtonProps: {
|
|
325
|
+
children: 'Edit',
|
|
326
|
+
iconLeftName: 'pencil',
|
|
327
|
+
onClick: fn(),
|
|
328
|
+
variant: 'secondary',
|
|
329
|
+
size: 'S',
|
|
330
|
+
}, children: _jsxs("p", { children: ["The action button appears in the heading row. Use", _jsx("code", { children: "iconLeftName" }), ' ', "or", _jsx("code", { children: "iconRightName" }), ' ', "inside", _jsx("code", { children: "headerButtonProps" }), ' ', "to add an icon alongside the label."] }) })),
|
|
331
|
+
}, 'Pass `headerButtonProps` to render an action button in the section heading. Icons can be added via `iconLeftName` or `iconRightName`. Use `size: "S"` to keep it visually lightweight alongside the title.');
|
|
332
|
+
export const WithActionButtonVariants = withDescription({
|
|
333
|
+
parameters: {
|
|
334
|
+
controls: { disable: true },
|
|
335
|
+
docs: {
|
|
336
|
+
source: {
|
|
337
|
+
language: 'tsx',
|
|
338
|
+
code: `
|
|
339
|
+
import { Section } from '@arbor-education/design-system.components';
|
|
340
|
+
|
|
341
|
+
// Icon on the left
|
|
342
|
+
<Section title="Documents" headingLevel={2}
|
|
343
|
+
headerButtonProps={{ children: 'Upload', iconLeftName: 'upload', onClick: () => {}, variant: 'secondary', size: 'S' }}>
|
|
344
|
+
<p>...</p>
|
|
345
|
+
</Section>
|
|
346
|
+
|
|
347
|
+
// Icon on the right
|
|
348
|
+
<Section title="External Link" headingLevel={2}
|
|
349
|
+
headerButtonProps={{ children: 'Open', iconRightName: 'external-link', onClick: () => {}, variant: 'tertiary', size: 'S' }}>
|
|
350
|
+
<p>...</p>
|
|
351
|
+
</Section>
|
|
352
|
+
|
|
353
|
+
// Icon-only (no children — button renders in icon-only mode)
|
|
354
|
+
<Section title="Attachments" headingLevel={2}
|
|
355
|
+
headerButtonProps={{ iconLeftName: 'plus', iconLeftScreenReaderText: 'Add attachment', onClick: () => {}, variant: 'secondary', size: 'S' }}>
|
|
356
|
+
<p>...</p>
|
|
357
|
+
</Section>
|
|
358
|
+
|
|
359
|
+
// Destructive
|
|
360
|
+
<Section title="Danger Zone" headingLevel={2}
|
|
361
|
+
headerButtonProps={{ children: 'Delete', iconLeftName: 'trash', onClick: () => {}, variant: 'primary-destructive', size: 'S' }}>
|
|
362
|
+
<p>...</p>
|
|
363
|
+
</Section>
|
|
364
|
+
|
|
365
|
+
// Disabled
|
|
366
|
+
<Section title="Locked Section" headingLevel={2}
|
|
367
|
+
headerButtonProps={{ children: 'Edit', iconLeftName: 'pencil', onClick: () => {}, variant: 'secondary', size: 'S', disabled: true }}>
|
|
368
|
+
<p>...</p>
|
|
369
|
+
</Section>
|
|
370
|
+
`.trim(),
|
|
371
|
+
},
|
|
372
|
+
},
|
|
373
|
+
},
|
|
374
|
+
render: () => (_jsxs(_Fragment, { children: [_jsx(Section, { title: "Documents", headingLevel: 2, headerButtonProps: {
|
|
375
|
+
children: 'Upload',
|
|
376
|
+
iconLeftName: 'upload',
|
|
377
|
+
onClick: fn(),
|
|
378
|
+
variant: 'secondary',
|
|
379
|
+
size: 'S',
|
|
380
|
+
}, children: _jsx("p", { children: "Left icon \u2014 icon precedes the label." }) }), _jsx(Section, { title: "External Link", headingLevel: 2, headerButtonProps: {
|
|
381
|
+
children: 'Open',
|
|
382
|
+
iconRightName: 'external-link',
|
|
383
|
+
onClick: fn(),
|
|
384
|
+
variant: 'tertiary',
|
|
385
|
+
size: 'S',
|
|
386
|
+
}, children: _jsx("p", { children: "Right icon \u2014 icon follows the label." }) }), _jsx(Section, { title: "Attachments", headingLevel: 2, headerButtonProps: {
|
|
387
|
+
iconLeftName: 'plus',
|
|
388
|
+
iconLeftScreenReaderText: 'Add attachment',
|
|
389
|
+
onClick: fn(),
|
|
390
|
+
variant: 'secondary',
|
|
391
|
+
size: 'S',
|
|
392
|
+
}, children: _jsxs("p", { children: ["Icon-only \u2014 omit", _jsx("code", { children: "children" }), ' ', "and the button renders in compact icon-only mode. Always supply", _jsx("code", { children: "iconLeftScreenReaderText" }), ' ', "for accessibility."] }) }), _jsx(Section, { title: "Danger Zone", headingLevel: 2, headerButtonProps: {
|
|
393
|
+
children: 'Delete',
|
|
394
|
+
iconLeftName: 'trash',
|
|
395
|
+
onClick: fn(),
|
|
396
|
+
variant: 'primary-destructive',
|
|
397
|
+
size: 'S',
|
|
398
|
+
}, children: _jsxs("p", { children: ["Destructive variant \u2014 use", _jsx("code", { children: "primary-destructive" }), ' ', "or", _jsx("code", { children: "secondary-destructive" }), ' ', "for irreversible actions."] }) }), _jsx(Section, { title: "Locked Section", headingLevel: 2, headerButtonProps: {
|
|
399
|
+
children: 'Edit',
|
|
400
|
+
iconLeftName: 'pencil',
|
|
401
|
+
onClick: fn(),
|
|
402
|
+
variant: 'secondary',
|
|
403
|
+
size: 'S',
|
|
404
|
+
disabled: true,
|
|
405
|
+
}, children: _jsxs("p", { children: ["Disabled \u2014 pass", _jsx("code", { children: "disabled: true" }), ' ', "to prevent interaction while keeping the button visible."] }) })] })),
|
|
406
|
+
}, 'All `ButtonProps` are forwarded through `headerButtonProps`. This story covers the main edge cases: left icon, right icon, icon-only, destructive variant, and disabled state.');
|
|
348
407
|
export const Collapsible = withDescription({
|
|
349
408
|
parameters: {
|
|
350
409
|
controls: { disable: true },
|
|
@@ -415,10 +474,12 @@ function ContactSection() {
|
|
|
415
474
|
title="Contact Information"
|
|
416
475
|
headingLevel={2}
|
|
417
476
|
collapsible
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
477
|
+
headerButtonProps={{
|
|
478
|
+
children: 'Add contact',
|
|
479
|
+
onClick: () => openAddContactModal(),
|
|
480
|
+
variant: 'secondary',
|
|
481
|
+
size: 'S',
|
|
482
|
+
}}
|
|
422
483
|
>
|
|
423
484
|
<p>Contact details here.</p>
|
|
424
485
|
</Section>
|
|
@@ -429,7 +490,12 @@ export default ContactSection;
|
|
|
429
490
|
},
|
|
430
491
|
},
|
|
431
492
|
},
|
|
432
|
-
render: () => (_jsx(Section, { title: "Contact Information", headingLevel: 2, collapsible: true,
|
|
493
|
+
render: () => (_jsx(Section, { title: "Contact Information", headingLevel: 2, collapsible: true, headerButtonProps: {
|
|
494
|
+
children: 'Add contact',
|
|
495
|
+
onClick: fn(),
|
|
496
|
+
variant: 'secondary',
|
|
497
|
+
size: 'S',
|
|
498
|
+
}, children: _jsxs("p", { children: ["A section can be both collapsible", _jsx("em", { children: "and" }), ' ', "have an action button. The chevron and the button both appear in the heading row."] }) })),
|
|
433
499
|
}, 'A section can combine `collapsible` with an action button. Both the chevron toggle and the action button appear in the heading row — useful when the content can be hidden but the action remains permanently accessible.');
|
|
434
500
|
export const WithRows = withDescription({
|
|
435
501
|
parameters: {
|
|
@@ -445,10 +511,12 @@ function PupilDetailSection() {
|
|
|
445
511
|
<Section
|
|
446
512
|
title="Personal Details"
|
|
447
513
|
headingLevel={2}
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
514
|
+
headerButtonProps={{
|
|
515
|
+
children: 'Edit',
|
|
516
|
+
onClick: () => openEditModal(),
|
|
517
|
+
variant: 'secondary',
|
|
518
|
+
size: 'S',
|
|
519
|
+
}}
|
|
452
520
|
>
|
|
453
521
|
<Row label="Full name" value="Amara Osei-Bonsu" />
|
|
454
522
|
<Row label="Date of birth" value="14 March 2009" note="Age 16" />
|
|
@@ -463,7 +531,12 @@ export default PupilDetailSection;
|
|
|
463
531
|
},
|
|
464
532
|
},
|
|
465
533
|
},
|
|
466
|
-
render: () => (_jsxs(Section, { title: "Personal Details", headingLevel: 2,
|
|
534
|
+
render: () => (_jsxs(Section, { title: "Personal Details", headingLevel: 2, headerButtonProps: {
|
|
535
|
+
children: 'Edit',
|
|
536
|
+
onClick: fn(),
|
|
537
|
+
variant: 'secondary',
|
|
538
|
+
size: 'S',
|
|
539
|
+
}, children: [_jsx(Row, { label: "Full name", value: "Amara Osei-Bonsu" }), _jsx(Row, { label: "Date of birth", value: "14 March 2009", note: "Age 16" }), _jsx(Row, { label: "Year group", value: "Year 10" }), _jsx(Row, { label: "Form", value: "10JH" }), _jsx(Row, { label: "UPN", value: "A823456789012" })] })),
|
|
467
540
|
}, 'The most common real-world usage — `Row` components inside a `Section`. Static and clickable rows can be freely mixed. The section heading can carry an action button for record-level operations like "Edit".');
|
|
468
541
|
export const NestedCollapsibleSections = withDescription({
|
|
469
542
|
parameters: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.stories.js","sourceRoot":"","sources":["../../../src/components/section/Section.stories.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Section.stories.js","sourceRoot":"","sources":["../../../src/components/section/Section.stories.tsx"],"names":[],"mappings":"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"}
|
|
@@ -21,7 +21,12 @@ describe('Section component', () => {
|
|
|
21
21
|
});
|
|
22
22
|
test('renders section with button', () => {
|
|
23
23
|
const mockButtonClick = vi.fn();
|
|
24
|
-
render(_jsx(Section, { title: "Test Section",
|
|
24
|
+
render(_jsx(Section, { title: "Test Section", headerButtonProps: {
|
|
25
|
+
children: 'Click Me',
|
|
26
|
+
onClick: mockButtonClick,
|
|
27
|
+
variant: 'primary',
|
|
28
|
+
size: 'M',
|
|
29
|
+
}, children: _jsx("p", { children: "Section content" }) }));
|
|
25
30
|
const button = screen.getByText('Click Me');
|
|
26
31
|
expect(button).toBeInTheDocument();
|
|
27
32
|
fireEvent.click(button);
|
|
@@ -123,7 +128,13 @@ describe('Section component', () => {
|
|
|
123
128
|
test('nested sections with different configurations', () => {
|
|
124
129
|
const parentButtonClick = vi.fn();
|
|
125
130
|
const childButtonClick = vi.fn();
|
|
126
|
-
render(_jsxs(Section, { title: "Parent Section", collapsible: true,
|
|
131
|
+
render(_jsxs(Section, { title: "Parent Section", collapsible: true, headerButtonProps: {
|
|
132
|
+
children: 'Parent Action',
|
|
133
|
+
onClick: parentButtonClick,
|
|
134
|
+
}, titleIconName: "info", children: [_jsx("p", { children: "Parent content" }), _jsx(Section, { title: "Child Section", headerButtonProps: {
|
|
135
|
+
children: 'Child Action',
|
|
136
|
+
onClick: childButtonClick,
|
|
137
|
+
}, titleIconName: "file", children: _jsx("p", { children: "Child content" }) })] }));
|
|
127
138
|
// Both buttons should be present and functional
|
|
128
139
|
const parentButton = screen.getByText('Parent Action');
|
|
129
140
|
const childButton = screen.getByText('Child Action');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Section.test.js","sourceRoot":"","sources":["../../../src/components/section/Section.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,OAAO,kCAAkC,CAAC;AAE1C,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;IACjC,IAAI,CAAC,qCAAqC,EAAE,GAAG,EAAE;QAC/C,MAAM,CACJ,KAAC,OAAO,cACN,0CAAsB,GACd,CACX,CAAC;QAEF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAClE,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4BAA4B,EAAE,GAAG,EAAE;QACtC,MAAM,CACJ,KAAC,OAAO,IAAC,KAAK,EAAC,cAAc,YAC3B,0CAAsB,GACd,CACX,CAAC;QAEF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,iCAAiC,EAAE,GAAG,EAAE;QAC3C,MAAM,CACJ,KAAC,OAAO,IAAC,KAAK,EAAC,cAAc,EAAC,aAAa,EAAC,MAAM,EAAC,yBAAyB,EAAC,WAAW,YACtF,0CAAsB,GACd,CACX,CAAC;QAEF,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC7D,6CAA6C;QAC7C,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QAC9C,MAAM,CAAC,OAAO,CAAC,CAAC,iBAAiB,EAAE,CAAC;IACtC,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,6BAA6B,EAAE,GAAG,EAAE;QACvC,MAAM,eAAe,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;QAEhC,MAAM,CACJ,KAAC,OAAO,IACN,KAAK,EAAC,cAAc,EACpB,
|
|
1
|
+
{"version":3,"file":"Section.test.js","sourceRoot":"","sources":["../../../src/components/section/Section.test.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -66,11 +66,11 @@ const DEVELOPER_NOTES = [
|
|
|
66
66
|
'',
|
|
67
67
|
'---',
|
|
68
68
|
'',
|
|
69
|
-
'###
|
|
69
|
+
'### Pass all button props via `headerButtonProps`',
|
|
70
70
|
'',
|
|
71
|
-
'The action button only renders when `
|
|
72
|
-
'
|
|
73
|
-
'
|
|
71
|
+
'The action button only renders when `headerButtonProps` is provided.',
|
|
72
|
+
'Pass a single `headerButtonProps` object containing at minimum `children` (button label) and `onClick`.',
|
|
73
|
+
'Always include `variant` and `size` to avoid relying on `Button` defaults, which may not look right in the heading context.',
|
|
74
74
|
'',
|
|
75
75
|
'---',
|
|
76
76
|
'',
|
|
@@ -213,41 +213,16 @@ const meta: Meta<typeof Section> = {
|
|
|
213
213
|
defaultValue: { summary: 'false' },
|
|
214
214
|
},
|
|
215
215
|
},
|
|
216
|
-
|
|
216
|
+
headerButtonProps: {
|
|
217
217
|
description: [
|
|
218
|
-
'
|
|
219
|
-
'
|
|
218
|
+
'Props forwarded directly to the `Button` component rendered in the section heading.',
|
|
219
|
+
'Omit this prop entirely to render no button.',
|
|
220
|
+
'When provided, always include `children` (button label), `onClick`, `variant`, and `size`',
|
|
221
|
+
"to avoid unexpected visual results from `Button` defaults. Use `size: 'S'` to keep it lightweight alongside the title.",
|
|
220
222
|
].join(' '),
|
|
221
|
-
control: 'text',
|
|
222
|
-
table: {
|
|
223
|
-
type: { summary: 'string' },
|
|
224
|
-
defaultValue: { summary: 'undefined' },
|
|
225
|
-
},
|
|
226
|
-
},
|
|
227
|
-
buttonOnClick: {
|
|
228
|
-
description: 'Click handler for the heading action button.',
|
|
229
|
-
action: 'buttonOnClick',
|
|
230
223
|
control: false,
|
|
231
224
|
table: {
|
|
232
|
-
type: { summary: '
|
|
233
|
-
defaultValue: { summary: 'undefined' },
|
|
234
|
-
},
|
|
235
|
-
},
|
|
236
|
-
buttonVariant: {
|
|
237
|
-
description: 'Visual variant for the heading action button. Always supply when `buttonText` is set.',
|
|
238
|
-
control: 'select',
|
|
239
|
-
options: ['primary', 'secondary', 'tertiary', 'primary-destructive', 'secondary-destructive', 'tertiary-destructive', 'ghost'],
|
|
240
|
-
table: {
|
|
241
|
-
type: { summary: "'primary' | 'secondary' | 'tertiary' | 'primary-destructive' | 'secondary-destructive' | 'tertiary-destructive' | 'ghost'" },
|
|
242
|
-
defaultValue: { summary: 'undefined' },
|
|
243
|
-
},
|
|
244
|
-
},
|
|
245
|
-
buttonSize: {
|
|
246
|
-
description: "Size of the heading action button. Always supply when `buttonText` is set. Use `'S'` to keep it visually lightweight alongside the title.",
|
|
247
|
-
control: 'select',
|
|
248
|
-
options: ['S', 'M', 'L'],
|
|
249
|
-
table: {
|
|
250
|
-
type: { summary: "'S' | 'M' | 'L'" },
|
|
225
|
+
type: { summary: 'ButtonProps' },
|
|
251
226
|
defaultValue: { summary: 'undefined' },
|
|
252
227
|
},
|
|
253
228
|
},
|
|
@@ -311,7 +286,7 @@ export const Default: Story = withDescription(
|
|
|
311
286
|
},
|
|
312
287
|
render: args => <Section {...args} />,
|
|
313
288
|
},
|
|
314
|
-
'The default story is wired to the Controls panel. Toggle `collapsible` to add expand/collapse behaviour, or
|
|
289
|
+
'The default story is wired to the Controls panel. Toggle `collapsible` to add expand/collapse behaviour, or pass `headerButtonProps` to surface an action in the heading.',
|
|
315
290
|
);
|
|
316
291
|
|
|
317
292
|
export const WithHeadingLevel: Story = withDescription(
|
|
@@ -441,10 +416,13 @@ function PersonalDetailsSection() {
|
|
|
441
416
|
<Section
|
|
442
417
|
title="Personal Details"
|
|
443
418
|
headingLevel={2}
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
419
|
+
headerButtonProps={{
|
|
420
|
+
children: 'Edit',
|
|
421
|
+
iconLeftName: 'pencil',
|
|
422
|
+
onClick: () => openEditModal(),
|
|
423
|
+
variant: 'secondary',
|
|
424
|
+
size: 'S',
|
|
425
|
+
}}
|
|
448
426
|
>
|
|
449
427
|
<p>Section content here.</p>
|
|
450
428
|
</Section>
|
|
@@ -459,26 +437,168 @@ export default PersonalDetailsSection;
|
|
|
459
437
|
<Section
|
|
460
438
|
title="Personal Details"
|
|
461
439
|
headingLevel={2}
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
440
|
+
headerButtonProps={{
|
|
441
|
+
children: 'Edit',
|
|
442
|
+
iconLeftName: 'pencil',
|
|
443
|
+
onClick: fn(),
|
|
444
|
+
variant: 'secondary',
|
|
445
|
+
size: 'S',
|
|
446
|
+
}}
|
|
466
447
|
>
|
|
467
448
|
<p>
|
|
468
|
-
The action button appears in the heading row.
|
|
469
|
-
<code>
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
<code>
|
|
476
|
-
|
|
449
|
+
The action button appears in the heading row. Use
|
|
450
|
+
<code>iconLeftName</code>
|
|
451
|
+
{' '}
|
|
452
|
+
or
|
|
453
|
+
<code>iconRightName</code>
|
|
454
|
+
{' '}
|
|
455
|
+
inside
|
|
456
|
+
<code>headerButtonProps</code>
|
|
457
|
+
{' '}
|
|
458
|
+
to add an icon alongside the label.
|
|
477
459
|
</p>
|
|
478
460
|
</Section>
|
|
479
461
|
),
|
|
480
462
|
},
|
|
481
|
-
'
|
|
463
|
+
'Pass `headerButtonProps` to render an action button in the section heading. Icons can be added via `iconLeftName` or `iconRightName`. Use `size: "S"` to keep it visually lightweight alongside the title.',
|
|
464
|
+
);
|
|
465
|
+
|
|
466
|
+
export const WithActionButtonVariants: Story = withDescription(
|
|
467
|
+
{
|
|
468
|
+
parameters: {
|
|
469
|
+
controls: { disable: true },
|
|
470
|
+
docs: {
|
|
471
|
+
source: {
|
|
472
|
+
language: 'tsx',
|
|
473
|
+
code: `
|
|
474
|
+
import { Section } from '@arbor-education/design-system.components';
|
|
475
|
+
|
|
476
|
+
// Icon on the left
|
|
477
|
+
<Section title="Documents" headingLevel={2}
|
|
478
|
+
headerButtonProps={{ children: 'Upload', iconLeftName: 'upload', onClick: () => {}, variant: 'secondary', size: 'S' }}>
|
|
479
|
+
<p>...</p>
|
|
480
|
+
</Section>
|
|
481
|
+
|
|
482
|
+
// Icon on the right
|
|
483
|
+
<Section title="External Link" headingLevel={2}
|
|
484
|
+
headerButtonProps={{ children: 'Open', iconRightName: 'external-link', onClick: () => {}, variant: 'tertiary', size: 'S' }}>
|
|
485
|
+
<p>...</p>
|
|
486
|
+
</Section>
|
|
487
|
+
|
|
488
|
+
// Icon-only (no children — button renders in icon-only mode)
|
|
489
|
+
<Section title="Attachments" headingLevel={2}
|
|
490
|
+
headerButtonProps={{ iconLeftName: 'plus', iconLeftScreenReaderText: 'Add attachment', onClick: () => {}, variant: 'secondary', size: 'S' }}>
|
|
491
|
+
<p>...</p>
|
|
492
|
+
</Section>
|
|
493
|
+
|
|
494
|
+
// Destructive
|
|
495
|
+
<Section title="Danger Zone" headingLevel={2}
|
|
496
|
+
headerButtonProps={{ children: 'Delete', iconLeftName: 'trash', onClick: () => {}, variant: 'primary-destructive', size: 'S' }}>
|
|
497
|
+
<p>...</p>
|
|
498
|
+
</Section>
|
|
499
|
+
|
|
500
|
+
// Disabled
|
|
501
|
+
<Section title="Locked Section" headingLevel={2}
|
|
502
|
+
headerButtonProps={{ children: 'Edit', iconLeftName: 'pencil', onClick: () => {}, variant: 'secondary', size: 'S', disabled: true }}>
|
|
503
|
+
<p>...</p>
|
|
504
|
+
</Section>
|
|
505
|
+
`.trim(),
|
|
506
|
+
},
|
|
507
|
+
},
|
|
508
|
+
},
|
|
509
|
+
render: () => (
|
|
510
|
+
<>
|
|
511
|
+
<Section
|
|
512
|
+
title="Documents"
|
|
513
|
+
headingLevel={2}
|
|
514
|
+
headerButtonProps={{
|
|
515
|
+
children: 'Upload',
|
|
516
|
+
iconLeftName: 'upload',
|
|
517
|
+
onClick: fn(),
|
|
518
|
+
variant: 'secondary',
|
|
519
|
+
size: 'S',
|
|
520
|
+
}}
|
|
521
|
+
>
|
|
522
|
+
<p>Left icon — icon precedes the label.</p>
|
|
523
|
+
</Section>
|
|
524
|
+
<Section
|
|
525
|
+
title="External Link"
|
|
526
|
+
headingLevel={2}
|
|
527
|
+
headerButtonProps={{
|
|
528
|
+
children: 'Open',
|
|
529
|
+
iconRightName: 'external-link',
|
|
530
|
+
onClick: fn(),
|
|
531
|
+
variant: 'tertiary',
|
|
532
|
+
size: 'S',
|
|
533
|
+
}}
|
|
534
|
+
>
|
|
535
|
+
<p>Right icon — icon follows the label.</p>
|
|
536
|
+
</Section>
|
|
537
|
+
<Section
|
|
538
|
+
title="Attachments"
|
|
539
|
+
headingLevel={2}
|
|
540
|
+
headerButtonProps={{
|
|
541
|
+
iconLeftName: 'plus',
|
|
542
|
+
iconLeftScreenReaderText: 'Add attachment',
|
|
543
|
+
onClick: fn(),
|
|
544
|
+
variant: 'secondary',
|
|
545
|
+
size: 'S',
|
|
546
|
+
}}
|
|
547
|
+
>
|
|
548
|
+
<p>
|
|
549
|
+
Icon-only — omit
|
|
550
|
+
<code>children</code>
|
|
551
|
+
{' '}
|
|
552
|
+
and the button renders in compact icon-only mode. Always supply
|
|
553
|
+
<code>iconLeftScreenReaderText</code>
|
|
554
|
+
{' '}
|
|
555
|
+
for accessibility.
|
|
556
|
+
</p>
|
|
557
|
+
</Section>
|
|
558
|
+
<Section
|
|
559
|
+
title="Danger Zone"
|
|
560
|
+
headingLevel={2}
|
|
561
|
+
headerButtonProps={{
|
|
562
|
+
children: 'Delete',
|
|
563
|
+
iconLeftName: 'trash',
|
|
564
|
+
onClick: fn(),
|
|
565
|
+
variant: 'primary-destructive',
|
|
566
|
+
size: 'S',
|
|
567
|
+
}}
|
|
568
|
+
>
|
|
569
|
+
<p>
|
|
570
|
+
Destructive variant — use
|
|
571
|
+
<code>primary-destructive</code>
|
|
572
|
+
{' '}
|
|
573
|
+
or
|
|
574
|
+
<code>secondary-destructive</code>
|
|
575
|
+
{' '}
|
|
576
|
+
for irreversible actions.
|
|
577
|
+
</p>
|
|
578
|
+
</Section>
|
|
579
|
+
<Section
|
|
580
|
+
title="Locked Section"
|
|
581
|
+
headingLevel={2}
|
|
582
|
+
headerButtonProps={{
|
|
583
|
+
children: 'Edit',
|
|
584
|
+
iconLeftName: 'pencil',
|
|
585
|
+
onClick: fn(),
|
|
586
|
+
variant: 'secondary',
|
|
587
|
+
size: 'S',
|
|
588
|
+
disabled: true,
|
|
589
|
+
}}
|
|
590
|
+
>
|
|
591
|
+
<p>
|
|
592
|
+
Disabled — pass
|
|
593
|
+
<code>disabled: true</code>
|
|
594
|
+
{' '}
|
|
595
|
+
to prevent interaction while keeping the button visible.
|
|
596
|
+
</p>
|
|
597
|
+
</Section>
|
|
598
|
+
</>
|
|
599
|
+
),
|
|
600
|
+
},
|
|
601
|
+
'All `ButtonProps` are forwarded through `headerButtonProps`. This story covers the main edge cases: left icon, right icon, icon-only, destructive variant, and disabled state.',
|
|
482
602
|
);
|
|
483
603
|
|
|
484
604
|
export const Collapsible: Story = withDescription(
|
|
@@ -586,10 +706,12 @@ function ContactSection() {
|
|
|
586
706
|
title="Contact Information"
|
|
587
707
|
headingLevel={2}
|
|
588
708
|
collapsible
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
709
|
+
headerButtonProps={{
|
|
710
|
+
children: 'Add contact',
|
|
711
|
+
onClick: () => openAddContactModal(),
|
|
712
|
+
variant: 'secondary',
|
|
713
|
+
size: 'S',
|
|
714
|
+
}}
|
|
593
715
|
>
|
|
594
716
|
<p>Contact details here.</p>
|
|
595
717
|
</Section>
|
|
@@ -605,10 +727,12 @@ export default ContactSection;
|
|
|
605
727
|
title="Contact Information"
|
|
606
728
|
headingLevel={2}
|
|
607
729
|
collapsible
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
730
|
+
headerButtonProps={{
|
|
731
|
+
children: 'Add contact',
|
|
732
|
+
onClick: fn(),
|
|
733
|
+
variant: 'secondary',
|
|
734
|
+
size: 'S',
|
|
735
|
+
}}
|
|
612
736
|
>
|
|
613
737
|
<p>
|
|
614
738
|
A section can be both collapsible
|
|
@@ -637,10 +761,12 @@ function PupilDetailSection() {
|
|
|
637
761
|
<Section
|
|
638
762
|
title="Personal Details"
|
|
639
763
|
headingLevel={2}
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
764
|
+
headerButtonProps={{
|
|
765
|
+
children: 'Edit',
|
|
766
|
+
onClick: () => openEditModal(),
|
|
767
|
+
variant: 'secondary',
|
|
768
|
+
size: 'S',
|
|
769
|
+
}}
|
|
644
770
|
>
|
|
645
771
|
<Row label="Full name" value="Amara Osei-Bonsu" />
|
|
646
772
|
<Row label="Date of birth" value="14 March 2009" note="Age 16" />
|
|
@@ -659,10 +785,12 @@ export default PupilDetailSection;
|
|
|
659
785
|
<Section
|
|
660
786
|
title="Personal Details"
|
|
661
787
|
headingLevel={2}
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
788
|
+
headerButtonProps={{
|
|
789
|
+
children: 'Edit',
|
|
790
|
+
onClick: fn(),
|
|
791
|
+
variant: 'secondary',
|
|
792
|
+
size: 'S',
|
|
793
|
+
}}
|
|
666
794
|
>
|
|
667
795
|
<Row label="Full name" value="Amara Osei-Bonsu" />
|
|
668
796
|
<Row label="Date of birth" value="14 March 2009" note="Age 16" />
|
|
@@ -43,10 +43,12 @@ describe('Section component', () => {
|
|
|
43
43
|
render(
|
|
44
44
|
<Section
|
|
45
45
|
title="Test Section"
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
46
|
+
headerButtonProps={{
|
|
47
|
+
children: 'Click Me',
|
|
48
|
+
onClick: mockButtonClick,
|
|
49
|
+
variant: 'primary',
|
|
50
|
+
size: 'M',
|
|
51
|
+
}}
|
|
50
52
|
>
|
|
51
53
|
<p>Section content</p>
|
|
52
54
|
</Section>,
|
|
@@ -239,15 +241,19 @@ describe('Section component', () => {
|
|
|
239
241
|
<Section
|
|
240
242
|
title="Parent Section"
|
|
241
243
|
collapsible
|
|
242
|
-
|
|
243
|
-
|
|
244
|
+
headerButtonProps={{
|
|
245
|
+
children: 'Parent Action',
|
|
246
|
+
onClick: parentButtonClick,
|
|
247
|
+
}}
|
|
244
248
|
titleIconName="info"
|
|
245
249
|
>
|
|
246
250
|
<p>Parent content</p>
|
|
247
251
|
<Section
|
|
248
252
|
title="Child Section"
|
|
249
|
-
|
|
250
|
-
|
|
253
|
+
headerButtonProps={{
|
|
254
|
+
children: 'Child Action',
|
|
255
|
+
onClick: childButtonClick,
|
|
256
|
+
}}
|
|
251
257
|
titleIconName="file"
|
|
252
258
|
>
|
|
253
259
|
<p>Child content</p>
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import classNames from 'classnames';
|
|
2
|
-
import { Button, type
|
|
2
|
+
import { Button, type ButtonProps } from 'Components/button/Button';
|
|
3
3
|
import { Heading, type HeadingLevel } from 'Components/heading/Heading';
|
|
4
4
|
import type { IconName } from 'Components/icon/allowedIcons';
|
|
5
5
|
import { Icon } from 'Components/icon/Icon';
|
|
6
|
-
import { useState, type HTMLAttributes
|
|
6
|
+
import { useState, type HTMLAttributes } from 'react';
|
|
7
7
|
import { ENTER_KEY, SPACE_KEY } from 'Utils/keyboardConstants';
|
|
8
8
|
|
|
9
9
|
type SectionProps = {
|
|
@@ -14,10 +14,7 @@ type SectionProps = {
|
|
|
14
14
|
titleIconScreenReaderText?: string;
|
|
15
15
|
collapsible?: boolean;
|
|
16
16
|
collapsed?: boolean;
|
|
17
|
-
|
|
18
|
-
buttonOnClick?: MouseEventHandler<HTMLButtonElement>;
|
|
19
|
-
buttonVariant?: ButtonVariant;
|
|
20
|
-
buttonSize?: ButtonSize;
|
|
17
|
+
headerButtonProps?: ButtonProps;
|
|
21
18
|
} & HTMLAttributes<HTMLElement>;
|
|
22
19
|
|
|
23
20
|
export const Section = (props: SectionProps) => {
|
|
@@ -31,10 +28,7 @@ export const Section = (props: SectionProps) => {
|
|
|
31
28
|
titleIconScreenReaderText,
|
|
32
29
|
collapsible = false,
|
|
33
30
|
collapsed: initialCollapsed = false,
|
|
34
|
-
|
|
35
|
-
buttonOnClick,
|
|
36
|
-
buttonVariant,
|
|
37
|
-
buttonSize,
|
|
31
|
+
headerButtonProps,
|
|
38
32
|
} = props;
|
|
39
33
|
|
|
40
34
|
const [collapsed, setCollapsed] = useState(initialCollapsed);
|
|
@@ -90,13 +84,11 @@ export const Section = (props: SectionProps) => {
|
|
|
90
84
|
)}
|
|
91
85
|
</Heading.InnerContainer>
|
|
92
86
|
<Heading.InnerContainer>
|
|
93
|
-
{
|
|
87
|
+
{headerButtonProps && (
|
|
94
88
|
<Button
|
|
95
|
-
|
|
96
|
-
variant={buttonVariant}
|
|
97
|
-
size={buttonSize}
|
|
89
|
+
{...headerButtonProps}
|
|
98
90
|
>
|
|
99
|
-
{
|
|
91
|
+
{headerButtonProps.children}
|
|
100
92
|
</Button>
|
|
101
93
|
)}
|
|
102
94
|
{collapsible && (
|