@arbor-education/design-system.components 4.2.0 → 4.4.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/.storybook/preview.ts +10 -0
- package/CHANGELOG.md +16 -0
- package/dist/components/slideover/Slideover.d.ts +7 -2
- package/dist/components/slideover/Slideover.d.ts.map +1 -1
- package/dist/components/slideover/Slideover.js +31 -4
- package/dist/components/slideover/Slideover.js.map +1 -1
- package/dist/components/slideover/Slideover.test.js +116 -2
- package/dist/components/slideover/Slideover.test.js.map +1 -1
- package/dist/components/slideoverManager/SlideoverManager.stories.d.ts +3 -0
- package/dist/components/slideoverManager/SlideoverManager.stories.d.ts.map +1 -1
- package/dist/components/slideoverManager/SlideoverManager.stories.js +74 -4
- package/dist/components/slideoverManager/SlideoverManager.stories.js.map +1 -1
- package/dist/components/widgetCalendar/WidgetCalendar.stories.d.ts +1 -0
- package/dist/components/widgetCalendar/WidgetCalendar.stories.d.ts.map +1 -1
- package/dist/components/widgetCalendar/WidgetCalendar.stories.js +77 -4
- package/dist/components/widgetCalendar/WidgetCalendar.stories.js.map +1 -1
- package/dist/components/widgetCalendar/WidgetCalendar.test.js +31 -0
- package/dist/components/widgetCalendar/WidgetCalendar.test.js.map +1 -1
- package/dist/components/widgetCalendar/WidgetCalendarItem.d.ts +1 -1
- package/dist/components/widgetCalendar/WidgetCalendarItem.d.ts.map +1 -1
- package/dist/components/widgetCalendar/WidgetCalendarItem.js +1 -3
- package/dist/components/widgetCalendar/WidgetCalendarItem.js.map +1 -1
- package/dist/index.css +36 -1
- package/dist/index.css.map +1 -1
- package/dist/utils/SlideoverUtils.d.ts +3 -1
- package/dist/utils/SlideoverUtils.d.ts.map +1 -1
- package/dist/utils/SlideoverUtils.js.map +1 -1
- package/package.json +1 -1
- package/src/components/slideover/Slideover.test.tsx +152 -2
- package/src/components/slideover/Slideover.tsx +56 -9
- package/src/components/slideover/slideover.scss +8 -1
- package/src/components/slideoverManager/SlideoverManager.stories.tsx +147 -3
- package/src/components/widgetCalendar/WidgetCalendar.stories.tsx +81 -4
- package/src/components/widgetCalendar/WidgetCalendar.test.tsx +48 -0
- package/src/components/widgetCalendar/WidgetCalendarItem.tsx +10 -4
- package/src/components/widgetCalendar/widgetCalendar.scss +24 -0
- package/src/docs/Contributing.mdx +2 -0
- package/src/tokens.scss +6 -0
- package/src/utils/SlideoverUtils.ts +4 -1
package/.storybook/preview.ts
CHANGED
|
@@ -39,7 +39,17 @@ const preview: Preview = {
|
|
|
39
39
|
// 'todo' - show a11y violations in the test UI only
|
|
40
40
|
// 'error' - fail CI on a11y violations
|
|
41
41
|
// 'off' - skip a11y checks entirely
|
|
42
|
+
// Deliberately 'todo' (warn) until a11y violations are fixed. Flip to 'error' in MIS-75900.
|
|
42
43
|
test: 'todo',
|
|
44
|
+
options: {
|
|
45
|
+
runOnly: {
|
|
46
|
+
type: 'tag',
|
|
47
|
+
values: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22a', 'wcag22aa'],
|
|
48
|
+
},
|
|
49
|
+
rules: {
|
|
50
|
+
'label-content-name-mismatch': { enabled: true },
|
|
51
|
+
},
|
|
52
|
+
},
|
|
43
53
|
},
|
|
44
54
|
docs: {
|
|
45
55
|
page: DocsTemplate,
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 4.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#285](https://github.com/arbor-education/design-system.components/pull/285) [`7f8a61d`](https://github.com/arbor-education/design-system.components/commit/7f8a61db6270c99b2dd18d2da1590fd55c3dff88) Thanks [@rickbairstow](https://github.com/rickbairstow)! - MIS-73686 ✨ Add Slideover back hook, header actions and close transition
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- [#286](https://github.com/arbor-education/design-system.components/pull/286) [`6269d2f`](https://github.com/arbor-education/design-system.components/commit/6269d2f6ba2ed584344ed65bde3bc663a914878f) Thanks [@rickbairstow](https://github.com/rickbairstow)! - MIS-75775 Configure Storybook axe-core accessibility checks to WCAG 2.2 A/AA and enable the label-content-name-mismatch rule. Checks run at warn level and do not fail the build.
|
|
12
|
+
|
|
13
|
+
## 4.3.0
|
|
14
|
+
|
|
15
|
+
### Minor Changes
|
|
16
|
+
|
|
17
|
+
- [#284](https://github.com/arbor-education/design-system.components/pull/284) [`d745bee`](https://github.com/arbor-education/design-system.components/commit/d745beea22de9c726abaf950c7cfee0b178ce2b7) Thanks [@angusmglfraser](https://github.com/angusmglfraser)! - MIS-74946 ✨ Add more colours for events in the WidgetCalendar component
|
|
18
|
+
|
|
3
19
|
## 4.2.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import type { IconName } from '../icon/allowedIcons.js';
|
|
2
|
-
import { type ReactNode } from 'react';
|
|
2
|
+
import { type HTMLAttributes, type ReactNode } from 'react';
|
|
3
3
|
export type SlideoverProps = {
|
|
4
4
|
title?: string;
|
|
5
5
|
children?: ReactNode;
|
|
6
6
|
footerContents?: ReactNode;
|
|
7
7
|
headerIcon?: IconName;
|
|
8
|
+
headerActions?: ReactNode;
|
|
8
9
|
centerHeaderText?: boolean;
|
|
9
10
|
hideBackButton?: boolean;
|
|
10
|
-
|
|
11
|
+
backButtonText?: string;
|
|
12
|
+
onBack?: () => void;
|
|
13
|
+
isClosing?: boolean;
|
|
14
|
+
onCloseTransitionEnd?: () => void;
|
|
15
|
+
} & Omit<HTMLAttributes<HTMLElement>, 'title' | 'children' | 'className' | 'onTransitionEnd'>;
|
|
11
16
|
export declare const Slideover: (props: SlideoverProps) => import("react").JSX.Element;
|
|
12
17
|
export declare namespace Slideover {
|
|
13
18
|
type Props = SlideoverProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slideover.d.ts","sourceRoot":"","sources":["../../../src/components/slideover/Slideover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,
|
|
1
|
+
{"version":3,"file":"Slideover.d.ts","sourceRoot":"","sources":["../../../src/components/slideover/Slideover.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D,OAAO,EAA+B,KAAK,cAAc,EAAE,KAAK,SAAS,EAAwB,MAAM,OAAO,CAAC;AAO/G,MAAM,MAAM,cAAc,GAAG;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,cAAc,CAAC,EAAE,SAAS,CAAC;IAC3B,UAAU,CAAC,EAAE,QAAQ,CAAC;IACtB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAC;CACnC,GAAG,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,iBAAiB,CAAC,CAAC;AAE9F,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,gCAkF9C,CAAC;AAEF,yBAAiB,SAAS,CAAC;IACzB,KAAY,KAAK,GAAG,cAAc,CAAC;CACpC"}
|
|
@@ -3,17 +3,44 @@ import classNames from 'classnames';
|
|
|
3
3
|
import { Button } from '../button/Button.js';
|
|
4
4
|
import { Heading } from '../heading/Heading.js';
|
|
5
5
|
import { Icon } from '../icon/Icon.js';
|
|
6
|
-
import { useState } from 'react';
|
|
6
|
+
import { useEffect, useRef, useState } from 'react';
|
|
7
7
|
import { useComponentDidMount } from '../../utils/hooks/useComponentDidMount.js';
|
|
8
8
|
import { SlideoverUtils } from '../../utils/SlideoverUtils.js';
|
|
9
|
+
// just over the 300ms transition in slideover.scss
|
|
10
|
+
const CLOSE_TRANSITION_FALLBACK_MS = 400;
|
|
9
11
|
export const Slideover = (props) => {
|
|
10
|
-
const { title, children, footerContents, headerIcon, centerHeaderText = true, hideBackButton, } = props;
|
|
12
|
+
const { title, children, footerContents, headerIcon, headerActions, centerHeaderText = true, hideBackButton, backButtonText = 'Back', onBack = SlideoverUtils.removeSlideover, isClosing = false, onCloseTransitionEnd, ...rest } = props;
|
|
11
13
|
const [isFirstRender, setIsFirstRender] = useState(true);
|
|
12
14
|
useComponentDidMount(() => {
|
|
13
15
|
setIsFirstRender(false);
|
|
14
16
|
});
|
|
15
|
-
|
|
17
|
+
const hasFinishedClosingRef = useRef(false);
|
|
18
|
+
const onCloseTransitionEndRef = useRef(onCloseTransitionEnd);
|
|
19
|
+
onCloseTransitionEndRef.current = onCloseTransitionEnd;
|
|
20
|
+
const finishClosing = () => {
|
|
21
|
+
if (hasFinishedClosingRef.current) {
|
|
22
|
+
return;
|
|
23
|
+
}
|
|
24
|
+
hasFinishedClosingRef.current = true;
|
|
25
|
+
onCloseTransitionEndRef.current?.();
|
|
26
|
+
};
|
|
27
|
+
// transitionend does not fire if the slide-out never runs, so also finish on a timer
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
if (!isClosing) {
|
|
30
|
+
hasFinishedClosingRef.current = false;
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
const timeout = setTimeout(finishClosing, CLOSE_TRANSITION_FALLBACK_MS);
|
|
34
|
+
return () => clearTimeout(timeout);
|
|
35
|
+
}, [isClosing]);
|
|
36
|
+
const handleTransitionEnd = (event) => {
|
|
37
|
+
if (isClosing && event.target === event.currentTarget && event.propertyName === 'right') {
|
|
38
|
+
finishClosing();
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
return (_jsxs("aside", { ...rest, className: classNames('ds-slideover', {
|
|
16
42
|
'ds-slideover--initial': isFirstRender,
|
|
17
|
-
|
|
43
|
+
'ds-slideover--closing': isClosing,
|
|
44
|
+
}), onTransitionEnd: handleTransitionEnd, children: [_jsxs("div", { className: classNames('ds-slideover__header', { 'ds-slideover__header--center': centerHeaderText }), children: [!hideBackButton && (_jsxs(Button, { variant: "tertiary", onClick: () => onBack(), children: [_jsx(Icon, { name: "chevrons-left" }), backButtonText] })), _jsxs(Heading, { level: 2, children: [title, headerIcon && _jsx(Icon, { name: headerIcon })] }), headerActions && _jsx("div", { className: "ds-slideover__header-actions", children: headerActions })] }), _jsx("div", { className: "ds-slideover__contents", children: children }), footerContents && _jsx("div", { className: "ds-slideover__footer", children: footerContents })] }));
|
|
18
45
|
};
|
|
19
46
|
//# sourceMappingURL=Slideover.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slideover.js","sourceRoot":"","sources":["../../../src/components/slideover/Slideover.tsx"],"names":[],"mappings":";AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AAErD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"Slideover.js","sourceRoot":"","sources":["../../../src/components/slideover/Slideover.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { expect, test, describe, vi } from 'vitest';
|
|
3
|
-
import { render, screen, fireEvent } from '@testing-library/react';
|
|
2
|
+
import { expect, test, describe, vi, beforeEach, afterEach } from 'vitest';
|
|
3
|
+
import { render, screen, fireEvent, createEvent, act } from '@testing-library/react';
|
|
4
4
|
import { Slideover } from './Slideover.js';
|
|
5
5
|
import '@testing-library/jest-dom/vitest';
|
|
6
6
|
import { SlideoverUtils } from '../../utils/SlideoverUtils.js';
|
|
@@ -9,7 +9,15 @@ vi.mock('Utils/SlideoverUtils', () => ({
|
|
|
9
9
|
removeSlideover: vi.fn(),
|
|
10
10
|
},
|
|
11
11
|
}));
|
|
12
|
+
const fireTransitionEnd = (element, propertyName) => {
|
|
13
|
+
const event = createEvent.transitionEnd(element);
|
|
14
|
+
Object.defineProperty(event, 'propertyName', { value: propertyName });
|
|
15
|
+
fireEvent(element, event);
|
|
16
|
+
};
|
|
12
17
|
describe('Slideover', () => {
|
|
18
|
+
beforeEach(() => {
|
|
19
|
+
vi.mocked(SlideoverUtils.removeSlideover).mockClear();
|
|
20
|
+
});
|
|
13
21
|
test('renders the title and children', () => {
|
|
14
22
|
render(_jsx(Slideover, { title: "My Test Slideover", children: _jsx("div", { children: "My Content" }) }));
|
|
15
23
|
expect(screen.getByText('My Test Slideover')).toBeInTheDocument();
|
|
@@ -29,5 +37,111 @@ describe('Slideover', () => {
|
|
|
29
37
|
fireEvent.click(backButton);
|
|
30
38
|
expect(SlideoverUtils.removeSlideover).toHaveBeenCalled();
|
|
31
39
|
});
|
|
40
|
+
describe('onBack', () => {
|
|
41
|
+
test('calls onBack instead of removeSlideover when provided', () => {
|
|
42
|
+
const onBack = vi.fn();
|
|
43
|
+
render(_jsx(Slideover, { onBack: onBack }));
|
|
44
|
+
fireEvent.click(screen.getByRole('button', { name: /Back/i }));
|
|
45
|
+
expect(onBack).toHaveBeenCalledTimes(1);
|
|
46
|
+
expect(SlideoverUtils.removeSlideover).not.toHaveBeenCalled();
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
describe('backButtonText', () => {
|
|
50
|
+
test('labels the back button with backButtonText', () => {
|
|
51
|
+
render(_jsx(Slideover, { backButtonText: "Yn \u00F4l" }));
|
|
52
|
+
expect(screen.getByRole('button', { name: 'Yn ôl' })).toBeInTheDocument();
|
|
53
|
+
expect(screen.queryByRole('button', { name: 'Back' })).not.toBeInTheDocument();
|
|
54
|
+
});
|
|
55
|
+
test('defaults the label to Back', () => {
|
|
56
|
+
render(_jsx(Slideover, {}));
|
|
57
|
+
expect(screen.getByRole('button', { name: 'Back' })).toBeInTheDocument();
|
|
58
|
+
});
|
|
59
|
+
});
|
|
60
|
+
describe('headerActions', () => {
|
|
61
|
+
test('renders header actions in the header', () => {
|
|
62
|
+
render(_jsx(Slideover, { title: "Student", headerActions: _jsx("button", { type: "button", children: "Edit" }) }));
|
|
63
|
+
const header = screen.getByRole('heading', { name: 'Student' }).parentElement;
|
|
64
|
+
expect(header).toContainElement(screen.getByRole('button', { name: 'Edit' }));
|
|
65
|
+
});
|
|
66
|
+
test('renders no header actions container when headerActions is not provided', () => {
|
|
67
|
+
const { container } = render(_jsx(Slideover, {}));
|
|
68
|
+
expect(container.querySelector('.ds-slideover__header-actions')).not.toBeInTheDocument();
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
describe('closing', () => {
|
|
72
|
+
test('is not marked as closing by default', () => {
|
|
73
|
+
const { container } = render(_jsx(Slideover, {}));
|
|
74
|
+
expect(container.querySelector('.ds-slideover')).not.toHaveClass('ds-slideover--closing');
|
|
75
|
+
});
|
|
76
|
+
test('is marked as closing when isClosing is set', () => {
|
|
77
|
+
const { container } = render(_jsx(Slideover, { isClosing: true }));
|
|
78
|
+
expect(container.querySelector('.ds-slideover')).toHaveClass('ds-slideover--closing');
|
|
79
|
+
});
|
|
80
|
+
test('calls onCloseTransitionEnd when the closing slide-out finishes', () => {
|
|
81
|
+
const onCloseTransitionEnd = vi.fn();
|
|
82
|
+
const { container } = render(_jsx(Slideover, { isClosing: true, onCloseTransitionEnd: onCloseTransitionEnd }));
|
|
83
|
+
fireTransitionEnd(container.querySelector('.ds-slideover'), 'right');
|
|
84
|
+
expect(onCloseTransitionEnd).toHaveBeenCalledTimes(1);
|
|
85
|
+
});
|
|
86
|
+
test('does not call onCloseTransitionEnd when the enter slide-in finishes', () => {
|
|
87
|
+
const onCloseTransitionEnd = vi.fn();
|
|
88
|
+
const { container } = render(_jsx(Slideover, { onCloseTransitionEnd: onCloseTransitionEnd }));
|
|
89
|
+
fireTransitionEnd(container.querySelector('.ds-slideover'), 'right');
|
|
90
|
+
expect(onCloseTransitionEnd).not.toHaveBeenCalled();
|
|
91
|
+
});
|
|
92
|
+
describe('when the slide-out transition never runs', () => {
|
|
93
|
+
beforeEach(() => {
|
|
94
|
+
vi.useFakeTimers();
|
|
95
|
+
});
|
|
96
|
+
afterEach(() => {
|
|
97
|
+
vi.useRealTimers();
|
|
98
|
+
});
|
|
99
|
+
test('still calls onCloseTransitionEnd once the transition time has passed', () => {
|
|
100
|
+
const onCloseTransitionEnd = vi.fn();
|
|
101
|
+
render(_jsx(Slideover, { isClosing: true, onCloseTransitionEnd: onCloseTransitionEnd }));
|
|
102
|
+
act(() => {
|
|
103
|
+
vi.advanceTimersByTime(299);
|
|
104
|
+
});
|
|
105
|
+
expect(onCloseTransitionEnd).not.toHaveBeenCalled();
|
|
106
|
+
act(() => {
|
|
107
|
+
vi.advanceTimersByTime(200);
|
|
108
|
+
});
|
|
109
|
+
expect(onCloseTransitionEnd).toHaveBeenCalledTimes(1);
|
|
110
|
+
});
|
|
111
|
+
test('calls onCloseTransitionEnd once when the transition does finish', () => {
|
|
112
|
+
const onCloseTransitionEnd = vi.fn();
|
|
113
|
+
const { container } = render(_jsx(Slideover, { isClosing: true, onCloseTransitionEnd: onCloseTransitionEnd }));
|
|
114
|
+
fireTransitionEnd(container.querySelector('.ds-slideover'), 'right');
|
|
115
|
+
act(() => {
|
|
116
|
+
vi.advanceTimersByTime(1000);
|
|
117
|
+
});
|
|
118
|
+
expect(onCloseTransitionEnd).toHaveBeenCalledTimes(1);
|
|
119
|
+
});
|
|
120
|
+
test('does not call onCloseTransitionEnd if closing is cancelled first', () => {
|
|
121
|
+
const onCloseTransitionEnd = vi.fn();
|
|
122
|
+
const { rerender } = render(_jsx(Slideover, { isClosing: true, onCloseTransitionEnd: onCloseTransitionEnd }));
|
|
123
|
+
rerender(_jsx(Slideover, { onCloseTransitionEnd: onCloseTransitionEnd }));
|
|
124
|
+
act(() => {
|
|
125
|
+
vi.advanceTimersByTime(1000);
|
|
126
|
+
});
|
|
127
|
+
expect(onCloseTransitionEnd).not.toHaveBeenCalled();
|
|
128
|
+
});
|
|
129
|
+
});
|
|
130
|
+
test('ignores transitions of other properties and of child elements', () => {
|
|
131
|
+
const onCloseTransitionEnd = vi.fn();
|
|
132
|
+
const { container } = render(_jsx(Slideover, { isClosing: true, onCloseTransitionEnd: onCloseTransitionEnd, children: _jsx("div", { "data-testid": "child" }) }));
|
|
133
|
+
fireTransitionEnd(container.querySelector('.ds-slideover'), 'opacity');
|
|
134
|
+
fireTransitionEnd(screen.getByTestId('child'), 'right');
|
|
135
|
+
expect(onCloseTransitionEnd).not.toHaveBeenCalled();
|
|
136
|
+
});
|
|
137
|
+
});
|
|
138
|
+
describe('accessibility attributes', () => {
|
|
139
|
+
test('forwards role and aria attributes to the panel', () => {
|
|
140
|
+
render(_jsx(Slideover, { title: "Student", role: "dialog", "aria-label": "Student details", "aria-modal": true }));
|
|
141
|
+
const panel = screen.getByRole('dialog', { name: 'Student details' });
|
|
142
|
+
expect(panel).toHaveAttribute('aria-modal', 'true');
|
|
143
|
+
expect(panel).toHaveClass('ds-slideover');
|
|
144
|
+
});
|
|
145
|
+
});
|
|
32
146
|
});
|
|
33
147
|
//# sourceMappingURL=Slideover.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Slideover.test.js","sourceRoot":"","sources":["../../../src/components/slideover/Slideover.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;
|
|
1
|
+
{"version":3,"file":"Slideover.test.js","sourceRoot":"","sources":["../../../src/components/slideover/Slideover.test.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAC3E,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,EAAE,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,kCAAkC,CAAC;AAC1C,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAEtD,EAAE,CAAC,IAAI,CAAC,sBAAsB,EAAE,GAAG,EAAE,CAAC,CAAC;IACrC,cAAc,EAAE;QACd,eAAe,EAAE,EAAE,CAAC,EAAE,EAAE;KACzB;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,iBAAiB,GAAG,CAAC,OAAgB,EAAE,YAAoB,EAAE,EAAE;IACnE,MAAM,KAAK,GAAG,WAAW,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACjD,MAAM,CAAC,cAAc,CAAC,KAAK,EAAE,cAAc,EAAE,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,CAAC;IACtE,SAAS,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC5B,CAAC,CAAC;AAEF,QAAQ,CAAC,WAAW,EAAE,GAAG,EAAE;IACzB,UAAU,CAAC,GAAG,EAAE;QACd,EAAE,CAAC,MAAM,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,SAAS,EAAE,CAAC;IACxD,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,gCAAgC,EAAE,GAAG,EAAE;QAC1C,MAAM,CAAC,KAAC,SAAS,IAAC,KAAK,EAAC,mBAAmB,YAAC,uCAAqB,GAAY,CAAC,CAAC;QAC/E,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAClE,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC7D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uCAAuC,EAAE,GAAG,EAAE;QACjD,MAAM,CAAC,KAAC,SAAS,IAAC,cAAc,EAAE,yCAAuB,GAAI,CAAC,CAAC;QAC/D,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;IAC/D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,4DAA4D,EAAE,GAAG,EAAE;QACtE,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC;QAC5C,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,uBAAuB,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;IACnF,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,uDAAuD,EAAE,GAAG,EAAE;QACjE,MAAM,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC;QACtB,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC;QACjE,SAAS,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QAC5B,MAAM,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;QACtB,IAAI,CAAC,uDAAuD,EAAE,GAAG,EAAE;YACjE,MAAM,MAAM,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;YACvB,MAAM,CAAC,KAAC,SAAS,IAAC,MAAM,EAAE,MAAM,GAAI,CAAC,CAAC;YAEtC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;YAE/D,MAAM,CAAC,MAAM,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;YACxC,MAAM,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;QAChE,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,gBAAgB,EAAE,GAAG,EAAE;QAC9B,IAAI,CAAC,4CAA4C,EAAE,GAAG,EAAE;YACtD,MAAM,CAAC,KAAC,SAAS,IAAC,cAAc,EAAC,YAAO,GAAG,CAAC,CAAC;YAC7C,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;YAC1E,MAAM,CAAC,MAAM,CAAC,WAAW,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QACjF,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,4BAA4B,EAAE,GAAG,EAAE;YACtC,MAAM,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC;YACtB,MAAM,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,iBAAiB,EAAE,CAAC;QAC3E,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,eAAe,EAAE,GAAG,EAAE;QAC7B,IAAI,CAAC,sCAAsC,EAAE,GAAG,EAAE;YAChD,MAAM,CAAC,KAAC,SAAS,IAAC,KAAK,EAAC,SAAS,EAAC,aAAa,EAAE,iBAAQ,IAAI,EAAC,QAAQ,qBAAc,GAAI,CAAC,CAAC;YAC1F,MAAM,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,CAAC,aAAa,CAAC;YAC9E,MAAM,CAAC,MAAM,CAAC,CAAC,gBAAgB,CAAC,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC;QAChF,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,wEAAwE,EAAE,GAAG,EAAE;YAClF,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC;YAC5C,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,+BAA+B,CAAC,CAAC,CAAC,GAAG,CAAC,iBAAiB,EAAE,CAAC;QAC3F,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;QACvB,IAAI,CAAC,qCAAqC,EAAE,GAAG,EAAE;YAC/C,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC;YAC5C,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;QAC5F,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,4CAA4C,EAAE,GAAG,EAAE;YACtD,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,IAAC,SAAS,SAAG,CAAC,CAAC;YACtD,MAAM,CAAC,SAAS,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC,CAAC,WAAW,CAAC,uBAAuB,CAAC,CAAC;QACxF,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,gEAAgE,EAAE,GAAG,EAAE;YAC1E,MAAM,oBAAoB,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;YACrC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,IAAC,SAAS,QAAC,oBAAoB,EAAE,oBAAoB,GAAI,CAAC,CAAC;YAElG,iBAAiB,CAAC,SAAS,CAAC,aAAa,CAAC,eAAe,CAAE,EAAE,OAAO,CAAC,CAAC;YAEtE,MAAM,CAAC,oBAAoB,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,qEAAqE,EAAE,GAAG,EAAE;YAC/E,MAAM,oBAAoB,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;YACrC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,IAAC,oBAAoB,EAAE,oBAAoB,GAAI,CAAC,CAAC;YAExF,iBAAiB,CAAC,SAAS,CAAC,aAAa,CAAC,eAAe,CAAE,EAAE,OAAO,CAAC,CAAC;YAEtE,MAAM,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;QACtD,CAAC,CAAC,CAAC;QAEH,QAAQ,CAAC,0CAA0C,EAAE,GAAG,EAAE;YACxD,UAAU,CAAC,GAAG,EAAE;gBACd,EAAE,CAAC,aAAa,EAAE,CAAC;YACrB,CAAC,CAAC,CAAC;YAEH,SAAS,CAAC,GAAG,EAAE;gBACb,EAAE,CAAC,aAAa,EAAE,CAAC;YACrB,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,sEAAsE,EAAE,GAAG,EAAE;gBAChF,MAAM,oBAAoB,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;gBACrC,MAAM,CAAC,KAAC,SAAS,IAAC,SAAS,QAAC,oBAAoB,EAAE,oBAAoB,GAAI,CAAC,CAAC;gBAE5E,GAAG,CAAC,GAAG,EAAE;oBACP,EAAE,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;gBAC9B,CAAC,CAAC,CAAC;gBACH,MAAM,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;gBAEpD,GAAG,CAAC,GAAG,EAAE;oBACP,EAAE,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;gBAC9B,CAAC,CAAC,CAAC;gBACH,MAAM,CAAC,oBAAoB,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;YACxD,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,iEAAiE,EAAE,GAAG,EAAE;gBAC3E,MAAM,oBAAoB,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;gBACrC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,IAAC,SAAS,QAAC,oBAAoB,EAAE,oBAAoB,GAAI,CAAC,CAAC;gBAElG,iBAAiB,CAAC,SAAS,CAAC,aAAa,CAAC,eAAe,CAAE,EAAE,OAAO,CAAC,CAAC;gBACtE,GAAG,CAAC,GAAG,EAAE;oBACP,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;gBAC/B,CAAC,CAAC,CAAC;gBAEH,MAAM,CAAC,oBAAoB,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;YACxD,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,kEAAkE,EAAE,GAAG,EAAE;gBAC5E,MAAM,oBAAoB,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;gBACrC,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC,KAAC,SAAS,IAAC,SAAS,QAAC,oBAAoB,EAAE,oBAAoB,GAAI,CAAC,CAAC;gBAEjG,QAAQ,CAAC,KAAC,SAAS,IAAC,oBAAoB,EAAE,oBAAoB,GAAI,CAAC,CAAC;gBACpE,GAAG,CAAC,GAAG,EAAE;oBACP,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;gBAC/B,CAAC,CAAC,CAAC;gBAEH,MAAM,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;YACtD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,+DAA+D,EAAE,GAAG,EAAE;YACzE,MAAM,oBAAoB,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC;YACrC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAC1B,KAAC,SAAS,IAAC,SAAS,QAAC,oBAAoB,EAAE,oBAAoB,YAC7D,6BAAiB,OAAO,GAAG,GACjB,CACb,CAAC;YAEF,iBAAiB,CAAC,SAAS,CAAC,aAAa,CAAC,eAAe,CAAE,EAAE,SAAS,CAAC,CAAC;YACxE,iBAAiB,CAAC,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;YAExD,MAAM,CAAC,oBAAoB,CAAC,CAAC,GAAG,CAAC,gBAAgB,EAAE,CAAC;QACtD,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,QAAQ,CAAC,0BAA0B,EAAE,GAAG,EAAE;QACxC,IAAI,CAAC,gDAAgD,EAAE,GAAG,EAAE;YAC1D,MAAM,CAAC,KAAC,SAAS,IAAC,KAAK,EAAC,SAAS,EAAC,IAAI,EAAC,QAAQ,gBAAY,iBAAiB,uBAAc,CAAC,CAAC;YAC5F,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,iBAAiB,EAAE,CAAC,CAAC;YACtE,MAAM,CAAC,KAAK,CAAC,CAAC,eAAe,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC;YACpD,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
|
|
@@ -33,4 +33,7 @@ export declare const Default: Story;
|
|
|
33
33
|
export declare const WithFooterActions: Story;
|
|
34
34
|
export declare const StackedSlideovers: Story;
|
|
35
35
|
export declare const HideBackButton: Story;
|
|
36
|
+
export declare const ConfirmOnBack: Story;
|
|
37
|
+
export declare const HeaderActions: Story;
|
|
38
|
+
export declare const ClosingTransition: Story;
|
|
36
39
|
//# sourceMappingURL=SlideoverManager.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideoverManager.stories.d.ts","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"SlideoverManager.stories.d.ts","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AA+J5D,iBAAS,wBAAwB,gCAgBhC;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;CAoB+B,CAAC;AAE1C,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAsSnC,eAAO,MAAM,OAAO,EAAE,KA4CrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAqD/B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KA4D/B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAkD5B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAU/B,CAAC"}
|
|
@@ -5,6 +5,10 @@ import { SlideoverUtils } from '../../utils/SlideoverUtils.js';
|
|
|
5
5
|
import { Button } from '../button/Button.js';
|
|
6
6
|
import { FormField } from '../formField/FormField.js';
|
|
7
7
|
import { Section } from '../section/Section.js';
|
|
8
|
+
import { Slideover } from '../slideover/Slideover.js';
|
|
9
|
+
import { Icon } from '../icon/Icon.js';
|
|
10
|
+
import { useState } from 'react';
|
|
11
|
+
import { fn } from 'storybook/test';
|
|
8
12
|
// ---------------------------------------------------------------------------
|
|
9
13
|
// Docs page content
|
|
10
14
|
// ---------------------------------------------------------------------------
|
|
@@ -40,8 +44,15 @@ const USAGE_GUIDANCE = [
|
|
|
40
44
|
'| `children` | `ReactNode` | — | Main scrollable content |',
|
|
41
45
|
'| `footerContents` | `ReactNode` | — | Sticky footer — use for primary actions (Save / Cancel) |',
|
|
42
46
|
'| `headerIcon` | `IconName` | — | Icon rendered next to the title |',
|
|
47
|
+
'| `headerActions` | `ReactNode` | — | Actions rendered at the end of the header, e.g. an Edit button |',
|
|
43
48
|
'| `centerHeaderText` | `boolean` | `true` | Whether the header text is centred |',
|
|
44
49
|
'| `hideBackButton` | `boolean` | — | Hides the Back chevron button in the header |',
|
|
50
|
+
'| `backButtonText` | `string` | `\'Back\'` | Label for the Back button — pass a translated string |',
|
|
51
|
+
'| `onBack` | `() => void` | `SlideoverUtils.removeSlideover` | Replaces what the Back button does, e.g. to confirm unsaved changes before closing |',
|
|
52
|
+
'| `isClosing` | `boolean` | `false` | Plays the slide-out transition. Keep the panel mounted until `onCloseTransitionEnd` fires |',
|
|
53
|
+
'| `onCloseTransitionEnd` | `() => void` | — | Called once the slide-out transition started by `isClosing` has finished |',
|
|
54
|
+
'',
|
|
55
|
+
'Any other HTML attribute (`role`, `aria-label`, `aria-modal`, `id`, …) is forwarded to the panel\'s `<aside>` element.',
|
|
45
56
|
'',
|
|
46
57
|
'---',
|
|
47
58
|
'',
|
|
@@ -108,9 +119,21 @@ const DEVELOPER_NOTES = [
|
|
|
108
119
|
'',
|
|
109
120
|
'### Accessibility',
|
|
110
121
|
'',
|
|
111
|
-
'- The overlay dims the background
|
|
112
|
-
'- The
|
|
113
|
-
'-
|
|
122
|
+
'- The overlay dims the background. It does **not** trap focus, move focus into the panel on open, or close on Escape — consumers that need modal behaviour must provide it.',
|
|
123
|
+
'- The panel renders as an `<aside>`. Pass `role="dialog"`, `aria-modal` and an `aria-label` when the slideover is used as a dialog.',
|
|
124
|
+
'- The Back button is keyboard accessible and labelled. Pass `backButtonText` to translate it.',
|
|
125
|
+
'- Ensure the `title` prop is always set — it is the visible heading for the panel.',
|
|
126
|
+
].join('\n');
|
|
127
|
+
const CUSTOM_BEHAVIOUR_NOTES = [
|
|
128
|
+
'### Intercepting Back',
|
|
129
|
+
'',
|
|
130
|
+
'By default the Back button pops the top panel. Pass `onBack` to run your own logic first — for example, asking the user to confirm before unsaved changes are lost — and call `SlideoverUtils.removeSlideover()` yourself when it is safe to close.',
|
|
131
|
+
'',
|
|
132
|
+
'### Animating a panel out',
|
|
133
|
+
'',
|
|
134
|
+
'Panels slide in on mount. To slide one out, set `isClosing` and remove it from your stack in `onCloseTransitionEnd`. This is for consumers rendering `Slideover` from their own stack; `SlideoverUtils.addSlideover` does not accept these props, because `SlideoverManager` cannot update a panel once it is added.',
|
|
135
|
+
'',
|
|
136
|
+
'`onCloseTransitionEnd` fires when the slide-out finishes, or after a short fallback delay if no transition runs (for example when the panel is hidden or motion is reduced), so a closing panel is never left mounted.',
|
|
114
137
|
].join('\n');
|
|
115
138
|
const RELATED_COMPONENTS = [
|
|
116
139
|
'## Related components',
|
|
@@ -121,7 +144,7 @@ const RELATED_COMPONENTS = [
|
|
|
121
144
|
// Docs page
|
|
122
145
|
// ---------------------------------------------------------------------------
|
|
123
146
|
function SlideoverManagerDocsPage() {
|
|
124
|
-
return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
|
|
147
|
+
return (_jsxs(_Fragment, { children: [_jsx(Title, {}), _jsx(Subtitle, {}), _jsx(Markdown, { children: DESCRIPTION_INTRO }), _jsx(DocHeading, { children: "Usage guidance" }), _jsx(Markdown, { children: USAGE_GUIDANCE }), _jsx(DocHeading, { children: "Developer notes" }), _jsx(Markdown, { children: DEVELOPER_NOTES }), _jsx(Markdown, { children: CUSTOM_BEHAVIOUR_NOTES }), _jsx(DocHeading, { children: "Examples" }), _jsx(Stories, { title: "" }), _jsx(Markdown, { children: RELATED_COMPONENTS })] }));
|
|
125
148
|
}
|
|
126
149
|
// ---------------------------------------------------------------------------
|
|
127
150
|
// Meta
|
|
@@ -193,6 +216,29 @@ const HideBackButtonTemplate = () => (_jsxs(PageBackground, { children: [_jsx(Sl
|
|
|
193
216
|
children: (_jsxs("p", { children: ["Are you sure you want to remove", ' ', _jsx("strong", { children: "Alex Johnson" }), ' ', "from Year 5? This cannot be undone."] })),
|
|
194
217
|
footerContents: (_jsxs("div", { style: { display: 'flex', gap: 'var(--spacing-small)', justifyContent: 'flex-end' }, children: [_jsx(Button, { variant: "secondary", onClick: SlideoverUtils.removeSlideover, children: "Cancel" }), _jsx(Button, { variant: "primary-destructive", onClick: SlideoverUtils.removeSlideover, children: "Remove pupil" })] })),
|
|
195
218
|
}), children: "Remove pupil" })] }));
|
|
219
|
+
const ConfirmOnBackTemplate = () => (_jsxs(PageBackground, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsx(Button, { onClick: () => SlideoverUtils.addSlideover({
|
|
220
|
+
title: 'Edit Pupil Details',
|
|
221
|
+
onBack: () => {
|
|
222
|
+
if (window.confirm('You have unsaved changes. Leave without saving?')) {
|
|
223
|
+
SlideoverUtils.removeSlideover();
|
|
224
|
+
}
|
|
225
|
+
},
|
|
226
|
+
children: (_jsx(FormField, { id: "pupil-name-confirm", label: "Full name", inputType: "text", inputProps: { defaultValue: 'Alex Johnson' } })),
|
|
227
|
+
}), children: "Edit pupil details" })] }));
|
|
228
|
+
const handleEditClick = fn().mockName('headerActions Edit onClick');
|
|
229
|
+
const HeaderActionsTemplate = () => (_jsxs(PageBackground, { children: [_jsx(SlideoverManager, { slideovers: [] }), _jsx(Button, { onClick: () => SlideoverUtils.addSlideover({
|
|
230
|
+
title: 'Pupil: Alex Johnson',
|
|
231
|
+
headerActions: (_jsxs(Button, { variant: "secondary", size: "S", onClick: handleEditClick, children: [_jsx(Icon, { name: "pencil" }), "Edit"] })),
|
|
232
|
+
children: _jsx("p", { children: "Year 5 \u00B7 Registration group 5B" }),
|
|
233
|
+
}), children: "View pupil record" })] }));
|
|
234
|
+
const ClosingTransitionTemplate = () => {
|
|
235
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
236
|
+
const [isClosing, setIsClosing] = useState(false);
|
|
237
|
+
return (_jsxs(PageBackground, { children: [_jsx(Button, { onClick: () => {
|
|
238
|
+
setIsClosing(false);
|
|
239
|
+
setIsOpen(true);
|
|
240
|
+
}, children: "Open slideover" }), isOpen && (_jsx("div", { className: "ds-slideover-manager ds-slideover-manager--active", children: _jsx(Slideover, { title: "Pupil Record", onBack: () => setIsClosing(true), isClosing: isClosing, onCloseTransitionEnd: () => setIsOpen(false), role: "dialog", "aria-modal": true, "aria-label": "Pupil Record", children: _jsx("p", { children: "Press Back to watch the panel slide out before it is removed." }) }) }))] }));
|
|
241
|
+
};
|
|
196
242
|
// ---------------------------------------------------------------------------
|
|
197
243
|
// Stories
|
|
198
244
|
// ---------------------------------------------------------------------------
|
|
@@ -395,4 +441,28 @@ export default RemovePupilButton;
|
|
|
395
441
|
'Set `hideBackButton={true}` when the panel represents an action the user must explicitly confirm or cancel.',
|
|
396
442
|
'Without a Back button, the user must interact with the footer actions — reducing accidental dismissal.',
|
|
397
443
|
].join(' '));
|
|
444
|
+
export const ConfirmOnBack = withDescription({
|
|
445
|
+
render: ConfirmOnBackTemplate,
|
|
446
|
+
parameters: { controls: { disable: true } },
|
|
447
|
+
}, [
|
|
448
|
+
'Pass `onBack` to replace what the Back button does.',
|
|
449
|
+
'Here it asks for confirmation before closing, the pattern for protecting unsaved changes.',
|
|
450
|
+
'Call `SlideoverUtils.removeSlideover()` yourself once it is safe to close.',
|
|
451
|
+
].join(' '));
|
|
452
|
+
export const HeaderActions = withDescription({
|
|
453
|
+
render: HeaderActionsTemplate,
|
|
454
|
+
parameters: { controls: { disable: true } },
|
|
455
|
+
}, [
|
|
456
|
+
'Use `headerActions` to place actions such as Edit at the end of the header.',
|
|
457
|
+
'Clicking Edit here logs to the Actions panel.',
|
|
458
|
+
'Pass `backButtonText` to replace the Back label, for example with a translated string.',
|
|
459
|
+
].join(' '));
|
|
460
|
+
export const ClosingTransition = withDescription({
|
|
461
|
+
render: ClosingTransitionTemplate,
|
|
462
|
+
parameters: { controls: { disable: true } },
|
|
463
|
+
}, [
|
|
464
|
+
'Set `isClosing` to slide a panel out, and unmount it in `onCloseTransitionEnd`.',
|
|
465
|
+
'This example renders `Slideover` from its own state rather than through `SlideoverManager`,',
|
|
466
|
+
'and forwards `role`, `aria-modal` and `aria-label` to use the panel as a dialog.',
|
|
467
|
+
].join(' '));
|
|
398
468
|
//# sourceMappingURL=SlideoverManager.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SlideoverManager.stories.js","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.stories.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SlideoverManager.stories.js","sourceRoot":"","sources":["../../../src/components/slideoverManager/SlideoverManager.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,KAAK,GACN,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,gCAAgC,CAAC;AAC3D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAEpC,8EAA8E;AAC9E,oBAAoB;AACpB,8EAA8E;AAE9E,MAAM,iBAAiB,GAAG;IACxB,iFAAiF;IACjF,yHAAyH;IACzH,2FAA2F;CAC5F,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAEZ,MAAM,cAAc,GAAG;IACrB,iBAAiB;IACjB,EAAE;IACF,yEAAyE;IACzE,wFAAwF;IACxF,sFAAsF;IACtF,EAAE;IACF,KAAK;IACL,EAAE;IACF,qBAAqB;IACrB,EAAE;IACF,6BAA6B;IAC7B,WAAW;IACX,mJAAmJ;IACnJ,oEAAoE;IACpE,uFAAuF;IACvF,EAAE;IACF,KAAK;IACL,EAAE;IACF,oDAAoD;IACpD,EAAE;IACF,yCAAyC;IACzC,mBAAmB;IACnB,gDAAgD;IAChD,4DAA4D;IAC5D,kGAAkG;IAClG,qEAAqE;IACrE,wGAAwG;IACxG,kFAAkF;IAClF,oFAAoF;IACpF,qGAAqG;IACrG,qJAAqJ;IACrJ,mIAAmI;IACnI,0HAA0H;IAC1H,EAAE;IACF,wHAAwH;IACxH,EAAE;IACF,KAAK;IACL,EAAE;IACF,8BAA8B;IAC9B,EAAE;IACF,yCAAyC;IACzC,mBAAmB;IACnB,6FAA6F;CAC9F,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,eAAe,GAAG;IACtB,wCAAwC;IACxC,EAAE;IACF,gFAAgF;IAChF,wGAAwG;IACxG,+BAA+B;IAC/B,EAAE;IACF,QAAQ;IACR,aAAa;IACb,kBAAkB;IAClB,YAAY;IACZ,WAAW;IACX,4CAA4C;IAC5C,sBAAsB;IACtB,YAAY;IACZ,MAAM;IACN,GAAG;IACH,KAAK;IACL,EAAE;IACF,KAAK;IACL,EAAE;IACF,oCAAoC;IACpC,EAAE;IACF,OAAO;IACP,6EAA6E;IAC7E,EAAE;IACF,oCAAoC;IACpC,+BAA+B;IAC/B,wBAAwB;IACxB,gCAAgC;IAChC,qBAAqB;IACrB,QAAQ;IACR,4FAA4F;IAC5F,kDAAkD;IAClD,SAAS;IACT,MAAM;IACN,KAAK;IACL,EAAE;IACF,sBAAsB;IACtB,mCAAmC;IACnC,EAAE;IACF,2BAA2B;IAC3B,uCAAuC;IACvC,KAAK;IACL,EAAE;IACF,KAAK;IACL,EAAE;IACF,wBAAwB;IACxB,EAAE;IACF,yFAAyF;IACzF,4HAA4H;IAC5H,sHAAsH;IACtH,EAAE;IACF,KAAK;IACL,EAAE;IACF,mBAAmB;IACnB,EAAE;IACF,6KAA6K;IAC7K,qIAAqI;IACrI,+FAA+F;IAC/F,oFAAoF;CACrF,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,sBAAsB,GAAG;IAC7B,uBAAuB;IACvB,EAAE;IACF,qPAAqP;IACrP,EAAE;IACF,2BAA2B;IAC3B,EAAE;IACF,sTAAsT;IACtT,EAAE;IACF,wNAAwN;CACzN,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,MAAM,kBAAkB,GAAG;IACzB,uBAAuB;IACvB,EAAE;IACF,yNAAyN;CAC1N,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAEb,8EAA8E;AAC9E,YAAY;AACZ,8EAA8E;AAE9E,SAAS,wBAAwB;IAC/B,OAAO,CACL,8BACE,KAAC,KAAK,KAAG,EACT,KAAC,QAAQ,KAAG,EACZ,KAAC,QAAQ,cAAE,iBAAiB,GAAY,EACxC,KAAC,UAAU,iCAA4B,EACvC,KAAC,QAAQ,cAAE,cAAc,GAAY,EACrC,KAAC,UAAU,kCAA6B,EACxC,KAAC,QAAQ,cAAE,eAAe,GAAY,EACtC,KAAC,QAAQ,cAAE,sBAAsB,GAAY,EAC7C,KAAC,UAAU,2BAAsB,EACjC,KAAC,OAAO,IAAC,KAAK,EAAC,EAAE,GAAG,EACpB,KAAC,QAAQ,cAAE,kBAAkB,GAAY,IACxC,CACJ,CAAC;AACJ,CAAC;AAED,8EAA8E;AAC9E,OAAO;AACP,8EAA8E;AAE9E,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,6BAA6B;IACpC,SAAS,EAAE,gBAAgB;IAC3B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE;YACJ,IAAI,EAAE,wBAAwB;SAC/B;KACF;IACD,QAAQ,EAAE;QACR,UAAU,EAAE;YACV,OAAO,EAAE,KAAK;YACd,WAAW,EAAE,0GAA0G;YACvH,KAAK,EAAE;gBACL,IAAI,EAAE,EAAE,OAAO,EAAE,kBAAkB,EAAE;gBACrC,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;aAChC;SACF;KACF;CACsC,CAAC;AAE1C,eAAe,IAAI,CAAC;AAGpB,8EAA8E;AAC9E,SAAS;AACT,8EAA8E;AAE9E,MAAM,eAAe,GAAG,CAAC,KAA0B,EAAE,WAAmB,EAAS,EAAE,CAAC,CAAC;IACnF,GAAI,KAAe;IACnB,UAAU,EAAE;QACV,GAAG,KAAK,CAAC,UAAU;QACnB,IAAI,EAAE;YACJ,GAAG,KAAK,CAAC,UAAU,EAAE,IAAI;YACzB,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;CACF,CAAC,CAAC;AAEH,8EAA8E;AAC9E,qCAAqC;AACrC,8EAA8E;AAE9E,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAiC,EAAE,EAAE,CAAC,CACtE,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,OAAO,EAAE,UAAU,EAAE,uBAAuB,EAAE,aACvG,aAAI,KAAK,EAAE,EAAE,MAAM,EAAE,0BAA0B,EAAE,QAAQ,EAAE,uBAAuB,EAAE,UAAU,EAAE,GAAG,EAAE,2BAEhG,EACL,YAAG,KAAK,EAAE,EAAE,MAAM,EAAE,0BAA0B,EAAE,KAAK,EAAE,uBAAuB,EAAE,kEAE5E,EACH,QAAQ,IACL,CACP,CAAC;AAEF,8EAA8E;AAC9E,YAAY;AACZ,8EAA8E;AAE9E,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,CAC5B,MAAC,cAAc,eACb,KAAC,gBAAgB,IAAC,UAAU,EAAE,EAAE,GAAI,EACpC,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,sBAAsB,EAAE,aAC1D,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE,CACZ,cAAc,CAAC,YAAY,CAAC;wBAC1B,KAAK,EAAE,cAAc;wBACrB,QAAQ,EAAE,CACR,kFAA8D,CAC/D;qBACF,CAAC,+BAGG,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,cAAc,CAAC,eAAe,4BAE1D,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,qBAAqB,EAAC,OAAO,EAAE,cAAc,CAAC,mBAAmB,0BAExE,IACL,IACS,CAClB,CAAC;AAEF,MAAM,yBAAyB,GAAG,GAAG,EAAE,CAAC,CACtC,MAAC,cAAc,eACb,KAAC,gBAAgB,IAAC,UAAU,EAAE,EAAE,GAAI,EACpC,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE,CACZ,cAAc,CAAC,YAAY,CAAC;gBAC1B,KAAK,EAAE,oBAAoB;gBAC3B,QAAQ,EAAE,CACR,MAAC,OAAO,IAAC,KAAK,EAAC,kBAAkB,aAC/B,KAAC,SAAS,IACR,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,WAAW,EACjB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAE,EAAE,WAAW,EAAE,mBAAmB,EAAE,YAAY,EAAE,cAAc,EAAE,GAC9E,EACF,KAAC,SAAS,IACR,EAAE,EAAC,WAAW,EACd,KAAK,EAAC,eAAe,EACrB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,GACrE,EACF,KAAC,SAAS,IACR,EAAE,EAAC,YAAY,EACf,KAAK,EAAC,YAAY,EAClB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,GACtC,IACM,CACX;gBACD,cAAc,EAAE,CACd,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,sBAAsB,EAAE,cAAc,EAAE,UAAU,EAAE,aACtF,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,cAAc,CAAC,eAAe,uBAE1D,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,cAAc,CAAC,eAAe,6BAEtC,IACL,CACP;aACF,CAAC,mCAGG,IACM,CAClB,CAAC;AAEF,MAAM,wBAAwB,GAAG,GAAG,EAAE,CAAC,CACrC,MAAC,cAAc,eACb,KAAC,gBAAgB,IAAC,UAAU,EAAE,EAAE,GAAI,EACpC,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE,CACZ,cAAc,CAAC,YAAY,CAAC;gBAC1B,KAAK,EAAE,qBAAqB;gBAC5B,QAAQ,EAAE,CACR,MAAC,OAAO,IAAC,KAAK,EAAC,aAAa,aAC1B,YAAG,KAAK,EAAE,EAAE,MAAM,EAAE,2BAA2B,EAAE,kDAE7C,EACJ,KAAC,MAAM,IACL,OAAO,EAAC,WAAW,EACnB,OAAO,EAAE,GAAG,EAAE,CACZ,cAAc,CAAC,YAAY,CAAC;gCAC1B,KAAK,EAAE,iBAAiB;gCACxB,QAAQ,EAAE,CACR,8BACE,KAAC,SAAS,IACR,EAAE,EAAC,iBAAiB,EACpB,KAAK,EAAC,iBAAiB,EACvB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAE,EAAE,YAAY,EAAE,2BAA2B,EAAE,GACzD,EACF,KAAC,SAAS,IACR,EAAE,EAAC,kBAAkB,EACrB,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAE,EAAE,YAAY,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GACpD,EACF,KAAC,SAAS,IACR,EAAE,EAAC,kBAAkB,EACrB,KAAK,EAAC,OAAO,EACb,SAAS,EAAC,UAAU,EACpB,UAAU,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,GAC1C,IACD,CACJ;gCACD,cAAc,EAAE,CACd,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,sBAAsB,EAAE,cAAc,EAAE,UAAU,EAAE,aACtF,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,cAAc,CAAC,eAAe,uBAE1D,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,cAAc,CAAC,eAAe,qBAEtC,IACL,CACP;6BACF,CAAC,uCAGG,IACD,CACX;aACF,CAAC,kCAGG,IACM,CAClB,CAAC;AAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,CACnC,MAAC,cAAc,eACb,KAAC,gBAAgB,IAAC,UAAU,EAAE,EAAE,GAAI,EACpC,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE,CACZ,cAAc,CAAC,YAAY,CAAC;gBAC1B,KAAK,EAAE,kBAAkB;gBACzB,cAAc,EAAE,IAAI;gBACpB,QAAQ,EAAE,CACR,2DAEG,GAAG,EACJ,4CAA6B,EAC5B,GAAG,2CAGF,CACL;gBACD,cAAc,EAAE,CACd,eAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,sBAAsB,EAAE,cAAc,EAAE,UAAU,EAAE,aACtF,KAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,OAAO,EAAE,cAAc,CAAC,eAAe,uBAE1D,EACT,KAAC,MAAM,IAAC,OAAO,EAAC,qBAAqB,EAAC,OAAO,EAAE,cAAc,CAAC,eAAe,6BAEpE,IACL,CACP;aACF,CAAC,6BAGG,IACM,CAClB,CAAC;AAEF,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,CAClC,MAAC,cAAc,eACb,KAAC,gBAAgB,IAAC,UAAU,EAAE,EAAE,GAAI,EACpC,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE,CACZ,cAAc,CAAC,YAAY,CAAC;gBAC1B,KAAK,EAAE,oBAAoB;gBAC3B,MAAM,EAAE,GAAG,EAAE;oBACX,IAAI,MAAM,CAAC,OAAO,CAAC,iDAAiD,CAAC,EAAE,CAAC;wBACtE,cAAc,CAAC,eAAe,EAAE,CAAC;oBACnC,CAAC;gBACH,CAAC;gBACD,QAAQ,EAAE,CACR,KAAC,SAAS,IACR,EAAE,EAAC,oBAAoB,EACvB,KAAK,EAAC,WAAW,EACjB,SAAS,EAAC,MAAM,EAChB,UAAU,EAAE,EAAE,YAAY,EAAE,cAAc,EAAE,GAC5C,CACH;aACF,CAAC,mCAGG,IACM,CAClB,CAAC;AAEF,MAAM,eAAe,GAAG,EAAE,EAAE,CAAC,QAAQ,CAAC,4BAA4B,CAAC,CAAC;AAEpE,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,CAClC,MAAC,cAAc,eACb,KAAC,gBAAgB,IAAC,UAAU,EAAE,EAAE,GAAI,EACpC,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE,CACZ,cAAc,CAAC,YAAY,CAAC;gBAC1B,KAAK,EAAE,qBAAqB;gBAC5B,aAAa,EAAE,CACb,MAAC,MAAM,IAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,GAAG,EAAC,OAAO,EAAE,eAAe,aAC3D,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,YAEf,CACV;gBACD,QAAQ,EAAE,8DAAqC;aAChD,CAAC,kCAGG,IACM,CAClB,CAAC;AAEF,MAAM,yBAAyB,GAAG,GAAG,EAAE;IACrC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,OAAO,CACL,MAAC,cAAc,eACb,KAAC,MAAM,IACL,OAAO,EAAE,GAAG,EAAE;oBACZ,YAAY,CAAC,KAAK,CAAC,CAAC;oBACpB,SAAS,CAAC,IAAI,CAAC,CAAC;gBAClB,CAAC,+BAGM,EACR,MAAM,IAAI,CACT,cAAK,SAAS,EAAC,mDAAmD,YAChE,KAAC,SAAS,IACR,KAAK,EAAC,cAAc,EACpB,MAAM,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAChC,SAAS,EAAE,SAAS,EACpB,oBAAoB,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC5C,IAAI,EAAC,QAAQ,oCAEF,cAAc,YAEzB,wFAAoE,GAC1D,GACR,CACP,IACc,CAClB,CAAC;AACJ,CAAC,CAAC;AAEF,8EAA8E;AAC9E,UAAU;AACV,8EAA8E;AAE9E,MAAM,CAAC,MAAM,OAAO,GAAU,eAAe,CAC3C;IACE,MAAM,EAAE,eAAe;IACvB,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Bf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,kEAAkE;IAClE,wHAAwH;IACxH,iGAAiG;CAClG,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU,eAAe,CACrD;IACE,MAAM,EAAE,yBAAyB;IACjC,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,sEAAsE;IACtE,wHAAwH;CACzH,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU,eAAe,CACrD;IACE,MAAM,EAAE,wBAAwB;IAChC,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0Cf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,yFAAyF;IACzF,6FAA6F;IAC7F,2EAA2E;CAC5E,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU,eAAe,CAClD;IACE,MAAM,EAAE,sBAAsB;IAC9B,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;QAC3B,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,QAAQ,EAAE,KAAK;gBACf,IAAI,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCf,CAAC,IAAI,EAAE;aACC;SACF;KACF;CACF,EACD;IACE,6GAA6G;IAC7G,wGAAwG;CACzG,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU,eAAe,CACjD;IACE,MAAM,EAAE,qBAAqB;IAC7B,UAAU,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC5C,EACD;IACE,qDAAqD;IACrD,2FAA2F;IAC3F,4EAA4E;CAC7E,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAU,eAAe,CACjD;IACE,MAAM,EAAE,qBAAqB;IAC7B,UAAU,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC5C,EACD;IACE,6EAA6E;IAC7E,+CAA+C;IAC/C,wFAAwF;CACzF,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU,eAAe,CACrD;IACE,MAAM,EAAE,yBAAyB;IACjC,UAAU,EAAE,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE;CAC5C,EACD;IACE,iFAAiF;IACjF,6FAA6F;IAC7F,kFAAkF;CACnF,CAAC,IAAI,CAAC,GAAG,CAAC,CACZ,CAAC"}
|
|
@@ -136,6 +136,7 @@ export declare const Interactive: Story;
|
|
|
136
136
|
export declare const WithHeadingLinkProps: Story;
|
|
137
137
|
export declare const PrimaryEventType: Story;
|
|
138
138
|
export declare const SecondaryEventType: Story;
|
|
139
|
+
export declare const AllEventTypes: Story;
|
|
139
140
|
export declare const NonInteractiveItems: Story;
|
|
140
141
|
export declare const WithoutLocation: Story;
|
|
141
142
|
export declare const CustomSecondaryContent: Story;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"WidgetCalendar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/widgetCalendar/WidgetCalendar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAa5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;
|
|
1
|
+
{"version":3,"file":"WidgetCalendar.stories.d.ts","sourceRoot":"","sources":["../../../src/components/widgetCalendar/WidgetCalendar.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAa5D,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AA2OrD,iBAAS,sBAAsB,gCAmB9B;AAMD,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiG6B,CAAC;AAExC,eAAe,IAAI,CAAC;AAGpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,cAAc,CAAC,CAAC;AAoJ7C,eAAO,MAAM,OAAO,EAAE,KAgBrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAsCzB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAgDlC,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KA6B9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KA6BhC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAwE3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KA6BjC,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAwB7B,CAAC;AAEF,eAAO,MAAM,sBAAsB,EAAE,KA0BpC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAoBzB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAwC9B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAiB9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAmBjC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAkDxB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAwCrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAoCvB,CAAC"}
|
|
@@ -151,7 +151,7 @@ const groupedItems = [
|
|
|
151
151
|
// ---------------------------------------------------------------------------
|
|
152
152
|
const DESCRIPTION_INTRO = [
|
|
153
153
|
'`WidgetCalendar` is a pre-composed dashboard widget for date/time-anchored calendar events.',
|
|
154
|
-
'It wraps [`Widget`](?path=/docs/components-widget--docs) with an event list,
|
|
154
|
+
'It wraps [`Widget`](?path=/docs/components-widget--docs) with an event list, an eight-value event type indicator, and',
|
|
155
155
|
'optional heading navigation. Each item renders a semantic `<time>` element from an ISO `eventDateTime` and a',
|
|
156
156
|
'human-readable `eventTimeLabel`.',
|
|
157
157
|
].join('\n');
|
|
@@ -196,9 +196,12 @@ const DEVELOPER_NOTES = [
|
|
|
196
196
|
'fall into the ungrouped bucket, which renders above all groups to prevent ambiguity about which group',
|
|
197
197
|
'an item belongs to. Groups appear in the order their labels are first declared.',
|
|
198
198
|
'',
|
|
199
|
-
'
|
|
200
|
-
'
|
|
201
|
-
'
|
|
199
|
+
'**`eventType` selects one of eight type-bar colours.** The accepted values are `primary` (the default),',
|
|
200
|
+
'`secondary`, `destructive`, `caution`, `info`, `warning`, `green`, and `purple`, matching the eight index',
|
|
201
|
+
'colours in the design. The colour is chosen by the school per event and carries no meaning of its own —',
|
|
202
|
+
'`WidgetCalendar` attaches no semantics to the value, so the same colour can represent different event',
|
|
203
|
+
'categories in different schools. Pass the value the data source supplies rather than inferring one from',
|
|
204
|
+
'the event content.',
|
|
202
205
|
'',
|
|
203
206
|
'**No loading, disabled, or error state exists on this component.** Handle those states in the consumer',
|
|
204
207
|
'(e.g. render a Skeleton in place of `WidgetCalendar` while data loads). `isLoading` and `loadingLabel` are',
|
|
@@ -538,6 +541,76 @@ export const SecondaryEventType = withDescription({
|
|
|
538
541
|
render: args => _jsx(WidgetCalendar, { ...args }),
|
|
539
542
|
parameters: { controls: { disable: true } },
|
|
540
543
|
}, 'Isolates `eventType="secondary"` — the neutral grey type bar, used for lower-priority or generic events.');
|
|
544
|
+
export const AllEventTypes = withDescription({
|
|
545
|
+
args: {
|
|
546
|
+
heading: 'Calendar',
|
|
547
|
+
items: [
|
|
548
|
+
{
|
|
549
|
+
id: 'type-primary',
|
|
550
|
+
eventType: 'primary',
|
|
551
|
+
eventPrimaryTerm: 'Class',
|
|
552
|
+
eventPrimaryDefinition: 'Year 10: 10G',
|
|
553
|
+
...classEventTime,
|
|
554
|
+
},
|
|
555
|
+
{
|
|
556
|
+
id: 'type-secondary',
|
|
557
|
+
eventType: 'secondary',
|
|
558
|
+
eventPrimaryTerm: 'Class',
|
|
559
|
+
eventPrimaryDefinition: 'Year 8: 8B',
|
|
560
|
+
...classEventTime,
|
|
561
|
+
},
|
|
562
|
+
{
|
|
563
|
+
id: 'type-destructive',
|
|
564
|
+
eventType: 'destructive',
|
|
565
|
+
eventPrimaryTerm: 'Exam',
|
|
566
|
+
eventPrimaryDefinition: 'GCSE Maths: Paper 1',
|
|
567
|
+
...classEventTime,
|
|
568
|
+
},
|
|
569
|
+
{
|
|
570
|
+
id: 'type-caution',
|
|
571
|
+
eventType: 'caution',
|
|
572
|
+
eventPrimaryTerm: 'Trip',
|
|
573
|
+
eventPrimaryDefinition: 'Geography field trip',
|
|
574
|
+
...classEventTime,
|
|
575
|
+
},
|
|
576
|
+
{
|
|
577
|
+
id: 'type-info',
|
|
578
|
+
eventType: 'info',
|
|
579
|
+
eventPrimaryTerm: 'Meeting',
|
|
580
|
+
eventPrimaryDefinition: 'Parents\' evening',
|
|
581
|
+
...classEventTime,
|
|
582
|
+
},
|
|
583
|
+
{
|
|
584
|
+
id: 'type-warning',
|
|
585
|
+
eventType: 'warning',
|
|
586
|
+
eventPrimaryTerm: 'Deadline',
|
|
587
|
+
eventPrimaryDefinition: 'Reports due to head of year',
|
|
588
|
+
...classEventTime,
|
|
589
|
+
},
|
|
590
|
+
{
|
|
591
|
+
id: 'type-green',
|
|
592
|
+
eventType: 'green',
|
|
593
|
+
eventPrimaryTerm: 'Club',
|
|
594
|
+
eventPrimaryDefinition: 'Football: Year 9',
|
|
595
|
+
...classEventTime,
|
|
596
|
+
},
|
|
597
|
+
{
|
|
598
|
+
id: 'type-purple',
|
|
599
|
+
eventType: 'purple',
|
|
600
|
+
eventPrimaryTerm: 'Assembly',
|
|
601
|
+
eventPrimaryDefinition: 'Whole-school assembly',
|
|
602
|
+
...classEventTime,
|
|
603
|
+
},
|
|
604
|
+
],
|
|
605
|
+
onItemClick: fn(),
|
|
606
|
+
},
|
|
607
|
+
render: args => _jsx(WidgetCalendar, { ...args }),
|
|
608
|
+
parameters: { controls: { disable: true } },
|
|
609
|
+
}, [
|
|
610
|
+
'All eight `eventType` values side by side, so the full set of type-bar colours can be compared in one view.',
|
|
611
|
+
'The colour is chosen by the school per event — `WidgetCalendar` attaches no semantics to any of the eight',
|
|
612
|
+
'values. See the Developer notes above for the full list.',
|
|
613
|
+
].join(' '));
|
|
541
614
|
export const NonInteractiveItems = withDescription({
|
|
542
615
|
args: {
|
|
543
616
|
heading: 'Calendar',
|