@khanacademy/wonder-blocks-modal 2.3.6 → 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 +21 -0
- package/docs.md +4 -491
- package/package.json +8 -8
- 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
package/building-blocks.md
DELETED
|
@@ -1,136 +0,0 @@
|
|
|
1
|
-
Use these low-level building blocks to build your own modal dialog, instead of using OnePaneDialog. This should happen very rarely and only when a specific exception is required.
|
|
2
|
-
|
|
3
|
-
### Example: Custom Two-Pane Dialog
|
|
4
|
-
|
|
5
|
-
```js
|
|
6
|
-
const {StyleSheet} = require("aphrodite");
|
|
7
|
-
|
|
8
|
-
const {ModalDialog, ModalPanel} = require("@khanacademy/wonder-blocks-modal");
|
|
9
|
-
const {View} = require("@khanacademy/wonder-blocks-core");
|
|
10
|
-
const Button = require("@khanacademy/wonder-blocks-button").default;
|
|
11
|
-
const {Title, Body} = require("@khanacademy/wonder-blocks-typography");
|
|
12
|
-
const {MediaLayout, Strut} = require("@khanacademy/wonder-blocks-layout");
|
|
13
|
-
|
|
14
|
-
const styles = StyleSheet.create({
|
|
15
|
-
previewSizer: {
|
|
16
|
-
height: 512,
|
|
17
|
-
},
|
|
18
|
-
|
|
19
|
-
modalPositioner: {
|
|
20
|
-
// Checkerboard background
|
|
21
|
-
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%)",
|
|
22
|
-
backgroundSize: "20px 20px",
|
|
23
|
-
backgroundPosition: "0 0, 0 10px, 10px -10px, -10px 0px",
|
|
24
|
-
|
|
25
|
-
display: "flex",
|
|
26
|
-
flexDirection: "row",
|
|
27
|
-
alignItems: "center",
|
|
28
|
-
justifyContent: "center",
|
|
29
|
-
|
|
30
|
-
position: "absolute",
|
|
31
|
-
left: 0,
|
|
32
|
-
right: 0,
|
|
33
|
-
top: 0,
|
|
34
|
-
bottom: 0,
|
|
35
|
-
},
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
const styleSheets = {
|
|
39
|
-
mdOrLarger: StyleSheet.create({
|
|
40
|
-
dialog: {
|
|
41
|
-
width: "86.72%",
|
|
42
|
-
maxWidth: 888,
|
|
43
|
-
height: "60.42%",
|
|
44
|
-
minHeight: 308,
|
|
45
|
-
},
|
|
46
|
-
|
|
47
|
-
panelGroup: {
|
|
48
|
-
flexDirection: "row",
|
|
49
|
-
flex: 1,
|
|
50
|
-
},
|
|
51
|
-
|
|
52
|
-
below: {
|
|
53
|
-
background: "url(/blue-blob.png)",
|
|
54
|
-
backgroundSize: "cover",
|
|
55
|
-
width: 294,
|
|
56
|
-
height: 306,
|
|
57
|
-
position: "absolute",
|
|
58
|
-
top: 100,
|
|
59
|
-
left: -60
|
|
60
|
-
},
|
|
61
|
-
|
|
62
|
-
above: {
|
|
63
|
-
background: "url(/asteroid.png)",
|
|
64
|
-
backgroundSize: "cover",
|
|
65
|
-
width: 650,
|
|
66
|
-
height: 400,
|
|
67
|
-
position: "absolute",
|
|
68
|
-
top: -35,
|
|
69
|
-
left: 50
|
|
70
|
-
},
|
|
71
|
-
}),
|
|
72
|
-
|
|
73
|
-
small: StyleSheet.create({
|
|
74
|
-
dialog: {
|
|
75
|
-
width: "100%",
|
|
76
|
-
height: "100%",
|
|
77
|
-
overflow: "hidden",
|
|
78
|
-
},
|
|
79
|
-
|
|
80
|
-
panelGroup: {
|
|
81
|
-
flexDirection: "column",
|
|
82
|
-
flex: 1
|
|
83
|
-
}
|
|
84
|
-
})
|
|
85
|
-
};
|
|
86
|
-
|
|
87
|
-
<View style={styles.previewSizer}>
|
|
88
|
-
<View style={styles.modalPositioner}>
|
|
89
|
-
<MediaLayout styleSheets={styleSheets}>
|
|
90
|
-
{({mediaSize, styles}) => (
|
|
91
|
-
<ModalDialog
|
|
92
|
-
style={styles.dialog}
|
|
93
|
-
below={<View style={styles.below} />}
|
|
94
|
-
above={<View style={styles.above} />}
|
|
95
|
-
>
|
|
96
|
-
<View style={styles.panelGroup}>
|
|
97
|
-
<ModalPanel
|
|
98
|
-
onClose={() => alert("This would close the modal.")}
|
|
99
|
-
content={
|
|
100
|
-
<View>
|
|
101
|
-
<Title style={styles.title}>Sidebar</Title>
|
|
102
|
-
<Body>
|
|
103
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
104
|
-
sed do eiusmod tempor incididunt ut labore et dolore
|
|
105
|
-
magna aliqua. Ut enim ad minim veniam, quis nostrud
|
|
106
|
-
exercitation ullamco laboris.
|
|
107
|
-
</Body>
|
|
108
|
-
</View>
|
|
109
|
-
}
|
|
110
|
-
light={false}
|
|
111
|
-
closeButtonVisible={mediaSize === "small"}
|
|
112
|
-
/>
|
|
113
|
-
<ModalPanel
|
|
114
|
-
onClose={() => alert("This would close the modal.")}
|
|
115
|
-
content={
|
|
116
|
-
<View>
|
|
117
|
-
<Title style={styles.title}>Contents</Title>
|
|
118
|
-
<Body>
|
|
119
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
120
|
-
sed do eiusmod tempor incididunt ut labore et dolore
|
|
121
|
-
magna aliqua.
|
|
122
|
-
</Body>
|
|
123
|
-
<Strut size={16} />
|
|
124
|
-
<Button>Primary action</Button>
|
|
125
|
-
</View>
|
|
126
|
-
}
|
|
127
|
-
closeButtonVisible={mediaSize !== "small"}
|
|
128
|
-
/>
|
|
129
|
-
</View>
|
|
130
|
-
</ModalDialog>
|
|
131
|
-
)}
|
|
132
|
-
</MediaLayout>
|
|
133
|
-
</View>
|
|
134
|
-
</View>;
|
|
135
|
-
```
|
|
136
|
-
|