@khanacademy/wonder-blocks-tooltip 1.3.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/LICENSE +21 -0
- package/dist/es/index.js +1133 -0
- package/dist/index.js +1389 -0
- package/dist/index.js.flow +2 -0
- package/docs.md +11 -0
- package/package.json +37 -0
- package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +2674 -0
- package/src/__tests__/generated-snapshot.test.js +475 -0
- package/src/components/__tests__/__snapshots__/tooltip-tail.test.js.snap +9 -0
- package/src/components/__tests__/__snapshots__/tooltip.test.js.snap +47 -0
- package/src/components/__tests__/tooltip-anchor.test.js +987 -0
- package/src/components/__tests__/tooltip-bubble.test.js +80 -0
- package/src/components/__tests__/tooltip-popper.test.js +71 -0
- package/src/components/__tests__/tooltip-tail.test.js +117 -0
- package/src/components/__tests__/tooltip.integration.test.js +79 -0
- package/src/components/__tests__/tooltip.test.js +401 -0
- package/src/components/tooltip-anchor.js +330 -0
- package/src/components/tooltip-bubble.js +150 -0
- package/src/components/tooltip-bubble.md +92 -0
- package/src/components/tooltip-content.js +76 -0
- package/src/components/tooltip-content.md +34 -0
- package/src/components/tooltip-popper.js +101 -0
- package/src/components/tooltip-tail.js +462 -0
- package/src/components/tooltip-tail.md +143 -0
- package/src/components/tooltip.js +235 -0
- package/src/components/tooltip.md +194 -0
- package/src/components/tooltip.stories.js +76 -0
- package/src/index.js +12 -0
- package/src/util/__tests__/__snapshots__/active-tracker.test.js.snap +3 -0
- package/src/util/__tests__/__snapshots__/ref-tracker.test.js.snap +3 -0
- package/src/util/__tests__/active-tracker.test.js +142 -0
- package/src/util/__tests__/ref-tracker.test.js +153 -0
- package/src/util/active-tracker.js +94 -0
- package/src/util/constants.js +7 -0
- package/src/util/ref-tracker.js +46 -0
- package/src/util/types.js +29 -0
|
@@ -0,0 +1,475 @@
|
|
|
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
|
+
});
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`TooltipTail #render unknown placement, throws 1`] = `"Unknown placement: notaplacement"`;
|
|
4
|
+
|
|
5
|
+
exports[`TooltipTail INTERNALS _calculateDimensionsFromPlacement throws on bad placement 1`] = `"Unknown placement: notaplacement"`;
|
|
6
|
+
|
|
7
|
+
exports[`TooltipTail INTERNALS _getFilterPositioning throws on bad placement 1`] = `"Unknown placement: notaplacement"`;
|
|
8
|
+
|
|
9
|
+
exports[`TooltipTail INTERNALS _minDistanceFromCorners throws on bad placement 1`] = `"Unknown placement: notaplacement"`;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`Tooltip content is TooltipContent with title, overrides title of TooltipContent: Similar to <Body>Some custom content</Body> 1`] = `
|
|
4
|
+
<Body
|
|
5
|
+
tag="span"
|
|
6
|
+
>
|
|
7
|
+
Some custom content
|
|
8
|
+
</Body>
|
|
9
|
+
`;
|
|
10
|
+
|
|
11
|
+
exports[`Tooltip content is TooltipContent with title, sets title of TooltipContent: Similar to <HeadingSmall>Some custom content</HeadingSmall> 1`] = `
|
|
12
|
+
<HeadingSmall
|
|
13
|
+
tag="h4"
|
|
14
|
+
>
|
|
15
|
+
Some custom content
|
|
16
|
+
</HeadingSmall>
|
|
17
|
+
`;
|
|
18
|
+
|
|
19
|
+
exports[`Tooltip content is TooltipContent with title, sets title of TooltipContent: Similar to <HeadingSmall>Title</HeadingSmall> 1`] = `
|
|
20
|
+
<HeadingSmall
|
|
21
|
+
tag="h4"
|
|
22
|
+
>
|
|
23
|
+
Title
|
|
24
|
+
</HeadingSmall>
|
|
25
|
+
`;
|
|
26
|
+
|
|
27
|
+
exports[`Tooltip content is TooltipContent without title, renders content as-is: <Body>Some custom content</Body> 1`] = `
|
|
28
|
+
<Body
|
|
29
|
+
tag="span"
|
|
30
|
+
>
|
|
31
|
+
Some custom content
|
|
32
|
+
</Body>
|
|
33
|
+
`;
|
|
34
|
+
|
|
35
|
+
exports[`Tooltip content is a string, wraps in TooltipContent with title: Similar to <TooltipContent title="Title">Content</TooltipContent> 1`] = `
|
|
36
|
+
<TooltipContent
|
|
37
|
+
title="Title"
|
|
38
|
+
>
|
|
39
|
+
Content
|
|
40
|
+
</TooltipContent>
|
|
41
|
+
`;
|
|
42
|
+
|
|
43
|
+
exports[`Tooltip content is a string, wraps in TooltipContent without title: Similar to <TooltipContent>Content</TooltipContent> 1`] = `
|
|
44
|
+
<TooltipContent>
|
|
45
|
+
Content
|
|
46
|
+
</TooltipContent>
|
|
47
|
+
`;
|