@khanacademy/wonder-blocks-layout 2.2.0 → 2.2.2

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.
Files changed (17) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/package.json +3 -3
  3. package/src/components/__tests__/media-layout-context.test.tsx +0 -167
  4. package/src/components/__tests__/media-layout.test.tsx +0 -418
  5. package/src/components/media-layout-context.ts +0 -58
  6. package/src/components/media-layout.tsx +0 -298
  7. package/src/components/spring.tsx +0 -27
  8. package/src/components/strut.tsx +0 -32
  9. package/src/index.ts +0 -17
  10. package/src/util/specs.ts +0 -58
  11. package/src/util/test-util.test.ts +0 -274
  12. package/src/util/test-util.ts +0 -71
  13. package/src/util/types.ts +0 -22
  14. package/src/util/util.test.ts +0 -234
  15. package/src/util/util.ts +0 -39
  16. package/tsconfig-build.json +0 -12
  17. package/tsconfig-build.tsbuildinfo +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @khanacademy/wonder-blocks-layout
2
2
 
3
+ ## 2.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [6999fd39]
8
+ - @khanacademy/wonder-blocks-tokens@2.1.0
9
+
10
+ ## 2.2.1
11
+
12
+ ### Patch Changes
13
+
14
+ - 02a1b298: Make sure we don't package tsconfig and tsbuildinfo files
15
+ - Updated dependencies [02a1b298]
16
+ - @khanacademy/wonder-blocks-core@7.0.1
17
+ - @khanacademy/wonder-blocks-tokens@2.0.1
18
+
3
19
  ## 2.2.0
4
20
 
5
21
  ### Minor Changes
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-layout",
3
- "version": "2.2.0",
3
+ "version": "2.2.2",
4
4
  "design": "v1",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -14,8 +14,8 @@
14
14
  },
15
15
  "dependencies": {
16
16
  "@babel/runtime": "^7.18.6",
17
- "@khanacademy/wonder-blocks-core": "^7.0.0",
18
- "@khanacademy/wonder-blocks-tokens": "^2.0.0"
17
+ "@khanacademy/wonder-blocks-core": "^7.0.1",
18
+ "@khanacademy/wonder-blocks-tokens": "^2.1.0"
19
19
  },
