Visitar URL original
USWDS-Sandbox: Zombie defense component updates by mahoneycm · Pull Request #106 · uswds/uswds-sandbox · GitHub
Skip to content

USWDS-Sandbox: Zombie defense component updates #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mahoneycm wants to merge 9 commits into from
Closed

USWDS-Sandbox: Zombie defense component updates #106

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9e338e4
Merge branch 'main' of github.com:uswds/uswds-sandbox into cm-zombie-…
mahoneycm Aug 2, 2023
ca16b3c
Npm install & remove extra index.md
mahoneycm Aug 2, 2023
c70f1ef
Add state combobox and file input to course details page
mahoneycm Aug 2, 2023
d130a4b
Add step indicator component
mahoneycm Aug 9, 2023
88e9388
Update alphanumeric input mask pattern
mahoneycm Aug 10, 2023
288429b
Install latest uswds package
mahoneycm Aug 25, 2023
30a6c6c
Merge branch 'main' of github.com:uswds/uswds-sandbox into cm-zombie-…
mahoneycm Oct 24, 2023
f6ffe58
Npm install
mahoneycm Oct 24, 2023
0676c70
Merge branch 'jb-zombie-defense-training' of github.com:uswds/uswds-s…
mahoneycm Oct 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
51 changes: 48 additions & 3 deletions src/confirm-submission.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,57 @@
<div class="bg-base-lightest">
<section class="grid-container usa-section">
<div class="grid-row margin-x-neg-205 flex-justify-center">
<div class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-12 margin-bottom-4">
<h1 class="desktop:display-none font-sans-lg margin-bottom-4 tablet:margin-top-neg-3">Confirm Submission</h1>
<div class="grid-col-12 mobile-lg:grid-col-10 desktop:grid-col-12 margin-bottom-4">
<div class="bg-white padding-y-3 padding-x-5 border border-base-lighter">
<section role="document">

<h1 class="margin-bottom-5">Step 4 of 4: Confirm submission</h1>
<div
class="usa-step-indicator"
aria-label="progress"
>
<ol class="usa-step-indicator__segments">
<li
class="usa-step-indicator__segment usa-step-indicator__segment--complete"
>
<span class="usa-step-indicator__segment-label">
Training Details<span class="usa-sr-only">completed</span>
</span
>
</li>
<li
class="usa-step-indicator__segment usa-step-indicator__segment--complete"
>
<span class="usa-step-indicator__segment-label"
>Scheduling details<span class="usa-sr-only">completed</span></span
>
</li>
<li
class="usa-step-indicator__segment usa-step-indicator__segment--complete"
>
<span class="usa-step-indicator__segment-label"
>Instructor details<span class="usa-sr-only">completed</span
>
</li>
<li class="usa-step-indicator__segment usa-step-indicator__segment--current"
aria-current="true"
>
<span class="usa-step-indicator__segment-label"
>Confirm submission</span
>
</li>
</ol>
<div class="usa-step-indicator__header">
<h1 class="usa-step-indicator__heading">
<span class="usa-step-indicator__heading-counter"
><span class="usa-sr-only">Step</span>
<span class="usa-step-indicator__current-step">4</span>
<span class="usa-step-indicator__total-steps">of 4</span> </span
><span class="usa-step-indicator__heading-text"
>Confirm Submission</span
>
</h1>
</div>
</div>

