Skip to content

Commit

Permalink
Update docs to have checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@tko22
tko22 committed Jun 18, 2020
1 parent 61c615b commit 37064c7
Show file tree
Hide file tree
Showing 5 changed files with 64 additions and 34 deletions.
2 changes: 1 addition & 1 deletion docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"start": "next start"
},
"dependencies": {
"@hack4impact-uiuc/bridge": "^0.1.0",
"@hack4impact-uiuc/bridge": "^0.1.1",
"@mdx-js/loader": "^1.6.1",
"@mdx-js/tag": "^0.20.3",
"@next/mdx": "^9.3.6",
Expand Down
8 changes: 3 additions & 5 deletions docs/pages/components/checkbox.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ export default Layout({ ...meta });

If you have multiple checkboxes, use a `Checkbox.Group` to group them together with spacing.



For information on Radio and Form style and usage guidelines, check out [Form Selection Design Guidelines](/design/form-selections) and [Form Design Guidelines](/design/forms).
For information on Checkboxes and Form style and usage guidelines, check out [Form Selection Design Guidelines](/design/form-selections) and [Form Design Guidelines](/design/forms).

#### Example

Expand Down Expand Up @@ -144,7 +142,7 @@ Try adding it to `Checkbox.Group`.
| :------------- | :--------------------------------------------------------- | :----------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| checked | Boolean | | Whether the checkbox is selected or not. |
| children | Node | | The label of the `Checkbox`. |
| defaultChecked | Boolean | | Whether it is initially selected or not. This should not be used when `checked` and `onChange` is used or when it's `Checkbox.Group` has `value` and `onChange` set. |
| defaultChecked | Boolean | | Whether it is initially selected or not. This should not be used when `checked` and `onChange` is used or when it's `Checkbox.Group` has `onChange` set. |
| disabled | Boolean | false | Disable input |
| error | `default` | `error` | `warning` | `success` | 'default' | Set the error state |
| id | String | | Input ID. This should always be set for accessibility purposes. |
Expand All @@ -158,7 +156,7 @@ Try adding it to `Checkbox.Group`.
| Prop name | Type | Default | Description |
| :----------- | :--------------------------------------------------------- | :----------: | :---------------------------------------------------------------------------------------------------------------------------- |
| children | Node | | These should be `Checkbox` components to be grouped together |
| defaultValue | Any | | The default value (out of the children `Checkbox`s) to be selected. This should not be used when `value` and `onChange` are used |
| defaultValue | Any | | The default value (out of the children `Checkbox`s) to be selected. This should not be used when `onChange` are used |
| disabled | Boolean | false | Disable input for all children |
| error | `default` | `error` | `warning` | `success` | 'default' | Set the error state for all children |
| theme | Object | Bridge Theme | Use to override default bridge theme |
Expand Down
55 changes: 37 additions & 18 deletions docs/pages/design/form-selections.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ For form usage and structure, look at [Forms](/design/forms).
Use radio buttons when a user has to choose only one option. They should be used when there are five or less options that the user must choose from. In instances where there are more than five, use a dropdown.

<CodeExampleBox p="32px" maxWidth="280px">
<Text type="forms" ml="24px" mb="28px" as="p">Best Color</Text>
<Text type="forms" ml="24px" mb="28px" as="p">Favorite Color</Text>
<Radio.Group vertical ml="24px" name="colors">
<Radio id="blue" value="blue">
Blue
Expand All @@ -35,7 +35,25 @@ Use radio buttons when a user has to choose only one option. They should be used
#### Checkboxes

Use checkboxes when allowing the user to select more than one option to the prompt.

<CodeExampleBox p="32px" maxWidth="280px">
<Text type="forms" ml="24px" mb="28px" as="p">
Pick colors
</Text>
<Checkbox.Group vertical ml="24px" name="colors">
<Checkbox id="blue-c" value="blue">
Blue
</Checkbox>
<Checkbox id="red-c" value="red">
Red
</Checkbox>
<Checkbox defaultChecked id="purple-c" value="purple">
Purple
</Checkbox>
<Checkbox id="green-c" value="green">
Green
</Checkbox>
</Checkbox.Group>
</CodeExampleBox>

#### Dropdowns

Expand All @@ -53,7 +71,9 @@ For more basic information on error styles for forms look at the [Form Design Gu
<Row>
<Col>
<CodeExampleBox p="32px" width="280px">
<Text type="forms" ml="24px" mb="28px" as="p">Best Color</Text>
<Text type="forms" ml="24px" mb="28px" as="p">
Favorite Color
</Text>
<Radio.Group vertical ml="24px" name="colors">
<Radio id="blue-2" value="blue-2">
Blue
Expand All @@ -72,27 +92,26 @@ For more basic information on error styles for forms look at the [Form Design Gu
</CodeExampleBox>
</Col>
<Col>
<Box>
TODO checkbox
<CodeExampleBox p="32px" width="280px">
<Text type="forms" ml="24px" mb="28px" as="p">Best Color</Text>
<Radio.Group vertical ml="24px" name="colors">
<Radio id="blue-3" value="blue-3">
<CodeExampleBox p="32px" width="280px">
<Text type="forms" ml="24px" mb="28px" as="p">
Pick colors
</Text>
<Checkbox.Group vertical ml="24px" name="colors">
<Checkbox id="blue-c" value="blue">
Blue
</Radio>
<Radio error="error-3" defaultChecked id="red" value="red-3">
</Checkbox>
<Checkbox id="red-c" value="red">
Red
</Radio>
<Radio id="purple-3" value="purple-3">
</Checkbox>
<Checkbox defaultChecked id="purple-c" value="purple">
Purple
</Radio>
<Radio id="green-3" value="green-3">
</Checkbox>
<Checkbox id="green-c" value="green">
Green
</Radio>
</Radio.Group>
</Checkbox>
</Checkbox.Group>
<Text ml="24px" mt="16px" as="p" type="forms" color="redPalette.primary"><Flex alignItems="center"><Icon type="errorAlert" pr="8px"/>Checkbox label</Flex></Text>
</CodeExampleBox>
</Box>
</Col>
</Row>

Expand Down
25 changes: 19 additions & 6 deletions docs/pages/design/forms.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
export const meta = {type: "design", title: "Forms"}

import {Card, Heading, Box, Flex, Button, Link, Text, TextField, Radio} from '@hack4impact-uiuc/bridge'
import {Card, Heading, Box, Flex, Button, Link, Text, TextField, Radio, Checkbox} from '@hack4impact-uiuc/bridge'
import Row from '../../components/row.js'
import Col from '../../components/col.js'
import FormNav from '../../public/docs-content/design/forms/form-nav.svg'
Expand Down Expand Up @@ -77,7 +77,7 @@ They should be:
<Link fontWeight="500" href="/design/form-selections">Radio</Link>
<CodeExampleBox p="32px" width="280px" height="240px">
<Text type="forms" ml="24px" mb="28px" as="p">
Best Color
Favorite Color
</Text>
<Radio.Group vertical ml="24px" name="colors">
<Radio id="blue" value="blue">
Expand All @@ -98,12 +98,25 @@ They should be:
</Col>
<Col mt="32px">
<Box>
<Link fontWeight="500" href="/design/form-selections">Checkbox TODO</Link>
<Link fontWeight="500" href="/design/form-selections">Checkbox</Link>
<CodeExampleBox p="32px" width="280px" height="240px">
<Text mt="0" as="p" type="forms">
Checkbox Label
<Text type="forms" ml="24px" mb="28px" as="p">
Pick colors
</Text>
<TextField error="default" mb="xs" as="textarea" placeholder="placeholder text" lines={4}/>
<Checkbox.Group vertical ml="24px" name="colors">
<Checkbox id="blue-c" value="blue">
Blue
</Checkbox>
<Checkbox id="red-c" value="red">
Red
</Checkbox>
<Checkbox defaultChecked id="purple-c" value="purple">
Purple
</Checkbox>
<Checkbox id="green-c" value="green">
Green
</Checkbox>
</Checkbox.Group>
</CodeExampleBox>
</Box>
</Col>
Expand Down
8 changes: 4 additions & 4 deletions docs/yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -986,10 +986,10 @@
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==

"@hack4impact-uiuc/bridge@^0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@hack4impact-uiuc/bridge/-/bridge-0.1.0.tgz#787dc8793fae32514cab2e789b4d0e200ea27a9a"
integrity sha512-0m1HMSzYHrjXuXtMBkaXsBr4VblpU5dTMYeRo7w1XUAXkGUmMniaVQTQ/u09Tq/NLl0gMB3d/Oq5fyVbXg93Zw==
"@hack4impact-uiuc/bridge@^0.1.1":
version "0.1.1"
resolved "https://registry.yarnpkg.com/@hack4impact-uiuc/bridge/-/bridge-0.1.1.tgz#bba7c61e1a1bcfb4960973d1d5170cf3f3e9d7cc"
integrity sha512-mX8oKW+oRF42UGqwFPmUaRLc1ojPdQcgCasNlHbm4T0GTl6cpU1uhlMzx5S/QeU2DNCvZwoO5Mv7gJbkBKcxGQ==
dependencies:
"@styled-system/prop-types" "^5.1.5"
"@styled-system/theme-get" "^5.1.2"
Expand Down

1 comment on commit 37064c7

@vercel
Copy link

@vercel vercel bot commented on 37064c7 Jun 18, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to following URLs:

Please sign in to comment.