@khanacademy/wonder-blocks-form 2.3.0 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "2.3.0",
+  "version": "2.3.1",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -15,21 +15,21 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.0",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.2.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.23",
-    "@khanacademy/wonder-blocks-layout": "^1.4.5",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
-    "@khanacademy/wonder-blocks-typography": "^1.1.27"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.1",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.0.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.24",
+    "@khanacademy/wonder-blocks-layout": "^1.4.6",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
+    "wb-dev-build-settings": "^0.2.0"
   },
-  "gitHead": "61090a61b6e9d2a735976d5fd53a15d06f10c853"
+  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
 }

package/src/components/checkbox-core.js

@@ -24,8 +24,7 @@ const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
 const StyledInput = addStyle("input");
 
 const checkboxCheck: IconAsset = {
-    small:
-        "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z",
+    small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z",
 };
 
 /**

package/src/components/labeled-text-field.js

@@ -265,11 +265,9 @@ type ExportProps = $Diff<
     WithForwardRef,
 >;
 
-const LabeledTextField: React.AbstractComponent<
-    ExportProps,
-    HTMLInputElement,
-> = React.forwardRef<ExportProps, HTMLInputElement>((props, ref) => (
-    <LabeledTextFieldInternal {...props} forwardedRef={ref} />
-));
+const LabeledTextField: React.AbstractComponent<ExportProps, HTMLInputElement> =
+    React.forwardRef<ExportProps, HTMLInputElement>((props, ref) => (
+        <LabeledTextFieldInternal {...props} forwardedRef={ref} />
+    ));
 
 export default LabeledTextField;

package/src/components/labeled-text-field.stories.js

@@ -16,7 +16,7 @@ export default {
     title: "Form / LabeledTextField",
 };
 
-export const text: StoryComponentType = () => {
+export const Text: StoryComponentType = () => {
     const [value, setValue] = React.useState("Khan");
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
@@ -37,7 +37,7 @@ export const text: StoryComponentType = () => {
     );
 };
 
-export const number: StoryComponentType = () => {
+export const Number: StoryComponentType = () => {
     const [value, setValue] = React.useState("18");
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
@@ -59,7 +59,7 @@ export const number: StoryComponentType = () => {
     );
 };
 
-export const password: StoryComponentType = () => {
+export const Password: StoryComponentType = () => {
     const [value, setValue] = React.useState("Password123");
 
     const validate = (value: string) => {
@@ -91,7 +91,7 @@ export const password: StoryComponentType = () => {
     );
 };
 
-export const email: StoryComponentType = () => {
+export const Email: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan@khan.org");
 
     const validate = (value: string) => {
@@ -121,7 +121,7 @@ export const email: StoryComponentType = () => {
     );
 };
 
-export const telephone: StoryComponentType = () => {
+export const Telephone: StoryComponentType = () => {
     const [value, setValue] = React.useState("123-456-7890");
 
     const validate = (value: string) => {
@@ -151,7 +151,7 @@ export const telephone: StoryComponentType = () => {
     );
 };
 
-export const error: StoryComponentType = () => {
+export const Error: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan");
 
     const validate = (value: string) => {
@@ -181,7 +181,7 @@ export const error: StoryComponentType = () => {
     );
 };
 
-export const disabled: StoryComponentType = () => (
+export const Disabled: StoryComponentType = () => (
     <LabeledTextField
         label="Name"
         description="Please enter your name"
@@ -192,7 +192,7 @@ export const disabled: StoryComponentType = () => (
     />
 );
 
-export const light: StoryComponentType = () => {
+export const Light: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
@@ -222,7 +222,7 @@ export const light: StoryComponentType = () => {
     );
 };
 
-export const customStyle: StoryComponentType = () => {
+export const CustomStyle: StoryComponentType = () => {
     const [firstName, setFirstName] = React.useState("");
     const [lastName, setLastName] = React.useState("");
 
@@ -257,7 +257,7 @@ export const customStyle: StoryComponentType = () => {
     );
 };
 
-export const ref: StoryComponentType = () => {
+export const Ref: StoryComponentType = () => {
     const [value, setValue] = React.useState("Khan");
     const inputRef = React.createRef();
 
@@ -292,7 +292,7 @@ export const ref: StoryComponentType = () => {
     );
 };
 
-export const readOnly: StoryComponentType = () => {
+export const ReadOnly: StoryComponentType = () => {
     const [value, setValue] = React.useState("Khan");
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
@@ -314,7 +314,7 @@ export const readOnly: StoryComponentType = () => {
     );
 };
 
-export const autoComplete: StoryComponentType = () => {
+export const AutoComplete: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
 
     const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {

package/src/components/text-field.js

@@ -316,11 +316,9 @@ type ExportProps = $Diff<
     WithForwardRef,
 >;
 
-const TextField: React.AbstractComponent<
-    ExportProps,
-    HTMLInputElement,
-> = React.forwardRef<ExportProps, HTMLInputElement>((props, ref) => (
-    <TextFieldInternal {...props} forwardedRef={ref} />
-));
+const TextField: React.AbstractComponent<ExportProps, HTMLInputElement> =
+    React.forwardRef<ExportProps, HTMLInputElement>((props, ref) => (
+        <TextFieldInternal {...props} forwardedRef={ref} />
+    ));
 
 export default TextField;

package/src/components/text-field.stories.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {View, Text} from "@khanacademy/wonder-blocks-core";
+import {View, Text as _Text} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -15,7 +15,7 @@ export default {
     title: "Form / TextField",
 };
 
-export const text: StoryComponentType = () => {
+export const Text: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
 
     const handleChange = (newValue: string) => {
@@ -40,7 +40,7 @@ export const text: StoryComponentType = () => {
     );
 };
 
-export const number: StoryComponentType = () => {
+export const Number: StoryComponentType = () => {
     const [value, setValue] = React.useState("12345");
 
     const handleChange = (newValue: string) => {
@@ -65,7 +65,7 @@ export const number: StoryComponentType = () => {
     );
 };
 
-export const password: StoryComponentType = () => {
+export const Password: StoryComponentType = () => {
     const [value, setValue] = React.useState("Password123");
     const [errorMessage, setErrorMessage] = React.useState();
     const [focused, setFocused] = React.useState(false);
@@ -118,14 +118,14 @@ export const password: StoryComponentType = () => {
             {!focused && errorMessage && (
                 <View>
                     <Strut size={Spacing.xSmall_8} />
-                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
                 </View>
             )}
         </View>
     );
 };
 
-export const email: StoryComponentType = () => {
+export const Email: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan@khanacademy.org");
     const [errorMessage, setErrorMessage] = React.useState();
     const [focused, setFocused] = React.useState(false);
@@ -176,14 +176,14 @@ export const email: StoryComponentType = () => {
             {!focused && errorMessage && (
                 <View>
                     <Strut size={Spacing.xSmall_8} />
-                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
                 </View>
             )}
         </View>
     );
 };
 
-export const telephone: StoryComponentType = () => {
+export const Telephone: StoryComponentType = () => {
     const [value, setValue] = React.useState("123-456-7890");
     const [errorMessage, setErrorMessage] = React.useState();
     const [focused, setFocused] = React.useState(false);
@@ -234,14 +234,14 @@ export const telephone: StoryComponentType = () => {
             {!focused && errorMessage && (
                 <View>
                     <Strut size={Spacing.xSmall_8} />
-                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
                 </View>
             )}
         </View>
     );
 };
 
-export const error: StoryComponentType = () => {
+export const Error: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan");
     const [errorMessage, setErrorMessage] = React.useState();
     const [focused, setFocused] = React.useState(false);
@@ -292,14 +292,14 @@ export const error: StoryComponentType = () => {
             {!focused && errorMessage && (
                 <View>
                     <Strut size={Spacing.xSmall_8} />
-                    <Text style={styles.errorMessage}>{errorMessage}</Text>
+                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
                 </View>
             )}
         </View>
     );
 };
 
-export const disabled: StoryComponentType = () => (
+export const Disabled: StoryComponentType = () => (
     <TextField
         id="tf-1"
         value=""
@@ -309,7 +309,7 @@ export const disabled: StoryComponentType = () => (
     />
 );
 
-export const light: StoryComponentType = () => {
+export const Light: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan@khanacademy.org");
     const [errorMessage, setErrorMessage] = React.useState();
     const [focused, setFocused] = React.useState(false);
@@ -361,14 +361,16 @@ export const light: StoryComponentType = () => {
             {!focused && errorMessage && (
                 <View>
                     <Strut size={Spacing.xSmall_8} />
-                    <Text style={styles.errorMessageLight}>{errorMessage}</Text>
+                    <_Text style={styles.errorMessageLight}>
+                        {errorMessage}
+                    </_Text>
                 </View>
             )}
         </View>
     );
 };
 
-export const customStyle: StoryComponentType = () => {
+export const CustomStyle: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
 
     const handleChange = (newValue: string) => {
@@ -394,7 +396,7 @@ export const customStyle: StoryComponentType = () => {
     );
 };
 
-export const ref: StoryComponentType = () => {
+export const Ref: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
     const inputRef: RefObject<typeof HTMLInputElement> = React.createRef();
 
@@ -433,7 +435,7 @@ export const ref: StoryComponentType = () => {
     );
 };
 
-export const readOnly: StoryComponentType = () => {
+export const ReadOnly: StoryComponentType = () => {
     const [value, setValue] = React.useState("Khan");
 
     const handleChange = (newValue: string) => {
@@ -459,7 +461,7 @@ export const readOnly: StoryComponentType = () => {
     );
 };
 
-export const autoComplete: StoryComponentType = () => {
+export const AutoComplete: StoryComponentType = () => {
     const [value, setValue] = React.useState("");
 
     const handleChange = (newValue: string) => {