@khanacademy/wonder-blocks-grid 1.0.29 → 1.0.32

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @khanacademy/wonder-blocks-grid
 
+## 1.0.32
+
+### Patch Changes
+
+-   Updated dependencies [34c7aacb]
+    -   @khanacademy/wonder-blocks-color@1.2.0
+
+## 1.0.31
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+
+## 1.0.30
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.3.1
+
 ## 1.0.29
 
 ### Patch Changes

package/dist/es/index.js

@@ -32,32 +32,12 @@ const flexBasis = size => {
   };
 };
 
-/**
- * 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).
- *
- * This component renders a [View](#view) that
- * uses Flex Box and has a [flex-basis](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis)
- * of the specified "width" and [flex-shrink](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink)
- * of 0.
- *
- * By default (with no properties specified) it will display at all
- * grid sizes. If you specify the `smallCols`, `mediumCols`, `largeCols`, or
- * `cols` props then the component will only be shown at those grid sizes and
- * using the specified column width.
- */
 class Cell extends React.Component {
   static isClassOf(instance) {
     return instance && instance.type && instance.type.__IS_CELL__;
   }
 
   static getCols(props, mediaSize) {
-    // If no option was specified then we just return undefined,
-    // components may handle this case differently.
-    // We go through all the ways in which a fixed width can be
-    // specified and find the one that matches our current grid size.
     if (!props.smallCols && !props.mediumCols && !props.largeCols && !props.cols) {
       return undefined;
     } else if (props.smallCols && mediaSize === "small") {
@@ -70,14 +50,10 @@ class Cell extends React.Component {
       return props.cols(mediaSize);
     } else if (props.cols) {
       return props.cols;
-    } // If nothing applies then we return null (usually resulting
-    // in the component not being rendered)
-
+    }
 
     return null;
-  } // HACK(kevinb): we use a stack method here because we can't get a ref to
-  // each cell in a row without cloning them all.
-
+  }
 
   static shouldDisplay(props, mediaSize) {
     const cols = Cell.getCols(props, mediaSize);
@@ -89,7 +65,7 @@ class Cell extends React.Component {
       children,
       style
     } = this.props;
-    return /*#__PURE__*/React.createElement(MediaLayout, null, ({
+    return React.createElement(MediaLayout, null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -97,15 +73,14 @@ class Cell extends React.Component {
 
       if (!spec) {
         throw new Error(`mediaSpec.${mediaSize} is undefined`);
-      } // Get the settings for this particular size of grid
-
+      }
 
       const {
         totalColumns,
         gutterWidth,
         marginWidth
       } = spec;
-      const cols = Cell.getCols(this.props, mediaSize); // If no columns are specified then we just don't render this cell
+      const cols = Cell.getCols(this.props, mediaSize);
 
       if (cols === undefined || cols === null || cols === 0) {
         return null;
@@ -113,31 +88,16 @@ class Cell extends React.Component {
 
       if (cols > totalColumns) {
         throw new Error(`Specified columns ${cols} is greater than the maximum ` + `${totalColumns} at the ${mediaSize} grid size.`);
-      } // We need to start by calculating the total width of all the "content"
-      // We do this by starting with the full width (100%) and then
-      // subtracting all of the gutter spaces inbetween the cells
-      // (gutterWidth * (totalColumns - 1)) and the width of the two margins
-      // (marginWidth * 2).
-
-
-      const contentWidth = `(100% - ${gutterWidth * (totalColumns - 1)}px - ${marginWidth * 2}px)`; // Now that we have the full width we can calculate the width of this
-      // particular cell by multiplying the full width (allCellWidth) by
-      // the ratio of this cell (cols / totalColumns). But we then need to
-      // add back in the missing gutter widths:
-      // (gutterWidth * (cols - 1)). This gives us to full width of
-      // this particular cell.
-
-      const calcWidth = `calc(${contentWidth} * ${cols / totalColumns} + ${gutterWidth * (cols - 1)}px)`; // If the contents are a function then we call it with the mediaSize,
-      // totalColumns, and cols properties and render the return value.
+      }
 
+      const contentWidth = `(100% - ${gutterWidth * (totalColumns - 1)}px - ${marginWidth * 2}px)`;
+      const calcWidth = `calc(${contentWidth} * ${cols / totalColumns} + ${gutterWidth * (cols - 1)}px)`;
       const contents = typeof children === "function" ? children({
         mediaSize,
         totalColumns,
         cols
-      }) : children; // Render a fixed-width cell (flex-basis: size, flex-shrink: 0)
-      // that matches the intended width of the cell
-
-      return /*#__PURE__*/React.createElement(View, {
+      }) : children;
+      return React.createElement(View, {
         style: [styles.cellFixed, flexBasis(calcWidth), style]
       }, contents);
     });
@@ -152,22 +112,9 @@ Cell.defaultProps = {
 };
 Cell.__IS_CELL__ = true;
 
-/**
- * Gutter is a component whose width is set based on the size of grid currently
- * being displayed. Used for spacing out cells from each other. The gutter
- * itself doesn't hold any content, it just spaces it out.
- *
- * Gutters are inserted automatically inside of a [Row](#row) in-between Cells.
- * You may only need to use Gutters if you're manually building your own
- * sub-grid, or some-such (this should be relatively rare).
- *
- * By default (with no properties specified) it will display at all
- * grid sizes. If you specify the `small`, `medium`, or `large`
- * props then the component will only be shown at those grid sizes.
- */
 class Gutter extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(MediaLayout, null, ({
+    return React.createElement(MediaLayout, null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -185,7 +132,7 @@ class Gutter extends React.Component {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(Strut, {
+      return React.createElement(Strut, {
         size: gutterWidth
       });
     });
@@ -196,31 +143,13 @@ Gutter.defaultProps = {
   mediaQuery: "all"
 };
 
-/**
- * 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).
- *
- * This component will automatically attempt to insert [Gutters](#gutter)
- * in-between all child elements. Additionally, it'll perform some basic checks
- * to ensure that no impossible layouts are accidentally generated.
- *
- * Typically this component will be used as a child of a [Grid](#grid-1),
- * but it's not a requirement, you can use it as a descendant, as well.
- *
- * By default (with no properties specified) it will display at all
- * grid sizes. If you specify the `small`, `medium`, or `large`
- * props then the component will only be shown at those grid sizes.
- */
 class Row extends React.Component {
   render() {
     const {
       style,
       children
     } = this.props;
-    return /*#__PURE__*/React.createElement(MediaLayout, null, ({
+    return React.createElement(MediaLayout, null, ({
       mediaSize,
       mediaSpec
     }) => {
@@ -235,36 +164,26 @@ class Row extends React.Component {
         maxWidth,
         totalColumns
       } = spec;
-      const shouldDisplay = queryMatchesSize(this.props.mediaQuery, mediaSize); // Don't render the row if it's been disabled at this size
+      const shouldDisplay = queryMatchesSize(this.props.mediaQuery, mediaSize);
 
       if (!shouldDisplay) {
         return null;
-      } // If the contents are a function then we call it with the mediaSize and
-      // totalColumns properties and render the return value.
-
+      }
 
       const contents = typeof children === "function" ? children({
         mediaSize,
         totalColumns
       }) : children;
-      const filteredContents = React.Children.toArray(contents) // Go through all of the contents and pre-emptively remove anything
-      // that shouldn't be rendered.
-      .filter( // Flow doesn't let us check .type on a non-null React.Node so
-      // we have to cast it to any.
-      item => Cell.isClassOf(item) ? Cell.shouldDisplay(item.props, mediaSize) : true) // Intersperse Gutter elements between the cells.
-      .reduce((acc, elem, index) => [].concat(acc, [elem, /*#__PURE__*/React.createElement(Gutter, {
+      const filteredContents = React.Children.toArray(contents).filter(item => Cell.isClassOf(item) ? Cell.shouldDisplay(item.props, mediaSize) : true).reduce((acc, elem, index) => [].concat(acc, [elem, React.createElement(Gutter, {
         key: `gutter-${index}`
-      })]), []) // We only want gutters between each cell in the row.  The reduce
-      // adds a gutter after every cell so we need to remove the last
-      // element which is an unnecessary gutteer.
-      .slice(0, -1);
-      return /*#__PURE__*/React.createElement(View, {
+      })]), []).slice(0, -1);
+      return React.createElement(View, {
         style: [styles.row, !!maxWidth && styles.rowMaxWidth, !!maxWidth && {
           maxWidth
         }, style]
-      }, /*#__PURE__*/React.createElement(Strut, {
+      }, React.createElement(Strut, {
         size: marginWidth
-      }), filteredContents, /*#__PURE__*/React.createElement(Strut, {
+      }), filteredContents, React.createElement(Strut, {
         size: marginWidth
       }));
     });

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.29",
+  "version": "1.0.32",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,9 +15,9 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.0",
+    "@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"
   },
   "peerDependencies": {
@@ -25,6 +25,6 @@
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   }
 }

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",