@khanacademy/wonder-blocks-grid 1.0.38 → 1.0.40

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @khanacademy/wonder-blocks-grid
 
+## 1.0.40
+
+### Patch Changes
+
+-   Updated dependencies [779b031d]
+    -   @khanacademy/wonder-blocks-core@4.9.0
+    -   @khanacademy/wonder-blocks-layout@1.4.18
+
+## 1.0.39
+
+### Patch Changes
+
+-   d816af08: Update build and test configs use TypeScript
+-   3891f544: Update babel config to include plugins that Storybook needed
+-   0d28bb1c: Configured TypeScript
+-   3d05f764: Fix HOCs and other type errors
+-   c2ec4902: Update eslint configuration, fix lint
+-   2983c05b: Include 'types' field in package.json
+-   77ff6a66: Generate Flow types from TypeScript types
+-   ec8d4b7f: Fix miscellaneous TypeScript errors
+-   Updated dependencies [d816af08]
+-   Updated dependencies [3891f544]
+-   Updated dependencies [0d28bb1c]
+-   Updated dependencies [873f4a14]
+-   Updated dependencies [3d05f764]
+-   Updated dependencies [c2ec4902]
+-   Updated dependencies [2983c05b]
+-   Updated dependencies [77ff6a66]
+-   Updated dependencies [ec8d4b7f]
+    -   @khanacademy/wonder-blocks-color@1.2.2
+    -   @khanacademy/wonder-blocks-core@4.8.0
+    -   @khanacademy/wonder-blocks-layout@1.4.17
+    -   @khanacademy/wonder-blocks-spacing@3.0.6
+
 ## 1.0.38
 
 ### Patch Changes

package/dist/components/cell.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+import type { MediaSize } from "@khanacademy/wonder-blocks-layout";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+type Props = {
+    /** The number of columns this cell should span on a Small Grid. */
+    smallCols: number;
+    /** The number of columns this cell should span on a Medium Grid. */
+    mediumCols: number;
+    /** The number of columns this cell should span on a Large Grid. */
+    largeCols: number;
+    /** The number of columns this should should span by default. */
+    cols: number | ((mediaSize: MediaSize) => number);
+    /**
+     * The child components to populate inside the cell. Can also accept a
+     * function which receives the `mediaSize`, `totalColumns`, and cell
+     * `width` and should return some React Nodes to render.
+     */
+    children: React.ReactNode | ((arg1: {
+        mediaSize: MediaSize;
+        totalColumns: number;
+        cols: number;
+    }) => React.ReactElement);
+    /** The styling to apply to the cell. */
+    style?: StyleType;
+};
+type DefaultProps = {
+    smallCols: Props["smallCols"];
+    mediumCols: Props["mediumCols"];
+    largeCols: Props["largeCols"];
+    cols: Props["cols"];
+};
+/**
+ * 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.
+ */
+export default class Cell extends React.Component<Props> {
+    static isClassOf(instance: React.ReactElement<any>): boolean;
+    static getCols(props: Props, mediaSize: MediaSize): number | null | undefined;
+    static shouldDisplay(props: Props, mediaSize: MediaSize): boolean;
+    static defaultProps: DefaultProps;
+    static __IS_CELL__: boolean;
+    render(): React.ReactElement | null;
+}
+export {};

package/dist/components/cell.js.flow

@@ -0,0 +1,82 @@
+/**
+ * Flowtype definitions for cell
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { MediaSize } from "@khanacademy/wonder-blocks-layout";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+declare type Props = {
+  /**
+   * The number of columns this cell should span on a Small Grid.
+   */
+  smallCols: number,
+
+  /**
+   * The number of columns this cell should span on a Medium Grid.
+   */
+  mediumCols: number,
+
+  /**
+   * The number of columns this cell should span on a Large Grid.
+   */
+  largeCols: number,
+
+  /**
+   * The number of columns this should should span by default.
+   */
+  cols: number | ((mediaSize: MediaSize) => number),
+
+  /**
+   * The child components to populate inside the cell. Can also accept a
+   * function which receives the `mediaSize`, `totalColumns`, and cell
+   * `width` and should return some React Nodes to render.
+   */
+  children:
+    | React.Node
+    | ((arg1: {
+        mediaSize: MediaSize,
+        totalColumns: number,
+        cols: number,
+        ...
+      }) => React.Element<>),
+
+  /**
+   * The styling to apply to the cell.
+   */
+  style?: StyleType,
+  ...
+};
+declare type DefaultProps = {
+  smallCols: $PropertyType<Props, "smallCols">,
+  mediumCols: $PropertyType<Props, "mediumCols">,
+  largeCols: $PropertyType<Props, "largeCols">,
+  cols: $PropertyType<Props, "cols">,
+  ...
+};
+/**
+ * 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.
+ */
+declare export default class Cell extends React.Component<Props> {
+  static isClassOf(instance: React.Element<any>): boolean;
+  static getCols(props: Props, mediaSize: MediaSize): number | null | void;
+  static shouldDisplay(props: Props, mediaSize: MediaSize): boolean;
+  static defaultProps: DefaultProps;
+  static __IS_CELL__: boolean;
+  render(): React.Element<> | null;
+}

