Checkbox: Convert examples & component to use hooks (#600)

pinterest · Dec 4, 2019 · da88c04 · da88c04
1 parent 7e697ef
commit da88c04
Show file tree

Hide file tree

Showing 6 changed files with 187 additions and 214 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -34,6 +34,15 @@
       "error",
       { "components": ["label"], "allowChildren": true }
     ],
+    "jsx-a11y/label-has-associated-control": [
+      "error",
+      {
+        "labelComponents": ["Label"],
+        "labelAttributes": ["htmlFor"],
+        "controlComponents": ["CheckBox"],
+        "depth": 3
+      }
+    ],
     "no-await-in-loop": "off",
     "no-return-await": "off",
     "prettier/prettier": [

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 
 - Avatar: Convert component to use hooks (#598)
 - Card: Convert examples & component to use hooks (#597)
+- Checkbox: Convert examples & component to use hooks (#600)
 - Internal: Add `react-testing-library` (#598)
 - Internal: Enable `react-hooks/exhaustive-deps` lint rule (#598)
 

diff --git a/docs/src/Checkbox.doc.js b/docs/src/Checkbox.doc.js
@@ -84,32 +84,25 @@ card(
   `}
     name="Example: Accessibility"
     defaultCode={`
-class CheckboxExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { checked: true };
-    this.handleChecked = this._handleChecked.bind(this);
-  }
-  _handleChecked({ checked }) {
-    this.setState({ checked });
-  }
-  render() {
-    return (
-      <Box alignItems="center" direction="row" display="flex">
-        <Checkbox
-          checked={this.state.checked}
-          id="usa"
-          name="usa"
-          onChange={this.handleChecked}
-        />
-        <Label htmlFor="usa">
-          <Box paddingX={2}>
-            <Text>United States of America</Text>
-          </Box>
-        </Label>
-      </Box>
-    );
-  }
+function CheckboxExample() {
+  const [checked, setChecked] = React.useState(true);
+  return (
+    <Box alignItems="center" direction="row" display="flex">
+      <Checkbox
+        checked={checked}
+        id="usa"
+        name="usa"
+        onChange={({ checked }) => {
+          setChecked(checked);
+        }}
+      />
+      <Label htmlFor="usa">
+        <Box paddingX={2}>
+          <Text>United States of America</Text>
+        </Box>
+      </Label>
+    </Box>
+  );
 }
 `}
   />
@@ -122,37 +115,35 @@ card(
   "
     name="Example: Labeled stack"
     defaultCode={`
-class CheckboxExample extends React.Component {
-  render() {
-    const CheckboxWithLabel = ({ id, label }) => (
-      <Box alignItems="center" direction="row" display="flex">
-        <Checkbox
-          checked
-          id={id}
-          onChange={() => {}}
-        />
-        <Label htmlFor={id}>
-          <Box paddingX={2}>
-            <Text>{label}</Text>
-          </Box>
-        </Label>
-      </Box>
-    );
-
-    return (
-      <Box display="flex" direction="column" justifyContent="around" marginTop={-1} marginBottom={-1}>
-        <Box paddingY={1}>
-          <CheckboxWithLabel label="Email" id="email" />
-        </Box>
-        <Box paddingY={1}>
-          <CheckboxWithLabel label="Mobile push" id="push" />
-        </Box>
-        <Box paddingY={1}>
-          <CheckboxWithLabel label="Carrier pidgeon" id="pidgeon" />
+function CheckboxExample() {
+  const CheckboxWithLabel = ({ id, label }) => (
+    <Box alignItems="center" direction="row" display="flex">
+      <Checkbox
+        checked
+        id={id}
+        onChange={() => {}}
+      />
+      <Label htmlFor={id}>
+        <Box paddingX={2}>
+          <Text>{label}</Text>
         </Box>
+      </Label>
+    </Box>
+  );
+
+  return (
+    <Box display="flex" direction="column" justifyContent="around" marginTop={-1} marginBottom={-1}>
+      <Box paddingY={1}>
+        <CheckboxWithLabel label="Email" id="email" />
+      </Box>
+      <Box paddingY={1}>
+        <CheckboxWithLabel label="Mobile push" id="push" />
+      </Box>
+      <Box paddingY={1}>
+        <CheckboxWithLabel label="Carrier pidgeon" id="pidgeon" />
       </Box>
-    );
-  }
+    </Box>
+  );
 }
 `}
   />
@@ -163,24 +154,22 @@ card(
     id="hasError"
     name="Example: Error state"
     defaultCode={`
-class CheckboxExample extends React.Component {
-  render() {
-    return (
-      <Box alignItems="center" direction="row" display="flex">
-        <Checkbox
-          hasError
-          id="error"
-          name="error"
-          onChange={() => {}}
-        />
-        <Label htmlFor="error">
-          <Box paddingX={2}>
-            <Text>This checkbox has an error</Text>
-          </Box>
-        </Label>
-      </Box>
-    );
-  }
+function CheckboxExample() {
+  return (
+    <Box alignItems="center" direction="row" display="flex">
+      <Checkbox
+        hasError
+        id="error"
+        name="error"
+        onChange={() => {}}
+      />
+      <Label htmlFor="error">
+        <Box paddingX={2}>
+          <Text>This checkbox has an error</Text>
+        </Box>
+      </Label>
+    </Box>
+  );
 }
 `}
   />