@khanacademy/wonder-blocks-layout - npm Package Compare versions

Comparing version 1.3.6 to 1.3.7

docs.md

@@ -5,3 +5,3 @@ ## Spring and Strut
 `Spring` is infinitely compressible and expands to fill available space while `Strut`
-is uncompressible and occupies a fixed amount of space specified by its `size` prop.
+is incompressible and occupies a fixed amount of space specified by its `size` prop.
 
@@ -41,6 +41,6 @@ ```js
 
-`MediaLayout` is a container component takes in a `styleSheets` object whose keys are
-media sizes.  I 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 object.
+`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.
 
@@ -63,8 +63,12 @@ Valid keys for the `styleSheets` object are (in order of precedence):
 
-By default, `MediaLayout` uses `MEDIA_DEFAULT_SPEC` but others can be specified using
-`MediaLayoutContext.Provider`.  See media-layout-context.test.js for examples of how
-to do this.
+### Examples
 
+#### 1. Switching styles for different screen sizes
+
+By default, `MediaLayout` uses `MEDIA_DEFAULT_SPEC`. Here you can see a simple
+example that changes styles depending on the current spec.
+
 ```js
 import {StyleSheet} from "aphrodite";
+import Color from "@khanacademy/wonder-blocks-color";
 import {View} from "@khanacademy/wonder-blocks-core";
@@ -76,3 +80,4 @@ import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
         test: {
-            backgroundColor: "blue",
+            backgroundColor: Color.darkBlue,
+            color: Color.white,
         },
@@ -82,3 +87,4 @@ }),
         test: {
-            backgroundColor: "green",
+            backgroundColor: Color.blue,
+            color: Color.white,
         },
@@ -88,3 +94,4 @@ }),
         test: {
-            backgroundColor: "orange",
+            backgroundColor: Color.lightBlue,
+            color: Color.white,
         },
@@ -100,1 +107,149 @@ }),
 ```
