diff --git a/packages/docs/PropTables/CheckboxPropTable.tsx b/packages/docs/PropTables/CheckboxPropTable.tsx
index fc6e4f53a..b2f41551f 100644
--- a/packages/docs/PropTables/CheckboxPropTable.tsx
+++ b/packages/docs/PropTables/CheckboxPropTable.tsx
@@ -32,10 +32,22 @@ const checkboxProps: Prop[] = [
},
{
name: 'description',
- types: ['string', 'CheckboxDescription'],
+ types: [
+ 'string',
+
+ CheckboxDescription
+ ,
+ ],
description: (
<>
- See below for usage.
+ See{' '}
+
+ CheckboxDescription
+ {' '}
+ for usage.
),
},
@@ -54,10 +66,20 @@ const checkboxDescriptionProps: Prop[] = [
},
{
name: 'link',
- types: ['CheckboxDescriptionLink'],
+ types: (
+
+ CheckboxDescriptionLink
+
+ ),
description: (
<>
- See below for usage.
+ See{' '}
+
+ CheckboxDescriptionLink
+ {' '}
+ for usage.
),
},
diff --git a/packages/docs/pages/checkbox.tsx b/packages/docs/pages/checkbox.tsx
index a195ae6d8..2e1ec735a 100644
--- a/packages/docs/pages/checkbox.tsx
+++ b/packages/docs/pages/checkbox.tsx
@@ -1,116 +1,158 @@
import { Checkbox, Form, FormGroup, H1, Panel, Text } from '@bigcommerce/big-design';
import React, { useState } from 'react';
-import { Code, CodePreview, PageNavigation } from '../components';
+import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
import { CheckboxDescriptionLinkPropTable, CheckboxDescriptionPropTable, CheckboxPropTable } from '../PropTables';
const CheckboxPage = () => {
- const items = [
- {
- id: 'examples',
- title: 'Examples',
- render: () => (
- <>
-
-
- Checkboxes are a stylized input[type="checkbox"] with controllable checked/unchecked states.
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const [checked, setChecked] = useState(false);
- const handleChange = () => setChecked(!checked);
+ return (
+ <>
+ Checkbox
- return (
-
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
-
- Checkboxes support isIndeterminate passed as a prop to show a combined state of
- partially selected checkboxes.
-
+
+ Checkboxes let users toggle settings on and off within a form.
+ When to use it:
+
+ Use checkboxes when users can make toggle one or more items in a form.
+
+
-
- {/* jsx-to-string:start */}
-
- {/* jsx-to-string:end */}
-
-
-
-
- Checkboxes support description passed as a prop, which contains a text and an
- optional link.
-
-
- {/* jsx-to-string:start */}
- {function Example() {
- const [checkedA, setChangeA] = useState(false);
- const [checkedB, setChangeB] = useState(false);
- const handleChangeA = () => setChangeA(!checkedA);
- const handleChangeB = () => setChangeB(!checkedB);
+
+ (
+ <>
+
+ Checkboxes are a stylized input[type="checkbox"] with controllable checked/unchecked
+ states.
+
- return (
-
- );
- }}
- {/* jsx-to-string:end */}
-
-
-
- ),
- },
- {
- id: 'props',
- title: 'Props',
- render: () => (
- <>
-
-
-
-
- ),
- },
- ];
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const [checked, setChecked] = useState(false);
+ const handleChange = () => setChecked(!checked);
- return (
- <>
- Checkbox
+ return (
+
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ {
+ id: 'indeterminate',
+ title: 'Indeterminate',
+ render: () => (
+ <>
+
+ Checkboxes support isIndeterminate passed as a prop to show a combined state of
+ partially selected checkboxes.
+
+
+
+ {/* jsx-to-string:start */}
+
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ {
+ id: 'description',
+ title: 'Description',
+ render: () => (
+ <>
+
+ Checkboxes support description passed as a prop, which contains a text and an
+ optional link.
+
+
+
+ {/* jsx-to-string:start */}
+ {function Example() {
+ const [checkedA, setChangeA] = useState(false);
+ const [checkedB, setChangeB] = useState(false);
+ const handleChangeA = () => setChangeA(!checkedA);
+ const handleChangeB = () => setChangeB(!checkedB);
+
+ return (
+
+ );
+ }}
+ {/* jsx-to-string:end */}
+
+
+ ),
+ },
+ ]}
+ />
+
-
+
+ ,
+ },
+ {
+ id: 'checkbox-description',
+ title: 'CheckboxDescription',
+ render: () => ,
+ },
+ {
+ id: 'checkbox-description-link',
+ title: 'CheckboxDescriptionLink',
+ render: () => (
+
+ ),
+ },
+ ]}
+ />
+
);
};