20
20
  "devDependencies": {
21
21
  "@khanacademy/wb-dev-build-settings": "^1.0.1"
package/src/components/__tests__/media-layout-context.test.tsx DELETED
@@ -1,167 +0,0 @@
1
- import * as React from "react";
2
- import {View, Server} from "@khanacademy/wonder-blocks-core";
3
- import {render} from "@testing-library/react";
4
-
5
- import MediaLayout from "../media-layout";
6
- import MediaLayoutContext from "../media-layout-context";
7
- import {resizeWindow, matchMedia} from "../../util/test-util";
8
-
9
- import {
10
- MEDIA_DEFAULT_SPEC,
11
- MEDIA_INTERNAL_SPEC,
12
- MEDIA_MODAL_SPEC,
13
- } from "../../util/specs";
14
-
15
- describe("MediaLayoutContext", () => {
16
- beforeEach(() => {
17
- jest.restoreAllMocks();
18
- window.matchMedia = matchMedia as any;
19
- });
20
-
21
- describe("overrideSize", () => {
22
- it("should override the currentSize", () => {
23
- // Arrange
24
- resizeWindow("large");
25
- const capturePropsFn = jest.fn();
26
-
27
- // Act
28
- render(
29
- <MediaLayoutContext.Provider
30
- value={{
31
- overrideSize: "small",
32
- ssrSize: "large",
33
- mediaSpec: MEDIA_DEFAULT_SPEC,
34
- }}
35
- >
36
- <MediaLayout styleSheets={{}}>
37
- {({mediaSize, mediaSpec, styles}: any) => {
38
- capturePropsFn({mediaSize, mediaSpec, styles});
39
- return <View>Hello, world!</View>;
40
- }}
41
- </MediaLayout>
42
- </MediaLayoutContext.Provider>,
43
- );
44
-
45
- // Assert
46
- expect(capturePropsFn).toHaveBeenCalledWith(
47
- expect.objectContaining({mediaSize: "small"}),
48
- );
49
- });
50
- });
51
-
52
- describe("ssrSize", () => {
53
- beforeEach(() => {
54
- jest.spyOn(Server, "isServerSide").mockReturnValue(true);
55
- });
56
-
57
- it("should use the default ssrSize on initial render", () => {
58
- // Arrange
59
- const capturePropsFn = jest.fn();
60
-
61
- // Act
62
- render(
63
- <MediaLayout styleSheets={{}}>
64
- {({mediaSize, mediaSpec, styles}: any) => {
65
- capturePropsFn({mediaSize, mediaSpec, styles});
66
- return <View>Hello, world!</View>;
67
- }}
68
- </MediaLayout>,
69
- );
70
-
71
- // Assert
72
- expect(capturePropsFn).toHaveBeenNthCalledWith(
73
- 1,
74
- expect.objectContaining({mediaSize: "large"}),
75
- );
76
- });
77
-
78
- it("should use the provided ssrSize on initial render", () => {
79
- // Arrange
80
- const capturePropsFn = jest.fn();
81
-
82
- // Act
83
- render(
84
- <MediaLayoutContext.Provider
85
- value={{
86
- overrideSize: undefined,
87
- ssrSize: "small",
88
- mediaSpec: MEDIA_DEFAULT_SPEC,
89
- }}
90
- >
91
- <MediaLayout styleSheets={{}}>
92
- {({mediaSize, mediaSpec, styles}: any) => {
93
- capturePropsFn({mediaSize, mediaSpec, styles});
94
- return <View>Hello, world!</View>;
95
- }}
96
- </MediaLayout>
97
- </MediaLayoutContext.Provider>,
98
- );
99
-
100
- // Assert
101
- expect(capturePropsFn).toHaveBeenNthCalledWith(
102
- 1,
103
- expect.objectContaining({mediaSize: "small"}),
104
- );
105
- });
106
- });
107
-
108
- describe("mediaSpec", () => {
109
- it("MEDIA_INTERNAL_SPEC is always large", async () => {
110
- // Arrange
111
- resizeWindow("small");
112
- const capturePropsFn = jest.fn();
113
-
114
- // Act
115
- render(
116
- <MediaLayoutContext.Provider
117
- value={{
118
- overrideSize: undefined,
119
- ssrSize: "small",
120
- mediaSpec: MEDIA_INTERNAL_SPEC,
121
- }}
122
- >
123
- <MediaLayout styleSheets={{}}>
124
- {({mediaSize, mediaSpec, styles}: any) => {
125
- capturePropsFn({mediaSize, mediaSpec, styles});
126
- return <View>Hello, world!</View>;
127
- }}
128
- </MediaLayout>
129
- </MediaLayoutContext.Provider>,
130
- );
131
-
132
- // Assert
133
- expect(capturePropsFn).toHaveBeenLastCalledWith(
134
- expect.objectContaining({mediaSize: "large"}),
135
- );
136
- });
137
-
138
- it("MEDIA_MODAL_SPEC is not medium", async () => {
139
- // Arrange
140
- resizeWindow("medium");
141
- const capturePropsFn = jest.fn();
142
-
143
- // Act
144
- render(
145
- <MediaLayoutContext.Provider
146
- value={{
147
- overrideSize: undefined,
148
- ssrSize: "small",
149
- mediaSpec: MEDIA_MODAL_SPEC,
150
- }}
151
- >
152
- <MediaLayout styleSheets={{}}>
153
- {({mediaSize, mediaSpec, styles}: any) => {
154
- capturePropsFn({mediaSize, mediaSpec, styles});
155
- return <View>Hello, world!</View>;
156
- }}
157
- </MediaLayout>
158
- </MediaLayoutContext.Provider>,
159
- );
160
-
161
- // Assert
162
- expect(capturePropsFn).toHaveBeenLastCalledWith(
163
- expect.objectContaining({mediaSize: "large"}),
164
- );
165
- });
166
- });
167
- });
package/src/components/__tests__/media-layout.test.tsx DELETED
@@ -1,418 +0,0 @@
1
- import * as React from "react";
2
- import {StyleSheet} from "aphrodite";
3
- import {View} from "@khanacademy/wonder-blocks-core";
4
- import {render, screen} from "@testing-library/react";
5
-
6
- import MediaLayout from "../media-layout";
7
- import {resizeWindow, matchMedia} from "../../util/test-util";
8
- import {MediaSize} from "../../util/types";
9
-
10
- describe("MediaLayout", () => {
11
- beforeEach(() => {
12
- window.matchMedia = matchMedia as any;
13
- });
14
-
15
- describe("mediaSize", () => {
16
- it("should be small when viewport width < 768", () => {
17
- // Arrange
18
- resizeWindow("small");
19
- const capturePropsFn = jest.fn();
20
-
21
- // Act
22
- render(
23
- <MediaLayout>
24
- {({mediaSize, mediaSpec, styles}: any) => {
25
- capturePropsFn({mediaSize, mediaSpec, styles});
26
- return <View style={styles.test}>Hello, world!</View>;
27
- }}
28
- </MediaLayout>,
29
- );
30
-
31
- // Assert
32
- expect(capturePropsFn).toHaveBeenCalledWith(
33
- expect.objectContaining({mediaSize: "small"}),
34
- );
35
- });
36
-
37
- it("should be medium when viewport 768 < width < 1024", () => {
38
- // Arrange
39
- resizeWindow("medium");
40
- const capturePropsFn = jest.fn();
41
-
42
- // Act
43
- render(
44
- <MediaLayout>
45
- {({mediaSize, mediaSpec, styles}: any) => {
46
- capturePropsFn({mediaSize, mediaSpec, styles});
47
- return <View style={styles.test}>Hello, world!</View>;
48
- }}
49
- </MediaLayout>,
50
- );
51
-
52
- // Assert
53
- expect(capturePropsFn).toHaveBeenCalledWith(
54
- expect.objectContaining({mediaSize: "medium"}),
55
- );
56
- });
57
-
58
- it("should be medium when viewport width > 1024", () => {
59
- // Arrange
60
- resizeWindow("large");
61
- const capturePropsFn = jest.fn();
62
-
63
- // Act
64
- render(
65
- <MediaLayout>
66
- {({mediaSize, mediaSpec, styles}: any) => {
67
- capturePropsFn({mediaSize, mediaSpec, styles});
68
- return <View style={styles.test}>Hello, world!</View>;
69
- }}
70
- </MediaLayout>,
71
- );
72
-
73
- // Assert
74
- expect(capturePropsFn).toHaveBeenCalledWith(
75
- expect.objectContaining({mediaSize: "large"}),
76
- );
77
- });
78
- });
79
-
80
- describe.each`
81
- size
82
- ${"small"}
83
- ${"medium"}
84
- ${"large"}
85
- `("styleSheets - $size", ({size}: {size: MediaSize}) => {
86
- it(`should always provide styles from all`, () => {
87
- // Arrange
88
- const styleSheets = {
89
- all: StyleSheet.create({
90
- test: {
91
- color: "blue",
92
- },
93
- }),
94
- } as const;
95
- resizeWindow(size);
96
-
97
- // Act
98
- render(
99
- <MediaLayout styleSheets={styleSheets}>
100
- {({mediaSize, mediaSpec, styles}: any) => {
101
- return (
102
- <View testId="styled-view" style={styles.test}>
103
- Hello, world!
104
- </View>
105
- );
106
- }}
107
- </MediaLayout>,
108
- );
109
- const style = screen.getByTestId("styled-view").style;
110
-
111
- // Assert
112
- expect(style.color).toBe("blue");
113
- });
114
-
115
- it(`"mdOrSmaller" should match ${
116
- size === "large" ? "not" : ""
117
- } "${size}"`, () => {
118
- // Arrange
119
- const styleSheets = {
120
- mdOrSmaller: StyleSheet.create({
121
- test: {
122
- color: "blue",
123
- },
124
- }),
125
- large: StyleSheet.create({
126
- test: {
127
- color: "orange",
128
- },
129
- }),
130
- } as const;
131
- resizeWindow(size);
132
- const expectedColor = {
133
- small: "blue",
134
- medium: "blue",
135
- large: "orange",
136
- }[size];
137
-
138
- // Act
139
- render(
140
- <MediaLayout styleSheets={styleSheets}>
141
- {({mediaSize, mediaSpec, styles}: any) => {
142
- return (
143
- <View testId="styled-view" style={styles.test}>
144
- Hello, world!
145
- </View>
146
- );
147
- }}
148
- </MediaLayout>,
149
- );
150
- const style = screen.getByTestId("styled-view").style;
151
-
152
- // Assert
153
- expect(style.color).toBe(expectedColor);
154
- });
155
-
156
- it(`"mdOrLarger" should match ${
157
- size === "small" ? "not" : ""
158
- } "${size}"`, () => {
159
- // Arrange
160
- const styleSheets = {
161
- mdOrLarger: StyleSheet.create({
162
- test: {
163
- color: "blue",
164
- },
165
- }),
166
- small: StyleSheet.create({
167
- test: {
168
- color: "orange",
169
- },
170
- }),
171
- } as const;
172
- resizeWindow(size);
173
- const expectedColor = {
174
- small: "orange",
175
- medium: "blue",
176
- large: "blue",
177
- }[size];
178
-
179
- // Act
180
- render(
181
- <MediaLayout styleSheets={styleSheets}>
182
- {({mediaSize, mediaSpec, styles}: any) => {
183
- return (
184
- <View testId="styled-view" style={styles.test}>
185
- Hello, world!
186
- </View>
187
- );
188
- }}
189
- </MediaLayout>,
190
- );
191
- const style = screen.getByTestId("styled-view").style;
192
-
193
- // Assert
194
- expect(style.color).toBe(expectedColor);
195
- });
196
-
197
- it(`styles should win over "all" styles`, () => {
198
- // Arrange
199
- const styleSheets = {
200
- all: StyleSheet.create({
201
- test: {
202
- color: "blue",
203
- },
204
- }),
205
- small: StyleSheet.create({
206
- test: {
207
- color: "orange",
208
- },
209
- }),
210
- medium: StyleSheet.create({
211
- test: {
212
- color: "teal",
213
- },
214
- }),
215
- large: StyleSheet.create({
216
- test: {
217
- color: "magenta",
218
- },
219
- }),
220
- } as const;
221
- resizeWindow(size);
222
- const expectedColor = {
223
- small: "orange",
224
- medium: "teal",
225
- large: "magenta",
226
- }[size];
227
-
228
- // Act
229
- render(
230
- <MediaLayout styleSheets={styleSheets}>
231
- {({mediaSize, mediaSpec, styles}: any) => {
232
- return (
233
- <View testId="styled-view" style={styles.test}>
234
- Hello, world!
235
- </View>
236
- );
237
- }}
238
- </MediaLayout>,
239
- );
240
- const style = screen.getByTestId("styled-view").style;
241
-
242
- // Assert
243
- expect(style.color).toEqual(expectedColor);
244
- });
245
-
246
- if (size !== "large") {
247
- it(`"${size}" styles should win over "mdOrSmaller" styles`, () => {
248
- // Arrange
249
- const styleSheets = {
250
- mdOrSmaller: StyleSheet.create({
251
- test: {
252
- color: "blue",
253
- },
254
- }),
255
- small: StyleSheet.create({
256
- test: {
257
- color: "orange",
258
- },
259
- }),
260
- medium: StyleSheet.create({
261
- test: {
262
- color: "teal",
263
- },
264
- }),
265
- } as const;
266
- resizeWindow(size);
267
- const expectedColor = {
268
- small: "orange",
269
- medium: "teal",
270
- }[size];
271
-
272
- // Act
273
- render(
274
- <MediaLayout styleSheets={styleSheets}>
275
- {({mediaSize, mediaSpec, styles}: any) => {
276
- return (
277
- <View testId="styled-view" style={styles.test}>
278
- Hello, world!
279
- </View>
280
- );
281
- }}
282
- </MediaLayout>,
283
- );
284
- const style = screen.getByTestId("styled-view").style;
285
-
286
- // Assert
287
- expect(style.color).toEqual(expectedColor);
288
- });
289
- }
290
-
291
- if (size !== "small") {
292
- it(`"${size}" styles should win over "mdOrLarger" styles`, () => {
293
- // Arrange
294
- const styleSheets = {
295
- mdOrLarger: StyleSheet.create({
296
- test: {
297
- color: "blue",
298
- },
299
- }),
300
- medium: StyleSheet.create({
301
- test: {
302
- color: "teal",
303
- },
304
- }),
305
- large: StyleSheet.create({
306
- test: {
307
- color: "magenta",
308
- },
309
- }),
310
- } as const;
311
- resizeWindow(size);
312
- const expectedColor = {
313
- medium: "teal",
314
- large: "magenta",
315
- }[size];
316
-
317
- // Act
318
- render(
319
- <MediaLayout styleSheets={styleSheets}>
320
- {({mediaSize, mediaSpec, styles}: any) => {
321
- return (
322
- <View testId="styled-view" style={styles.test}>
323
- Hello, world!
324
- </View>
325
- );
326
- }}
327
- </MediaLayout>,
328
- );
329
- const style = screen.getByTestId("styled-view").style;
330
-
331
- // Assert
332
- expect(style.color).toEqual(expectedColor);
333
- });
334
- }
335
- });
336
-
337
- describe("window resizing", () => {
338
- it("should update the style when the window gets smaller", () => {
339
- // Arrange
340
- const styleSheets = {
341
- large: StyleSheet.create({
342
- test: {
343
- color: "blue",
344
- },
345
- }),
346
- small: StyleSheet.create({
347
- test: {
348
- color: "orange",
349
- },
350
- }),
351
- } as const;
352
-
353
- const UnderTest = () => (
354
- <MediaLayout styleSheets={styleSheets}>
355
- {({mediaSize, mediaSpec, styles}: any) => {
356
- return (
357
- <View testId="styled-view" style={styles.test}>
358
- Hello, world!
359
- </View>
360
- );
361
- }}
362
- </MediaLayout>
363
- );
364
-
365
- resizeWindow("large");
366
-
367
- const wrapper = render(<UnderTest />);
368
-
369
- // Act
370
- resizeWindow("small");
371
- wrapper.rerender(<UnderTest />);
372
- const style = screen.getByTestId("styled-view").style;
373
-
374
- // Assert
375
- expect(style.color).toBe("orange");
376
- });
377
-
378
- it("should update the style when the window gets larger", () => {
379
- // Arrange
380
- const styleSheets = {
381
- large: StyleSheet.create({
382
- test: {
383
- color: "blue",
384
- },
385
- }),
386
- small: StyleSheet.create({
387
- test: {
388
- color: "orange",
389
- },
390
- }),
391
- } as const;
392
-
393
- const UnderTest = () => (
394
- <MediaLayout styleSheets={styleSheets}>
395
- {({mediaSize, mediaSpec, styles}: any) => {
396
- return (
397
- <View testId="styled-view" style={styles.test}>
398
- Hello, world!
399
- </View>
400
- );
401
- }}
402
- </MediaLayout>
403
- );
404
-
405
- resizeWindow("small");
406
-
407
- const wrapper = render(<UnderTest />);
408
-
409
- // Act
410
- resizeWindow("large");
411
- wrapper.rerender(<UnderTest />);
412
- const style = screen.getByTestId("styled-view").style;
413
-
414
- // Assert
415
- expect(style.color).toBe("blue");
416
- });
417
- });
418
- });
package/src/components/media-layout-context.ts DELETED
@@ -1,58 +0,0 @@
1
- import * as React from "react";
2
-
3
- import {MEDIA_DEFAULT_SPEC} from "../util/specs";
4
- import type {MediaSize, MediaSpec} from "../util/types";
5
-
6
- export type Context = {
7
- /**
8
- * Force the MediaLayout to be a particular size (ignoring the actual
9
- * dimensions of the viewport).
10
- */
11
- overrideSize?: MediaSize;
12
- /**
13
- * Set the size of the MediaLayout to be rendered when doing SSR
14
- * (Server-Side Rendering) of the component. Defaults to "large".
15
- */
16
- ssrSize: MediaSize;
17
- /**
18
- * If you wish to use a different set of layout sizes you can specify them as
19
- * part of the `mediaSpec` property. The Core package exports a couple of the
20
- * most commonly used ones:
21
- *
22
- * **Default Layout Spec (`MEDIA_DEFAULT_SPEC`)**
23
- *
24
- * | Size | Columns | Gutter | Margin | Breakpoint |
25
- * | ------ | ------- | ------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------- |
26
- * | small | 4 | 16px | 16px | `max-width: 767px` |
27
- * | medium | 8 | 32px | 24px | `min-width: 768px and max-width: 1023px` |
28
- * | large | 12 | 32px | 24px | `min-width: 1024px` (maximum content width: `1120px`, after which the margins will continue to expand and content remain centered) |
29
- *
30
- * Additionally, the following layout size specs are also available:
31
- *
32
- * **Internal Tools (`MEDIA_INTERNAL_SPEC`)**
33
- *
34
- * | Size | Columns | Gutter | Margin | Breakpoint |
35
- * | ----- | ------- | ------ | ------ | -------------------------------------------- |
36
- * | large | 12 | 32px | 16px | `min-width: 1px` (No maximum content width.) |
37
- *
38
- * **12-Column Modal (`MEDIA_MODAL_SPEC`)**
39
- *
40
- * | Size | Columns | Gutter | Margin | Breakpoint |
41
- * | ----- | ------- | ------ | ------ | ---------------------------------------------- |
42
- * | small | 4 | 16px | 16px | `max-width: 767px` |
43
- * | large | 12 | 32px | 64px | `min-width: 768px` (No maximum content width.) |
44
- */
45
- mediaSpec: MediaSpec;
46
- };
47
-
48
- const defaultContext: Context = {
49
- ssrSize: "large",
50
- mediaSpec: MEDIA_DEFAULT_SPEC,
51
- };
52
-
53
- const MediaLayoutContext = React.createContext<Context>(
54
- defaultContext,
55
- ) as React.Context<Context>;
56
- MediaLayoutContext.displayName = "MediaLayoutContext";
57
-
58
- export default MediaLayoutContext;