@khanacademy/wonder-blocks-grid 1.0.24
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 +276 -0
- package/dist/index.js +787 -0
- package/dist/index.js.flow +2 -0
- package/docs.md +260 -0
- package/package.json +31 -0
- package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +2247 -0
- package/src/__tests__/generated-snapshot.test.js +559 -0
- package/src/components/__tests__/row.test.js +175 -0
- package/src/components/cell.js +186 -0
- package/src/components/cell.md +58 -0
- package/src/components/gutter.js +59 -0
- package/src/components/row.js +141 -0
- package/src/components/row.md +105 -0
- package/src/index.js +3 -0
- package/src/util/styles.js +29 -0
- package/src/util/utils.js +11 -0
package/docs.md
ADDED
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
The Grid system is a collection of building-block primitives which you can use to construct a predictable layout that works across viewports. A grid will have a number of "columns" in it and individual Cells can span and align to those columns, creating a consistent layout. All of the grid components are meant to be used somewhere within a [MediaLayout](#medialayout) component. [MediaLayout](#medialayout) is designed to be used as a high-level component, holding large portions of the page (likely the entire contents).
|
|
2
|
+
|
|
3
|
+
It's sometimes easiest to see an example of how it works, like in the following demo. Try resizing your browser and see how to layout changes based on the width of the viewport (some columns will change in size, some will disappear entirely).
|
|
4
|
+
|
|
5
|
+
```jsx
|
|
6
|
+
import {Cell, Row} from "@khanacademy/wonder-blocks-grid";
|
|
7
|
+
import Color from "@khanacademy/wonder-blocks-color";
|
|
8
|
+
import {View} from "@khanacademy/wonder-blocks-core";
|
|
9
|
+
import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
|
|
10
|
+
import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
|
|
11
|
+
import {StyleSheet} from "aphrodite";
|
|
12
|
+
|
|
13
|
+
const styleSheets = {
|
|
14
|
+
all: StyleSheet.create({
|
|
15
|
+
background: {
|
|
16
|
+
background: Color.offBlack,
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
cell: {
|
|
20
|
+
height: 150,
|
|
21
|
+
padding: 5,
|
|
22
|
+
},
|
|
23
|
+
}),
|
|
24
|
+
small: StyleSheet.create({
|
|
25
|
+
cell: {
|
|
26
|
+
background: Color.blue,
|
|
27
|
+
},
|
|
28
|
+
}),
|
|
29
|
+
medium: StyleSheet.create({
|
|
30
|
+
cell: {
|
|
31
|
+
background: Color.green,
|
|
32
|
+
},
|
|
33
|
+
}),
|
|
34
|
+
large: StyleSheet.create({
|
|
35
|
+
cell: {
|
|
36
|
+
background: Color.gold,
|
|
37
|
+
},
|
|
38
|
+
}),
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
<MediaLayout styleSheets={styleSheets}>
|
|
42
|
+
{({styles}) => <View style={styles.background}>
|
|
43
|
+
<Row>
|
|
44
|
+
<Cell smallCols={2} mediumCols={3} largeCols={4} style={styles.cell}>
|
|
45
|
+
{({cols}) => {
|
|
46
|
+
return <View>
|
|
47
|
+
<LabelMedium>
|
|
48
|
+
Cell ({cols === 1
|
|
49
|
+
? "1 column"
|
|
50
|
+
: `${cols} columns`}{" "}
|
|
51
|
+
wide)
|
|
52
|
+
</LabelMedium>
|
|
53
|
+
<br />
|
|
54
|
+
<br />
|
|
55
|
+
<View style={{textAlign: "right"}}>
|
|
56
|
+
<LabelMedium>Gutter ⇢</LabelMedium>
|
|
57
|
+
</View>
|
|
58
|
+
<br />
|
|
59
|
+
<View style={{textAlign: "left"}}>
|
|
60
|
+
<LabelMedium>Margin ⇢</LabelMedium>
|
|
61
|
+
</View>
|
|
62
|
+
</View>;
|
|
63
|
+
}}
|
|
64
|
+
</Cell>
|
|
65
|
+
<Cell mediumCols={2} largeCols={3} style={styles.cell}>
|
|
66
|
+
{({cols}) => {
|
|
67
|
+
return <View>
|
|
68
|
+
<LabelMedium>
|
|
69
|
+
Cell ({cols === 1
|
|
70
|
+
? "1 column"
|
|
71
|
+
: `${cols} columns`}{" "}
|
|
72
|
+
wide)
|
|
73
|
+
</LabelMedium>
|
|
74
|
+
<br />
|
|
75
|
+
<br />
|
|
76
|
+
<View style={{textAlign: "center"}}>
|
|
77
|
+
<LabelMedium>⇠ Gutters ⇢</LabelMedium>
|
|
78
|
+
</View>
|
|
79
|
+
</View>;
|
|
80
|
+
}}
|
|
81
|
+
</Cell>
|
|
82
|
+
<Cell smallCols={2} mediumCols={3} largeCols={5} style={styles.cell}>
|
|
83
|
+
{({cols}) => {
|
|
84
|
+
return (
|
|
85
|
+
<View>
|
|
86
|
+
<LabelMedium>
|
|
87
|
+
Cell ({cols === 1
|
|
88
|
+
? "1 column"
|
|
89
|
+
: `${cols} columns`}{" "}
|
|
90
|
+
wide)
|
|
91
|
+
</LabelMedium>
|
|
92
|
+
<br />
|
|
93
|
+
<br />
|
|
94
|
+
<LabelMedium>⇠ Gutter</LabelMedium>
|
|
95
|
+
<br />
|
|
96
|
+
<View style={{textAlign: "right"}}>
|
|
97
|
+
<LabelMedium>Margin ⇢</LabelMedium>
|
|
98
|
+
</View>
|
|
99
|
+
</View>
|
|
100
|
+
);
|
|
101
|
+
}}
|
|
102
|
+
</Cell>
|
|
103
|
+
</Row>
|
|
104
|
+
</View>}
|
|
105
|
+
</MediaLayout>;
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
Grids are built using the following components:
|
|
109
|
+
|
|
110
|
+
* [MediaLayout](#medialayout): A MediaLayout wraps all parts of a grid and tracks the browser viewport, toggling the layout of the grid based on viewport width changes. A MediaLayout will likely hold almost the entire contents of the page. Rows can be direct children or distant descendants.
|
|
111
|
+
* [Row](#row): A Row holds all of the Cells that make up the contents of the grid. A row also provides the margins on the sides and inserts the gutter spacing in-between the cells. Typically this component will hold a [Cell](#cell), but it can also include any elements that could fit in a [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox). When the entire row is taken up by a single cell, the `Cell` can be omitted.
|
|
112
|
+
* [Cell](#cell): A Cell is a container whose width is set based on the width of the specified columns at the current grid size. You will specify the number of columns that you want this component to span at each grid size. This component should only be used as a child of a [Row](#row).
|
|
113
|
+
|
|
114
|
+
Currently Grid sizes are defined entirely by the [MediaLayout](#medialayout) component are available at the following sizes (with their columns, gutter size, and margin sizes changing based on the size):
|
|
115
|
+
|
|
116
|
+
* `MEDIA_DEFAULT_SPEC` (the default)
|
|
117
|
+
* `MEDIA_INTERNAL_SPEC` (for internal tools)
|
|
118
|
+
* `MEDIA_MODAL_SPEC` (for all modal dialogs)
|
|
119
|
+
|
|
120
|
+
See the [MediaLayout](#medialayout) component for more details. The layout breakpoints allow for a great level of flexibility in the design, constantly adjusting to the size of the viewport and working across mobile, tablet, and desktop devices. An example of this can be seen in this site mock-up:
|
|
121
|
+
|
|
122
|
+
```jsx
|
|
123
|
+
import {Cell, Row} from "@khanacademy/wonder-blocks-grid";
|
|
124
|
+
import Color from "@khanacademy/wonder-blocks-color";
|
|
125
|
+
import {View, Text} from "@khanacademy/wonder-blocks-core";
|
|
126
|
+
|
|
127
|
+
<View style={{background: Color.offWhite}}>
|
|
128
|
+
<Row
|
|
129
|
+
style={{
|
|
130
|
+
background: Color.darkBlue,
|
|
131
|
+
height: 64,
|
|
132
|
+
borderBottom: `1px solid ${Color.white64}`,
|
|
133
|
+
}}
|
|
134
|
+
>
|
|
135
|
+
<Cell style={{color: Color.white, textAlign: "center"}}>
|
|
136
|
+
Khan Academy
|
|
137
|
+
</Cell>
|
|
138
|
+
</Row>
|
|
139
|
+
<Row
|
|
140
|
+
style={{
|
|
141
|
+
background: Color.darkBlue,
|
|
142
|
+
height: 136,
|
|
143
|
+
}}
|
|
144
|
+
>
|
|
145
|
+
<Cell style={{color: Color.white}}>Geometry foundations</Cell>
|
|
146
|
+
</Row>
|
|
147
|
+
<Row
|
|
148
|
+
mediaQuery="medium"
|
|
149
|
+
style={{
|
|
150
|
+
background: Color.white,
|
|
151
|
+
height: 71,
|
|
152
|
+
borderBottom: `1px solid ${Color.offBlack8}`,
|
|
153
|
+
overflow: "scroll",
|
|
154
|
+
}}
|
|
155
|
+
>
|
|
156
|
+
<Cell cols={2} style={{background: Color.offBlack8}}>
|
|
157
|
+
Possible mastery points
|
|
158
|
+
</Cell>
|
|
159
|
+
<Cell
|
|
160
|
+
smallCols={4}
|
|
161
|
+
mediumCols={6}
|
|
162
|
+
largeCols={10}
|
|
163
|
+
style={{
|
|
164
|
+
background: Color.offBlack8,
|
|
165
|
+
}}
|
|
166
|
+
>
|
|
167
|
+
Beginner / Points to Apprentice
|
|
168
|
+
</Cell>
|
|
169
|
+
</Row>
|
|
170
|
+
<Row
|
|
171
|
+
mediaQuery="large"
|
|
172
|
+
style={{
|
|
173
|
+
background: Color.white,
|
|
174
|
+
height: 71,
|
|
175
|
+
borderBottom: `1px solid ${Color.offBlack8}`,
|
|
176
|
+
}}
|
|
177
|
+
>
|
|
178
|
+
<Cell cols={3}>Possible mastery points</Cell>
|
|
179
|
+
<View>Beginner / Points to Apprentice</View>
|
|
180
|
+
</Row>
|
|
181
|
+
<Row mediaQuery="mdOrSmaller" style={{height: 50}}>
|
|
182
|
+
<Cell smallCols={4} mediumCols={8} largeCols={12}>
|
|
183
|
+
Skill Summary
|
|
184
|
+
</Cell>
|
|
185
|
+
</Row>
|
|
186
|
+
<Row
|
|
187
|
+
mediaQuery="mdOrSmaller"
|
|
188
|
+
style={{
|
|
189
|
+
background: Color.white,
|
|
190
|
+
height: 90,
|
|
191
|
+
borderTop: `1px solid ${Color.offBlack8}`,
|
|
192
|
+
borderBottom: `1px solid ${Color.offBlack8}`,
|
|
193
|
+
}}
|
|
194
|
+
>
|
|
195
|
+
<Cell smallCols={4} mediumCols={8} largeCols={12}>
|
|
196
|
+
Intro to Geometry Angles Quiz 1: 10 questions Polygons
|
|
197
|
+
</Cell>
|
|
198
|
+
</Row>
|
|
199
|
+
<Row mediaQuery="large" style={{padding: "17px 0"}}>
|
|
200
|
+
<Cell cols={3}>
|
|
201
|
+
Skill Summary
|
|
202
|
+
<hr />
|
|
203
|
+
Intro to Geometry
|
|
204
|
+
<hr />
|
|
205
|
+
Angles
|
|
206
|
+
<hr />
|
|
207
|
+
Quiz 1: 10 questions
|
|
208
|
+
<hr />
|
|
209
|
+
Polygons
|
|
210
|
+
</Cell>
|
|
211
|
+
<Cell smallCols={1} mediumCols={5} largeCols={9}>
|
|
212
|
+
<View
|
|
213
|
+
style={{
|
|
214
|
+
background: Color.white,
|
|
215
|
+
height: 360,
|
|
216
|
+
padding: 24,
|
|
217
|
+
border: `1px solid ${Color.offBlack8}`,
|
|
218
|
+
}}
|
|
219
|
+
>
|
|
220
|
+
Intro to geometry
|
|
221
|
+
</View>
|
|
222
|
+
<View
|
|
223
|
+
style={{
|
|
224
|
+
marginTop: 16,
|
|
225
|
+
background: Color.white,
|
|
226
|
+
height: 360,
|
|
227
|
+
padding: 24,
|
|
228
|
+
border: `1px solid ${Color.offBlack8}`,
|
|
229
|
+
}}
|
|
230
|
+
>
|
|
231
|
+
Angles
|
|
232
|
+
</View>
|
|
233
|
+
</Cell>
|
|
234
|
+
</Row>
|
|
235
|
+
<Row
|
|
236
|
+
mediaQuery="mdOrSmaller"
|
|
237
|
+
style={{
|
|
238
|
+
marginTop: 16,
|
|
239
|
+
background: Color.white,
|
|
240
|
+
height: 360,
|
|
241
|
+
borderTop: `1px solid ${Color.offBlack8}`,
|
|
242
|
+
borderBottom: `1px solid ${Color.offBlack8}`,
|
|
243
|
+
}}
|
|
244
|
+
>
|
|
245
|
+
Intro to geometry
|
|
246
|
+
</Row>
|
|
247
|
+
<Row
|
|
248
|
+
mediaQuery="mdOrSmaller"
|
|
249
|
+
style={{
|
|
250
|
+
marginTop: 16,
|
|
251
|
+
background: Color.white,
|
|
252
|
+
height: 360,
|
|
253
|
+
borderTop: `1px solid ${Color.offBlack8}`,
|
|
254
|
+
borderBottom: `1px solid ${Color.offBlack8}`,
|
|
255
|
+
}}
|
|
256
|
+
>
|
|
257
|
+
Angles
|
|
258
|
+
</Row>
|
|
259
|
+
</View>;
|
|
260
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@khanacademy/wonder-blocks-grid",
|
|
3
|
+
"version": "1.0.24",
|
|
4
|
+
"design": "v1",
|
|
5
|
+
"publishConfig": {
|
|
6
|
+
"access": "public"
|
|
7
|
+
},
|
|
8
|
+
"description": "Grid components for Wonder Blocks design system.",
|
|
9
|
+
"main": "dist/index.js",
|
|
10
|
+
"module": "dist/es/index.js",
|
|
11
|
+
"source": "src/index.js",
|
|
12
|
+
"scripts": {
|
|
13
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
14
|
+
},
|
|
15
|
+
"author": "",
|
|
16
|
+
"license": "MIT",
|
|
17
|
+
"dependencies": {
|
|
18
|
+
"@babel/runtime": "^7.13.10",
|
|
19
|
+
"@khanacademy/wonder-blocks-color": "^1.1.18",
|
|
20
|
+
"@khanacademy/wonder-blocks-core": "^3.1.4",
|
|
21
|
+
"@khanacademy/wonder-blocks-spacing": "^3.0.3"
|
|
22
|
+
},
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"aphrodite": "^1.2.5",
|
|
25
|
+
"react": "^16.4.1"
|
|
26
|
+
},
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"wb-dev-build-settings": "^0.1.0"
|
|
29
|
+
},
|
|
30
|
+
"gitHead": "8022bb419eed74be37f71f71c7621854794a731c"
|
|
31
|
+
}
|