@khanacademy/wonder-blocks-clickable 2.4.5 → 2.4.6
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.
- package/CHANGELOG.md +24 -0
- package/dist/components/clickable-behavior.d.ts +248 -0
- package/dist/components/clickable-behavior.js.flow +296 -0
- package/dist/components/clickable.d.ts +150 -0
- package/dist/components/clickable.js.flow +176 -0
- package/dist/es/index.js +147 -147
- package/dist/index.d.ts +7 -0
- package/dist/index.js +169 -171
- package/dist/index.js.flow +18 -2
- package/dist/util/get-clickable-behavior.d.ts +25 -0
- package/dist/util/get-clickable-behavior.js.flow +19 -0
- package/dist/util/is-client-side-url.d.ts +7 -0
- package/dist/util/is-client-side-url.js.flow +14 -0
- package/package.json +5 -5
- package/src/components/__tests__/{clickable-behavior.test.js → clickable-behavior.test.tsx} +138 -82
- package/src/components/__tests__/{clickable.test.js → clickable.test.tsx} +27 -26
- package/src/components/{clickable-behavior.js → clickable-behavior.ts} +63 -78
- package/src/components/{clickable.js → clickable.tsx} +107 -124
- package/src/{index.js → index.ts} +0 -1
- package/src/util/__tests__/{get-clickable-behavior.test.js → get-clickable-behavior.test.tsx} +0 -1
- package/src/util/__tests__/{is-client-side-url.js.test.js → is-client-side-url.js.test.ts} +2 -3
- package/src/util/{get-clickable-behavior.js → get-clickable-behavior.ts} +9 -3
- package/src/util/{is-client-side-url.js → is-client-side-url.ts} +0 -1
- package/tsconfig.json +12 -0
- package/tsconfig.tsbuildinfo +1 -0
- package/src/components/__docs__/accessibility.stories.mdx +0 -152
- package/src/components/__docs__/clickable-behavior.argtypes.js +0 -64
- package/src/components/__docs__/clickable-behavior.stories.js +0 -178
- package/src/components/__docs__/clickable.argtypes.js +0 -237
- package/src/components/__docs__/clickable.stories.js +0 -307
|
@@ -1,307 +0,0 @@
|
|
|
1
|
-
// @flow
|
|
2
|
-
import * as React from "react";
|
|
3
|
-
|
|
4
|
-
import {StyleSheet} from "aphrodite";
|
|
5
|
-
import {MemoryRouter, Route, Switch} from "react-router-dom";
|
|
6
|
-
|
|
7
|
-
import Clickable from "@khanacademy/wonder-blocks-clickable";
|
|
8
|
-
import {View} from "@khanacademy/wonder-blocks-core";
|
|
9
|
-
import Color from "@khanacademy/wonder-blocks-color";
|
|
10
|
-
import Spacing from "@khanacademy/wonder-blocks-spacing";
|
|
11
|
-
import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
|
|
12
|
-
|
|
13
|
-
import type {StoryComponentType} from "@storybook/react";
|
|
14
|
-
import ComponentInfo from "../../../../../.storybook/components/component-info";
|
|
15
|
-
import {name, version} from "../../../package.json";
|
|
16
|
-
import argTypes from "./clickable.argtypes";
|
|
17
|
-
|
|
18
|
-
export default {
|
|
19
|
-
title: "Clickable / Clickable",
|
|
20
|
-
component: Clickable,
|
|
21
|
-
argTypes: argTypes,
|
|
22
|
-
args: {
|
|
23
|
-
testId: "",
|
|
24
|
-
disabled: false,
|
|
25
|
-
light: false,
|
|
26
|
-
hideDefaultFocusRing: false,
|
|
27
|
-
},
|
|
28
|
-
decorators: [
|
|
29
|
-
(Story: StoryComponentType): React.Element<typeof View> => (
|
|
30
|
-
<View style={styles.centerText}>
|
|
31
|
-
<Story />
|
|
32
|
-
</View>
|
|
33
|
-
),
|
|
34
|
-
],
|
|
35
|
-
parameters: {
|
|
36
|
-
componentSubtitle: ((
|
|
37
|
-
<ComponentInfo name={name} version={version} />
|
|
38
|
-
): any),
|
|
39
|
-
docs: {
|
|
40
|
-
description: {
|
|
41
|
-
component: null,
|
|
42
|
-
},
|
|
43
|
-
source: {
|
|
44
|
-
// See https://github.com/storybookjs/storybook/issues/12596
|
|
45
|
-
excludeDecorators: true,
|
|
46
|
-
},
|
|
47
|
-
},
|
|
48
|
-
},
|
|
49
|
-
};
|
|
50
|
-
|
|
51
|
-
export const Default: StoryComponentType = (args) => (
|
|
52
|
-
<Clickable {...args}>
|
|
53
|
-
{({hovered, focused, pressed}) => {
|
|
54
|
-
return (
|
|
55
|
-
<View
|
|
56
|
-
style={[
|
|
57
|
-
styles.clickable,
|
|
58
|
-
hovered && styles.hovered,
|
|
59
|
-
pressed && styles.pressed,
|
|
60
|
-
]}
|
|
61
|
-
>
|
|
62
|
-
<Body>This text is clickable!</Body>
|
|
63
|
-
</View>
|
|
64
|
-
);
|
|
65
|
-
}}
|
|
66
|
-
</Clickable>
|
|
67
|
-
);
|
|
68
|
-
|
|
69
|
-
Default.args = {
|
|
70
|
-
onClick: () => {
|
|
71
|
-
// eslint-disable-next-line no-alert
|
|
72
|
-
alert("Click!");
|
|
73
|
-
},
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
export const Basic: StoryComponentType = () => (
|
|
77
|
-
<View style={styles.centerText}>
|
|
78
|
-
<Clickable
|
|
79
|
-
href="https://www.khanacademy.org/about/tos"
|
|
80
|
-
skipClientNav={true}
|
|
81
|
-
>
|
|
82
|
-
{({hovered, focused, pressed}) => (
|
|
83
|
-
<View
|
|
84
|
-
style={[
|
|
85
|
-
hovered && styles.hovered,
|
|
86
|
-
pressed && styles.pressed,
|
|
87
|
-
]}
|
|
88
|
-
>
|
|
89
|
-
<Body>This text is clickable!</Body>
|
|
90
|
-
</View>
|
|
91
|
-
)}
|
|
92
|
-
</Clickable>
|
|
93
|
-
</View>
|
|
94
|
-
);
|
|
95
|
-
|
|
96
|
-
Basic.parameters = {
|
|
97
|
-
docs: {
|
|
98
|
-
description: {
|
|
99
|
-
story: "You can make custom components Clickable by returning them in a function of the Clickable child. The eventState parameter the function takes allows access to states pressed, hovered and clicked, which you may use to create custom styles.\n\nClickable has a default focus ring style built-in. If you are creating your own custom focus ring it should be disabled using by setting `hideDefaultFocusRing={true}` in the props passed to `Clickable`.",
|
|
100
|
-
},
|
|
101
|
-
},
|
|
102
|
-
chromatic: {
|
|
103
|
-
// we don't need screenshots because this story is already covered in
|
|
104
|
-
// `Default`. We add this story to the `Docs` tab to present the
|
|
105
|
-
// description above along with the example.
|
|
106
|
-
disableSnapshot: true,
|
|
107
|
-
},
|
|
108
|
-
};
|
|
109
|
-
|
|
110
|
-
/**
|
|
111
|
-
* Clickable usage on dark backgrounds
|
|
112
|
-
*/
|
|
113
|
-
export const Light: StoryComponentType = () => (
|
|
114
|
-
<View style={styles.dark}>
|
|
115
|
-
<Clickable
|
|
116
|
-
href="https://www.khanacademy.org/about/tos"
|
|
117
|
-
skipClientNav={true}
|
|
118
|
-
light={true}
|
|
119
|
-
>
|
|
120
|
-
{({hovered, focused, pressed}) => (
|
|
121
|
-
<View
|
|
122
|
-
style={[
|
|
123
|
-
styles.clickable,
|
|
124
|
-
hovered && styles.hovered,
|
|
125
|
-
pressed && styles.pressed,
|
|
126
|
-
]}
|
|
127
|
-
>
|
|
128
|
-
<Body>This text is clickable!</Body>
|
|
129
|
-
</View>
|
|
130
|
-
)}
|
|
131
|
-
</Clickable>
|
|
132
|
-
</View>
|
|
133
|
-
);
|
|
134
|
-
|
|
135
|
-
Light.parameters = {
|
|
136
|
-
chromatic: {
|
|
137
|
-
// Not needed because the default state doesn't test the disabled
|
|
138
|
-
// clickable behavior.
|
|
139
|
-
disableSnapshot: true,
|
|
140
|
-
},
|
|
141
|
-
docs: {
|
|
142
|
-
description: {
|
|
143
|
-
story: "Clickable has a `light` prop which changes the default focus ring color to fit a dark background.",
|
|
144
|
-
},
|
|
145
|
-
},
|
|
146
|
-
backgrounds: {
|
|
147
|
-
default: "darkBlue",
|
|
148
|
-
},
|
|
149
|
-
};
|
|
150
|
-
|
|
151
|
-
/**
|
|
152
|
-
* Disabled state
|
|
153
|
-
*/
|
|
154
|
-
export const Disabled: StoryComponentType = (args) => (
|
|
155
|
-
<>
|
|
156
|
-
<Clickable onClick={() => {}} {...args}>
|
|
157
|
-
{({hovered, focused, pressed}) => (
|
|
158
|
-
<View
|
|
159
|
-
style={[
|
|
160
|
-
styles.clickable,
|
|
161
|
-
hovered && styles.hovered,
|
|
162
|
-
pressed && styles.pressed,
|
|
163
|
-
]}
|
|
164
|
-
>
|
|
165
|
-
<Body>
|
|
166
|
-
Disabled clickable using the default disabled style
|
|
167
|
-
</Body>
|
|
168
|
-
</View>
|
|
169
|
-
)}
|
|
170
|
-
</Clickable>
|
|
171
|
-
<Clickable onClick={() => {}} {...args}>
|
|
172
|
-
{({hovered, focused, pressed}) => (
|
|
173
|
-
<View
|
|
174
|
-
style={[
|
|
175
|
-
styles.clickable,
|
|
176
|
-
hovered && styles.hovered,
|
|
177
|
-
pressed && styles.pressed,
|
|
178
|
-
args.disabled && styles.disabled,
|
|
179
|
-
]}
|
|
180
|
-
>
|
|
181
|
-
<Body>
|
|
182
|
-
Disabled clickable passing custom disabled styles
|
|
183
|
-
</Body>
|
|
184
|
-
</View>
|
|
185
|
-
)}
|
|
186
|
-
</Clickable>
|
|
187
|
-
</>
|
|
188
|
-
);
|
|
189
|
-
|
|
190
|
-
Disabled.args = {
|
|
191
|
-
disabled: true,
|
|
192
|
-
};
|
|
193
|
-
|
|
194
|
-
Disabled.parameters = {
|
|
195
|
-
docs: {
|
|
196
|
-
description: {
|
|
197
|
-
story: "Clickable has a `disabled` prop which prevents the element from being operable. Note that the default disabled style is applied to the element, but you can also pass custom styles to the children element by passing any `disabled` styles (see the second clickable element in the example below).",
|
|
198
|
-
},
|
|
199
|
-
},
|
|
200
|
-
};
|
|
201
|
-
|
|
202
|
-
export const ClientSideNavigation: StoryComponentType = () => (
|
|
203
|
-
<MemoryRouter>
|
|
204
|
-
<View>
|
|
205
|
-
<View style={styles.row}>
|
|
206
|
-
<Clickable
|
|
207
|
-
href="/foo"
|
|
208
|
-
style={styles.heading}
|
|
209
|
-
onClick={() => {
|
|
210
|
-
// eslint-disable-next-line no-console
|
|
211
|
-
console.log("I'm still on the same page!");
|
|
212
|
-
}}
|
|
213
|
-
>
|
|
214
|
-
{(eventState) => (
|
|
215
|
-
<LabelLarge>Uses Client-side Nav</LabelLarge>
|
|
216
|
-
)}
|
|
217
|
-
</Clickable>
|
|
218
|
-
<Clickable
|
|
219
|
-
href="/iframe.html?id=clickable-clickable--default&viewMode=story"
|
|
220
|
-
style={styles.heading}
|
|
221
|
-
skipClientNav
|
|
222
|
-
>
|
|
223
|
-
{(eventState) => (
|
|
224
|
-
<LabelLarge>Avoids Client-side Nav</LabelLarge>
|
|
225
|
-
)}
|
|
226
|
-
</Clickable>
|
|
227
|
-
</View>
|
|
228
|
-
<View style={styles.navigation}>
|
|
229
|
-
<Switch>
|
|
230
|
-
<Route path="/foo">
|
|
231
|
-
<View id="foo">
|
|
232
|
-
The first clickable element does client-side
|
|
233
|
-
navigation here.
|
|
234
|
-
</View>
|
|
235
|
-
</Route>
|
|
236
|
-
<Route path="*">See navigation changes here</Route>
|
|
237
|
-
</Switch>
|
|
238
|
-
</View>
|
|
239
|
-
</View>
|
|
240
|
-
</MemoryRouter>
|
|
241
|
-
);
|
|
242
|
-
|
|
243
|
-
ClientSideNavigation.storyName = "Client-side Navigation";
|
|
244
|
-
|
|
245
|
-
ClientSideNavigation.parameters = {
|
|
246
|
-
docs: {
|
|
247
|
-
description: {
|
|
248
|
-
story: "If your Clickable component is within a React-Router enviroment, your component will automatically default to client-side routing with the `href` prop is set. This behavior can be toggeled by passing the `skipClientNav` prop. In this example we see two Clickable h1 tags, one which employs client-side routing, and the other uses skipClientNav to avoid this default behavior.",
|
|
249
|
-
},
|
|
250
|
-
},
|
|
251
|
-
};
|
|
252
|
-
|
|
253
|
-
ClientSideNavigation.parameters = {
|
|
254
|
-
chromatic: {
|
|
255
|
-
// we don't need screenshots because this story only tests behavior.
|
|
256
|
-
disableSnapshot: true,
|
|
257
|
-
},
|
|
258
|
-
docs: {
|
|
259
|
-
description: {
|
|
260
|
-
story:
|
|
261
|
-
"Clickable adds support to keyboard navigation. This way, your components are accessible and emulate better the browser's behavior.\n\n" +
|
|
262
|
-
"**NOTE:** If you want to navigate to an external URL and/or reload the window, make sure to use `href` and `skipClientNav={true}`",
|
|
263
|
-
},
|
|
264
|
-
},
|
|
265
|
-
};
|
|
266
|
-
|
|
267
|
-
const styles = StyleSheet.create({
|
|
268
|
-
clickable: {
|
|
269
|
-
borderWidth: 1,
|
|
270
|
-
padding: Spacing.medium_16,
|
|
271
|
-
},
|
|
272
|
-
hovered: {
|
|
273
|
-
textDecoration: "underline",
|
|
274
|
-
backgroundColor: Color.teal,
|
|
275
|
-
},
|
|
276
|
-
pressed: {
|
|
277
|
-
color: Color.blue,
|
|
278
|
-
},
|
|
279
|
-
focused: {
|
|
280
|
-
outline: `solid 4px ${Color.lightBlue}`,
|
|
281
|
-
},
|
|
282
|
-
centerText: {
|
|
283
|
-
gap: Spacing.medium_16,
|
|
284
|
-
textAlign: "center",
|
|
285
|
-
},
|
|
286
|
-
dark: {
|
|
287
|
-
backgroundColor: Color.darkBlue,
|
|
288
|
-
color: Color.white,
|
|
289
|
-
padding: Spacing.xSmall_8,
|
|
290
|
-
},
|
|
291
|
-
row: {
|
|
292
|
-
flexDirection: "row",
|
|
293
|
-
alignItems: "center",
|
|
294
|
-
},
|
|
295
|
-
heading: {
|
|
296
|
-
marginRight: Spacing.large_24,
|
|
297
|
-
},
|
|
298
|
-
navigation: {
|
|
299
|
-
border: `1px dashed ${Color.lightBlue}`,
|
|
300
|
-
marginTop: Spacing.large_24,
|
|
301
|
-
padding: Spacing.large_24,
|
|
302
|
-
},
|
|
303
|
-
disabled: {
|
|
304
|
-
color: Color.white,
|
|
305
|
-
backgroundColor: Color.offBlack64,
|
|
306
|
-
},
|
|
307
|
-
});
|