VOTE-1039 nvrf review link

.gitignore

@@ -24,14 +24,16 @@ npm-debug.log
 assets/**/*demo.html
 
 # Assets generated by build pipeline
-static/assets/*
+static/**/*
 
 # The compiled Hugo site
 public/
 
 # The generated language content and layouts directories
 content/registrar
 layouts/registrar
+content/*/*/data
+content/*/*/files
 
 tmp/
 

assets/styles/component/alert.scss

@@ -1,46 +1,43 @@
 @use 'uswds-core' as *;
 @use '../mixins' as *;
 
-.usa-alert {
-  padding: 0;
-  margin-top: 0;
-  border-left: 0.5rem solid #00bde3;
-}
+.sitewide-alert, .page-alert {
+  .usa-alert {
+    padding: 0;
+    margin-top: 0;
+    border-left: 0.5rem solid #00bde3;
+  }
 
-[dir="rtl"] .usa-alert {
-  border-right: 0.5rem solid #00bde3;
-  border-left: 0;
-}
+  [dir="rtl"] .usa-alert {
+    border-right: 0.5rem solid #00bde3;
+    border-left: 0;
+  }
 
-.usa-alert--info:before {
-  display: none;
-}
+  .usa-alert--info:before {
+    display: none;
+  }
 
-.usa-alert--info {
-  background-image: unset;
-  background-color: #e7f6f8;
-  border: 0;
-}
+  .usa-alert--info {
+    background-image: unset;
+    background-color: #e7f6f8;
+    border: 0;
+  }
 
-[dir="rtl"] .usa-alert--info {
-  .grid-container {
-    background-position: calc(100% - 1rem) 1rem;
+  [dir="rtl"] .usa-alert--info {
+    .grid-container {
+      background-position: calc(100% - 1rem) 1rem;
 
-    @include at-media('tablet') {
-      background-position: calc(100% - 1rem) 0.3rem;
+      @include at-media('tablet') {
+        background-position: calc(100% - 1rem) 0.3rem;
+      }
     }
   }
-}
-
-.usa-alert--info .usa-alert__body {
-  padding-left: 2.5rem;
 
-  &:before {
-    left: -0.5rem;
-  }
-}
+  .usa-alert--info .usa-alert__body {
+    padding-left: 2.5rem;
 
-.usa-alert__text:only-child {
-  margin-bottom: 0.5rem;
-  padding: 0.75rem 0 0.25rem;
+    &:before {
+      left: -0.5rem;
+    }
+  } 
 }

assets/styles/component/buttons.scss

@@ -12,6 +12,14 @@
     margin-top: 1rem;
     margin-bottom: 3rem;
   }
+
+  &.usa-button--outline,
+  &.usa-button--outline:hover,
+  &.usa-button--outline:focus {
+    background-color: transparent;
+    color: $color-blue-dark;
+    box-shadow: inset 0 0 0 2px $color-blue-dark;
+  }
 }
 
 .usa-button:hover,

assets/styles/component/hero.scss

@@ -80,6 +80,10 @@
   }
 }
 