<p><strong>Presenter name:</strong> Riley Smith</p>
<p><strong>Presentation title:</strong> Give Me Shelter: How to build a home base</p>
Expand Down
121 changes: 118 additions & 3 deletions src/course-details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,55 @@
<div class="bg-base-lightest">
<section class="grid-container usa-section">
<div class="grid-row margin-x-neg-205 flex-justify-center">
<div class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-12 margin-bottom-4">
<h1 class="desktop:display-none font-sans-lg margin-bottom-4 tablet:margin-top-neg-3">Appointment scheduler</h1>
<div class="grid-col-12 mobile-lg:grid-col-10 desktop:grid-col-12 margin-bottom-4">
<div class="bg-white padding-y-3 padding-x-5 border border-base-lighter">
<div
class="usa-step-indicator"
aria-label="progress"
>
<ol class="usa-step-indicator__segments">
<li
class="usa-step-indicator__segment usa-step-indicator__segment--current"
aria-current="true"
>
<span class="usa-step-indicator__segment-label">
Training Details
</span
>
</li>
<li
class="usa-step-indicator__segment"
>
<span class="usa-step-indicator__segment-label"
>Scheduling details<span class="usa-sr-only">not completed</span></span
>
</li>
<li
class="usa-step-indicator__segment"
>
<span class="usa-step-indicator__segment-label"
>Instructor details<span class="usa-sr-only">not completed</span></span
>
</li>
<li class="usa-step-indicator__segment">
<span class="usa-step-indicator__segment-label"
>Confirm submission <span class="usa-sr-only">not completed</span></span
>
</li>
</ol>
<div class="usa-step-indicator__header">
<h1 class="usa-step-indicator__heading">
<span class="usa-step-indicator__heading-counter"
><span class="usa-sr-only">Step</span>
<span class="usa-step-indicator__current-step">1</span>
<span class="usa-step-indicator__total-steps">of 4</span> </span
><span class="usa-step-indicator__heading-text"
>Training Details</span
>
</h1>
</div>
</div>

<h1 class="margin-bottom-0">Step 1 of 4: Training Details</h1>
<p>Tell us more about the topic you would like to present.</p>
<p>
Required fields are marked with an asterisk (<abbr title="required" class="usa-hint usa-hint--required">*</abbr>).
Expand All @@ -37,6 +81,64 @@ <h2 class="margin-bottom-0">Please fill out the course details</h2>
</div>
</fieldset>

<label class="usa-label" for="fruit">Select your state of residence</label>
<div class="usa-combo-box">
<select class="usa-select" name="fruit" id="fruit">
<option value>Select a fruit</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>
</select>
</div>

<form class="usa-form maxw-mobile-lg">
<div class="usa-character-count">
<div class="usa-form-group">
Expand All @@ -53,6 +155,19 @@ <h2 class="margin-bottom-0">Please fill out the course details</h2>

<!-- <a href="{{ '/' | url }}" class="usa-button usa-button--outline margin-y-4">Go back to Login screen</a> -->
<!-- <button class="usa-button margin-y-4" type="" submit">Next: Time and date</button> -->

<div class="usa-form-group">
<label class="usa-label" for="file-input-single"
>Upload your lesson plan</label
>
<input
id="file-input-single"
class="usa-file-input"
type="file"
name="file-input-single"
/>
</div>

<a href="{{ '/scheduling-details' | url }}" class="usa-button margin-y-4">Next: Scheduling details</a>

</div>
Expand Down
6 changes: 3 additions & 3 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ <h3 class="usa-alert__heading">Form check</h3>
required />
<form class="usa-form maxw-full">
<label class="usa-label" for="alphanumeric">ZombID</label>
<div class="usa-hint" id="alphanumericHint">For example, A1B 2C3</div>
<input id="alphanumeric" inputmode="text" name="alphanumeric" placeholder="___ ___" pattern="\w\d\w \d\w\d"
class="usa-input usa-masked" aria-describedby="alphanumericHint" data-charset="A#A #A#" autocomplete="off" />
<div class="usa-hint" id="alphanumericHint">For example, ZOM 613</div>
<input id="alphanumeric" inputmode="text" name="alphanumeric" placeholder="___ ___" pattern="\w\w\w \d\d\d"
class="usa-input usa-masked" aria-describedby="alphanumericHint" data-charset="AAA ###" autocomplete="off" />
</form>
<label class="usa-label" for="password-sign-in">Password <abbr title="required" class="usa-hint usa-hint--required">*</abbr></label>
<input class="usa-input" id="password-sign-in" name="password" type="password" autocomplete="off" required />
Expand Down
52 changes: 49 additions & 3 deletions src/instructor-details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,56 @@
<div class="bg-base-lightest">
<section class="grid-container usa-section">
<div class="grid-row margin-x-neg-205 flex-justify-center">
<div class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-12 margin-bottom-4">
<h1 class="desktop:display-none font-sans-lg margin-bottom-4 tablet:margin-top-neg-3">Appointment scheduler</h1>
<div class="grid-col-12 mobile-lg:grid-col-10 desktop:grid-col-12 margin-bottom-4">
<div class="bg-white padding-y-3 padding-x-5 border border-base-lighter">
<h1 class="margin-bottom-0">Step 3 of 4: Instructor details</h1>

