@khanacademy/wonder-blocks-form 2.4.2 → 2.4.5

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @khanacademy/wonder-blocks-form
 
+## 2.4.5
+
+### Patch Changes
+
+-   Updated dependencies [83486dba]
+    -   @khanacademy/wonder-blocks-icon@1.2.29
+
+## 2.4.4
+
+### Patch Changes
+
+-   Updated dependencies [5f4a4297]
+-   Updated dependencies [2b96fd59]
+    -   @khanacademy/wonder-blocks-core@4.3.2
+    -   @khanacademy/wonder-blocks-clickable@2.2.7
+    -   @khanacademy/wonder-blocks-icon@1.2.28
+    -   @khanacademy/wonder-blocks-layout@1.4.10
+    -   @khanacademy/wonder-blocks-typography@1.1.32
+
+## 2.4.3
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-clickable@2.2.6
+-   @khanacademy/wonder-blocks-core@4.3.1
+-   @khanacademy/wonder-blocks-icon@1.2.27
+-   @khanacademy/wonder-blocks-layout@1.4.9
+-   @khanacademy/wonder-blocks-typography@1.1.31
+
 ## 2.4.2
 
 ### Patch Changes

package/dist/es/index.js

@@ -24,16 +24,11 @@ const StyledInput$1 = addStyle("input");
 const checkboxCheck = {
   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"
 };
