@khanacademy/wonder-blocks-link 4.3.1 → 5.0.0
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 +32 -0
- package/dist/components/link-core.d.ts +5 -848
- package/dist/components/link.d.ts +23 -148
- package/dist/es/index.js +17 -13
- package/dist/index.js +17 -13
- package/package.json +6 -6
- package/src/components/__tests__/link.test.tsx +13 -7
- package/src/components/__tests__/link.typestest.tsx +9 -4
- package/src/components/link-core.tsx +28 -26
- package/src/components/link.tsx +35 -26
- package/tsconfig-build.tsbuildinfo +1 -1
- package/dist/components/link-core.js.flow +0 -2808
- package/dist/components/link.js.flow +0 -341
- package/dist/index.js.flow +0 -8
|
@@ -1,341 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Flowtype definitions for data
|
|
3
|
-
* Generated by Flowgen from a Typescript Definition
|
|
4
|
-
* Flowgen v1.21.0
|
|
5
|
-
* @flow
|
|
6
|
-
*/
|
|
7
|
-
import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types from "../../../wonder-blocks-core/src/util/aria-types";
|
|
8
|
-
import * as React from "react";
|
|
9
|
-
import { Link as ReactRouterLink } from "react-router-dom";
|
|
10
|
-
import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
|
|
11
|
-
import type { Typography } from "@khanacademy/wonder-blocks-typography";
|
|
12
|
-
import type { IconAsset } from "@khanacademy/wonder-blocks-icon";
|
|
13
|
-
export type SharedProps = {|
|
|
14
|
-
...AriaProps,
|
|
15
|
-
...{|
|
|
16
|
-
/**
|
|
17
|
-
* Text to appear on the link. It can be a plain text or a Typography element.
|
|
18
|
-
*/
|
|
19
|
-
children: string | React.Element<Typography>,
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* URL to navigate to.
|
|
23
|
-
*/
|
|
24
|
-
href: string,
|
|
25
|
-
|
|
26
|
-
/**
|
|
27
|
-
* An optional id attribute.
|
|
28
|
-
*/
|
|
29
|
-
id?: string,
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Indicates that this link is used within a body of text.
|
|
33
|
-
* This styles the link with an underline to distinguish it
|
|
34
|
-
* from surrounding text.
|
|
35
|
-
*/
|
|
36
|
-
inline?: boolean,
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* Kind of Link. Note: Secondary light Links are not supported.
|
|
40
|
-
*/
|
|
41
|
-
kind?: "primary" | "secondary",
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Whether the button is on a dark/colored background.
|
|
45
|
-
*/
|
|
46
|
-
light?: boolean,
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* Whether the link should change color once it's visited.
|
|
50
|
-
* secondary or primary (light) links are not allowed to be visitable.
|
|
51
|
-
*/
|
|
52
|
-
visitable?: boolean,
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* Specifies the type of relationship between the current document and the
|
|
56
|
-
* linked document. Should only be used when `href` is specified. This
|
|
57
|
-
* defaults to "noopener noreferrer" when `target="_blank"`, but can be
|
|
58
|
-
* overridden by setting this prop to something else.
|
|
59
|
-
*/
|
|
60
|
-
rel?: string,
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* Set the tabindex attribute on the rendered element.
|
|
64
|
-
*/
|
|
65
|
-
tabIndex?: number,
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* Test ID used for e2e testing.
|
|
69
|
-
*/
|
|
70
|
-
testId?: string,
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* Whether to avoid using client-side navigation.
|
|
74
|
-
*
|
|
75
|
-
* If the URL passed to href is local to the client-side, e.g.
|
|
76
|
-
* /math/algebra/eval-exprs, then it tries to use react-router-dom's Link
|
|
77
|
-
* component which handles the client-side navigation. You can set
|
|
78
|
-
* `skipClientNav` to true avoid using client-side nav entirely.
|
|
79
|
-
*
|
|
80
|
-
* NOTE: All URLs containing a protocol are considered external, e.g.
|
|
81
|
-
* https://khanacademy.org/math/algebra/eval-exprs will trigger a full
|
|
82
|
-
* page reload.
|
|
83
|
-
*/
|
|
84
|
-
skipClientNav?: boolean,
|
|
85
|
-
|
|
86
|
-
/**
|
|
87
|
-
* Custom styles.
|
|
88
|
-
*/
|
|
89
|
-
style?: StyleType,
|
|
90
|
-
|
|
91
|
-
/**
|
|
92
|
-
* Adds CSS classes to the Link.
|
|
93
|
-
*/
|
|
94
|
-
className?: string,
|
|
95
|
-
|
|
96
|
-
/**
|
|
97
|
-
* Function to call when button is clicked.
|
|
98
|
-
*
|
|
99
|
-
* This callback should be used for things like marking BigBingo
|
|
100
|
-
* conversions. It should NOT be used to redirect to a different URL or to
|
|
101
|
-
* prevent navigation via e.preventDefault(). The event passed to this
|
|
102
|
-
* handler will have its preventDefault() and stopPropagation() methods
|
|
103
|
-
* stubbed out.
|
|
104
|
-
*/
|
|
105
|
-
onClick?: (e: SyntheticEvent<>) => mixed,
|
|
106
|
-
|
|
107
|
-
/**
|
|
108
|
-
* Run async code in the background while client-side navigating. If the
|
|
109
|
-
* browser does a full page load navigation, the callback promise must be
|
|
110
|
-
* settled before the navigation will occur. Errors are ignored so that
|
|
111
|
-
* navigation is guaranteed to succeed.
|
|
112
|
-
*/
|
|
113
|
-
safeWithNav?: () => Promise<mixed>,
|
|
114
|
-
|
|
115
|
-
/**
|
|
116
|
-
* Respond to raw "keydown" event.
|
|
117
|
-
*/
|
|
118
|
-
onKeyDown?: (e: SyntheticKeyboardEvent<>) => mixed,
|
|
119
|
-
|
|
120
|
-
/**
|
|
121
|
-
* Respond to raw "keyup" event.
|
|
122
|
-
*/
|
|
123
|
-
onKeyUp?: (e: SyntheticKeyboardEvent<>) => mixed,
|
|
124
|
-
|
|
125
|
-
/**
|
|
126
|
-
* A target destination window for a link to open in. We only support
|
|
127
|
-
* "_blank" which opens the URL in a new tab.
|
|
128
|
-
*
|
|
129
|
-
* TODO(WB-1262): only allow this prop when `href` is also set.t
|
|
130
|
-
*/
|
|
131
|
-
target?: "_blank",
|
|
132
|
-
|
|
133
|
-
/**
|
|
134
|
-
* Run async code before navigating to the URL passed to `href`. If the
|
|
135
|
-
* promise returned rejects then navigation will not occur.
|
|
136
|
-
*
|
|
137
|
-
* If both safeWithNav and beforeNav are provided, beforeNav will be run
|
|
138
|
-
* first and safeWithNav will only be run if beforeNav does not reject.
|
|
139
|
-
*
|
|
140
|
-
* WARNING: Using this with `target="_blank"` will trigger built-in popup
|
|
141
|
-
* blockers in Firefox and Safari. This is because we do navigation
|
|
142
|
-
* programmatically and `beforeNav` causes a delay which means that the
|
|
143
|
-
* browser can't make a directly link between a user action and the
|
|
144
|
-
* navigation.
|
|
145
|
-
*/
|
|
146
|
-
beforeNav?: () => Promise<mixed>,
|
|
147
|
-
|
|
148
|
-
/**
|
|
149
|
-
* An optional title attribute.
|
|
150
|
-
*/
|
|
151
|
-
title?: string,
|
|
152
|
-
|
|
153
|
-
/**
|
|
154
|
-
* An optional icon displayed before the link label.
|
|
155
|
-
*/
|
|
156
|
-
startIcon?: IconAsset,
|
|
157
|
-
|
|
158
|
-
/**
|
|
159
|
-
* An optional icon displayed after the link label.
|
|
160
|
-
* If `target="_blank"` and `endIcon` is passed in, `endIcon` will override
|
|
161
|
-
* the default `externalIcon`.
|
|
162
|
-
*/
|
|
163
|
-
endIcon?: IconAsset,
|
|
164
|
-
|},
|
|
165
|
-
|};
|
|
166
|
-
/**
|
|
167
|
-
* Reusable link component.
|
|
168
|
-
*
|
|
169
|
-
* Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
|
|
170
|
-
* `LinkCore`. `ClickableBehavior` handles interactions and state changes.
|
|
171
|
-
* `LinkCore` is a stateless component which displays the different states
|
|
172
|
-
* the `Link` can take.
|
|
173
|
-
*
|
|
174
|
-
* ### Usage
|
|
175
|
-
*
|
|
176
|
-
* ```jsx
|
|
177
|
-
* <Link
|
|
178
|
-
* href="https://khanacademy.org/"
|
|
179
|
-
* >
|
|
180
|
-
* Label
|
|
181
|
-
* </Link>
|
|
182
|
-
* ```
|
|
183
|
-
*/
|
|
184
|
-
declare var Link: React.ForwardRefExoticComponent<{|
|
|
185
|
-
...$ReadOnly<$Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaAttributes>,
|
|
186
|
-
...$ReadOnly<{|
|
|
187
|
-
role?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f__2e__2e__2f_wonder_2d_blocks_2d_core_2f_src_2f_util_2f_aria_2d_types.AriaRole | void,
|
|
188
|
-
|}>,
|
|
189
|
-
...{|
|
|
190
|
-
/**
|
|
191
|
-
* Text to appear on the link. It can be a plain text or a Typography element.
|
|
192
|
-
*/
|
|
193
|
-
children: string | React.Element<Typography>,
|
|
194
|
-
|
|
195
|
-
/**
|
|
196
|
-
* URL to navigate to.
|
|
197
|
-
*/
|
|
198
|
-
href: string,
|
|
199
|
-
|
|
200
|
-
/**
|
|
201
|
-
* An optional id attribute.
|
|
202
|
-
*/
|
|
203
|
-
id?: string | void,
|
|
204
|
-
|
|
205
|
-
/**
|
|
206
|
-
* Indicates that this link is used within a body of text.
|
|
207
|
-
* This styles the link with an underline to distinguish it
|
|
208
|
-
* from surrounding text.
|
|
209
|
-
*/
|
|
210
|
-
inline?: boolean | void,
|
|
211
|
-
|
|
212
|
-
/**
|
|
213
|
-
* Kind of Link. Note: Secondary light Links are not supported.
|
|
214
|
-
*/
|
|
215
|
-
kind?: "primary" | "secondary" | void,
|
|
216
|
-
|
|
217
|
-
/**
|
|
218
|
-
* Whether the button is on a dark/colored background.
|
|
219
|
-
*/
|
|
220
|
-
light?: boolean | void,
|
|
221
|
-
|
|
222
|
-
/**
|
|
223
|
-
* Whether the link should change color once it's visited.
|
|
224
|
-
* secondary or primary (light) links are not allowed to be visitable.
|
|
225
|
-
*/
|
|
226
|
-
visitable?: boolean | void,
|
|
227
|
-
|
|
228
|
-
/**
|
|
229
|
-
* Specifies the type of relationship between the current document and the
|
|
230
|
-
* linked document. Should only be used when `href` is specified. This
|
|
231
|
-
* defaults to "noopener noreferrer" when `target="_blank"`, but can be
|
|
232
|
-
* overridden by setting this prop to something else.
|
|
233
|
-
*/
|
|
234
|
-
rel?: string | void,
|
|
235
|
-
|
|
236
|
-
/**
|
|
237
|
-
* Set the tabindex attribute on the rendered element.
|
|
238
|
-
*/
|
|
239
|
-
tabIndex?: number | void,
|
|
240
|
-
|
|
241
|
-
/**
|
|
242
|
-
* Test ID used for e2e testing.
|
|
243
|
-
*/
|
|
244
|
-
testId?: string | void,
|
|
245
|
-
|
|
246
|
-
/**
|
|
247
|
-
* Whether to avoid using client-side navigation.
|
|
248
|
-
*
|
|
249
|
-
* If the URL passed to href is local to the client-side, e.g.
|
|
250
|
-
* /math/algebra/eval-exprs, then it tries to use react-router-dom's Link
|
|
251
|
-
* component which handles the client-side navigation. You can set
|
|
252
|
-
* `skipClientNav` to true avoid using client-side nav entirely.
|
|
253
|
-
*
|
|
254
|
-
* NOTE: All URLs containing a protocol are considered external, e.g.
|
|
255
|
-
* https://khanacademy.org/math/algebra/eval-exprs will trigger a full
|
|
256
|
-
* page reload.
|
|
257
|
-
*/
|
|
258
|
-
skipClientNav?: boolean | void,
|
|
259
|
-
|
|
260
|
-
/**
|
|
261
|
-
* Custom styles.
|
|
262
|
-
*/
|
|
263
|
-
style?: StyleType,
|
|
264
|
-
|
|
265
|
-
/**
|
|
266
|
-
* Adds CSS classes to the Link.
|
|
267
|
-
*/
|
|
268
|
-
className?: string | void,
|
|
269
|
-
|
|
270
|
-
/**
|
|
271
|
-
* Function to call when button is clicked.
|
|
272
|
-
*
|
|
273
|
-
* This callback should be used for things like marking BigBingo
|
|
274
|
-
* conversions. It should NOT be used to redirect to a different URL or to
|
|
275
|
-
* prevent navigation via e.preventDefault(). The event passed to this
|
|
276
|
-
* handler will have its preventDefault() and stopPropagation() methods
|
|
277
|
-
* stubbed out.
|
|
278
|
-
*/
|
|
279
|
-
onClick?: ((e: SyntheticEvent<>) => mixed) | void,
|
|
280
|
-
|
|
281
|
-
/**
|
|
282
|
-
* Run async code in the background while client-side navigating. If the
|
|
283
|
-
* browser does a full page load navigation, the callback promise must be
|
|
284
|
-
* settled before the navigation will occur. Errors are ignored so that
|
|
285
|
-
* navigation is guaranteed to succeed.
|
|
286
|
-
*/
|
|
287
|
-
safeWithNav?: (() => Promise<mixed>) | void,
|
|
288
|
-
|
|
289
|
-
/**
|
|
290
|
-
* Respond to raw "keydown" event.
|
|
291
|
-
*/
|
|
292
|
-
onKeyDown?: ((e: SyntheticKeyboardEvent<>) => mixed) | void,
|
|
293
|
-
|
|
294
|
-
/**
|
|
295
|
-
* Respond to raw "keyup" event.
|
|
296
|
-
*/
|
|
297
|
-
onKeyUp?: ((e: SyntheticKeyboardEvent<>) => mixed) | void,
|
|
298
|
-
|
|
299
|
-
/**
|
|
300
|
-
* A target destination window for a link to open in. We only support
|
|
301
|
-
* "_blank" which opens the URL in a new tab.
|
|
302
|
-
*
|
|
303
|
-
* TODO(WB-1262): only allow this prop when `href` is also set.t
|
|
304
|
-
*/
|
|
305
|
-
target?: "_blank" | void,
|
|
306
|
-
|
|
307
|
-
/**
|
|
308
|
-
* Run async code before navigating to the URL passed to `href`. If the
|
|
309
|
-
* promise returned rejects then navigation will not occur.
|
|
310
|
-
*
|
|
311
|
-
* If both safeWithNav and beforeNav are provided, beforeNav will be run
|
|
312
|
-
* first and safeWithNav will only be run if beforeNav does not reject.
|
|
313
|
-
*
|
|
314
|
-
* WARNING: Using this with `target="_blank"` will trigger built-in popup
|
|
315
|
-
* blockers in Firefox and Safari. This is because we do navigation
|
|
316
|
-
* programmatically and `beforeNav` causes a delay which means that the
|
|
317
|
-
* browser can't make a directly link between a user action and the
|
|
318
|
-
* navigation.
|
|
319
|
-
*/
|
|
320
|
-
beforeNav?: (() => Promise<mixed>) | void,
|
|
321
|
-
|
|
322
|
-
/**
|
|
323
|
-
* An optional title attribute.
|
|
324
|
-
*/
|
|
325
|
-
title?: string | void,
|
|
326
|
-
|
|
327
|
-
/**
|
|
328
|
-
* An optional icon displayed before the link label.
|
|
329
|
-
*/
|
|
330
|
-
startIcon?: IconAsset | void,
|
|
331
|
-
|
|
332
|
-
/**
|
|
333
|
-
* An optional icon displayed after the link label.
|
|
334
|
-
* If `target="_blank"` and `endIcon` is passed in, `endIcon` will override
|
|
335
|
-
* the default `externalIcon`.
|
|
336
|
-
*/
|
|
337
|
-
endIcon?: IconAsset | void,
|
|
338
|
-
|},
|
|
339
|
-
...React.RefAttributes<HTMLAnchorElement | typeof ReactRouterLink>,
|
|
340
|
-
|}>;
|
|
341
|
-
declare export default typeof Link;
|