docs(choice): Minor updates to example

telus · Dec 12, 2017 · d6e00cb · d6e00cb
1 parent 7b16f2d
commit d6e00cb
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 17 deletions.
diff --git a/src/components/Checkbox/Checkbox.md b/src/components/Checkbox/Checkbox.md
@@ -23,13 +23,12 @@ initialState = {
 };
 
 const handleCheck = (event) => {
-  if (event.target.checked === true) {
+  if (event.target.checked) {
     setState({ checked: false, feedback: undefined, message: undefined});
   } else {
     setState({ checked: true, feedback: 'error', message: message});
   }
 };
 
-
-  <Checkbox name="terms" value="agree" label="I agree to the terms and conditions" feedback={state.feedback} error={state.message} onChange={handleCheck} checked={state.checked} />
+<Checkbox name="terms" value="agree" label="I agree to the terms and conditions" feedback={state.feedback} error={state.message} onChange={handleCheck} checked={state.checked} />
 ```
diff --git a/src/components/Radio/Radio.md b/src/components/Radio/Radio.md
@@ -3,22 +3,20 @@ initialState = {
   choice: undefined
 };
 
-const setChoice = (value) => setState({choice: value});
+const setChoice = (event) => setState({choice: event.target.value});
 
 <Box tag="fieldset" between={3}>
-  <form>
-    <Text size="small">
-      Choose one combination of area code and first 3 digits to see the available numbers in that range:
+  <Text size="small">
+    Choose one combination of area code and first 3 digits to see the available numbers in that range:
+  </Text>
+  <Box tag="fieldset" between={2}>
+    <Text bold size="small">
+      Area code (416)
     </Text>
-    <Box tag="fieldset" between={2}>
-      <Text bold size="small">
-        Area code (416)
-      </Text>
-      <Radio label="(416) 547" name="group1" value="a" checked={state.choice === "a"} onChange={e => setChoice(e.target.value)} />
-      <Radio label="(416) 871" name="group1" value="b" checked={state.choice === "b"} onChange={e => setChoice(e.target.value)} />
-      <Radio label="(416) 321" name="group1" value="c" checked={state.choice === "c"} onChange={e => setChoice(e.target.value)} />
-      <Radio label="(416) 384" name="group1" value="d" checked={state.choice === "d"} onChange={e => setChoice(e.target.value)} />
-    </Box>
-  </form>
+    <Radio label="(416) 547" name="area-code" value="547" checked={state.choice === "547"} onChange={setChoice} />
+    <Radio label="(416) 871" name="area-code" value="871" checked={state.choice === "871"} onChange={setChoice} />
+    <Radio label="(416) 321" name="area-code" value="321" checked={state.choice === "321"} onChange={setChoice} />
+    <Radio label="(416) 384" name="area-code" value="384" checked={state.choice === "384"} onChange={setChoice} />
+  </Box>
 </Box>
 ```