reshaped 3.8.0-canary.0 → 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.
Files changed (290) hide show
  1. package/CHANGELOG.md +101 -8
  2. package/README.md +2 -2
  3. package/dist/bundle.css +1 -1
  4. package/dist/bundle.d.ts +1 -1
  5. package/dist/bundle.js +11 -11
  6. package/dist/components/Accordion/AccordionControlled.js +1 -0
  7. package/dist/components/Actionable/Actionable.js +17 -3
  8. package/dist/components/Actionable/Actionable.module.css +1 -1
  9. package/dist/components/Actionable/Actionable.types.d.ts +15 -3
  10. package/dist/components/Actionable/tests/Actionable.stories.d.ts +13 -1
  11. package/dist/components/Actionable/tests/Actionable.stories.js +127 -7
  12. package/dist/components/Alert/tests/Alert.stories.d.ts +6 -5
  13. package/dist/components/Alert/tests/Alert.stories.js +15 -2
  14. package/dist/components/Autocomplete/Autocomplete.js +2 -2
  15. package/dist/components/Autocomplete/Autocomplete.types.d.ts +1 -1
  16. package/dist/components/Badge/Badge.module.css +1 -1
  17. package/dist/components/Badge/tests/Badge.stories.d.ts +5 -0
  18. package/dist/components/Badge/tests/Badge.stories.js +34 -0
  19. package/dist/components/Breadcrumbs/Breadcrumbs.js +1 -0
  20. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.d.ts +8 -4
  21. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.js +57 -1
  22. package/dist/components/Button/Button.js +2 -2
  23. package/dist/components/Button/Button.types.d.ts +1 -1
  24. package/dist/components/Button/tests/Button.stories.d.ts +54 -12
  25. package/dist/components/Button/tests/Button.stories.js +725 -588
  26. package/dist/components/Calendar/CalendarMonth.js +1 -0
  27. package/dist/components/Card/Card.d.ts +1 -1
  28. package/dist/components/Card/Card.module.css +1 -1
  29. package/dist/components/Card/tests/Card.stories.d.ts +29 -7
  30. package/dist/components/Card/tests/Card.stories.js +110 -65
  31. package/dist/components/Carousel/Carousel.js +1 -0
  32. package/dist/components/Carousel/Carousel.module.css +1 -1
  33. package/dist/components/Checkbox/Checkbox.module.css +1 -1
  34. package/dist/components/Checkbox/tests/Checkbox.stories.d.ts +20 -4
  35. package/dist/components/Checkbox/tests/Checkbox.stories.js +150 -79
  36. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.d.ts +9 -2
  37. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.js +67 -35
  38. package/dist/components/Container/tests/Container.stories.d.ts +2 -0
  39. package/dist/components/Container/tests/Container.stories.js +14 -0
  40. package/dist/components/ContextMenu/tests/ContextMenu.stories.d.ts +10 -1
  41. package/dist/components/ContextMenu/tests/ContextMenu.stories.js +57 -13
  42. package/dist/components/Dismissible/tests/Dismissible.stories.d.ts +5 -0
  43. package/dist/components/Dismissible/tests/Dismissible.stories.js +30 -1
  44. package/dist/components/Divider/tests/Divider.stories.d.ts +8 -3
  45. package/dist/components/Divider/tests/Divider.stories.js +71 -41
  46. package/dist/components/DropdownMenu/DropdownMenu.js +4 -4
  47. package/dist/components/DropdownMenu/DropdownMenu.types.d.ts +2 -2
  48. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +35 -6
  49. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.js +222 -115
  50. package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.d.ts +0 -15
  51. package/dist/components/DropdownMenu/tests/DropdownMenu.test.stories.js +0 -106
  52. package/dist/components/FileUpload/FileUpload.module.css +1 -1
  53. package/dist/components/Flyout/Flyout.module.css +1 -1
  54. package/dist/components/Flyout/Flyout.types.d.ts +9 -6
  55. package/dist/components/Flyout/FlyoutContent.js +4 -1
  56. package/dist/components/Flyout/FlyoutControlled.js +11 -3
  57. package/dist/components/Flyout/index.d.ts +1 -1
  58. package/dist/components/Flyout/tests/Flyout.stories.d.ts +12 -0
  59. package/dist/components/Flyout/tests/Flyout.stories.js +112 -6
  60. package/dist/components/Flyout/useFlyout.d.ts +1 -6
  61. package/dist/components/Flyout/useFlyout.js +7 -1
  62. package/dist/components/Flyout/utilities/calculatePosition.d.ts +3 -2
  63. package/dist/components/Flyout/utilities/calculatePosition.js +85 -36
  64. package/dist/components/Flyout/utilities/flyout.js +24 -19
  65. package/dist/components/Flyout/utilities/getPositionFallbacks.js +3 -3
  66. package/dist/components/Flyout/utilities/helpers.d.ts +7 -0
  67. package/dist/components/Flyout/utilities/helpers.js +14 -0
  68. package/dist/components/Flyout/utilities/isFullyVisible.d.ts +4 -2
  69. package/dist/components/Flyout/utilities/isFullyVisible.js +6 -8
  70. package/dist/components/FormControl/FormControl.context.d.ts +1 -1
  71. package/dist/components/FormControl/tests/FormControl.stories.d.ts +2 -0
  72. package/dist/components/FormControl/tests/FormControl.stories.js +35 -0
  73. package/dist/components/Hidden/tests/Hidden.stories.d.ts +2 -0
  74. package/dist/components/Hidden/tests/Hidden.stories.js +9 -0
  75. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.d.ts +2 -0
  76. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.js +9 -0
  77. package/dist/components/Hotkey/tests/Hotkey.stories.d.ts +2 -0
  78. package/dist/components/Hotkey/tests/Hotkey.stories.js +15 -0
  79. package/dist/components/Icon/Icon.js +2 -2
  80. package/dist/components/Icon/Icon.types.d.ts +1 -1
  81. package/dist/components/Icon/tests/Icon.stories.d.ts +3 -0
  82. package/dist/components/Icon/tests/Icon.stories.js +29 -1
  83. package/dist/components/Link/Link.d.ts +1 -1
  84. package/dist/components/Link/Link.js +2 -2
  85. package/dist/components/Link/Link.types.d.ts +1 -1
  86. package/dist/components/Link/tests/Link.stories.d.ts +29 -6
  87. package/dist/components/Link/tests/Link.stories.js +141 -58
  88. package/dist/components/Link/tests/Link.test.stories.d.ts +1 -13
  89. package/dist/components/Link/tests/Link.test.stories.js +0 -76
  90. package/dist/components/Loader/tests/Loader.stories.d.ts +11 -2
  91. package/dist/components/Loader/tests/Loader.stories.js +52 -25
  92. package/dist/components/Loader/tests/Loader.test.stories.d.ts +0 -3
  93. package/dist/components/Loader/tests/Loader.test.stories.js +0 -21
  94. package/dist/components/MenuItem/MenuItem.js +2 -2
  95. package/dist/components/MenuItem/MenuItem.module.css +1 -1
  96. package/dist/components/MenuItem/MenuItem.types.d.ts +1 -1
  97. package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +37 -7
  98. package/dist/components/MenuItem/tests/MenuItem.stories.js +218 -112
  99. package/dist/components/Modal/Modal.js +1 -1
  100. package/dist/components/Modal/Modal.module.css +1 -1
  101. package/dist/components/Modal/tests/Modal.stories.d.ts +53 -10
  102. package/dist/components/Modal/tests/Modal.stories.js +367 -210
  103. package/dist/components/Overlay/Overlay.js +2 -1
  104. package/dist/components/Overlay/tests/Overlay.stories.d.ts +15 -1
  105. package/dist/components/Overlay/tests/Overlay.stories.js +135 -1
  106. package/dist/components/Pagination/tests/Pagination.stories.d.ts +14 -1
  107. package/dist/components/Pagination/tests/Pagination.stories.js +93 -15
  108. package/dist/components/PinField/PinField.module.css +1 -1
  109. package/dist/components/PinField/tests/PinField.stories.d.ts +24 -3
  110. package/dist/components/PinField/tests/PinField.stories.js +194 -47
  111. package/dist/components/Popover/Popover.js +2 -2
  112. package/dist/components/Popover/Popover.module.css +1 -1
  113. package/dist/components/Popover/Popover.types.d.ts +3 -1
  114. package/dist/components/Progress/tests/Progress.stories.d.ts +19 -4
  115. package/dist/components/Progress/tests/Progress.stories.js +85 -49
  116. package/dist/components/Radio/Radio.module.css +1 -1
  117. package/dist/components/Radio/tests/Radio.stories.d.ts +25 -4
  118. package/dist/components/Radio/tests/Radio.stories.js +147 -65
  119. package/dist/components/RadioGroup/tests/RadioGroup.stories.d.ts +9 -2
  120. package/dist/components/RadioGroup/tests/RadioGroup.stories.js +64 -38
  121. package/dist/components/Reshaped/Reshaped.css +1 -1
  122. package/dist/components/Scrim/tests/Scrim.stories.d.ts +10 -2
  123. package/dist/components/Scrim/tests/Scrim.stories.js +51 -31
  124. package/dist/components/ScrollArea/ScrollArea.module.css +1 -1
  125. package/dist/components/Select/Select.d.ts +8 -1
  126. package/dist/components/Select/Select.js +22 -48
  127. package/dist/components/Select/Select.module.css +1 -1
  128. package/dist/components/Select/Select.types.d.ts +83 -38
  129. package/dist/components/Select/SelectCustom.d.ts +3 -0
  130. package/dist/components/Select/SelectCustom.js +12 -0
  131. package/dist/components/Select/SelectCustomControlled.d.ts +4 -0
  132. package/dist/components/Select/SelectCustomControlled.js +105 -0
  133. package/dist/components/Select/SelectCustomUncontrolled.d.ts +4 -0
  134. package/dist/components/Select/SelectCustomUncontrolled.js +18 -0
  135. package/dist/components/Select/SelectEndContent.d.ts +3 -0
  136. package/dist/components/Select/SelectEndContent.js +12 -0
  137. package/dist/components/Select/SelectNative.d.ts +4 -0
  138. package/dist/components/Select/SelectNative.js +29 -0
  139. package/dist/components/Select/SelectOption.d.ts +4 -0
  140. package/dist/components/Select/SelectOption.js +13 -0
  141. package/dist/components/Select/SelectOptionGroup.d.ts +4 -0
  142. package/dist/components/Select/SelectOptionGroup.js +9 -0
  143. package/dist/components/Select/SelectRoot.d.ts +4 -0
  144. package/dist/components/Select/SelectRoot.js +21 -0
  145. package/dist/components/Select/SelectStartContent.d.ts +3 -0
  146. package/dist/components/Select/SelectStartContent.js +20 -0
  147. package/dist/components/Select/SelectTrigger.d.ts +4 -0
  148. package/dist/components/Select/SelectTrigger.js +16 -0
  149. package/dist/components/Select/tests/Select.stories.d.ts +38 -10
  150. package/dist/components/Select/tests/Select.stories.js +504 -175
  151. package/dist/components/Skeleton/tests/Skeleton.stories.d.ts +10 -2
  152. package/dist/components/Skeleton/tests/Skeleton.stories.js +46 -28
  153. package/dist/components/Slider/Slider.module.css +1 -1
  154. package/dist/components/Stepper/Stepper.js +2 -2
  155. package/dist/components/Stepper/Stepper.types.d.ts +2 -0
  156. package/dist/components/Stepper/tests/Stepper.stories.d.ts +18 -3
  157. package/dist/components/Stepper/tests/Stepper.stories.js +99 -47
  158. package/dist/components/Switch/Switch.module.css +1 -1
  159. package/dist/components/Switch/tests/Switch.stories.d.ts +10 -2
  160. package/dist/components/Switch/tests/Switch.stories.js +77 -23
  161. package/dist/components/Switch/tests/Switch.test.stories.d.ts +0 -10
  162. package/dist/components/Switch/tests/Switch.test.stories.js +0 -68
  163. package/dist/components/Table/Table.js +5 -3
  164. package/dist/components/Table/Table.module.css +1 -1
  165. package/dist/components/Table/tests/Table.stories.d.ts +25 -5
  166. package/dist/components/Table/tests/Table.stories.js +274 -177
  167. package/dist/components/Table/tests/Table.test.stories.d.ts +0 -5
  168. package/dist/components/Table/tests/Table.test.stories.js +0 -82
  169. package/dist/components/Tabs/Tabs.module.css +1 -1
  170. package/dist/components/Tabs/TabsControlled.js +1 -0
  171. package/dist/components/TextArea/TextArea.module.css +1 -1
  172. package/dist/components/TextArea/tests/TextArea.stories.d.ts +41 -9
  173. package/dist/components/TextArea/tests/TextArea.stories.js +179 -93
  174. package/dist/components/TextField/TextField.js +1 -1
  175. package/dist/components/TextField/TextField.module.css +1 -1
  176. package/dist/components/TextField/tests/TextField.stories.d.ts +41 -11
  177. package/dist/components/TextField/tests/TextField.stories.js +206 -132
  178. package/dist/components/TextField/tests/TextField.test.stories.d.ts +0 -13
  179. package/dist/components/TextField/tests/TextField.test.stories.js +0 -88
  180. package/dist/components/Theme/Theme.module.css +1 -1
  181. package/dist/components/Timeline/Timeline.js +2 -2
  182. package/dist/components/Timeline/tests/Timeline.stories.d.ts +10 -2
  183. package/dist/components/Timeline/tests/Timeline.stories.js +69 -45
  184. package/dist/components/Timeline/tests/Timeline.test.stories.d.ts +0 -2
  185. package/dist/components/Timeline/tests/Timeline.test.stories.js +0 -21
  186. package/dist/components/Toast/ToastContainer.js +1 -0
  187. package/dist/components/Toast/ToastRegion.js +1 -0
  188. package/dist/components/Toast/tests/Toast.stories.d.ts +32 -8
  189. package/dist/components/Toast/tests/Toast.stories.js +111 -37
  190. package/dist/components/ToggleButton/ToggleButton.types.d.ts +1 -1
  191. package/dist/components/ToggleButtonGroup/ToggleButtonGroupControlled.js +1 -0
  192. package/dist/components/Tooltip/Tooltip.js +1 -1
  193. package/dist/components/Tooltip/Tooltip.types.d.ts +2 -2
  194. package/dist/components/Tooltip/tests/Tooltip.stories.d.ts +18 -4
  195. package/dist/components/Tooltip/tests/Tooltip.stories.js +139 -107
  196. package/dist/components/Tooltip/tests/Tooltip.test.stories.d.ts +0 -6
  197. package/dist/components/Tooltip/tests/Tooltip.test.stories.js +0 -29
  198. package/dist/components/View/View.js +11 -4
  199. package/dist/components/View/tests/View.stories.d.ts +4 -0
  200. package/dist/components/View/tests/View.stories.js +39 -0
  201. package/dist/components/_private/Expandable/Expandable.js +3 -1
  202. package/dist/components/_private/Portal/Portal.js +4 -1
  203. package/dist/hooks/_private/useIsDismissible.d.ts +1 -0
  204. package/dist/hooks/_private/useIsDismissible.js +6 -6
  205. package/dist/hooks/_private/usePrevious.js +1 -0
  206. package/dist/hooks/tests/useDrag.stories.js +1 -1
  207. package/dist/hooks/useScrollLock.js +5 -3
  208. package/dist/index.d.ts +1 -1
  209. package/dist/styles/resolvers/align/align.css +1 -1
  210. package/dist/styles/resolvers/aspectRatio/aspectRatio.css +1 -1
  211. package/dist/styles/resolvers/bleed/bleed.module.css +1 -1
  212. package/dist/styles/resolvers/justify/justify.css +1 -1
  213. package/dist/styles/resolvers/maxHeight/maxHeight.module.css +1 -1
  214. package/dist/styles/resolvers/maxWidth/maxWidth.module.css +1 -1
  215. package/dist/styles/resolvers/minHeight/minHeight.module.css +1 -1
  216. package/dist/styles/resolvers/minWidth/minWidth.module.css +1 -1
  217. package/dist/styles/resolvers/position/position.css +1 -1
  218. package/dist/styles/resolvers/textAlign/textAlign.css +1 -1
  219. package/dist/styles/resolvers/width/width.module.css +1 -1
  220. package/dist/utilities/scroll/disable.js +2 -2
  221. package/dist/utilities/scroll/index.d.ts +1 -1
  222. package/dist/utilities/scroll/index.js +1 -1
  223. package/dist/utilities/scroll/lock.d.ts +1 -2
  224. package/dist/utilities/scroll/lock.js +16 -15
  225. package/dist/utilities/scroll/lockSafari.js +1 -0
  226. package/package.json +44 -33
  227. package/dist/components/Actionable/tests/Actionable.test.stories.d.ts +0 -32
  228. package/dist/components/Actionable/tests/Actionable.test.stories.js +0 -130
  229. package/dist/components/Alert/tests/Alert.test.stories.d.ts +0 -15
  230. package/dist/components/Alert/tests/Alert.test.stories.js +0 -26
  231. package/dist/components/Badge/tests/Badge.test.stories.d.ts +0 -20
  232. package/dist/components/Badge/tests/Badge.test.stories.js +0 -46
  233. package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.d.ts +0 -23
  234. package/dist/components/Breadcrumbs/tests/Breadcrumbs.test.stories.js +0 -76
  235. package/dist/components/Button/tests/Button.test.stories.d.ts +0 -27
  236. package/dist/components/Button/tests/Button.test.stories.js +0 -112
  237. package/dist/components/Card/tests/Card.test.stories.d.ts +0 -35
  238. package/dist/components/Card/tests/Card.test.stories.js +0 -54
  239. package/dist/components/Checkbox/tests/Checkbox.test.stories.d.ts +0 -25
  240. package/dist/components/Checkbox/tests/Checkbox.test.stories.js +0 -104
  241. package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.d.ts +0 -22
  242. package/dist/components/CheckboxGroup/tests/CheckboxGroup.test.stories.js +0 -78
  243. package/dist/components/Container/tests/Container.test.stories.d.ts +0 -15
  244. package/dist/components/Container/tests/Container.test.stories.js +0 -26
  245. package/dist/components/ContextMenu/tests/ContextMenu.test.stories.d.ts +0 -25
  246. package/dist/components/ContextMenu/tests/ContextMenu.test.stories.js +0 -53
  247. package/dist/components/Dismissible/tests/Dismissible.test.stories.d.ts +0 -19
  248. package/dist/components/Dismissible/tests/Dismissible.test.stories.js +0 -42
  249. package/dist/components/Divider/tests/Divider.test.stories.d.ts +0 -18
  250. package/dist/components/Divider/tests/Divider.test.stories.js +0 -47
  251. package/dist/components/FormControl/tests/FormControl.test.stories.d.ts +0 -20
  252. package/dist/components/FormControl/tests/FormControl.test.stories.js +0 -49
  253. package/dist/components/Hidden/tests/Hidden.test.stories.d.ts +0 -15
  254. package/dist/components/Hidden/tests/Hidden.test.stories.js +0 -20
  255. package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.d.ts +0 -15
  256. package/dist/components/HiddenVisually/tests/HiddenVisually.test.stories.js +0 -20
  257. package/dist/components/Hotkey/tests/Hotkey.test.stories.d.ts +0 -15
  258. package/dist/components/Hotkey/tests/Hotkey.test.stories.js +0 -26
  259. package/dist/components/Icon/tests/Icon.test.stories.d.ts +0 -16
  260. package/dist/components/Icon/tests/Icon.test.stories.js +0 -35
  261. package/dist/components/MenuItem/tests/MenuItem.test.stories.d.ts +0 -26
  262. package/dist/components/MenuItem/tests/MenuItem.test.stories.js +0 -100
  263. package/dist/components/Modal/tests/Modal.test.stories.d.ts +0 -31
  264. package/dist/components/Modal/tests/Modal.test.stories.js +0 -149
  265. package/dist/components/Overlay/tests/Overlay.test.stories.d.ts +0 -28
  266. package/dist/components/Overlay/tests/Overlay.test.stories.js +0 -148
  267. package/dist/components/Pagination/tests/Pagination.test.stories.d.ts +0 -23
  268. package/dist/components/Pagination/tests/Pagination.test.stories.js +0 -86
  269. package/dist/components/PinField/tests/PinField.test.stories.d.ts +0 -29
  270. package/dist/components/PinField/tests/PinField.test.stories.js +0 -177
  271. package/dist/components/Progress/tests/Progress.test.stories.d.ts +0 -16
  272. package/dist/components/Progress/tests/Progress.test.stories.js +0 -35
  273. package/dist/components/Radio/tests/Radio.test.stories.d.ts +0 -30
  274. package/dist/components/Radio/tests/Radio.test.stories.js +0 -118
  275. package/dist/components/RadioGroup/tests/RadioGroup.test.stories.d.ts +0 -22
  276. package/dist/components/RadioGroup/tests/RadioGroup.test.stories.js +0 -78
  277. package/dist/components/Scrim/tests/Scrim.test.stories.d.ts +0 -15
  278. package/dist/components/Scrim/tests/Scrim.test.stories.js +0 -25
  279. package/dist/components/Select/tests/Select.test.stories.d.ts +0 -27
  280. package/dist/components/Select/tests/Select.test.stories.js +0 -132
  281. package/dist/components/Skeleton/tests/Skeleton.test.stories.d.ts +0 -15
  282. package/dist/components/Skeleton/tests/Skeleton.test.stories.js +0 -23
  283. package/dist/components/Stepper/tests/Stepper.test.stories.d.ts +0 -20
  284. package/dist/components/Stepper/tests/Stepper.test.stories.js +0 -28
  285. package/dist/components/TextArea/tests/TextArea.test.stories.d.ts +0 -28
  286. package/dist/components/TextArea/tests/TextArea.test.stories.js +0 -99
  287. package/dist/components/Toast/tests/Toast.test.stories.d.ts +0 -16
  288. package/dist/components/Toast/tests/Toast.test.stories.js +0 -101
  289. package/dist/components/View/tests/View.test.stories.d.ts +0 -24
  290. package/dist/components/View/tests/View.test.stories.js +0 -50
