{children}
} diff --git a/src/components/forms/Form/Form.stories.tsx b/src/components/forms/Form/Form.stories.tsx index 0eac486da6..f831f6b028 100644 --- a/src/components/forms/Form/Form.stories.tsx +++ b/src/components/forms/Form/Form.stories.tsx @@ -1,13 +1,16 @@ +/* eslint-disable jsx-a11y/anchor-is-valid */ import React from 'react' import { Form } from './Form' +import { Alert } from '../../Alert/Alert' +import { Button } from '../../Button/Button' +import { Dropdown } from '../Dropdown/Dropdown' +import { ErrorMessage } from '../ErrorMessage/ErrorMessage' +import { Fieldset } from '../Fieldset/Fieldset' +import { FormGroup } from '../FormGroup/FormGroup' import { Label } from '../Label/Label' import { TextInput } from '../TextInput/TextInput' import { Textarea } from '../Textarea/Textarea' -import { FormGroup } from '../FormGroup/FormGroup' -import { ErrorMessage } from '../ErrorMessage/ErrorMessage' -import { Fieldset } from '../Fieldset/Fieldset' -import { Dropdown } from '../Dropdown/Dropdown' export default { title: 'Form', @@ -174,3 +177,94 @@ export const addressForm = (): React.ReactElement => ( ) + +export const signInForm = (): React.ReactElement => { + const [showPassword, setShowPassword] = React.useState(false) + + return ( + + ) +} +export const passwordResetForm = (): React.ReactElement => { + const [showPassword, setShowPassword] = React.useState(false) + + return ( + + ) +} diff --git a/src/index.ts b/src/index.ts index 3c59b8ede0..e3fef5d1e6 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,3 +1,6 @@ +// Global CSS +import './styles/index.scss' + /** USWDS basic components */ export { Alert } from './components/Alert/Alert' export { Accordion } from './components/Accordion/Accordion' diff --git a/src/stories/swatches.stories.tsx b/src/stories/swatches.stories.tsx new file mode 100644 index 0000000000..687bf7a9d5 --- /dev/null +++ b/src/stories/swatches.stories.tsx @@ -0,0 +1,248 @@ +import React from 'react' + +export default { + title: 'Swatches', +} + +export const BackgroundColors = (): React.ReactElement => ( +Primary lighter
+Primary light
+Primary
+Primary dark
+Primary darker
+Base lightest
+Base lighter
+Base light
+Base
+Base dark
+Base darker
+Base darkest
+Secondary lighter
+Secondary light
+Secondary
+Secondary dark
+Secondary darker
+Accent cool lighter
+Accent cool light
+Accent cool
+Accent cool dark
+Accent cool darker
+Accent warm lighter
+Accent warm light
+Accent warm
+Accent warm dark
+Accent warm darker
+Info lighter
+Info light
+Info
+Info dark
+Info darker
+Error lighter
+Error light
+Error
+Error dark
+Error darker
+Warning lighter
+Warning light
+Warning
+Warning dark
+Warning darker
+success lighter
+success light
+success
+success dark
+success darker
+Disabled light
+Disabled
+Disabled dark
++ Ut voluptatum quia quidem. Et et numquam architecto. Consequuntur enim ex + labore cumque rerum voluptatem dolor. Vero asperiores consequatur + doloribus perspiciatis quia laudantium qui. Incidunt ducimus iste eius + voluptas qui. Commodi dolor nesciunt inventore consequatur quia et. +
+text normal
+text semibold
+text bold
+text italic
+text uppercase
+text underline
+text strike
++ In compliance with the request of a friend of mine, who wrote me from the + East, I called on good-natured, garrulous old Simon Wheeler, and inquired + after my friend’s friend, Leonidas W. Smiley, as requested to do, and I + hereunto append the result. +
++ In compliance with the request of a friend of mine, who wrote me from the + East, I called on good-natured, garrulous old Simon Wheeler, and inquired + after my friend’s friend, Leonidas W. Smiley, as requested to do, and I + hereunto append the result. +
++ In compliance with the request of a friend of mine, who wrote me from the + East, I called on good-natured, garrulous old Simon Wheeler, and inquired + after my friend’s friend, Leonidas W. Smiley, as requested to do, and I + hereunto append the result. +
++ In compliance with the request of a friend of mine, who wrote me from the + East, I called on good-natured, garrulous old Simon Wheeler, and inquired + after my friend’s friend, Leonidas W. Smiley, as requested to do, and I + hereunto append the result. +
++ In compliance with the request of a friend of mine, who wrote me from the + East, I called on good-natured, garrulous old Simon Wheeler, and inquired + after my friend’s friend, Leonidas W. Smiley, as requested to do, and I + hereunto append the result. +
++ In compliance with the request of a friend of mine, who wrote me from the + East, I called on good-natured, garrulous old Simon Wheeler, and inquired + after my friend’s friend, Leonidas W. Smiley, as requested to do, and I + hereunto append the result. +
++ In compliance with the request of a friend of mine, who wrote me from the + East, I called on good-natured, garrulous old Simon Wheeler, and inquired + after my friend’s friend, Leonidas W. Smiley, as requested to do, and I + hereunto append the result. +
++ In compliance with the request of a friend of mine, who wrote me from the + East, I called on good-natured, garrulous old Simon Wheeler, and inquired + after my friend’s friend, Leonidas W. Smiley, as requested to do, and I + hereunto append the result. +
++ In compliance with the request of a friend of mine, who wrote me from the + East, I called on good-natured, garrulous old Simon Wheeler, and inquired + after my friend’s friend, Leonidas W. Smiley, as requested to do, and I + hereunto append the result. +
+text base lightest
+text base lighter
+text base light
+text base
+text base dark
+text base darker
+text base darkest
+text base ink
+text primary lighter
+text primary light
+text primary
+text primary vivid
+text primary dark
+text primary darker
+text secondary lighter
+text secondary light
+text secondary
+text secondary vivid
+text secondary dark
+text secondary darker
+text accent cool lighter
+text accent cool light
+text accent cool
+text accent cool dark
+text accent cool darker
+text accent warm ligher
+text accent warm light
+text accent warm
+text accent warm dark
+text accent warm darker
+text info lighter
+text info light
+text info
+text info dark
+text info darker
+text error lighter
+text error light
+text error
+text error dark
+text error darker
+text warning lighter
+text warning light
+text warning
+text warning dark
+text warning darker
+text success lighter
+text success light
+text success
+text success dark
+text success darker
+text disabled light
+text disabled
+text disabled
+