+
+#### 2. Defining shared styles for all sizes
+
+You can use the `all` key to define styles for all the different sizes. This
+means that by using this key, all the sizes (small, medium, large) will use the
+styles defined in `all`, and in case there are duplicate properties, more
+specific sizes will take more importance.
+
+```js
+import {StyleSheet} from "aphrodite";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {MediaLayout} from "@khanacademy/wonder-blocks-layout";
+
+const styleSheets = {
+    all: StyleSheet.create({
+        // use shared styles for all sizes
+        test: {
+            color: Color.white,
+            padding: Spacing.medium,
+        },
+    }),
+
+    large: StyleSheet.create({
+        // override the `padding` prop` here
+        test: {
+            backgroundColor: Color.darkBlue,
+            padding: Spacing.xxLarge,
+        },
+    }),
+
+    medium: StyleSheet.create({
+        test: {
+            backgroundColor: Color.blue,
+        },
+    }),
+
+    small: StyleSheet.create({
+        test: {
+            backgroundColor: Color.lightBlue,
+        },
+    }),
+};
+
+<MediaLayout styleSheets={styleSheets}>
+    {({styles}) => {
+        return <View style={styles.test}>Hello, world!</View>;
+    }}
+</MediaLayout>
+```
+
+#### 3. Using a custom spec:
+
+There are cases when you might need to use a custom media query spec. For that
+situation you can define your own custom `MEDIA_SPEC`. You just need to use the
+`MediaLayoutContext.Provider` to specify this spec value.
+
+**NOTE:** Make sure to import the `MediaSpec` and `MediaLayoutContextValue` type
+definitions:
+
+```js static
+// 1. Import the required types
+import type {MediaSpec, MediaLayoutContextValue} from "@khanacademy/wonder-blocks-layout";
+
+// 2. Add the `MediaSpect` type to the MEDIA_CUSTOM_SPEC object
+const MEDIA_CUSTOM_SPEC: MediaSpec = {
+    ...
+};
+
+// 3. Make sure to add the type `MediaLayoutContextValue`
+const contextValue: MediaLayoutContextValue = {
+    ssrSize: "large",
+    mediaSpec: MEDIA_CUSTOM_SPEC,
+};
+```
+
+```js
+import {StyleSheet} from "aphrodite";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {Body, HeadingLarge, HeadingSmall} from "@khanacademy/wonder-blocks-typography";
+import Color from "@khanacademy/wonder-blocks-color";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {MediaLayout, MediaLayoutContext} from "@khanacademy/wonder-blocks-layout";
+
+// If you're using flow, make sure to import these types by uncommenting the following line
+// import type {MediaSpec, MediaLayoutContextValue} from "@khanacademy/wonder-blocks-layout";
+
+const styleSheets = {
+    large: StyleSheet.create({
+        example: {
+            alignItems: "center",
+            backgroundColor: Color.darkBlue,
+            color: Color.white,
+            padding: Spacing.xxxLarge,
+        },
+    }),
+
+    small: StyleSheet.create({
+        example: {
+            backgroundColor: Color.lightBlue,
+            padding: Spacing.small,
+        },
+    }),
+};
+
+// Custom media spec definition
+// Make sure to add the type `MediaSpec`
+const MEDIA_CUSTOM_SPEC = {
+    small: {
+        query: "(max-width: 767px)",
+        totalColumns: 4,
+        gutterWidth: Spacing.medium,
+        marginWidth: Spacing.medium,
+    },
+    large: {
+        query: "(min-width: 768px)",
+        totalColumns: 12,
+        gutterWidth: Spacing.xLarge,
+        marginWidth: Spacing.xxLarge,
+    },
+};
+
+// Make sure to add the type `MediaLayoutContextValue`
+const contextValue = {
+    ssrSize: "large",
+    mediaSpec: MEDIA_CUSTOM_SPEC,
+};
+
+<MediaLayoutContext.Provider value={contextValue}>
+    <MediaLayout styleSheets={styleSheets}>
+        {({mediaSize, styles}) => {
+            const HeadingComponent = (mediaSize === "small") ? HeadingSmall : HeadingLarge;
+
+            return (
+                <View style={styles.example}>
+                    <HeadingComponent>Current mediaSpec: {mediaSize}</HeadingComponent>
+                    <Body tag="p">
+                        {
+                            "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+                        }
+                    </Body>
+                </View>
+            );
+        }}
+    </MediaLayout>
+</MediaLayoutContext.Provider>
+```

generated-snapshot.test.js

@@ -50,3 +50,4 @@ // This file is auto-generated by gen-snapshot-tests.js
                 test: {
-                    backgroundColor: "blue",
+                    backgroundColor: Color.darkBlue,
+                    color: Color.white,
                 },
@@ -56,3 +57,4 @@ }),
                 test: {
-                    backgroundColor: "green",
+                    backgroundColor: Color.blue,
+                    color: Color.white,
                 },
@@ -62,3 +64,4 @@ }),
                 test: {
-                    backgroundColor: "orange",
+                    backgroundColor: Color.lightBlue,
+                    color: Color.white,
                 },
@@ -79,2 +82,40 @@ }),
     it("example 3", () => {
+        const styleSheets = {
+            all: StyleSheet.create({
+                // use shared styles for all sizes
+                test: {
+                    color: Color.white,
+                    padding: Spacing.medium,
+                },
+            }),
+            large: StyleSheet.create({
+                // override the `padding` prop` here
+                test: {
+                    backgroundColor: Color.darkBlue,
+                    padding: Spacing.xxLarge,
+                },
+            }),
+            medium: StyleSheet.create({
+                test: {
+                    backgroundColor: Color.blue,
+                },
+            }),
+            small: StyleSheet.create({
+                test: {
+                    backgroundColor: Color.lightBlue,
+                },
+            }),
+        };
+        const example = (
+            <MediaLayout styleSheets={styleSheets}>
+                {({styles}) => {
+                    return <View style={styles.test}>Hello, world!</View>;
+                }}
+            </MediaLayout>
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 4", () => {
         const styles = StyleSheet.create({
@@ -98,3 +139,3 @@ row: {
 
-    it("example 4", () => {
+    it("example 5", () => {
         const styles = StyleSheet.create({
@@ -101,0 +142,0 @@ row: {

package.json

 {
   "name": "@khanacademy/wonder-blocks-layout",
-  "version": "1.3.6",
+  "version": "1.3.7",
   "design": "v1",
@@ -16,7 +16,7 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-core": "^2.4.1",
-    "@khanacademy/wonder-blocks-spacing": "^2.1.7"
+    "@khanacademy/wonder-blocks-core": "^2.4.2",
+    "@khanacademy/wonder-blocks-spacing": "^2.1.8"
   },
   "devDependencies": {
-    "@khanacademy/wonder-blocks-button": "^2.4.3",
+    "@khanacademy/wonder-blocks-button": "^2.4.4",
     "wb-dev-build-settings": "^0.0.2"
@@ -23,0 +23,0 @@ },

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

128385

increased by5.4%

Lines of code

2601

increased by1.56%

Dependency changes

• Updated@khanacademy/wonder-blocks-core@^2.4.2

• Updated@khanacademy/wonder-blocks-spacing@^2.1.8