@khanacademy/wonder-blocks-button 6.3.9 → 6.3.11

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 (16) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/package.json +8 -8
  3. package/src/__tests__/__snapshots__/custom-snapshot.test.tsx.snap +0 -3325
  4. package/src/__tests__/custom-snapshot.test.tsx +0 -110
  5. package/src/components/__tests__/button-with-icon.test.tsx +0 -277
  6. package/src/components/__tests__/button.test.tsx +0 -850
  7. package/src/components/__tests__/button.typestest.tsx +0 -48
  8. package/src/components/button-core.tsx +0 -519
  9. package/src/components/button-icon.tsx +0 -47
  10. package/src/components/button.tsx +0 -309
  11. package/src/index.ts +0 -5
  12. package/src/themes/default.ts +0 -163
  13. package/src/themes/khanmigo.ts +0 -58
  14. package/src/themes/themed-button.tsx +0 -43
  15. package/tsconfig-build.json +0 -17
  16. package/tsconfig-build.tsbuildinfo +0 -1
package/src/__tests__/custom-snapshot.test.tsx DELETED
@@ -1,110 +0,0 @@
1
- import * as React from "react";
2
- import {render} from "@testing-library/react";
3
- import ButtonCore from "../components/button-core";
4
- import Button from "../components/button";
5
-
6
- const defaultHandlers = {
7
- onClick: () => void 0,
8
- onMouseEnter: () => void 0,
9
- onMouseLeave: () => void 0,
10
- onMouseDown: () => void 0,
11
- onMouseUp: () => void 0,
12
- onTouchStart: () => void 0,
13
- onTouchEnd: () => void 0,
14
- onTouchCancel: () => void 0,
15
- onKeyDown: () => void 0,
16
- onKeyUp: () => void 0,
17
- onFocus: () => void 0,
18
- onBlur: () => void 0,
19
- } as const;
20
-
21
- describe("Button", () => {
22
- test.each`
23
- tabIndex
24
- ${-1}
25
- ${0}
26
- ${1}
27
- `("<Link tabIndex={$tabIndex}>", ({tabIndex}: any) => {
28
- const {container} = render(
29
- <Button tabIndex={tabIndex}>Click me</Button>,
30
- );
31
- expect(container).toMatchSnapshot();
32
- });
33
- });
34
-
35
- describe("ButtonCore", () => {
36
- for (const kind of ["primary", "secondary", "tertiary"] as const) {
37
- for (const color of ["default", "destructive"] as const) {
38
- for (const size of ["medium", "small", "large"] as const) {
39
- for (const light of [true, false]) {
40
- for (const state of [
41
- "disabled",
42
- "focused",
43
- "hovered",
44
- "pressed",
45
- ]) {
46
- const disabled = state === "disabled";
47
- const stateProps = {
48
- disabled,
49
- focused: state === "focused",
50
- hovered: state === "hovered",
51
- pressed: state === "pressed",
52
- waiting: false,
53
- } as const;
54
- test(`kind:${kind} color:${color} size:${size} light:${String(
55
- light,
56
- )} ${state}`, () => {
57
- const {container} = render(
58
- <ButtonCore
59
- kind={kind}
60
- size={size}
61
- color={color}
62
- light={light}
63
- tabIndex={disabled ? -1 : 0}
64
- spinner={false}
65
- aria-label={""}
66
- {...stateProps}
67
- {...defaultHandlers}
68
- >
69
- Click me
70
- </ButtonCore>,
71
- );
72
- expect(container).toMatchSnapshot();
73
- });
74
- }
75
- }
76
- }
77
- }
78
- }
79
- for (const kind of ["primary", "secondary", "tertiary"] as const) {
80
- for (const size of ["medium", "small"] as const) {
81
- test(`kind:${kind} size:${size} spinner:true`, () => {
82
- const spinner = true;
83
- const disabled = spinner;
84
- const stateProps = {
85
- disabled,
86
- focused: false,
87
- hovered: false,
88
- pressed: false,
89
- waiting: false,
90
- } as const;
91
- const {container} = render(
92
- <ButtonCore
93
- kind={kind}
94
- size={size}
95
- color="default"
96
- light={false}
97
- tabIndex={disabled ? -1 : 0}
98
- spinner={spinner}
99
- aria-label={"loading"}
100
- {...stateProps}
101
- {...defaultHandlers}
102
- >
103
- Click me
104
- </ButtonCore>,
105
- );
106
- expect(container).toMatchSnapshot();
107
- });
108
- }
109
- }
110
- });
package/src/components/__tests__/button-with-icon.test.tsx DELETED
@@ -1,277 +0,0 @@
1
- /**
2
- * Tests for Wonder Blocks Button with icons.
3
- * The rest of the button tests can be found in button.test.tsx.
4
- */
5
-
6
- import * as React from "react";
7
- import {render, screen} from "@testing-library/react";
8
- import {userEvent} from "@testing-library/user-event";
9
- import plus from "@phosphor-icons/core/regular/plus.svg";
10
-
11
- import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
12
- import {color} from "@khanacademy/wonder-blocks-tokens";
13
-
14
- import Button from "../button";
15
-
16
- describe("button with icon", () => {
17
- test("start icon should be hidden from Screen Readers", async () => {
18
- // Arrange
19
- render(
20
- <Button testId={"button-focus-test"} startIcon={plus}>
21
- Label
22
- </Button>,
23
- );
24
-
25
- // Act
26
- const icon = await screen.findByTestId("button-focus-test-start-icon");
27
-
28
- // Assert
29
- expect(icon).toHaveAttribute("aria-hidden", "true");
30
- });
31
-
32
- test("end icon should be hidden from Screen Readers", async () => {
33
- // Arrange
34
- render(
35
- <Button testId={"button-focus-test"} endIcon={plus}>
36
- Label
37
- </Button>,
38
- );
39
-
40
- // Act
41
- const icon = await screen.findByTestId("button-focus-test-end-icon");
42
-
43
- // Assert
44
- expect(icon).toHaveAttribute("aria-hidden", "true");
45
- });
46
-
47
- /**
48
- * Primary button
49
- */
50
-
51
- test("icon is displayed when button contains startIcon", async () => {
52
- // Arrange
53
- render(
54
- <Button testId={"button-focus-test"} startIcon={plus}>
55
- Label
56
- </Button>,
57
- );
58
-
59
- // Act
60
- const icon = await screen.findByTestId("button-focus-test-start-icon");
61
-
62
- // Assert
63
- expect(icon).toBeInTheDocument();
64
- expect(icon).toHaveAttribute("aria-hidden", "true");
65
- });
66
-
67
- test("icon is displayed when button contains endIcon", async () => {
68
- // Arrange
69
- render(
70
- <Button testId={"button-focus-test"} endIcon={plus}>
71
- Label
72
- </Button>,
73
- );
74
-
75
- // Act
76
- const icon = await screen.findByTestId("button-focus-test-end-icon");
77
-
78
- // Assert
79
- expect(icon).toBeInTheDocument();
80
- expect(icon).toHaveAttribute("aria-hidden", "true");
81
- });
82
-
83
- test("both icons are displayed when button contains startIcon and endIcon", async () => {
84
- // Arrange
85
- render(
86
- <Button
87
- testId={"button-focus-test"}
88
- startIcon={plus}
89
- endIcon={plus}
90
- >
91
- Label
92
- </Button>,
93
- );
94
-
95
- // Act
96
- const startIcon = await screen.findByTestId(
97
- "button-focus-test-start-icon",
98
- );
99
- const endIcon = await screen.findByTestId("button-focus-test-end-icon");
100
-
101
- // Assert
102
- expect(startIcon).toBeInTheDocument();
103
- expect(endIcon).toBeInTheDocument();
104
- });
105
-
106
- /**
107
- * Secondary button
108
- */
109
-
110
- test("icon is displayed when secondary button contains startIcon", async () => {
111
- // Arrange
112
- render(
113
- <Button
114
- kind="secondary"
115
- testId={"button-icon-test"}
116
- startIcon={plus}
117
- >
118
- Label
119
- </Button>,
120
- );
121
-
122
- // Act
123
- const icon = await screen.findByTestId("button-icon-test-start-icon");
124
-
125
- // Assert
126
- expect(icon).toBeInTheDocument();
127
- expect(icon).toHaveAttribute("aria-hidden", "true");
128
- });
129
-
130
- test("icon is displayed when secondary button contains endIcon", async () => {
131
- // Arrange
132
- render(
133
- <Button kind="secondary" testId={"button-icon-test"} endIcon={plus}>
134
- Label
135
- </Button>,
136
- );
137
-
138
- // Act
139
- const icon = await screen.findByTestId("button-icon-test-end-icon");
140
-
141
- // Assert
142
- expect(icon).toBeInTheDocument();
143
- expect(icon).toHaveAttribute("aria-hidden", "true");
144
- });
145
-
146
- test("default theme secondary button icon has no hover style", async () => {
147
- // Arrange
148
- render(
149
- <Button kind="secondary" testId={"button-icon-test"} endIcon={plus}>
150
- Label
151
- </Button>,
152
- );
153
-
154
- // Act
155
- const button = await screen.findByTestId("button-icon-test");
156
- const iconWrapper = await screen.findByTestId(
157
- "button-icon-test-end-icon-wrapper",
158
- );
159
- await userEvent.hover(button);
160
-
161
- // Assert
162
- expect(iconWrapper).toHaveStyle(`backgroundColor: transparent`);
163
- });
164
-
165
- test("Khanmigo secondary button icon has hover style", async () => {
166
- // Arrange
167
- render(
168
- <ThemeSwitcherContext.Provider value="khanmigo">
169
- <Button
170
- kind="secondary"
171
- testId={"button-icon-test"}
172
- endIcon={plus}
173
- >
174
- Label
175
- </Button>
176
- </ThemeSwitcherContext.Provider>,
177
- );
178
-
179
- // Act
180
- const button = await screen.findByTestId("button-icon-test");
181
- const iconWrapper = await screen.findByTestId(
182
- "button-icon-test-end-icon-wrapper",
183
- );
184
- await userEvent.hover(button);
185
-
186
- // Assert
187
- expect(iconWrapper).toHaveStyle(
188
- `backgroundColor: ${color.fadedBlue16}`,
189
- );
190
- });
191
-
192
- /**
193
- * Tertiary button
194
- */
195
-
196
- test("icon is displayed when tertiary button contains startIcon", async () => {
197
- // Arrange
198
- render(
199
- <Button
200
- kind="tertiary"
201
- testId={"button-focus-test"}
202
- startIcon={plus}
203
- >
204
- Label
205
- </Button>,
206
- );
207
-
208
- // Act
209
- const icon = await screen.findByTestId("button-focus-test-start-icon");
210
-
211
- // Assert
212
- expect(icon).toBeInTheDocument();
213
- expect(icon).toHaveAttribute("aria-hidden", "true");
214
- });
215
-
216
- test("icon is displayed when tertiary button contains endIcon", async () => {
217
- // Arrange
218
- render(
219
- <Button kind="tertiary" testId={"button-focus-test"} endIcon={plus}>
220
- Label
221
- </Button>,
222
- );
223
-
224
- // Act
225
- const icon = await screen.findByTestId("button-focus-test-end-icon");
226
-
227
- // Assert
228
- expect(icon).toBeInTheDocument();
229
- expect(icon).toHaveAttribute("aria-hidden", "true");
230
- });
231
-
232
- test("default theme tertiary button icon has no hover style", async () => {
233
- // Arrange
234
- render(
235
- <Button kind="tertiary" testId={"button-icon-test"} endIcon={plus}>
236
- Label
237
- </Button>,
238
- );
239
-
240
- // Act
241
- const button = await screen.findByTestId("button-icon-test");
242
- const iconWrapper = await screen.findByTestId(
243
- "button-icon-test-end-icon-wrapper",
244
- );
245
- await userEvent.hover(button);
246
-
247
- // Assert
248
- expect(iconWrapper).toHaveStyle(`backgroundColor: transparent`);
249
- });
250
-
251
- test("Khanmigo tertiary button icon has hover style", async () => {
252
- // Arrange
253
- render(
254
- <ThemeSwitcherContext.Provider value="khanmigo">
255
- <Button
256
- kind="tertiary"
257
- testId={"button-icon-test"}
258
- endIcon={plus}
259
- >
260
- Label
261
- </Button>
262
- </ThemeSwitcherContext.Provider>,
263
- );
264
-
265
- // Act
266
- const button = await screen.findByTestId("button-icon-test");
267
- const iconWrapper = await screen.findByTestId(
268
- "button-icon-test-end-icon-wrapper",
269
- );
270
- await userEvent.hover(button);
271
-
272
- // Assert
273
- expect(iconWrapper).toHaveStyle(
274
- `backgroundColor: ${color.fadedBlue16}`,
275
- );
276
- });
277
- });