USWDS-Sandbox: Zebra prototype

src/_data/meta.json

@@ -1,8 +1,8 @@
 {
   "project": {
-    "name": "Prototype Lab",
-    "agency": "Agency",
-    "agency_shortname": "Agency",
+    "name": "U.S. National Parks",
+    "agency": "U.S. National Parks",
+    "agency_shortname": "USNP",
     "domain": "agency.gov"
   }
 }

src/_data/zebra.json

@@ -0,0 +1,3 @@
+{
+  "title": "Same day reservations at Purplestone National Park"
+}

src/_includes/zebra/footer.html

@@ -0,0 +1,38 @@
+<!--
+  Variations from default:
+  - Simplified text and structure
+  - Added utility classes
+  - Added icon list
+
+  Deviates a lot from standard content - Does not need to be made reusable
+-->
+
+<!--start simple footer-->
+<footer class="usa-footer">
+  <div class="usa-footer__primary-section">
+    <div class="grid-container padding-bottom-2">
+      <h2 class="padding-top-2">Contact Us</h2>
+      <ul class="usa-icon-list">
+        <li class="usa-icon-list__item">
+          <div class="usa-icon-list__icon">
+            <svg class="usa-icon" aria-hidden="true" role="img">
+              <use xlink:href="{{ '/assets/img/sprite.svg#phone' | url }}"></use>
+            </svg>
+          </div>
+          <div class="usa-icon-list__content">
+            Call us at <a class="usa-link" href="tel:5554443333">555-444-3333</a>
+          </div>
+        </li>
+        <li class="usa-icon-list__item">
+          <div class="usa-icon-list__icon">
+            <svg class="usa-icon" aria-hidden="true" role="img">
+              <use xlink:href="{{ '/assets/img/sprite.svg#mail_outline' | url }}"></use>
+            </svg>
+          </div>
+          <div class="usa-icon-list__content">Email us at <a class="usa-link" href="mailto:purplestone@parks.gov">purplestone@parks.gov</a></div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</footer>
+<!--start simple footer-->

src/_includes/zebra/form-bottom.html

@@ -0,0 +1,4 @@
+{% include "zebra/radio--activities.html" %}
+{% include "zebra/time-picker.html" %}
+{% include "zebra/radio--conduct.html" %}
+{% include "zebra/submit.html" %}

src/_includes/zebra/header.html

@@ -0,0 +1,33 @@
+<!--
+  Variations from default:
+  - Simplified text and structure
+  - Added utility classes
+  - Added non-functional icons
+
+  Deviates a lot from standard content - Does not need to be made reusable
+-->
+<!--start simple header-->
+<header class="usa-header usa-header--basic bg-ink">
+  <div class="usa-nav-container padding-y-1">
+    <div class="usa-navbar border-0 display-flex flex-align-center flex-justify width-full">
+      <div class="usa-logo margin-y-0">
+        <a href="javascript:void(0)" title="{{ meta.project.name }}">
+          <em class="usa-logo__text text-white font-sans-md">
+              {{ meta.project.name }}
+          </em>
+        </a>
+      </div>
+      <div class="display-flex flex-align-center">
+        <svg class="usa-icon text-white height-4 width-4 margin-right-1" aria-labelledby="search-title" role="img">
+          <title id="search-title">Search</title>
+          <use xlink:href={{ "/assets/img/sprite.svg#search" | url }}></use>
+        </svg>
+        <svg class="usa-icon text-white height-4 width-4" aria-labelledby="menu-title" role="img">
+          <title id="menu-title">Menu</title>
+          <use xlink:href={{ "/assets/img/sprite.svg#menu" | url }}></use>
+        </svg>
+      </div>
+    </div>
+  </div>
+</header>
+<!--end simple header-->

src/_includes/zebra/intro.html

@@ -0,0 +1,3 @@
+<p>A red asterisk (<abbr title="required" class="usa-hint usa-hint--required">*</abbr>) indicates a required field.</p>
+
+<p class="margin-top-4 margin-bottom-1"><strong>You must be at least 18 years old to reserve an activity.</strong></p>

src/_includes/zebra/memorable-date--select.html