@@ -1,177 +0,0 @@
1
- import { expect, fn, userEvent, waitFor } from "storybook/test";
2
- import FormControl from "../../FormControl/index.js";
3
- import PinField from "../index.js";
4
- export default {
5
- title: "Components/PinField/tests",
6
- component: PinField,
7
- parameters: {
8
- iframe: {
9
- url: "https://reshaped.so/docs/components/pin-field",
10
- },
11
- chromatic: { disableSnapshot: true },
12
- },
13
- };
14
- export const render = {
15
- name: "rendering",
16
- render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
17
- play: async ({ canvas }) => {
18
- const elInput = canvas.getByRole("textbox");
19
- expect(elInput).toBeInTheDocument();
20
- expect(elInput).toHaveAttribute("name", "test-name");
21
- expect(elInput).toHaveAttribute("autocomplete", "one-time-code");
22
- expect(elInput).toHaveAttribute("inputmode", "numeric");
23
- },
24
- };
25
- export const valueLength = {
26
- name: "valueLength",
27
- render: () => (<PinField name="test-name" valueLength={6} inputAttributes={{ "aria-label": "Label" }}/>),
28
- play: async ({ canvas }) => {
29
- const elInput = canvas.getByRole("textbox");
30
- expect(elInput).toHaveAttribute("maxlength", "6");
31
- },
32
- };
33
- export const defaultValue = {
34
- name: "defaultValue, uncontrolled",
35
- args: {
36
- handleChange: fn(),
37
- },
38
- render: (args) => (<PinField name="test-name" onChange={args.handleChange} defaultValue="12" inputAttributes={{ "aria-label": "Label" }}/>),
39
- play: async ({ canvas, args }) => {
40
- const elInput = canvas.getByRole("textbox");
41
- elInput.focus();
42
- await userEvent.keyboard("3");
43
- expect(args.handleChange).toHaveBeenCalledTimes(1);
44
- expect(args.handleChange).toHaveBeenCalledWith({
45
- value: "123",
46
- name: "test-name",
47
- event: expect.objectContaining({ target: elInput }),
48
- });
49
- expect(elInput).toHaveValue("123");
50
- },
51
- };
52
- export const value = {
53
- name: "value, controlled",
54
- args: {
55
- handleChange: fn(),
56
- },
57
- render: (args) => (<PinField name="test-name" onChange={args.handleChange} value="12" inputAttributes={{ "aria-label": "Label" }}/>),
58
- play: async ({ canvas, args }) => {
59
- const elInput = canvas.getByRole("textbox");
60
- elInput.focus();
61
- await userEvent.keyboard("3");
62
- expect(args.handleChange).toHaveBeenCalledTimes(1);
63
- expect(args.handleChange).toHaveBeenCalledWith({
64
- value: "123",
65
- name: "test-name",
66
- event: expect.objectContaining({ target: elInput }),
67
- });
68
- expect(elInput).toHaveValue("12");
69
- },
70
- };
71
- export const pattern = {
72
- name: "pattern",
73
- args: {
74
- handleChange: fn(),
75
- },
76
- render: (args) => (<PinField name="test-name" pattern="alphabetic" defaultValue="ab" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
77
- play: async ({ canvas, args }) => {
78
- const elInput = canvas.getByRole("textbox");
79
- elInput.focus();
80
- await userEvent.keyboard("3");
81
- expect(elInput).toHaveValue("ab");
82
- expect(args.handleChange).toHaveBeenCalledTimes(0);
83
- await userEvent.keyboard("c");
84
- expect(elInput).toHaveValue("abc");
85
- expect(args.handleChange).toHaveBeenCalledTimes(1);
86
- },
87
- };
88
- export const formControl = {
89
- name: "with FormControl",
90
- render: () => (<FormControl>
91
- <FormControl.Label>Label</FormControl.Label>
92
- <PinField name="test-name"/>
93
- </FormControl>),
94
- play: async ({ canvas }) => {
95
- const elInput = canvas.getByRole("textbox");
96
- expect(elInput).toHaveAccessibleName("Label");
97
- },
98
- };
99
- export const keyboard = {
100
- name: "keyboard navigation",
101
- render: () => <PinField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
102
- play: async ({ canvas }) => {
103
- const elInput = canvas.getByRole("textbox");
104
- elInput.focus();
105
- expect(elInput.selectionStart).toEqual(0);
106
- expect(elInput.selectionEnd).toEqual(0);
107
- await userEvent.keyboard("1");
108
- await waitFor(() => {
109
- expect(elInput.selectionStart).toEqual(1);
110
- expect(elInput.selectionEnd).toEqual(1);
111
- });
112
- await userEvent.keyboard("234");
113
- await waitFor(() => {
114
- expect(elInput.selectionStart).toEqual(3);
115
- expect(elInput.selectionEnd).toEqual(4);
116
- });
117
- // Move back to the first character
118
- await userEvent.keyboard("{ArrowLeft/}");
119
- await waitFor(() => {
120
- expect(elInput.selectionStart).toEqual(2);
121
- expect(elInput.selectionEnd).toEqual(3);
122
- });
123
- await userEvent.keyboard("{ArrowLeft/}");
124
- await waitFor(() => {
125
- expect(elInput.selectionStart).toEqual(1);
126
- expect(elInput.selectionEnd).toEqual(2);
127
- });
128
- await userEvent.keyboard("{ArrowLeft}");
129
- await waitFor(() => {
130
- expect(elInput.selectionStart).toEqual(0);
131
- expect(elInput.selectionEnd).toEqual(1);
132
- });
133
- // Move to the third character
134
- await userEvent.keyboard("{ArrowRight}");
135
- await waitFor(() => {
136
- expect(elInput.selectionStart).toEqual(1);
137
- expect(elInput.selectionEnd).toEqual(2);
138
- });
139
- await userEvent.keyboard("{ArrowRight}");
140
- await waitFor(() => {
141
- expect(elInput.selectionStart).toEqual(2);
142
- expect(elInput.selectionEnd).toEqual(3);
143
- });
144
- expect(elInput).toHaveValue("1234");
145
- await userEvent.keyboard("{backspace}");
146
- expect(elInput).toHaveValue("124");
147
- await waitFor(() => {
148
- expect(elInput.selectionStart).toEqual(2);
149
- expect(elInput.selectionEnd).toEqual(3);
150
- });
151
- // Switched to type mode
152
- await userEvent.keyboard("{ArrowRight}");
153
- await waitFor(() => {
154
- expect(elInput.selectionStart).toEqual(3);
155
- expect(elInput.selectionStart).toEqual(3);
156
- });
157
- // Can't move further
158
- await userEvent.keyboard("{ArrowRight}");
159
- await waitFor(() => {
160
- expect(elInput.selectionStart).toEqual(3);
161
- expect(elInput.selectionStart).toEqual(3);
162
- });
163
- },
164
- };
165
- export const className = {
166
- name: "className, attributes",
167
- render: () => (<div data-testid="root">
168
- <PinField name="test-name" className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "Label", id: "test-input-id" }}/>
169
- </div>),
170
- play: async ({ canvas }) => {
171
- const root = canvas.getByTestId("root").firstChild;
172
- const input = canvas.queryByLabelText("Label");
173
- expect(root).toHaveClass("test-classname");
174
- expect(root).toHaveAttribute("id", "test-id");
175
- expect(input).toHaveAttribute("id", "test-input-id");
176
- },
177
- };
@@ -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
- };
@@ -1,30 +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("./..").RadioProps>;
6
- parameters: {
7
- iframe: {
8
- url: string;
9
- };
10
- chromatic: {
11
- disableSnapshot: boolean;
12
- };
13
- };
14
- };
15
- export default _default;
16
- export declare const render: StoryObj;
17
- export declare const checked: StoryObj<{
18
- handleChange: ReturnType<typeof fn>;
19
- }>;
20
- export declare const checkedFalse: StoryObj<{
21
- handleChange: ReturnType<typeof fn>;
22
- }>;
23
- export declare const defaultChecked: StoryObj<{
24
- handleChange: ReturnType<typeof fn>;
25
- }>;
26
- export declare const defaultCheckedFalse: StoryObj<{
27
- handleChange: ReturnType<typeof fn>;
28
- }>;
29
- export declare const disabled: StoryObj;
30
- export declare const className: StoryObj;
@@ -1,118 +0,0 @@
1
- import { expect, userEvent, fn } from "storybook/test";
2
- import Radio from "../index.js";
3
- export default {
4
- title: "Components/Radio/tests",
5
- component: Radio,
6
- parameters: {
7
- iframe: {
8
- url: "https://reshaped.so/docs/components/radio",
9
- },
10
- chromatic: { disableSnapshot: true },
11
- },
12
- };
13
- export const render = {
14
- name: "name, value",
15
- render: () => (<Radio name="test-name" value="test-value">
16
- Content
17
- </Radio>),
18
- play: async ({ canvas }) => {
19
- const input = canvas.getByRole("radio");
20
- expect(input).toHaveAttribute("value", "test-value");
21
- expect(input).toHaveAttribute("name", "test-name");
22
- expect(input).not.toBeChecked();
23
- },
24
- };
25
- export const checked = {
26
- name: "checked, controlled",
27
- args: {
28
- handleChange: fn(),
29
- },
30
- render: (args) => (<Radio name="test-name" value="test-value" checked onChange={args.handleChange}>
31
- Content
32
- </Radio>),
33
- play: async ({ canvas, args }) => {
34
- const input = canvas.getByRole("radio");
35
- expect(input).toBeChecked();
36
- },
37
- };
38
- export const checkedFalse = {
39
- name: "checked false, controlled",
40
- args: {
41
- handleChange: fn(),
42
- },
43
- render: (args) => (<Radio name="test-name" value="test-value" checked={false} onChange={args.handleChange}>
44
- Content
45
- </Radio>),
46
- play: async ({ canvas, args }) => {
47
- const input = canvas.getByRole("radio");
48
- expect(input).not.toBeChecked();
49
- await userEvent.click(input);
50
- expect(args.handleChange).toHaveBeenCalledTimes(1);
51
- expect(args.handleChange).toHaveBeenCalledWith({
52
- name: "test-name",
53
- value: "test-value",
54
- checked: true,
55
- event: expect.objectContaining({ target: input }),
56
- });
57
- // Still not checked because it's controlled
58
- expect(input).not.toBeChecked();
59
- },
60
- };
61
- export const defaultChecked = {
62
- name: "defaultChecked, uncontrolled",
63
- args: {
64
- handleChange: fn(),
65
- },
66
- render: (args) => (<Radio name="test-name" value="test-value" defaultChecked onChange={args.handleChange}>
67
- Content
68
- </Radio>),
69
- play: async ({ canvas, args }) => {
70
- const input = canvas.getByRole("radio");
71
- expect(input).toBeChecked();
72
- },
73
- };
74
- export const defaultCheckedFalse = {
75
- name: "defaultChecked false, uncontrolled",
76
- args: {
77
- handleChange: fn(),
78
- },
79
- render: (args) => (<Radio name="test-name" value="test-value" onChange={args.handleChange}>
80
- Content
81
- </Radio>),
82
- play: async ({ canvas, args }) => {
83
- const input = canvas.getByRole("radio");
84
- expect(input).not.toBeChecked();
85
- await userEvent.click(input);
86
- expect(args.handleChange).toHaveBeenCalledTimes(1);
87
- expect(args.handleChange).toHaveBeenCalledWith({
88
- name: "test-name",
89
- value: "test-value",
90
- checked: true,
91
- event: expect.objectContaining({ target: input }),
92
- });
93
- expect(input).toBeChecked();
94
- },
95
- };
96
- export const disabled = {
97
- name: "disabled",
98
- render: () => (<Radio name="test-name" value="test-value" disabled>
99
- Content
100
- </Radio>),
101
- play: async ({ canvas }) => {
102
- const input = canvas.getByRole("radio");
103
- expect(input).toBeDisabled();
104
- },
105
- };
106
- export const className = {
107
- name: "className, attributes",
108
- render: () => (<div data-testid="root">
109
- <Radio className="test-classname" attributes={{ id: "test-id" }} value="value">
110
- Content
111
- </Radio>
112
- </div>),
113
- play: async ({ canvas }) => {
114
- const root = canvas.getByTestId("root").firstChild;
115
- expect(root).toHaveClass("test-classname");
116
- expect(root).toHaveAttribute("id", "test-id");
117
- },
118
- };
@@ -1,22 +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("./..").RadioGroupProps>;
6
- parameters: {
7
- iframe: {
8
- url: string;
9
- };
10
- chromatic: {
11
- disableSnapshot: boolean;
12
- };
13
- };
14
- };
15
- export default _default;
16
- export declare const value: StoryObj<{
17
- handleChange: ReturnType<typeof fn>;
18
- }>;
19
- export declare const defaultValue: StoryObj<{
20
- handleChange: ReturnType<typeof fn>;
21
- }>;
22
- export declare const disabled: StoryObj;
@@ -1,78 +0,0 @@
1
- import { fn, userEvent, expect } from "storybook/test";
2
- import RadioGroup from "../index.js";
3
- import Radio from "../../Radio/index.js";
4
- export default {
5
- title: "Components/RadioGroup/tests",
6
- component: RadioGroup,
7
- parameters: {
8
- iframe: {
9
- url: "https://reshaped.so/docs/components/radio",
10
- },
11
- chromatic: { disableSnapshot: true },
12
- },
13
- };
14
- export const value = {
15
- name: "value, controlled",
16
- args: {
17
- handleChange: fn(),
18
- },
19
- render: (args) => (<RadioGroup name="test-name" value="1" onChange={args.handleChange}>
20
- {/* checked should be ignored */}
21
- <Radio value="1" checked={false}>
22
- Content
23
- </Radio>
24
-
25
- <Radio value="2">Content 2</Radio>
26
- </RadioGroup>),
27
- play: async ({ canvas, args }) => {
28
- const inputs = canvas.getAllByRole("radio");
29
- expect(inputs[0]).toBeChecked();
30
- await userEvent.click(inputs[1]);
31
- expect(args.handleChange).toHaveBeenCalledTimes(1);
32
- expect(args.handleChange).toHaveBeenCalledWith({
33
- name: "test-name",
34
- value: "2",
35
- event: expect.objectContaining({ target: inputs[1] }),
36
- });
37
- // Still checked because it's controlled
38
- expect(inputs[0]).toBeChecked();
39
- expect(inputs[1]).not.toBeChecked();
40
- },
41
- };
42
- export const defaultValue = {
43
- name: "defaultValue, uncontrolled",
44
- args: {
45
- handleChange: fn(),
46
- },
47
- render: (args) => (<RadioGroup name="test-name" defaultValue="1" onChange={args.handleChange}>
48
- {/* checked should be ignored */}
49
- <Radio value="1" checked={false}>
50
- Content
51
- </Radio>
52
-
53
- <Radio value="2">Content 2</Radio>
54
- </RadioGroup>),
55
- play: async ({ canvas, args }) => {
56
- const inputs = canvas.getAllByRole("radio");
57
- expect(inputs[0]).toBeChecked();
58
- await userEvent.click(inputs[1]);
59
- expect(args.handleChange).toHaveBeenCalledTimes(1);
60
- expect(args.handleChange).toHaveBeenCalledWith({
61
- name: "test-name",
62
- value: "2",
63
- event: expect.objectContaining({ target: inputs[1] }),
64
- });
65
- expect(inputs[0]).not.toBeChecked();
66
- expect(inputs[1]).toBeChecked();
67
- },
68
- };
69
- export const disabled = {
70
- name: "disabled",
71
- render: () => (<RadioGroup name="test-name" disabled>
72
- <Radio value="test-value">Content</Radio>
73
- </RadioGroup>),
74
- play: async ({ canvas }) => {
75
- const input = canvas.getByRole("radio");
76
- expect(input).toBeDisabled();
77
- },
78
- };
@@ -1,15 +0,0 @@
1
- import { StoryObj } from "@storybook/react-vite";
2
- declare const _default: {
3
- title: string;
4
- component: import("react").FC<import("./..").ScrimProps>;
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,25 +0,0 @@
1
- import { expect } from "storybook/test";
2
- import Scrim from "../index.js";
3
- export default {
4
- title: "Components/Scrim/tests",
5
- component: Scrim,
6
- parameters: {
7
- iframe: {
8
- url: "https://reshaped.so/docs/components/scrim",
9
- },
10
- chromatic: { disableSnapshot: true },
11
- },
12
- };
13
- export const className = {
14
- name: "className, attributes",
15
- render: () => (<div data-testid="root">
16
- <Scrim className="test-classname" attributes={{ id: "test-id" }}>
17
- Content
18
- </Scrim>
19
- </div>),
20
- play: async ({ canvas }) => {
21
- const root = canvas.getByTestId("root").firstChild;
22
- expect(root).toHaveClass("test-classname");
23
- expect(root).toHaveAttribute("id", "test-id");
24
- },
25
- };
@@ -1,27 +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("./..").SelectProps>;
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 startSlot: StoryObj;
18
- export declare const placeholder: StoryObj;
19
- export declare const id: StoryObj;
20
- export declare const disabled: StoryObj;
21
- export declare const defaultValue: StoryObj<{
22
- handleChange: ReturnType<typeof fn>;
23
- }>;
24
- export declare const value: StoryObj<{
25
- handleChange: ReturnType<typeof fn>;
26
- }>;
27
- export declare const className: StoryObj;
@@ -1,132 +0,0 @@
1
- import { expect, userEvent, fn } from "storybook/test";
2
- import Select from "../index.js";
3
- export default {
4
- title: "Components/Select/tests",
5
- component: Select,
6
- parameters: {
7
- iframe: {
8
- url: "https://reshaped.so/docs/components/select",
9
- },
10
- chromatic: { disableSnapshot: true },
11
- },
12
- };
13
- export const render = {
14
- name: "rendering",
15
- render: () => (<Select name="test-name" options={[
16
- { label: "Option 1", value: "1" },
17
- { label: "Option 2", value: "2" },
18
- ]} inputAttributes={{ "aria-label": "test select" }}/>),
19
- play: async ({ canvas }) => {
20
- const elInput = canvas.getByRole("combobox");
21
- const elOptions = canvas.getAllByRole("option");
22
- expect(elInput).toHaveAttribute("name", "test-name");
23
- expect(elInput).toHaveValue("1");
24
- expect(elOptions.length).toBe(2);
25
- expect(elOptions[0]).toHaveValue("1");
26
- expect(elOptions[0].textContent).toBe("Option 1");
27
- expect(elOptions[1]).toHaveValue("2");
28
- expect(elOptions[1].textContent).toBe("Option 2");
29
- },
30
- };
31
- export const startSlot = {
32
- name: "startSlot",
33
- render: () => (<Select name="test-name" startSlot="Slot" options={[]} inputAttributes={{ "aria-label": "test select" }}/>),
34
- play: async ({ canvas }) => {
35
- const slot = canvas.getByText("Slot");
36
- expect(slot).toBeInTheDocument();
37
- },
38
- };
39
- export const placeholder = {
40
- name: "placeholder",
41
- render: () => (<Select name="test-name" placeholder="Placeholder" options={[
42
- { label: "Option 1", value: "1" },
43
- { label: "Option 2", value: "2" },
44
- ]} inputAttributes={{ "aria-label": "test select" }}/>),
45
- play: async ({ canvas }) => {
46
- const input = canvas.getByRole("combobox");
47
- const options = canvas.getAllByRole("option");
48
- expect(input).toHaveValue("");
49
- expect(options.length).toBe(3);
50
- expect(options[0].textContent).toBe("Placeholder");
51
- expect(options[0]).toHaveValue("");
52
- },
53
- };
54
- export const id = {
55
- name: "id",
56
- render: () => (<Select name="test-name" id="test-id" options={[
57
- { label: "Option 1", value: "1" },
58
- { label: "Option 2", value: "2" },
59
- ]} inputAttributes={{ "aria-label": "test select" }}/>),
60
- play: async ({ canvas }) => {
61
- const input = canvas.getByRole("combobox");
62
- expect(input).toHaveAttribute("id", "test-id");
63
- },
64
- };
65
- export const disabled = {
66
- name: "disabled",
67
- render: () => (<Select name="test-name" disabled options={[
68
- { label: "Option 1", value: "1" },
69
- { label: "Option 2", value: "2" },
70
- ]} inputAttributes={{ "aria-label": "test select" }}/>),
71
- play: async ({ canvas }) => {
72
- const input = canvas.getByRole("combobox");
73
- expect(input).toBeDisabled();
74
- },
75
- };
76
- export const defaultValue = {
77
- name: "defaultValue, uncontrolled",
78
- args: {
79
- handleChange: fn(),
80
- },
81
- render: (args) => (<Select name="test-name" defaultValue="2" onChange={args.handleChange} options={[
82
- { label: "Option 1", value: "1" },
83
- { label: "Option 2", value: "2" },
84
- ]} inputAttributes={{ "aria-label": "test select" }}/>),
85
- play: async ({ canvas, args }) => {
86
- const input = canvas.getByRole("combobox");
87
- expect(input).toHaveValue("2");
88
- await userEvent.selectOptions(input, "1");
89
- expect(args.handleChange).toBeCalledTimes(1);
90
- expect(args.handleChange).toHaveBeenCalledWith({
91
- name: "test-name",
92
- value: "1",
93
- event: expect.objectContaining({ target: input }),
94
- });
95
- expect(input).toHaveValue("1");
96
- },
97
- };
98
- export const value = {
99
- name: "value, controlled",
100
- args: {
101
- handleChange: fn(),
102
- },
103
- render: (args) => (<Select name="test-name" value="2" onChange={args.handleChange} options={[
104
- { label: "Option 1", value: "1" },
105
- { label: "Option 2", value: "2" },
106
- ]} inputAttributes={{ "aria-label": "test select" }}/>),
107
- play: async ({ canvas, args }) => {
108
- const input = canvas.getByRole("combobox");
109
- expect(input).toHaveValue("2");
110
- await userEvent.selectOptions(input, "1");
111
- expect(args.handleChange).toBeCalledTimes(1);
112
- expect(args.handleChange).toHaveBeenCalledWith({
113
- name: "test-name",
114
- value: "1",
115
- event: expect.objectContaining({ target: input }),
116
- });
117
- expect(input).toHaveValue("2");
118
- },
119
- };
120
- export const className = {
121
- name: "className, attributes",
122
- render: () => (<div data-testid="root">
123
- <Select className="test-classname" attributes={{ id: "test-id" }} inputAttributes={{ "aria-label": "test select", id: "test-input-id" }} options={[]} name="name"/>
124
- </div>),
125
- play: async ({ canvas }) => {
126
- const root = canvas.getByTestId("root").firstChild;
127
- const input = canvas.getByRole("combobox");
128
- expect(root).toHaveClass("test-classname");
129
- expect(root).toHaveAttribute("id", "test-id");
130
- expect(input).toHaveAttribute("id", "test-input-id");
131
- },
132
- };