@khanacademy/wonder-blocks-layout 1.4.6 → 1.4.9

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @khanacademy/wonder-blocks-layout
+
+## 1.4.9
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.3.1
+
+## 1.4.8
+
+### Patch Changes
+
+-   Updated dependencies [246a921d]
+    -   @khanacademy/wonder-blocks-core@4.3.0
+
+## 1.4.7
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-core@4.2.1

package/dist/es/index.js

@@ -1,14 +1,11 @@
 import _extends from '@babel/runtime/helpers/extends';
-import { createContext, Component, createElement } from 'react';
+import * as React from 'react';
 import Spacing from '@khanacademy/wonder-blocks-spacing';
 import { StyleSheet } from 'aphrodite';
 import { View } from '@khanacademy/wonder-blocks-core';
 
-// All possible valid media sizes
 const VALID_MEDIA_SIZES = ["small", "medium", "large"];
-const mediaDefaultSpecLargeMarginWidth = Spacing.large_24; // The default spec for media layout, currently available in
-// three different settings (roughly mobile, tablet, and desktop).
-
+const mediaDefaultSpecLargeMarginWidth = Spacing.large_24;
 const MEDIA_DEFAULT_SPEC = {
   small: {
     query: "(max-width: 767px)",
@@ -29,8 +26,7 @@ const MEDIA_DEFAULT_SPEC = {
     marginWidth: mediaDefaultSpecLargeMarginWidth,
     maxWidth: 1120 + mediaDefaultSpecLargeMarginWidth * 2
   }
-}; // Used for internal tools
-
+};
 const MEDIA_INTERNAL_SPEC = {
   large: {
     query: "(min-width: 1px)",
@@ -38,8 +34,7 @@ const MEDIA_INTERNAL_SPEC = {
     gutterWidth: Spacing.xLarge_32,
     marginWidth: Spacing.medium_16
   }
-}; // The default used for modals
-
+};
 const MEDIA_MODAL_SPEC = {
   small: {
     query: "(max-width: 767px)",
@@ -59,24 +54,13 @@ const defaultContext = {
   ssrSize: "large",
   mediaSpec: MEDIA_DEFAULT_SPEC
 };
-var MediaLayoutContext = /*#__PURE__*/createContext(defaultContext);
+var MediaLayoutContext = React.createContext(defaultContext);
 
 const queries = [].concat(Object.values(MEDIA_DEFAULT_SPEC).map(spec => spec.query), Object.values(MEDIA_INTERNAL_SPEC).map(spec => spec.query), Object.values(MEDIA_MODAL_SPEC).map(spec => spec.query));
-const mediaQueryLists = {}; // eslint-disable-next-line flowtype/require-exact-type
-
-// If for some reason we're not able to resolve the current media size we
-// fall back to this state.
+const mediaQueryLists = {};
 const DEFAULT_SIZE = "large";
 
-/**
- * `MediaLayout` is responsible for changing the rendering of contents at
- * differently sized viewports.  `MediaLayoutContext.Provider` can be used
- * to specify different breakpoint configurations.  By default it uses
- * `MEDIA_DEFAULT_SPEC`.  See media-layout-context.js for additiional options.
- */
-class MediaLayoutInternal extends Component {
-  // A collection of thunks that's used to clean up event listeners
-  // when the component is unmounted.
+class MediaLayoutInternal extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -86,11 +70,10 @@ class MediaLayoutInternal extends Component {
   }
 
   componentDidMount() {
-    // TODO(WB-534): handle changes to mediaSpec prop
     const entries = Object.entries(this.props.mediaSpec);
 
     for (const [size, spec] of entries) {
-      const mql = mediaQueryLists[spec.query]; // during SSR there are no MediaQueryLists
+      const mql = mediaQueryLists[spec.query];
 
       if (!mql) {
         continue;
@@ -110,14 +93,10 @@ class MediaLayoutInternal extends Component {
   }
 
   componentWillUnmount() {
-    // Remove our listeners.
     this.cleanupThunks.forEach(cleaup => cleaup());
   }
 
   getCurrentSize(spec) {
-    // If we have a state with the current size in it then we always want
-    // to use that. This will happen if the viewport changes sizes after
-    // we've already initialized.
     if (this.state.size) {
       return this.state.size;
     } else {
@@ -133,48 +112,33 @@ class MediaLayoutInternal extends Component {
     }
 
     return DEFAULT_SIZE;
-  } // We assume that we're running on the server (or, at least, an unsupported
-  // environment) if there is no window object or matchMedia function
-  // available.
-
+  }
 
   isServerSide() {
     return typeof window === "undefined" || !window.matchMedia;
-  } // Generate a mock Aphrodite StyleSheet based upon the current mediaSize
-  // We do this by looking at all of the stylesheets specified in the
-  // styleSheets prop and then all of the individual styles. We merge the
-  // styles together
-  // TODO(WB-533): move to util.js to make it easier to test
-
+  }
 
   getMockStyleSheet(mediaSize) {
     const {
       styleSheets
     } = this.props;
-    const mockStyleSheet = {}; // If no stylesheets were specified then we just return an empty object
+    const mockStyleSheet = {};
 
     if (!styleSheets) {
       return mockStyleSheet;
-    } // Go through all of the stylesheets that were specified
-
+    }
 
     for (const styleSize of Object.keys(styleSheets)) {
       const styleSheet = styleSheets[styleSize];
 
       if (!styleSheet) {
         continue;
-      } // And then through each key of each stylesheet
-
+      }
 
       for (const name of Object.keys(styleSheet)) {
-        if ( // $FlowIgnore[method-unbinding]
-        Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
+        if (Object.prototype.hasOwnProperty.call(mockStyleSheet, name)) {
           continue;
-        } // We create an entry that combines the values from all of
-        // the stylesheets together in least-specific to most-specific
-        // priority (thus small/medium/large styles will always have
-        // precedence over "all" or mdOrSmaller/mdOrLarger/etc.).
-
+        }
 
         mockStyleSheet[name] = [styleSheets.all && styleSheets.all[name], mediaSize === "small" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.small && styleSheets.small[name]], mediaSize === "medium" && [styleSheets.mdOrSmaller && styleSheets.mdOrSmaller[name], styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.medium && styleSheets.medium[name]], mediaSize === "large" && [styleSheets.mdOrLarger && styleSheets.mdOrLarger[name], styleSheets.large && styleSheets.large[name]]];
       }
@@ -189,23 +153,15 @@ class MediaLayoutInternal extends Component {
       mediaSpec,
       ssrSize,
       overrideSize
-    } = this.props; // We need to create the MediaQueryLists during the first render in order
-    // to query whether any of them match.
+    } = this.props;
 
     if (!this.isServerSide()) {
       for (const query of queries.filter(query => !mediaQueryLists[query])) {
         mediaQueryLists[query] = window.matchMedia(query);
       }
-    } // We need to figure out what the current media size is
-    // If an override has been specified, we use that.
-    // If we're rendering on the server then we use the default
-    // SSR rendering size.
-    // Otherwise we attempt to get the current size based on
-    // the current MediaSpec.
-
-
-    const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec); // Generate a mock stylesheet
+    }
 
+    const mediaSize = overrideSize || this.isServerSide() && ssrSize || this.getCurrentSize(mediaSpec);
     const styles = this.getMockStyleSheet(mediaSize);
     return children({
       mediaSize,
@@ -214,19 +170,15 @@ class MediaLayoutInternal extends Component {
     });
   }
 
-} // gen-snapshot-tests.js only understands `export default class ...`
-
+}
 