+.nvrf-hero {  
+  padding: 20px 0;
+}
+
 .align-bottom {
   display: flex;
   flex-direction: column;

assets/styles/main.scss

@@ -18,6 +18,15 @@ $theme-show-notifications: false,
 @forward "usa-prose";
 @forward "usa-intro";
 @forward "usa-language-selector";
+@forward "usa-layout-grid";
+
+// NVRF dependencies --------------- //
+@forward "usa-card";
+@forward "usa-step-indicator";
+@forward "usa-icon-list";
+@forward "uswds-fonts";
+@forward "uswds-helpers";
+@forward "uswds-utilities";
 
 @forward 'component/language-switcher';
 @forward 'component/identifier';

assets/styles/nvrf.scss

@@ -0,0 +1,78 @@
+.nvrf-app-container {
+  .usa-button {
+    line-height: 1.2;
+  }
+
+  @media only screen and (max-width: 639px) {
+    .mobile-width {
+      width: 100%;
+      max-width: 480px;
+    }
+  }
+
+  .grid-container-tablet {
+    max-width: 720px;
+  }
+
+  hr,
+  .usa-prose > hr {
+    border: 0;
+    border-top: 1px solid #adadad;
+    margin: 2rem 0;
+  }
+
+  .usa-form .usa-input {
+    max-width: 480px;
+  }
+
+  h2.margin-0 {
+    margin: 0;
+  }
+
+  .edit-btn .usa-button.usa-button--unstyled {
+    background-color: transparent;
+    color: #005ea2;
+  }
+
+  fieldset + .usa-hint {
+    margin-top: 0.5rem;
+  }
+
+  .error-container {
+    border-left: 3px solid #b50909;
+    padding-left: 15px;
+
+    .error-text {
+      display: block;
+    }
+  }
+
+  .error-text {
+    color: #b50909;
+    font-size: 1rem;
+    margin-top: 0.5rem;
+    display: none;
+  }
+
+  .usa-step-indicator__header {
+    @media (min-width: 640px) {
+      position: absolute;
+      text-indent: -9000px;
+      overflow: hidden;
+    }
+  }
+
+  .usa-alert__text {
+    > *:first-child {
+      margin-top: 0;
+    }
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+#touchpoints-form-embed .fba-modal-dialog {
+  margin: 0;
+}
+

assets/styles/pages/state-page.scss

@@ -5,7 +5,7 @@
   margin-bottom: 60px;
   margin-top: 40px;
 
-  a {
+  a:not(.usa-button) {
     color: $color-blue-dark;
   }
 
@@ -18,9 +18,4 @@
     margin-bottom: 0.5em;
     margin-top: 30px;
   }
-
-  p {
-    margin-bottom: 1em;
-    margin-top: 0;
-  }
 }

content/en/national-voter-registration-form-review/nvrf.html

@@ -0,0 +1,8 @@
++++
+title = "NVRF"
+meta_title = "NVRF"
+type = "nvrf"
+meta_description = "Vote.gov is a United States government website that provides trusted voting information and can help you find voter registration rules for your state."
+url = "/national-voter-registration-form-review"
+hide_touchpoints = "true"
++++

content/en/national-voter-registration-form-review/privacy.html

@@ -0,0 +1,39 @@
++++
+title = "Privacy Policy"
+meta_title = "National Voter Registration Form Privacy Policy"
+meta_description = "Vote.gov is a United States government website that provides trusted voting information and can help you find voter registration rules for your state."
+translationKey = "privacy"
+url = "/national-voter-registration-form-review/privacy"
+hide_back_link = "true"
+hide_touchpoints = "true"
++++
+
+<div class="usa-prose">
+<h2>Policy and Privacy Notice</h2>
+Last Updated December 2023
+
+<h3>Vote.gov does not collect your personal information.</h3>
+<p>Vote.gov offers a web-based form filler tool with improved accessibility features to help eligible voters fill out the mail-in registration form. Unlike many other web-based registration tools, vote.gov does not store any user-provided information. </p>
+<p>Vote.gov built the registration form filler tool in partnership with the <a href="https://eac.gov">Election Assistance Commission (EAC)</a>, and all information requested from you in the registration form comes directly from the EAC. When states provide updates to the EAC, those updates will be reflected in the registration form filler tool on vote.gov.</p>
+
+<h3>Vote.gov does not have a federal database of voters.</h3>
+<p>The federal government does not have a federal database of voters. If you are using the registration form filler tool on vote.gov to make changes to your information, you are reporting a change directly to your state. Your information is not being saved or updated in a federal database. </p>
+
+<h3>Your information is stored on your device, not on vote.gov.</h3>
+<p>When you complete the registration form on vote.gov, your web browser renders a PDF that you can save on your device (whether a computer, phone, or tablet). Your information is not being stored on federal government servers. Closing your web browser will clear your information. If you close the web browser before completing the registration form, you will have to start over filling out the form. </p>
+
+<h3>Vote.gov does not use cookies. </h3>
+<p>Vote.gov uses standard Google Analytics tracking, which tracks anonymous data such as clicks and time spent on pages. We do not track personally identifiable information (PII) or IP addresses.</p>
+
+<h3>If you’re using a public machine (such as a library computer), we recommend that you do the following to keep your information safe:</h3>
+<ul>
+<li>Delete the generated PDF with your information if you downloaded it on the public machine, then empty the trash on this device.</li>
+<li>Close the vote.gov page and web browser after you’ve completed the form. Since the webpage does not automatically time out, your information will remain on the page until you refresh or close the page.</li>
+</ul>
+
+<h3>If you have questions or concerns</h3>
+<p>If you have questions about the registration form filler tool on vote.gov, please contact: <a href="mailto:vote@gsa.gov">vote@gsa.gov</a>.</p>
+
+
+<h3>If you have questions or concerns about the information being requested by your state, please contact your state or local election office. </h3>
+</div>

gulp/build.js

@@ -136,7 +136,7 @@ exports.buildWebsite = buildWebsite;
 exports.watch = watch;
 exports.website= website;
 
-var build = gulp.series(cleanAll, printPackageInfo, gulp.parallel('styles', 'scripts', 'images', 'fonts'), 'data');
+var build = gulp.series(cleanAll, printPackageInfo, gulp.parallel('styles', 'scripts', 'images', 'fonts', 'nvrf'), 'data');
 var buildWebsite = gulp.series (build, buildWebsite);
 var website = gulp.series (build, website);
 

gulp/nvrf.js

@@ -0,0 +1,40 @@
+var gulp = require('gulp');
+var log = require('fancy-log');
+var colors = require('ansi-colors');
+
+var destPagePath = 'national-voter-registration-form-review';
+
+gulp.task('nvrf-assets', function () {
+  var stream = gulp.src([
+    './node_modules/vote-gov-nvrf-app/dist/assets/index.js'
+  ]);
+
+  return stream.pipe(gulp.dest('./static/assets/nvrf'));
+
+});
+
+gulp.task('nvrf-files', function () {
+  var stream = gulp.src([
+    './node_modules/vote-gov-nvrf-app/dist/files/*'
+  ]);
+
+  return stream.pipe(gulp.dest(`./content/en/${destPagePath}/files`));
+
+});
+
+gulp.task('nvrf-data', function () {
+  var stream = gulp.src([
+    './node_modules/vote-gov-nvrf-app/dist/data/**/*'
+  ]);
+
+  return stream.pipe(gulp.dest(function(file) {
+    var path = file.path;
+    var base = file.base + '/';
+    var lang = path.replace(base, '').split('/')[0];
+
+    return `./content/${lang}/${destPagePath}/data`;
+  }));
+
+});
+
+gulp.task('nvrf', gulp.series('nvrf-assets', 'nvrf-files', 'nvrf-data'));

gulp/styles.js

@@ -27,7 +27,7 @@ gulp.task('styles', gulp.series('scss-lint', function () {
   log(colors.cyan('styles'), 'Compiling Sass assets');
 
   var scssStream = scss({includePaths: ["node_modules/@uswds/uswds/packages"]});
-  var stream = gulp.src('./assets/styles/main.scss');
+  var stream = gulp.src(['./assets/styles/main.scss', './assets/styles/nvrf.scss']);
 
   if (process.env.NODE_ENV === 'production') {
     log(colors.cyan('styles'), 'Compressing styles');

gulpfile.js

@@ -7,6 +7,7 @@ require('./gulp/styles');
 require('./gulp/scripts');
 require('./gulp/images');
 require('./gulp/fonts');
+require('./gulp/nvrf');
 require('./gulp/data');
 var build = require('./gulp/build');
 var gulp = require('gulp');

layouts/_default/single.html

@@ -33,7 +33,9 @@ <h1 class="main-heading" data-test="main-header">{{ .Title }}</h1>
             {{ .Content }}
           </section>
 
+          {{ if ne .Params.hide_back_link "true" }}
           <p class="arrow-text"><a href="{{ .Site.Home.RelPermalink }}" title="Vote.gov" data-test="back-button"><span class="arrow direction"></span>{{ .Site.Params.go_back }}</a></p>
+          {{ end }}
 
         </div>
       </div>

layouts/nvrf/single.html

@@ -0,0 +1,36 @@
+{{ $translation := ( index $.Site.Data.translations .Site.Language.Lang ) }}
+{{ $queryNum := substr (md5 now.Unix) 0 9 }}
+
+{{ partial "head.html" . }}
+
+<body class="page-basic">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}/assets/styles/nvrf.css?v={{ $queryNum }}">
+
+{{ partial "header.html" . }}
+<main id="main-content">
+  <div class="bg-blue" id="skip-target">
+    <div class="grid-container">
+        <div class="tablet:grid-col-6 nvrf-hero">
+          <a href="{{ .Site.Home.RelPermalink }}" aria-label="Vote.gov">
+            <img width="150" height="59" src="{{ .Site.BaseURL }}/assets/img/NVRF_hero_lockup.png"
+              alt="{{ $translation.footer.vote_logo_alt_text }}" aria-label="Vote.gov"/>
+          </a>
+        </div>
+    </div>
+  </div>
+  <div class="grid-container">
+    <section class="voter-info">
+      {{ .Content }}
+      <div class="nvrf-app-container" id="root"></div>
+    </section>
+  </div>
+</main>
+{{ partial "footer.html" . }}
+
+{{ partial "analytics.html" . }}
+{{ partial "scripts.html" . }}
+<script type="module" crossorigin src="{{ .Site.BaseURL }}/assets/nvrf/index.js?v={{ $queryNum }}"></script>
+
+</body>
+
+</html>