Skip to content

Commit

Permalink
docs: Updated storybook templates (#2522)
Browse files Browse the repository at this point in the history
  • Loading branch information
@werdnanoslen
werdnanoslen authored Jul 26, 2023
1 parent 7721e58 commit e1c60cb
Showing 1 changed file with 108 additions and 83 deletions.
191 changes: 108 additions & 83 deletions src/components/forms/Form/Form.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,111 +79,136 @@ export const textInputForm = (): React.ReactElement => (
export const nameForm = (): React.ReactElement => (
<Form onSubmit={mockSubmit}>
<Fieldset legend="Name" legendStyle="large">
<Label htmlFor="title" hint=" (optional)">
Title
</Label>
<TextInput id="title" name="title" type="text" inputSize="small" />
<Label htmlFor="first-name">First name</Label>
<Label htmlFor="first-name">First or given name</Label>
<span className="usa-hint">For example, Jose, Darren, or Mai</span>
<TextInput id="first-name" name="first-name" type="text" />
<Label htmlFor="middle-name" hint=" (optional)">
Middle name
</Label>
<Label htmlFor="middle-name">Middle name</Label>
<TextInput id="middle-name" name="middle-name" type="text" />
<Label htmlFor="last-name">Last name</Label>
<Label htmlFor="last-name">Last or family name</Label>
<span className="usa-hint">
For example, Martinez Gonzalez, Gu, or Smith
</span>
<TextInput id="last-name" name="last-name" type="text" />
</Fieldset>
<Fieldset legend="Full name" legendStyle="large">
<Label htmlFor="full-name">Full name</Label>
<span className="usa-hint">
For example, Prof. Madeline Martinez Hernandez
</span>
<TextInput id="full-name" name="full-name" type="text" />
</Fieldset>
<Fieldset legend="Preferred name" legendStyle="large">
<Label htmlFor="preferred-name">I prefer to be addressed as</Label>
<span className="usa-hint">
For example, Dr. Gu, Mrs. Schmidt, Alix Martinez
</span>
<TextInput id="preferred-name" name="preferred-name" type="text" />
</Fieldset>
</Form>
)

export const addressForm = (): React.ReactElement => (
<Form onSubmit={mockSubmit} large>
<Fieldset legend="Mailing address" legendStyle="large">
<Label htmlFor="mailing-address-1">Street address 1</Label>
<p>
Required fields are marked with an asterisk (
<abbr title="required" className="usa-hint usa-hint--required">
*
</abbr>
).
</p>
<Label htmlFor="mailing-address-1">Street address</Label>
<TextInput id="mailing-address-1" name="mailing-address-1" type="text" />

<Label htmlFor="mailing-address-2" hint=" (optional)">
Street address 2
</Label>
<Label htmlFor="mailing-address-2">Street address line 2</Label>
<TextInput id="mailing-address-2" name="mailing-address-2" type="text" />

<div className="grid-row grid-gap">
<div className="mobile-lg:grid-col-8">
<Label htmlFor="city">City</Label>
<TextInput id="city" name="city" type="text" />
</div>
<div className="mobile-lg:grid-col-4">
<Label htmlFor="state">State</Label>
<Dropdown id="state" name="state">
<option>- Select -</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
<option value="AA">AA - Armed Forces Americas</option>
<option value="AE">AE - Armed Forces Africa</option>
<option value="AE">AE - Armed Forces Canada</option>
<option value="AE">AE - Armed Forces Europe</option>
<option value="AE">AE - Armed Forces Middle East</option>
<option value="AP">AP - Armed Forces Pacific</option>
</Dropdown>
</div>
</div>
<Label htmlFor="city">
City{' '}
<abbr title="required" className="usa-hint usa-hint--required">
*
</abbr>
</Label>
<TextInput id="city" name="city" type="text" required />

<Label htmlFor="state">
State, territory, or military post{' '}
<abbr title="required" className="usa-hint usa-hint--required">
*
</abbr>
</Label>
<Dropdown id="state" name="state" required>
<option>- Select -</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
<option value="AA">AA - Armed Forces Americas</option>
<option value="AE">AE - Armed Forces Africa</option>
<option value="AE">AE - Armed Forces Canada</option>
<option value="AE">AE - Armed Forces Europe</option>
<option value="AE">AE - Armed Forces Middle East</option>
<option value="AP">AP - Armed Forces Pacific</option>
</Dropdown>

<Label htmlFor="zip">ZIP</Label>
<Label htmlFor="zip">ZIP Code</Label>
<TextInput
id="zip"
name="zip"
type="text"
inputSize="medium"
pattern="[\d]{5}(-[\d]{4})?"
/>

<Label htmlFor="urbanization">Urbanization (Puerto Rico only)</Label>
<TextInput id="urbanization" name="urbanization" type="text" />
</Fieldset>
</Form>
)
Expand Down

0 comments on commit e1c60cb

Please sign in to comment.