@@ -0,0 +1,149 @@
+<!--
+  Variations from default:
+  - Changed text inputs to select
+
+  Not a standard pattern - should not be reused
+-->
+<!--start memorable date-->
+<fieldset class="usa-fieldset margin-top-0">
+  <legend class="usa-legend margin-top-0">
+    What is your date of birth?
+    <abbr title="required" class="usa-hint usa-hint--required">*</abbr>
+  </legend>
+  <span class="usa-hint" id="mdHint">For example: January 19 2000</span>
+  <div class="usa-memorable-date">
+    <div class="usa-form-group usa-form-group--month usa-form-group--select">
+      <label class="usa-label" for="date_of_birth_month">Month</label>
+      <select
+        class="usa-select"
+        id="date_of_birth_month"
+        name="date_of_birth_month"
+        aria-describedby="mdHint"
+        required
+      >
+        <option value>- Select -</option>
+        <option value="1">01 - January</option>
+        <option value="2">02 - February</option>
+        <option value="3">03 - March</option>
+        <option value="4">04 - April</option>
+        <option value="5">05 - May</option>
+        <option value="6">06 - June</option>
+        <option value="7">07 - July</option>
+        <option value="8">08 - August</option>
+        <option value="9">09 - September</option>
+        <option value="10">10 - October</option>
+        <option value="11">11 - November</option>
+        <option value="12">12 - December</option>
+      </select>
+    </div>
+    <div class="usa-form-group usa-form-group--day">
+      <label class="usa-label" for="date_of_birth_day">Day</label>
+      <select
+        class="usa-select"
+        id="date_of_birth_day"
+        name="date_of_birth_day"
+        aria-describedby="mdHint"
+        required
+      >
+        <option value>- Select -</option>
+        <option value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+        <option value="6">6</option>
+        <option value="7">7</option>
+        <option value="8">8</option>
+        <option value="9">9</option>
+        <option value="10">10</option>
+        <option value="11">11</option>
+        <option value="12">12</option>
+        <option value="13">13</option>
+        <option value="14">14</option>
+        <option value="15">15</option>
+        <option value="16">16</option>
+        <option value="17">17</option>
+        <option value="18">18</option>
+        <option value="19">19</option>
+        <option value="20">20</option>
+        <option value="21">21</option>
+        <option value="22">22</option>
+        <option value="23">23</option>
+        <option value="24">24</option>
+        <option value="25">25</option>
+        <option value="26">26</option>
+        <option value="27">27</option>
+        <option value="28">28</option>
+        <option value="29">29</option>
+        <option value="30">30</option>
+        <option value="30">31</option>
+      </select>
+    </div>
+    <div class="usa-form-group usa-form-group--year">
+      <label class="usa-label" for="date_of_birth_year">Year</label>
+      <select
+      class="usa-select"
+      id="date_of_birth_day"
+      name="date_of_birth_day"
+      aria-describedby="mdHint"
+      required
+    >
+      <option value>- Select -</option>
+      <option value="2006">2006</option>
+      <option value="2005">2005</option>
+      <option value="2004">2004</option>
+      <option value="2003">2003</option>
+      <option value="2002">2002</option>
+      <option value="2001">2001</option>
+      <option value="2000">2000</option>
+      <option value="1999">1999</option>
+      <option value="1998">1998</option>
+      <option value="1997">1997</option>
+      <option value="1996">1996</option>
+      <option value="1995">1995</option>
+      <option value="1994">1994</option>
+      <option value="1993">1993</option>
+      <option value="1992">1992</option>
+      <option value="1991">1991</option>
+      <option value="1990">1990</option>
+      <option value="1989">1989</option>
+      <option value="1988">1988</option>
+      <option value="1987">1987</option>
+      <option value="1986">1986</option>
+      <option value="1985">1985</option>
+      <option value="1984">1984</option>
+      <option value="1983">1983</option>
+      <option value="1982">1982</option>
+      <option value="1981">1981</option>
+      <option value="1980">1980</option>
+      <option value="1979">1979</option>
+      <option value="1978">1978</option>
+      <option value="1977">1977</option>
+      <option value="1976">1976</option>
+      <option value="1975">1975</option>
+      <option value="1974">1974</option>
+      <option value="1973">1973</option>
+      <option value="1972">1972</option>
+      <option value="1971">1971</option>
+      <option value="1970">1970</option>
+      <option value="1969">1969</option>
+      <option value="1968">1968</option>
+      <option value="1967">1967</option>
+      <option value="1966">1966</option>
+      <option value="1965">1965</option>
+      <option value="1965">1964</option>
+      <option value="1963">1963</option>
+      <option value="1962">1962</option>
+      <option value="1961">1961</option>
+      <option value="1960">1960</option>
+      <option value="1959">1959</option>
+      <option value="1958">1958</option>
+      <option value="1957">1957</option>
+      <option value="1956">1956</option>
+      <option value="1955">1955</option>
+      <option value="1954">1954</option>
+    </select>
+    </div>
+  </div>
+</fieldset>
+<!--end memorable date-->

