reshaped 3.8.0-canary.1 → 3.8.0-canary.10
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 +83 -18
- package/dist/bundle.css +1 -1
- package/dist/bundle.d.ts +1 -1
- package/dist/bundle.js +11 -11
- package/dist/components/Accordion/AccordionControlled.js +1 -0
- package/dist/components/Actionable/Actionable.js +17 -3
- package/dist/components/Actionable/Actionable.module.css +1 -1
- package/dist/components/Actionable/Actionable.types.d.ts +15 -3
- package/dist/components/Actionable/tests/Actionable.stories.d.ts +13 -1
- package/dist/components/Actionable/tests/Actionable.stories.js +127 -7
- package/dist/components/Alert/tests/Alert.stories.d.ts +6 -5
- package/dist/components/Alert/tests/Alert.stories.js +15 -2
- package/dist/components/Autocomplete/Autocomplete.js +2 -2
- package/dist/components/Autocomplete/Autocomplete.types.d.ts +1 -1
- package/dist/components/Badge/Badge.module.css +1 -1
- package/dist/components/Badge/tests/Badge.stories.d.ts +5 -0
- package/dist/components/Badge/tests/Badge.stories.js +34 -0
- package/dist/components/Breadcrumbs/Breadcrumbs.js +1 -0
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.d.ts +8 -4
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.js +57 -1
- package/dist/components/Button/Button.js +2 -2
- package/dist/components/Button/Button.types.d.ts +1 -1
- package/dist/components/Button/tests/Button.stories.d.ts +54 -12
- package/dist/components/Button/tests/Button.stories.js +725 -588
- package/dist/components/Calendar/CalendarMonth.js +1 -0
- package/dist/components/Card/Card.d.ts +1 -1
- package/dist/components/Card/Card.module.css +1 -1
- package/dist/components/Card/tests/Card.stories.d.ts +29 -7
- package/dist/components/Card/tests/Card.stories.js +110 -65
- package/dist/components/Carousel/Carousel.js +1 -0
- package/dist/components/Carousel/Carousel.module.css +1 -1
- package/dist/components/Checkbox/Checkbox.module.css +1 -1
- package/dist/components/Checkbox/tests/Checkbox.stories.d.ts +20 -4
- package/dist/components/Checkbox/tests/Checkbox.stories.js +150 -79
- package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.d.ts +9 -2
- package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.js +67 -35
- package/dist/components/Container/tests/Container.stories.d.ts +2 -0
- package/dist/components/Container/tests/Container.stories.js +14 -0
- package/dist/components/ContextMenu/tests/ContextMenu.stories.d.ts +10 -1
- package/dist/components/ContextMenu/tests/ContextMenu.stories.js +57 -13
- package/dist/components/Dismissible/tests/Dismissible.stories.d.ts +5 -0
- package/dist/components/Dismissible/tests/Dismissible.stories.js +30 -1
- package/dist/components/Divider/tests/Divider.stories.d.ts +8 -3
- package/dist/components/Divider/tests/Divider.stories.js +71 -41
- package/dist/components/DropdownMenu/DropdownMenu.js +4 -4
- package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +2 -2
- package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +35 -6
- package/dist/components/DropdownMenu/tests/DropdownMenu.stories.js +222 -115
- package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.d.ts +0 -15
- package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.js +0 -106
- package/dist/components/FileUpload/FileUpload.module.css +1 -1
- package/dist/components/Flyout/Flyout.module.css +1 -1
- package/dist/components/Flyout/Flyout.types.d.ts +7 -7
- package/dist/components/Flyout/FlyoutContent.js +4 -1
- package/dist/components/Flyout/FlyoutControlled.js +10 -3
- package/dist/components/Flyout/index.d.ts +1 -1
- package/dist/components/Flyout/tests/Flyout.stories.d.ts +8 -0
- package/dist/components/Flyout/tests/Flyout.stories.js +81 -33
- package/dist/components/Flyout/useFlyout.d.ts +1 -7
- package/dist/components/Flyout/useFlyout.js +5 -1
- package/dist/components/Flyout/utilities/calculatePosition.d.ts +3 -2
- package/dist/components/Flyout/utilities/calculatePosition.js +47 -22
- package/dist/components/Flyout/utilities/flyout.js +3 -2
- package/dist/components/Flyout/utilities/getPositionFallbacks.js +3 -3
- package/dist/components/Flyout/utilities/isFullyVisible.d.ts +0 -2
- package/dist/components/Flyout/utilities/isFullyVisible.js +5 -7
- package/dist/components/FormControl/FormControl.context.d.ts +1 -1
- package/dist/components/FormControl/tests/FormControl.stories.d.ts +2 -0
- package/dist/components/FormControl/tests/FormControl.stories.js +35 -0
- package/dist/components/Hidden/tests/Hidden.stories.d.ts +2 -0
- package/dist/components/Hidden/tests/Hidden.stories.js +9 -0
- package/dist/components/HiddenVisually/tests/HiddenVisually.stories.d.ts +2 -0
- package/dist/components/HiddenVisually/tests/HiddenVisually.stories.js +9 -0
- package/dist/components/Hotkey/tests/Hotkey.stories.d.ts +2 -0
- package/dist/components/Hotkey/tests/Hotkey.stories.js +15 -0
- package/dist/components/Icon/Icon.js +2 -2
- package/dist/components/Icon/Icon.types.d.ts +1 -1
- package/dist/components/Icon/tests/Icon.stories.d.ts +3 -0
- package/dist/components/Icon/tests/Icon.stories.js +29 -1
- package/dist/components/Link/Link.d.ts +1 -1
- package/dist/components/Link/Link.js +2 -2
- package/dist/components/Link/Link.types.d.ts +1 -1
- package/dist/components/Link/tests/Link.stories.d.ts +29 -6
- package/dist/components/Link/tests/Link.stories.js +141 -58
- package/dist/components/Link/tests/Link.test.stories.d.ts +1 -13
- package/dist/components/Link/tests/Link.test.stories.js +0 -76
- package/dist/components/Loader/tests/Loader.stories.d.ts +11 -2
- package/dist/components/Loader/tests/Loader.stories.js +52 -25
- package/dist/components/Loader/tests/Loader.test.stories.d.ts +0 -3
- package/dist/components/Loader/tests/Loader.test.stories.js +0 -21
- package/dist/components/MenuItem/MenuItem.js +2 -2
- package/dist/components/MenuItem/MenuItem.module.css +1 -1
- package/dist/components/MenuItem/MenuItem.types.d.ts +1 -1
- package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +37 -7
- package/dist/components/MenuItem/tests/MenuItem.stories.js +218 -112
- package/dist/components/Modal/Modal.js +1 -1
- package/dist/components/Modal/Modal.module.css +1 -1
- package/dist/components/Modal/tests/Modal.stories.d.ts +53 -10
- package/dist/components/Modal/tests/Modal.stories.js +367 -210
- package/dist/components/Overlay/Overlay.js +2 -1
- package/dist/components/Overlay/tests/Overlay.stories.d.ts +15 -1
- package/dist/components/Overlay/tests/Overlay.stories.js +135 -1
- package/dist/components/Pagination/tests/Pagination.stories.d.ts +14 -1
- package/dist/components/Pagination/tests/Pagination.stories.js +93 -15
- package/dist/components/PinField/tests/PinField.stories.d.ts +1 -1
- package/dist/components/PinField/tests/PinField.stories.js +1 -1
- package/dist/components/Popover/Popover.js +2 -2
- package/dist/components/Popover/Popover.module.css +1 -1
- package/dist/components/Popover/Popover.types.d.ts +3 -1
- package/dist/components/Progress/tests/Progress.stories.d.ts +19 -4
- package/dist/components/Progress/tests/Progress.stories.js +85 -49
- package/dist/components/Radio/Radio.module.css +1 -1
- package/dist/components/Radio/tests/Radio.stories.d.ts +25 -4
- package/dist/components/Radio/tests/Radio.stories.js +147 -65
- package/dist/components/RadioGroup/tests/RadioGroup.stories.d.ts +9 -2
- package/dist/components/RadioGroup/tests/RadioGroup.stories.js +64 -38
- package/dist/components/Reshaped/Reshaped.css +1 -1
- package/dist/components/Scrim/tests/Scrim.stories.d.ts +10 -2
- package/dist/components/Scrim/tests/Scrim.stories.js +51 -31
- package/dist/components/ScrollArea/ScrollArea.module.css +1 -1
- package/dist/components/Select/Select.d.ts +8 -1
- package/dist/components/Select/Select.js +22 -48
- package/dist/components/Select/Select.module.css +1 -1
- package/dist/components/Select/Select.types.d.ts +83 -38
- package/dist/components/Select/SelectCustom.d.ts +3 -0
- package/dist/components/Select/SelectCustom.js +12 -0
- package/dist/components/Select/SelectCustomControlled.d.ts +4 -0
- package/dist/components/Select/SelectCustomControlled.js +105 -0
- package/dist/components/Select/SelectCustomUncontrolled.d.ts +4 -0
- package/dist/components/Select/SelectCustomUncontrolled.js +18 -0
- package/dist/components/Select/SelectEndContent.d.ts +3 -0
- package/dist/components/Select/SelectEndContent.js +12 -0
- package/dist/components/Select/SelectNative.d.ts +4 -0
- package/dist/components/Select/SelectNative.js +29 -0
- package/dist/components/Select/SelectOption.d.ts +4 -0
- package/dist/components/Select/SelectOption.js +13 -0
- package/dist/components/Select/SelectOptionGroup.d.ts +4 -0
- package/dist/components/Select/SelectOptionGroup.js +9 -0
- package/dist/components/Select/SelectRoot.d.ts +4 -0
- package/dist/components/Select/SelectRoot.js +21 -0
- package/dist/components/Select/SelectStartContent.d.ts +3 -0
- package/dist/components/Select/SelectStartContent.js +20 -0
- package/dist/components/Select/SelectTrigger.d.ts +4 -0
- package/dist/components/Select/SelectTrigger.js +16 -0
- package/dist/components/Select/tests/Select.stories.d.ts +38 -10
- package/dist/components/Select/tests/Select.stories.js +504 -175
- package/dist/components/Skeleton/tests/Skeleton.stories.d.ts +10 -2
- package/dist/components/Skeleton/tests/Skeleton.stories.js +46 -28
- package/dist/components/Slider/Slider.module.css +1 -1
- package/dist/components/Stepper/Stepper.js +2 -2
- package/dist/components/Stepper/Stepper.types.d.ts +2 -0
- package/dist/components/Stepper/tests/Stepper.stories.d.ts +18 -3
- package/dist/components/Stepper/tests/Stepper.stories.js +99 -47
- package/dist/components/Switch/Switch.module.css +1 -1
- package/dist/components/Switch/tests/Switch.stories.d.ts +10 -2
- package/dist/components/Switch/tests/Switch.stories.js +77 -23
- package/dist/components/Switch/tests/Switch.test.stories.d.ts +0 -10
- package/dist/components/Switch/tests/Switch.test.stories.js +0 -68
- package/dist/components/Table/Table.js +5 -3
- package/dist/components/Table/Table.module.css +1 -1
- package/dist/components/Table/tests/Table.stories.d.ts +25 -5
- package/dist/components/Table/tests/Table.stories.js +274 -177
- package/dist/components/Table/tests/Table.test.stories.d.ts +0 -5
- package/dist/components/Table/tests/Table.test.stories.js +0 -82
- package/dist/components/Tabs/Tabs.module.css +1 -1
- package/dist/components/Tabs/TabsControlled.js +1 -0
- package/dist/components/TextArea/TextArea.module.css +1 -1
- package/dist/components/TextArea/tests/TextArea.stories.d.ts +41 -9
- package/dist/components/TextArea/tests/TextArea.stories.js +179 -93
- package/dist/components/TextField/TextField.js +1 -1
- package/dist/components/TextField/TextField.module.css +1 -1
- package/dist/components/TextField/tests/TextField.stories.d.ts +41 -11
- package/dist/components/TextField/tests/TextField.stories.js +206 -132
- package/dist/components/TextField/tests/TextField.test.stories.d.ts +0 -13
- package/dist/components/TextField/tests/TextField.test.stories.js +0 -88
- package/dist/components/Theme/Theme.module.css +1 -1
- package/dist/components/Timeline/Timeline.js +2 -2
- package/dist/components/Timeline/tests/Timeline.stories.d.ts +10 -2
- package/dist/components/Timeline/tests/Timeline.stories.js +69 -45
- package/dist/components/Timeline/tests/Timeline.test.stories.d.ts +0 -2
- package/dist/components/Timeline/tests/Timeline.test.stories.js +0 -21
- package/dist/components/Toast/ToastContainer.js +1 -0
- package/dist/components/Toast/ToastRegion.js +1 -0
- package/dist/components/Toast/tests/Toast.stories.d.ts +32 -8
- package/dist/components/Toast/tests/Toast.stories.js +111 -37
- package/dist/components/ToggleButton/ToggleButton.types.d.ts +1 -1
- package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js +1 -0
- package/dist/components/Tooltip/Tooltip.js +1 -1
- package/dist/components/Tooltip/Tooltip.types.d.ts +2 -2
- package/dist/components/Tooltip/tests/Tooltip.stories.d.ts +18 -4
- package/dist/components/Tooltip/tests/Tooltip.stories.js +139 -107
- package/dist/components/Tooltip/tests/Tooltip.test.stories.d.ts +0 -6
- package/dist/components/Tooltip/tests/Tooltip.test.stories.js +0 -29
- package/dist/components/View/View.js +11 -4
- package/dist/components/View/tests/View.stories.d.ts +4 -0
- package/dist/components/View/tests/View.stories.js +39 -0
- package/dist/components/_private/Expandable/Expandable.js +3 -1
- package/dist/components/_private/Portal/Portal.js +4 -1
- package/dist/hooks/_private/useIsDismissible.d.ts +1 -0
- package/dist/hooks/_private/useIsDismissible.js +6 -6
- package/dist/hooks/_private/usePrevious.js +1 -0
- package/dist/hooks/tests/useDrag.stories.js +1 -1
- package/dist/hooks/useScrollLock.js +5 -3
- package/dist/index.d.ts +1 -1
- package/dist/styles/resolvers/align/align.css +1 -1
- package/dist/styles/resolvers/aspectRatio/aspectRatio.css +1 -1
- package/dist/styles/resolvers/bleed/bleed.module.css +1 -1
- package/dist/styles/resolvers/justify/justify.css +1 -1
- package/dist/styles/resolvers/maxHeight/maxHeight.module.css +1 -1
- package/dist/styles/resolvers/maxWidth/maxWidth.module.css +1 -1
- package/dist/styles/resolvers/minHeight/minHeight.module.css +1 -1
- package/dist/styles/resolvers/minWidth/minWidth.module.css +1 -1
- package/dist/styles/resolvers/position/position.css +1 -1
- package/dist/styles/resolvers/textAlign/textAlign.css +1 -1
- package/dist/styles/resolvers/width/width.module.css +1 -1
- package/dist/utilities/scroll/disable.js +2 -2
- package/dist/utilities/scroll/index.d.ts +1 -1
- package/dist/utilities/scroll/index.js +1 -1
- package/dist/utilities/scroll/lock.d.ts +1 -2
- package/dist/utilities/scroll/lock.js +16 -15
- package/dist/utilities/scroll/lockSafari.js +1 -0
- package/package.json +23 -23
- package/dist/components/Actionable/tests/Actionable.test.stories.d.ts +0 -32
- package/dist/components/Actionable/tests/Actionable.test.stories.js +0 -130
- package/dist/components/Alert/tests/Alert.test.stories.d.ts +0 -15
- package/dist/components/Alert/tests/Alert.test.stories.js +0 -26
- package/dist/components/Badge/tests/Badge.test.stories.d.ts +0 -20
- package/dist/components/Badge/tests/Badge.test.stories.js +0 -46
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.d.ts +0 -23
- package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.js +0 -76
- package/dist/components/Button/tests/Button.test.stories.d.ts +0 -27
- package/dist/components/Button/tests/Button.test.stories.js +0 -112
- package/dist/components/Card/tests/Card.test.stories.d.ts +0 -35
- package/dist/components/Card/tests/Card.test.stories.js +0 -54
- package/dist/components/Checkbox/tests/Checkbox.test.stories.d.ts +0 -25
- package/dist/components/Checkbox/tests/Checkbox.test.stories.js +0 -104
- package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.d.ts +0 -22
- package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.js +0 -78
- package/dist/components/Container/tests/Container.test.stories.d.ts +0 -15
- package/dist/components/Container/tests/Container.test.stories.js +0 -26
- package/dist/components/ContextMenu/tests/ContextMenu.test.stories.d.ts +0 -25
- package/dist/components/ContextMenu/tests/ContextMenu.test.stories.js +0 -53
- package/dist/components/Dismissible/tests/Dismissible.test.stories.d.ts +0 -19
- package/dist/components/Dismissible/tests/Dismissible.test.stories.js +0 -42
- package/dist/components/Divider/tests/Divider.test.stories.d.ts +0 -18
- package/dist/components/Divider/tests/Divider.test.stories.js +0 -47
- package/dist/components/FormControl/tests/FormControl.test.stories.d.ts +0 -20
- package/dist/components/FormControl/tests/FormControl.test.stories.js +0 -49
- package/dist/components/Hidden/tests/Hidden.test.stories.d.ts +0 -15
- package/dist/components/Hidden/tests/Hidden.test.stories.js +0 -20
- package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.d.ts +0 -15
- package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.js +0 -20
- package/dist/components/Hotkey/tests/Hotkey.test.stories.d.ts +0 -15
- package/dist/components/Hotkey/tests/Hotkey.test.stories.js +0 -26
- package/dist/components/Icon/tests/Icon.test.stories.d.ts +0 -16
- package/dist/components/Icon/tests/Icon.test.stories.js +0 -35
- package/dist/components/MenuItem/tests/MenuItem.test.stories.d.ts +0 -26
- package/dist/components/MenuItem/tests/MenuItem.test.stories.js +0 -100
- package/dist/components/Modal/tests/Modal.test.stories.d.ts +0 -31
- package/dist/components/Modal/tests/Modal.test.stories.js +0 -149
- package/dist/components/Overlay/tests/Overlay.test.stories.d.ts +0 -28
- package/dist/components/Overlay/tests/Overlay.test.stories.js +0 -148
- package/dist/components/Pagination/tests/Pagination.test.stories.d.ts +0 -23
- package/dist/components/Pagination/tests/Pagination.test.stories.js +0 -86
- package/dist/components/Progress/tests/Progress.test.stories.d.ts +0 -16
- package/dist/components/Progress/tests/Progress.test.stories.js +0 -35
- package/dist/components/Radio/tests/Radio.test.stories.d.ts +0 -30
- package/dist/components/Radio/tests/Radio.test.stories.js +0 -118
- package/dist/components/RadioGroup/tests/RadioGroup.test.stories.d.ts +0 -22
- package/dist/components/RadioGroup/tests/RadioGroup.test.stories.js +0 -78
- package/dist/components/Scrim/tests/Scrim.test.stories.d.ts +0 -15
- package/dist/components/Scrim/tests/Scrim.test.stories.js +0 -25
- package/dist/components/Select/tests/Select.test.stories.d.ts +0 -27
- package/dist/components/Select/tests/Select.test.stories.js +0 -132
- package/dist/components/Skeleton/tests/Skeleton.test.stories.d.ts +0 -15
- package/dist/components/Skeleton/tests/Skeleton.test.stories.js +0 -23
- package/dist/components/Stepper/tests/Stepper.test.stories.d.ts +0 -20
- package/dist/components/Stepper/tests/Stepper.test.stories.js +0 -28
- package/dist/components/TextArea/tests/TextArea.test.stories.d.ts +0 -28
- package/dist/components/TextArea/tests/TextArea.test.stories.js +0 -99
- package/dist/components/Toast/tests/Toast.test.stories.d.ts +0 -16
- package/dist/components/Toast/tests/Toast.test.stories.js +0 -101
- package/dist/components/View/tests/View.test.stories.d.ts +0 -24
- package/dist/components/View/tests/View.test.stories.js +0 -50
@@ -1,35 +0,0 @@
|
|
1
|
-
import { expect } from "storybook/test";
|
2
|
-
import Icon from "../index.js";
|
3
|
-
import IconZap from "../../../icons/Zap.js";
|
4
|
-
export default {
|
5
|
-
title: "Utility components/Icon/tests",
|
6
|
-
component: Icon,
|
7
|
-
parameters: {
|
8
|
-
iframe: {
|
9
|
-
url: "https://reshaped.so/docs/utilities/icon",
|
10
|
-
},
|
11
|
-
chromatic: { disableSnapshot: true },
|
12
|
-
},
|
13
|
-
};
|
14
|
-
export const render = {
|
15
|
-
name: "render, hidden from sr",
|
16
|
-
render: () => (<div data-testid="root">
|
17
|
-
<Icon svg={IconZap}/>
|
18
|
-
</div>),
|
19
|
-
play: ({ canvas }) => {
|
20
|
-
const root = canvas.getByTestId("root").firstChild;
|
21
|
-
expect(root).toBeInTheDocument();
|
22
|
-
expect(root).toHaveAttribute("aria-hidden");
|
23
|
-
},
|
24
|
-
};
|
25
|
-
export const className = {
|
26
|
-
name: "className, attributes",
|
27
|
-
render: () => (<div data-testid="root">
|
28
|
-
<Icon svg={IconZap} className="test-classname" attributes={{ id: "test-id" }}/>
|
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
|
-
};
|
@@ -1,26 +0,0 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react-vite";
|
2
|
-
import { fn } from "storybook/test";
|
3
|
-
declare const _default: {
|
4
|
-
title: string;
|
5
|
-
component: import("../MenuItem.types").Export;
|
6
|
-
parameters: {
|
7
|
-
iframe: {
|
8
|
-
url: string;
|
9
|
-
};
|
10
|
-
chromatic: {
|
11
|
-
disableSnapshot: boolean;
|
12
|
-
};
|
13
|
-
};
|
14
|
-
};
|
15
|
-
export default _default;
|
16
|
-
export declare const children: StoryObj;
|
17
|
-
export declare const href: StoryObj;
|
18
|
-
export declare const onClick: StoryObj<{
|
19
|
-
handleClick: ReturnType<typeof fn>;
|
20
|
-
}>;
|
21
|
-
export declare const hrefOnClick: StoryObj<{
|
22
|
-
handleClick: ReturnType<typeof fn>;
|
23
|
-
}>;
|
24
|
-
export declare const disabled: StoryObj;
|
25
|
-
export declare const className: StoryObj;
|
26
|
-
export declare const alignerClassName: StoryObj;
|
@@ -1,100 +0,0 @@
|
|
1
|
-
import { userEvent, expect, fn } from "storybook/test";
|
2
|
-
import MenuItem from "../index.js";
|
3
|
-
export default {
|
4
|
-
title: "Components/MenuItem/tests",
|
5
|
-
component: MenuItem,
|
6
|
-
parameters: {
|
7
|
-
iframe: {
|
8
|
-
url: "https://reshaped.so/docs/components/menu-item",
|
9
|
-
},
|
10
|
-
chromatic: { disableSnapshot: true },
|
11
|
-
},
|
12
|
-
};
|
13
|
-
export const children = {
|
14
|
-
name: "children",
|
15
|
-
render: () => <MenuItem>Trigger</MenuItem>,
|
16
|
-
play: async ({ canvas }) => {
|
17
|
-
const el = canvas.getByText("Trigger");
|
18
|
-
expect(el).toBeInTheDocument();
|
19
|
-
expect(el.tagName).toBe("DIV");
|
20
|
-
},
|
21
|
-
};
|
22
|
-
export const href = {
|
23
|
-
name: "href",
|
24
|
-
render: () => <MenuItem href="https://reshaped.so">Trigger</MenuItem>,
|
25
|
-
play: async ({ canvas }) => {
|
26
|
-
const el = canvas.getByRole("link");
|
27
|
-
expect(el).toHaveAttribute("href", "https://reshaped.so");
|
28
|
-
},
|
29
|
-
};
|
30
|
-
export const onClick = {
|
31
|
-
name: "onClick",
|
32
|
-
args: {
|
33
|
-
handleClick: fn(),
|
34
|
-
},
|
35
|
-
render: (args) => <MenuItem onClick={args.handleClick}>Trigger</MenuItem>,
|
36
|
-
play: async ({ canvas, args }) => {
|
37
|
-
const { handleClick } = args;
|
38
|
-
const el = canvas.getAllByRole("button")[0];
|
39
|
-
await userEvent.click(el);
|
40
|
-
expect(el).toHaveAttribute("type", "button");
|
41
|
-
expect(handleClick).toHaveBeenCalledTimes(1);
|
42
|
-
expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
|
43
|
-
},
|
44
|
-
};
|
45
|
-
export const hrefOnClick = {
|
46
|
-
name: "href + onClick",
|
47
|
-
args: {
|
48
|
-
handleClick: fn(),
|
49
|
-
},
|
50
|
-
render: (args) => (<MenuItem onClick={(e) => {
|
51
|
-
e.preventDefault();
|
52
|
-
args.handleClick(e);
|
53
|
-
}} href="https://reshaped.so">
|
54
|
-
Trigger
|
55
|
-
</MenuItem>),
|
56
|
-
play: async ({ canvas, args }) => {
|
57
|
-
const { handleClick } = args;
|
58
|
-
const el = canvas.getByRole("link");
|
59
|
-
await userEvent.click(el);
|
60
|
-
expect(el).toHaveAttribute("href", "https://reshaped.so");
|
61
|
-
expect(handleClick).toHaveBeenCalledTimes(1);
|
62
|
-
expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
|
63
|
-
},
|
64
|
-
};
|
65
|
-
export const disabled = {
|
66
|
-
name: "disabled",
|
67
|
-
render: () => (<MenuItem disabled onClick={() => { }}>
|
68
|
-
Trigger
|
69
|
-
</MenuItem>),
|
70
|
-
play: async ({ canvas }) => {
|
71
|
-
const el = canvas.getAllByRole("button")[0];
|
72
|
-
expect(el).toBeDisabled();
|
73
|
-
},
|
74
|
-
};
|
75
|
-
export const className = {
|
76
|
-
name: "className, attributes",
|
77
|
-
render: () => (<div data-testid="root">
|
78
|
-
<MenuItem className="test-classname" attributes={{ id: "test-id" }}>
|
79
|
-
Trigger
|
80
|
-
</MenuItem>
|
81
|
-
</div>),
|
82
|
-
play: async ({ canvas }) => {
|
83
|
-
const root = canvas.getByTestId("root").firstChild;
|
84
|
-
expect(root).toHaveClass("test-classname");
|
85
|
-
expect(root).toHaveAttribute("id", "test-id");
|
86
|
-
},
|
87
|
-
};
|
88
|
-
export const alignerClassName = {
|
89
|
-
name: "aligner, className, attributes",
|
90
|
-
render: () => (<div data-testid="root">
|
91
|
-
<MenuItem.Aligner className="test-classname" attributes={{ id: "test-id" }}>
|
92
|
-
<MenuItem>Trigger</MenuItem>
|
93
|
-
</MenuItem.Aligner>
|
94
|
-
</div>),
|
95
|
-
play: async ({ canvas }) => {
|
96
|
-
const root = canvas.getByTestId("root").firstChild;
|
97
|
-
expect(root).toHaveClass("test-classname");
|
98
|
-
expect(root).toHaveAttribute("id", "test-id");
|
99
|
-
},
|
100
|
-
};
|
@@ -1,31 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { StoryObj } from "@storybook/react-vite";
|
3
|
-
import { fn } from "storybook/test";
|
4
|
-
declare const _default: {
|
5
|
-
title: string;
|
6
|
-
component: React.FC<import("./..").ModalProps> & {
|
7
|
-
Title: React.FC<import("../Modal.types").TitleProps>;
|
8
|
-
Subtitle: React.FC<import("../Modal.types").SubtitleProps>;
|
9
|
-
};
|
10
|
-
parameters: {
|
11
|
-
iframe: {
|
12
|
-
url: string;
|
13
|
-
};
|
14
|
-
chromatic: {
|
15
|
-
disableSnapshot: boolean;
|
16
|
-
};
|
17
|
-
};
|
18
|
-
};
|
19
|
-
export default _default;
|
20
|
-
export declare const renderProps: StoryObj;
|
21
|
-
export declare const handlers: StoryObj<{
|
22
|
-
handleOpen: ReturnType<typeof fn>;
|
23
|
-
handleAfterOpen: ReturnType<typeof fn>;
|
24
|
-
handleClose: ReturnType<typeof fn>;
|
25
|
-
handleAfterClose: ReturnType<typeof fn>;
|
26
|
-
}>;
|
27
|
-
export declare const disableCloseOnClick: StoryObj<{
|
28
|
-
handleClose: ReturnType<typeof fn>;
|
29
|
-
}>;
|
30
|
-
export declare const containerRef: StoryObj;
|
31
|
-
export declare const className: StoryObj;
|
@@ -1,149 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { within, expect, fn, userEvent, waitFor } from "storybook/test";
|
3
|
-
import Button from "../../Button/index.js";
|
4
|
-
import Modal from "../index.js";
|
5
|
-
import useToggle from "../../../hooks/useToggle.js";
|
6
|
-
import { sleep } from "../../../utilities/helpers.js";
|
7
|
-
export default {
|
8
|
-
title: "Components/Modal/tests",
|
9
|
-
component: Modal,
|
10
|
-
parameters: {
|
11
|
-
iframe: {
|
12
|
-
url: "https://reshaped.so/docs/components/modal",
|
13
|
-
},
|
14
|
-
chromatic: { disableSnapshot: true },
|
15
|
-
},
|
16
|
-
};
|
17
|
-
export const renderProps = {
|
18
|
-
name: "children, render props",
|
19
|
-
render: () => (<Modal active className="test-classname" attributes={{ "data-testid": "test-id" }}>
|
20
|
-
<Modal.Title>Title</Modal.Title>
|
21
|
-
Content
|
22
|
-
</Modal>),
|
23
|
-
play: async ({ canvasElement }) => {
|
24
|
-
const canvas = within(canvasElement.ownerDocument.body);
|
25
|
-
const root = canvas.getByText("Content");
|
26
|
-
expect(root).toBeInTheDocument();
|
27
|
-
},
|
28
|
-
};
|
29
|
-
export const handlers = {
|
30
|
-
name: "onOpen, onClose, onAfterOpen, onAfterClose",
|
31
|
-
args: {
|
32
|
-
handleOpen: fn(),
|
33
|
-
handleClose: fn(),
|
34
|
-
handleAfterClose: fn(),
|
35
|
-
handleAfterOpen: fn(),
|
36
|
-
},
|
37
|
-
render: (args) => {
|
38
|
-
const overlayToggle = useToggle();
|
39
|
-
return (<>
|
40
|
-
<Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>
|
41
|
-
<Modal active={overlayToggle.active} onClose={(closeArgs) => {
|
42
|
-
overlayToggle.deactivate();
|
43
|
-
args.handleClose(closeArgs);
|
44
|
-
}} onOpen={args.handleOpen} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
|
45
|
-
<Modal.Title>Title</Modal.Title>
|
46
|
-
Content
|
47
|
-
</Modal>
|
48
|
-
</>);
|
49
|
-
},
|
50
|
-
play: async ({ canvasElement, args }) => {
|
51
|
-
const canvas = within(canvasElement.ownerDocument.body);
|
52
|
-
const trigger = canvas.getAllByRole("button")[0];
|
53
|
-
let overlay;
|
54
|
-
await userEvent.click(trigger);
|
55
|
-
overlay = canvas.getByText("Content");
|
56
|
-
await waitFor(() => {
|
57
|
-
expect(args.handleOpen).toHaveBeenCalledTimes(1);
|
58
|
-
expect(args.handleOpen).toHaveBeenCalledWith();
|
59
|
-
});
|
60
|
-
// Wait for transition
|
61
|
-
await waitFor(() => {
|
62
|
-
expect(args.handleAfterOpen).toHaveBeenCalledTimes(1);
|
63
|
-
expect(args.handleAfterOpen).toHaveBeenCalledWith();
|
64
|
-
});
|
65
|
-
// Close by changing the state after the trigger click
|
66
|
-
await userEvent.click(trigger);
|
67
|
-
// Wait for transition
|
68
|
-
await waitFor(() => {
|
69
|
-
// Changing state doesn't trigger onClose
|
70
|
-
expect(args.handleClose).toHaveBeenCalledTimes(0);
|
71
|
-
expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
|
72
|
-
expect(args.handleAfterClose).toHaveBeenCalledWith();
|
73
|
-
});
|
74
|
-
// Open
|
75
|
-
await userEvent.click(trigger);
|
76
|
-
await sleep(100);
|
77
|
-
overlay = canvas.getAllByRole("button", { hidden: true }).at(-1);
|
78
|
-
// Close by clicking on the overlay
|
79
|
-
await userEvent.click(overlay);
|
80
|
-
await waitFor(() => {
|
81
|
-
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
82
|
-
expect(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
|
83
|
-
expect(args.handleAfterClose).toHaveBeenCalledTimes(2);
|
84
|
-
expect(args.handleAfterClose).toHaveBeenCalledWith();
|
85
|
-
});
|
86
|
-
// Open
|
87
|
-
await userEvent.click(trigger);
|
88
|
-
await sleep(100);
|
89
|
-
// Close by pressing Escape
|
90
|
-
await userEvent.keyboard("{Escape}");
|
91
|
-
await waitFor(() => {
|
92
|
-
expect(args.handleClose).toHaveBeenCalledTimes(2);
|
93
|
-
expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
|
94
|
-
expect(args.handleAfterClose).toHaveBeenCalledTimes(3);
|
95
|
-
expect(args.handleAfterClose).toHaveBeenCalledWith();
|
96
|
-
});
|
97
|
-
},
|
98
|
-
};
|
99
|
-
export const disableCloseOnClick = {
|
100
|
-
name: "disableCloseOnOutsideClick",
|
101
|
-
args: {
|
102
|
-
handleClose: fn(),
|
103
|
-
},
|
104
|
-
render: (args) => (<Modal active disableCloseOnOutsideClick onClose={(closeArgs) => {
|
105
|
-
args.handleClose(closeArgs);
|
106
|
-
}}>
|
107
|
-
<Modal.Title>Title</Modal.Title>
|
108
|
-
Content
|
109
|
-
</Modal>),
|
110
|
-
play: async ({ canvasElement, args }) => {
|
111
|
-
const canvas = within(canvasElement.ownerDocument.body);
|
112
|
-
const overlay = canvas.getByText("Content");
|
113
|
-
await userEvent.click(overlay);
|
114
|
-
expect(args.handleClose).toHaveBeenCalledTimes(0);
|
115
|
-
await userEvent.keyboard("{Escape}");
|
116
|
-
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
117
|
-
},
|
118
|
-
};
|
119
|
-
export const containerRef = {
|
120
|
-
name: "containerRef",
|
121
|
-
render: () => {
|
122
|
-
const containerRef = React.useRef(null);
|
123
|
-
return (<>
|
124
|
-
<div ref={containerRef} data-testid="test-id" style={{ height: 200 }}/>
|
125
|
-
<Modal active containerRef={containerRef}>
|
126
|
-
<Modal.Title>Title</Modal.Title>
|
127
|
-
Content
|
128
|
-
</Modal>
|
129
|
-
</>);
|
130
|
-
},
|
131
|
-
play: ({ canvasElement }) => {
|
132
|
-
const canvas = within(canvasElement.ownerDocument.body);
|
133
|
-
const container = canvas.getByTestId("test-id");
|
134
|
-
const overlay = canvas.getByText("Content");
|
135
|
-
expect(container).toContainElement(overlay);
|
136
|
-
},
|
137
|
-
};
|
138
|
-
export const className = {
|
139
|
-
name: "className, attributes",
|
140
|
-
render: () => (<Modal active className="test-classname" attributes={{ "data-testid": "test-id" }}>
|
141
|
-
<Modal.Title>Title</Modal.Title>
|
142
|
-
Content
|
143
|
-
</Modal>),
|
144
|
-
play: async ({ canvasElement }) => {
|
145
|
-
const canvas = within(canvasElement.ownerDocument.body);
|
146
|
-
const root = canvas.getByTestId("test-id");
|
147
|
-
expect(root).toHaveClass("test-classname");
|
148
|
-
},
|
149
|
-
};
|
@@ -1,28 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { StoryObj } from "@storybook/react-vite";
|
3
|
-
import { fn } from "storybook/test";
|
4
|
-
declare const _default: {
|
5
|
-
title: string;
|
6
|
-
component: React.FC<import("./..").OverlayProps>;
|
7
|
-
parameters: {
|
8
|
-
iframe: {
|
9
|
-
url: string;
|
10
|
-
};
|
11
|
-
chromatic: {
|
12
|
-
disableSnapshot: boolean;
|
13
|
-
};
|
14
|
-
};
|
15
|
-
};
|
16
|
-
export default _default;
|
17
|
-
export declare const renderProps: StoryObj;
|
18
|
-
export declare const handlers: StoryObj<{
|
19
|
-
handleOpen: ReturnType<typeof fn>;
|
20
|
-
handleAfterOpen: ReturnType<typeof fn>;
|
21
|
-
handleClose: ReturnType<typeof fn>;
|
22
|
-
handleAfterClose: ReturnType<typeof fn>;
|
23
|
-
}>;
|
24
|
-
export declare const disableCloseOnClick: StoryObj<{
|
25
|
-
handleClose: ReturnType<typeof fn>;
|
26
|
-
}>;
|
27
|
-
export declare const containerRef: StoryObj;
|
28
|
-
export declare const className: StoryObj;
|
@@ -1,148 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import { within, expect, fn, userEvent, waitFor } from "storybook/test";
|
3
|
-
import Button from "../../Button/index.js";
|
4
|
-
import Overlay from "../index.js";
|
5
|
-
import useToggle from "../../../hooks/useToggle.js";
|
6
|
-
import { sleep } from "../../../utilities/helpers.js";
|
7
|
-
export default {
|
8
|
-
title: "Utility components/Overlay/tests",
|
9
|
-
component: Overlay,
|
10
|
-
parameters: {
|
11
|
-
iframe: {
|
12
|
-
url: "https://reshaped.so/docs/utilities/overlay",
|
13
|
-
},
|
14
|
-
chromatic: { disableSnapshot: true },
|
15
|
-
},
|
16
|
-
};
|
17
|
-
export const renderProps = {
|
18
|
-
name: "children, render props",
|
19
|
-
render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
|
20
|
-
{(args) => (args.active ? "Opened" : "Closed")}
|
21
|
-
</Overlay>),
|
22
|
-
play: async ({ canvasElement }) => {
|
23
|
-
const canvas = within(canvasElement.ownerDocument.body);
|
24
|
-
const root = canvas.getByText("Opened");
|
25
|
-
expect(root).toBeInTheDocument();
|
26
|
-
},
|
27
|
-
};
|
28
|
-
export const handlers = {
|
29
|
-
name: "onOpen, onClose, onAfterOpen, onAfterClose",
|
30
|
-
args: {
|
31
|
-
handleOpen: fn(),
|
32
|
-
handleClose: fn(),
|
33
|
-
handleAfterClose: fn(),
|
34
|
-
handleAfterOpen: fn(),
|
35
|
-
},
|
36
|
-
render: (args) => {
|
37
|
-
const overlayToggle = useToggle();
|
38
|
-
return (<>
|
39
|
-
<Button onClick={() => overlayToggle.toggle()}>Open overlay</Button>
|
40
|
-
<Overlay active={overlayToggle.active} onClose={(closeArgs) => {
|
41
|
-
overlayToggle.deactivate();
|
42
|
-
args.handleClose(closeArgs);
|
43
|
-
}} onOpen={args.handleOpen} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
|
44
|
-
Content
|
45
|
-
</Overlay>
|
46
|
-
</>);
|
47
|
-
},
|
48
|
-
play: async ({ canvasElement, args }) => {
|
49
|
-
const canvas = within(canvasElement.ownerDocument.body);
|
50
|
-
const trigger = canvas.getAllByRole("button")[0];
|
51
|
-
let overlay;
|
52
|
-
await userEvent.click(trigger);
|
53
|
-
overlay = canvas.getByText("Content");
|
54
|
-
await waitFor(() => {
|
55
|
-
expect(args.handleOpen).toHaveBeenCalledTimes(1);
|
56
|
-
expect(args.handleOpen).toHaveBeenCalledWith();
|
57
|
-
});
|
58
|
-
// Wait for transition
|
59
|
-
await waitFor(() => {
|
60
|
-
expect(args.handleAfterOpen).toHaveBeenCalledTimes(1);
|
61
|
-
expect(args.handleAfterOpen).toHaveBeenCalledWith();
|
62
|
-
});
|
63
|
-
// Close by changing the state after the trigger click
|
64
|
-
await userEvent.click(trigger);
|
65
|
-
// Changing state doesn't trigger onClose
|
66
|
-
expect(args.handleClose).toHaveBeenCalledTimes(0);
|
67
|
-
// Wait for transition
|
68
|
-
await waitFor(() => {
|
69
|
-
expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
|
70
|
-
expect(args.handleAfterClose).toHaveBeenCalledWith();
|
71
|
-
});
|
72
|
-
// Open
|
73
|
-
await userEvent.click(trigger);
|
74
|
-
overlay = canvas.getByText("Content");
|
75
|
-
// TODO: Fails CLI tests in Storybook without a timeout
|
76
|
-
await sleep(100);
|
77
|
-
// Close by clicking on the overlay
|
78
|
-
await userEvent.click(overlay);
|
79
|
-
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
80
|
-
expect(args.handleClose).toHaveBeenCalledWith({ reason: "overlay-click" });
|
81
|
-
await waitFor(() => {
|
82
|
-
expect(args.handleAfterClose).toHaveBeenCalledTimes(2);
|
83
|
-
expect(args.handleAfterClose).toHaveBeenCalledWith();
|
84
|
-
});
|
85
|
-
// Open
|
86
|
-
await userEvent.click(trigger);
|
87
|
-
// TODO: Fails CLI tests in Storybook without a timeout
|
88
|
-
await sleep(100);
|
89
|
-
// Close by pressing Escape
|
90
|
-
await userEvent.keyboard("{Escape}");
|
91
|
-
expect(args.handleClose).toHaveBeenCalledTimes(2);
|
92
|
-
expect(args.handleClose).toHaveBeenCalledWith({ reason: "escape-key" });
|
93
|
-
await waitFor(() => {
|
94
|
-
expect(args.handleAfterClose).toHaveBeenCalledTimes(3);
|
95
|
-
expect(args.handleAfterClose).toHaveBeenCalledWith();
|
96
|
-
});
|
97
|
-
},
|
98
|
-
};
|
99
|
-
export const disableCloseOnClick = {
|
100
|
-
name: "disableCloseOnClick",
|
101
|
-
args: {
|
102
|
-
handleClose: fn(),
|
103
|
-
},
|
104
|
-
render: (args) => (<Overlay active disableCloseOnClick onClose={(closeArgs) => {
|
105
|
-
args.handleClose(closeArgs);
|
106
|
-
}}>
|
107
|
-
Content
|
108
|
-
</Overlay>),
|
109
|
-
play: async ({ canvasElement, args }) => {
|
110
|
-
const canvas = within(canvasElement.ownerDocument.body);
|
111
|
-
const overlay = canvas.getByText("Content");
|
112
|
-
await userEvent.click(overlay);
|
113
|
-
// TODO: Fails CLI tests in Storybook without a timeout
|
114
|
-
await sleep(100);
|
115
|
-
expect(args.handleClose).toHaveBeenCalledTimes(0);
|
116
|
-
await userEvent.keyboard("{Escape}");
|
117
|
-
expect(args.handleClose).toHaveBeenCalledTimes(1);
|
118
|
-
},
|
119
|
-
};
|
120
|
-
export const containerRef = {
|
121
|
-
name: "containerRef",
|
122
|
-
render: () => {
|
123
|
-
const containerRef = React.useRef(null);
|
124
|
-
return (<>
|
125
|
-
<div ref={containerRef} data-testid="test-id" style={{ height: 200 }}/>
|
126
|
-
<Overlay active containerRef={containerRef}>
|
127
|
-
Content
|
128
|
-
</Overlay>
|
129
|
-
</>);
|
130
|
-
},
|
131
|
-
play: ({ canvasElement }) => {
|
132
|
-
const canvas = within(canvasElement.ownerDocument.body);
|
133
|
-
const container = canvas.getByTestId("test-id");
|
134
|
-
const overlay = canvas.getByText("Content");
|
135
|
-
expect(container).toContainElement(overlay);
|
136
|
-
},
|
137
|
-
};
|
138
|
-
export const className = {
|
139
|
-
name: "className, attributes",
|
140
|
-
render: () => (<Overlay active className="test-classname" attributes={{ "data-testid": "test-id" }}>
|
141
|
-
Content
|
142
|
-
</Overlay>),
|
143
|
-
play: async ({ canvasElement }) => {
|
144
|
-
const canvas = within(canvasElement.ownerDocument.body);
|
145
|
-
const root = canvas.getByTestId("test-id");
|
146
|
-
expect(root).toHaveClass("test-classname");
|
147
|
-
},
|
148
|
-
};
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react-vite";
|
2
|
-
import { fn } from "storybook/test";
|
3
|
-
declare const _default: {
|
4
|
-
title: string;
|
5
|
-
component: import("react").FC<import("./..").PaginationProps>;
|
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 defaultPage: StoryObj<{
|
18
|
-
handleChange: ReturnType<typeof fn>;
|
19
|
-
}>;
|
20
|
-
export declare const page: StoryObj<{
|
21
|
-
handleChange: ReturnType<typeof fn>;
|
22
|
-
}>;
|
23
|
-
export declare const className: StoryObj;
|
@@ -1,86 +0,0 @@
|
|
1
|
-
import { expect, within, fn, userEvent } from "storybook/test";
|
2
|
-
import Pagination from "../index.js";
|
3
|
-
export default {
|
4
|
-
title: "Components/Pagination/tests",
|
5
|
-
component: Pagination,
|
6
|
-
parameters: {
|
7
|
-
iframe: {
|
8
|
-
url: "https://reshaped.so/docs/components/pagination",
|
9
|
-
},
|
10
|
-
chromatic: { disableSnapshot: true },
|
11
|
-
},
|
12
|
-
};
|
13
|
-
export const render = {
|
14
|
-
name: "rendering",
|
15
|
-
render: () => (<div data-testid="root">
|
16
|
-
<Pagination total={10} previousAriaLabel="Previous" nextAriaLabel="Next" pageAriaLabel={(args) => `Page ${args.page}`}/>
|
17
|
-
</div>),
|
18
|
-
play: async ({ canvas }) => {
|
19
|
-
const root = within(canvas.getByTestId("root"));
|
20
|
-
const buttons = root.getAllByRole("button");
|
21
|
-
const pages = buttons.slice(1, -1);
|
22
|
-
const prevButton = root.getByLabelText("Previous");
|
23
|
-
const nextButton = root.getByLabelText("Next");
|
24
|
-
const firstPageButton = root.getByLabelText("Page 1");
|
25
|
-
expect(buttons.length).toBe(8);
|
26
|
-
expect(prevButton).toEqual(buttons[0]);
|
27
|
-
expect(prevButton).toBeDisabled();
|
28
|
-
expect(nextButton).toEqual(buttons.at(-1));
|
29
|
-
expect(nextButton).not.toBeDisabled();
|
30
|
-
expect(firstPageButton).toBeInTheDocument();
|
31
|
-
expect(firstPageButton).toEqual(pages[0]);
|
32
|
-
expect(firstPageButton).toHaveAttribute("aria-current", "true");
|
33
|
-
},
|
34
|
-
};
|
35
|
-
export const defaultPage = {
|
36
|
-
name: "defaultPage, uncontrolled",
|
37
|
-
args: {
|
38
|
-
handleChange: fn(),
|
39
|
-
},
|
40
|
-
render: (args) => (<div data-testid="root">
|
41
|
-
<Pagination total={10} defaultPage={2} onChange={args.handleChange} previousAriaLabel="Previous" nextAriaLabel="Next"/>
|
42
|
-
</div>),
|
43
|
-
play: async ({ canvas, args }) => {
|
44
|
-
const root = within(canvas.getByTestId("root"));
|
45
|
-
const buttons = root.getAllByRole("button");
|
46
|
-
const pages = buttons.slice(1, -1);
|
47
|
-
expect(pages[1]).toHaveAttribute("aria-current");
|
48
|
-
await userEvent.click(pages[2]);
|
49
|
-
expect(args.handleChange).toHaveBeenCalledTimes(1);
|
50
|
-
expect(args.handleChange).toHaveBeenCalledWith({ page: 3 });
|
51
|
-
expect(pages[1]).toHaveAttribute("aria-current", "false");
|
52
|
-
expect(pages[2]).toHaveAttribute("aria-current", "true");
|
53
|
-
},
|
54
|
-
};
|
55
|
-
export const page = {
|
56
|
-
name: "page, controlled",
|
57
|
-
args: {
|
58
|
-
handleChange: fn(),
|
59
|
-
},
|
60
|
-
render: (args) => (<div data-testid="root">
|
61
|
-
<Pagination total={10} page={2} onChange={args.handleChange} previousAriaLabel="Previous" nextAriaLabel="Next"/>
|
62
|
-
</div>),
|
63
|
-
play: async ({ canvas, args }) => {
|
64
|
-
const root = within(canvas.getByTestId("root"));
|
65
|
-
const buttons = root.getAllByRole("button");
|
66
|
-
const pages = buttons.slice(1, -1);
|
67
|
-
expect(pages[1]).toHaveAttribute("aria-current");
|
68
|
-
await userEvent.click(pages[2]);
|
69
|
-
expect(args.handleChange).toHaveBeenCalledTimes(1);
|
70
|
-
expect(args.handleChange).toHaveBeenCalledWith({ page: 3 });
|
71
|
-
// Stays the same because it's controlled
|
72
|
-
expect(pages[1]).toHaveAttribute("aria-current", "true");
|
73
|
-
expect(pages[2]).toHaveAttribute("aria-current", "false");
|
74
|
-
},
|
75
|
-
};
|
76
|
-
export const className = {
|
77
|
-
name: "className, attributes",
|
78
|
-
render: () => (<div data-testid="root">
|
79
|
-
<Pagination className="test-classname" attributes={{ id: "test-id" }} total={10} previousAriaLabel="Previous" nextAriaLabel="Next"/>
|
80
|
-
</div>),
|
81
|
-
play: async ({ canvas }) => {
|
82
|
-
const root = canvas.getByTestId("root").firstChild;
|
83
|
-
expect(root).toHaveClass("test-classname");
|
84
|
-
expect(root).toHaveAttribute("id", "test-id");
|
85
|
-
},
|
86
|
-
};
|
@@ -1,16 +0,0 @@
|
|
1
|
-
import { StoryObj } from "@storybook/react-vite";
|
2
|
-
declare const _default: {
|
3
|
-
title: string;
|
4
|
-
component: import("react").FC<import("./..").ProgressProps>;
|
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;
|
@@ -1,35 +0,0 @@
|
|
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
|
-
};
|