reshaped 3.8.0-canary.7 → 3.8.0-canary.8

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 (186) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/bundle.css +1 -1
  3. package/dist/bundle.js +9 -9
  4. package/dist/components/Actionable/Actionable.module.css +1 -1
  5. package/dist/components/Alert/tests/Alert.stories.d.ts +6 -5
  6. package/dist/components/Alert/tests/Alert.stories.js +15 -2
  7. package/dist/components/Badge/Badge.module.css +1 -1
  8. package/dist/components/Badge/tests/Badge.stories.d.ts +5 -0
  9. package/dist/components/Badge/tests/Badge.stories.js +34 -0
  10. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.d.ts +8 -4
  11. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.js +57 -1
  12. package/dist/components/Button/tests/Button.stories.d.ts +54 -12
  13. package/dist/components/Button/tests/Button.stories.js +725 -588
  14. package/dist/components/Card/Card.module.css +1 -1
  15. package/dist/components/Card/tests/Card.stories.d.ts +28 -6
  16. package/dist/components/Card/tests/Card.stories.js +110 -65
  17. package/dist/components/Carousel/Carousel.module.css +1 -1
  18. package/dist/components/Checkbox/Checkbox.module.css +1 -1
  19. package/dist/components/Checkbox/tests/Checkbox.stories.d.ts +20 -4
  20. package/dist/components/Checkbox/tests/Checkbox.stories.js +150 -79
  21. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.d.ts +9 -2
  22. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.js +67 -35
  23. package/dist/components/Container/tests/Container.stories.d.ts +2 -0
  24. package/dist/components/Container/tests/Container.stories.js +14 -0
  25. package/dist/components/ContextMenu/tests/ContextMenu.stories.d.ts +10 -1
  26. package/dist/components/ContextMenu/tests/ContextMenu.stories.js +57 -13
  27. package/dist/components/Dismissible/tests/Dismissible.stories.d.ts +5 -0
  28. package/dist/components/Dismissible/tests/Dismissible.stories.js +30 -1
  29. package/dist/components/Divider/tests/Divider.stories.d.ts +8 -3
  30. package/dist/components/Divider/tests/Divider.stories.js +71 -41
  31. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +35 -6
  32. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.js +222 -115
  33. package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.d.ts +0 -15
  34. package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.js +0 -106
  35. package/dist/components/FileUpload/FileUpload.module.css +1 -1
  36. package/dist/components/Flyout/Flyout.module.css +1 -1
  37. package/dist/components/Flyout/utilities/flyout.js +0 -1
  38. package/dist/components/FormControl/tests/FormControl.stories.d.ts +2 -0
  39. package/dist/components/FormControl/tests/FormControl.stories.js +35 -0
  40. package/dist/components/Hidden/tests/Hidden.stories.d.ts +2 -0
  41. package/dist/components/Hidden/tests/Hidden.stories.js +9 -0
  42. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.d.ts +2 -0
  43. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.js +9 -0
  44. package/dist/components/Hotkey/tests/Hotkey.stories.d.ts +2 -0
  45. package/dist/components/Hotkey/tests/Hotkey.stories.js +15 -0
  46. package/dist/components/Icon/tests/Icon.stories.d.ts +3 -0
  47. package/dist/components/Icon/tests/Icon.stories.js +23 -0
  48. package/dist/components/Link/tests/Link.stories.d.ts +28 -5
  49. package/dist/components/Link/tests/Link.stories.js +141 -58
  50. package/dist/components/Link/tests/Link.test.stories.d.ts +0 -13
  51. package/dist/components/Link/tests/Link.test.stories.js +0 -85
  52. package/dist/components/Loader/tests/Loader.stories.d.ts +11 -2
  53. package/dist/components/Loader/tests/Loader.stories.js +52 -25
  54. package/dist/components/Loader/tests/Loader.test.stories.d.ts +0 -3
  55. package/dist/components/Loader/tests/Loader.test.stories.js +0 -21
  56. package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +37 -7
  57. package/dist/components/MenuItem/tests/MenuItem.stories.js +218 -112
  58. package/dist/components/Modal/Modal.js +1 -1
  59. package/dist/components/Modal/Modal.module.css +1 -1
  60. package/dist/components/Modal/tests/Modal.stories.d.ts +53 -10
  61. package/dist/components/Modal/tests/Modal.stories.js +366 -214
  62. package/dist/components/Overlay/tests/Overlay.stories.d.ts +15 -1
  63. package/dist/components/Overlay/tests/Overlay.stories.js +135 -1
  64. package/dist/components/Pagination/tests/Pagination.stories.d.ts +14 -1
  65. package/dist/components/Pagination/tests/Pagination.stories.js +93 -15
  66. package/dist/components/PinField/tests/PinField.stories.d.ts +1 -1
  67. package/dist/components/PinField/tests/PinField.stories.js +1 -1
  68. package/dist/components/Popover/Popover.module.css +1 -1
  69. package/dist/components/Progress/tests/Progress.stories.d.ts +19 -4
  70. package/dist/components/Progress/tests/Progress.stories.js +85 -49
  71. package/dist/components/Radio/Radio.module.css +1 -1
  72. package/dist/components/Radio/tests/Radio.stories.d.ts +25 -4
  73. package/dist/components/Radio/tests/Radio.stories.js +147 -65
  74. package/dist/components/RadioGroup/tests/RadioGroup.stories.d.ts +9 -2
  75. package/dist/components/RadioGroup/tests/RadioGroup.stories.js +64 -38
  76. package/dist/components/Reshaped/Reshaped.css +1 -1
  77. package/dist/components/Scrim/tests/Scrim.stories.d.ts +10 -2
  78. package/dist/components/Scrim/tests/Scrim.stories.js +51 -31
  79. package/dist/components/ScrollArea/ScrollArea.module.css +1 -1
  80. package/dist/components/Select/Select.module.css +1 -1
  81. package/dist/components/Select/Select.types.d.ts +38 -11
  82. package/dist/components/Select/SelectCustom.js +2 -1
  83. package/dist/components/Select/SelectCustomControlled.js +23 -9
  84. package/dist/components/Select/SelectCustomUncontrolled.js +10 -7
  85. package/dist/components/Select/SelectTrigger.js +1 -1
  86. package/dist/components/Select/tests/Select.stories.d.ts +3 -0
  87. package/dist/components/Select/tests/Select.stories.js +91 -34
  88. package/dist/components/Skeleton/tests/Skeleton.stories.d.ts +10 -2
  89. package/dist/components/Skeleton/tests/Skeleton.stories.js +46 -28
  90. package/dist/components/Slider/Slider.module.css +1 -1
  91. package/dist/components/Stepper/tests/Stepper.stories.d.ts +18 -4
  92. package/dist/components/Stepper/tests/Stepper.stories.js +99 -70
  93. package/dist/components/Switch/Switch.module.css +1 -1
  94. package/dist/components/Switch/tests/Switch.stories.d.ts +10 -2
  95. package/dist/components/Switch/tests/Switch.stories.js +77 -23
  96. package/dist/components/Switch/tests/Switch.test.stories.d.ts +0 -10
  97. package/dist/components/Switch/tests/Switch.test.stories.js +0 -68
  98. package/dist/components/Table/Table.module.css +1 -1
  99. package/dist/components/Table/tests/Table.stories.d.ts +25 -5
  100. package/dist/components/Table/tests/Table.stories.js +274 -177
  101. package/dist/components/Table/tests/Table.test.stories.d.ts +0 -5
  102. package/dist/components/Table/tests/Table.test.stories.js +0 -82
  103. package/dist/components/Tabs/Tabs.module.css +1 -1
  104. package/dist/components/TextArea/TextArea.module.css +1 -1
  105. package/dist/components/TextArea/tests/TextArea.stories.d.ts +41 -9
  106. package/dist/components/TextArea/tests/TextArea.stories.js +179 -93
  107. package/dist/components/TextField/TextField.js +1 -1
  108. package/dist/components/TextField/TextField.module.css +1 -1
  109. package/dist/components/TextField/tests/TextField.stories.d.ts +41 -11
  110. package/dist/components/TextField/tests/TextField.stories.js +206 -132
  111. package/dist/components/TextField/tests/TextField.test.stories.d.ts +0 -13
  112. package/dist/components/TextField/tests/TextField.test.stories.js +0 -88
  113. package/dist/components/Theme/Theme.module.css +1 -1
  114. package/dist/components/Timeline/tests/Timeline.stories.d.ts +10 -2
  115. package/dist/components/Timeline/tests/Timeline.stories.js +69 -42
  116. package/dist/components/Timeline/tests/Timeline.test.stories.d.ts +0 -2
  117. package/dist/components/Timeline/tests/Timeline.test.stories.js +0 -21
  118. package/dist/components/Toast/tests/Toast.stories.d.ts +32 -8
  119. package/dist/components/Toast/tests/Toast.stories.js +109 -37
  120. package/dist/components/Tooltip/tests/Tooltip.stories.d.ts +18 -4
  121. package/dist/components/Tooltip/tests/Tooltip.stories.js +139 -107
  122. package/dist/components/Tooltip/tests/Tooltip.test.stories.d.ts +0 -6
  123. package/dist/components/Tooltip/tests/Tooltip.test.stories.js +0 -29
  124. package/dist/components/View/tests/View.stories.d.ts +4 -0
  125. package/dist/components/View/tests/View.stories.js +39 -0
  126. package/dist/hooks/tests/useDrag.stories.js +1 -1
  127. package/dist/utilities/scroll/disable.js +2 -2
  128. package/package.json +1 -1
  129. package/dist/components/Alert/tests/Alert.test.stories.d.ts +0 -15
  130. package/dist/components/Alert/tests/Alert.test.stories.js +0 -26
  131. package/dist/components/Badge/tests/Badge.test.stories.d.ts +0 -20
  132. package/dist/components/Badge/tests/Badge.test.stories.js +0 -46
  133. package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.d.ts +0 -23
  134. package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.js +0 -76
  135. package/dist/components/Button/tests/Button.test.stories.d.ts +0 -28
  136. package/dist/components/Button/tests/Button.test.stories.js +0 -135
  137. package/dist/components/Card/tests/Card.test.stories.d.ts +0 -35
  138. package/dist/components/Card/tests/Card.test.stories.js +0 -54
  139. package/dist/components/Checkbox/tests/Checkbox.test.stories.d.ts +0 -25
  140. package/dist/components/Checkbox/tests/Checkbox.test.stories.js +0 -104
  141. package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.d.ts +0 -22
  142. package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.js +0 -78
  143. package/dist/components/Container/tests/Container.test.stories.d.ts +0 -15
  144. package/dist/components/Container/tests/Container.test.stories.js +0 -26
  145. package/dist/components/ContextMenu/tests/ContextMenu.test.stories.d.ts +0 -25
  146. package/dist/components/ContextMenu/tests/ContextMenu.test.stories.js +0 -53
  147. package/dist/components/Dismissible/tests/Dismissible.test.stories.d.ts +0 -19
  148. package/dist/components/Dismissible/tests/Dismissible.test.stories.js +0 -42
  149. package/dist/components/Divider/tests/Divider.test.stories.d.ts +0 -18
  150. package/dist/components/Divider/tests/Divider.test.stories.js +0 -47
  151. package/dist/components/FormControl/tests/FormControl.test.stories.d.ts +0 -20
  152. package/dist/components/FormControl/tests/FormControl.test.stories.js +0 -49
  153. package/dist/components/Hidden/tests/Hidden.test.stories.d.ts +0 -15
  154. package/dist/components/Hidden/tests/Hidden.test.stories.js +0 -20
  155. package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.d.ts +0 -15
  156. package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.js +0 -20
  157. package/dist/components/Hotkey/tests/Hotkey.test.stories.d.ts +0 -15
  158. package/dist/components/Hotkey/tests/Hotkey.test.stories.js +0 -26
  159. package/dist/components/Icon/tests/Icon.test.stories.d.ts +0 -16
  160. package/dist/components/Icon/tests/Icon.test.stories.js +0 -35
  161. package/dist/components/MenuItem/tests/MenuItem.test.stories.d.ts +0 -27
  162. package/dist/components/MenuItem/tests/MenuItem.test.stories.js +0 -116
  163. package/dist/components/Modal/tests/Modal.test.stories.d.ts +0 -31
  164. package/dist/components/Modal/tests/Modal.test.stories.js +0 -149
  165. package/dist/components/Overlay/tests/Overlay.test.stories.d.ts +0 -28
  166. package/dist/components/Overlay/tests/Overlay.test.stories.js +0 -148
  167. package/dist/components/Pagination/tests/Pagination.test.stories.d.ts +0 -23
  168. package/dist/components/Pagination/tests/Pagination.test.stories.js +0 -86
  169. package/dist/components/Progress/tests/Progress.test.stories.d.ts +0 -16
  170. package/dist/components/Progress/tests/Progress.test.stories.js +0 -35
  171. package/dist/components/Radio/tests/Radio.test.stories.d.ts +0 -30
  172. package/dist/components/Radio/tests/Radio.test.stories.js +0 -118
  173. package/dist/components/RadioGroup/tests/RadioGroup.test.stories.d.ts +0 -22
  174. package/dist/components/RadioGroup/tests/RadioGroup.test.stories.js +0 -78
  175. package/dist/components/Scrim/tests/Scrim.test.stories.d.ts +0 -15
  176. package/dist/components/Scrim/tests/Scrim.test.stories.js +0 -25
  177. package/dist/components/Skeleton/tests/Skeleton.test.stories.d.ts +0 -15
  178. package/dist/components/Skeleton/tests/Skeleton.test.stories.js +0 -23
  179. package/dist/components/Stepper/tests/Stepper.test.stories.d.ts +0 -20
  180. package/dist/components/Stepper/tests/Stepper.test.stories.js +0 -28
  181. package/dist/components/TextArea/tests/TextArea.test.stories.d.ts +0 -28
  182. package/dist/components/TextArea/tests/TextArea.test.stories.js +0 -99
  183. package/dist/components/Toast/tests/Toast.test.stories.d.ts +0 -16
  184. package/dist/components/Toast/tests/Toast.test.stories.js +0 -101
  185. package/dist/components/View/tests/View.test.stories.d.ts +0 -24
  186. package/dist/components/View/tests/View.test.stories.js +0 -50
