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

Comparing version 2.4.1 to 2.4.2

components/clickable-behavior.js

 // @flow
-import React from "react";
+import * as React from "react";
 
@@ -54,3 +54,3 @@ // NOTE: Potentially add to this as more cases come up.
         handlers: ClickableHandlers,
-    ) => React$Element<*>,
+    ) => React.Node,
 
@@ -129,6 +129,6 @@ /**
     onTouchCancel: () => mixed,
-    onKeyDown: (e: SyntheticKeyboardEvent<*>) => mixed,
-    onKeyUp: (e: SyntheticKeyboardEvent<*>) => mixed,
-    onFocus: (e: SyntheticFocusEvent<*>) => mixed,
-    onBlur: (e: SyntheticFocusEvent<*>) => mixed,
+    onKeyDown: (e: SyntheticKeyboardEvent<>) => mixed,
+    onKeyUp: (e: SyntheticKeyboardEvent<>) => mixed,
+    onFocus: (e: SyntheticFocusEvent<>) => mixed,
+    onBlur: (e: SyntheticFocusEvent<>) => mixed,
     tabIndex: number,
@@ -331,3 +331,3 @@ |};
 
-    handleKeyDown = (e: SyntheticKeyboardEvent<*>) => {
+    handleKeyDown = (e: SyntheticKeyboardEvent<>) => {
         const keyCode = e.which || e.keyCode;
@@ -354,3 +354,3 @@ const {triggerOnEnter, triggerOnSpace} = getAppropriateTriggersForRole(
 
-    handleKeyUp = (e: SyntheticKeyboardEvent<*>) => {
+    handleKeyUp = (e: SyntheticKeyboardEvent<>) => {
         const keyCode = e.which || e.keyCode;
@@ -381,7 +381,7 @@ const {triggerOnEnter, triggerOnSpace} = getAppropriateTriggersForRole(
 
-    handleFocus = (e: SyntheticFocusEvent<*>) => {
+    handleFocus = (e: SyntheticFocusEvent<>) => {
         this.setState({focused: true});
     };
 
-    handleBlur = (e: SyntheticFocusEvent<*>) => {
+    handleBlur = (e: SyntheticFocusEvent<>) => {
         this.setState({focused: false, pressed: false});
@@ -388,0 +388,0 @@ };

dist/es/index.js

@@ -1,2 +0,2 @@
-import React__default, { createElement, Component, createContext } from 'react';
+import React__default, { Component, createElement, createContext } from 'react';
 import { StyleSheet, css } from 'aphrodite';
@@ -610,3 +610,3 @@ import { withRouter } from 'react-router-dom';
   return ClickableBehavior;
-}(React__default.Component);
+}(Component);
 
@@ -613,0 +613,0 @@ _defineProperty(ClickableBehavior, "defaultProps", {

generated-snapshot.test.js

@@ -11,5 +11,9 @@ // This file is auto-generated by gen-snapshot-tests.js
 jest.mock("react-dom");
+import {StyleSheet} from "aphrodite";
+import Color, {fade} from "@khanacademy/wonder-blocks-color";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
 import {
+    addStyle,
+    View,
     IDProvider,
-    View,
     UniqueIDProvider,
@@ -19,3 +23,3 @@ Text,
 } from "@khanacademy/wonder-blocks-core";
-import {StyleSheet} from "aphrodite";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {
@@ -33,3 +37,104 @@ Body,
     it("example 1", () => {
+        const styles = StyleSheet.create({
+            // default style for all instances of StyledInput
+            input: {
+                background: Color.white,
+                border: `1px solid ${Color.offBlack16}`,
+                borderRadius: Spacing.xxxSmall,
+                fontSize: Spacing.medium,
+                padding: Spacing.xSmall,
+            },
+        });
+        const StyledInput = addStyle("input", styles.input);
+        const example = <StyledInput type="text" placeholder="Lorem ipsum" />;
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 2", () => {
+        const styles = StyleSheet.create({
+            // default style for all instances of StyledInput
+            input: {
+                background: Color.white,
+                border: `1px solid ${Color.offBlack16}`,
+                borderRadius: Spacing.xxxSmall,
+                fontSize: Spacing.medium,
+                padding: Spacing.xSmall,
+            },
+            error: {
+                background: fade(Color.red, 0.16),
+                borderColor: Color.red,
+            },
+        });
+        const StyledInput = addStyle("input", styles.input);
         const example = (
+            <StyledInput
+                style={styles.error}
+                type="text"
+                placeholder="Lorem ipsum"
+            />
+        );
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 3", () => {
+        const StyledInput = addStyle("input");
+
+        class DynamicStyles extends React.Component {
+            constructor() {
+                super();
+                this.state = {
+                    error: false,
+                };
+                this.handleChange = this.handleChange.bind(this);
+            }
+
+            handleChange(checked) {
+                this.setState({
+                    error: checked,
+                });
+            }
+
+            render() {
+                return (
+                    <View>
+                        <Checkbox
+                            label="Click here to add the error style to the input"
+                            checked={this.state.error}
+                            onChange={this.handleChange}
+                        />
+                        <StyledInput
+                            style={[
+                                styles.input,
+                                this.state.error && styles.error,
+                            ]}
+                            type="text"
+                            placeholder="Lorem ipsum"
+                        />
+                    </View>
+                );
+            }
+        }
+
+        const styles = StyleSheet.create({
+            // default style for all instances of StyledInput
+            input: {
+                border: `1px solid ${Color.offBlack16}`,
+                borderRadius: Spacing.xxxSmall,
+                fontSize: Spacing.medium,
+                padding: Spacing.xSmall,
+            },
+            error: {
+                background: fade(Color.red, 0.16),
+                borderColor: Color.red,
+            },
+        });
+        const example = <DynamicStyles />;
+        const tree = renderer.create(example).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it("example 4", () => {
+        const example = (
             <View>
@@ -50,3 +155,3 @@ <IDProvider scope="field">
 
-    it("example 2", () => {
+    it("example 5", () => {
         const example = (
@@ -68,3 +173,3 @@ <View>
 
-    it("example 3", () => {
+    it("example 6", () => {
         const styles = StyleSheet.create({
@@ -100,3 +205,3 @@ container: {
 
-    it("example 4", () => {
+    it("example 7", () => {
         const example = (
@@ -115,3 +220,3 @@ <View>
 
-    it("example 5", () => {
+    it("example 8", () => {
         const example = (
@@ -127,3 +232,3 @@ <View>
 
-    it("example 6", () => {
+    it("example 9", () => {
         let providerRef = null;
@@ -176,3 +281,3 @@ const renders = [];
 
-    it("example 7", () => {
+    it("example 10", () => {
         let firstId = null;
@@ -214,3 +319,3 @@ let secondId = null;
 
-    it("example 8", () => {
+    it("example 11", () => {
         const children = ({get}) => (
@@ -240,3 +345,3 @@ <View>
 
-    it("example 9", () => {
+    it("example 12", () => {
         // TODO(somewhatabstract): Update this to be nice once we can get BodyMonospace
@@ -265,3 +370,3 @@ // to allow us to properly preserve whitespace or have an alternative. Or remove
 
-    it("example 10", () => {
+    it("example 13", () => {
         const styles = StyleSheet.create({
@@ -297,3 +402,3 @@ container: {
 
-    it("example 11", () => {
+    it("example 14", () => {
         const example = (
@@ -312,3 +417,3 @@ <View>
 
-    it("example 12", () => {
+    it("example 15", () => {
         const example = (
@@ -335,3 +440,3 @@ <WithSSRPlaceholder
 
-    it("example 13", () => {
+    it("example 16", () => {
         const example = (
@@ -351,3 +456,3 @@ <WithSSRPlaceholder placeholder={null}>
 
-    it("example 14", () => {
+    it("example 17", () => {
         const trackingArray = [];
@@ -430,3 +535,3 @@ const resultsId = "nossr-example-2-results";
 
-    it("example 15", () => {
+    it("example 18", () => {
         const trackingArray = [];
@@ -433,0 +538,0 @@ const resultsId = "nossr-example-3-results";

package.json

 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "design": "v1",
@@ -16,3 +16,3 @@ "publishConfig": {
   "dependencies": {
-    "@khanacademy/wonder-blocks-spacing": "^2.1.7"
+    "@khanacademy/wonder-blocks-spacing": "^2.1.8"
   },
@@ -19,0 +19,0 @@ "peerDependencies": {

util/add-style.js

@@ -10,3 +10,3 @@ // @flow
 // TODO(kevinb): have an a version which uses exact object types
-export default function addStyle<T: React.AbstractComponent<*> | string>(
+export default function addStyle<T: React.AbstractComponent<any> | string>(
     Component: T,
@@ -13,0 +13,0 @@ defaultStyle?: StyleType,

util/types.js

@@ -145,44 +145,44 @@ // @flow
 type MouseEvents = {|
-    onMouseDown?: (e: SyntheticMouseEvent<*>) => mixed,
-    onMouseUp?: (e: SyntheticMouseEvent<*>) => mixed,
-    onMouseMove?: (e: SyntheticMouseEvent<*>) => mixed,
-    onClick?: (e: SyntheticMouseEvent<*>) => mixed,
-    onDoubleClick?: (e: SyntheticMouseEvent<*>) => mixed,
-    onMouseEnter?: (e: SyntheticMouseEvent<*>) => mixed,
-    onMouseLeave?: (e: SyntheticMouseEvent<*>) => mixed,
-    onMouseOut?: (e: SyntheticMouseEvent<*>) => mixed,
-    onMouseOver?: (e: SyntheticMouseEvent<*>) => mixed,
-    onDrag?: (e: SyntheticMouseEvent<*>) => mixed,
-    onDragEnd?: (e: SyntheticMouseEvent<*>) => mixed,
-    onDragEnter?: (e: SyntheticMouseEvent<*>) => mixed,
-    onDragExit?: (e: SyntheticMouseEvent<*>) => mixed,
-    onDragLeave?: (e: SyntheticMouseEvent<*>) => mixed,
-    onDragOver?: (e: SyntheticMouseEvent<*>) => mixed,
-    onDragStart?: (e: SyntheticMouseEvent<*>) => mixed,
-    onDrop?: (e: SyntheticMouseEvent<*>) => mixed,
+    onMouseDown?: (e: SyntheticMouseEvent<>) => mixed,
+    onMouseUp?: (e: SyntheticMouseEvent<>) => mixed,
+    onMouseMove?: (e: SyntheticMouseEvent<>) => mixed,
+    onClick?: (e: SyntheticMouseEvent<>) => mixed,
+    onDoubleClick?: (e: SyntheticMouseEvent<>) => mixed,
+    onMouseEnter?: (e: SyntheticMouseEvent<>) => mixed,
+    onMouseLeave?: (e: SyntheticMouseEvent<>) => mixed,
+    onMouseOut?: (e: SyntheticMouseEvent<>) => mixed,
+    onMouseOver?: (e: SyntheticMouseEvent<>) => mixed,
+    onDrag?: (e: SyntheticMouseEvent<>) => mixed,
+    onDragEnd?: (e: SyntheticMouseEvent<>) => mixed,
+    onDragEnter?: (e: SyntheticMouseEvent<>) => mixed,
+    onDragExit?: (e: SyntheticMouseEvent<>) => mixed,
+    onDragLeave?: (e: SyntheticMouseEvent<>) => mixed,
+    onDragOver?: (e: SyntheticMouseEvent<>) => mixed,
+    onDragStart?: (e: SyntheticMouseEvent<>) => mixed,
+    onDrop?: (e: SyntheticMouseEvent<>) => mixed,
 |};
 
 type KeyboardEvents = {|
-    onKeyDown?: (e: SyntheticKeyboardEvent<*>) => mixed,
-    onKeyPress?: (e: SyntheticKeyboardEvent<*>) => mixed,
-    onKeyUp?: (e: SyntheticKeyboardEvent<*>) => mixed,
+    onKeyDown?: (e: SyntheticKeyboardEvent<>) => mixed,
+    onKeyPress?: (e: SyntheticKeyboardEvent<>) => mixed,
+    onKeyUp?: (e: SyntheticKeyboardEvent<>) => mixed,
 |};
 
 type InputEvents = {|
-    onChange?: (e: SyntheticInputEvent<*>) => mixed,
-    onInput?: (e: SyntheticInputEvent<*>) => mixed,
-    onInvalid?: (e: SyntheticInputEvent<*>) => mixed,
-    onSubmit?: (e: SyntheticInputEvent<*>) => mixed,
+    onChange?: (e: SyntheticInputEvent<>) => mixed,
+    onInput?: (e: SyntheticInputEvent<>) => mixed,
+    onInvalid?: (e: SyntheticInputEvent<>) => mixed,
+    onSubmit?: (e: SyntheticInputEvent<>) => mixed,
 |};
 
 type TouchEvents = {|
-    onTouchCancel?: (e: SyntheticTouchEvent<*>) => mixed,
-    onTouchEnd?: (e: SyntheticTouchEvent<*>) => mixed,
-    onTouchMove?: (e: SyntheticTouchEvent<*>) => mixed,
-    onTouchStart?: (e: SyntheticTouchEvent<*>) => mixed,
+    onTouchCancel?: (e: SyntheticTouchEvent<>) => mixed,
+    onTouchEnd?: (e: SyntheticTouchEvent<>) => mixed,
+    onTouchMove?: (e: SyntheticTouchEvent<>) => mixed,
+    onTouchStart?: (e: SyntheticTouchEvent<>) => mixed,
 |};
 
 type FocusEvents = {|
-    onFocus?: (e: SyntheticFocusEvent<*>) => mixed,
-    onBlur?: (e: SyntheticFocusEvent<*>) => mixed,
+    onFocus?: (e: SyntheticFocusEvent<>) => mixed,
+    onBlur?: (e: SyntheticFocusEvent<>) => mixed,
 |};
@@ -189,0 +189,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

326391

increased by4.93%

Number of package files

43

increased by2.38%

Lines of code

6645

increased by1.5%

Dependency changes

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