@khanacademy/wonder-blocks-grid 1.0.31 → 1.0.32

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @khanacademy/wonder-blocks-grid
 
+## 1.0.32
+
+### Patch Changes
+
+-   Updated dependencies [34c7aacb]
+    -   @khanacademy/wonder-blocks-color@1.2.0
+
 ## 1.0.31
 
 ### Patch Changes

package/dist/index.js

@@ -538,7 +538,7 @@ function (module, __webpack_exports__, __webpack_require__) {
   "b"]).map(spec => spec.query), Object.values(_util_specs_js__WEBPACK_IMPORTED_MODULE_2__[
   /* MEDIA_MODAL_SPEC */
   "c"]).map(spec => spec.query));
-  const mediaQueryLists = {}; // eslint-disable-next-line flowtype/require-exact-type
+  const mediaQueryLists = {}; // eslint-disable-next-line ft-flow/require-exact-type
   // If for some reason we're not able to resolve the current media size we
   // fall back to this state.
 
@@ -692,6 +692,32 @@ function (module, __webpack_exports__, __webpack_require__) {
 
   } // gen-snapshot-tests.js only understands `export default class ...`
 
+  /**
+   * ***NOTE: The MediaLayout component is being deprecated. Do not use this!!***
+   *
+   * MediaLayout is a container component that accepts a `styleSheets` object,
+   * whose keys are media sizes. It listens for changes to the current media
+   * size and passes the current `mediaSize`, `mediaSpec`, and `styles` to
+   * `children`, which is a render function taking those three values as an
+   * object.
+   *
+   * Valid keys for the `styleSheets` object are (in order of precedence):
+   * - `small`, `medium`, `large`
+   * - `mdOrSmaller`, `mdOrLarger`
+   * - `all`
+   *
+   * `MediaLayout` will merge style rules from multiple styles that match the
+   * current media query, e.g. `"(min-width: 1024px)"`.
+   *
+   * The `mediaSpec` is an object with one or more of the following keys:
+   * `small`, `medium`, or `large`. Each value contains the following data:
+   * - `query: string` e.g. "(min-width: 1024px)"
+   * - `totalColumns: number`
+   * - `gutterWidth: number`
+   * - `marginWidth: number`
+   * - `maxWidth: number`
+   */
+
 
   class MediaLayout extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
     render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-grid",
-  "version": "1.0.31",
+  "version": "1.0.32",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,8 +15,8 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@babel/runtime": "^7.18.6",
+    "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.3.2",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5"
   },

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -552,7 +552,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
           "margin": "0 auto",
         },
         "alignItems": "center",
-        "background": "#0a2a66",
+        "background": "#0b2149",
         "borderBottom": "1px solid rgba(255,255,255,0.64)",
         "borderStyle": "solid",
         "borderWidth": 0,
@@ -632,7 +632,7 @@ exports[`wonder-blocks-grid example 2 1`] = `
           "margin": "0 auto",
         },
         "alignItems": "center",
-        "background": "#0a2a66",
+        "background": "#0b2149",
         "borderStyle": "solid",
         "borderWidth": 0,
         "boxSizing": "border-box",