@khanacademy/wonder-blocks-modal 2.3.7 → 2.3.8
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 +8 -0
- package/docs.md +4 -491
- package/package.json +3 -3
- package/src/components/__tests__/modal-launcher.test.js +1 -1
- package/src/components/__tests__/modal-panel.test.js +6 -15
- package/src/components/__tests__/one-pane-dialog.test.js +36 -8
- package/building-blocks.md +0 -136
- package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -3473
- package/src/__tests__/generated-snapshot.test.js +0 -846
- package/src/components/modal-launcher.md +0 -0
- package/src/components/one-pane-dialog.md +0 -250
|
@@ -1,846 +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-modal
|
|
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 {StyleSheet} from "aphrodite";
|
|
12
|
-
import {ModalLauncher, OnePaneDialog} from "@khanacademy/wonder-blocks-modal";
|
|
13
|
-
import {View} from "@khanacademy/wonder-blocks-core";
|
|
14
|
-
import {Body, Title, LabelLarge} from "@khanacademy/wonder-blocks-typography";
|
|
15
|
-
import Button from "@khanacademy/wonder-blocks-button";
|
|
16
|
-
import Spacing from "@khanacademy/wonder-blocks-spacing";
|
|
17
|
-
import {ActionMenu, ActionItem} from "@khanacademy/wonder-blocks-dropdown";
|
|
18
|
-
import {Strut, MediaLayout} from "@khanacademy/wonder-blocks-layout";
|
|
19
|
-
import {
|
|
20
|
-
Breadcrumbs,
|
|
21
|
-
BreadcrumbsItem,
|
|
22
|
-
} from "@khanacademy/wonder-blocks-breadcrumbs";
|
|
23
|
-
|
|
24
|
-
import ModalDialog from "./../components/modal-dialog.js";
|
|
25
|
-
import ModalPanel from "./../components/modal-panel.js";
|
|
26
|
-
import ModalHeader from "./../components/modal-header.js";
|
|
27
|
-
import ModalFooter from "./../components/modal-footer.js";
|
|
28
|
-
|
|
29
|
-
describe("wonder-blocks-modal", () => {
|
|
30
|
-
it("example 1", () => {
|
|
31
|
-
const styles = StyleSheet.create({
|
|
32
|
-
example: {
|
|
33
|
-
padding: Spacing.xLarge_32,
|
|
34
|
-
alignItems: "center",
|
|
35
|
-
},
|
|
36
|
-
title: {
|
|
37
|
-
marginBottom: Spacing.medium_16,
|
|
38
|
-
},
|
|
39
|
-
modalContent: {
|
|
40
|
-
margin: "0 auto",
|
|
41
|
-
maxWidth: 544,
|
|
42
|
-
},
|
|
43
|
-
above: {
|
|
44
|
-
background: "url(/modal-above.png)",
|
|
45
|
-
width: 874,
|
|
46
|
-
height: 551,
|
|
47
|
-
position: "absolute",
|
|
48
|
-
top: 40,
|
|
49
|
-
left: -140,
|
|
50
|
-
},
|
|
51
|
-
below: {
|
|
52
|
-
background: "url(/modal-below.png)",
|
|
53
|
-
width: 868,
|
|
54
|
-
height: 521,
|
|
55
|
-
position: "absolute",
|
|
56
|
-
top: -100,
|
|
57
|
-
left: -300,
|
|
58
|
-
},
|
|
59
|
-
});
|
|
60
|
-
|
|
61
|
-
const onePaneDialog = ({closeModal}) => (
|
|
62
|
-
<OnePaneDialog
|
|
63
|
-
title="Title"
|
|
64
|
-
subtitle="You're reading the subtitle!"
|
|
65
|
-
above={<View style={styles.above} />}
|
|
66
|
-
below={<View style={styles.below} />}
|
|
67
|
-
testId="dialog-default-example"
|
|
68
|
-
content={
|
|
69
|
-
<View style={styles.modalContent}>
|
|
70
|
-
<Body tag="p">
|
|
71
|
-
{
|
|
72
|
-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."
|
|
73
|
-
}
|
|
74
|
-
</Body>
|
|
75
|
-
</View>
|
|
76
|
-
}
|
|
77
|
-
footer={<Button onClick={closeModal}>Close modal</Button>}
|
|
78
|
-
/>
|
|
79
|
-
);
|
|
80
|
-
|
|
81
|
-
const example = (
|
|
82
|
-
<View style={styles.example}>
|
|
83
|
-
<ModalLauncher
|
|
84
|
-
modal={onePaneDialog}
|
|
85
|
-
testId="modal-launcher-default-example"
|
|
86
|
-
>
|
|
87
|
-
{({openModal}) => (
|
|
88
|
-
<Button onClick={openModal}>OnePaneDialog</Button>
|
|
89
|
-
)}
|
|
90
|
-
</ModalLauncher>
|
|
91
|
-
</View>
|
|
92
|
-
);
|
|
93
|
-
const tree = renderer.create(example).toJSON();
|
|
94
|
-
expect(tree).toMatchSnapshot();
|
|
95
|
-
});
|
|
96
|
-
|
|
97
|
-
it("example 2", () => {
|
|
98
|
-
const styles = StyleSheet.create({
|
|
99
|
-
example: {
|
|
100
|
-
padding: Spacing.xLarge_32,
|
|
101
|
-
alignItems: "center",
|
|
102
|
-
},
|
|
103
|
-
modalContent: {
|
|
104
|
-
margin: "0 auto",
|
|
105
|
-
maxWidth: 544,
|
|
106
|
-
},
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
const exampleModal = ({closeModal}) => (
|
|
110
|
-
<OnePaneDialog
|
|
111
|
-
title="Backdrop dismission disabled"
|
|
112
|
-
content={
|
|
113
|
-
<View style={styles.modalContent}>
|
|
114
|
-
<Body tag="p">
|
|
115
|
-
{
|
|
116
|
-
"This window won't be closed if you click/tap outside of the ModalPanel. To do that, you can still press `esc` or use the close button located on the top right."
|
|
117
|
-
}
|
|
118
|
-
</Body>
|
|
119
|
-
</View>
|
|
120
|
-
}
|
|
121
|
-
/>
|
|
122
|
-
);
|
|
123
|
-
|
|
124
|
-
const example = (
|
|
125
|
-
<View style={styles.example}>
|
|
126
|
-
<ModalLauncher
|
|
127
|
-
modal={exampleModal}
|
|
128
|
-
backdropDismissEnabled={false}
|
|
129
|
-
>
|
|
130
|
-
{({openModal}) => (
|
|
131
|
-
<Button onClick={openModal}>Open modal</Button>
|
|
132
|
-
)}
|
|
133
|
-
</ModalLauncher>
|
|
134
|
-
</View>
|
|
135
|
-
);
|
|
136
|
-
const tree = renderer.create(example).toJSON();
|
|
137
|
-
expect(tree).toMatchSnapshot();
|
|
138
|
-
});
|
|
139
|
-
|
|
140
|
-
it("example 3", () => {
|
|
141
|
-
class Example extends React.Component {
|
|
142
|
-
constructor(props) {
|
|
143
|
-
super(props);
|
|
144
|
-
this.state = {
|
|
145
|
-
opened: false,
|
|
146
|
-
};
|
|
147
|
-
}
|
|
148
|
-
|
|
149
|
-
handleOpen() {
|
|
150
|
-
console.log("opening modal");
|
|
151
|
-
this.setState({
|
|
152
|
-
opened: true,
|
|
153
|
-
});
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
handleClose() {
|
|
157
|
-
console.log("closing modal");
|
|
158
|
-
this.setState({
|
|
159
|
-
opened: false,
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
render() {
|
|
164
|
-
return (
|
|
165
|
-
<View>
|
|
166
|
-
<ActionMenu menuText="actions">
|
|
167
|
-
<ActionItem
|
|
168
|
-
label="Open modal"
|
|
169
|
-
onClick={() => this.handleOpen()}
|
|
170
|
-
/>
|
|
171
|
-
</ActionMenu>
|
|
172
|
-
<ModalLauncher
|
|
173
|
-
onClose={() => this.handleClose()}
|
|
174
|
-
opened={this.state.opened}
|
|
175
|
-
modal={({closeModal}) => (
|
|
176
|
-
<OnePaneDialog
|
|
177
|
-
title="Triggered from action menu"
|
|
178
|
-
content={
|
|
179
|
-
<View>
|
|
180
|
-
<Title>Hello, world</Title>
|
|
181
|
-
</View>
|
|
182
|
-
}
|
|
183
|
-
footer={
|
|
184
|
-
<Button onClick={closeModal}>
|
|
185
|
-
Close Modal
|
|
186
|
-
</Button>
|
|
187
|
-
}
|
|
188
|
-
/>
|
|
189
|
-
)}
|
|
190
|
-
/>
|
|
191
|
-
</View>
|
|
192
|
-
);
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
const example = <Example />;
|
|
197
|
-
const tree = renderer.create(example).toJSON();
|
|
198
|
-
expect(tree).toMatchSnapshot();
|
|
199
|
-
});
|
|
200
|
-
|
|
201
|
-
it("example 4", () => {
|
|
202
|
-
const styles = StyleSheet.create({
|
|
203
|
-
example: {
|
|
204
|
-
padding: Spacing.xLarge_32,
|
|
205
|
-
alignItems: "center",
|
|
206
|
-
},
|
|
207
|
-
});
|
|
208
|
-
|
|
209
|
-
const modalInitialFocus = ({closeModal}) => (
|
|
210
|
-
<OnePaneDialog
|
|
211
|
-
title="Single-line title"
|
|
212
|
-
content={
|
|
213
|
-
<View>
|
|
214
|
-
<View>
|
|
215
|
-
<label>Label</label>
|
|
216
|
-
<input type="text" />
|
|
217
|
-
<Strut size={Spacing.medium_16} />
|
|
218
|
-
<Button id="initial-focus">
|
|
219
|
-
Button to receive initial focus
|
|
220
|
-
</Button>
|
|
221
|
-
</View>
|
|
222
|
-
</View>
|
|
223
|
-
}
|
|
224
|
-
footer={
|
|
225
|
-
<React.Fragment>
|
|
226
|
-
<Button kind="tertiary" onClick={closeModal}>
|
|
227
|
-
Cancel
|
|
228
|
-
</Button>
|
|
229
|
-
<Strut size={Spacing.medium_16} />
|
|
230
|
-
<Button>Submit</Button>
|
|
231
|
-
</React.Fragment>
|
|
232
|
-
}
|
|
233
|
-
/>
|
|
234
|
-
);
|
|
235
|
-
|
|
236
|
-
const example = (
|
|
237
|
-
<View style={styles.example}>
|
|
238
|
-
<ModalLauncher
|
|
239
|
-
onClose={() => window.alert("you closed the modal")}
|
|
240
|
-
initialFocusId="initial-focus"
|
|
241
|
-
modal={modalInitialFocus}
|
|
242
|
-
>
|
|
243
|
-
{({openModal}) => (
|
|
244
|
-
<Button onClick={openModal}>
|
|
245
|
-
Open modal with initial focus
|
|
246
|
-
</Button>
|
|
247
|
-
)}
|
|
248
|
-
</ModalLauncher>
|
|
249
|
-
</View>
|
|
250
|
-
);
|
|
251
|
-
const tree = renderer.create(example).toJSON();
|
|
252
|
-
expect(tree).toMatchSnapshot();
|
|
253
|
-
});
|
|
254
|
-
|
|
255
|
-
it("example 5", () => {
|
|
256
|
-
const styles = StyleSheet.create({
|
|
257
|
-
example: {
|
|
258
|
-
padding: Spacing.xLarge_32,
|
|
259
|
-
alignItems: "center",
|
|
260
|
-
},
|
|
261
|
-
row: {
|
|
262
|
-
flexDirection: "row",
|
|
263
|
-
justifyContent: "flex-end",
|
|
264
|
-
},
|
|
265
|
-
footer: {
|
|
266
|
-
alignItems: "center",
|
|
267
|
-
flexDirection: "row",
|
|
268
|
-
justifyContent: "space-between",
|
|
269
|
-
width: "100%",
|
|
270
|
-
},
|
|
271
|
-
});
|
|
272
|
-
|
|
273
|
-
class ExerciseModal extends React.Component {
|
|
274
|
-
render() {
|
|
275
|
-
const {
|
|
276
|
-
current,
|
|
277
|
-
handleNextButton,
|
|
278
|
-
handlePrevButton,
|
|
279
|
-
question,
|
|
280
|
-
total,
|
|
281
|
-
} = this.props;
|
|
282
|
-
return (
|
|
283
|
-
<OnePaneDialog
|
|
284
|
-
title="Exercises"
|
|
285
|
-
content={
|
|
286
|
-
<View>
|
|
287
|
-
<Body>
|
|
288
|
-
This is the current question: {question}
|
|
289
|
-
</Body>
|
|
290
|
-
</View>
|
|
291
|
-
}
|
|
292
|
-
footer={
|
|
293
|
-
<View style={styles.footer}>
|
|
294
|
-
<LabelLarge>
|
|
295
|
-
Step {current + 1} of {total}
|
|
296
|
-
</LabelLarge>
|
|
297
|
-
<View style={styles.row}>
|
|
298
|
-
<Button
|
|
299
|
-
kind="tertiary"
|
|
300
|
-
onClick={handlePrevButton}
|
|
301
|
-
>
|
|
302
|
-
Previous
|
|
303
|
-
</Button>
|
|
304
|
-
<Strut size={16} />
|
|
305
|
-
<Button
|
|
306
|
-
kind="primary"
|
|
307
|
-
onClick={handleNextButton}
|
|
308
|
-
>
|
|
309
|
-
Next
|
|
310
|
-
</Button>
|
|
311
|
-
</View>
|
|
312
|
-
</View>
|
|
313
|
-
}
|
|
314
|
-
/>
|
|
315
|
-
);
|
|
316
|
-
}
|
|
317
|
-
}
|
|
318
|
-
|
|
319
|
-
class ExerciseContainer extends React.Component {
|
|
320
|
-
constructor(props) {
|
|
321
|
-
super(props);
|
|
322
|
-
this.state = {
|
|
323
|
-
currentQuestion: 0,
|
|
324
|
-
};
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
handleNextButton() {
|
|
328
|
-
this.setState({
|
|
329
|
-
currentQuestion: Math.min(
|
|
330
|
-
this.state.currentQuestion + 1,
|
|
331
|
-
this.props.questions.length - 1,
|
|
332
|
-
),
|
|
333
|
-
});
|
|
334
|
-
}
|
|
335
|
-
|
|
336
|
-
handlePrevButton() {
|
|
337
|
-
this.setState({
|
|
338
|
-
currentQuestion: Math.max(
|
|
339
|
-
0,
|
|
340
|
-
this.state.currentQuestion - 1,
|
|
341
|
-
),
|
|
342
|
-
});
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
render() {
|
|
346
|
-
return (
|
|
347
|
-
<ModalLauncher
|
|
348
|
-
onClose={() => console.log("you closed the modal")}
|
|
349
|
-
modal={
|
|
350
|
-
<ExerciseModal
|
|
351
|
-
question={
|
|
352
|
-
this.props.questions[
|
|
353
|
-
this.state.currentQuestion
|
|
354
|
-
]
|
|
355
|
-
}
|
|
356
|
-
current={this.state.currentQuestion}
|
|
357
|
-
total={this.props.questions.length}
|
|
358
|
-
handlePrevButton={() => this.handlePrevButton()}
|
|
359
|
-
handleNextButton={() => this.handleNextButton()}
|
|
360
|
-
/>
|
|
361
|
-
}
|
|
362
|
-
>
|
|
363
|
-
{({openModal}) => (
|
|
364
|
-
<Button onClick={openModal}>
|
|
365
|
-
Open flexible modal
|
|
366
|
-
</Button>
|
|
367
|
-
)}
|
|
368
|
-
</ModalLauncher>
|
|
369
|
-
);
|
|
370
|
-
}
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
const example = (
|
|
374
|
-
<View style={styles.example}>
|
|
375
|
-
<ExerciseContainer
|
|
376
|
-
questions={[
|
|
377
|
-
"First question",
|
|
378
|
-
"Second question",
|
|
379
|
-
"Last question",
|
|
380
|
-
]}
|
|
381
|
-
/>
|
|
382
|
-
</View>
|
|
383
|
-
);
|
|
384
|
-
const tree = renderer.create(example).toJSON();
|
|
385
|
-
expect(tree).toMatchSnapshot();
|
|
386
|
-
});
|
|
387
|
-
|
|
388
|
-
it("example 6", () => {
|
|
389
|
-
const styles = StyleSheet.create({
|
|
390
|
-
previewSizer: {
|
|
391
|
-
height: 512,
|
|
392
|
-
},
|
|
393
|
-
modalPositioner: {
|
|
394
|
-
// Checkerboard background
|
|
395
|
-
backgroundImage:
|
|
396
|
-
"linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
|
|
397
|
-
backgroundSize: "20px 20px",
|
|
398
|
-
backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
|
|
399
|
-
display: "flex",
|
|
400
|
-
flexDirection: "row",
|
|
401
|
-
alignItems: "center",
|
|
402
|
-
justifyContent: "center",
|
|
403
|
-
position: "absolute",
|
|
404
|
-
left: 0,
|
|
405
|
-
right: 0,
|
|
406
|
-
top: 0,
|
|
407
|
-
bottom: 0,
|
|
408
|
-
},
|
|
409
|
-
});
|
|
410
|
-
const styleSheets = {
|
|
411
|
-
mdOrLarger: StyleSheet.create({
|
|
412
|
-
customModal: {
|
|
413
|
-
maxWidth: 300,
|
|
414
|
-
maxHeight: 200,
|
|
415
|
-
},
|
|
416
|
-
below: {
|
|
417
|
-
background: "url(/blue-blob.png)",
|
|
418
|
-
backgroundSize: "cover",
|
|
419
|
-
width: 294,
|
|
420
|
-
height: 306,
|
|
421
|
-
position: "absolute",
|
|
422
|
-
top: 0,
|
|
423
|
-
left: -60,
|
|
424
|
-
},
|
|
425
|
-
above: {
|
|
426
|
-
background: "url(/asteroid.png)",
|
|
427
|
-
backgroundSize: "cover",
|
|
428
|
-
width: 418,
|
|
429
|
-
height: 260,
|
|
430
|
-
position: "absolute",
|
|
431
|
-
top: -10,
|
|
432
|
-
left: -5,
|
|
433
|
-
},
|
|
434
|
-
}),
|
|
435
|
-
};
|
|
436
|
-
const example = (
|
|
437
|
-
<View style={styles.previewSizer}>
|
|
438
|
-
<View style={styles.modalPositioner}>
|
|
439
|
-
<MediaLayout styleSheets={styleSheets}>
|
|
440
|
-
{({styles}) => (
|
|
441
|
-
<OnePaneDialog
|
|
442
|
-
style={styles.customModal}
|
|
443
|
-
title="Single-line title"
|
|
444
|
-
content={
|
|
445
|
-
<View>
|
|
446
|
-
<Body>Hello World!</Body>
|
|
447
|
-
</View>
|
|
448
|
-
}
|
|
449
|
-
onClose={() =>
|
|
450
|
-
alert("This would close the modal.")
|
|
451
|
-
}
|
|
452
|
-
below={<View style={styles.below} />}
|
|
453
|
-
above={<View style={styles.above} />}
|
|
454
|
-
/>
|
|
455
|
-
)}
|
|
456
|
-
</MediaLayout>
|
|
457
|
-
</View>
|
|
458
|
-
</View>
|
|
459
|
-
);
|
|
460
|
-
const tree = renderer.create(example).toJSON();
|
|
461
|
-
expect(tree).toMatchSnapshot();
|
|
462
|
-
});
|
|
463
|
-
|
|
464
|
-
it("example 7", () => {
|
|
465
|
-
const styles = StyleSheet.create({
|
|
466
|
-
previewSizer: {
|
|
467
|
-
height: 512,
|
|
468
|
-
},
|
|
469
|
-
modalPositioner: {
|
|
470
|
-
// Checkerboard background
|
|
471
|
-
backgroundImage:
|
|
472
|
-
"linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
|
|
473
|
-
backgroundSize: "20px 20px",
|
|
474
|
-
backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
|
|
475
|
-
flexDirection: "row",
|
|
476
|
-
alignItems: "center",
|
|
477
|
-
justifyContent: "center",
|
|
478
|
-
position: "absolute",
|
|
479
|
-
left: 0,
|
|
480
|
-
right: 0,
|
|
481
|
-
top: 0,
|
|
482
|
-
bottom: 0,
|
|
483
|
-
},
|
|
484
|
-
modalContent: {
|
|
485
|
-
margin: "0 auto",
|
|
486
|
-
maxWidth: 544,
|
|
487
|
-
},
|
|
488
|
-
above: {
|
|
489
|
-
background: "url(/modal-above.png)",
|
|
490
|
-
backgroundSize: "cover",
|
|
491
|
-
width: 787,
|
|
492
|
-
height: 496,
|
|
493
|
-
position: "absolute",
|
|
494
|
-
top: -20,
|
|
495
|
-
left: -100,
|
|
496
|
-
},
|
|
497
|
-
});
|
|
498
|
-
const example = (
|
|
499
|
-
<View style={styles.previewSizer}>
|
|
500
|
-
<View style={styles.modalPositioner}>
|
|
501
|
-
<OnePaneDialog
|
|
502
|
-
title="Single-line title"
|
|
503
|
-
subtitle="Subtitle that provides additional context to the title"
|
|
504
|
-
testId="one-pane-dialog-above"
|
|
505
|
-
content={
|
|
506
|
-
<View style={styles.modalContent}>
|
|
507
|
-
<Body>
|
|
508
|
-
{
|
|
509
|
-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."
|
|
510
|
-
}
|
|
511
|
-
</Body>
|
|
512
|
-
<Body>
|
|
513
|
-
{
|
|
514
|
-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."
|
|
515
|
-
}
|
|
516
|
-
</Body>
|
|
517
|
-
<Body>
|
|
518
|
-
{
|
|
519
|
-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."
|
|
520
|
-
}
|
|
521
|
-
</Body>
|
|
522
|
-
</View>
|
|
523
|
-
}
|
|
524
|
-
footer={<Button type="button">Button (no-op)</Button>}
|
|
525
|
-
showCloseButton={false}
|
|
526
|
-
onClose={() => alert("This would close the modal.")}
|
|
527
|
-
above={<View style={styles.above} />}
|
|
528
|
-
/>
|
|
529
|
-
</View>
|
|
530
|
-
</View>
|
|
531
|
-
);
|
|
532
|
-
const tree = renderer.create(example).toJSON();
|
|
533
|
-
expect(tree).toMatchSnapshot();
|
|
534
|
-
});
|
|
535
|
-
|
|
536
|
-
it("example 8", () => {
|
|
537
|
-
const styles = StyleSheet.create({
|
|
538
|
-
previewSizer: {
|
|
539
|
-
height: 512,
|
|
540
|
-
},
|
|
541
|
-
modalPositioner: {
|
|
542
|
-
// Checkerboard background
|
|
543
|
-
backgroundImage:
|
|
544
|
-
"linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
|
|
545
|
-
backgroundSize: "20px 20px",
|
|
546
|
-
backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
|
|
547
|
-
flexDirection: "row",
|
|
548
|
-
alignItems: "center",
|
|
549
|
-
justifyContent: "center",
|
|
550
|
-
position: "absolute",
|
|
551
|
-
left: 0,
|
|
552
|
-
right: 0,
|
|
553
|
-
top: 0,
|
|
554
|
-
bottom: 0,
|
|
555
|
-
},
|
|
556
|
-
});
|
|
557
|
-
const defaultStyles = StyleSheet.create({
|
|
558
|
-
row: {
|
|
559
|
-
flexDirection: "row",
|
|
560
|
-
justifyContent: "flex-end",
|
|
561
|
-
},
|
|
562
|
-
button: {
|
|
563
|
-
marginRight: Spacing.medium_16,
|
|
564
|
-
},
|
|
565
|
-
});
|
|
566
|
-
const smallStyles = StyleSheet.create({
|
|
567
|
-
row: {
|
|
568
|
-
flexDirection: "column-reverse",
|
|
569
|
-
width: "100%",
|
|
570
|
-
},
|
|
571
|
-
button: {
|
|
572
|
-
marginBottom: Spacing.medium_16,
|
|
573
|
-
},
|
|
574
|
-
});
|
|
575
|
-
const styleSheets = {
|
|
576
|
-
mdOrLarger: defaultStyles,
|
|
577
|
-
small: smallStyles,
|
|
578
|
-
};
|
|
579
|
-
|
|
580
|
-
const Footer = () => (
|
|
581
|
-
<MediaLayout styleSheets={styleSheets}>
|
|
582
|
-
{({styles}) => (
|
|
583
|
-
<View style={styles.row}>
|
|
584
|
-
<Button style={styles.button} kind="tertiary">
|
|
585
|
-
Tertiary action
|
|
586
|
-
</Button>
|
|
587
|
-
<Button style={styles.button} kind="tertiary">
|
|
588
|
-
Secondary action
|
|
589
|
-
</Button>
|
|
590
|
-
<Button style={styles.button}>Primary action</Button>
|
|
591
|
-
</View>
|
|
592
|
-
)}
|
|
593
|
-
</MediaLayout>
|
|
594
|
-
);
|
|
595
|
-
|
|
596
|
-
const example = (
|
|
597
|
-
<View style={styles.previewSizer}>
|
|
598
|
-
<View style={styles.modalPositioner}>
|
|
599
|
-
<OnePaneDialog
|
|
600
|
-
title="Multi-line title that wraps to show how this component adjusts with longer content"
|
|
601
|
-
breadcrumbs={
|
|
602
|
-
<Breadcrumbs>
|
|
603
|
-
<BreadcrumbsItem>Bread</BreadcrumbsItem>
|
|
604
|
-
<BreadcrumbsItem>Crumb</BreadcrumbsItem>
|
|
605
|
-
<BreadcrumbsItem>Trail</BreadcrumbsItem>
|
|
606
|
-
</Breadcrumbs>
|
|
607
|
-
}
|
|
608
|
-
content={
|
|
609
|
-
<View>
|
|
610
|
-
<Body>
|
|
611
|
-
{
|
|
612
|
-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."
|
|
613
|
-
}
|
|
614
|
-
</Body>
|
|
615
|
-
</View>
|
|
616
|
-
}
|
|
617
|
-
footer={<Footer />}
|
|
618
|
-
onClose={() => alert("This would close the modal.")}
|
|
619
|
-
/>
|
|
620
|
-
</View>
|
|
621
|
-
</View>
|
|
622
|
-
);
|
|
623
|
-
const tree = renderer.create(example).toJSON();
|
|
624
|
-
expect(tree).toMatchSnapshot();
|
|
625
|
-
});
|
|
626
|
-
|
|
627
|
-
it("example 9", () => {
|
|
628
|
-
const exampleStyles = StyleSheet.create({
|
|
629
|
-
previewSizer: {
|
|
630
|
-
height: 512,
|
|
631
|
-
},
|
|
632
|
-
modalPositioner: {
|
|
633
|
-
// Checkerboard background
|
|
634
|
-
backgroundImage:
|
|
635
|
-
"linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
|
|
636
|
-
backgroundSize: "20px 20px",
|
|
637
|
-
backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
|
|
638
|
-
flexDirection: "row",
|
|
639
|
-
alignItems: "center",
|
|
640
|
-
justifyContent: "center",
|
|
641
|
-
position: "absolute",
|
|
642
|
-
left: 0,
|
|
643
|
-
right: 0,
|
|
644
|
-
top: 0,
|
|
645
|
-
bottom: 0,
|
|
646
|
-
},
|
|
647
|
-
});
|
|
648
|
-
const styles = StyleSheet.create({
|
|
649
|
-
row: {
|
|
650
|
-
flexDirection: "row",
|
|
651
|
-
justifyContent: "flex-end",
|
|
652
|
-
},
|
|
653
|
-
footer: {
|
|
654
|
-
alignItems: "center",
|
|
655
|
-
flexDirection: "row",
|
|
656
|
-
justifyContent: "space-between",
|
|
657
|
-
width: "100%",
|
|
658
|
-
},
|
|
659
|
-
});
|
|
660
|
-
const example = (
|
|
661
|
-
<View style={exampleStyles.previewSizer}>
|
|
662
|
-
<View style={exampleStyles.modalPositioner}>
|
|
663
|
-
<OnePaneDialog
|
|
664
|
-
title="Dialog with multi-step footer"
|
|
665
|
-
content={
|
|
666
|
-
<View>
|
|
667
|
-
<Body>
|
|
668
|
-
{
|
|
669
|
-
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est."
|
|
670
|
-
}
|
|
671
|
-
</Body>
|
|
672
|
-
</View>
|
|
673
|
-
}
|
|
674
|
-
footer={
|
|
675
|
-
<View style={styles.footer}>
|
|
676
|
-
<LabelLarge>Step 1 of 4</LabelLarge>
|
|
677
|
-
<View style={styles.row}>
|
|
678
|
-
<Button kind="tertiary">Previous</Button>
|
|
679
|
-
<Strut size={16} />
|
|
680
|
-
<Button kind="primary">Next</Button>
|
|
681
|
-
</View>
|
|
682
|
-
</View>
|
|
683
|
-
}
|
|
684
|
-
/>
|
|
685
|
-
</View>
|
|
686
|
-
</View>
|
|
687
|
-
);
|
|
688
|
-
const tree = renderer.create(example).toJSON();
|
|
689
|
-
expect(tree).toMatchSnapshot();
|
|
690
|
-
});
|
|
691
|
-
|
|
692
|
-
it("example 10", () => {
|
|
693
|
-
const {StyleSheet} = require("aphrodite");
|
|
694
|
-
|
|
695
|
-
const {
|
|
696
|
-
ModalDialog,
|
|
697
|
-
ModalPanel,
|
|
698
|
-
} = require("@khanacademy/wonder-blocks-modal");
|
|
699
|
-
|
|
700
|
-
const {View} = require("@khanacademy/wonder-blocks-core");
|
|
701
|
-
|
|
702
|
-
const Button = require("@khanacademy/wonder-blocks-button").default;
|
|
703
|
-
|
|
704
|
-
const {Title, Body} = require("@khanacademy/wonder-blocks-typography");
|
|
705
|
-
|
|
706
|
-
const {
|
|
707
|
-
MediaLayout,
|
|
708
|
-
Strut,
|
|
709
|
-
} = require("@khanacademy/wonder-blocks-layout");
|
|
710
|
-
|
|
711
|
-
const styles = StyleSheet.create({
|
|
712
|
-
previewSizer: {
|
|
713
|
-
height: 512,
|
|
714
|
-
},
|
|
715
|
-
modalPositioner: {
|
|
716
|
-
// Checkerboard background
|
|
717
|
-
backgroundImage:
|
|
718
|
-
"linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)",
|
|
719
|
-
backgroundSize: "20px 20px",
|
|
720
|
-
backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
|
|
721
|
-
display: "flex",
|
|
722
|
-
flexDirection: "row",
|
|
723
|
-
alignItems: "center",
|
|
724
|
-
justifyContent: "center",
|
|
725
|
-
position: "absolute",
|
|
726
|
-
left: 0,
|
|
727
|
-
right: 0,
|
|
728
|
-
top: 0,
|
|
729
|
-
bottom: 0,
|
|
730
|
-
},
|
|
731
|
-
});
|
|
732
|
-
const styleSheets = {
|
|
733
|
-
mdOrLarger: StyleSheet.create({
|
|
734
|
-
dialog: {
|
|
735
|
-
width: "86.72%",
|
|
736
|
-
maxWidth: 888,
|
|
737
|
-
height: "60.42%",
|
|
738
|
-
minHeight: 308,
|
|
739
|
-
},
|
|
740
|
-
panelGroup: {
|
|
741
|
-
flexDirection: "row",
|
|
742
|
-
flex: 1,
|
|
743
|
-
},
|
|
744
|
-
below: {
|
|
745
|
-
background: "url(/blue-blob.png)",
|
|
746
|
-
backgroundSize: "cover",
|
|
747
|
-
width: 294,
|
|
748
|
-
height: 306,
|
|
749
|
-
position: "absolute",
|
|
750
|
-
top: 100,
|
|
751
|
-
left: -60,
|
|
752
|
-
},
|
|
753
|
-
above: {
|
|
754
|
-
background: "url(/asteroid.png)",
|
|
755
|
-
backgroundSize: "cover",
|
|
756
|
-
width: 650,
|
|
757
|
-
height: 400,
|
|
758
|
-
position: "absolute",
|
|
759
|
-
top: -35,
|
|
760
|
-
left: 50,
|
|
761
|
-
},
|
|
762
|
-
}),
|
|
763
|
-
small: StyleSheet.create({
|
|
764
|
-
dialog: {
|
|
765
|
-
width: "100%",
|
|
766
|
-
height: "100%",
|
|
767
|
-
overflow: "hidden",
|
|
768
|
-
},
|
|
769
|
-
panelGroup: {
|
|
770
|
-
flexDirection: "column",
|
|
771
|
-
flex: 1,
|
|
772
|
-
},
|
|
773
|
-
}),
|
|
774
|
-
};
|
|
775
|
-
const example = (
|
|
776
|
-
<View style={styles.previewSizer}>
|
|
777
|
-
<View style={styles.modalPositioner}>
|
|
778
|
-
<MediaLayout styleSheets={styleSheets}>
|
|
779
|
-
{({mediaSize, styles}) => (
|
|
780
|
-
<ModalDialog
|
|
781
|
-
style={styles.dialog}
|
|
782
|
-
below={<View style={styles.below} />}
|
|
783
|
-
above={<View style={styles.above} />}
|
|
784
|
-
>
|
|
785
|
-
<View style={styles.panelGroup}>
|
|
786
|
-
<ModalPanel
|
|
787
|
-
onClose={() =>
|
|
788
|
-
alert("This would close the modal.")
|
|
789
|
-
}
|
|
790
|
-
content={
|
|
791
|
-
<View>
|
|
792
|
-
<Title style={styles.title}>
|
|
793
|
-
Sidebar
|
|
794
|
-
</Title>
|
|
795
|
-
<Body>
|
|
796
|
-
Lorem ipsum dolor sit amet,
|
|
797
|
-
consectetur adipiscing elit,
|
|
798
|
-
sed do eiusmod tempor
|
|
799
|
-
incididunt ut labore et
|
|
800
|
-
dolore magna aliqua. Ut enim
|
|
801
|
-
ad minim veniam, quis
|
|
802
|
-
nostrud exercitation ullamco
|
|
803
|
-
laboris.
|
|
804
|
-
</Body>
|
|
805
|
-
</View>
|
|
806
|
-
}
|
|
807
|
-
light={false}
|
|
808
|
-
closeButtonVisible={
|
|
809
|
-
mediaSize === "small"
|
|
810
|
-
}
|
|
811
|
-
/>
|
|
812
|
-
<ModalPanel
|
|
813
|
-
onClose={() =>
|
|
814
|
-
alert("This would close the modal.")
|
|
815
|
-
}
|
|
816
|
-
content={
|
|
817
|
-
<View>
|
|
818
|
-
<Title style={styles.title}>
|
|
819
|
-
Contents
|
|
820
|
-
</Title>
|
|
821
|
-
<Body>
|
|
822
|
-
Lorem ipsum dolor sit amet,
|
|
823
|
-
consectetur adipiscing elit,
|
|
824
|
-
sed do eiusmod tempor
|
|
825
|
-
incididunt ut labore et
|
|
826
|
-
dolore magna aliqua.
|
|
827
|
-
</Body>
|
|
828
|
-
<Strut size={16} />
|
|
829
|
-
<Button>Primary action</Button>
|
|
830
|
-
</View>
|
|
831
|
-
}
|
|
832
|
-
closeButtonVisible={
|
|
833
|
-
mediaSize !== "small"
|
|
834
|
-
}
|
|
835
|
-
/>
|
|
836
|
-
</View>
|
|
837
|
-
</ModalDialog>
|
|
838
|
-
)}
|
|
839
|
-
</MediaLayout>
|
|
840
|
-
</View>
|
|
841
|
-
</View>
|
|
842
|
-
);
|
|
843
|
-
const tree = renderer.create(example).toJSON();
|
|
844
|
-
expect(tree).toMatchSnapshot();
|
|
845
|
-
});
|
|
846
|
-
});
|