reshaped 3.9.0-canary.0 → 3.9.0-canary.1

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 (177) hide show
  1. package/dist/bundle.css +1 -1
  2. package/dist/bundle.js +10 -10
  3. package/dist/components/Button/Button.module.css +1 -1
  4. package/dist/components/Card/Card.module.css +1 -1
  5. package/dist/components/DropdownMenu/DropdownMenu.js +1 -1
  6. package/dist/components/Flyout/Flyout.constants.d.ts +1 -3
  7. package/dist/components/Flyout/Flyout.constants.js +1 -3
  8. package/dist/components/Flyout/FlyoutControlled.js +6 -8
  9. package/dist/components/Flyout/utilities/cooldown.js +1 -2
  10. package/dist/components/Icon/Icon.module.css +1 -1
  11. package/dist/components/Progress/Progress.module.css +1 -1
  12. package/dist/components/Reshaped/Reshaped.css +1 -1
  13. package/dist/components/Text/Text.module.css +1 -1
  14. package/dist/components/Theme/Theme.module.css +1 -1
  15. package/dist/hooks/useOnClickOutside.js +2 -4
  16. package/dist/themes/_generator/tokens/css.js +2 -2
  17. package/dist/themes/figma/theme.css +1 -1
  18. package/dist/themes/fragments/twitter/theme.css +1 -1
  19. package/dist/themes/reshaped/theme.css +1 -1
  20. package/dist/themes/slate/theme.css +1 -1
  21. package/package.json +40 -35
  22. package/dist/components/Accordion/tests/Accordion.stories.d.ts +0 -44
  23. package/dist/components/Accordion/tests/Accordion.stories.js +0 -204
  24. package/dist/components/ActionBar/tests/ActionBar.stories.d.ts +0 -40
  25. package/dist/components/ActionBar/tests/ActionBar.stories.js +0 -223
  26. package/dist/components/Actionable/tests/Actionable.stories.d.ts +0 -41
  27. package/dist/components/Actionable/tests/Actionable.stories.js +0 -220
  28. package/dist/components/Alert/tests/Alert.stories.d.ts +0 -24
  29. package/dist/components/Alert/tests/Alert.stories.js +0 -78
  30. package/dist/components/Autocomplete/tests/Autocomplete.stories.d.ts +0 -32
  31. package/dist/components/Autocomplete/tests/Autocomplete.stories.js +0 -246
  32. package/dist/components/Avatar/tests/Avatar.stories.d.ts +0 -31
  33. package/dist/components/Avatar/tests/Avatar.stories.js +0 -176
  34. package/dist/components/Badge/tests/Badge.stories.d.ts +0 -55
  35. package/dist/components/Badge/tests/Badge.stories.js +0 -328
  36. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.d.ts +0 -40
  37. package/dist/components/Breadcrumbs/tests/Breadcrumbs.stories.js +0 -187
  38. package/dist/components/Button/tests/Button.stories.d.ts +0 -79
  39. package/dist/components/Button/tests/Button.stories.js +0 -789
  40. package/dist/components/Calendar/tests/Calendar.stories.d.ts +0 -29
  41. package/dist/components/Calendar/tests/Calendar.stories.js +0 -255
  42. package/dist/components/Card/tests/Card.stories.d.ts +0 -52
  43. package/dist/components/Card/tests/Card.stories.js +0 -125
  44. package/dist/components/Carousel/tests/Carousel.stories.d.ts +0 -34
  45. package/dist/components/Carousel/tests/Carousel.stories.js +0 -224
  46. package/dist/components/Checkbox/tests/Checkbox.stories.d.ts +0 -30
  47. package/dist/components/Checkbox/tests/Checkbox.stories.js +0 -171
  48. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.d.ts +0 -19
  49. package/dist/components/CheckboxGroup/tests/CheckboxGroup.stories.js +0 -83
  50. package/dist/components/Container/tests/Container.stories.d.ts +0 -24
  51. package/dist/components/Container/tests/Container.stories.js +0 -75
  52. package/dist/components/ContextMenu/tests/ContextMenu.stories.d.ts +0 -26
  53. package/dist/components/ContextMenu/tests/ContextMenu.stories.js +0 -70
  54. package/dist/components/Dismissible/tests/Dismissible.stories.d.ts +0 -25
  55. package/dist/components/Dismissible/tests/Dismissible.stories.js +0 -97
  56. package/dist/components/Divider/tests/Divider.stories.d.ts +0 -20
  57. package/dist/components/Divider/tests/Divider.stories.js +0 -120
  58. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.d.ts +0 -53
  59. package/dist/components/DropdownMenu/tests/DropdownMenu.stories.js +0 -278
  60. package/dist/components/FileUpload/tests/FileUpload.stories.d.ts +0 -31
  61. package/dist/components/FileUpload/tests/FileUpload.stories.js +0 -140
  62. package/dist/components/Flyout/tests/Flyout.stories.d.ts +0 -103
  63. package/dist/components/Flyout/tests/Flyout.stories.js +0 -738
  64. package/dist/components/FormControl/tests/FormControl.stories.d.ts +0 -31
  65. package/dist/components/FormControl/tests/FormControl.stories.js +0 -143
  66. package/dist/components/Grid/tests/Grid.stories.d.ts +0 -38
  67. package/dist/components/Grid/tests/Grid.stories.js +0 -245
  68. package/dist/components/Hidden/tests/Hidden.stories.d.ts +0 -16
  69. package/dist/components/Hidden/tests/Hidden.stories.js +0 -48
  70. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.d.ts +0 -16
  71. package/dist/components/HiddenVisually/tests/HiddenVisually.stories.js +0 -28
  72. package/dist/components/Hotkey/tests/Hotkey.stories.d.ts +0 -13
  73. package/dist/components/Hotkey/tests/Hotkey.stories.js +0 -53
  74. package/dist/components/Icon/tests/Icon.stories.d.ts +0 -25
  75. package/dist/components/Icon/tests/Icon.stories.js +0 -113
  76. package/dist/components/Image/tests/Image.stories.d.ts +0 -41
  77. package/dist/components/Image/tests/Image.stories.js +0 -196
  78. package/dist/components/Link/tests/Link.stories.d.ts +0 -42
  79. package/dist/components/Link/tests/Link.stories.js +0 -155
  80. package/dist/components/Loader/tests/Loader.stories.d.ts +0 -21
  81. package/dist/components/Loader/tests/Loader.stories.js +0 -68
  82. package/dist/components/MenuItem/tests/MenuItem.stories.d.ts +0 -59
  83. package/dist/components/MenuItem/tests/MenuItem.stories.js +0 -236
  84. package/dist/components/Modal/tests/Modal.stories.d.ts +0 -64
  85. package/dist/components/Modal/tests/Modal.stories.js +0 -410
  86. package/dist/components/NumberField/tests/NumberField.stories.d.ts +0 -28
  87. package/dist/components/NumberField/tests/NumberField.stories.js +0 -258
  88. package/dist/components/Overlay/tests/Overlay.stories.d.ts +0 -28
  89. package/dist/components/Overlay/tests/Overlay.stories.js +0 -202
  90. package/dist/components/Pagination/tests/Pagination.stories.d.ts +0 -24
  91. package/dist/components/Pagination/tests/Pagination.stories.js +0 -105
  92. package/dist/components/PinField/tests/PinField.stories.d.ts +0 -34
  93. package/dist/components/PinField/tests/PinField.stories.js +0 -209
  94. package/dist/components/Popover/tests/Popover.stories.d.ts +0 -69
  95. package/dist/components/Popover/tests/Popover.stories.js +0 -340
  96. package/dist/components/Progress/tests/Progress.stories.d.ts +0 -30
  97. package/dist/components/Progress/tests/Progress.stories.js +0 -102
  98. package/dist/components/ProgressIndicator/tests/ProgressIndicator.stories.d.ts +0 -19
  99. package/dist/components/ProgressIndicator/tests/ProgressIndicator.stories.js +0 -92
  100. package/dist/components/Radio/tests/Radio.stories.d.ts +0 -35
  101. package/dist/components/Radio/tests/Radio.stories.js +0 -162
  102. package/dist/components/RadioGroup/tests/RadioGroup.stories.d.ts +0 -19
  103. package/dist/components/RadioGroup/tests/RadioGroup.stories.js +0 -77
  104. package/dist/components/Reshaped/tests/Reshaped.stories.d.ts +0 -34
  105. package/dist/components/Reshaped/tests/Reshaped.stories.js +0 -108
  106. package/dist/components/Resizable/tests/Resizable.stories.d.ts +0 -38
  107. package/dist/components/Resizable/tests/Resizable.stories.js +0 -185
  108. package/dist/components/Scrim/tests/Scrim.stories.d.ts +0 -20
  109. package/dist/components/Scrim/tests/Scrim.stories.js +0 -67
  110. package/dist/components/ScrollArea/tests/ScrollArea.stories.d.ts +0 -37
  111. package/dist/components/ScrollArea/tests/ScrollArea.stories.js +0 -244
  112. package/dist/components/Select/tests/Select.stories.d.ts +0 -53
  113. package/dist/components/Select/tests/Select.stories.js +0 -616
  114. package/dist/components/Skeleton/tests/Skeleton.stories.d.ts +0 -20
  115. package/dist/components/Skeleton/tests/Skeleton.stories.js +0 -63
  116. package/dist/components/Slider/tests/Slider.stories.d.ts +0 -47
  117. package/dist/components/Slider/tests/Slider.stories.js +0 -279
  118. package/dist/components/Stepper/tests/Stepper.stories.d.ts +0 -31
  119. package/dist/components/Stepper/tests/Stepper.stories.js +0 -135
  120. package/dist/components/Switch/tests/Switch.stories.d.ts +0 -22
  121. package/dist/components/Switch/tests/Switch.stories.js +0 -137
  122. package/dist/components/Switch/tests/Switch.test.stories.d.ts +0 -13
  123. package/dist/components/Switch/tests/Switch.test.stories.js +0 -11
  124. package/dist/components/Table/tests/Table.stories.d.ts +0 -42
  125. package/dist/components/Table/tests/Table.stories.js +0 -348
  126. package/dist/components/Tabs/tests/Tabs.stories.d.ts +0 -62
  127. package/dist/components/Tabs/tests/Tabs.stories.js +0 -539
  128. package/dist/components/Text/tests/Text.stories.d.ts +0 -48
  129. package/dist/components/Text/tests/Text.stories.js +0 -201
  130. package/dist/components/TextArea/tests/TextArea.stories.d.ts +0 -53
  131. package/dist/components/TextArea/tests/TextArea.stories.js +0 -204
  132. package/dist/components/TextField/tests/TextField.stories.d.ts +0 -54
  133. package/dist/components/TextField/tests/TextField.stories.js +0 -252
  134. package/dist/components/Theme/tests/Theme.stories.d.ts +0 -25
  135. package/dist/components/Theme/tests/Theme.stories.js +0 -171
  136. package/dist/components/Timeline/tests/Timeline.stories.d.ts +0 -22
  137. package/dist/components/Timeline/tests/Timeline.stories.js +0 -86
  138. package/dist/components/Toast/tests/Toast.stories.d.ts +0 -41
  139. package/dist/components/Toast/tests/Toast.stories.js +0 -432
  140. package/dist/components/ToggleButton/tests/ToggleButton.stories.d.ts +0 -27
  141. package/dist/components/ToggleButton/tests/ToggleButton.stories.js +0 -97
  142. package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.d.ts +0 -27
  143. package/dist/components/ToggleButtonGroup/tests/ToggleButtonGroup.stories.js +0 -169
  144. package/dist/components/Tooltip/tests/Tooltip.stories.d.ts +0 -28
  145. package/dist/components/Tooltip/tests/Tooltip.stories.js +0 -182
  146. package/dist/components/View/tests/View.stories.d.ts +0 -141
  147. package/dist/components/View/tests/View.stories.js +0 -1329
  148. package/dist/components/_private/Portal/tests/Portal.stories.d.ts +0 -6
  149. package/dist/components/_private/Portal/tests/Portal.stories.js +0 -17
  150. package/dist/hooks/tests/useDrag.stories.d.ts +0 -31
  151. package/dist/hooks/tests/useDrag.stories.js +0 -147
  152. package/dist/hooks/tests/useElementId.stories.d.ts +0 -11
  153. package/dist/hooks/tests/useElementId.stories.js +0 -23
  154. package/dist/hooks/tests/useHandlerRef.stories.d.ts +0 -14
  155. package/dist/hooks/tests/useHandlerRef.stories.js +0 -44
  156. package/dist/hooks/tests/useHotkeys.stories.d.ts +0 -43
  157. package/dist/hooks/tests/useHotkeys.stories.js +0 -158
  158. package/dist/hooks/tests/useKeyboardArrowNavigation.stories.d.ts +0 -15
  159. package/dist/hooks/tests/useKeyboardArrowNavigation.stories.js +0 -128
  160. package/dist/hooks/tests/useKeyboardMode.stories.d.ts +0 -11
  161. package/dist/hooks/tests/useKeyboardMode.stories.js +0 -42
  162. package/dist/hooks/tests/useOnClickOutside.stories.d.ts +0 -23
  163. package/dist/hooks/tests/useOnClickOutside.stories.js +0 -111
  164. package/dist/hooks/tests/useRTL.stories.d.ts +0 -11
  165. package/dist/hooks/tests/useRTL.stories.js +0 -23
  166. package/dist/hooks/tests/useResponsiveClientValue.stories.d.ts +0 -18
  167. package/dist/hooks/tests/useResponsiveClientValue.stories.js +0 -30
  168. package/dist/hooks/tests/useScrollLock.stories.d.ts +0 -14
  169. package/dist/hooks/tests/useScrollLock.stories.js +0 -97
  170. package/dist/hooks/tests/useToggle.stories.d.ts +0 -13
  171. package/dist/hooks/tests/useToggle.stories.js +0 -59
  172. package/dist/tests/ShadowDOM.stories.d.ts +0 -6
  173. package/dist/tests/ShadowDOM.stories.js +0 -110
  174. package/dist/tests/themes.stories.d.ts +0 -16
  175. package/dist/tests/themes.stories.js +0 -327
  176. package/dist/utilities/a11y/tests/TrapFocus.stories.d.ts +0 -14
  177. package/dist/utilities/a11y/tests/TrapFocus.stories.js +0 -615
