@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
|
File without changes
|
|
@@ -1,250 +0,0 @@
|
|
|
1
|
-
### Example: OnePaneDialog with above container
|
|
2
|
-
|
|
3
|
-
```js
|
|
4
|
-
import {StyleSheet} from "aphrodite";
|
|
5
|
-
import {View} from "@khanacademy/wonder-blocks-core";
|
|
6
|
-
import {Body} from "@khanacademy/wonder-blocks-typography";
|
|
7
|
-
import Button from "@khanacademy/wonder-blocks-button";
|
|
8
|
-
|
|
9
|
-
const styles = StyleSheet.create({
|
|
10
|
-
previewSizer: {
|
|
11
|
-
height: 512,
|
|
12
|
-
},
|
|
13
|
-
|
|
14
|
-
modalPositioner: {
|
|
15
|
-
// Checkerboard background
|
|
16
|
-
backgroundImage: "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%)",
|
|
17
|
-
backgroundSize: "20px 20px",
|
|
18
|
-
backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
|
|
19
|
-
|
|
20
|
-
flexDirection: "row",
|
|
21
|
-
alignItems: "center",
|
|
22
|
-
justifyContent: "center",
|
|
23
|
-
|
|
24
|
-
position: "absolute",
|
|
25
|
-
left: 0,
|
|
26
|
-
right: 0,
|
|
27
|
-
top: 0,
|
|
28
|
-
bottom: 0,
|
|
29
|
-
},
|
|
30
|
-
|
|
31
|
-
modalContent: {
|
|
32
|
-
margin: "0 auto",
|
|
33
|
-
maxWidth: 544,
|
|
34
|
-
},
|
|
35
|
-
|
|
36
|
-
above: {
|
|
37
|
-
background: "url(/modal-above.png)",
|
|
38
|
-
backgroundSize: "cover",
|
|
39
|
-
width: 787,
|
|
40
|
-
height: 496,
|
|
41
|
-
position: "absolute",
|
|
42
|
-
top: -20,
|
|
43
|
-
left: -100
|
|
44
|
-
},
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
<View style={styles.previewSizer}>
|
|
48
|
-
<View style={styles.modalPositioner}>
|
|
49
|
-
<OnePaneDialog
|
|
50
|
-
title="Single-line title"
|
|
51
|
-
subtitle="Subtitle that provides additional context to the title"
|
|
52
|
-
testId="one-pane-dialog-above"
|
|
53
|
-
content={
|
|
54
|
-
<View style={styles.modalContent}>
|
|
55
|
-
<Body>
|
|
56
|
-
{"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."}
|
|
57
|
-
</Body>
|
|
58
|
-
<Body>
|
|
59
|
-
{"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."}
|
|
60
|
-
</Body>
|
|
61
|
-
<Body>
|
|
62
|
-
{"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."}
|
|
63
|
-
</Body>
|
|
64
|
-
</View>
|
|
65
|
-
}
|
|
66
|
-
footer={<Button type="button">Button (no-op)</Button>}
|
|
67
|
-
showCloseButton={false}
|
|
68
|
-
onClose={() => alert("This would close the modal.")}
|
|
69
|
-
above={<View style={styles.above} />}
|
|
70
|
-
/>
|
|
71
|
-
</View>
|
|
72
|
-
</View>;
|
|
73
|
-
```
|
|
74
|
-
|
|
75
|
-
### Example: Custom Footer (3 actions)
|
|
76
|
-
|
|
77
|
-
This component is fully responsive, try it by resizing the window.
|
|
78
|
-
|
|
79
|
-
```js
|
|
80
|
-
import {StyleSheet} from "aphrodite";
|
|
81
|
-
import {View} from "@khanacademy/wonder-blocks-core";
|
|
82
|
-
import {Body} from "@khanacademy/wonder-blocks-typography";
|
|
83
|
-
import Button from "@khanacademy/wonder-blocks-button";
|
|
84
|
-
import Spacing from "@khanacademy/wonder-blocks-spacing";
|
|
85
|
-
import {Breadcrumbs, BreadcrumbsItem} from "@khanacademy/wonder-blocks-breadcrumbs";
|
|
86
|
-
import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
|
|
87
|
-
|
|
88
|
-
const styles = StyleSheet.create({
|
|
89
|
-
previewSizer: {
|
|
90
|
-
height: 512,
|
|
91
|
-
},
|
|
92
|
-
|
|
93
|
-
modalPositioner: {
|
|
94
|
-
// Checkerboard background
|
|
95
|
-
backgroundImage: "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%)",
|
|
96
|
-
backgroundSize: "20px 20px",
|
|
97
|
-
backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
|
|
98
|
-
|
|
99
|
-
flexDirection: "row",
|
|
100
|
-
alignItems: "center",
|
|
101
|
-
justifyContent: "center",
|
|
102
|
-
|
|
103
|
-
position: "absolute",
|
|
104
|
-
left: 0,
|
|
105
|
-
right: 0,
|
|
106
|
-
top: 0,
|
|
107
|
-
bottom: 0,
|
|
108
|
-
},
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
const defaultStyles = StyleSheet.create({
|
|
112
|
-
row: {
|
|
113
|
-
flexDirection: "row",
|
|
114
|
-
justifyContent: "flex-end"
|
|
115
|
-
},
|
|
116
|
-
button: {
|
|
117
|
-
marginRight: Spacing.medium_16
|
|
118
|
-
}
|
|
119
|
-
});
|
|
120
|
-
|
|
121
|
-
const smallStyles = StyleSheet.create({
|
|
122
|
-
row: {
|
|
123
|
-
flexDirection: "column-reverse",
|
|
124
|
-
width: "100%"
|
|
125
|
-
},
|
|
126
|
-
button: {
|
|
127
|
-
marginBottom: Spacing.medium_16
|
|
128
|
-
}
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
const styleSheets = {
|
|
132
|
-
mdOrLarger: defaultStyles,
|
|
133
|
-
small: smallStyles
|
|
134
|
-
};
|
|
135
|
-
|
|
136
|
-
const Footer = () => (
|
|
137
|
-
<MediaLayout styleSheets={styleSheets}>
|
|
138
|
-
{({ styles }) => (
|
|
139
|
-
<View style={styles.row}>
|
|
140
|
-
<Button style={styles.button} kind="tertiary">
|
|
141
|
-
Tertiary action
|
|
142
|
-
</Button>
|
|
143
|
-
<Button style={styles.button} kind="tertiary">
|
|
144
|
-
Secondary action
|
|
145
|
-
</Button>
|
|
146
|
-
<Button style={styles.button}>Primary action</Button>
|
|
147
|
-
</View>
|
|
148
|
-
)}
|
|
149
|
-
</MediaLayout>
|
|
150
|
-
);
|
|
151
|
-
|
|
152
|
-
<View style={styles.previewSizer}>
|
|
153
|
-
<View style={styles.modalPositioner}>
|
|
154
|
-
<OnePaneDialog
|
|
155
|
-
title="Multi-line title that wraps to show how this component adjusts with longer content"
|
|
156
|
-
breadcrumbs={
|
|
157
|
-
<Breadcrumbs>
|
|
158
|
-
<BreadcrumbsItem>
|
|
159
|
-
Bread
|
|
160
|
-
</BreadcrumbsItem>
|
|
161
|
-
<BreadcrumbsItem>
|
|
162
|
-
Crumb
|
|
163
|
-
</BreadcrumbsItem>
|
|
164
|
-
<BreadcrumbsItem>Trail</BreadcrumbsItem>
|
|
165
|
-
</Breadcrumbs>
|
|
166
|
-
}
|
|
167
|
-
content={
|
|
168
|
-
<View>
|
|
169
|
-
<Body>
|
|
170
|
-
{"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."}
|
|
171
|
-
</Body>
|
|
172
|
-
</View>
|
|
173
|
-
}
|
|
174
|
-
footer={<Footer />}
|
|
175
|
-
onClose={() => alert("This would close the modal.")}
|
|
176
|
-
/>
|
|
177
|
-
</View>
|
|
178
|
-
</View>;
|
|
179
|
-
```
|
|
180
|
-
|
|
181
|
-
### Example: Multi-step flows
|
|
182
|
-
|
|
183
|
-
```js
|
|
184
|
-
import {StyleSheet} from "aphrodite";
|
|
185
|
-
import {View} from "@khanacademy/wonder-blocks-core";
|
|
186
|
-
import {Body, LabelLarge} from "@khanacademy/wonder-blocks-typography";
|
|
187
|
-
import {MediaLayout, Strut} from "@khanacademy/wonder-blocks-layout";
|
|
188
|
-
import Button from "@khanacademy/wonder-blocks-button";
|
|
189
|
-
|
|
190
|
-
const exampleStyles = StyleSheet.create({
|
|
191
|
-
previewSizer: {
|
|
192
|
-
height: 512,
|
|
193
|
-
},
|
|
194
|
-
|
|
195
|
-
modalPositioner: {
|
|
196
|
-
// Checkerboard background
|
|
197
|
-
backgroundImage: "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%)",
|
|
198
|
-
backgroundSize: "20px 20px",
|
|
199
|
-
backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
|
|
200
|
-
|
|
201
|
-
flexDirection: "row",
|
|
202
|
-
alignItems: "center",
|
|
203
|
-
justifyContent: "center",
|
|
204
|
-
|
|
205
|
-
position: "absolute",
|
|
206
|
-
left: 0,
|
|
207
|
-
right: 0,
|
|
208
|
-
top: 0,
|
|
209
|
-
bottom: 0,
|
|
210
|
-
},
|
|
211
|
-
});
|
|
212
|
-
|
|
213
|
-
const styles = StyleSheet.create({
|
|
214
|
-
row: {
|
|
215
|
-
flexDirection: "row",
|
|
216
|
-
justifyContent: "flex-end"
|
|
217
|
-
},
|
|
218
|
-
footer: {
|
|
219
|
-
alignItems: "center",
|
|
220
|
-
flexDirection: "row",
|
|
221
|
-
justifyContent: "space-between",
|
|
222
|
-
width: "100%"
|
|
223
|
-
}
|
|
224
|
-
});
|
|
225
|
-
|
|
226
|
-
<View style={exampleStyles.previewSizer}>
|
|
227
|
-
<View style={exampleStyles.modalPositioner}>
|
|
228
|
-
<OnePaneDialog
|
|
229
|
-
title="Dialog with multi-step footer"
|
|
230
|
-
content={
|
|
231
|
-
<View>
|
|
232
|
-
<Body>
|
|
233
|
-
{"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."}
|
|
234
|
-
</Body>
|
|
235
|
-
</View>
|
|
236
|
-
}
|
|
237
|
-
footer={
|
|
238
|
-
<View style={styles.footer}>
|
|
239
|
-
<LabelLarge>Step 1 of 4</LabelLarge>
|
|
240
|
-
<View style={styles.row}>
|
|
241
|
-
<Button kind="tertiary">Previous</Button>
|
|
242
|
-
<Strut size={16} />
|
|
243
|
-
<Button kind="primary">Next</Button>
|
|
244
|
-
</View>
|
|
245
|
-
</View>
|
|
246
|
-
}
|
|
247
|
-
/>
|
|
248
|
-
</View>
|
|
249
|
-
</View>;
|
|
250
|
-
```
|