@@ -9,6 +9,7 @@ import MenuItem from "../../MenuItem/index.js";
9
9
  import Button from "../../Button/index.js";
10
10
  import IconPlus from "../../../icons/Plus.js";
11
11
  import useToggle from "../../../hooks/useToggle.js";
12
+ import { expect } from "storybook/test";
12
13
  export default {
13
14
  title: "Utility components/View",
14
15
  component: View,
@@ -1288,3 +1289,41 @@ export const testComposition = {
1288
1289
  </Example.Item>
1289
1290
  </Example>),
1290
1291
  };
1292
+ export const asProp = {
1293
+ name: "as",
1294
+ render: () => (<View as="ul">
1295
+ <View.Item as="li">Content</View.Item>
1296
+ </View>),
1297
+ play: async ({ canvas }) => {
1298
+ const list = canvas.getByRole("list");
1299
+ const item = canvas.getByRole("listitem");
1300
+ expect(list).toBeInTheDocument();
1301
+ expect(item).toBeInTheDocument();
1302
+ },
1303
+ };
1304
+ export const className = {
1305
+ name: "className, attributes",
1306
+ render: () => (<div data-testid="root">
1307
+ <View className="test-classname" attributes={{ id: "test-id" }}>
1308
+ Content
1309
+ </View>
1310
+ </div>),
1311
+ play: async ({ canvas }) => {
1312
+ const root = canvas.getByTestId("root").firstChild;
1313
+ expect(root).toHaveClass("test-classname");
1314
+ expect(root).toHaveAttribute("id", "test-id");
1315
+ },
1316
+ };
1317
+ export const itemClassName = {
1318
+ name: "item className, attributes",
1319
+ render: () => (<div data-testid="root">
1320
+ <View.Item className="test-classname" attributes={{ id: "test-id" }}>
1321
+ Content
1322
+ </View.Item>
1323
+ </div>),
1324
+ play: async ({ canvas }) => {
1325
+ const root = canvas.getByTestId("root").firstChild;
1326
+ expect(root).toHaveClass("test-classname");
1327
+ expect(root).toHaveAttribute("id", "test-id");
1328
+ },
1329
+ };
@@ -5,7 +5,7 @@ import useDrag from "../_private/useDrag.js";
5
5
  import useToggle from "../useToggle.js";