package/dist/components/gutter.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+import type { MediaQuery } from "@khanacademy/wonder-blocks-layout";
+type Props = {
+    /**
+     * Which media should this cell be renderer on.  Defaults to all.
+     */
+    mediaQuery: MediaQuery;
+};
+type DefaultProps = {
+    mediaQuery: Props["mediaQuery"];
+};
+/**
+ * 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.
+ */
+export default class Gutter extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    render(): React.ReactElement | null;
+}
+export {};

package/dist/components/gutter.js.flow

@@ -0,0 +1,37 @@
+/**
+ * Flowtype definitions for gutter
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { MediaQuery } from "@khanacademy/wonder-blocks-layout";
+declare type Props = {
+  /**
+   * Which media should this cell be renderer on.  Defaults to all.
+   */
+  mediaQuery: MediaQuery,
+  ...
+};
+declare type DefaultProps = {
+  mediaQuery: $PropertyType<Props, "mediaQuery">,
+  ...
+};
+/**
+ * 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.
+ */
+declare export default class Gutter extends React.Component<Props> {
+  static defaultProps: DefaultProps;
+  render(): React.Element<> | null;
+}

package/dist/components/row.d.ts

@@ -0,0 +1,48 @@
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { MediaQuery, MediaSize } from "@khanacademy/wonder-blocks-layout";
+type Props = {
+    /**
+     * Which media should this cell be renderer on.  Defaults to all.
+     */
+    mediaQuery: MediaQuery;
+    /**
+     * The child components to populate inside the row. Typically this will be
+     * 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).
+     * Can also accept a function which receives the `mediaSize` and
+     * `totalColumns` and should return some React Nodes to render.
+     */
+    children: React.ReactNode | ((arg1: {
+        mediaSize: MediaSize;
+        totalColumns: number;
+    }) => React.ReactElement);
+    /** The styling to apply to the row. */
+    style?: StyleType;
+};
+type DefaultProps = {
+    mediaQuery: Props["mediaQuery"];
+};
+/**
+ * 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.
+ */
+export default class Row extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    render(): React.ReactElement | null;
+}
+export {};

package/dist/components/row.js.flow

@@ -0,0 +1,63 @@
+/**
+ * Flowtype definitions for row
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { StyleType } from "@khanacademy/wonder-blocks-core";
+import type { MediaQuery, MediaSize } from "@khanacademy/wonder-blocks-layout";
+declare type Props = {
+  /**
+   * Which media should this cell be renderer on.  Defaults to all.
+   */
+  mediaQuery: MediaQuery,
+
+  /**
+   * The child components to populate inside the row. Typically this will be
+   * 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).
+   * Can also accept a function which receives the `mediaSize` and
+   * `totalColumns` and should return some React Nodes to render.
+   */
+  children:
+    | React.Node
+    | ((arg1: {
+        mediaSize: MediaSize,
+        totalColumns: number,
+        ...
+      }) => React.Element<>),
+
+  /**
+   * The styling to apply to the row.
+   */
+  style?: StyleType,
+  ...
+};
+declare type DefaultProps = {
+  mediaQuery: $PropertyType<Props, "mediaQuery">,
+  ...
+};
+/**
+ * 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.
+ */
+declare export default class Row extends React.Component<Props> {
+  static defaultProps: DefaultProps;
+  render(): React.Element<> | null;
+}

package/dist/es/index.js