src/_includes/zebra/memorable-date--text.html

@@ -0,0 +1,61 @@
+<!--
+  Variations from default:
+  - Changed select to text input
+
+  Not a standard pattern - should not be reused
+-->
+<!--start memorable date-->
+<fieldset class="usa-fieldset">
+  <legend class="usa-legend">
+    What is your date of birth?
+    <abbr title="required" class="usa-hint usa-hint--required">*</abbr>
+  </legend>
+  <span class="usa-hint" id="mdHint">For example: January 19 2000</span>
+  <div class="usa-memorable-date">
+    <div class="usa-form-group display-flex">
+      <div class="usa-form-group usa-form-group--month">
+        <label class="usa-label" for="date_of_birth_month">Month</label>
+        <input
+          type="text"
+          class="usa-input"
+          aria-describedby="mdHint"
+          id="date_of_birth_month"
+          name="date_of_birth_month"
+          value=""
+          size="10"
+          required
+        />
+      </div>
+    <div class="usa-form-group usa-form-group--day">
+      <label class="usa-label" for="date_of_birth_day">Day</label>
+      <input
+        class="usa-input"
+        aria-describedby="mdHint"
+        id="date_of_birth_day"
+        name="date_of_birth_day"
+        minlength="2"
+        maxlength="2"
+        pattern="[0-9]*"
+        inputmode="numeric"
+        value=""
+        required
+      />
+    </div>
+    <div class="usa-form-group usa-form-group--year">
+      <label class="usa-label" for="date_of_birth_year">Year</label>
+      <input
+        class="usa-input"
+        aria-describedby="mdHint"
+        id="date_of_birth_year"
+        name="date_of_birth_year"
+        minlength="4"
+        maxlength="4"
+        pattern="[0-9]*"
+        inputmode="numeric"
+        value=""
+        required
+      />
+    </div>
+  </div>
+</fieldset>
+<!--end memorable date-->

src/_includes/zebra/memorable-date.html

@@ -0,0 +1,78 @@
+<!--
+  TODO
+  - Make this component reusable by using data to set required and length attributes, text content
+
+  Variations from default:
+  - Added utility classes
+  - Changed legend text
+  - Added "required" attribute and text
+  - Added `minlenth` to text inputs
+
+  Can be made reusable with small tweaks
+-->
+
+<!--start memorable date-->
+<fieldset class="usa-fieldset margin-top-0">
+  <legend class="usa-legend margin-top-0">
+    What is your date of birth?
+    <abbr title="required" class="usa-hint usa-hint--required">*</abbr>
+  </legend>
+  <span class="usa-hint" id="mdHint">For example: January 19 2000</span>
+  <div class="usa-memorable-date">
+    <div class="usa-form-group usa-form-group--month usa-form-group--select">
+      <label class="usa-label" for="date_of_birth_month">Month</label>
+      <select
+        class="usa-select"
+        id="date_of_birth_month"
+        name="date_of_birth_month"
+        aria-describedby="mdHint"
+        required
+      >
+        <option value>- Select -</option>
+        <option value="1">01 - January</option>
+        <option value="2">02 - February</option>
+        <option value="3">03 - March</option>
+        <option value="4">04 - April</option>
+        <option value="5">05 - May</option>
+        <option value="6">06 - June</option>
+        <option value="7">07 - July</option>
+        <option value="8">08 - August</option>
+        <option value="9">09 - September</option>
+        <option value="10">10 - October</option>
+        <option value="11">11 - November</option>
+        <option value="12">12 - December</option>
+      </select>
+    </div>
+    <div class="usa-form-group usa-form-group--day">
+      <label class="usa-label" for="date_of_birth_day">Day</label>
+      <input
+        class="usa-input"
+        aria-describedby="mdHint"
+        id="date_of_birth_day"
+        name="date_of_birth_day"
+        minlength="2"
+        maxlength="2"
+        pattern="[0-9]*"
+        inputmode="numeric"
+        value=""
+        required
+      />
+    </div>
+    <div class="usa-form-group usa-form-group--year">
+      <label class="usa-label" for="date_of_birth_year">Year</label>
+      <input
+        class="usa-input"
+        aria-describedby="mdHint"
+        id="date_of_birth_year"
+        name="date_of_birth_year"
+        minlength="4"
+        maxlength="4"
+        pattern="[0-9]*"
+        inputmode="numeric"
+        value=""
+        required
+      />
+    </div>
+  </div>
+</fieldset>
+<!--end memorable date-->