reshaped 3.8.0-canary.7 → 3.8.0-canary.9

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.
Files changed (214) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/dist/bundle.css +1 -1
  3. package/dist/bundle.js +9 -9
  4. package/dist/components/Accordion/AccordionControlled.js +1 -0
  5. package/dist/components/Actionable/Actionable.js +1 -0
  6. package/dist/components/Actionable/Actionable.module.css +1 -1
  7. package/dist/components/Alert/tests/Alert.stories.d.ts +6 -5
  8. package/dist/components/Alert/tests/Alert.stories.js +15 -2
  9. package/dist/components/Badge/Badge.module.css +1 -1
  10. package/dist/components/Badge/tests/Badge.stories.d.ts +5 -0
  11. package/dist/components/Badge/tests/Badge.stories.js +34 -0
  12. package/dist/components/Breadcrumbs/Breadcrumbs.js +1 -0
  13. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.d.ts +8 -4
  14. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.js +57 -1
  15. package/dist/components/Button/tests/Button.stories.d.ts +54 -12
  16. package/dist/components/Button/tests/Button.stories.js +725 -588
  17. package/dist/components/Calendar/CalendarMonth.js +1 -0
  18. package/dist/components/Card/Card.module.css +1 -1
  19. package/dist/components/Card/tests/Card.stories.d.ts +28 -6
  20. package/dist/components/Card/tests/Card.stories.js +110 -65
  21. package/dist/components/Carousel/Carousel.js +1 -0
  22. package/dist/components/Carousel/Carousel.module.css +1 -1
  23. package/dist/components/Checkbox/Checkbox.module.css +1 -1
  24. package/dist/components/Checkbox/tests/Checkbox.stories.d.ts +20 -4
  25. package/dist/components/Checkbox/tests/Checkbox.stories.js +150 -79
  26. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.d.ts +9 -2
  27. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.js +67 -35
  28. package/dist/components/Container/tests/Container.stories.d.ts +2 -0
  29. package/dist/components/Container/tests/Container.stories.js +14 -0
  30. package/dist/components/ContextMenu/tests/ContextMenu.stories.d.ts +10 -1
  31. package/dist/components/ContextMenu/tests/ContextMenu.stories.js +57 -13
  32. package/dist/components/Dismissible/tests/Dismissible.stories.d.ts +5 -0
  33. package/dist/components/Dismissible/tests/Dismissible.stories.js +30 -1
  34. package/dist/components/Divider/tests/Divider.stories.d.ts +8 -3
  35. package/dist/components/Divider/tests/Divider.stories.js +71 -41
  36. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +35 -6
  37. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.js +222 -115
  38. package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.d.ts +0 -15
  39. package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.js +0 -106
  40. package/dist/components/FileUpload/FileUpload.module.css +1 -1
  41. package/dist/components/Flyout/Flyout.module.css +1 -1
  42. package/dist/components/Flyout/FlyoutContent.js +3 -0
  43. package/dist/components/Flyout/FlyoutControlled.js +6 -1
  44. package/dist/components/Flyout/utilities/flyout.js +0 -1
  45. package/dist/components/FormControl/FormControl.context.d.ts +1 -1
  46. package/dist/components/FormControl/tests/FormControl.stories.d.ts +2 -0
  47. package/dist/components/FormControl/tests/FormControl.stories.js +35 -0
  48. package/dist/components/Hidden/tests/Hidden.stories.d.ts +2 -0
  49. package/dist/components/Hidden/tests/Hidden.stories.js +9 -0
  50. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.d.ts +2 -0
  51. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.js +9 -0
  52. package/dist/components/Hotkey/tests/Hotkey.stories.d.ts +2 -0
  53. package/dist/components/Hotkey/tests/Hotkey.stories.js +15 -0
  54. package/dist/components/Icon/tests/Icon.stories.d.ts +3 -0
  55. package/dist/components/Icon/tests/Icon.stories.js +23 -0
  56. package/dist/components/Link/tests/Link.stories.d.ts +28 -5
  57. package/dist/components/Link/tests/Link.stories.js +141 -58
  58. package/dist/components/Link/tests/Link.test.stories.d.ts +0 -13
  59. package/dist/components/Link/tests/Link.test.stories.js +0 -85
  60. package/dist/components/Loader/tests/Loader.stories.d.ts +11 -2
  61. package/dist/components/Loader/tests/Loader.stories.js +52 -25
  62. package/dist/components/Loader/tests/Loader.test.stories.d.ts +0 -3
  63. package/dist/components/Loader/tests/Loader.test.stories.js +0 -21
  64. package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +37 -7
  65. package/dist/components/MenuItem/tests/MenuItem.stories.js +218 -112
  66. package/dist/components/Modal/Modal.js +1 -1
  67. package/dist/components/Modal/Modal.module.css +1 -1
  68. package/dist/components/Modal/tests/Modal.stories.d.ts +53 -10
  69. package/dist/components/Modal/tests/Modal.stories.js +366 -214
  70. package/dist/components/Overlay/Overlay.js +1 -0
  71. package/dist/components/Overlay/tests/Overlay.stories.d.ts +15 -1
  72. package/dist/components/Overlay/tests/Overlay.stories.js +135 -1
  73. package/dist/components/Pagination/tests/Pagination.stories.d.ts +14 -1
  74. package/dist/components/Pagination/tests/Pagination.stories.js +93 -15
  75. package/dist/components/PinField/tests/PinField.stories.d.ts +1 -1
  76. package/dist/components/PinField/tests/PinField.stories.js +1 -1
  77. package/dist/components/Popover/Popover.module.css +1 -1
  78. package/dist/components/Progress/tests/Progress.stories.d.ts +19 -4
  79. package/dist/components/Progress/tests/Progress.stories.js +85 -49
  80. package/dist/components/Radio/Radio.module.css +1 -1
  81. package/dist/components/Radio/tests/Radio.stories.d.ts +25 -4
  82. package/dist/components/Radio/tests/Radio.stories.js +147 -65
  83. package/dist/components/RadioGroup/tests/RadioGroup.stories.d.ts +9 -2
  84. package/dist/components/RadioGroup/tests/RadioGroup.stories.js +64 -38
  85. package/dist/components/Reshaped/Reshaped.css +1 -1
  86. package/dist/components/Scrim/tests/Scrim.stories.d.ts +10 -2
  87. package/dist/components/Scrim/tests/Scrim.stories.js +51 -31
  88. package/dist/components/ScrollArea/ScrollArea.module.css +1 -1
  89. package/dist/components/Select/Select.module.css +1 -1
  90. package/dist/components/Select/Select.types.d.ts +38 -11
  91. package/dist/components/Select/SelectCustom.js +2 -1
  92. package/dist/components/Select/SelectCustomControlled.js +24 -9
  93. package/dist/components/Select/SelectCustomUncontrolled.js +10 -7
  94. package/dist/components/Select/SelectTrigger.js +1 -1
  95. package/dist/components/Select/tests/Select.stories.d.ts +3 -0
  96. package/dist/components/Select/tests/Select.stories.js +91 -34
  97. package/dist/components/Skeleton/tests/Skeleton.stories.d.ts +10 -2
  98. package/dist/components/Skeleton/tests/Skeleton.stories.js +46 -28
  99. package/dist/components/Slider/Slider.module.css +1 -1
  100. package/dist/components/Stepper/tests/Stepper.stories.d.ts +18 -4
  101. package/dist/components/Stepper/tests/Stepper.stories.js +99 -70
  102. package/dist/components/Switch/Switch.module.css +1 -1
  103. package/dist/components/Switch/tests/Switch.stories.d.ts +10 -2
  104. package/dist/components/Switch/tests/Switch.stories.js +77 -23
  105. package/dist/components/Switch/tests/Switch.test.stories.d.ts +0 -10
  106. package/dist/components/Switch/tests/Switch.test.stories.js +0 -68
  107. package/dist/components/Table/Table.module.css +1 -1
  108. package/dist/components/Table/tests/Table.stories.d.ts +25 -5
  109. package/dist/components/Table/tests/Table.stories.js +274 -177
  110. package/dist/components/Table/tests/Table.test.stories.d.ts +0 -5
  111. package/dist/components/Table/tests/Table.test.stories.js +0 -82
  112. package/dist/components/Tabs/Tabs.module.css +1 -1
  113. package/dist/components/Tabs/TabsControlled.js +1 -0
  114. package/dist/components/TextArea/TextArea.module.css +1 -1
  115. package/dist/components/TextArea/tests/TextArea.stories.d.ts +41 -9
  116. package/dist/components/TextArea/tests/TextArea.stories.js +179 -93
  117. package/dist/components/TextField/TextField.js +1 -1
  118. package/dist/components/TextField/TextField.module.css +1 -1
  119. package/dist/components/TextField/tests/TextField.stories.d.ts +41 -11
  120. package/dist/components/TextField/tests/TextField.stories.js +206 -132
  121. package/dist/components/TextField/tests/TextField.test.stories.d.ts +0 -13
  122. package/dist/components/TextField/tests/TextField.test.stories.js +0 -88
  123. package/dist/components/Theme/Theme.module.css +1 -1
  124. package/dist/components/Timeline/tests/Timeline.stories.d.ts +10 -2
  125. package/dist/components/Timeline/tests/Timeline.stories.js +69 -42
  126. package/dist/components/Timeline/tests/Timeline.test.stories.d.ts +0 -2
  127. package/dist/components/Timeline/tests/Timeline.test.stories.js +0 -21
  128. package/dist/components/Toast/ToastContainer.js +1 -0
  129. package/dist/components/Toast/ToastRegion.js +1 -0
  130. package/dist/components/Toast/tests/Toast.stories.d.ts +32 -8
  131. package/dist/components/Toast/tests/Toast.stories.js +111 -37
  132. package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js +1 -0
  133. package/dist/components/Tooltip/tests/Tooltip.stories.d.ts +18 -4
  134. package/dist/components/Tooltip/tests/Tooltip.stories.js +139 -107
  135. package/dist/components/Tooltip/tests/Tooltip.test.stories.d.ts +0 -6
  136. package/dist/components/Tooltip/tests/Tooltip.test.stories.js +0 -29
  137. package/dist/components/View/View.js +1 -0
  138. package/dist/components/View/tests/View.stories.d.ts +4 -0
  139. package/dist/components/View/tests/View.stories.js +39 -0
  140. package/dist/components/_private/Expandable/Expandable.js +3 -1
  141. package/dist/components/_private/Portal/Portal.js +4 -1
  142. package/dist/hooks/_private/usePrevious.js +1 -0
  143. package/dist/hooks/tests/useDrag.stories.js +1 -1
  144. package/dist/styles/resolvers/align/align.css +1 -1
  145. package/dist/styles/resolvers/aspectRatio/aspectRatio.css +1 -1
  146. package/dist/styles/resolvers/bleed/bleed.module.css +1 -1
  147. package/dist/styles/resolvers/justify/justify.css +1 -1
  148. package/dist/styles/resolvers/maxHeight/maxHeight.module.css +1 -1
  149. package/dist/styles/resolvers/maxWidth/maxWidth.module.css +1 -1
  150. package/dist/styles/resolvers/minHeight/minHeight.module.css +1 -1
  151. package/dist/styles/resolvers/minWidth/minWidth.module.css +1 -1
  152. package/dist/styles/resolvers/position/position.css +1 -1
  153. package/dist/styles/resolvers/textAlign/textAlign.css +1 -1
  154. package/dist/styles/resolvers/width/width.module.css +1 -1
  155. package/dist/utilities/scroll/disable.js +2 -2
  156. package/package.json +21 -21
  157. package/dist/components/Alert/tests/Alert.test.stories.d.ts +0 -15
  158. package/dist/components/Alert/tests/Alert.test.stories.js +0 -26
  159. package/dist/components/Badge/tests/Badge.test.stories.d.ts +0 -20
  160. package/dist/components/Badge/tests/Badge.test.stories.js +0 -46
  161. package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.d.ts +0 -23
  162. package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.js +0 -76
  163. package/dist/components/Button/tests/Button.test.stories.d.ts +0 -28
  164. package/dist/components/Button/tests/Button.test.stories.js +0 -135
  165. package/dist/components/Card/tests/Card.test.stories.d.ts +0 -35
  166. package/dist/components/Card/tests/Card.test.stories.js +0 -54
  167. package/dist/components/Checkbox/tests/Checkbox.test.stories.d.ts +0 -25
  168. package/dist/components/Checkbox/tests/Checkbox.test.stories.js +0 -104
  169. package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.d.ts +0 -22
  170. package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.js +0 -78
  171. package/dist/components/Container/tests/Container.test.stories.d.ts +0 -15
  172. package/dist/components/Container/tests/Container.test.stories.js +0 -26
  173. package/dist/components/ContextMenu/tests/ContextMenu.test.stories.d.ts +0 -25
  174. package/dist/components/ContextMenu/tests/ContextMenu.test.stories.js +0 -53
  175. package/dist/components/Dismissible/tests/Dismissible.test.stories.d.ts +0 -19
  176. package/dist/components/Dismissible/tests/Dismissible.test.stories.js +0 -42
  177. package/dist/components/Divider/tests/Divider.test.stories.d.ts +0 -18
  178. package/dist/components/Divider/tests/Divider.test.stories.js +0 -47
  179. package/dist/components/FormControl/tests/FormControl.test.stories.d.ts +0 -20
  180. package/dist/components/FormControl/tests/FormControl.test.stories.js +0 -49
  181. package/dist/components/Hidden/tests/Hidden.test.stories.d.ts +0 -15
  182. package/dist/components/Hidden/tests/Hidden.test.stories.js +0 -20
  183. package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.d.ts +0 -15
  184. package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.js +0 -20
  185. package/dist/components/Hotkey/tests/Hotkey.test.stories.d.ts +0 -15
  186. package/dist/components/Hotkey/tests/Hotkey.test.stories.js +0 -26
  187. package/dist/components/Icon/tests/Icon.test.stories.d.ts +0 -16
  188. package/dist/components/Icon/tests/Icon.test.stories.js +0 -35
  189. package/dist/components/MenuItem/tests/MenuItem.test.stories.d.ts +0 -27
  190. package/dist/components/MenuItem/tests/MenuItem.test.stories.js +0 -116
  191. package/dist/components/Modal/tests/Modal.test.stories.d.ts +0 -31
  192. package/dist/components/Modal/tests/Modal.test.stories.js +0 -149
  193. package/dist/components/Overlay/tests/Overlay.test.stories.d.ts +0 -28
  194. package/dist/components/Overlay/tests/Overlay.test.stories.js +0 -148
  195. package/dist/components/Pagination/tests/Pagination.test.stories.d.ts +0 -23
  196. package/dist/components/Pagination/tests/Pagination.test.stories.js +0 -86
  197. package/dist/components/Progress/tests/Progress.test.stories.d.ts +0 -16
  198. package/dist/components/Progress/tests/Progress.test.stories.js +0 -35
  199. package/dist/components/Radio/tests/Radio.test.stories.d.ts +0 -30
  200. package/dist/components/Radio/tests/Radio.test.stories.js +0 -118
  201. package/dist/components/RadioGroup/tests/RadioGroup.test.stories.d.ts +0 -22
  202. package/dist/components/RadioGroup/tests/RadioGroup.test.stories.js +0 -78
  203. package/dist/components/Scrim/tests/Scrim.test.stories.d.ts +0 -15
  204. package/dist/components/Scrim/tests/Scrim.test.stories.js +0 -25
  205. package/dist/components/Skeleton/tests/Skeleton.test.stories.d.ts +0 -15
  206. package/dist/components/Skeleton/tests/Skeleton.test.stories.js +0 -23
  207. package/dist/components/Stepper/tests/Stepper.test.stories.d.ts +0 -20
  208. package/dist/components/Stepper/tests/Stepper.test.stories.js +0 -28
  209. package/dist/components/TextArea/tests/TextArea.test.stories.d.ts +0 -28
  210. package/dist/components/TextArea/tests/TextArea.test.stories.js +0 -99
  211. package/dist/components/Toast/tests/Toast.test.stories.d.ts +0 -16
  212. package/dist/components/Toast/tests/Toast.test.stories.js +0 -101
  213. package/dist/components/View/tests/View.test.stories.d.ts +0 -24
  214. package/dist/components/View/tests/View.test.stories.js +0 -50