<div
class="usa-step-indicator"
aria-label="progress"
>
<ol class="usa-step-indicator__segments">
<li
class="usa-step-indicator__segment usa-step-indicator__segment--complete"
>
<span class="usa-step-indicator__segment-label">
Training Details<span class="usa-sr-only">completed</span>
</span
>
</li>
<li
class="usa-step-indicator__segment usa-step-indicator__segment--complete"
>
<span class="usa-step-indicator__segment-label"
>Scheduling details<span class="usa-sr-only">completed</span></span
>
</li>
<li
class="usa-step-indicator__segment usa-step-indicator__segment--current"
aria-current="true"
>
<span class="usa-step-indicator__segment-label"
>Instructor details</span
>
</li>
<li class="usa-step-indicator__segment">
<span class="usa-step-indicator__segment-label"
>Confirm submission <span class="usa-sr-only">not completed</span></span
>
</li>
</ol>
<div class="usa-step-indicator__header">
<h1 class="usa-step-indicator__heading">
<span class="usa-step-indicator__heading-counter"
><span class="usa-sr-only">Step</span>
<span class="usa-step-indicator__current-step">3</span>
<span class="usa-step-indicator__total-steps">of 4</span> </span
><span class="usa-step-indicator__heading-text"
>Instructor Details</span
>
</h1>
</div>
</div>

@mejiaj mejiaj Oct 24, 2023 •
edited
Loading

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Future enhancement

Consider moving this to an include to make it easier to update.

<p>
Required fields are marked with an asterisk (<abbr title="required" class="usa-hint usa-hint--required">*</abbr>).
</p>
Expand Down
51 changes: 48 additions & 3 deletions src/scheduling-details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,56 @@
<div class="bg-base-lightest">
<section class="grid-container usa-section">
<div class="grid-row margin-x-neg-205 flex-justify-center">
<div class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-12 margin-bottom-4">
<h1 class="desktop:display-none font-sans-lg margin-bottom-4 tablet:margin-top-neg-3">Scheduling details</h1>
<div class="grid-col-12 mobile-lg:grid-col-10 desktop:grid-col-12 margin-bottom-4">
<div class="bg-white padding-y-3 padding-x-5 border border-base-lighter">

<h1 class="margin-bottom-0">Step 2 of 4: Scheduling details</h1>
<div
class="usa-step-indicator"
aria-label="progress"
>
<ol class="usa-step-indicator__segments">
<li
class="usa-step-indicator__segment usa-step-indicator__segment--complete"
>
<span class="usa-step-indicator__segment-label">
Training Details<span class="usa-sr-only">completed</span>
</span
>
</li>
<li
class="usa-step-indicator__segment usa-step-indicator__segment--current"
aria-current="true"
>
<span class="usa-step-indicator__segment-label"
>Scheduling details</span
>
</li>
<li
class="usa-step-indicator__segment"
>
<span class="usa-step-indicator__segment-label"
>Instructor details<span class="usa-sr-only">not completed</span></span
>
</li>
<li class="usa-step-indicator__segment">
<span class="usa-step-indicator__segment-label"
>Confirm submission <span class="usa-sr-only">not completed</span></span
>
</li>
</ol>
<div class="usa-step-indicator__header">
<h1 class="usa-step-indicator__heading">
<span class="usa-step-indicator__heading-counter"
><span class="usa-sr-only">Step</span>
<span class="usa-step-indicator__current-step">2</span>
<span class="usa-step-indicator__total-steps">of 4</span> </span
><span class="usa-step-indicator__heading-text"
>Scheduling Details</span
>
</h1>
</div>
</div>

<p>Let us know which dates work best for you to provide training.</p>
<p>
Required fields are marked with an asterisk (<abbr title="required" class="usa-hint usa-hint--required">*</abbr>).
Expand Down