@khanacademy/wonder-blocks-tooltip 1.3.21 → 1.3.22

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 +7 -0
  2. package/dist/index.js +35 -0
  3. package/docs.md +3 -10
  4. package/package.json +2 -2
  5. package/src/components/__docs__/tooltip-content.stories.js +89 -0
  6. package/src/components/__docs__/tooltip.argtypes.js +15 -0
  7. package/src/components/__docs__/tooltip.stories.js +245 -0
  8. package/src/components/tooltip-content.js +10 -0
  9. package/src/components/tooltip.js +24 -0
  10. package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -2684
  11. package/src/__tests__/generated-snapshot.test.js +0 -475
  12. package/src/components/tooltip-bubble.md +0 -92
  13. package/src/components/tooltip-content.md +0 -34
  14. package/src/components/tooltip-tail.md +0 -143
  15. package/src/components/tooltip.md +0 -194
  16. package/src/components/tooltip.stories.js +0 -111
package/src/__tests__/generated-snapshot.test.js DELETED
@@ -1,475 +0,0 @@
1
- // This file is auto-generated by gen-snapshot-tests.js
2
- // Do not edit this file. To make changes to these snapshot tests:
3
- // 1. edit the markdown documentation files in the package,
4
- // packages/wonder-blocks-tooltip
5
- // 2. Run `yarn run gen-snapshot-tests`.
6
- import React from "react";
7
- import renderer from "react-test-renderer";
8
-
9
- // Mock react-dom as jest doesn't like findDOMNode.
10
- jest.mock("react-dom");
11
- import Tooltip, {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
12
- import {View, Text} from "@khanacademy/wonder-blocks-core";
13
- import {StyleSheet} from "aphrodite";
14
- import {Body, LabelSmall} from "@khanacademy/wonder-blocks-typography";
15
- import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
16
- import Button from "@khanacademy/wonder-blocks-button";
17
- import IconButton from "@khanacademy/wonder-blocks-icon-button";
18
- import {icons} from "@khanacademy/wonder-blocks-icon";
19
- import {Strut, Spring} from "@khanacademy/wonder-blocks-layout";
20
- import Spacing from "@khanacademy/wonder-blocks-spacing";
21
-
22
- import TooltipTail from "./../components/tooltip-tail.js";
23
- import TooltipBubble from "./../components/tooltip-bubble.js";
24
-
25
- describe("wonder-blocks-tooltip", () => {
26
- it("example 1", () => {
27
- const example = (
28
- <Tooltip
29
- content="This is a text tooltip on the right"
30
- placement="right"
31
- >
32
- Some text
33
- </Tooltip>
34
- );
35
- const tree = renderer.create(example).toJSON();
36
- expect(tree).toMatchSnapshot();
37
- });
38
-
39
- it("example 2", () => {
40
- const example = (
41
- <Tooltip
42
- id="my-a11y-tooltip"
43
- forceAnchorFocusivity={false}
44
- title="This tooltip has a title"
45
- content="I'm at the top!"
46
- >
47
- <View>
48
- Some text
49
- <input aria-describedby="my-a11y-tooltip" />
50
- </View>
51
- </Tooltip>
52
- );
53
- const tree = renderer.create(example).toJSON();
54
- expect(tree).toMatchSnapshot();
55
- });
56
-
57
- it("example 3", () => {
58
- const styles = StyleSheet.create({
59
- scrollbox: {
60
- height: 100,
61
- overflow: "auto",
62
- border: "1px solid black",
63
- margin: 10,
64
- },
65
- hostbox: {
66
- minHeight: "200vh",
67
- },
68
- });
69
- const example = (
70
- <View>
71
- <View style={styles.scrollbox}>
72
- <View style={styles.hostbox}>
73
- <Body>
74
- This is a big long piece of text with a
75
- <Tooltip
76
- content="This tooltip will disappear when scrolled out of bounds"
77
- placement="bottom"
78
- >
79
- [tooltip]
80
- </Tooltip>
81
- <span> </span>in the middle.
82
- </Body>
83
- </View>
84
- </View>
85
- </View>
86
- );
87
- const tree = renderer.create(example).toJSON();
88
- expect(tree).toMatchSnapshot();
89
- });
90
-
91
- it("example 4", () => {
92
- const styles = StyleSheet.create({
93
- scrollbox: {
94
- height: 100,
95
- overflow: "auto",
96
- border: "1px solid black",
97
- margin: 10,
98
- },
99
- hostbox: {
100
- minHeight: "200vh",
101
- },
102
- modalbox: {
103
- height: "200vh",
104
- },
105
- });
106
- const scrollyContent = (
107
- <View style={styles.scrollbox}>
108
- <View style={styles.hostbox}>
109
- <Tooltip content="I'm on the left!" placement="left">
110
- tooltip
111
- </Tooltip>
112
- </View>
113
- </View>
114
- );
115
- const modalContent = (
116
- <View style={styles.modalbox}>{scrollyContent}</View>
117
- );
118
- const modal = (
119
- <OnePaneDialog
120
- title="My modal"
121
- footer="Still my modal"
122
- content={modalContent}
123
- />
124
- );
125
- const example = (
126
- <ModalLauncher modal={modal}>
127
- {({openModal}) => (
128
- <Button onClick={openModal}>Click here!</Button>
129
- )}
130
- </ModalLauncher>
131
- );
132
- const tree = renderer.create(example).toJSON();
133
- expect(tree).toMatchSnapshot();
134
- });
135
-
136
- it("example 5", () => {
137
- const styles = StyleSheet.create({
138
- block: {
139
- border: "solid 1px steelblue",
140
- width: 32,
141
- height: 32,
142
- alignItems: "center",
143
- justifyContent: "center",
144
- },
145
- });
146
- const example = (
147
- <View>
148
- <LabelSmall>
149
- Here, we can see that the first tooltip shown has an initial
150
- delay before it appears, as does the last tooltip shown, yet
151
- when moving between tooltipped items, the transition from
152
- one to another is instantaneous.
153
- </LabelSmall>
154
-
155
- <View
156
- style={{
157
- flexDirection: "row",
158
- }}
159
- >
160
- <Tooltip content="Tooltip A" placement="bottom">
161
- <View style={styles.block}>A</View>
162
- </Tooltip>
163
- <Tooltip content="Tooltip B" placement="bottom">
164
- <View style={styles.block}>B</View>
165
- </Tooltip>
166
- <Tooltip content="Tooltip C" placement="bottom">
167
- <View style={styles.block}>C</View>
168
- </Tooltip>
169
- <Tooltip content="Tooltip D" placement="bottom">
170
- <View style={styles.block}>D</View>
171
- </Tooltip>
172
- </View>
173
- </View>
174
- );
175
- const tree = renderer.create(example).toJSON();
176
- expect(tree).toMatchSnapshot();
177
- });
178
-
179
- it("example 6", () => {
180
- const styles = {
181
- container: {
182
- flexDirection: "row",
183
- alignItems: "center",
184
- },
185
- };
186
- const example = (
187
- <View style={styles.container}>
188
- <Tooltip content="I'm a little tooltip">
189
- <Button>Click me!</Button>
190
- </Tooltip>
191
- <Strut size={16} />
192
- <Tooltip content="Short and stout">
193
- <IconButton
194
- icon={icons.search}
195
- aria-label="search"
196
- onClick={(e) => console.log("hello")}
197
- />
198
- </Tooltip>
199
- </View>
200
- );
201
- const tree = renderer.create(example).toJSON();
202
- expect(tree).toMatchSnapshot();
203
- });
204
-
205
- it("example 7", () => {
206
- const example = <TooltipContent>Only the content</TooltipContent>;
207
- const tree = renderer.create(example).toJSON();
208
- expect(tree).toMatchSnapshot();
209
- });
210
-
211
- it("example 8", () => {
212
- const example = (
213
- <TooltipContent title="Title text!">
214
- Some content in my content
215
- </TooltipContent>
216
- );
217
- const tree = renderer.create(example).toJSON();
218
- expect(tree).toMatchSnapshot();
219
- });
220
-
221
- it("example 9", () => {
222
- const {
223
- Body,
224
- LabelSmall,
225
- } = require("@khanacademy/wonder-blocks-typography");
226
-
227
- const example = (
228
- <TooltipContent title={<Body>Body text title!</Body>}>
229
- <Body>Body text content!</Body>
230
- <LabelSmall>And LabelSmall!</LabelSmall>
231
- </TooltipContent>
232
- );
233
- const tree = renderer.create(example).toJSON();
234
- expect(tree).toMatchSnapshot();
235
- });
236
-
237
- it("example 10", () => {
238
- const styles = StyleSheet.create({
239
- guideContainer: {
240
- flexDirection: "row",
241
- height: Spacing.xxxSmall_4,
242
- },
243
- padding: {
244
- backgroundColor: "bisque",
245
- width: Spacing.xSmall_8,
246
- },
247
- tail: {
248
- backgroundColor: "green",
249
- width: Spacing.large_24,
250
- },
251
- });
252
- const example = (
253
- <View>
254
- <TooltipTail placement="top" />
255
- <View style={styles.guideContainer}>
256
- <View key="padleft" style={styles.padding} />
257
- <View key="tail" style={styles.tail} />
258
- <View key="padright" style={styles.padding} />
259
- <Spring key="spring" />
260
- </View>
261
- </View>
262
- );
263
- const tree = renderer.create(example).toJSON();
264
- expect(tree).toMatchSnapshot();
265
- });
266
-
267
- it("example 11", () => {
268
- const styles = StyleSheet.create({
269
- exampleContainer: {
270
- flexDirection: "row",
271
- },
272
- guideContainer: {
273
- width: Spacing.xxxSmall_4,
274
- },
275
- padding: {
276
- backgroundColor: "bisque",
277
- height: Spacing.xSmall_8,
278
- },
279
- tail: {
280
- backgroundColor: "green",
281
- height: Spacing.large_24,
282
- },
283
- });
284
- const example = (
285
- <View style={styles.exampleContainer}>
286
- <View style={styles.guideContainer}>
287
- <View key="padleft" style={styles.padding} />
288
- <View key="tail" style={styles.tail} />
289
- <View key="padright" style={styles.padding} />
290
- <Spring key="spring" />
291
- </View>
292
- <TooltipTail placement="right" />
293
- </View>
294
- );
295
- const tree = renderer.create(example).toJSON();
296
- expect(tree).toMatchSnapshot();
297
- });
298
-
299
- it("example 12", () => {
300
- const styles = StyleSheet.create({
301
- guideContainer: {
302
- flexDirection: "row",
303
- height: Spacing.xxxSmall_4,
304
- },
305
- padding: {
306
- backgroundColor: "bisque",
307
- width: Spacing.xSmall_8,
308
- },
309
- tail: {
310
- backgroundColor: "green",
311
- width: Spacing.large_24,
312
- },
313
- });
314
- const example = (
315
- <View>
316
- <View style={styles.guideContainer}>
317
- <View key="padleft" style={styles.padding} />
318
- <View key="tail" style={styles.tail} />
319
- <View key="padright" style={styles.padding} />
320
- <Spring key="spring" />
321
- </View>
322
- <TooltipTail placement="bottom" />
323
- </View>
324
- );
325
- const tree = renderer.create(example).toJSON();
326
- expect(tree).toMatchSnapshot();
327
- });
328
-
329
- it("example 13", () => {
330
- const styles = StyleSheet.create({
331
- exampleContainer: {
332
- flexDirection: "row",
333
- },
334
- guideContainer: {
335
- width: Spacing.xxxSmall_4,
336
- },
337
- padding: {
338
- backgroundColor: "bisque",
339
- height: Spacing.xSmall_8,
340
- },
341
- tail: {
342
- backgroundColor: "green",
343
- height: Spacing.large_24,
344
- },
345
- });
346
- const example = (
347
- <View style={styles.exampleContainer}>
348
- <TooltipTail placement="left" />
349
- <View style={styles.guideContainer}>
350
- <View key="padleft" style={styles.padding} />
351
- <View key="tail" style={styles.tail} />
352
- <View key="padright" style={styles.padding} />
353
- <Spring key="spring" />
354
- </View>
355
- </View>
356
- );
357
- const tree = renderer.create(example).toJSON();
358
- expect(tree).toMatchSnapshot();
359
- });
360
-
361
- it("example 14", () => {
362
- const example = (
363
- <View>
364
- <TooltipBubble
365
- placement="top"
366
- style={{
367
- position: "relative",
368
- }}
369
- >
370
- <TooltipContent>I'm on the top!</TooltipContent>
371
- </TooltipBubble>
372
- </View>
373
- );
374
- const tree = renderer.create(example).toJSON();
375
- expect(tree).toMatchSnapshot();
376
- });
377
-
378
- it("example 15", () => {
379
- const example = (
380
- <View
381
- style={{
382
- alignItems: "flex-start",
383
- }}
384
- >
385
- <TooltipBubble
386
- placement="right"
387
- style={{
388
- position: "relative",
389
- }}
390
- >
391
- <TooltipContent>I'm on the right!</TooltipContent>
392
- </TooltipBubble>
393
- </View>
394
- );
395
- const tree = renderer.create(example).toJSON();
396
- expect(tree).toMatchSnapshot();
397
- });
398
-
399
- it("example 16", () => {
400
- const example = (
401
- <View>
402
- <TooltipBubble
403
- placement="bottom"
404
- style={{
405
- position: "relative",
406
- }}
407
- >
408
- <TooltipContent>I'm on the bottom!</TooltipContent>
409
- </TooltipBubble>
410
- </View>
411
- );
412
- const tree = renderer.create(example).toJSON();
413
- expect(tree).toMatchSnapshot();
414
- });
415
-
416
- it("example 17", () => {
417
- const example = (
418
- <View>
419
- <TooltipBubble
420
- placement="left"
421
- style={{
422
- position: "relative",
423
- }}
424
- >
425
- <TooltipContent>I'm on the left!</TooltipContent>
426
- </TooltipBubble>
427
- </View>
428
- );
429
- const tree = renderer.create(example).toJSON();
430
- expect(tree).toMatchSnapshot();
431
- });
432
-
433
- it("example 18", () => {
434
- const example = (
435
- <View>
436
- <TooltipBubble
437
- placement="bottom"
438
- tailOffset={{
439
- left: 50,
440
- top: 0,
441
- }}
442
- style={{
443
- position: "relative",
444
- }}
445
- >
446
- <TooltipContent>
447
- I'm on the bottom with a tail 50px in!
448
- </TooltipContent>
449
- </TooltipBubble>
450
- </View>
451
- );
452
- const tree = renderer.create(example).toJSON();
453
- expect(tree).toMatchSnapshot();
454
- });
455
-
456
- it("example 19", () => {
457
- const example = (
458
- <View>
459
- <TooltipBubble
460
- placement="top"
461
- isReferenceHidden={true}
462
- style={{
463
- position: "relative",
464
- }}
465
- >
466
- <TooltipContent>
467
- I'm hidden. So hidden. Shhhhh!
468
- </TooltipContent>
469
- </TooltipBubble>
470
- </View>
471
- );
472
- const tree = renderer.create(example).toJSON();
473
- expect(tree).toMatchSnapshot();
474
- });
475
- });
package/src/components/tooltip-bubble.md DELETED
@@ -1,92 +0,0 @@
1
- This is an internal component that we use to render the stuff that appears when a tooltip shows.
2
-
3
- Note that without explicit positioning, the tail will not be centered.
4
-
5
- ### Placement top
6
-
7
- ```jsx
8
- import {View} from "@khanacademy/wonder-blocks-core";
9
- import {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
10
-
11
- <View>
12
- <TooltipBubble placement="top" style={{position: "relative"}}>
13
- <TooltipContent>I'm on the top!</TooltipContent>
14
- </TooltipBubble>
15
- </View>
16
- ```
17
-
18
- ### Placement right
19
-
20
- ```jsx
21
- import {View} from "@khanacademy/wonder-blocks-core";
22
- import {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
23
-
24
- <View style={{alignItems: "flex-start"}}>
25
- <TooltipBubble placement="right" style={{position: "relative"}}>
26
- <TooltipContent>I'm on the right!</TooltipContent>
27
- </TooltipBubble>
28
- </View>
29
- ```
30
-
31
- ### Placement bottom
32
-
33
- ```jsx
34
- import {View} from "@khanacademy/wonder-blocks-core";
35
- import {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
36
-
37
- <View>
38
- <TooltipBubble placement="bottom" style={{position: "relative"}}>
39
- <TooltipContent>I'm on the bottom!</TooltipContent>
40
- </TooltipBubble>
41
- </View>
42
- ```
43
-
44
- ### Placement left
45
-
46
- ```jsx
47
- import {View} from "@khanacademy/wonder-blocks-core";
48
- import {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
49
-
50
- <View>
51
- <TooltipBubble placement="left" style={{position: "relative"}}>
52
- <TooltipContent>I'm on the left!</TooltipContent>
53
- </TooltipBubble>
54
- </View>
55
- ```
56
-
57
- ### Positioning the tail
58
- Here we tell the tail that it's lefthand side is at 50px.
59
-
60
- ```jsx
61
- import {View} from "@khanacademy/wonder-blocks-core";
62
- import Spacing from "@khanacademy/wonder-blocks-spacing";
63
- import {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
64
-
65
- <View>
66
- <TooltipBubble
67
- placement="bottom"
68
- tailOffset={{left: 50, top: 0}}
69
- style={{position: "relative"}}
70
- >
71
- <TooltipContent>I'm on the bottom with a tail 50px in!</TooltipContent>
72
- </TooltipBubble>
73
- </View>
74
- ```
75
-
76
- ### Hidden because isReferenceHidden is true
77
-
78
- ```jsx
79
- import {View} from "@khanacademy/wonder-blocks-core";
80
- import Spacing from "@khanacademy/wonder-blocks-spacing";
81
- import {TooltipContent} from "@khanacademy/wonder-blocks-tooltip";
82
-
83
- <View>
84
- <TooltipBubble
85
- placement="top"
86
- isReferenceHidden={true}
87
- style={{position: "relative"}}
88
- >
89
- <TooltipContent>I'm hidden. So hidden. Shhhhh!</TooltipContent>
90
- </TooltipBubble>
91
- </View>
92
- ```
package/src/components/tooltip-content.md DELETED
@@ -1,34 +0,0 @@
1
- The `TooltipContent` component is provided for situations where the `Tooltip` needs to be customized beyond the default stylings. `TooltipContent` supports all `wonder-blocks-typography` components.
2
-
3
- ### Only text content
4
-
5
- This shows the default which is text rendered using `LabelMedium`.
6
-
7
- ```jsx
8
- <TooltipContent>
9
- Only the content
10
- </TooltipContent>
11
- ```
12
-
13
- ### Titled content
14
-
15
- This shows the default with a title; the title is rendered using `HeadingSmall`.
16
-
17
- ```jsx
18
- <TooltipContent title="Title text!">
19
- Some content in my content
20
- </TooltipContent>
21
- ```
22
-
23
- ### Custom title and custom content
24
-
25
- This shows how we can customize both the title and the content.
26
-
27
- ```jsx
28
- const {Body, LabelSmall} = require("@khanacademy/wonder-blocks-typography");
29
-
30
- <TooltipContent title={<Body>Body text title!</Body>}>
31
- <Body>Body text content!</Body>
32
- <LabelSmall>And LabelSmall!</LabelSmall>
33
- </TooltipContent>
34
- ```