VOTE-246 refactor the loading of css

Remove react shortcode
usagov · Nov 29, 2023 · 3566c12 · 3566c12
1 parent 621efcb
commit 3566c12
Show file tree

Hide file tree

Showing 9 changed files with 117 additions and 15 deletions.
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
@@ -20,8 +20,8 @@ $theme-show-notifications: false,
 @forward "usa-language-selector";
 // NVRF dependencies --------------- //
 @forward "usa-card";
-@forward "usa-process-list";
 @forward "usa-step-indicator";
+@forward "usa-icon-list";
 @forward "uswds-fonts";
 @forward "uswds-helpers";
 

diff --git a/assets/styles/nvrf.scss b/assets/styles/nvrf.scss
@@ -0,0 +1,105 @@
+.nvrf-app-container {
+  /* Global */
+  .usa-button {
+    background-color: #11385B;
+  }
+
+  .usa-card__container {
+    border-radius: 0;
+    border-color: #000;
+  }
+  .error-container {
+    border-left: 3px solid #b50909;
+    padding-left: 15px;
+  }
+
+  .error-text {
+    color: #b50909;
+  }
+
+  .back-button {
+    background-color: transparent;
+  }
+
+  .divider-grey {
+    display: inline-block;
+    height: 1px;
+    width:100%;
+    border: 1px solid #DCDEE0;
+  }
+
+  .usa-form a:visited {
+    color: unset;
+  }
+
+  .link-button-outline {
+    background-color: rgba(0,0,0,0);
+    box-shadow: inset 0 0 0 2px #11385B;
+    color: #11385B;
+    text-decoration: none;
+  }
+
+  .link-button-outline:hover {
+    color: white !important;
+    background-color: #11385B;
+  }
+
+  .link-button-filled {
+    color: white !important;
+    text-decoration: none;
+  }
+
+  /* Form */
+  @media only screen and (min-width: 640px) {
+    .bottom {
+      position: absolute;
+      bottom: 0;
+    }
+  }
+
+  .input-example {
+    min-height: 154px;
+  }
+
+  .fieldset {
+    display: contents;
+  }
+
+  .usa-step-indicator__header {
+    display: none !important;
+  }
+
+  .confirm-info .usa-button {
+    background-color: inherit;
+  }
+
+  /* RegistrationOptions */
+  .divider {
+    position: relative;
+  }
+
+  .divider > span {
+    display: block;
+    height: 48px;
+    width: 48px;
+    line-height: 46px;
+    border-radius: 30px;
+    background-color: #DEE9F0;;
+    color: #11385B;
+
+    text-align: center;
+    font-size: 18px;
+    margin-left: calc(50% - 24px);
+  }
+
+  .divider:after {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 2px; /* suit your need */
+    background: #DEE9F0; /* suit your need */
+    top: 50%;
+    left: 0;
+    z-index: -1;
+  }
+}
diff --git a/content/en/nvrf-test/index.html b/content/en/nvrf-test/index.html
@@ -4,5 +4,3 @@
 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."
 +++
-
-{{< nvrfapp >}}
diff --git a/gulp/nvrf.js b/gulp/nvrf.js
@@ -6,10 +6,10 @@ var destPagePath = 'nvrf-test';
 
 gulp.task('nvrf-assets', function () {
   var stream = gulp.src([
-    './node_modules/vote-gov-nvrf-app/dist/assets/*'
+    './node_modules/vote-gov-nvrf-app/dist/assets/index.js'
   ]);
 
-  return stream.pipe(gulp.dest('./static/assets/nvrf/assets'));
+  return stream.pipe(gulp.dest('./static/assets/nvrf'));
 
 });
 

diff --git a/gulp/styles.js b/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');

diff --git a/layouts/nvrf/single.html b/layouts/nvrf/single.html
@@ -3,17 +3,20 @@
 {{ partial "head.html" . }}
 
 <body class="page-basic">
+<link rel="stylesheet" href="{{ .Site.BaseURL }}/assets/styles/nvrf.css">
 {{ partial "header.html" . }}
 <main id="main-content">
   <div class="grid-container">
     <section class="voter-info page-type--basic">
       {{ .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"></script>
 </body>
 
 </html>
diff --git a/layouts/shortcodes/nvrfapp.html b/layouts/shortcodes/nvrfapp.html
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -56,7 +56,7 @@
     "sass": "^1.56.1",
     "vinyl-buffer": "^1.0.1",
     "vinyl-source-stream": "^2.0.0",
-    "vote-gov-nvrf-app": "github:usagov/vote-gov-nvrf-app#v0.1.0"
+    "vote-gov-nvrf-app": "github:usagov/vote-gov-nvrf-app#feature/VOTE-246-nvrf-int"
   },
   "devDependencies": {
     "axe-core": "^4.5.2",