@khanacademy/wonder-blocks-layout 2.1.3 → 2.2.1

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 (19) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/es/index.js +3 -3
  3. package/dist/index.js +2 -2
  4. package/package.json +3 -3
  5. package/src/components/__tests__/media-layout-context.test.tsx +0 -167
  6. package/src/components/__tests__/media-layout.test.tsx +0 -418
  7. package/src/components/media-layout-context.ts +0 -58
  8. package/src/components/media-layout.tsx +0 -298
  9. package/src/components/spring.tsx +0 -27
  10. package/src/components/strut.tsx +0 -32
  11. package/src/index.ts +0 -17
  12. package/src/util/specs.ts +0 -58
  13. package/src/util/test-util.test.ts +0 -274
  14. package/src/util/test-util.ts +0 -71
  15. package/src/util/types.ts +0 -22
  16. package/src/util/util.test.ts +0 -234
  17. package/src/util/util.ts +0 -39
  18. package/tsconfig-build.json +0 -12
  19. package/tsconfig-build.tsbuildinfo +0 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,25 @@
1
1
  # @khanacademy/wonder-blocks-layout
2
2
 
3
+ ## 2.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 02a1b298: Make sure we don't package tsconfig and tsbuildinfo files
8
+ - Updated dependencies [02a1b298]
9
+ - @khanacademy/wonder-blocks-core@7.0.1
10
+ - @khanacademy/wonder-blocks-tokens@2.0.1
11
+
12
+ ## 2.2.0
13
+
14
+ ### Minor Changes
15
+
16
+ - 07f7f407: Renamed `WithSSRPlaceholder` to `InitialFallback`. This includes changing the `placeholder` prop to `fallback` so it's closer to `Suspense` usage.
17
+
18
+ ### Patch Changes
19
+
20
+ - Updated dependencies [07f7f407]
21
+ - @khanacademy/wonder-blocks-core@7.0.0
22
+
3
23
  ## 2.1.3
4
24
 
5
25
  ### Patch Changes
package/dist/es/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import _extends from '@babel/runtime/helpers/extends';
2
2
  import * as React from 'react';
3
- import { WithSSRPlaceholder, View } from '@khanacademy/wonder-blocks-core';
3
+ import { InitialFallback, View } from '@khanacademy/wonder-blocks-core';
4
4
  import { spacing } from '@khanacademy/wonder-blocks-tokens';
5
5
  import { StyleSheet } from 'aphrodite';
6
6
 
@@ -150,8 +150,8 @@ class MediaLayoutInternal extends React.Component {
150
150
  });
151
151
  }
152
152
  render() {
153
- return React.createElement(WithSSRPlaceholder, {
154
- placeholder: () => this.renderContent(true)
153
+ return React.createElement(InitialFallback, {
154
+ fallback: () => this.renderContent(true)
155
155
  }, () => this.renderContent(this.isUnsupportedEnvironment()));
156
156
  }
157
157
  }
package/dist/index.js CHANGED
@@ -177,8 +177,8 @@ class MediaLayoutInternal extends React__namespace.Component {
177
177
  });
178
178
  }
179
179
  render() {
180
- return React__namespace.createElement(wonderBlocksCore.WithSSRPlaceholder, {
181
- placeholder: () => this.renderContent(true)
180
+ return React__namespace.createElement(wonderBlocksCore.InitialFallback, {
181
+ fallback: () => this.renderContent(true)
182
182
  }, () => this.renderContent(this.isUnsupportedEnvironment()));
183
183
  }
184
184
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@khanacademy/wonder-blocks-layout",
3
- "version": "2.1.3",
3
+ "version": "2.2.1",
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": "^6.4.3",
18
- "@khanacademy/wonder-blocks-tokens": "^2.0.0"
17
+ "@khanacademy/wonder-blocks-core": "^7.0.1",
18
+ "@khanacademy/wonder-blocks-tokens": "^2.0.1"
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
- });