VOTE-76 Add NVRF announcement page

assets/styles/component/accordion.scss

@@ -31,7 +31,7 @@
     }
   }
 
-  .usa-accordion__button[aria-expanded=true] {
+  .usa-accordion__button[aria-expanded="true"] {
     background-color: #fff;
     color: $deep-blue;
   }
@@ -60,10 +60,10 @@
 }
 
 .content-heading {
-  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
+  font-family: "Merriweather Web", Georgia, Cambria, "Times New Roman", Times, serif;
   font-weight: normal;
 }
 
 [dir="rtl"] .usa-language-container {
   padding: 0.5rem 0 0.5rem 1rem;
-}
+}

assets/styles/component/buttons.scss

@@ -22,7 +22,7 @@
   text-decoration: none;
 }
 
-//"Go back" arrow button and text
+// "Go back" arrow button and text
 .arrow {
   border: solid $color-blue-dark;
   border-width: 0 4px 4px 0;
@@ -32,13 +32,11 @@
 
 .direction {
   transform: rotate(135deg);
-  -webkit-transform: rotate(135deg);
   margin-right: 5px;
 }
 
 [dir="rtl"] .direction {
   transform: rotate(315deg);
-  -webkit-transform: rotate(315deg);
   margin-left: 5px;
 }
 

assets/styles/component/hero.scss

@@ -10,14 +10,15 @@
     $arrow-width: 100px;
     $arrow-height: 30px;
     $arrow-half-width: math.div($arrow-width, 2);
+
     content: "";
     position: absolute;
     left: calc(50% - #{$arrow-half-width});
     bottom: -$arrow-height;
     width: 0;
     height: 0;
     border-style: solid;
-    border-width: $arrow-height+1 $arrow-half-width 0 $arrow-half-width;
+    border-width: $arrow-height + 1 $arrow-half-width 0 $arrow-half-width;
     border-color: $color-blue transparent transparent transparent;
 
     @include at-media('tablet') {
@@ -53,7 +54,7 @@
 
   @include at-media('mobile') {
     #SiteLogo {
-      padding: 10px 0 10px;
+      padding: 10px 0;
     }
   }
 

assets/styles/component/icon-list.scss

@@ -0,0 +1,53 @@
+@use 'uswds-utilities' as *;
+@use '../variables' as *;
+@use '../mixins' as *;
+
+.icon-list-item {
+  @include grid-row;
+  @include grid-gap;
+
+  .usa-prose > h2 + &,
+  * + & {
+    margin-top: 3em;
+    margin-bottom: 3em;
+  }
+
+  &__icon {
+    max-width: 136px;
+    margin-left: auto;
+    margin-right: auto;
+
+    @include at-media('tablet') {
+      @include grid-col(3);
+
+      max-width: none;
+    }
+  }
+
+  &__text {
+    @include at-media-max('tablet') {
+      .icon-list-item__icon + & {
+        margin-top: 1.8rem;
+      }
+    }
+
+    @include at-media('tablet') {
+      @include grid-col;
+
+      *:first-child {
+        margin-top: 0;
+      }
+    }
+
+    > h3 {
+      @include u-font-family('sans');
+
+      font-size: 26px;
+    }
+
+    .voter-info & * + p,
+    * + * {
+      margin-top: 1em;
+    }
+  }
+}

assets/styles/component/language-switcher.scss

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: flex-end;
   padding: 0.5rem 1rem 0.5rem 0;
+
   .usa-button {
     a {
       color: #fff;
@@ -22,6 +23,7 @@
     columns: 2 auto;
   }
 }
+
 .usa-language__submenu-item {
   padding: 8px;
   border: unset;

assets/styles/global/media.scss

@@ -1,3 +1,7 @@
+@use 'uswds-utilities' as *;
+@use '../variables' as *;
+@use '../mixins' as *;
+
 svg {
   max-width: 100%;
   height: auto;
@@ -10,3 +14,15 @@ svg {
     margin-left: 0.2ex;
   }
 }
+
+figure {
+  margin: 3rem 0 2rem;
+
+  @include at-media('tablet') {
+    margin: 0 0 3rem;
+
+    * + & {
+      margin-top: 6rem;
+    }
+  }
+}

assets/styles/global/typography.scss

@@ -19,7 +19,7 @@
 }
 
 .main-heading {
-  font-family: Merriweather Web, Georgia, Cambria, Times New Roman, Times, serif;
+  font-family: "Merriweather Web", Georgia, Cambria, "Times New Roman", Times, serif;
 
   @include at-media-max(tablet-lg) {
     span[hidden] {

assets/styles/main.scss

@@ -5,6 +5,7 @@ $theme-show-notifications: false,
 
 @forward "uswds-core";
 @forward "uswds-global";
+@forward "uswds-utilities";
 
 // Components ------------ //
 
@@ -29,6 +30,7 @@ $theme-show-notifications: false,
 @forward 'component/buttons';
 @forward 'component/header';
 @forward 'component/hero';
+@forward 'component/icon-list';
 
 @forward 'pages/homepage';
 @forward 'pages/state-page';

assets/styles/pages/basic-page.scss

@@ -5,6 +5,6 @@
 .align-center {
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
-  height: 70%;
+  height: 100%;
+  justify-content: center;
 }

assets/styles/pages/homepage.scss

@@ -50,7 +50,7 @@
 
 .registered {
   color: $color-blue-dark;
-  margin: 60px 0 60px;
+  margin: 60px 0;
 
   h2 {
     font-size: 2em;

content/en/nvrf-announcement.html

@@ -0,0 +1,80 @@
++++
+title = "Coming soon to Vote.gov: A simple voter registration tool"
+translationKey = "nvrf_ann"
++++
+
+<div class="usa-prose">
+  <figure>
+    <img src="{{< assetpath src=`/assets/img/nvrf/NVRF_animation.png` >}}" alt="">
+  </figure>
+
+  <p>Vote.gov is creating a simple tool to help eligible citizens fill out the National Voter Registration Form (NVRF). By answering a few online questions, the user generates a completed form that can be printed and mailed.</p>
+
+  <p>This form will allow users to:</p>
+
+  <ul>
+    <li>Register to vote</li>
+    <li>Update registration information</li>
+    <li>Register with a political party</li>
+  </ul>
+
+  <p>The new form filler tool aims to streamline over 20 pages of instructions that have been hard to follow. Registrants select the state they plan to vote in. Then, the form presents only the instructions and fields the user needs, based on the choices users make.</p>
+
+  <h2>The web-based form improves accessibility and usability.</h2>
+
+{{< iconListItem 
+title="Improved display and screen reader experience"
+icon="Icon_1.png" >}}
+Our web-based form uses browser-based accessibility features to improve the screen reader experience. The form also works with web tools that allow a user to change the display such as increasing font size or changing the contrast. and so on.
+{{< /iconListItem >}}
+
+{{< iconListItem
+title="Responsive and mobile-friendly design"
+icon="Icon_2.png" >}}
+PDFs are difficult to use on mobile devices. This tool offers an experience appropriate to the screen size, whether it’s a phone, tablet or desktop.
+{{< /iconListItem >}}
+
+{{< iconListItem
+title="Inline help text and data validation to reduce errors"
+icon="Icon_3.png" >}}
+The form provides state instructions to help people fill in answers. In certain cases, the form checks user entries to reduce errors, processing time, and rejections of submitted forms.
+{{< /iconListItem >}}
+
+{{< iconListItem
+title="Multi-lingual support"
+icon="Icon_4.png" >}}
+The web-based form offers an alternative for users who are more comfortable using a language not supported by their state. The form will be available in all languages offered by Vote.gov.
+{{< /iconListItem >}}
+
+  <figure>
+    <img src="{{< assetpath src=`/assets/img/nvrf/NVRF_static.png` >}}" alt="">
+  </figure>
+
+  <h2>The form supports easier processing for state election officials.</h2>
+
+{{< iconListItem
+title="No handwritten forms"
+icon="Icon_5.png" >}}
+The tool produces a completed form (except for the signature), so there will not be any handwritten forms that may be difficult to read.
+{{< /iconListItem >}}
+
+{{< iconListItem
+title="Fewer duplicate registrations"
+icon="Icon_6.png" >}}
+When users begin, they are first prompted to check if they’re already registered. This aims to reduce duplicate registrations.
+{{< /iconListItem >}}
+
+{{< iconListItem
+title="Links to state online registration systems"
+icon="Icon_7.png" >}}
+Where eligible, the system leads users to their state’s online voter registration portals. This may lead to fewer paper forms to process.
+{{< /iconListItem >}}
+
+{{< iconListItem
+title="State election office information"
+icon="Icon_8.png" >}}
+Registrants will be given the correct election office address to mail their completed form.
+{{< /iconListItem >}}
+
+  <p><strong>Note:</strong> Our web-based National Voter Registration Form is currently under development. All images included above illustrate what we hope to incorporate into the final design. The actual form may look different when Vote.gov releases it in the future.</p>
+</div>

content/en/register/al.md

@@ -22,4 +22,4 @@ default_ip_deadline = "15 days before Election Day"
 default_online_deadline = "15 days before Election Day"
 default_mail_postmarked_deadline = "Must be postmarked 15 days before Election Day"
 
-+++
++++

layouts/shortcodes/iconListItem.html

@@ -0,0 +1,14 @@
+{{ $src := .Get "icon" }}
+{{ $alt := .Get "icon-alt" }}
+{{ $baseurl := .Site.BaseURL }}
+<div class="icon-list-item">
+  {{ with $src }}
+    <div class="icon-list-item__icon"><img src="{{ $baseurl }}/assets/img/nvrf/{{ . }}" alt="{{ $alt }}"/></div>
+  {{ end }}
+  <div class="icon-list-item__text usa-prose">
+    {{ with .Get "title" }}
+      <h3>{{ . }}</h3>
+    {{ end }}
+    <p>{{ .Inner }}</p>
+  </div>
+</div>