@@ -3,6 +3,20 @@ import { MediaLayout, queryMatchesSize, Strut } from '@khanacademy/wonder-blocks
 import { View } from '@khanacademy/wonder-blocks-core';
 import { StyleSheet } from 'aphrodite';
 
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
 const WIDE_SCREEN = "@media (min-width: 1168px)";
 const styles = StyleSheet.create({
   row: {
@@ -32,12 +46,15 @@ const flexBasis = size => {
   };
 };
 
-class Cell extends React.Component {
-  static isClassOf(instance) {
-    return instance && instance.type && instance.type.__IS_CELL__;
+let Cell = function (_React$Component) {
+  _inheritsLoose(Cell, _React$Component);
+  function Cell() {
+    return _React$Component.apply(this, arguments) || this;
   }
-
-  static getCols(props, mediaSize) {
+  Cell.isClassOf = function isClassOf(instance) {
+    return instance && instance.type && instance.type.__IS_CELL__;
+  };
+  Cell.getCols = function getCols(props, mediaSize) {
     if (!props.smallCols && !props.mediumCols && !props.largeCols && !props.cols) {
       return undefined;
     } else if (props.smallCols && mediaSize === "small") {
@@ -51,16 +68,14 @@ class Cell extends React.Component {
     } else if (props.cols) {
       return props.cols;
     }
-
     return null;
-  }
-
-  static shouldDisplay(props, mediaSize) {
+  };
+  Cell.shouldDisplay = function shouldDisplay(props, mediaSize) {
     const cols = Cell.getCols(props, mediaSize);
     return cols !== null && cols !== 0;
-  }
-
-  render() {
+  };
+  var _proto = Cell.prototype;
+  _proto.render = function render() {
     const {
       children,
       style
@@ -70,26 +85,21 @@ class Cell extends React.Component {
       mediaSpec
     }) => {
       const spec = mediaSpec[mediaSize];
-
       if (!spec) {
         throw new Error(`mediaSpec.${mediaSize} is undefined`);
       }
-
       const {
         totalColumns,
         gutterWidth,
         marginWidth
       } = spec;
       const cols = Cell.getCols(this.props, mediaSize);
-
       if (cols === undefined || cols === null || cols === 0) {
         return null;
       }
-
       if (cols > totalColumns) {
         throw new Error(`Specified columns ${cols} is greater than the maximum ` + `${totalColumns} at the ${mediaSize} grid size.`);
       }
-
       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({
@@ -101,9 +111,9 @@ class Cell extends React.Component {
         style: [styles.cellFixed, flexBasis(calcWidth), style]
       }, contents);
     });
-  }
-
-}
+  };
+  return Cell;
+}(React.Component);
 Cell.defaultProps = {
   smallCols: 0,
   mediumCols: 0,
@@ -112,39 +122,45 @@ Cell.defaultProps = {
 };
 Cell.__IS_CELL__ = true;
 
-class Gutter extends React.Component {
-  render() {
+let Gutter = function (_React$Component) {
+  _inheritsLoose(Gutter, _React$Component);
+  function Gutter() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Gutter.prototype;
+  _proto.render = function render() {
     return React.createElement(MediaLayout, null, ({
       mediaSize,
       mediaSpec
     }) => {
       const spec = mediaSpec[mediaSize];
-
       if (!spec) {
         throw new Error(`mediaSpec.${mediaSize} is undefined`);
       }
-
       const {
         gutterWidth
       } = spec;
-
       if (!queryMatchesSize(this.props.mediaQuery, mediaSize)) {
         return null;
       }
-
       return React.createElement(Strut, {
         size: gutterWidth
       });
     });
-  }
-
-}
+  };
+  return Gutter;
+}(React.Component);
 Gutter.defaultProps = {
   mediaQuery: "all"
 };
 
-class Row extends React.Component {
-  render() {
+let Row = function (_React$Component) {
+  _inheritsLoose(Row, _React$Component);
+  function Row() {
+    return _React$Component.apply(this, arguments) || this;
+  }
+  var _proto = Row.prototype;
+  _proto.render = function render() {
     const {
       style,
       children
@@ -154,22 +170,18 @@ class Row extends React.Component {
       mediaSpec
     }) => {
       const spec = mediaSpec[mediaSize];
-
       if (!spec) {
         throw new Error(`mediaSpec.${mediaSize} is undefined`);
       }
-
       const {
         marginWidth,
         maxWidth,
         totalColumns
       } = spec;
       const shouldDisplay = queryMatchesSize(this.props.mediaQuery, mediaSize);
-
       if (!shouldDisplay) {
         return null;
       }
-
       const contents = typeof children === "function" ? children({
         mediaSize,
         totalColumns
@@ -187,9 +199,9 @@ class Row extends React.Component {
         size: marginWidth
       }));
     });
-  }
-
-}
+  };
+  return Row;
+}(React.Component);
 Row.defaultProps = {
   mediaQuery: "all"
 };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Cell } from "./components/cell";
+export { default as Row } from "./components/row";