Skip to content

Commit

Permalink
Merge branch 'main' into dependabot-npm_and_yarn-uswds-uswds-3.4.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@werdnanoslen
werdnanoslen authored Jul 31, 2023
2 parents f6c84c9 + ac2e19c commit 7d68449
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 93 deletions.
4 changes: 2 additions & 2 deletions docs/styles_and_assets.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ If you want to use USWDS SCSS (mixins, functions, variables, etc.), you will nee
@use 'uswds-core' with (
$theme-image-path: '@uswds/uswds/img',
$theme-font-path: '@uswds/uswds/fonts',
$theme-hero-image: '@uswds/uswds/img/hero.png'
$theme-hero-image: '@uswds/uswds/img/hero.jpg'
);
```

Expand Down Expand Up @@ -66,7 +66,7 @@ You can also customize any of the variables used in USWDS SCSS in the `your-proj
$theme-grid-container-max-width: 'desktop-lg',
<!-- COMPONENTS -->
$theme-hero-image: '@uswds/uswds/img/hero.png',
$theme-hero-image: '@uswds/uswds/img/hero.jpg',
);
```

Expand Down
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
33 changes: 25 additions & 8 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2770,6 +2770,13 @@
dependencies:
"@storybook/global" "^5.0.0"

"@storybook/[email protected]":
version "7.1.1"
resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-7.1.1.tgz#62b7760ab05977f831f1831d5842ab4a4501c585"
integrity sha512-R0bdVjzJ5CwLNAG3XMyMZ0e9XDteBkFkTTIZJ9m+WMh/+oa2PInCpXDxoYb180UI6abrqh1jEaAsrHMC1pTKnA==
dependencies:
"@storybook/global" "^5.0.0"

"@storybook/[email protected]":
version "6.5.16"
resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.16.tgz#f8dc51213bc08fe32154be964e1e8b0e2f670ed6"
Expand Down Expand Up @@ -3394,7 +3401,7 @@
"@storybook/global" "^5.0.0"
memoizerific "^1.11.3"

"@storybook/[email protected]", "@storybook/theming@^7.0.8":
"@storybook/[email protected]":
version "7.0.27"
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.0.27.tgz#62d6f4af8e8e2089c0b84e4d47a1a4ec3ba06fb3"
integrity sha512-l2Lc8xX8QXQO8c9gpzdUUJ+0YqLoh8w74I7lzxiife0TzEQrhWD9aRJAVimm8Vzfq5x3CNeJNFHc5PcG8ypQig==
Expand All @@ -3404,6 +3411,16 @@
"@storybook/global" "^5.0.0"
memoizerific "^1.11.3"

"@storybook/theming@^7.0.8":
version "7.1.1"
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-7.1.1.tgz#5dc1bf43c7522aa6f4d24a01d361f0c2825f109c"
integrity sha512-8ri/BvfgUzBln9EYB8N/xgRaxZIFFTG0IEEekuV2H5uv4q9JW9p3E5zqghmM1OC/vspJJa8e4Eajb1YiTO0W6w==
dependencies:
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.0"
"@storybook/client-logger" "7.1.1"
"@storybook/global" "^5.0.0"
memoizerific "^1.11.3"

"@storybook/[email protected]":
version "7.0.26"
resolved "https://registry.yarnpkg.com/@storybook/types/-/types-7.0.26.tgz#83be03bcd5ab4cfdac154a25731058466d055ff3"
Expand Down Expand Up @@ -3601,9 +3618,9 @@
pretty-format "^27.0.2"

"@testing-library/jest-dom@^5.16.5":
version "5.16.5"
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.16.5.tgz#3912846af19a29b2dbf32a6ae9c31ef52580074e"
integrity sha512-N5ixQ2qKpi5OLYfwQmUb/5mSV9LneAcaUfp32pn4yCnpb8r/Yz0pXFPck21dIicKmi+ta5WRAknkZCfA8refMA==
version "5.17.0"
resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz#5e97c8f9a15ccf4656da00fecab505728de81e0c"
integrity sha512-ynmNeT7asXyH3aSVv4vvX4Rb+0qjOhdNHnO/3vuZNqPmhDpV/+rCSGwQ7bLcmU2cJ4dvoheIO85LQj0IbJHEtg==
dependencies:
"@adobe/css-tools" "^4.0.1"
"@babel/runtime" "^7.9.2"
Expand Down Expand Up @@ -7557,9 +7574,9 @@ eslint-plugin-react-hooks@^4.6.0:
integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==

eslint-plugin-react@^7.31.10:
version "7.32.2"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
integrity sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==
version "7.33.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.1.tgz#bc27cccf860ae45413a4a4150bf0977345c1ceab"
integrity sha512-L093k0WAMvr6VhNwReB8VgOq5s2LesZmrpPdKz/kZElQDzqS7G7+DnKoqT+w4JwuiGeAhAvHO0fvy0Eyk4ejDA==
dependencies:
array-includes "^3.1.6"
array.prototype.flatmap "^1.3.1"
Expand All @@ -7574,7 +7591,7 @@ eslint-plugin-react@^7.31.10:
object.values "^1.1.6"
prop-types "^15.8.1"
resolve "^2.0.0-next.4"
semver "^6.3.0"
semver "^6.3.1"
string.prototype.matchall "^4.0.8"

eslint-plugin-security@^1.4.0:
Expand Down

0 comments on commit 7d68449

Please sign in to comment.