diff --git a/docs/package.json b/docs/package.json index 5733421..f870391 100644 --- a/docs/package.json +++ b/docs/package.json @@ -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", diff --git a/docs/pages/components/checkbox.mdx b/docs/pages/components/checkbox.mdx index d0814c5..e0e06ae 100644 --- a/docs/pages/components/checkbox.mdx +++ b/docs/pages/components/checkbox.mdx @@ -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 @@ -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. | @@ -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 | diff --git a/docs/pages/design/form-selections.mdx b/docs/pages/design/form-selections.mdx index ca6803d..1a34ea7 100644 --- a/docs/pages/design/form-selections.mdx +++ b/docs/pages/design/form-selections.mdx @@ -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. -Best Color +Favorite Color Blue @@ -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. - + + + Pick colors + + + + Blue + + + Red + + + Purple + + + Green + + + #### Dropdowns @@ -53,7 +71,9 @@ For more basic information on error styles for forms look at the [Form Design Gu - Best Color + + Favorite Color + Blue @@ -72,27 +92,26 @@ For more basic information on error styles for forms look at the [Form Design Gu - - TODO checkbox - - Best Color - - + + + Pick colors + + + Blue - - + + Red - - + + Purple - - + + Green - - + + Checkbox label - diff --git a/docs/pages/design/forms.mdx b/docs/pages/design/forms.mdx index af042ed..1d561a5 100644 --- a/docs/pages/design/forms.mdx +++ b/docs/pages/design/forms.mdx @@ -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' @@ -77,7 +77,7 @@ They should be: Radio - Best Color + Favorite Color @@ -98,12 +98,25 @@ They should be: - Checkbox TODO + Checkbox - - Checkbox Label + + Pick colors - + + + Blue + + + Red + + + Purple + + + Green + + diff --git a/docs/yarn.lock b/docs/yarn.lock index 05fc983..56dd79f 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -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"