reshaped 3.3.11 → 3.3.13
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 +12 -0
- package/dist/bundle.css +1 -1
- package/dist/bundle.d.ts +1 -1
- package/dist/bundle.js +16 -17
- package/dist/cjs/themes/_generator/utilities/generateColors.d.ts +1 -1
- package/dist/cjs/themes/_generator/utilities/generateColors.js +3 -2
- package/dist/cjs/themes/_generator/utilities/tests/color.test.js +32 -31
- package/dist/cjs/themes/slate/theme.css +1 -1
- package/dist/components/Accordion/tests/Accordion.stories.d.ts +30 -8
- package/dist/components/Accordion/tests/Accordion.stories.js +172 -119
- package/dist/components/ActionBar/tests/ActionBar.stories.d.ts +12 -3
- package/dist/components/ActionBar/tests/ActionBar.stories.js +51 -36
- package/dist/components/ActionBar/tests/ActionBar.test.stories.d.ts +15 -0
- package/dist/components/ActionBar/tests/ActionBar.test.stories.js +26 -0
- package/dist/components/Actionable/Actionable.js +1 -1
- package/dist/components/Actionable/tests/Actionable.stories.d.ts +19 -5
- package/dist/components/Actionable/tests/Actionable.stories.js +88 -63
- package/dist/components/Actionable/tests/Actionable.test.stories.d.ts +32 -0
- package/dist/components/Actionable/tests/Actionable.test.stories.js +130 -0
- package/dist/components/Alert/Alert.js +1 -1
- package/dist/components/Alert/tests/Alert.stories.d.ts +12 -3
- package/dist/components/Alert/tests/Alert.stories.js +51 -86
- package/dist/components/Alert/tests/Alert.test.stories.d.ts +15 -0
- package/dist/components/Alert/tests/Alert.test.stories.js +26 -0
- package/dist/components/Autocomplete/Autocomplete.js +9 -2
- package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +6 -2
- package/dist/components/Autocomplete/tests/Autocomplete.stories.js +94 -111
- package/dist/components/Autocomplete/tests/Autocomplete.test.stories.d.ts +23 -0
- package/dist/components/Autocomplete/tests/Autocomplete.test.stories.js +86 -0
- package/dist/components/Avatar/Avatar.js +1 -1
- package/dist/components/Avatar/tests/Avatar.stories.d.ts +14 -4
- package/dist/components/Avatar/tests/Avatar.stories.js +94 -80
- package/dist/components/Avatar/tests/Avatar.test.stories.d.ts +17 -0
- package/dist/components/Avatar/tests/Avatar.test.stories.js +39 -0
- package/dist/components/Badge/tests/Badge.stories.d.ts +33 -8
- package/dist/components/Badge/tests/Badge.stories.js +238 -212
- package/dist/components/Badge/tests/Badge.test.stories.d.ts +20 -0
- package/dist/components/Badge/tests/Badge.test.stories.js +44 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.js +2 -2
- package/dist/components/Breadcrumbs/Breadcrumbs.types.d.ts +1 -0
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.d.ts +24 -5
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.js +114 -95
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.d.ts +23 -0
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.js +76 -0
- package/dist/components/Button/Button.js +5 -2
- package/dist/components/Button/Button.module.css +1 -1
- package/dist/components/Button/Button.types.d.ts +1 -0
- package/dist/components/Button/tests/Button.stories.d.ts +2 -2
- package/dist/components/Button/tests/Button.stories.js +77 -74
- package/dist/components/Button/tests/Button.test.stories.d.ts +27 -0
- package/dist/components/Button/tests/Button.test.stories.js +112 -0
- package/dist/components/Calendar/tests/Calendar.test.stories.d.ts +26 -0
- package/dist/components/Calendar/tests/Calendar.test.stories.js +161 -0
- package/dist/components/Card/tests/Card.stories.d.ts +0 -1
- package/dist/components/Card/tests/Card.stories.js +0 -11
- package/dist/components/Card/tests/Card.test.stories.d.ts +35 -0
- package/dist/components/Card/tests/Card.test.stories.js +54 -0
- package/dist/components/Carousel/Carousel.js +52 -4
- package/dist/components/Carousel/Carousel.types.d.ts +4 -0
- package/dist/components/Carousel/CarouselControl.js +1 -1
- package/dist/components/Carousel/tests/Carousel.stories.d.ts +23 -4
- package/dist/components/Carousel/tests/Carousel.stories.js +199 -102
- package/dist/components/Checkbox/tests/Checkbox.test.stories.d.ts +25 -0
- package/dist/components/Checkbox/tests/Checkbox.test.stories.js +104 -0
- package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.d.ts +22 -0
- package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.js +78 -0
- package/dist/components/Container/tests/Container.stories.d.ts +12 -3
- package/dist/components/Container/tests/Container.stories.js +50 -31
- package/dist/components/Container/tests/Container.test.stories.d.ts +15 -0
- package/dist/components/Container/tests/Container.test.stories.js +26 -0
- package/dist/components/ContextMenu/ContextMenu.js +13 -9
- package/dist/components/ContextMenu/tests/ContextMenu.stories.js +2 -3
- package/dist/components/ContextMenu/tests/ContextMenu.test.stories.d.ts +26 -0
- package/dist/components/ContextMenu/tests/ContextMenu.test.stories.js +53 -0
- package/dist/components/Dismissible/Dismissible.js +1 -1
- package/dist/components/Dismissible/tests/Dismissible.stories.d.ts +10 -3
- package/dist/components/Dismissible/tests/Dismissible.stories.js +51 -34
- package/dist/components/Dismissible/tests/Dismissible.test.stories.d.ts +19 -0
- package/dist/components/Dismissible/tests/Dismissible.test.stories.js +42 -0
- package/dist/components/Divider/tests/Divider.test.stories.d.ts +18 -0
- package/dist/components/Divider/tests/Divider.test.stories.js +47 -0
- package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.d.ts +37 -0
- package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.js +117 -0
- package/dist/components/FileUpload/tests/FileUpload.test.stories.d.ts +22 -0
- package/dist/components/FileUpload/tests/FileUpload.test.stories.js +52 -0
- package/dist/components/FormControl/FormControlCaption.js +1 -1
- package/dist/components/FormControl/FormControlLabel.js +1 -1
- package/dist/components/FormControl/tests/FormControl.stories.d.ts +11 -5
- package/dist/components/FormControl/tests/FormControl.stories.js +78 -73
- package/dist/components/FormControl/tests/FormControl.test.stories.d.ts +20 -0
- package/dist/components/FormControl/tests/FormControl.test.stories.js +49 -0
- package/dist/components/Grid/tests/Grid.stories.d.ts +20 -5
- package/dist/components/Grid/tests/Grid.stories.js +164 -149
- package/dist/components/Grid/tests/Grid.test.stories.d.ts +19 -0
- package/dist/components/Grid/tests/Grid.test.stories.js +42 -0
- package/dist/components/Hidden/tests/Hidden.stories.d.ts +4 -1
- package/dist/components/Hidden/tests/Hidden.stories.js +28 -25
- package/dist/components/Hidden/tests/Hidden.test.stories.d.ts +15 -0
- package/dist/components/Hidden/tests/Hidden.test.stories.js +20 -0
- package/dist/components/HiddenVisually/tests/HiddenVisually.stories.d.ts +4 -1
- package/dist/components/HiddenVisually/tests/HiddenVisually.stories.js +8 -5
- package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.d.ts +15 -0
- package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.js +20 -0
- package/dist/components/Hotkey/tests/Hotkey.test.stories.d.ts +15 -0
- package/dist/components/Hotkey/tests/Hotkey.test.stories.js +26 -0
- package/dist/components/Icon/tests/Icon.stories.d.ts +12 -3
- package/dist/components/Icon/tests/Icon.stories.js +69 -60
- package/dist/components/Icon/tests/Icon.test.stories.d.ts +16 -0
- package/dist/components/Icon/tests/Icon.test.stories.js +35 -0
- package/dist/components/Image/tests/Image.stories.d.ts +24 -5
- package/dist/components/Image/tests/Image.stories.js +95 -75
- package/dist/components/Image/tests/Image.test.stories.d.ts +25 -0
- package/dist/components/Image/tests/Image.test.stories.js +80 -0
- package/dist/components/Link/tests/Link.test.stories.d.ts +29 -0
- package/dist/components/Link/tests/Link.test.stories.js +87 -0
- package/dist/components/Loader/Loader.js +1 -1
- package/dist/components/Loader/Loader.types.d.ts +1 -0
- package/dist/components/Loader/tests/Loader.stories.js +8 -8
- package/dist/components/Loader/tests/Loader.test.stories.d.ts +16 -0
- package/dist/components/Loader/tests/Loader.test.stories.js +32 -0
- package/dist/components/MenuItem/tests/MenuItem.test.stories.d.ts +26 -0
- package/dist/components/MenuItem/tests/MenuItem.test.stories.js +100 -0
- package/dist/components/Modal/tests/Modal.test.stories.d.ts +32 -0
- package/dist/components/Modal/tests/Modal.test.stories.js +149 -0
- package/dist/components/Overlay/tests/Overlay.stories.d.ts +4 -2
- package/dist/components/Overlay/tests/Overlay.stories.js +53 -53
- package/dist/components/Overlay/tests/Overlay.test.stories.d.ts +28 -0
- package/dist/components/Overlay/tests/Overlay.test.stories.js +146 -0
- package/dist/components/Pagination/tests/Pagination.test.stories.d.ts +23 -0
- package/dist/components/Pagination/tests/Pagination.test.stories.js +86 -0
- package/dist/components/PinField/tests/PinField.stories.d.ts +0 -1
- package/dist/components/PinField/tests/PinField.stories.js +10 -19
- package/dist/components/PinField/tests/PinField.test.stories.d.ts +29 -0
- package/dist/components/PinField/tests/PinField.test.stories.js +177 -0
- package/dist/components/Popover/tests/Popover.test.stories.d.ts +40 -0
- package/dist/components/Popover/tests/Popover.test.stories.js +167 -0
- package/dist/components/Progress/Progress.js +2 -2
- package/dist/components/Progress/Progress.types.d.ts +1 -0
- package/dist/components/Progress/tests/Progress.stories.js +10 -10
- package/dist/components/Progress/tests/Progress.test.stories.d.ts +16 -0
- package/dist/components/Progress/tests/Progress.test.stories.js +35 -0
- package/dist/components/Radio/tests/Radio.test.stories.d.ts +30 -0
- package/dist/components/Radio/tests/Radio.test.stories.js +118 -0
- package/dist/components/RadioGroup/tests/RadioGroup.test.stories.d.ts +22 -0
- package/dist/components/RadioGroup/tests/RadioGroup.test.stories.js +78 -0
- package/dist/components/Reshaped/tests/Reshaped.stories.d.ts +33 -0
- package/dist/components/Reshaped/tests/Reshaped.stories.js +88 -0
- package/dist/components/Resizable/Resizable.js +1 -0
- package/dist/components/Resizable/tests/Resizable.stories.d.ts +3 -0
- package/dist/components/Resizable/tests/Resizable.stories.js +4 -0
- package/dist/components/Resizable/tests/Resizable.test.stories.d.ts +19 -0
- package/dist/components/Resizable/tests/Resizable.test.stories.js +25 -0
- package/dist/components/Scrim/tests/Scrim.test.stories.d.ts +15 -0
- package/dist/components/Scrim/tests/Scrim.test.stories.js +25 -0
- package/dist/components/ScrollArea/ScrollArea.js +1 -1
- package/dist/components/ScrollArea/ScrollArea.module.css +1 -1
- package/dist/components/ScrollArea/tests/ScrollArea.stories.d.ts +17 -4
- package/dist/components/ScrollArea/tests/ScrollArea.stories.js +114 -139
- package/dist/components/ScrollArea/tests/ScrollArea.test.stories.d.ts +23 -0
- package/dist/components/ScrollArea/tests/ScrollArea.test.stories.js +66 -0
- package/dist/components/Select/tests/Select.stories.d.ts +1 -1
- package/dist/components/Select/tests/Select.stories.js +5 -12
- package/dist/components/Select/tests/Select.test.stories.d.ts +27 -0
- package/dist/components/Select/tests/Select.test.stories.js +132 -0
- package/dist/components/Skeleton/tests/Skeleton.test.stories.d.ts +15 -0
- package/dist/components/Skeleton/tests/Skeleton.test.stories.js +23 -0
- package/dist/components/Slider/tests/Slider.stories.d.ts +0 -1
- package/dist/components/Slider/tests/Slider.stories.js +8 -9
- package/dist/components/Slider/tests/Slider.test.stories.d.ts +38 -0
- package/dist/components/Slider/tests/Slider.test.stories.js +150 -0
- package/dist/components/Stepper/Stepper.js +1 -1
- package/dist/components/Stepper/tests/Stepper.stories.js +0 -3
- package/dist/components/Stepper/tests/Stepper.test.stories.d.ts +18 -0
- package/dist/components/Stepper/tests/Stepper.test.stories.js +28 -0
- package/dist/components/Switch/tests/Switch.test.stories.d.ts +23 -0
- package/dist/components/Switch/tests/Switch.test.stories.js +79 -0
- package/dist/components/Table/index.d.ts +1 -1
- package/dist/components/Table/tests/Table.stories.d.ts +5 -5
- package/dist/components/Table/tests/Table.test.stories.d.ts +25 -0
- package/dist/components/Table/tests/Table.test.stories.js +93 -0
- package/dist/components/Tabs/tests/Tabs.stories.js +4 -4
- package/dist/components/Tabs/tests/Tabs.test.stories.d.ts +28 -0
- package/dist/components/Tabs/tests/Tabs.test.stories.js +128 -0
- package/dist/components/Text/tests/Text.stories.d.ts +28 -7
- package/dist/components/Text/tests/Text.stories.js +148 -125
- package/dist/components/Text/tests/Text.test.stories.d.ts +18 -0
- package/dist/components/Text/tests/Text.test.stories.js +49 -0
- package/dist/components/TextArea/TextArea.module.css +1 -1
- package/dist/components/TextArea/tests/TextArea.stories.js +1 -1
- package/dist/components/TextArea/tests/TextArea.test.stories.d.ts +29 -0
- package/dist/components/TextArea/tests/TextArea.test.stories.js +99 -0
- package/dist/components/TextField/tests/TextField.stories.js +1 -1
- package/dist/components/TextField/tests/TextField.test.stories.d.ts +29 -0
- package/dist/components/TextField/tests/TextField.test.stories.js +99 -0
- package/dist/components/Theme/tests/Theme.test.stories.d.ts +24 -0
- package/dist/components/Theme/tests/Theme.test.stories.js +133 -0
- package/dist/components/Timeline/tests/Timeline.test.stories.d.ts +18 -0
- package/dist/components/Timeline/tests/Timeline.test.stories.js +32 -0
- package/dist/components/Toast/tests/Toast.test.stories.d.ts +16 -0
- package/dist/components/Toast/tests/Toast.test.stories.js +101 -0
- package/dist/components/Tooltip/tests/Tooltip.stories.js +0 -14
- package/dist/components/Tooltip/tests/Tooltip.test.stories.d.ts +19 -0
- package/dist/components/Tooltip/tests/Tooltip.test.stories.js +40 -0
- package/dist/components/View/View.js +1 -2
- package/dist/components/View/tests/View.stories.d.ts +112 -28
- package/dist/components/View/tests/View.stories.js +1092 -1012
- package/dist/components/View/tests/View.test.stories.d.ts +20 -0
- package/dist/components/View/tests/View.test.stories.js +50 -0
- package/dist/components/_private/Flyout/FlyoutContent.js +1 -1
- package/dist/components/_private/Flyout/tests/Flyout.stories.js +4 -4
- package/dist/components/_private/Flyout/tests/Flyout.test.stories.d.ts +28 -0
- package/dist/components/_private/Flyout/tests/Flyout.test.stories.js +205 -0
- package/dist/components/_private/Portal/tests/Portal.stories.js +1 -1
- package/dist/hooks/_private/useSingletonHotkeys.d.ts +3 -3
- package/dist/hooks/_private/useSingletonHotkeys.js +1 -1
- package/dist/hooks/tests/useDrag.stories.js +1 -0
- package/dist/hooks/tests/useDrag.test.stories.d.ts +26 -0
- package/dist/hooks/tests/useDrag.test.stories.js +120 -0
- package/dist/hooks/tests/useElementId.stories.d.ts +6 -0
- package/dist/hooks/tests/useElementId.stories.js +19 -0
- package/dist/hooks/tests/useHotkeys.test.stories.d.ts +39 -0
- package/dist/hooks/tests/useHotkeys.test.stories.js +119 -0
- package/dist/hooks/tests/useRTL.stories.d.ts +6 -0
- package/dist/hooks/tests/useRTL.stories.js +25 -0
- package/dist/hooks/tests/useResponsiveClientValue.stories.d.ts +9 -1
- package/dist/hooks/tests/useResponsiveClientValue.stories.js +22 -9
- package/dist/hooks/tests/useScrollLock.stories.d.ts +6 -0
- package/dist/hooks/tests/useScrollLock.stories.js +22 -0
- package/dist/hooks/tests/useToggle.stories.d.ts +8 -0
- package/dist/hooks/tests/useToggle.stories.js +54 -0
- package/dist/hooks/useHotkeys.js +0 -2
- package/dist/hooks/useScrollLock.d.ts +1 -0
- package/dist/hooks/useScrollLock.js +7 -3
- package/dist/index.d.ts +1 -1
- package/dist/tests/ShadowDOM.stories.js +1 -1
- package/dist/themes/_generator/tests/themes.stories.d.ts +3 -0
- package/dist/themes/_generator/tests/themes.stories.js +7 -11
- package/dist/themes/_generator/utilities/generateColors.d.ts +1 -1
- package/dist/themes/_generator/utilities/generateColors.js +3 -2
- package/dist/themes/slate/theme.css +1 -1
- package/dist/utilities/helpers.d.ts +1 -0
- package/dist/utilities/helpers.js +3 -0
- package/dist/utilities/scroll/lock.d.ts +1 -0
- package/dist/utilities/scroll/lock.js +3 -3
- package/dist/utilities/scroll/lockSafari.d.ts +1 -1
- package/dist/utilities/scroll/lockSafari.js +4 -5
- package/dist/utilities/scroll/lockStandard.d.ts +4 -1
- package/dist/utilities/scroll/lockStandard.js +7 -2
- package/dist/utilities/storybook/Example.js +1 -2
- package/package.json +42 -41
- package/dist/components/Theme/tests/Theme.stories.d.ts +0 -13
- package/dist/components/Theme/tests/Theme.stories.js +0 -80
- package/dist/utilities/storybook/Example.module.css +0 -1
@@ -0,0 +1,167 @@
|
|
1
|
+
import { expect, fn, userEvent, within, waitFor } from "@storybook/test";
|
2
|
+
import Popover from "../index.js";
|
3
|
+
import Button from "../../Button/index.js";
|
4
|
+
import { sleep } from "../../../utilities/helpers.js";
|
5
|
+
export default {
|
6
|
+
title: "Components/Popover/tests",
|
7
|
+
component: Popover,
|
8
|
+
parameters: {
|
9
|
+
iframe: {
|
10
|
+
url: "https://reshaped.so/docs/components/popover",
|
11
|
+
},
|
12
|
+
chromatic: { disableSnapshot: true },
|
13
|
+
},
|
14
|
+
};
|
15
|
+
export const defaultActive = {
|
16
|
+
name: "defaultActive, uncontrolled",
|
17
|
+
args: {
|
18
|
+
handleOpen: fn(),
|
19
|
+
handleClose: fn(),
|
20
|
+
},
|
21
|
+
render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
|
22
|
+
<Popover.Trigger>
|
23
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
24
|
+
</Popover.Trigger>
|
25
|
+
<Popover.Content>Content</Popover.Content>
|
26
|
+
</Popover>),
|
27
|
+
play: async ({ canvasElement, args }) => {
|
28
|
+
const canvas = within(canvasElement.ownerDocument.body);
|
29
|
+
const trigger = canvas.getAllByRole("button")[0];
|
30
|
+
let item = canvas.getByText("Content");
|
31
|
+
// Wait for the open animation
|
32
|
+
await sleep(500);
|
33
|
+
await userEvent.click(document.body);
|
34
|
+
await waitFor(() => {
|
35
|
+
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
36
|
+
expect(args.handleClose).toHaveBeenCalledWith();
|
37
|
+
expect(item).not.toBeInTheDocument();
|
38
|
+
});
|
39
|
+
await userEvent.click(trigger);
|
40
|
+
await waitFor(() => {
|
41
|
+
expect(args.handleOpen).toHaveBeenCalledTimes(1);
|
42
|
+
expect(args.handleOpen).toHaveBeenCalledWith();
|
43
|
+
});
|
44
|
+
item = canvas.getByText("Content");
|
45
|
+
expect(item).toBeInTheDocument();
|
46
|
+
},
|
47
|
+
};
|
48
|
+
export const active = {
|
49
|
+
name: "active, controlled",
|
50
|
+
args: {
|
51
|
+
handleOpen: fn(),
|
52
|
+
handleClose: fn(),
|
53
|
+
},
|
54
|
+
render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active>
|
55
|
+
<Popover.Trigger>
|
56
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
57
|
+
</Popover.Trigger>
|
58
|
+
<Popover.Content>Content</Popover.Content>
|
59
|
+
</Popover>),
|
60
|
+
play: async ({ canvasElement, args }) => {
|
61
|
+
const canvas = within(canvasElement.ownerDocument.body);
|
62
|
+
const item = canvas.getByText("Content");
|
63
|
+
await userEvent.click(document.body);
|
64
|
+
await waitFor(() => {
|
65
|
+
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
66
|
+
expect(args.handleClose).toHaveBeenCalledWith();
|
67
|
+
});
|
68
|
+
expect(item).toBeInTheDocument();
|
69
|
+
},
|
70
|
+
};
|
71
|
+
export const activeFalse = {
|
72
|
+
name: "active false, controlled",
|
73
|
+
args: {
|
74
|
+
handleOpen: fn(),
|
75
|
+
handleClose: fn(),
|
76
|
+
},
|
77
|
+
render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
|
78
|
+
<Popover.Trigger>
|
79
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
80
|
+
</Popover.Trigger>
|
81
|
+
<Popover.Content>Content</Popover.Content>
|
82
|
+
</Popover>),
|
83
|
+
play: async ({ canvasElement, args }) => {
|
84
|
+
const canvas = within(canvasElement.ownerDocument.body);
|
85
|
+
const trigger = canvas.getAllByRole("button")[0];
|
86
|
+
await userEvent.click(trigger);
|
87
|
+
await waitFor(() => {
|
88
|
+
expect(args.handleOpen).toHaveBeenCalledTimes(1);
|
89
|
+
expect(args.handleOpen).toHaveBeenCalledWith();
|
90
|
+
});
|
91
|
+
const item = canvas.queryByText("Content");
|
92
|
+
expect(item).not.toBeInTheDocument();
|
93
|
+
},
|
94
|
+
};
|
95
|
+
export const dismissible = {
|
96
|
+
name: "dismissible, onClose, className, attributes, closeAriaLabel",
|
97
|
+
args: {
|
98
|
+
handleClose: fn(),
|
99
|
+
},
|
100
|
+
render: (args) => (<Popover onClose={args.handleClose} defaultActive>
|
101
|
+
<Popover.Trigger>
|
102
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
103
|
+
</Popover.Trigger>
|
104
|
+
<Popover.Content>
|
105
|
+
<Popover.Dismissible closeAriaLabel="Close" attributes={{ "data-testid": "test-id" }} className="test-classname">
|
106
|
+
Content
|
107
|
+
</Popover.Dismissible>
|
108
|
+
</Popover.Content>
|
109
|
+
</Popover>),
|
110
|
+
play: async ({ canvasElement, args }) => {
|
111
|
+
const canvas = within(canvasElement.ownerDocument.body);
|
112
|
+
const dismissible = canvas.getByTestId("test-id");
|
113
|
+
const closeButton = within(dismissible).getByRole("button");
|
114
|
+
expect(dismissible).toHaveClass("test-classname");
|
115
|
+
expect(closeButton).toHaveAccessibleName("Close");
|
116
|
+
await userEvent.click(closeButton);
|
117
|
+
await waitFor(() => {
|
118
|
+
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
119
|
+
expect(args.handleClose).toHaveBeenCalledWith();
|
120
|
+
});
|
121
|
+
},
|
122
|
+
};
|
123
|
+
export const triggerType = {
|
124
|
+
name: "triggerType hover",
|
125
|
+
args: {
|
126
|
+
handleOpen: fn(),
|
127
|
+
handleClose: fn(),
|
128
|
+
},
|
129
|
+
render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} triggerType="hover">
|
130
|
+
<Popover.Trigger>
|
131
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
132
|
+
</Popover.Trigger>
|
133
|
+
<Popover.Content>Content</Popover.Content>
|
134
|
+
</Popover>),
|
135
|
+
play: async ({ canvasElement, args }) => {
|
136
|
+
const canvas = within(canvasElement.ownerDocument.body);
|
137
|
+
const trigger = canvas.getAllByRole("button")[0];
|
138
|
+
await userEvent.hover(trigger);
|
139
|
+
await waitFor(() => {
|
140
|
+
expect(args.handleOpen).toHaveBeenCalledTimes(1);
|
141
|
+
expect(args.handleOpen).toHaveBeenCalledWith();
|
142
|
+
});
|
143
|
+
await userEvent.unhover(trigger);
|
144
|
+
await waitFor(() => {
|
145
|
+
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
146
|
+
expect(args.handleClose).toHaveBeenCalledWith();
|
147
|
+
});
|
148
|
+
},
|
149
|
+
};
|
150
|
+
export const className = {
|
151
|
+
name: "className, attributes",
|
152
|
+
render: () => (<div data-testid="root">
|
153
|
+
<Popover active>
|
154
|
+
<Popover.Trigger>
|
155
|
+
{(attributes) => <Button attributes={attributes}>Open</Button>}
|
156
|
+
</Popover.Trigger>
|
157
|
+
<Popover.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
|
158
|
+
Content
|
159
|
+
</Popover.Content>
|
160
|
+
</Popover>
|
161
|
+
</div>),
|
162
|
+
play: async ({ canvasElement }) => {
|
163
|
+
const canvas = within(canvasElement.ownerDocument.body);
|
164
|
+
const menu = await canvas.findByTestId("test-id");
|
165
|
+
expect(menu).toHaveClass("test-classname");
|
166
|
+
},
|
167
|
+
};
|
@@ -2,14 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { classNames } from "../../utilities/helpers.js";
|
3
3
|
import s from "./Progress.module.css";
|
4
4
|
const Progress = (props) => {
|
5
|
-
const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, className, attributes, } = props;
|
5
|
+
const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, ariaLabel, className, attributes, } = props;
|
6
6
|
const rootClassNames = classNames(s.root, className, color && s[`--color-${color}`], size && s[`--size-${size}`], !!duration && s["--duration"]);
|
7
7
|
const total = max - min;
|
8
8
|
const normalizedValue = value - min;
|
9
9
|
const resolvedValue = Math.max(min, Math.min(max, normalizedValue));
|
10
10
|
const width = (resolvedValue / total) * 100;
|
11
11
|
const translate = `${width - 100}%`;
|
12
|
-
return (_jsx("div", { role: "progressbar", ...attributes, className: rootClassNames, "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": value, children: _jsx("div", { className: s.value, style: {
|
12
|
+
return (_jsx("div", { role: "progressbar", ...attributes, className: rootClassNames, "aria-label": ariaLabel || attributes?.["aria-label"], "aria-valuemax": max, "aria-valuemin": min, "aria-valuenow": value, children: _jsx("div", { className: s.value, style: {
|
13
13
|
"--rs-progress-value": translate,
|
14
14
|
"--rs-progress-duration": duration ? `${duration}ms` : undefined,
|
15
15
|
} }) }));
|
@@ -14,36 +14,36 @@ export default {
|
|
14
14
|
};
|
15
15
|
export const value = () => (<Example>
|
16
16
|
<Example.Item title="value: 50">
|
17
|
-
<Progress value={50}/>
|
17
|
+
<Progress value={50} ariaLabel="rating value"/>
|
18
18
|
</Example.Item>
|
19
19
|
<Example.Item title="value: 20, min: 0, max: 40">
|
20
|
-
<Progress value={20} min={0} max={40}/>
|
20
|
+
<Progress value={20} min={0} max={40} ariaLabel="rating value"/>
|
21
21
|
</Example.Item>
|
22
22
|
<Example.Item title="value: 50, min: 0, max: 40">
|
23
|
-
<Progress value={50} min={0} max={40}/>
|
23
|
+
<Progress value={50} min={0} max={40} ariaLabel="rating value"/>
|
24
24
|
</Example.Item>
|
25
25
|
</Example>);
|
26
26
|
export const size = () => (<Example>
|
27
27
|
<Example.Item title="size: small, value: 50">
|
28
|
-
<Progress value={50} size="small"/>
|
28
|
+
<Progress value={50} size="small" ariaLabel="rating value"/>
|
29
29
|
</Example.Item>
|
30
30
|
<Example.Item title="size: medium, value: 50">
|
31
|
-
<Progress value={50} size="medium"/>
|
31
|
+
<Progress value={50} size="medium" ariaLabel="rating value"/>
|
32
32
|
</Example.Item>
|
33
33
|
</Example>);
|
34
34
|
export const color = () => (<Example>
|
35
35
|
<Example.Item title="color: critical, value: 50">
|
36
|
-
<Progress value={50} color="critical"/>
|
36
|
+
<Progress value={50} color="critical" ariaLabel="rating value"/>
|
37
37
|
</Example.Item>
|
38
38
|
<Example.Item title="color: warning, value: 50">
|
39
|
-
<Progress value={50} color="warning"/>
|
39
|
+
<Progress value={50} color="warning" ariaLabel="rating value"/>
|
40
40
|
</Example.Item>
|
41
41
|
<Example.Item title="color: positive, value: 50">
|
42
|
-
<Progress value={50} color="positive"/>
|
42
|
+
<Progress value={50} color="positive" ariaLabel="rating value"/>
|
43
43
|
</Example.Item>
|
44
44
|
<Example.Item title="color: media, value: 50">
|
45
45
|
<View padding={4} backgroundColor="black" borderRadius="medium">
|
46
|
-
<Progress value={50} color="media"/>
|
46
|
+
<Progress value={50} color="media" ariaLabel="rating value"/>
|
47
47
|
</View>
|
48
48
|
</Example.Item>
|
49
49
|
</Example>);
|
@@ -59,7 +59,7 @@ export const duration = () => {
|
|
59
59
|
<Button onClick={handleChange}>Change</Button>
|
60
60
|
</View.Item>
|
61
61
|
|
62
|
-
<Progress value={active ? 100 : 0} duration={2000}/>
|
62
|
+
<Progress value={active ? 100 : 0} duration={2000} ariaLabel="rating value"/>
|
63
63
|
</View>
|
64
64
|
</Example.Item>
|
65
65
|
</Example>);
|
@@ -0,0 +1,16 @@
|
|
1
|
+
import { StoryObj } from "@storybook/react";
|
2
|
+
declare const _default: {
|
3
|
+
title: string;
|
4
|
+
component: (props: import("./..").ProgressProps) => import("react").JSX.Element;
|
5
|
+
parameters: {
|
6
|
+
iframe: {
|
7
|
+
url: string;
|
8
|
+
};
|
9
|
+
chromatic: {
|
10
|
+
disableSnapshot: boolean;
|
11
|
+
};
|
12
|
+
};
|
13
|
+
};
|
14
|
+
export default _default;
|
15
|
+
export declare const render: StoryObj;
|
16
|
+
export declare const className: StoryObj;
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import { expect } from "@storybook/test";
|
2
|
+
import Progress from "../index.js";
|
3
|
+
export default {
|
4
|
+
title: "Components/Progress/tests",
|
5
|
+
component: Progress,
|
6
|
+
parameters: {
|
7
|
+
iframe: {
|
8
|
+
url: "https://reshaped.so/docs/components/progress",
|
9
|
+
},
|
10
|
+
chromatic: { disableSnapshot: true },
|
11
|
+
},
|
12
|
+
};
|
13
|
+
export const render = {
|
14
|
+
name: "rendering",
|
15
|
+
render: () => <Progress value={75} min={50} max={100} ariaLabel="progress"/>,
|
16
|
+
play: async ({ canvas }) => {
|
17
|
+
const el = canvas.getByRole("progressbar");
|
18
|
+
expect(el).toBeInTheDocument();
|
19
|
+
expect(el).toHaveAttribute("aria-valuenow", "75");
|
20
|
+
expect(el).toHaveAttribute("aria-valuemin", "50");
|
21
|
+
expect(el).toHaveAttribute("aria-valuemax", "100");
|
22
|
+
expect(el).toHaveAccessibleName("progress");
|
23
|
+
},
|
24
|
+
};
|
25
|
+
export const className = {
|
26
|
+
name: "className, attributes",
|
27
|
+
render: () => (<div data-testid="root">
|
28
|
+
<Progress className="test-classname" attributes={{ id: "test-id" }} ariaLabel="progress"/>
|
29
|
+
</div>),
|
30
|
+
play: async ({ canvas }) => {
|
31
|
+
const root = canvas.getByTestId("root").firstChild;
|
32
|
+
expect(root).toHaveClass("test-classname");
|
33
|
+
expect(root).toHaveAttribute("id", "test-id");
|
34
|
+
},
|
35
|
+
};
|
@@ -0,0 +1,30 @@
|
|
1
|
+
import { StoryObj } from "@storybook/react";
|
2
|
+
import { fn } from "@storybook/test";
|
3
|
+
declare const _default: {
|
4
|
+
title: string;
|
5
|
+
component: (props: import("./..").RadioProps) => import("react").JSX.Element;
|
6
|
+
parameters: {
|
7
|
+
iframe: {
|
8
|
+
url: string;
|
9
|
+
};
|
10
|
+
chromatic: {
|
11
|
+
disableSnapshot: boolean;
|
12
|
+
};
|
13
|
+
};
|
14
|
+
};
|
15
|
+
export default _default;
|
16
|
+
export declare const render: StoryObj;
|
17
|
+
export declare const checked: StoryObj<{
|
18
|
+
handleChange: ReturnType<typeof fn>;
|
19
|
+
}>;
|
20
|
+
export declare const checkedFalse: StoryObj<{
|
21
|
+
handleChange: ReturnType<typeof fn>;
|
22
|
+
}>;
|
23
|
+
export declare const defaultChecked: StoryObj<{
|
24
|
+
handleChange: ReturnType<typeof fn>;
|
25
|
+
}>;
|
26
|
+
export declare const defaultCheckedFalse: StoryObj<{
|
27
|
+
handleChange: ReturnType<typeof fn>;
|
28
|
+
}>;
|
29
|
+
export declare const disabled: StoryObj;
|
30
|
+
export declare const className: StoryObj;
|
@@ -0,0 +1,118 @@
|
|
1
|
+
import { expect, userEvent, fn } from "@storybook/test";
|
2
|
+
import Radio from "../index.js";
|
3
|
+
export default {
|
4
|
+
title: "Components/Radio/tests",
|
5
|
+
component: Radio,
|
6
|
+
parameters: {
|
7
|
+
iframe: {
|
8
|
+
url: "https://reshaped.so/docs/components/radio",
|
9
|
+
},
|
10
|
+
chromatic: { disableSnapshot: true },
|
11
|
+
},
|
12
|
+
};
|
13
|
+
export const render = {
|
14
|
+
name: "name, value",
|
15
|
+
render: () => (<Radio name="test-name" value="test-value">
|
16
|
+
Content
|
17
|
+
</Radio>),
|
18
|
+
play: async ({ canvas }) => {
|
19
|
+
const input = canvas.getByRole("radio");
|
20
|
+
expect(input).toHaveAttribute("value", "test-value");
|
21
|
+
expect(input).toHaveAttribute("name", "test-name");
|
22
|
+
expect(input).not.toBeChecked();
|
23
|
+
},
|
24
|
+
};
|
25
|
+
export const checked = {
|
26
|
+
name: "checked, controlled",
|
27
|
+
args: {
|
28
|
+
handleChange: fn(),
|
29
|
+
},
|
30
|
+
render: (args) => (<Radio name="test-name" value="test-value" checked onChange={args.handleChange}>
|
31
|
+
Content
|
32
|
+
</Radio>),
|
33
|
+
play: async ({ canvas, args }) => {
|
34
|
+
const input = canvas.getByRole("radio");
|
35
|
+
expect(input).toBeChecked();
|
36
|
+
},
|
37
|
+
};
|
38
|
+
export const checkedFalse = {
|
39
|
+
name: "checked false, controlled",
|
40
|
+
args: {
|
41
|
+
handleChange: fn(),
|
42
|
+
},
|
43
|
+
render: (args) => (<Radio name="test-name" value="test-value" checked={false} onChange={args.handleChange}>
|
44
|
+
Content
|
45
|
+
</Radio>),
|
46
|
+
play: async ({ canvas, args }) => {
|
47
|
+
const input = canvas.getByRole("radio");
|
48
|
+
expect(input).not.toBeChecked();
|
49
|
+
await userEvent.click(input);
|
50
|
+
expect(args.handleChange).toHaveBeenCalledTimes(1);
|
51
|
+
expect(args.handleChange).toHaveBeenCalledWith({
|
52
|
+
name: "test-name",
|
53
|
+
value: "test-value",
|
54
|
+
checked: true,
|
55
|
+
event: expect.objectContaining({ target: input }),
|
56
|
+
});
|
57
|
+
// Still not checked because it's controlled
|
58
|
+
expect(input).not.toBeChecked();
|
59
|
+
},
|
60
|
+
};
|
61
|
+
export const defaultChecked = {
|
62
|
+
name: "defaultChecked, uncontrolled",
|
63
|
+
args: {
|
64
|
+
handleChange: fn(),
|
65
|
+
},
|
66
|
+
render: (args) => (<Radio name="test-name" value="test-value" defaultChecked onChange={args.handleChange}>
|
67
|
+
Content
|
68
|
+
</Radio>),
|
69
|
+
play: async ({ canvas, args }) => {
|
70
|
+
const input = canvas.getByRole("radio");
|
71
|
+
expect(input).toBeChecked();
|
72
|
+
},
|
73
|
+
};
|
74
|
+
export const defaultCheckedFalse = {
|
75
|
+
name: "defaultChecked false, uncontrolled",
|
76
|
+
args: {
|
77
|
+
handleChange: fn(),
|
78
|
+
},
|
79
|
+
render: (args) => (<Radio name="test-name" value="test-value" onChange={args.handleChange}>
|
80
|
+
Content
|
81
|
+
</Radio>),
|
82
|
+
play: async ({ canvas, args }) => {
|
83
|
+
const input = canvas.getByRole("radio");
|
84
|
+
expect(input).not.toBeChecked();
|
85
|
+
await userEvent.click(input);
|
86
|
+
expect(args.handleChange).toHaveBeenCalledTimes(1);
|
87
|
+
expect(args.handleChange).toHaveBeenCalledWith({
|
88
|
+
name: "test-name",
|
89
|
+
value: "test-value",
|
90
|
+
checked: true,
|
91
|
+
event: expect.objectContaining({ target: input }),
|
92
|
+
});
|
93
|
+
expect(input).toBeChecked();
|
94
|
+
},
|
95
|
+
};
|
96
|
+
export const disabled = {
|
97
|
+
name: "disabled",
|
98
|
+
render: () => (<Radio name="test-name" value="test-value" disabled>
|
99
|
+
Content
|
100
|
+
</Radio>),
|
101
|
+
play: async ({ canvas }) => {
|
102
|
+
const input = canvas.getByRole("radio");
|
103
|
+
expect(input).toBeDisabled();
|
104
|
+
},
|
105
|
+
};
|
106
|
+
export const className = {
|
107
|
+
name: "className, attributes",
|
108
|
+
render: () => (<div data-testid="root">
|
109
|
+
<Radio className="test-classname" attributes={{ id: "test-id" }} value="value">
|
110
|
+
Content
|
111
|
+
</Radio>
|
112
|
+
</div>),
|
113
|
+
play: async ({ canvas }) => {
|
114
|
+
const root = canvas.getByTestId("root").firstChild;
|
115
|
+
expect(root).toHaveClass("test-classname");
|
116
|
+
expect(root).toHaveAttribute("id", "test-id");
|
117
|
+
},
|
118
|
+
};
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import { StoryObj } from "@storybook/react";
|
2
|
+
import { fn } from "@storybook/test";
|
3
|
+
declare const _default: {
|
4
|
+
title: string;
|
5
|
+
component: (props: import("./..").RadioGroupProps) => import("react").JSX.Element;
|
6
|
+
parameters: {
|
7
|
+
iframe: {
|
8
|
+
url: string;
|
9
|
+
};
|
10
|
+
chromatic: {
|
11
|
+
disableSnapshot: boolean;
|
12
|
+
};
|
13
|
+
};
|
14
|
+
};
|
15
|
+
export default _default;
|
16
|
+
export declare const value: StoryObj<{
|
17
|
+
handleChange: ReturnType<typeof fn>;
|
18
|
+
}>;
|
19
|
+
export declare const defaultValue: StoryObj<{
|
20
|
+
handleChange: ReturnType<typeof fn>;
|
21
|
+
}>;
|
22
|
+
export declare const disabled: StoryObj;
|
@@ -0,0 +1,78 @@
|
|
1
|
+
import { fn, userEvent, expect } from "@storybook/test";
|
2
|
+
import RadioGroup from "../index.js";
|
3
|
+
import Radio from "../../Radio/index.js";
|
4
|
+
export default {
|
5
|
+
title: "Components/RadioGroup/tests",
|
6
|
+
component: RadioGroup,
|
7
|
+
parameters: {
|
8
|
+
iframe: {
|
9
|
+
url: "https://reshaped.so/docs/components/radio",
|
10
|
+
},
|
11
|
+
chromatic: { disableSnapshot: true },
|
12
|
+
},
|
13
|
+
};
|
14
|
+
export const value = {
|
15
|
+
name: "value, controlled",
|
16
|
+
args: {
|
17
|
+
handleChange: fn(),
|
18
|
+
},
|
19
|
+
render: (args) => (<RadioGroup name="test-name" value="1" onChange={args.handleChange}>
|
20
|
+
{/* checked should be ignored */}
|
21
|
+
<Radio value="1" checked={false}>
|
22
|
+
Content
|
23
|
+
</Radio>
|
24
|
+
|
25
|
+
<Radio value="2">Content 2</Radio>
|
26
|
+
</RadioGroup>),
|
27
|
+
play: async ({ canvas, args }) => {
|
28
|
+
const inputs = canvas.getAllByRole("radio");
|
29
|
+
expect(inputs[0]).toBeChecked();
|
30
|
+
await userEvent.click(inputs[1]);
|
31
|
+
expect(args.handleChange).toHaveBeenCalledTimes(1);
|
32
|
+
expect(args.handleChange).toHaveBeenCalledWith({
|
33
|
+
name: "test-name",
|
34
|
+
value: "2",
|
35
|
+
event: expect.objectContaining({ target: inputs[1] }),
|
36
|
+
});
|
37
|
+
// Still checked because it's controlled
|
38
|
+
expect(inputs[0]).toBeChecked();
|
39
|
+
expect(inputs[1]).not.toBeChecked();
|
40
|
+
},
|
41
|
+
};
|
42
|
+
export const defaultValue = {
|
43
|
+
name: "defaultValue, uncontrolled",
|
44
|
+
args: {
|
45
|
+
handleChange: fn(),
|
46
|
+
},
|
47
|
+
render: (args) => (<RadioGroup name="test-name" defaultValue="1" onChange={args.handleChange}>
|
48
|
+
{/* checked should be ignored */}
|
49
|
+
<Radio value="1" checked={false}>
|
50
|
+
Content
|
51
|
+
</Radio>
|
52
|
+
|
53
|
+
<Radio value="2">Content 2</Radio>
|
54
|
+
</RadioGroup>),
|
55
|
+
play: async ({ canvas, args }) => {
|
56
|
+
const inputs = canvas.getAllByRole("radio");
|
57
|
+
expect(inputs[0]).toBeChecked();
|
58
|
+
await userEvent.click(inputs[1]);
|
59
|
+
expect(args.handleChange).toHaveBeenCalledTimes(1);
|
60
|
+
expect(args.handleChange).toHaveBeenCalledWith({
|
61
|
+
name: "test-name",
|
62
|
+
value: "2",
|
63
|
+
event: expect.objectContaining({ target: inputs[1] }),
|
64
|
+
});
|
65
|
+
expect(inputs[0]).not.toBeChecked();
|
66
|
+
expect(inputs[1]).toBeChecked();
|
67
|
+
},
|
68
|
+
};
|
69
|
+
export const disabled = {
|
70
|
+
name: "disabled",
|
71
|
+
render: () => (<RadioGroup name="test-name" disabled>
|
72
|
+
<Radio value="test-value">Content</Radio>
|
73
|
+
</RadioGroup>),
|
74
|
+
play: async ({ canvas }) => {
|
75
|
+
const input = canvas.getByRole("radio");
|
76
|
+
expect(input).toBeDisabled();
|
77
|
+
},
|
78
|
+
};
|
@@ -0,0 +1,33 @@
|
|
1
|
+
import { StoryObj } from "@storybook/react";
|
2
|
+
declare const _default: {
|
3
|
+
title: string;
|
4
|
+
parameters: {
|
5
|
+
disableWrapper: boolean;
|
6
|
+
};
|
7
|
+
};
|
8
|
+
export default _default;
|
9
|
+
export declare const rtl: {
|
10
|
+
name: string;
|
11
|
+
render: () => import("react").JSX.Element;
|
12
|
+
};
|
13
|
+
export declare const lightMode: {
|
14
|
+
name: string;
|
15
|
+
render: () => import("react").JSX.Element;
|
16
|
+
play: () => void;
|
17
|
+
};
|
18
|
+
export declare const darkMode: {
|
19
|
+
name: string;
|
20
|
+
render: () => import("react").JSX.Element;
|
21
|
+
play: () => void;
|
22
|
+
};
|
23
|
+
export declare const scoped: {
|
24
|
+
name: string;
|
25
|
+
render: () => import("react").JSX.Element;
|
26
|
+
play: () => Promise<void>;
|
27
|
+
};
|
28
|
+
export declare const testScoped: StoryObj;
|
29
|
+
export declare const keyboardMode: {
|
30
|
+
name: string;
|
31
|
+
render: () => import("react").JSX.Element;
|
32
|
+
play: () => Promise<void>;
|
33
|
+
};
|
@@ -0,0 +1,88 @@
|
|
1
|
+
import { expect, userEvent } from "@storybook/test";
|
2
|
+
import { useTheme } from "../../Theme/index.js";
|
3
|
+
import Button from "../../Button/index.js";
|
4
|
+
import Reshaped from "../Reshaped.js";
|
5
|
+
export default {
|
6
|
+
title: "Utilities/Reshaped",
|
7
|
+
parameters: {
|
8
|
+
disableWrapper: true,
|
9
|
+
},
|
10
|
+
};
|
11
|
+
export const rtl = {
|
12
|
+
name: "defaultRTL",
|
13
|
+
render: () => (<Reshaped defaultRTL theme="reshaped" defaultColorMode="dark">
|
14
|
+
Hello
|
15
|
+
</Reshaped>),
|
16
|
+
};
|
17
|
+
export const lightMode = {
|
18
|
+
name: "defaultColorMode=light",
|
19
|
+
render: () => <Reshaped theme="reshaped">Hello</Reshaped>,
|
20
|
+
play: () => {
|
21
|
+
const theme = document.documentElement.getAttribute("data-rs-theme");
|
22
|
+
const colorMode = document.documentElement.getAttribute("data-rs-color-mode");
|
23
|
+
expect(theme).toEqual("reshaped");
|
24
|
+
expect(colorMode).toEqual("light");
|
25
|
+
},
|
26
|
+
};
|
27
|
+
export const darkMode = {
|
28
|
+
name: "defaultColorMode=dark",
|
29
|
+
render: () => (<Reshaped theme="reshaped" defaultColorMode="dark">
|
30
|
+
Hello
|
31
|
+
</Reshaped>),
|
32
|
+
play: () => {
|
33
|
+
const theme = document.documentElement.getAttribute("data-rs-theme");
|
34
|
+
const colorMode = document.documentElement.getAttribute("data-rs-color-mode");
|
35
|
+
expect(theme).toEqual("reshaped");
|
36
|
+
expect(colorMode).toEqual("dark");
|
37
|
+
},
|
38
|
+
};
|
39
|
+
export const scoped = {
|
40
|
+
name: "scoped",
|
41
|
+
render: () => (<Reshaped theme="reshaped" defaultColorMode="dark" scoped>
|
42
|
+
Hello
|
43
|
+
</Reshaped>),
|
44
|
+
play: async () => {
|
45
|
+
const root = document.querySelector("[data-rs-root]");
|
46
|
+
expect(root).toBeInTheDocument();
|
47
|
+
expect(root).not.toBe(document.documentElement);
|
48
|
+
expect(root).toHaveAttribute("data-rs-theme", "reshaped");
|
49
|
+
expect(document.documentElement).not.toHaveAttribute("data-rs-theme");
|
50
|
+
},
|
51
|
+
};
|
52
|
+
const ScopedComponent = () => {
|
53
|
+
const { invertColorMode } = useTheme();
|
54
|
+
return <Button onClick={invertColorMode}>Invert</Button>;
|
55
|
+
};
|
56
|
+
export const testScoped = {
|
57
|
+
name: "test: scoped switch",
|
58
|
+
render: () => (<Reshaped theme="reshaped">
|
59
|
+
<Reshaped theme="slate" scoped>
|
60
|
+
<ScopedComponent />
|
61
|
+
</Reshaped>
|
62
|
+
</Reshaped>),
|
63
|
+
play: async ({ canvas }) => {
|
64
|
+
const nestedRoot = document.querySelector("[data-rs-root]");
|
65
|
+
const button = canvas.getAllByRole("button")[0];
|
66
|
+
expect(document.documentElement).toHaveAttribute("data-rs-theme", "reshaped");
|
67
|
+
expect(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
|
68
|
+
expect(nestedRoot).toHaveAttribute("data-rs-theme", "slate");
|
69
|
+
expect(nestedRoot).toHaveAttribute("data-rs-color-mode", "light");
|
70
|
+
await userEvent.click(button);
|
71
|
+
expect(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
|
72
|
+
expect(nestedRoot).toHaveAttribute("data-rs-color-mode", "dark");
|
73
|
+
},
|
74
|
+
};
|
75
|
+
export const keyboardMode = {
|
76
|
+
name: "test: keyboard mode",
|
77
|
+
render: () => (<Reshaped theme="reshaped" defaultColorMode="dark">
|
78
|
+
Hello
|
79
|
+
</Reshaped>),
|
80
|
+
play: async () => {
|
81
|
+
const attribute = "data-rs-keyboard";
|
82
|
+
expect(document.documentElement).not.toHaveAttribute(attribute);
|
83
|
+
await userEvent.keyboard("{Tab/}");
|
84
|
+
expect(document.documentElement).toHaveAttribute(attribute);
|
85
|
+
await userEvent.click(document.body);
|
86
|
+
expect(document.documentElement).not.toHaveAttribute(attribute);
|
87
|
+
},
|
88
|
+
};
|