-/**
- * The internal stateless ☑️ Checkbox
- */
-
 class CheckboxCore extends React.Component {
   constructor(...args) {
     super(...args);
 
     this.handleChange = () => {
-      // Empty because change is handled by ClickableBehavior
       return;
     };
   }
@@ -59,18 +54,16 @@ class CheckboxCore extends React.Component {
     const props = {
       "data-test-id": testId
     };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledInput$1, _extends({}, sharedProps, {
+    return React.createElement(React.Fragment, null, React.createElement(StyledInput$1, _extends({}, sharedProps, {
       type: "checkbox",
       "aria-invalid": error,
       checked: checked,
       disabled: disabled,
       id: id,
-      name: groupName // Need to specify because this is a controlled React form
-      // component, but we handle the click via ClickableBehavior
-      ,
+      name: groupName,
       onChange: this.handleChange,
       style: defaultStyle
-    }, props)), checked && /*#__PURE__*/React.createElement(Icon, {
+    }, props)), checked && React.createElement(Icon, {
       color: disabled ? offBlack32$1 : white$1,
       icon: checkboxCheck,
       size: "small",
@@ -81,7 +74,6 @@ class CheckboxCore extends React.Component {
 }
 const size$1 = 16;
 const sharedStyles$1 = StyleSheet.create({
-  // Reset the default styled input element
   inputReset: {
     appearance: "none",
     WebkitAppearance: "none",
@@ -129,7 +121,6 @@ const colors$1 = {
 const styles$5 = {};
 
 const _generateStyles$1 = (checked, error) => {
-  // "hash" the parameters
   const styleKey = `${String(checked)}-${String(error)}`;
 
   if (styles$5[styleKey]) {
@@ -187,16 +178,11 @@ const {
   offBlack50
 } = Color;
 const StyledInput = addStyle("input");
-/**
- * The internal stateless 🔘 Radio button
- */
-
 class RadioCore extends React.Component {
   constructor(...args) {
     super(...args);
 
     this.handleChange = () => {
-      // Empty because change is handled by ClickableBehavior
       return;
     };
   }
@@ -222,25 +208,22 @@ class RadioCore extends React.Component {
     const props = {
       "data-test-id": testId
     };
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledInput, _extends({}, sharedProps, {
+    return React.createElement(React.Fragment, null, React.createElement(StyledInput, _extends({}, sharedProps, {
       type: "radio",
       "aria-invalid": error,
       checked: checked,
       disabled: disabled,
       id: id,
-      name: groupName // Need to specify because this is a controlled React form
-      // component, but we handle the click via ClickableBehavior
-      ,
+      name: groupName,
       onChange: this.handleChange,
       style: defaultStyle
-    }, props)), disabled && checked && /*#__PURE__*/React.createElement("span", {
+    }, props)), disabled && checked && React.createElement("span", {
       style: disabledChecked
     }));
   }
 
 }
-const size = 16; // circle with a different color. Here, we add that center circle. // If the checkbox is disabled and selected, it has a border but also an inner
-
+const size = 16;
 const disabledChecked = {
   position: "absolute",
   top: size / 4,
@@ -251,7 +234,6 @@ const disabledChecked = {
   backgroundColor: offBlack32
 };
 const sharedStyles = StyleSheet.create({
-  // Reset the default styled input element
   inputReset: {
     appearance: "none",
     WebkitAppearance: "none",
@@ -295,7 +277,6 @@ const colors = {
 const styles$4 = {};
 
 const _generateStyles = (checked, error) => {
-  // "hash" the parameters
   const styleKey = `${String(checked)}-${String(error)}`;
 
   if (styles$4[styleKey]) {
@@ -344,22 +325,11 @@ const _generateStyles = (checked, error) => {
 };
 
 const _excluded$2 = ["label", "description", "onChange", "style", "className", "variant"];
-
-/**
- * This is a potentially labeled 🔘 or ☑️ item. This is an internal component
- * that's wrapped by Checkbox and Radio. Choice is a wrapper for Checkbox and
- * Radio with many of its props auto-populated, to be used with CheckboxGroup
- * and RadioGroup. This design allows for more explicit prop typing. For
- * example, we can make onChange a required prop on Checkbox but not on Choice
- * (because for Choice, that prop would be auto-populated by CheckboxGroup).
- */
 class ChoiceInternal extends React.Component {
   constructor(...args) {
     super(...args);
 
     this.handleLabelClick = event => {
-      // Browsers automatically use the for attribute to select the input,
-      // but we use ClickableBehavior to handle this.
       event.preventDefault();
     };
 
@@ -368,7 +338,7 @@ class ChoiceInternal extends React.Component {
         checked,
         onChange,
         variant
-      } = this.props; // Radio buttons cannot be unchecked
+      } = this.props;
 
       if (variant === "radio" && checked) {
         return;
@@ -392,9 +362,9 @@ class ChoiceInternal extends React.Component {
       id,
       label
     } = this.props;
-    return /*#__PURE__*/React.createElement(LabelMedium, {
+    return React.createElement(LabelMedium, {
       style: [styles$3.label, disabled && styles$3.disabledLabel]
-    }, /*#__PURE__*/React.createElement("label", {
+    }, React.createElement("label", {
       htmlFor: id,
       onClick: this.handleLabelClick
     }, label));
@@ -404,7 +374,7 @@ class ChoiceInternal extends React.Component {
     const {
       description
     } = this.props;
-    return /*#__PURE__*/React.createElement(LabelSmall, {
+    return React.createElement(LabelSmall, {
       style: styles$3.description,
       id: id
     }, description);
@@ -423,29 +393,26 @@ class ChoiceInternal extends React.Component {
 
     const ChoiceCore = this.getChoiceCoreComponent();
     const ClickableBehavior = getClickableBehavior();
-    return /*#__PURE__*/React.createElement(UniqueIDProvider, {
+    return React.createElement(UniqueIDProvider, {
       mockOnFirstRender: true,
       scope: "choice"
     }, ids => {
       const descriptionId = description && ids.get("description");
-      return /*#__PURE__*/React.createElement(View, {
+      return React.createElement(View, {
         style: style,
         className: className
-      }, /*#__PURE__*/React.createElement(ClickableBehavior, {
+      }, React.createElement(ClickableBehavior, {
         disabled: coreProps.disabled,
         onClick: this.handleClick,
         role: variant
       }, (state, childrenProps) => {
-        return /*#__PURE__*/React.createElement(View, _extends({
+        return React.createElement(View, _extends({
           style: styles$3.wrapper
         }, childrenProps, {
-          // We are resetting the tabIndex=0 from handlers
-          // because the ChoiceCore component will receive
-          // focus on basis of it being an input element.
           tabIndex: -1
-        }), /*#__PURE__*/React.createElement(ChoiceCore, _extends({}, coreProps, state, {
+        }), React.createElement(ChoiceCore, _extends({}, coreProps, state, {
           "aria-describedby": descriptionId
-        })), /*#__PURE__*/React.createElement(Strut, {
+        })), React.createElement(Strut, {
           size: Spacing.xSmall_8
         }), label && this.getLabel());
       }), description && this.getDescription(descriptionId));
@@ -466,33 +433,21 @@ const styles$3 = StyleSheet.create({
   },
   label: {
     userSelect: "none",
-    // NOTE: The checkbox/radio button (height 16px) should be center
-    // aligned with the first line of the label. However, LabelMedium has a
-    // declared line height of 20px, so we need to adjust the top to get the
-    // desired alignment.
     marginTop: -2
   },
   disabledLabel: {
     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
   }
 });
 
-/**
- * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
- * label and description props.
- *
- * If you want a whole group of Checkbox[es] that are related, see the Choice
- * and CheckboxGroup components.
- */
 class Checkbox extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(ChoiceInternal, _extends({
+    return React.createElement(ChoiceInternal, _extends({
       variant: "checkbox"
     }, this.props));
   }
@@ -503,16 +458,9 @@ Checkbox.defaultProps = {
   error: false
 };
 
-/**
- * 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
- * optionally take label and description props.
- *
- * This component should not really be used by itself because radio buttons are
- * often grouped together. See RadioGroup.
- */
 class Radio extends React.Component {
   render() {
-    return /*#__PURE__*/React.createElement(ChoiceInternal, _extends({
+    return React.createElement(ChoiceInternal, _extends({
       variant: "radio"
     }, this.props));
   }
@@ -524,16 +472,6 @@ Radio.defaultProps = {
 };
 
 const _excluded$1 = ["value", "variant"];
-
-/**
- * This is a labeled 🔘 or ☑️ item. Choice is meant to be used as children of
- * CheckboxGroup and RadioGroup because many of its props are auto-populated
- * and not shown in the documentation here. See those components for usage
- * examples.
- *
- * If you wish to use just a single field, use Checkbox or Radio with the
- * optional label and description props.
- */
 class Choice extends React.Component {
   getChoiceComponent(variant) {
     if (variant === "checkbox") {
@@ -544,8 +482,6 @@ class Choice extends React.Component {
   }
 
   render() {
-    // we don't need this going into the ChoiceComponent
-    // eslint-disable-next-line no-unused-vars
     const _this$props = this.props,
           {
       variant
@@ -553,7 +489,7 @@ class Choice extends React.Component {
           remainingProps = _objectWithoutPropertiesLoose(_this$props, _excluded$1);
 
     const ChoiceComponent = this.getChoiceComponent(variant);
-    return /*#__PURE__*/React.createElement(ChoiceComponent, remainingProps);
+    return React.createElement(ChoiceComponent, remainingProps);
   }
 
 }
@@ -587,13 +523,6 @@ const styles$2 = StyleSheet.create({
 
 const StyledFieldset$1 = addStyle("fieldset");
 const StyledLegend$1 = addStyle("legend");
-/**
- * A checkbox group allows multiple selection. This component auto-populates
- * many props for its children Choice components. The Choice component is
- * exposed for the user to apply custom styles or to indicate which choices are
- * disabled.
- */
-
 class CheckboxGroup extends React.Component {
   handleChange(changedValue, originalCheckedState) {
     const {
@@ -621,18 +550,18 @@ class CheckboxGroup extends React.Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/React.createElement(StyledFieldset$1, {
+    return React.createElement(StyledFieldset$1, {
       "data-test-id": testId,
       style: styles$2.fieldset
-    }, /*#__PURE__*/React.createElement(View, {
+    }, React.createElement(View, {
       style: style
-    }, typeof label === "string" ? /*#__PURE__*/React.createElement(StyledLegend$1, {
+    }, typeof label === "string" ? React.createElement(StyledLegend$1, {
       style: styles$2.legend
-    }, /*#__PURE__*/React.createElement(LabelMedium, null, label)) : label && label, typeof description === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+    }, React.createElement(LabelMedium, null, label)) : label && label, typeof description === "string" ? React.createElement(LabelSmall, {
       style: styles$2.description
-    }, description) : description && description, errorMessage && /*#__PURE__*/React.createElement(LabelSmall, {
+    }, description) : description && description, errorMessage && React.createElement(LabelSmall, {
       style: styles$2.error
-    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/React.createElement(Strut, {
+    }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
       size: Spacing.small_12
     }), React.Children.map(children, (child, index) => {
       const {
@@ -640,7 +569,7 @@ class CheckboxGroup extends React.Component {
         value
       } = child.props;
       const checked = selectedValues.includes(value);
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
+      return React.createElement(React.Fragment, null, React.cloneElement(child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -657,15 +586,6 @@ class CheckboxGroup extends React.Component {
 
 const StyledFieldset = addStyle("fieldset");
 const StyledLegend = addStyle("legend");
-/**
- * A radio group allows only single selection. Like CheckboxGroup, this
- * component auto-populates many props for its children Choice components. The
- * Choice component is exposed for the user to apply custom styles or to
- * indicate which choices are disabled. The use of the groupName prop is
- * important to maintain expected keyboard navigation behavior for
- * accessibility.
- */
-
 class RadioGroup extends React.Component {
   handleChange(changedValue) {
     this.props.onChange(changedValue);
@@ -682,18 +602,18 @@ class RadioGroup extends React.Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/React.createElement(StyledFieldset, {
+    return React.createElement(StyledFieldset, {
       "data-test-id": testId,
       style: styles$2.fieldset
-    }, /*#__PURE__*/React.createElement(View, {
+    }, React.createElement(View, {
       style: style
-    }, label && /*#__PURE__*/React.createElement(StyledLegend, {
+    }, label && React.createElement(StyledLegend, {
       style: styles$2.legend
-    }, /*#__PURE__*/React.createElement(LabelMedium, null, label)), description && /*#__PURE__*/React.createElement(LabelSmall, {
+    }, React.createElement(LabelMedium, null, label)), description && React.createElement(LabelSmall, {
       style: styles$2.description
-    }, description), errorMessage && /*#__PURE__*/React.createElement(LabelSmall, {
+    }, description), errorMessage && React.createElement(LabelSmall, {
       style: styles$2.error
-    }, errorMessage), (label || description || errorMessage) && /*#__PURE__*/React.createElement(Strut, {
+    }, errorMessage), (label || description || errorMessage) && React.createElement(Strut, {
       size: Spacing.small_12
     }), React.Children.map(children, (child, index) => {
       const {
@@ -701,7 +621,7 @@ class RadioGroup extends React.Component {
         value
       } = child.props;
       const checked = selectedValue === value;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(child, {
+      return React.createElement(React.Fragment, null, React.cloneElement(child, {
         checked: checked,
         error: !!errorMessage,
         groupName: groupName,
@@ -719,11 +639,6 @@ class RadioGroup extends React.Component {
 const _excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
 const defaultErrorMessage = "This field is required.";
 
-// TODO(WB-1081): Change class name back to TextField after Styleguidist is gone.
-
-/**
- * A TextField is an element used to accept a single line of text from the user.
- */
 class TextFieldInternal extends React.Component {
   constructor(props) {
     super(props);
@@ -797,7 +712,6 @@ class TextFieldInternal extends React.Component {
     };
 
     if (props.validate && props.value !== "") {
-      // Ensures error is updated on unmounted server-side renders
       this.state.error = props.validate(props.value) || null;
     }
   }
@@ -826,9 +740,8 @@ class TextFieldInternal extends React.Component {
     } = _this$props,
           otherProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
-    return /*#__PURE__*/React.createElement("input", _extends({
-      className: css([styles$1.input, styles$6.LabelMedium, styles$1.default, // Prioritizes disabled, then focused, then error (if any)
-      disabled ? styles$1.disabled : this.state.focused ? [styles$1.focused, light && styles$1.defaultLight] : this.state.error && [styles$1.error, light && styles$1.errorLight], style && style]),
+    return React.createElement("input", _extends({
+      className: css([styles$1.input, styles$6.LabelMedium, styles$1.default, disabled ? styles$1.disabled : this.state.focused ? [styles$1.focused, light && styles$1.defaultLight] : this.state.error && [styles$1.error, light && styles$1.errorLight], style && style]),
       id: id,
       type: type,
       placeholder: placeholder,
@@ -902,16 +815,11 @@ const styles$1 = StyleSheet.create({
     boxShadow: `0px 0px 0px 1px ${Color.red}, 0px 0px 0px 2px ${Color.white}`
   }
 });
-const TextField = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(TextFieldInternal, _extends({}, props, {
+const TextField = React.forwardRef((props, ref) => React.createElement(TextFieldInternal, _extends({}, props, {
   forwardedRef: ref
 })));
 
 const StyledSpan = addStyle("span");
-/**
- * A FieldHeading is an element that provides a label, description, and error element
- * to present better context and hints to any type of form field component.
- */
-
 class FieldHeading extends React.Component {
   renderLabel() {
     const {
@@ -920,16 +828,16 @@ class FieldHeading extends React.Component {
       required,
       testId
     } = this.props;
-    const requiredIcon = /*#__PURE__*/React.createElement(StyledSpan, {
+    const requiredIcon = React.createElement(StyledSpan, {
       style: styles.required,
       "aria-hidden": true
     }, " ", "*");
-    return /*#__PURE__*/React.createElement(React.Fragment, null, typeof label === "string" ? /*#__PURE__*/React.createElement(LabelMedium, {
+    return React.createElement(React.Fragment, null, typeof label === "string" ? React.createElement(LabelMedium, {
       style: styles.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
-    }, label, required && requiredIcon) : label, /*#__PURE__*/React.createElement(Strut, {
+    }, label, required && requiredIcon) : label, React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
   }
@@ -944,10 +852,10 @@ class FieldHeading extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, typeof description === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+    return React.createElement(React.Fragment, null, typeof description === "string" ? React.createElement(LabelSmall, {
       style: styles.description,
       testId: testId && `${testId}-description`
-    }, description) : description, /*#__PURE__*/React.createElement(Strut, {
+    }, description) : description, React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
   }
@@ -963,9 +871,9 @@ class FieldHeading extends React.Component {
       return null;
     }
 
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Strut, {
+    return React.createElement(React.Fragment, null, React.createElement(Strut, {
       size: Spacing.small_12
-    }), typeof error === "string" ? /*#__PURE__*/React.createElement(LabelSmall, {
+    }), typeof error === "string" ? React.createElement(LabelSmall, {
       style: styles.error,
       role: "alert",
       id: id && `${id}-error`,
@@ -978,9 +886,9 @@ class FieldHeading extends React.Component {
       field,
       style
     } = this.props;
-    return /*#__PURE__*/React.createElement(View, {
+    return React.createElement(View, {
       style: style
-    }, this.renderLabel(), this.maybeRenderDescription(), /*#__PURE__*/React.createElement(Strut, {
+    }, this.renderLabel(), this.maybeRenderDescription(), React.createElement(Strut, {
       size: Spacing.xSmall_8
     }), field, this.maybeRenderError());
   }
@@ -1001,12 +909,6 @@ const styles = StyleSheet.create({
   }
 });
 
-// TODO(WB-1081): Change class name back to LabeledTextField after Styleguidist is gone.
-
-/**
- * A LabeledTextField is an element used to accept a single line of text
- * from the user paired with a label, description, and error field elements.
- */
 class LabeledTextFieldInternal extends React.Component {
   constructor(props) {
     super(props);
@@ -1077,14 +979,14 @@ class LabeledTextFieldInternal extends React.Component {
       forwardedRef,
       ariaDescribedby
     } = this.props;
-    return /*#__PURE__*/React.createElement(IDProvider, {
+    return React.createElement(IDProvider, {
       id: id,
       scope: "labeled-text-field"
-    }, uniqueId => /*#__PURE__*/React.createElement(FieldHeading, {
+    }, uniqueId => React.createElement(FieldHeading, {
       id: uniqueId,
       testId: testId,
       style: style,
-      field: /*#__PURE__*/React.createElement(TextField, {
+      field: React.createElement(TextField, {
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-invalid": this.state.error ? "true" : "false",
@@ -1120,7 +1022,7 @@ LabeledTextFieldInternal.defaultProps = {
   disabled: false,
   light: false
 };
-const LabeledTextField = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(LabeledTextFieldInternal, _extends({}, props, {
+const LabeledTextField = React.forwardRef((props, ref) => React.createElement(LabeledTextFieldInternal, _extends({}, props, {
   forwardedRef: ref
 })));
 

package/dist/index.js

@@ -182,8 +182,22 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
  * label and description props.
  *
+ * If used by itself, a checkbox provides two options - checked and unchecked.
+ * A group of checkboxes can be used to allow a user to select multiple values
+ * from a list of options.
+ *
  * If you want a whole group of Checkbox[es] that are related, see the Choice
  * and CheckboxGroup components.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {Checkbox} from "@khanacademy/wonder-blocks-form";
+ *
+ * const [checked, setChecked] = React.useState(false);
+ *
+ * <Checkbox checked={checked} onChange={setChecked} />
+ * ```
  */
 class Checkbox extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   render() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "2.4.2",
+  "version": "2.4.5",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,19 +16,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.5",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.7",
     "@khanacademy/wonder-blocks-color": "^1.1.20",
-    "@khanacademy/wonder-blocks-core": "^4.3.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.26",
-    "@khanacademy/wonder-blocks-layout": "^1.4.8",
+    "@khanacademy/wonder-blocks-core": "^4.3.2",
+    "@khanacademy/wonder-blocks-icon": "^1.2.29",
+    "@khanacademy/wonder-blocks-layout": "^1.4.10",
     "@khanacademy/wonder-blocks-spacing": "^3.0.5",
-    "@khanacademy/wonder-blocks-typography": "^1.1.30"
+    "@khanacademy/wonder-blocks-typography": "^1.1.32"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
     "react": "16.14.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.3.0"
+    "wb-dev-build-settings": "^0.4.0"
   }
 }

package/src/components/__docs__/checkbox-accessibility.stories.mdx

@@ -0,0 +1,147 @@
+import {Meta, Story, Canvas} from "@storybook/addon-docs";
+import {StyleSheet} from "aphrodite";
+
+import Color from "@khanacademy/wonder-blocks-color";
+import {Checkbox} from "@khanacademy/wonder-blocks-form";
+import {LabelSmall} from "@khanacademy/wonder-blocks-typography";
+
+<Meta
+    title="Form/Checkbox/Accessibility"
+    component={Checkbox}
+    parameters={{
+        previewTabs: {
+            canvas: {hidden: true},
+        },
+        viewMode: "docs",
+        chromatic: {
+            // Disables chromatic testing for these stories.
+            disableSnapshot: true,
+        },
+    }}
+/>
+
+export const ErrorTemplate = (args) => {
+    const [checked, setChecked] = React.useState(false);
+    const errorState = !checked;
+    return (
+        <View>
+            <Checkbox
+                checked={checked}
+                onChange={setChecked}
+                error={errorState}
+                aria-describedby={errorState && "error-message"}
+                aria-required={true}
+                {...args}
+            />
+            {errorState && (
+                <LabelSmall style={styles.error} id="error-message">
+                    You must agree to the terms to continue
+                </LabelSmall>
+            )}
+        </View>
+    );
+};
+
+export const DisabledTemplate = (args) => {
+    const [checked, setChecked] = React.useState(false);
+    const errorState = !checked;
+    return (
+        <Checkbox
+            checked={checked}
+            onChange={setChecked}
+            label="Some setting"
+            description="You do not have permission to change this setting"
+            disabled={true}
+        />
+    );
+};
+
+## Accessibility
+
+### ARIA
+
+`Checkbox` can take in all ARIA props defined in Wonder Blocks Core types.
+
+Elements with role `"checkbox"` can have an `aria-checked` property that
+exposes the checked state to assistive technology. The dev does not have
+to worry about this because the Wonder Blocks Checkbox component is an
+`input` element with type `"checkbox"`, as this has built-in semantics and
+does not require ARIA.
+
+The current implementation of `Checkbox` uses `aria-describedby` with the
+label and description that may be passed in as props.
+
+See the Error section for information about `aria-invalid` and
+`aria-required`.
+
+### Error state
+
+The Wonder Blocks `Checkbox` component takes an `error` boolean prop. Setting
+this prop to true will set `aria-invalid` to true, and the color of the
+checkbox to red.
+
+When a form input is invalid, the user should provide a reason for why
+this is.
+
+Generally, it is also suggested this is the validation error message is
+passed to the checkbox's `aria-describedby` prop so assistive tech can
+read it. However, this is not possible with the current implementation of
+the Wonder Blocks Form Checkbox component.
+
+The error state can be used to signal that a required checkbox has not been
+checked. In cases where a checkbox is required, the checkbox component should
+set the `aria-required` prop to true for assistive tech.
+There should also be some sort of visual indication that checking
+the box is required, such as a "Required" label or an asterisk.
+
+<Canvas>
+    <Story
+        name="Error state"
+        args={{
+            label: "I accept the terms and conditions",
+        }}
+    >
+        {ErrorTemplate.bind({})}
+    </Story>
+</Canvas>
+
+### Disabled state
+
+The Wonder Blocks `Checkbox` compoenent takes a `disabled` boolean prop.
+This sets the underlying `input` element's `disabled` prop to `true`.
+This makes is so that the checkbox is not interactable. Also, assistive
+tech will indicated that the checkbox is dimmed.
+
+A user will not be able to navigate to the checkbox with a keyboard.
+Screen reader users will be able to navigate to the checkbox with
+screen reader controls.
+
+It is suggested that if an element is disabled, an explanation as to why
+should to provided somewhere.
+
+<Canvas>
+    <Story name="Disabled state">{DisabledTemplate.bind({})}</Story>
+</Canvas>
+
+### Keyboard Interaction
+
+If a checkbox is not disabled, a user can tab to it using standard
+keyboard navigation. The Space key toggles the checked state of the checkbox.
+
+Note the the Space key triggers the `onChange` function of the
+Wonder Blocks Checkbox component. If the user does not specify an `onChange`
+funciton prop that in turn updates the value of `checked`, neither clicking
+nor the Space key will toggle the Checkbox.
+
+### References
+
+-   [Accessible validation of checkbox and radiobutton groups](https://blog.tenon.io/accessible-validation-of-checkbox-and-radiobutton-groups/)
+-   [HTML: Validating a checkbox with HTML5](https://www.the-art-of-web.com/html/html5-checkbox-required/#example1)
+-   [aria-checked MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked)
+-   [ARIA: checkbox role MDN Docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role)
+
+export const styles = StyleSheet.create({
+    error: {
+        color: Color.red,
+    },
+});

package/src/components/__docs__/checkbox.stories.js

@@ -0,0 +1,167 @@
+// @flow
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import type {StoryComponentType} from "@storybook/react";
+
+import Checkbox from "../checkbox.js";
+
+import ComponentInfo from "../../../../../.storybook/components/component-info.js";
+import {name, version} from "../../../package.json";
+
+export default {
+    title: "Form / Checkbox",
+    component: Checkbox,
+    parameters: {
+        componentSubtitle: ((
+            <ComponentInfo name={name} version={version} />
+        ): any),
+    },
+};
+
+export const Default: StoryComponentType = (args) => <Checkbox {...args} />;
+
+Default.args = {
+    checked: false,
+    onChange: () => {},
+};
+
+Default.parameters = {
+    chromatic: {
+        // We already have screenshots of another story that covers
+        // this and more cases.
+        disableSnapshot: true,
+    },
+};
+
+export const Controlled: StoryComponentType = () => {
+    const [checked, setChecked] = React.useState(false);
+    return <Checkbox checked={checked} onChange={setChecked} />;
+};
+
+Controlled.parameters = {
+    chromatic: {
+        // Disabling because this doesn't test visuals, its for testing
+        // that `state` works as expected.
+        disableSnapshot: true,
+    },
+    docs: {
+        storyDescription:
+            "Use state to keep track of whether the checkbox is checked or not",
+    },
+};
+
+export const Variants: StoryComponentType = () => (
+    <View style={styles.row}>
+        <Checkbox
+            error={false}
+            checked={false}
+            style={styles.marginRight}
+            onChange={() => {}}
+        />
+        <Checkbox
+            error={false}
+            checked={true}
+            style={styles.marginRight}
+            onChange={() => {}}
+        />
+        <Checkbox
+            error={true}
+            checked={false}
+            style={styles.marginRight}
+            onChange={() => {}}
+        />
+        <Checkbox
+            error={true}
+            checked={true}
+            style={styles.marginRight}
+            onChange={() => {}}
+        />
+        <Checkbox
+            disabled={true}
+            checked={false}
+            style={styles.marginRight}
+            onChange={() => {}}
+        />
+        <Checkbox
+            disabled={true}
+            checked={true}
+            style={styles.marginRight}
+            onChange={() => {}}
+        />
+    </View>
+);
+
+Variants.parameters = {
+    docs: {
+        storyDescription:
+            "The checkbox has various styles for clickable states. Here are sets of default checkboxes, checkboxes in an error state, and disabled checkboxes.",
+    },
+};
+
+export const WithLabel: StoryComponentType = () => {
+    const [checked, setChecked] = React.useState(false);
+
+    return (
+        <Checkbox
+            label="Receive assignment reminders for Algebra"
+            description="You will receive a reminder 24 hours before each deadline"
+            checked={checked}
+            onChange={setChecked}
+        />
+    );
+};
+
+WithLabel.parameters = {
+    docs: {
+        storyDescription:
+            "The checkbox can have a optional label and description. This allows it to be used as a settings-like item. The user of this component is responsible for keeping track of checked state and providing an onChange callback.",
+    },
+};
+
+export const AdditionalClickTarget: StoryComponentType = () => {
+    const [checked, setChecked] = React.useState(false);
+    const headingText = "Functions";
+    const descriptionText = `A great cook knows how to take basic
+        ingredients and prepare a delicious meal. In this topic, you will
+        become function-chefs! You will learn how to combine functions
+        with arithmetic operations and how to compose functions.`;
+
+    return (
+        <View style={styles.wrapper}>
+            <View style={styles.topic}>
+                <label htmlFor="topic-123">
+                    <LabelMedium>{headingText}</LabelMedium>
+                </label>
+                <LabelSmall>{descriptionText}</LabelSmall>
+            </View>
+            <Checkbox checked={checked} id="topic-123" onChange={setChecked} />
+        </View>
+    );
+};
+
+AdditionalClickTarget.parameters = {
+    docs: {
+        storyDescription:
+            "Sometimes one may wish to use a checkbox in a different context (label may not be right next to the checkbox), like in this example content item. Use a `<label htmlFor={id}>` element where the id matches the `id` prop of the Checkbox. This is for accessibility purposes, and doing this also automatically makes the label a click target for the checkbox.",
+    },
+};
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: "row",
+    },
+    marginRight: {
+        marginRight: 16,
+    },
+    wrapper: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-evenly",
+    },
+    topic: {
+        maxWidth: 600,
+    },
+});

package/src/components/checkbox.js

@@ -79,8 +79,22 @@ type DefaultProps = {|
  * ☑️ A nicely styled checkbox for all your checking needs. Can optionally take
  * label and description props.
  *
+ * If used by itself, a checkbox provides two options - checked and unchecked.
+ * A group of checkboxes can be used to allow a user to select multiple values
+ * from a list of options.
+ *
  * If you want a whole group of Checkbox[es] that are related, see the Choice
  * and CheckboxGroup components.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import {Checkbox} from "@khanacademy/wonder-blocks-form";
+ *
+ * const [checked, setChecked] = React.useState(false);
+ *
+ * <Checkbox checked={checked} onChange={setChecked} />
+ * ```
  */
 export default class Checkbox extends React.Component<ChoiceComponentProps> {
     static defaultProps: DefaultProps = {