6
6
  import Button from "../../components/Button/index.js";
7
7
  export default {
8
- title: "Internal/Hooks/useDrag",
8
+ title: "Internal/useDrag",
9
9
  parameters: {
10
10
  chromatic: { disableSnapshot: true },
11
11
  },
@@ -4,8 +4,8 @@ export const preventDefault = (e) => e.preventDefault();
4
4
  * without locking the page with overflow
5
5
  */
6
6
  export const disableScroll = () => {
7
- window.addEventListener("wheel", preventDefault, { passive: false });
8
- window.addEventListener("touchmove", preventDefault, { passive: false });
7
+ window.addEventListener("wheel", preventDefault);
8
+ window.addEventListener("touchmove", preventDefault);
9
9
  };
10
10
  export const enableScroll = () => {
11
11
  window.removeEventListener("wheel", preventDefault);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "reshaped",
3
3
  "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
4
- "version": "3.8.0-canary.7",
4
+ "version": "3.8.0-canary.8",
5
5
  "license": "MIT",
6
6
  "email": "hello@reshaped.so",
7
7
  "homepage": "https://reshaped.so",
@@ -1,15 +0,0 @@
1
- import { StoryObj } from "@storybook/react-vite";
2
- declare const _default: {
3
- title: string;
4
- component: import("react").FC<import("./..").AlertProps>;
5
- parameters: {
6
- iframe: {
7
- url: string;
8
- };
9
- chromatic: {
10
- disableSnapshot: boolean;
11
- };
12
- };
13
- };
14
- export default _default;
15
- export declare const className: StoryObj;
@@ -1,26 +0,0 @@
1
- import { expect } from "storybook/test";
2
- import Alert from "../index.js";
3
- import { Placeholder } from "../../../utilities/storybook/index.js";
4
- export default {
5
- title: "Components/Alert/tests",
6
- component: Alert,
7
- parameters: {
8
- iframe: {
9
- url: "https://reshaped.so/docs/components/alert",
10
- },
11
- chromatic: { disableSnapshot: true },
12
- },
13
- };
14
- export const className = {
15
- name: "className, attributes",
16
- render: () => (<div data-testid="root">
17
- <Alert className="test-classname" attributes={{ id: "test-id" }}>
18
- <Placeholder />
19
- </Alert>
20
- </div>),
21
- play: async ({ canvas }) => {
22
- const root = canvas.getByTestId("root").firstChild;
23
- expect(root).toHaveClass("test-classname");
24
- expect(root).toHaveAttribute("id", "test-id");
25
- },
26
- };
@@ -1,20 +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("../Badge.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 href: StoryObj;
17
- export declare const onClick: StoryObj<{
18
- handleClick: ReturnType<typeof fn>;
19
- }>;
20
- export declare const className: StoryObj;
@@ -1,46 +0,0 @@
1
- import { expect, fn, userEvent } from "storybook/test";
2
- import Badge from "../index.js";
3
- export default {
4
- title: "Components/Badge/tests",
5
- component: Badge,
6
- parameters: {
7
- iframe: {
8
- url: "https://reshaped.so/docs/components/badge",
9
- },
10
- chromatic: { disableSnapshot: true },
11
- },
12
- };
13
- export const href = {
14
- name: "href",
15
- render: () => (<Badge href="https://reshaped.so" dismissAriaLabel="Dismiss">
16
- Badge
17
- </Badge>),
18
- play: async ({ canvas }) => {
19
- const link = canvas.getByRole("link");
20
- expect(link).toHaveAttribute("href", "https://reshaped.so");
21
- },
22
- };
23
- export const onClick = {
24
- name: "onClick",
25
- args: {
26
- handleClick: fn(),
27
- },
28
- render: (args) => <Badge onClick={args.handleClick}>Badge</Badge>,
29
- play: async ({ canvas, args }) => {
30
- const button = canvas.getAllByRole("button")[0];
31
- await userEvent.click(button);
32
- expect(args.handleClick).toHaveBeenCalledTimes(1);
33
- expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: button }));
34
- },
35
- };
36
- export const className = {
37
- name: "className, attributes",
38
- render: () => (<div data-testid="root">
39
- <Badge color="primary" className="test-classname" attributes={{ id: "test-id" }}/>
40
- </div>),
41
- play: async ({ canvas }) => {
42
- const root = canvas.getByTestId("root").firstChild;
43
- expect(root).toHaveClass("test-classname");
44
- expect(root).toHaveAttribute("id", "test-id");
45
- },
46
- };
@@ -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("./..").BreadcrumbsProps> & {
6
- Item: import("react").FC<import("../Breadcrumbs.types").ItemProps>;
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 onClick: StoryObj<{
19
- handleClick: ReturnType<typeof fn>;
20
- }>;
21
- export declare const href: StoryObj;
22
- export declare const collapsible: StoryObj;
23
- export declare const className: StoryObj;
@@ -1,76 +0,0 @@
1
- import { fn, expect, userEvent } from "storybook/test";
2
- import Breadcrumbs from "../index.js";
3
- export default {
4
- title: "Components/Breadcrumbs/tests",
5
- component: Breadcrumbs,
6
- parameters: {
7
- iframe: {
8
- url: "https://reshaped.so/docs/components/breadcrumbs",
9
- },
10
- chromatic: { disableSnapshot: true },
11
- },
12
- };
13
- export const onClick = {
14
- name: "item, onClick, disabled",
15
- args: {
16
- handleClick: fn(),
17
- },
18
- render: (args) => (<Breadcrumbs>
19
- <Breadcrumbs.Item onClick={args.handleClick}>Trigger</Breadcrumbs.Item>
20
- <Breadcrumbs.Item onClick={args.handleClick} disabled>
21
- Trigger
22
- </Breadcrumbs.Item>
23
- </Breadcrumbs>),
24
- play: async ({ args, canvas }) => {
25
- const trigggers = canvas.getAllByRole("button");
26
- await userEvent.click(trigggers[0]);
27
- expect(args.handleClick).toHaveBeenCalledTimes(1);
28
- expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: trigggers[0] }));
29
- await userEvent.click(trigggers[1]);
30
- expect(args.handleClick).toHaveBeenCalledTimes(1);
31
- },
32
- };
33
- export const href = {
34
- name: "item, href",
35
- render: () => (<Breadcrumbs>
36
- <Breadcrumbs.Item href="https://reshaped.so">Trigger</Breadcrumbs.Item>
37
- </Breadcrumbs>),
38
- play: async ({ canvas }) => {
39
- const trigggers = canvas.getAllByRole("link");
40
- expect(trigggers[0]).toHaveAttribute("href", "https://reshaped.so");
41
- },
42
- };
43
- export const collapsible = {
44
- name: "collapsible",
45
- render: () => (<Breadcrumbs defaultVisibleItems={2} expandAriaLabel="Expand">
46
- <Breadcrumbs.Item onClick={() => { }}>Trigger 1</Breadcrumbs.Item>
47
- <Breadcrumbs.Item onClick={() => { }}>Trigger 2</Breadcrumbs.Item>
48
- <Breadcrumbs.Item onClick={() => { }}>Trigger 3</Breadcrumbs.Item>
49
- <Breadcrumbs.Item onClick={() => { }}>Trigger 4</Breadcrumbs.Item>
50
- </Breadcrumbs>),
51
- play: async ({ canvas }) => {
52
- let triggers = canvas.getAllByRole("button");
53
- expect(triggers[0]).toHaveTextContent("Trigger 1");
54
- expect(triggers[1]).toHaveAccessibleName("Expand");
55
- expect(triggers[2]).toHaveTextContent("Trigger 4");
56
- await userEvent.click(triggers[1]);
57
- triggers = canvas.getAllByRole("button");
58
- expect(triggers[0]).toHaveTextContent("Trigger 1");
59
- expect(triggers[1]).toHaveTextContent("Trigger 2");
60
- expect(triggers[2]).toHaveTextContent("Trigger 3");
61
- expect(triggers[3]).toHaveTextContent("Trigger 4");
62
- },
63
- };
64
- export const className = {
65
- name: "className, attributes",
66
- render: () => (<div data-testid="root">
67
- <Breadcrumbs className="test-classname" attributes={{ id: "test-id" }}>
68
- <Breadcrumbs.Item>Trigger</Breadcrumbs.Item>
69
- </Breadcrumbs>
70
- </div>),
71
- play: async ({ canvas }) => {
72
- const root = canvas.getByTestId("root").firstChild;
73
- expect(root).toHaveClass("test-classname");
74
- expect(root).toHaveAttribute("id", "test-id");
75
- },
76
- };
@@ -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("../Button.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 as: StoryObj;
26
- export declare const className: StoryObj;
27
- export declare const group: StoryObj;
28
- export declare const groupClassName: StoryObj;
@@ -1,135 +0,0 @@
1
- import { userEvent, expect, fn } from "storybook/test";
2
- import Button from "../index.js";
3
- import Example from "../../../utilities/storybook/Example.js";
4
- export default {
5
- title: "Components/Button/tests",
6
- component: Button,
7
- parameters: {
8
- iframe: {
9
- url: "https://reshaped.so/docs/components/button",
10
- },
11
- chromatic: { disableSnapshot: true },
12
- },
13
- };
14
- export const children = {
15
- name: "children",
16
- render: () => <Button>Trigger</Button>,
17
- play: async ({ canvas }) => {
18
- const el = canvas.getByText("Trigger");
19
- expect(el).toBeInTheDocument();
20
- expect(el.tagName).toBe("SPAN");
21
- },
22
- };
23
- export const href = {
24
- name: "href",
25
- render: () => <Button href="https://reshaped.so">Trigger</Button>,
26
- play: async ({ canvas }) => {
27
- const el = canvas.getByRole("link");
28
- expect(el).toHaveAttribute("href", "https://reshaped.so");
29
- },
30
- };
31
- export const onClick = {
32
- name: "onClick",
33
- args: {
34
- handleClick: fn(),
35
- },
36
- render: (args) => <Button onClick={args.handleClick}>Trigger</Button>,
37
- play: async ({ canvas, args }) => {
38
- const { handleClick } = args;
39
- const el = canvas.getAllByRole("button")[0];
40
- await userEvent.click(el);
41
- expect(el).toHaveAttribute("type", "button");
42
- expect(handleClick).toHaveBeenCalledTimes(1);
43
- expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
44
- },
45
- };
46
- export const hrefOnClick = {
47
- name: "href + onClick",
48
- args: {
49
- handleClick: fn(),
50
- },
51
- render: (args) => (<Button onClick={(e) => {
52
- e.preventDefault();
53
- args.handleClick(e);
54
- }} href="https://reshaped.so">
55
- Trigger
56
- </Button>),
57
- play: async ({ canvas, args }) => {
58
- const { handleClick } = args;
59
- const el = canvas.getByRole("link");
60
- await userEvent.click(el);
61
- expect(el).toHaveAttribute("href", "https://reshaped.so");
62
- expect(handleClick).toHaveBeenCalledTimes(1);
63
- expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
64
- },
65
- };
66
- export const disabled = {
67
- name: "disabled",
68
- render: () => (<Button disabled onClick={() => { }}>
69
- Trigger
70
- </Button>),
71
- play: async ({ canvas }) => {
72
- const el = canvas.getAllByRole("button")[0];
73
- expect(el).toBeDisabled();
74
- },
75
- };
76
- export const as = {
77
- name: "as, render",
78
- render: () => (<Example>
79
- <Example.Item title="as: span">
80
- <Button onClick={() => { }} as="span">
81
- Trigger
82
- </Button>
83
- </Example.Item>
84
- <Example.Item title="render, disabled">
85
- <Button disabled onClick={() => { }} render={(props) => <section {...props}/>} attributes={{ "data-testid": "render-el" }}>
86
- Trigger
87
- </Button>
88
- </Example.Item>
89
- </Example>),
90
- play: ({ canvas }) => {
91
- const [asEl] = canvas.getAllByText("Trigger");
92
- const renderEl = canvas.getByTestId("render-el");
93
- expect(asEl.tagName).toBe("SPAN");
94
- expect(renderEl.tagName).toBe("SECTION");
95
- expect(renderEl).toHaveAttribute("aria-disabled", "true");
96
- },
97
- };
98
- export const className = {
99
- name: "className, attributes",
100
- render: () => (<div data-testid="root">
101
- <Button className="test-classname" attributes={{ id: "test-id" }}>
102
- Trigger
103
- </Button>
104
- </div>),
105
- play: async ({ canvas }) => {
106
- const root = canvas.getByTestId("root").firstChild;
107
- expect(root).toHaveClass("test-classname");
108
- expect(root).toHaveAttribute("id", "test-id");
109
- },
110
- };
111
- export const group = {
112
- name: "group",
113
- render: () => (<Button.Group>
114
- <Button>Trigger</Button>
115
- <Button>Trigger</Button>
116
- </Button.Group>),
117
- play: async ({ canvas }) => {
118
- const el = canvas.getByRole("group");
119
- expect(el).toBeInTheDocument();
120
- expect(el.childElementCount).toEqual(2);
121
- },
122
- };
123
- export const groupClassName = {
124
- name: "group className, attributes",
125
- render: () => (<div data-testid="root">
126
- <Button.Group className="test-classname" attributes={{ id: "test-id" }}>
127
- <Button>Trigger</Button>
128
- </Button.Group>
129
- </div>),
130
- play: async ({ canvas }) => {
131
- const root = canvas.getByTestId("root").firstChild;
132
- expect(root).toHaveClass("test-classname");
133
- expect(root).toHaveAttribute("id", "test-id");
134
- },
135
- };
@@ -1,35 +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.ForwardRefExoticComponent<{
7
- padding?: import("../../../types/global").Responsive<number>;
8
- bleed?: import("../../../types/global").Responsive<number>;
9
- selected?: boolean;
10
- elevated?: boolean;
11
- children?: React.ReactNode;
12
- onClick?: import("../../Actionable").ActionableProps["onClick"];
13
- href?: string;
14
- as?: keyof React.JSX.IntrinsicElements | undefined;
15
- className?: import("../../../types/global").ClassName;
16
- attributes?: (import("../../../types/global").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../../../types/global").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "children" | "ref" | "style" | "form" | "slot" | "title" | "disabled" | "key" | "value" | "hidden" | "color" | "content" | "className" | "aria-orientation" | "role" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "onToggle" | "type" | "id" | "lang" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
17
- ref?: import("../../Actionable/Actionable.types").AttributesRef;
18
- }) | undefined)) | undefined;
19
- } & Pick<import("../../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
20
- parameters: {
21
- iframe: {
22
- url: string;
23
- };
24
- chromatic: {
25
- disableSnapshot: boolean;
26
- };
27
- };
28
- };
29
- export default _default;
30
- export declare const onClick: StoryObj<{
31
- handleClick: ReturnType<typeof fn>;
32
- }>;
33
- export declare const href: StoryObj;
34
- export declare const as: StoryObj;
35
- export declare const className: StoryObj;
@@ -1,54 +0,0 @@
1
- import React from "react";
2
- import { expect, fn, userEvent } from "storybook/test";
3
- import Card from "../index.js";
4
- export default {
5
- title: "Components/Card/tests",
6
- component: Card,
7
- parameters: {
8
- iframe: {
9
- url: "https://reshaped.so/docs/components/card",
10
- },
11
- chromatic: { disableSnapshot: true },
12
- },
13
- };
14
- export const onClick = {
15
- name: "onClick",
16
- args: {
17
- handleClick: fn(),
18
- },
19
- render: (args) => <Card onClick={args.handleClick}>Trigger</Card>,
20
- play: async ({ canvas, args }) => {
21
- const { handleClick } = args;
22
- const el = canvas.getAllByRole("button")[0];
23
- await userEvent.click(el);
24
- expect(handleClick).toHaveBeenCalledTimes(1);
25
- expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
26
- },
27
- };
28
- export const href = {
29
- name: "href",
30
- render: () => <Card href="https://reshaped.so">Trigger</Card>,
31
- play: async ({ canvas }) => {
32
- const el = canvas.getByRole("link");
33
- expect(el).toHaveAttribute("href", "https://reshaped.so");
34
- },
35
- };
36
- export const as = {
37
- name: "as",
38
- render: () => <Card as="span" attributes={{ "data-testid": "root" }}/>,
39
- play: ({ canvas }) => {
40
- const root = canvas.getByTestId("root");
41
- expect(root.tagName).toBe("SPAN");
42
- },
43
- };
44
- export const className = {
45
- name: "className, attributes",
46
- render: () => (<div data-testid="root">
47
- <Card className="test-classname" attributes={{ id: "test-id" }}/>
48
- </div>),
49
- play: async ({ canvas }) => {
50
- const root = canvas.getByTestId("root").firstChild;
51
- expect(root).toHaveClass("test-classname");
52
- expect(root).toHaveAttribute("id", "test-id");
53
- },
54
- };
@@ -1,25 +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("./..").CheckboxProps>;
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 defaultChecked: StoryObj<{
21
- handleChange: ReturnType<typeof fn>;
22
- }>;
23
- export declare const disabled: StoryObj;
24
- export declare const indeterminate: StoryObj;
25
- export declare const className: StoryObj;