@@ -1,29 +0,0 @@
1
- import { StoryObj } from "@storybook/react-vite";
2
- import { type Mock } from "storybook/test";
3
- declare const _default: {
4
- title: string;
5
- component: import("react").FC<import("./..").CalendarProps>;
6
- parameters: {
7
- iframe: {
8
- url: string;
9
- };
10
- };
11
- };
12
- export default _default;
13
- export declare const defaultMonth: StoryObj;
14
- export declare const uncontrolled: StoryObj<{
15
- handleChange: Mock;
16
- }>;
17
- export declare const controlled: StoryObj<{
18
- handleChange: Mock;
19
- }>;
20
- export declare const selectedDates: StoryObj;
21
- export declare const minMax: StoryObj;
22
- export declare const firstWeekDay: StoryObj;
23
- export declare const translation: {
24
- name: string;
25
- render: () => import("react").JSX.Element;
26
- };
27
- export declare const ariaLabels: StoryObj;
28
- export declare const monthSelection: StoryObj;
29
- export declare const keyboardNavigation: StoryObj;
@@ -1,255 +0,0 @@
1
- import { fn, expect, userEvent, within, waitFor } from "storybook/test";
2
- import { Example } from "../../../utilities/storybook/index.js";
3
- import Calendar from "../index.js";
4
- export default {
5
- title: "Components/Calendar",
6
- component: Calendar,
7
- parameters: {
8
- iframe: {
9
- url: "https://reshaped.so/docs/components/calendar",
10
- },
11
- },
12
- };
13
- export const defaultMonth = {
14
- name: "defaultMonth",
15
- render: () => (<Example>
16
- <Example.Item title="defaultMonth: 2020 January">
17
- <Calendar defaultMonth={new Date(2020, 0)} range/>
18
- </Example.Item>
19
- </Example>),
20
- play: ({ canvas }) => {
21
- const grid = canvas.getByRole("grid");
22
- const gridCells = canvas.getAllByRole("gridcell");
23
- const dates = canvas.getAllByRole("checkbox");
24
- const [prevButton, monthButton, nextButton] = canvas.getAllByRole("button");
25
- expect(grid).toBeInTheDocument();
26
- expect(gridCells).toHaveLength(31);
27
- expect(dates).toHaveLength(31);
28
- const focusableDates = dates.filter((el) => {
29
- return el.getAttribute("tabIndex") === "0";
30
- });
31
- // Defaults keyboard focus to the first day of the month
32
- expect(focusableDates).toHaveLength(1);
33
- expect(focusableDates[0]).toBe(dates[0]);
34
- // Default Labels
35
- expect(dates[0]).toHaveAccessibleName("Wednesday, January 1");
36
- expect(prevButton).toHaveAccessibleName("Previous month");
37
- expect(monthButton).toHaveAccessibleName("January 2020 Select a month");
38
- expect(nextButton).toHaveAccessibleName("Next month");
39
- },
40
- };
41
- export const uncontrolled = {
42
- name: "defaultValue, range",
43
- args: {
44
- handleChange: fn(),
45
- },
46
- render: (args) => (<Example>
47
- <Example.Item title="defaultValue">
48
- <Calendar defaultMonth={new Date(2020, 0)} defaultValue={new Date(2020, 0, 10)} onChange={args.handleChange}/>
49
- </Example.Item>
50
- <Example.Item title="defaultValue, range">
51
- <Calendar range defaultMonth={new Date(2020, 0)} defaultValue={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
52
- </Example.Item>
53
- </Example>),
54
- play: async ({ canvas, args }) => {
55
- const [singleCalendar, rangeCalendar] = canvas.getAllByRole("grid");
56
- const singleCalendarDates = within(singleCalendar).getAllByRole("checkbox");
57
- const rangeCalendarDates = within(rangeCalendar).getAllByRole("checkbox");
58
- await userEvent.click(singleCalendarDates[7]);
59
- expect(singleCalendarDates[7]).toBeChecked();
60
- expect(args.handleChange).toHaveBeenCalledTimes(1);
61
- expect(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
62
- await userEvent.click(rangeCalendarDates[7]);
63
- expect(rangeCalendarDates[7]).toBeChecked();
64
- expect(args.handleChange).toHaveBeenCalledTimes(2);
65
- expect(args.handleChange).toHaveBeenLastCalledWith({
66
- value: { start: new Date(2020, 0, 8), end: null },
67
- });
68
- // While selecting end value, clicking on a date < start value should change the start value
69
- await userEvent.click(rangeCalendarDates[6]);
70
- expect(rangeCalendarDates[6]).toBeChecked();
71
- expect(rangeCalendarDates[7]).not.toBeChecked();
72
- expect(args.handleChange).toHaveBeenCalledTimes(3);
73
- expect(args.handleChange).toHaveBeenLastCalledWith({
74
- value: { start: new Date(2020, 0, 7), end: null },
75
- });
76
- await userEvent.click(rangeCalendarDates[10]);
77
- expect(args.handleChange).toHaveBeenCalledTimes(4);
78
- expect(args.handleChange).toHaveBeenLastCalledWith({
79
- value: { start: new Date(2020, 0, 7), end: new Date(2020, 0, 11) },
80
- });
81
- for (let i = 6; i < 10; i++) {
82
- expect(rangeCalendarDates[i]).toBeChecked();
83
- }
84
- },
85
- };
86
- export const controlled = {
87
- name: "value, range",
88
- args: {
89
- handleChange: fn(),
90
- },
91
- render: (args) => (<Example>
92
- <Example.Item title="value">
93
- <Calendar defaultMonth={new Date(2020, 0)} value={new Date(2020, 0, 10)} onChange={args.handleChange}/>
94
- </Example.Item>
95
- <Example.Item title="defaultValue, range">
96
- <Calendar range defaultMonth={new Date(2020, 0)} value={{ start: new Date(2020, 0, 10), end: new Date(2020, 0, 15) }} onChange={args.handleChange}/>
97
- </Example.Item>
98
- </Example>),
99
- play: async ({ canvas, args }) => {
100
- const [singleCalendar, rangeCalendar] = canvas.getAllByRole("grid");
101
- const singleCalendarDates = within(singleCalendar).getAllByRole("checkbox");
102
- const rangeCalendarDates = within(rangeCalendar).getAllByRole("checkbox");
103
- await userEvent.click(singleCalendarDates[7]);
104
- expect(singleCalendarDates[7]).not.toBeChecked();
105
- expect(singleCalendarDates[9]).toBeChecked();
106
- expect(args.handleChange).toHaveBeenCalledTimes(1);
107
- expect(args.handleChange).toHaveBeenLastCalledWith({ value: new Date(2020, 0, 8) });
108
- await userEvent.click(rangeCalendarDates[7]);
109
- expect(rangeCalendarDates[7]).not.toBeChecked();
110
- expect(rangeCalendarDates[9]).toBeChecked();
111
- expect(args.handleChange).toHaveBeenCalledTimes(2);
112
- expect(args.handleChange).toHaveBeenLastCalledWith({
113
- value: { start: new Date(2020, 0, 8), end: null },
114
- });
115
- // While selecting end value, clicking on a date < start value should change the start value
116
- await userEvent.click(rangeCalendarDates[6]);
117
- expect(rangeCalendarDates[6]).not.toBeChecked();
118
- expect(rangeCalendarDates[9]).toBeChecked();
119
- expect(args.handleChange).toHaveBeenCalledTimes(3);
120
- expect(args.handleChange).toHaveBeenLastCalledWith({
121
- value: { start: new Date(2020, 0, 7), end: null },
122
- });
123
- // In controlled mode, clicking on a date > startValue still changes startValue since we're not updating the state
124
- await userEvent.click(rangeCalendarDates[10]);
125
- expect(args.handleChange).toHaveBeenCalledTimes(4);
126
- expect(args.handleChange).toHaveBeenLastCalledWith({
127
- value: { start: new Date(2020, 0, 11), end: null },
128
- });
129
- expect(rangeCalendarDates[6]).not.toBeChecked();
130
- expect(rangeCalendarDates[9]).toBeChecked();
131
- },
132
- };
133
- export const selectedDates = {
134
- name: "selectedDates",
135
- render: () => (<Example>
136
- <Example.Item title="selectedDates: [4,8]">
137
- <Calendar defaultMonth={new Date(2020, 0)} value={null} selectedDates={[new Date(2020, 0, 4), new Date(2020, 0, 8)]}/>
138
- </Example.Item>
139
- </Example>),
140
- play: ({ canvas }) => {
141
- const dates = canvas.getAllByRole("checkbox");
142
- expect(dates[3]).toBeChecked();
143
- expect(dates[7]).toBeChecked();
144
- },
145
- };
146
- export const minMax = {
147
- name: "min, max",
148
- render: () => (<Example>
149
- <Example.Item title="min: 4, max: 20">
150
- <Calendar defaultMonth={new Date(2020, 0)} min={new Date(2020, 0, 4)} max={new Date(2020, 0, 20)}/>
151
- </Example.Item>
152
- </Example>),
153
- play: ({ canvas }) => {
154
- const dates = canvas.getAllByRole("checkbox");
155
- expect(dates).toHaveLength(17);
156
- },
157
- };
158
- export const firstWeekDay = {
159
- name: "firstWeekDay",
160
- render: () => (<Example>
161
- <Example.Item title="firstWeekDay: 3 (Wed)">
162
- <Calendar defaultMonth={new Date(2020, 0)} firstWeekDay={3}/>
163
- </Example.Item>
164
- </Example>),
165
- };
166
- export const translation = {
167
- name: "render functions",
168
- render: () => (<Example>
169
- <Example.Item title="translated to NL">
170
- <Calendar defaultMonth={new Date(2020, 0)} renderMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "short" })} renderSelectedMonthLabel={({ date }) => date.toLocaleDateString("nl", { month: "long", year: "numeric" })} renderWeekDay={({ date }) => date.toLocaleDateString("nl", { weekday: "short" })}/>
171
- </Example.Item>
172
- </Example>),
173
- };
174
- export const ariaLabels = {
175
- name: "aria labels",
176
- render: () => (<Example>
177
- <Example.Item title="aria labels">
178
- <Calendar defaultMonth={new Date(2020, 0)} nextYearAriaLabel="Test next year" nextMonthAriaLabel="Test next month" renderDateAriaLabel={() => "Test date"} renderMonthAriaLabel={() => "Test month"} previousYearAriaLabel="Test previous year" previousMonthAriaLabel="Test previous month" monthSelectionAriaLabel="Test month selection"/>
179
- </Example.Item>
180
- </Example>),
181
- play: async ({ canvas }) => {
182
- const buttonEls = canvas.getAllByRole("button");
183
- const dateEls = canvas.getAllByRole("checkbox");
184
- expect(buttonEls[0]).toHaveAttribute("aria-label", "Test previous month");
185
- expect(buttonEls[1]).toHaveTextContent("Test month selection");
186
- expect(buttonEls[2]).toHaveAttribute("aria-label", "Test next month");
187
- expect(dateEls[0]).toHaveAttribute("aria-label", "Test date");
188
- await userEvent.click(buttonEls[1], { delay: null });
189
- const yearButtonEls = canvas.getAllByRole("button");
190
- expect(yearButtonEls[0]).toHaveAttribute("aria-label", "Test previous year");
191
- expect(yearButtonEls[1]).toHaveAttribute("aria-label", "Test next year");
192
- expect(yearButtonEls[2]).toHaveAttribute("aria-label", "Test month");
193
- },
194
- };
195
- export const monthSelection = {
196
- name: "test: month selection",
197
- render: () => (<Example>
198
- <Example.Item title="month selection">
199
- <Calendar defaultMonth={new Date(2020, 1)}/>
200
- </Example.Item>
201
- </Example>),
202
- play: async ({ canvas }) => {
203
- let buttons = canvas.getAllByRole("button");
204
- let monthButton = buttons[1];
205
- expect(monthButton).toHaveAccessibleName("February 2020 Select a month");
206
- await userEvent.click(monthButton);
207
- let months = canvas.getAllByRole("button").filter((el) => el.hasAttribute("data-rs-date"));
208
- expect(months).toHaveLength(12);
209
- await userEvent.click(months[0]);
210
- buttons = canvas.getAllByRole("button");
211
- months = buttons.filter((el) => el.hasAttribute("data-rs-date"));
212
- monthButton = buttons[1];
213
- expect(months).toHaveLength(0);
214
- expect(monthButton).toHaveAccessibleName("January 2020 Select a month");
215
- },
216
- };
217
- export const keyboardNavigation = {
218
- name: "test: keyboard navigation",
219
- render: () => (<Example>
220
- <Example.Item title="keyboard navigation">
221
- <Calendar defaultMonth={new Date(2020, 0)}/>
222
- </Example.Item>
223
- </Example>),
224
- play: async ({ canvas }) => {
225
- const buttons = canvas.getAllByRole("button");
226
- buttons[2].focus();
227
- await userEvent.keyboard("{Tab/}");
228
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
229
- await userEvent.keyboard("{ArrowRight/}");
230
- waitFor(() => {
231
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
232
- });
233
- await userEvent.keyboard("{Shift>}{Tab/}{/Shift}");
234
- await userEvent.keyboard("{Tab/}");
235
- waitFor(() => {
236
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-02");
237
- });
238
- await userEvent.keyboard("{ArrowLeft/}");
239
- waitFor(() => {
240
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
241
- });
242
- await userEvent.keyboard("{ArrowDown/}");
243
- waitFor(() => {
244
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-08");
245
- });
246
- await userEvent.keyboard("{ArrowUp/}");
247
- waitFor(() => {
248
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2020-01-01");
249
- });
250
- await userEvent.keyboard("{ArrowUp/}");
251
- waitFor(() => {
252
- expect(document.activeElement).toHaveAttribute("data-rs-date", "2019-12-25");
253
- });
254
- },
255
- };
@@ -1,52 +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" | "translate" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "nonce" | "spellCheck" | "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
- };
25
- };
26
- export default _default;
27
- export declare const padding: {
28
- name: string;
29
- render: () => React.JSX.Element;
30
- };
31
- export declare const selected: {
32
- name: string;
33
- render: () => React.JSX.Element;
34
- };
35
- export declare const elevated: {
36
- name: string;
37
- render: () => React.JSX.Element;
38
- };
39
- export declare const bleed: {
40
- name: string;
41
- render: () => React.JSX.Element;
42
- };
43
- export declare const height: {
44
- name: string;
45
- render: () => React.JSX.Element;
46
- };
47
- export declare const onClick: StoryObj<{
48
- handleClick: ReturnType<typeof fn>;
49
- }>;
50
- export declare const href: StoryObj;
51
- export declare const as: StoryObj;
52
- export declare const className: StoryObj;
@@ -1,125 +0,0 @@
1
- import React from "react";
2
- import { Example, Placeholder } from "../../../utilities/storybook/index.js";
3
- import Card from "../index.js";
4
- import { expect, fn, userEvent } from "storybook/test";
5
- export default {
6
- title: "Components/Card",
7
- component: Card,
8
- parameters: {
9
- iframe: {
10
- url: "https://reshaped.so/docs/components/card",
11
- },
12
- },
13
- };
14
- export const padding = {
15
- name: "padding",
16
- render: () => (<Example>
17
- <Example.Item title="padding: default">
18
- <Card>
19
- <Placeholder />
20
- </Card>
21
- </Example.Item>
22
-
23
- <Example.Item title="padding: 2">
24
- <Card padding={2}>
25
- <Placeholder />
26
- </Card>
27
- </Example.Item>
28
-
29
- <Example.Item title="padding: 0">
30
- <Card padding={0}>
31
- <Placeholder />
32
- </Card>
33
- </Example.Item>
34
-
35
- <Example.Item title={["responsive padding", "[s] 4", "[m+] 8"]}>
36
- <Card padding={{ s: 4, m: 8 }}>
37
- <Placeholder />
38
- </Card>
39
- </Example.Item>
40
- </Example>),
41
- };
42
- export const selected = {
43
- name: "selected",
44
- render: () => (<Example>
45
- <Example.Item title="selected">
46
- <Card selected>
47
- <Placeholder />
48
- </Card>
49
- </Example.Item>
50
- </Example>),
51
- };
52
- export const elevated = {
53
- name: "elevated",
54
- render: () => (<Example>
55
- <Example.Item title="elevated">
56
- <Card elevated>
57
- <Placeholder />
58
- </Card>
59
- </Example.Item>
60
- </Example>),
61
- };
62
- export const bleed = {
63
- name: "bleed",
64
- render: () => (<Example>
65
- <Example.Item title="bleed: 4">
66
- <Card bleed={4}>
67
- <Placeholder />
68
- </Card>
69
- </Example.Item>
70
- <Example.Item title={["responsive bleed", "[s] 4", "[m+] 0"]}>
71
- <Card bleed={{ s: 4, m: 0 }}>
72
- <Placeholder />
73
- </Card>
74
- </Example.Item>
75
- </Example>),
76
- };
77
- export const height = {
78
- name: "height",
79
- render: () => (<Example>
80
- <Example.Item title="height: 200px">
81
- <Card height="200px"/>
82
- </Example.Item>
83
- </Example>),
84
- };
85
- export const onClick = {
86
- name: "onClick",
87
- args: {
88
- handleClick: fn(),
89
- },
90
- render: (args) => <Card onClick={args.handleClick}>Trigger</Card>,
91
- play: async ({ canvas, args }) => {
92
- const { handleClick } = args;
93
- const el = canvas.getAllByRole("button")[0];
94
- await userEvent.click(el);
95
- expect(handleClick).toHaveBeenCalledTimes(1);
96
- expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
97
- },
98
- };
99
- export const href = {
100
- name: "href",
101
- render: () => <Card href="https://reshaped.so">Trigger</Card>,
102
- play: async ({ canvas }) => {
103
- const el = canvas.getByRole("link");
104
- expect(el).toHaveAttribute("href", "https://reshaped.so");
105
- },
106
- };
107
- export const as = {
108
- name: "as",
109
- render: () => <Card as="span" attributes={{ "data-testid": "root" }}/>,
110
- play: ({ canvas }) => {
111
- const root = canvas.getByTestId("root");
112
- expect(root.tagName).toBe("SPAN");
113
- },
114
- };
115
- export const className = {
116
- name: "className, attributes",
117
- render: () => (<div data-testid="root">
118
- <Card className="test-classname" attributes={{ id: "test-id" }}/>
119
- </div>),
120
- play: async ({ canvas }) => {
121
- const root = canvas.getByTestId("root").firstChild;
122
- expect(root).toHaveClass("test-classname");
123
- expect(root).toHaveAttribute("id", "test-id");
124
- },
125
- };
@@ -1,34 +0,0 @@
1
- import React from "react";
2
- import { StoryObj } from "@storybook/react-vite";
3
- import { fn } from "storybook/test";
4
- declare const _default: {
5
- title: string;
6
- component: React.FC<import("./..").CarouselProps>;
7
- parameters: {
8
- a11y: {
9
- disable: boolean;
10
- };
11
- iframe: {
12
- url: string;
13
- };
14
- };
15
- };
16
- export default _default;
17
- export declare const base: StoryObj;
18
- export declare const visibleItems: {
19
- name: string;
20
- render: () => React.JSX.Element;
21
- };
22
- export declare const gap: {
23
- name: string;
24
- render: () => React.JSX.Element;
25
- };
26
- export declare const bleed: {
27
- name: string;
28
- render: () => React.JSX.Element;
29
- };
30
- export declare const navigationDisplay: StoryObj;
31
- export declare const instanceRef: StoryObj<{
32
- handleChange: ReturnType<typeof fn>;
33
- }>;
34
- export declare const className: StoryObj;