-class MediaLayout extends Component {
+class MediaLayout extends React.Component {
   render() {
-    // We listen to the MediaLayoutContext to see what defaults we're
-    // being given (this can be overriden by wrapping this component in
-    // a MediaLayoutContext.Consumer).
-    return /*#__PURE__*/createElement(MediaLayoutContext.Consumer, null, ({
+    return React.createElement(MediaLayoutContext.Consumer, null, ({
       overrideSize,
       ssrSize,
       mediaSpec
-    }) => /*#__PURE__*/createElement(MediaLayoutInternal, _extends({}, this.props, {
+    }) => React.createElement(MediaLayoutInternal, _extends({}, this.props, {
       overrideSize: overrideSize,
       ssrSize: ssrSize,
       mediaSpec: mediaSpec
@@ -235,17 +187,12 @@ class MediaLayout extends Component {
 
 }
 
-/**
- * Expands to fill space between sibling components.
- *
- * Assumes parent is a View.
- */
-class Spring extends Component {
+class Spring extends React.Component {
   render() {
     const {
       style
     } = this.props;
-    return /*#__PURE__*/createElement(View, {
+    return React.createElement(View, {
       "aria-hidden": "true",
       style: [styles.grow, style]
     });
@@ -258,18 +205,13 @@ const styles = StyleSheet.create({
   }
 });
 
-/**
- * A component for inserting fixed space between components.
- *
- * Assumes parent is a View.
- */
-class Strut extends Component {
+class Strut extends React.Component {
   render() {
     const {
       size,
       style
     } = this.props;
-    return /*#__PURE__*/createElement(View, {
+    return React.createElement(View, {
       "aria-hidden": "true",
       style: [strutStyle(size), style]
     });
@@ -288,16 +230,6 @@ const strutStyle = size => {
   };
 };
 
-/**
- * Return where a media size matches a media query.
- *
- * examples:
- * - `queryMatchesSize("all", "small")` returns `true`
- * - `queryMatchesSize("mdOrLarger", "small")` returns `false`
- *
- * @param {MediaQuery} mediaQuery
- * @param {MediaSize} mediaSize
- */
 const queryMatchesSize = (mediaQuery, mediaSize) => {
   switch (mediaQuery) {
     case "all":

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-layout",
-  "version": "1.4.6",
+  "version": "1.4.9",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -14,17 +14,16 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-core": "^4.0.0",
+    "@khanacademy/wonder-blocks-core": "^4.3.1",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.2.0"
+    "wb-dev-build-settings": "^0.4.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "author": "",
-  "license": "MIT",
-  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
+  "license": "MIT"
 }

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

@@ -22,8 +22,8 @@ exports[`wonder-blocks-layout example 1 1`] = `
   }
 >
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -121,8 +121,8 @@ exports[`wonder-blocks-layout example 1 1`] = `
     }
   />
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -220,8 +220,8 @@ exports[`wonder-blocks-layout example 1 1`] = `
     }
   />
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -314,8 +314,8 @@ exports[`wonder-blocks-layout example 1 1`] = `
     }
   />
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}
@@ -413,8 +413,8 @@ exports[`wonder-blocks-layout example 1 1`] = `
     }
   />
   <button
+    aria-disabled={false}
     className=""
-    disabled={false}
     onBlur={[Function]}
     onClick={[Function]}
     onDragStart={[Function]}

package/src/components/__tests__/media-layout-context.test.js

@@ -2,6 +2,7 @@
 import * as React from "react";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import MediaLayout from "../media-layout.js";
 import MediaLayoutContext from "../media-layout-context.js";

package/src/components/__tests__/media-layout.test.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import {View} from "@khanacademy/wonder-blocks-core";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import MediaLayout from "../media-layout.js";
 import {resizeWindow, matchMedia} from "../../util/test-util.js";

package/src/components/spring.stories.js

@@ -32,7 +32,7 @@ const styles = StyleSheet.create({
     },
 });
 
-export const simple: StoryComponentType = () => (
+export const Simple: StoryComponentType = () => (
     <View style={styles.column}>
         <View style={styles.row}>
             <Button>Hello, world!</Button>
@@ -48,7 +48,7 @@ export const simple: StoryComponentType = () => (
     </View>
 );
 
-export const withStyle: StoryComponentType = () => (
+export const WithStyle: StoryComponentType = () => (
     <View style={styles.column}>
         <View style={styles.row}>
             <Button>Hello, world!</Button>
@@ -68,14 +68,14 @@ export const withStyle: StoryComponentType = () => (
     </View>
 );
 
-simple.parameters = {
+Simple.parameters = {
     chromatic: {
         // we don't need screenshots because this story only tests behavior.
         disableSnapshot: true,
     },
 };
 
-withStyle.parameters = {
+WithStyle.parameters = {
     chromatic: {
         // we don't need screenshots because this story only tests behavior.
         disableSnapshot: true,

package/src/components/strut.stories.js

@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
 const smallSize = Spacing.medium_16;
 const largeSize = Spacing.xxxLarge_64;
 
-export const simple: StoryComponentType = () => (
+export const Simple: StoryComponentType = () => (
     <View style={styles.column}>
         <View style={styles.row}>
             <Button>Hello, world!</Button>
@@ -59,7 +59,7 @@ export const simple: StoryComponentType = () => (
     </View>
 );
 
-export const withStyle: StoryComponentType = () => (
+export const WithStyle: StoryComponentType = () => (
     <View style={styles.column}>
         <View style={styles.row}>
             <Button>Hello, world!</Button>
@@ -83,14 +83,14 @@ export const withStyle: StoryComponentType = () => (
     </View>
 );
 
-simple.parameters = {
+Simple.parameters = {
     chromatic: {
         // we don't need screenshots because this story only tests behavior.
         disableSnapshot: true,
     },
 };
 
-withStyle.parameters = {
+WithStyle.parameters = {
     chromatic: {
         // we don't need screenshots because this story only tests behavior.
         disableSnapshot: true,

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.