@@ -1,28 +0,0 @@
1
- import { expect } from "storybook/test";
2
- import Stepper from "../index.js";
3
- export default {
4
- title: "Components/Stepper/tests",
5
- component: Stepper,
6
- parameters: {
7
- iframe: {
8
- url: "https://reshaped.so/docs/components/stepper",
9
- },
10
- chromatic: { disableSnapshot: true },
11
- },
12
- };
13
- export const className = {
14
- name: "className, attributes",
15
- render: () => (<div data-testid="root">
16
- <Stepper className="test-classname" attributes={{ id: "test-id" }}>
17
- <Stepper.Item attributes={{ id: "test-item-id" }} className="test-item-classname"/>
18
- </Stepper>
19
- </div>),
20
- play: async ({ canvas }) => {
21
- const root = canvas.getByTestId("root").firstChild;
22
- const item = root?.firstChild;
23
- expect(root).toHaveClass("test-classname");
24
- expect(root).toHaveAttribute("id", "test-id");
25
- expect(item).toHaveClass("test-item-classname");
26
- expect(item).toHaveAttribute("id", "test-item-id");
27
- },
28
- };
@@ -1,28 +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("./..").TextAreaProps> & {
6
- Aligner: import("react").FC<import("../../_private/Aligner").AlignerProps>;
7
- };
8
- parameters: {
9
- iframe: {
10
- url: string;
11
- };
12
- chromatic: {
13
- disableSnapshot: boolean;
14
- };
15
- };
16
- };
17
- export default _default;
18
- export declare const render: StoryObj;
19
- export declare const placeholder: StoryObj;
20
- export declare const id: StoryObj;
21
- export declare const disabled: StoryObj;
22
- export declare const defaultValue: StoryObj<{
23
- handleChange: ReturnType<typeof fn>;
24
- }>;
25
- export declare const value: StoryObj<{
26
- handleChange: ReturnType<typeof fn>;
27
- }>;
28
- export declare const className: StoryObj;
@@ -1,99 +0,0 @@
1
- import { expect, fn, userEvent } from "storybook/test";
2
- import TextArea from "../index.js";
3
- export default {
4
- title: "Components/TextArea/tests",
5
- component: TextArea,
6
- parameters: {
7
- iframe: {
8
- url: "https://reshaped.so/docs/components/text-area",
9
- },
10
- chromatic: { disableSnapshot: true },
11
- },
12
- };
13
- export const render = {
14
- name: "base",
15
- render: () => <TextArea name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
16
- play: async ({ canvas }) => {
17
- const input = canvas.getByRole("textbox");
18
- expect(input).toHaveAttribute("name", "test-name");
19
- expect(input).toHaveAccessibleName("Label");
20
- },
21
- };
22
- export const placeholder = {
23
- name: "placeholder",
24
- render: () => (<TextArea name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
25
- play: async ({ canvas }) => {
26
- const input = canvas.getByRole("textbox");
27
- expect(input).toHaveValue("");
28
- expect(input).toHaveAttribute("placeholder", "Placeholder");
29
- },
30
- };
31
- export const id = {
32
- name: "id",
33
- render: () => (<TextArea name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
34
- play: async ({ canvas }) => {
35
- const input = canvas.getByRole("textbox");
36
- expect(input).toHaveAttribute("id", "test-id");
37
- },
38
- };
39
- export const disabled = {
40
- name: "disabled",
41
- render: () => <TextArea name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
42
- play: async ({ canvas }) => {
43
- const input = canvas.getByRole("textbox");
44
- expect(input).toBeDisabled();
45
- },
46
- };
47
- export const defaultValue = {
48
- name: "defaultValue, uncontrolled",
49
- args: {
50
- handleChange: fn(),
51
- },
52
- render: (args) => (<TextArea name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
53
- play: async ({ canvas, args }) => {
54
- const input = canvas.getByRole("textbox");
55
- expect(input).toHaveValue("value");
56
- input.focus();
57
- await userEvent.keyboard("2");
58
- expect(args.handleChange).toBeCalledTimes(1);
59
- expect(args.handleChange).toHaveBeenCalledWith({
60
- name: "test-name",
61
- value: "2value",
62
- event: expect.objectContaining({ target: input }),
63
- });
64
- expect(input).toHaveValue("2value");
65
- },
66
- };
67
- export const value = {
68
- name: "value, controlled",
69
- args: {
70
- handleChange: fn(),
71
- },
72
- render: (args) => (<TextArea name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
73
- play: async ({ canvas, args }) => {
74
- const input = canvas.getByRole("textbox");
75
- expect(input).toHaveValue("value");
76
- input.focus();
77
- await userEvent.keyboard("2");
78
- expect(args.handleChange).toBeCalledTimes(1);
79
- expect(args.handleChange).toHaveBeenCalledWith({
80
- name: "test-name",
81
- value: "2value",
82
- event: expect.objectContaining({ target: input }),
83
- });
84
- expect(input).toHaveValue("value");
85
- },
86
- };
87
- export const className = {
88
- name: "className, attributes",
89
- render: () => (<div data-testid="root">
90
- <TextArea className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
91
- </div>),
92
- play: async ({ canvas }) => {
93
- const root = canvas.getByTestId("root").firstChild;
94
- const input = canvas.getByRole("textbox");
95
- expect(root).toHaveClass("test-classname");
96
- expect(root).toHaveAttribute("id", "test-id");
97
- expect(input).toHaveAttribute("id", "test-input-id");
98
- },
99
- };
@@ -1,16 +0,0 @@
1
- import { StoryObj } from "@storybook/react-vite";
2
- declare const _default: {
3
- title: string;
4
- parameters: {
5
- iframe: {
6
- url: string;
7
- };
8
- chromatic: {
9
- disableSnapshot: boolean;
10
- };
11
- };
12
- };
13
- export default _default;
14
- export declare const base: StoryObj;
15
- export declare const nested: StoryObj;
16
- export declare const className: StoryObj;
@@ -1,101 +0,0 @@
1
- import { expect, within, userEvent, waitFor } from "storybook/test";
2
- import { useToast, ToastProvider } from "../index.js";
3
- import Button from "../../Button/index.js";
4
- export default {
5
- title: "Components/Toast/tests",
6
- parameters: {
7
- iframe: {
8
- url: "https://reshaped.so/docs/components/toast",
9
- },
10
- chromatic: { disableSnapshot: true },
11
- },
12
- };
13
- export const base = {
14
- name: "base",
15
- render: () => {
16
- const toast = useToast();
17
- return (<Button onClick={() => {
18
- const id = toast.show({
19
- title: "Title",
20
- text: "Text",
21
- children: "Children",
22
- startSlot: "Slot",
23
- actionsSlot: (<Button attributes={{ "data-testid": "trigger-id" }} onClick={() => toast.hide(id)}>
24
- Trigger
25
- </Button>),
26
- });
27
- }}>
28
- Show toast
29
- </Button>);
30
- },
31
- play: async ({ canvasElement }) => {
32
- const canvas = within(canvasElement.ownerDocument.body);
33
- const button = canvas.getAllByRole("button")[0];
34
- await userEvent.click(button);
35
- const title = canvas.getByText("Title");
36
- const text = canvas.getByText("Text");
37
- const children = canvas.getByText("Children");
38
- const slot = canvas.getByText("Slot");
39
- const action = canvas.getByTestId("trigger-id");
40
- expect(title).toBeInTheDocument();
41
- expect(text).toBeInTheDocument();
42
- expect(children).toBeInTheDocument();
43
- expect(slot).toBeInTheDocument();
44
- expect(action).toBeInTheDocument();
45
- await userEvent.click(action);
46
- await waitFor(() => {
47
- expect(title).not.toBeInTheDocument();
48
- });
49
- },
50
- };
51
- const NestedDemo = () => {
52
- const toast = useToast();
53
- return (<Button onClick={() => {
54
- toast.show({
55
- text: "Content",
56
- });
57
- }}>
58
- Show toast
59
- </Button>);
60
- };
61
- export const nested = {
62
- name: "ToastProvider",
63
- render: () => {
64
- return (<div data-testid="test-container-id">
65
- <ToastProvider>
66
- <NestedDemo />
67
- </ToastProvider>
68
- </div>);
69
- },
70
- play: async ({ canvasElement }) => {
71
- const canvas = within(canvasElement.ownerDocument.body);
72
- const button = canvas.getAllByRole("button")[0];
73
- await userEvent.click(button);
74
- const container = canvas.getByTestId("test-container-id");
75
- const toast = within(container).getByText("Content");
76
- expect(toast).toBeInTheDocument();
77
- },
78
- };
79
- export const className = {
80
- name: "className, attributes",
81
- render: () => {
82
- const toast = useToast();
83
- return (<Button onClick={() => {
84
- const id = toast.show({
85
- text: "Content",
86
- attributes: { "data-testid": "test-id" },
87
- className: "test-classname",
88
- });
89
- }}>
90
- Show toast
91
- </Button>);
92
- },
93
- play: async ({ canvasElement }) => {
94
- const canvas = within(canvasElement.ownerDocument.body);
95
- const button = canvas.getAllByRole("button")[0];
96
- await userEvent.click(button);
97
- const toast = canvas.getByTestId("test-id");
98
- expect(toast).toBeInTheDocument();
99
- expect(toast).toHaveClass("test-classname");
100
- },
101
- };
@@ -1,24 +0,0 @@
1
- import { StoryObj } from "@storybook/react-vite";
2
- declare const _default: {
3
- title: string;
4
- component: {
5
- <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewProps<As>): import("react").JSX.Element;
6
- Item: {
7
- <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("./..").ViewItemProps<As>): import("react").JSX.Element;
8
- displayName: string;
9
- };
10
- displayName: string;
11
- };
12
- parameters: {
13
- iframe: {
14
- url: string;
15
- };
16
- chromatic: {
17
- disableSnapshot: boolean;
18
- };
19
- };
20
- };
21
- export default _default;
22
- export declare const asProp: StoryObj;
23
- export declare const className: StoryObj;
24
- export declare const itemClassName: StoryObj;
@@ -1,50 +0,0 @@
1
- import { expect } from "storybook/test";
2
- import View from "../index.js";
3
- export default {
4
- title: "Utility components/View/tests",
5
- component: View,
6
- parameters: {
7
- iframe: {
8
- url: "https://reshaped.so/docs/utilities/view",
9
- },
10
- chromatic: { disableSnapshot: true },
11
- },
12
- };
13
- export const asProp = {
14
- name: "as",
15
- render: () => (<View as="ul">
16
- <View.Item as="li">Content</View.Item>
17
- </View>),
18
- play: async ({ canvas }) => {
19
- const list = canvas.getByRole("list");
20
- const item = canvas.getByRole("listitem");
21
- expect(list).toBeInTheDocument();
22
- expect(item).toBeInTheDocument();
23
- },
24
- };
25
- export const className = {
26
- name: "className, attributes",
27
- render: () => (<div data-testid="root">
28
- <View className="test-classname" attributes={{ id: "test-id" }}>
29
- Content
30
- </View>
31
- </div>),
32
- play: async ({ canvas }) => {
33
- const root = canvas.getByTestId("root").firstChild;
34
- expect(root).toHaveClass("test-classname");
35
- expect(root).toHaveAttribute("id", "test-id");
36
- },
37
- };
38
- export const itemClassName = {
39
- name: "item className, attributes",
40
- render: () => (<div data-testid="root">
41
- <View.Item className="test-classname" attributes={{ id: "test-id" }}>
42
- Content
43
- </View.Item>
44
- </div>),
45
- play: async ({ canvas }) => {
46
- const root = canvas.getByTestId("root").firstChild;
47
- expect(root).toHaveClass("test-classname");
48
- expect(root).toHaveAttribute("id", "test-id");
49
- },
50
- };