@khanacademy/wonder-blocks-form 4.3.19 → 4.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.3.19",
+  "version": "4.4.1",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.0.12",
+    "@khanacademy/wonder-blocks-clickable": "^4.0.13",
     "@khanacademy/wonder-blocks-color": "^3.0.0",
     "@khanacademy/wonder-blocks-core": "^6.3.1",
     "@khanacademy/wonder-blocks-icon": "^4.0.1",
-    "@khanacademy/wonder-blocks-layout": "^2.0.25",
-    "@khanacademy/wonder-blocks-spacing": "^4.0.1",
+    "@khanacademy/wonder-blocks-layout": "^2.0.26",
+    "@khanacademy/wonder-blocks-tokens": "^0.2.0",
     "@khanacademy/wonder-blocks-typography": "^2.1.10"
   },
   "peerDependencies": {

package/src/components/__tests__/labeled-text-field.test.tsx

@@ -3,7 +3,7 @@ import {render, screen, fireEvent} from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 
 import {StyleSheet} from "aphrodite";
-import Color from "@khanacademy/wonder-blocks-color";
+import {color} from "@khanacademy/wonder-blocks-tokens";
 import LabeledTextField from "../labeled-text-field";
 
 describe("LabeledTextField", () => {
@@ -394,7 +394,7 @@ describe("LabeledTextField", () => {
 
         // Assert
         expect(textField).toHaveStyle({
-            boxShadow: `0px 0px 0px 1px ${Color.blue}, 0px 0px 0px 2px ${Color.white}`,
+            boxShadow: `0px 0px 0px 1px ${color.blue}, 0px 0px 0px 2px ${color.white}`,
         });
     });
 

package/src/components/__tests__/text-field.test.tsx

@@ -105,6 +105,20 @@ describe("TextField", () => {
         expect(input).toHaveAttribute("type", type);
     });
 
+    it("name prop is passed to the input element", () => {
+        // Arrange
+        const name = "some-name";
+
+        // Act
+        render(
+            <TextField id={"tf-1"} name={name} value="" onChange={() => {}} />,
+        );
+
+        // Assert
+        const input = screen.getByRole("textbox");
+        expect(input).toHaveAttribute("name", name);
+    });
+
     it("value prop is passed to the input element", () => {
         // Arrange
         const value = "Text";

package/src/components/checkbox-core.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
+import {mix} from "@khanacademy/wonder-blocks-color";
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import checkIcon from "@phosphor-icons/core/bold/check-bold.svg";
 import minusIcon from "@phosphor-icons/core/bold/minus-bold.svg";
 
@@ -26,12 +26,12 @@ function mapCheckedToAriaChecked(value: Checked): AriaChecked {
     }
 }
 
-const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
+const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = color;
 
 // The checkbox size
-const size = Spacing.medium_16;
+const size = spacing.medium_16;
 // The check icon size
-const checkSize = Spacing.small_12;
+const checkSize = spacing.small_12;
 
 const StyledInput = addStyle("input");
 
@@ -153,10 +153,10 @@ const sharedStyles = StyleSheet.create({
     },
 });
 
-const fadedBlue = mix(fade(blue, 0.16), white);
-const activeBlue = mix(offBlack32, blue);
-const fadedRed = mix(fade(red, 0.08), white);
-const activeRed = mix(offBlack32, red);
+const fadedBlue = mix(color.fadedBlue16, white);
+const activeBlue = color.activeBlue;
+const fadedRed = mix(color.fadedRed8, white);
+const activeRed = color.activeRed;
 
 const colors = {
     default: {

package/src/components/checkbox-group.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import {View, addStyle} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
@@ -147,7 +147,7 @@ const CheckboxGroup = React.forwardRef(function CheckboxGroup(
                     <LabelSmall style={styles.error}>{errorMessage}</LabelSmall>
                 )}
                 {(label || description || errorMessage) && (
-                    <Strut size={Spacing.small_12} />
+                    <Strut size={spacing.small_12} />
                 )}
 
                 {allChildren.map((child, index) => {

package/src/components/choice-internal.tsx

@@ -1,10 +1,9 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import Color from "@khanacademy/wonder-blocks-color";
 import {View, UniqueIDProvider} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 import CheckboxCore from "./checkbox-core";
@@ -147,7 +146,7 @@ type Props = AriaProps & {
                                 error={error}
                                 ref={ref}
                             />
-                            <Strut size={Spacing.xSmall_8} />
+                            <Strut size={spacing.xSmall_8} />
                             {label && getLabel(uniqueId)}
                         </View>
                         {description && getDescription(descriptionId)}
@@ -172,13 +171,13 @@ const styles = StyleSheet.create({
         marginTop: -2,
     },
     disabledLabel: {
-        color: Color.offBlack32,
+        color: color.offBlack32,
     },
     description: {
         // 16 for icon + 8 for spacing strut
-        marginLeft: Spacing.medium_16 + Spacing.xSmall_8,
-        marginTop: Spacing.xxxSmall_4,
-        color: Color.offBlack64,
+        marginLeft: spacing.medium_16 + spacing.xSmall_8,
+        marginTop: spacing.xxxSmall_4,
+        color: color.offBlack64,
     },
 });
 

package/src/components/field-heading.tsx

@@ -2,9 +2,8 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {View, addStyle, StyleType} 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";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
 type Props = {
@@ -73,7 +72,7 @@ export default class FieldHeading extends React.Component<Props> {
                     {label}
                     {required && requiredIcon}
                 </LabelMedium>
-                <Strut size={Spacing.xxxSmall_4} />
+                <Strut size={spacing.xxxSmall_4} />
             </React.Fragment>
         );
     }
@@ -93,7 +92,7 @@ export default class FieldHeading extends React.Component<Props> {
                 >
                     {description}
                 </LabelSmall>
-                <Strut size={Spacing.xxxSmall_4} />
+                <Strut size={spacing.xxxSmall_4} />
             </React.Fragment>
         );
     }
@@ -107,7 +106,7 @@ export default class FieldHeading extends React.Component<Props> {
 
         return (
             <React.Fragment>
-                <Strut size={Spacing.small_12} />
+                <Strut size={spacing.small_12} />
                 <LabelSmall
                     style={styles.error}
                     role="alert"
@@ -127,7 +126,7 @@ export default class FieldHeading extends React.Component<Props> {
             <View style={style}>
                 {this.renderLabel()}
                 {this.maybeRenderDescription()}
-                <Strut size={Spacing.xSmall_8} />
+                <Strut size={spacing.xSmall_8} />
                 {field}
                 {this.maybeRenderError()}
             </View>
@@ -137,15 +136,15 @@ export default class FieldHeading extends React.Component<Props> {
 
 const styles = StyleSheet.create({
     label: {
-        color: Color.offBlack,
+        color: color.offBlack,
     },
     description: {
-        color: Color.offBlack64,
+        color: color.offBlack64,
     },
     error: {
-        color: Color.red,
+        color: color.red,
     },
     required: {
-        color: Color.red,
+        color: color.red,
     },
 });

package/src/components/group-styles.ts

@@ -1,7 +1,6 @@
 import {StyleSheet} from "aphrodite";
 
-import Color from "@khanacademy/wonder-blocks-color";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 
 import type {StyleDeclaration} from "aphrodite";
 
@@ -17,17 +16,17 @@ const styles: StyleDeclaration = StyleSheet.create({
     },
 
     description: {
-        marginTop: Spacing.xxxSmall_4,
-        color: Color.offBlack64,
+        marginTop: spacing.xxxSmall_4,
+        color: color.offBlack64,
     },
 
     error: {
-        marginTop: Spacing.xxxSmall_4,
-        color: Color.red,
+        marginTop: spacing.xxxSmall_4,
+        color: color.red,
     },
 
     defaultLineGap: {
-        marginTop: Spacing.xSmall_8,
+        marginTop: spacing.xSmall_8,
     },
 });
 

package/src/components/radio-core.tsx

@@ -1,12 +1,13 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
+import {mix} from "@khanacademy/wonder-blocks-color";
+import {color} from "@khanacademy/wonder-blocks-tokens";
 import {addStyle} from "@khanacademy/wonder-blocks-core";
 
 import type {ChoiceCoreProps, Checked} from "../util/types";
 
-const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = Color;
+const {blue, red, white, offWhite, offBlack16, offBlack32, offBlack50} = color;
 
 const StyledInput = addStyle("input");
 
@@ -90,20 +91,18 @@ const sharedStyles = StyleSheet.create({
         borderWidth: 1,
     },
 });
-const fadedBlue = mix(fade(blue, 0.16), white);
-const activeBlue = mix(offBlack32, blue);
-const fadedRed = mix(fade(red, 0.08), white);
-const activeRed = mix(offBlack32, red);
+const fadedBlue = mix(color.fadedBlue16, white);
+const fadedRed = mix(color.fadedRed8, white);
 const colors = {
     default: {
         faded: fadedBlue,
         base: blue,
-        active: activeBlue,
+        active: color.activeBlue,
     },
     error: {
         faded: fadedRed,
         base: red,
-        active: activeRed,
+        active: color.activeRed,
     },
 } as const;
 const styles: Record<string, any> = {};
@@ -160,7 +159,7 @@ const _generateStyles = (checked: Checked, error: boolean) => {
 
                 ":active": {
                     backgroundColor: palette.faded,
-                    borderColor: error ? activeRed : blue,
+                    borderColor: error ? color.activeRed : blue,
                     borderWidth: 2,
                 },
             },

package/src/components/radio-group.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import {View, addStyle} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 import type {StyleType} from "@khanacademy/wonder-blocks-core";
 
@@ -132,7 +132,7 @@ const RadioGroup = React.forwardRef(function RadioGroup(
                     <LabelSmall style={styles.error}>{errorMessage}</LabelSmall>
                 )}
                 {(label || description || errorMessage) && (
-                    <Strut size={Spacing.small_12} />
+                    <Strut size={spacing.small_12} />
                 )}
 
                 {allChildren.map((child, index) => {

package/src/components/text-field.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
+import {mix} from "@khanacademy/wonder-blocks-color";
 import {addStyle} from "@khanacademy/wonder-blocks-core";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 
 import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
@@ -31,6 +31,11 @@ type Props = AriaProps & {
      * The input value.
      */
     value: string;
+    /**
+     * The name for the input control. This is submitted along with
+     * the form data.
+     */
+    name?: string;
     /**
      * Makes a read-only input field that cannot be focused. Defaults to false.
      */
@@ -219,6 +224,7 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
             id,
             type,
             value,
+            name,
             disabled,
             onKeyDown,
             placeholder,
@@ -267,6 +273,7 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
                 type={type}
                 placeholder={placeholder}
                 value={value}
+                name={name}
                 disabled={disabled}
                 onChange={this.handleChange}
                 onKeyDown={onKeyDown}
@@ -289,48 +296,48 @@ const styles = StyleSheet.create({
         height: 40,
         borderRadius: 4,
         boxSizing: "border-box",
-        paddingLeft: Spacing.medium_16,
+        paddingLeft: spacing.medium_16,
         margin: 0,
         outline: "none",
         boxShadow: "none",
     },
     default: {
-        background: Color.white,
-        border: `1px solid ${Color.offBlack16}`,
-        color: Color.offBlack,
+        background: color.white,
+        border: `1px solid ${color.offBlack16}`,
+        color: color.offBlack,
         "::placeholder": {
-            color: Color.offBlack64,
+            color: color.offBlack64,
         },
     },
     error: {
-        background: `${mix(fade(Color.red, 0.06), Color.white)}`,
-        border: `1px solid ${Color.red}`,
-        color: Color.offBlack,
+        background: `${mix(color.fadedRed8, color.white)}`,
+        border: `1px solid ${color.red}`,
+        color: color.offBlack,
         "::placeholder": {
-            color: Color.offBlack64,
+            color: color.offBlack64,
         },
     },
     disabled: {
-        background: Color.offWhite,
-        border: `1px solid ${Color.offBlack16}`,
-        color: Color.offBlack64,
+        background: color.offWhite,
+        border: `1px solid ${color.offBlack16}`,
+        color: color.offBlack64,
         "::placeholder": {
-            color: Color.offBlack32,
+            color: color.offBlack32,
         },
     },
     focused: {
-        background: Color.white,
-        border: `1px solid ${Color.blue}`,
-        color: Color.offBlack,
+        background: color.white,
+        border: `1px solid ${color.blue}`,
+        color: color.offBlack,
         "::placeholder": {
-            color: Color.offBlack64,
+            color: color.offBlack64,
         },
     },
     defaultLight: {
-        boxShadow: `0px 0px 0px 1px ${Color.blue}, 0px 0px 0px 2px ${Color.white}`,
+        boxShadow: `0px 0px 0px 1px ${color.blue}, 0px 0px 0px 2px ${color.white}`,
     },
     errorLight: {
-        boxShadow: `0px 0px 0px 1px ${Color.red}, 0px 0px 0px 2px ${Color.white}`,
+        boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`,
     },
 });
 

package/tsconfig-build.json

@@ -14,7 +14,7 @@
         {"path": "../wonder-blocks-icon/tsconfig-build.json"},
         {"path": "../wonder-blocks-layout/tsconfig-build.json"},
         {"path": "../wonder-blocks-link/tsconfig-build.json"},
-        {"path": "../wonder-blocks-spacing/tsconfig-build.json"},
+        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
         {"path": "../wonder-blocks-typography/tsconfig-build.json"},
     ]
 }