Deploy RC 186 to Production

Gemfile

@@ -92,7 +92,7 @@ group :development, :test do
   gem 'erb_lint', '~> 0.1.0', require: false
   gem 'i18n-tasks', '>= 0.9.31'
   gem 'knapsack'
-  gem 'nokogiri', '~> 1.13.2'
+  gem 'nokogiri', '~> 1.13.4'
   gem 'parallel_tests'
   gem 'pg_query', require: false
   gem 'pry-byebug'

Gemfile.lock

@@ -386,7 +386,7 @@ GEM
     net-ssh (6.1.0)
     newrelic_rpm (8.5.0)
     nio4r (2.5.8)
-    nokogiri (1.13.3)
+    nokogiri (1.13.4)
       mini_portile2 (~> 2.8.0)
       racc (~> 1.4)
     notiffany (0.1.3)
@@ -732,7 +732,7 @@ DEPENDENCIES
   multiset
   net-sftp
   newrelic_rpm (~> 8.0)
-  nokogiri (~> 1.13.2)
+  nokogiri (~> 1.13.4)
   octokit
   parallel_tests
   pg

app/assets/stylesheets/application.css.scss

@@ -1,4 +1,3 @@
-@import 'variables/colors';
 @import 'variables/app';
 @import 'required';
 @import 'design-system-waiting-room';

app/assets/stylesheets/components/_card.scss

@@ -1,5 +1,5 @@
 .card {
-  background-color: $white;
+  background-color: color('white');
   max-width: $container-skinny-width;
 
   &-wide {

app/assets/stylesheets/components/_file-input.scss

@@ -74,7 +74,7 @@
 }
 
 .usa-file-input__input:not([disabled]):focus {
-  outline: 3px solid $blue;
+  outline: 3px solid color('primary');
   outline-offset: 6px;
 }
 

app/assets/stylesheets/components/_form.scss

@@ -27,7 +27,7 @@ textarea {
   border-width: $border-width;
   border-color: $border-color;
   border-radius: $border-radius;
-  color: $gray;
+  color: color('ink');
   font-weight: $bold-font-weight;
 
   &[type='number'],
@@ -36,8 +36,8 @@ textarea {
   }
 
   &:focus {
-    border-color: $field-focus-color;
-    box-shadow: 0 0 0 2px rgba($field-focus-color, 0.5);
+    border-color: color('primary');
+    box-shadow: 0 0 0 2px rgba(color('primary'), 0.5);
     outline: none;
   }
 

app/assets/stylesheets/components/_i18n-dropdown.scss

@@ -16,7 +16,7 @@
 }
 
 .i18n-mobile-dropdown {
-  background-color: $blue-light;
+  background-color: color('primary-lighter');
   bottom: 100%;
   left: 0;
   position: absolute;
@@ -27,7 +27,7 @@
   position: relative;
 
   &.focused {
-    background-color: $blue;
+    background-color: color('primary');
     border-radius: 0;
     margin-bottom: 0;
     margin-top: 0;
@@ -46,6 +46,6 @@
 }
 
 .language-mobile-button {
-  background-color: $blue-light;
+  background-color: color('primary-lighter');
   border: 0;
 }

app/assets/stylesheets/components/_list.scss

@@ -1,22 +1,3 @@
-@mixin color-list($color: $yellow) {
-  list-style: none;
-  padding: 0;
-
-  li {
-    padding-left: 1rem;
-    text-indent: -1rem;
-
-    &::before {
-      color: $color;
-      content: '•';
-      font-size: 2rem;
-      line-height: 1.5rem;
-      padding-right: 0.5rem;
-      vertical-align: -3px;
-    }
-  }
-}
-
 .success-bullets {
   .success-bullet {
     padding: 1rem 1rem 1rem 0;
@@ -35,15 +16,3 @@
     }
   }
 }
-
-.red-dots {
-  @include color-list($red);
-}
-
-.teal-dots {
-  @include color-list($teal);
-}
-
-.yellow-dots {
-  @include color-list($yellow);
-}

app/assets/stylesheets/components/_modal.scss

@@ -74,7 +74,7 @@
   }
 
   hr {
-    border-color: $teal;
+    border-color: color('info');
   }
 }
 
@@ -84,7 +84,7 @@
   }
 
   hr {
-    border-color: $yellow;
+    border-color: color('warning');
   }
 }
 

app/assets/stylesheets/components/_password-toggle.scss

@@ -1,8 +1,22 @@
-.password-toggle__toggle {
-  @include u-pin-right;
-  top: -24px;
+lg-password-toggle {
+  display: block;
+  position: relative;
 
-  .usa-checkbox__label {
-    @include u-margin-y(0);
+  &.password-toggle--toggle-top .password-toggle__toggle-label {
+    @include u-pin-right;
+    top: -24px;
   }
+
+  &.password-toggle--toggle-bottom .validated-field__input-wrapper {
+    margin-bottom: units(2);
+  }
+}
+
+.password-toggle__toggle-wrapper {
+  display: flex;
+  justify-content: end;
+}
+
+.password-toggle__toggle-label.usa-checkbox__label {
+  @include u-margin-y(0);
 }

app/assets/stylesheets/components/all.scss

@@ -20,7 +20,6 @@
 @import 'personal-key';
 @import 'spinner-button';
 @import 'spinner-dots';
-@import 'full-screen';
 @import 'step-indicator';
 @import 'troubleshooting-options';
 @import 'i18n-dropdown';

app/assets/stylesheets/email.css.scss

@@ -1,4 +1,3 @@
-@import 'variables/colors';
 @import 'variables/email';
 @import 'foundation-emails/scss/foundation-emails';
 

app/assets/stylesheets/variables/_app.scss

@@ -25,8 +25,6 @@ $border-radius-xl: 16px !default;
 $border-radius-xxl: 24px !default;
 $border-color: #cedced !default;
 
-$field-focus-color: $blue !default;
-
 $container-skinny-width: 620px !default;
 $container-xskinny-width: 416px !default;
 $container-xxskinny-width: 296px !default;

app/assets/stylesheets/variables/_email.scss

@@ -15,14 +15,20 @@
 // 1. Global
 // ---------
 
-$primary-color: $blue;
-$secondary-color: $navy;
+$primary-color: #0071bb;
+$secondary-color: #112e51;
 $success-color: #3adb76;
 $warning-color: #ffae00;
 $alert-color: #ec5840;
 $light-gray: #f3f3f3;
+$black: #111111;
+$white: #ffffff;
+$gray: #5b616a;
 $medium-gray: #cacaca;
 $dark-gray: #212121;
+$blue-light: #ebf3fa;
+$red: #e21c3d;
+$red-lightest: #fff7f8;
 $pre-color: #ff6908;
 $global-width: 580px;
 $global-width-small: 95%;

app/components/password_toggle_component.html.erb

@@ -0,0 +1,27 @@
+<%= content_tag(:'lg-password-toggle', class: css_class) do %>
+  <%= render ValidatedFieldComponent.new(
+        form: form,
+        name: :password,
+        type: :password,
+        label: label,
+        **field_options,
+        input_html: field_options[:input_html].to_h.merge(
+          id: input_id,
+          class: ['password-toggle__input', *field_options.dig(:input_html, :class)],
+        ),
+      ) %>
+  <div class="password-toggle__toggle-wrapper js">
+    <input
+      id="<%= toggle_id %>"
+      type="checkbox"
+      class="usa-checkbox__input usa-checkbox__input--bordered password-toggle__toggle"
+      aria-controls="<%= input_id %>"
+    >
+    <label
+      for="<%= toggle_id %>"
+      class="usa-checkbox__label password-toggle__toggle-label"
+    >
+      <%= toggle_label %>
+    </label>
+  </div>
+<% end %>

app/components/password_toggle_component.rb

@@ -0,0 +1,32 @@
+class PasswordToggleComponent < BaseComponent
+  attr_reader :form, :label, :toggle_label, :toggle_position, :field_options
+
+  def initialize(
+    form:,
+    label: t('components.password_toggle.label'),
+    toggle_label: t('components.password_toggle.toggle_label'),
+    toggle_position: :top,
+    **field_options
+  )
+    @form = form
+    @label = label
+    @toggle_label = toggle_label
+    @toggle_position = toggle_position
+    @field_options = field_options
+  end
+
+  def css_class
+    classes = []
+    classes << 'password-toggle--toggle-top' if toggle_position == :top
+    classes << 'password-toggle--toggle-bottom' if toggle_position == :bottom
+    classes
+  end
+
+  def toggle_id
+    "password-toggle-#{unique_id}"
+  end
+
+  def input_id
+    "password-toggle-input-#{unique_id}"
+  end
+end

app/components/password_toggle_component.ts

@@ -0,0 +1,3 @@
+import { PasswordToggleElement } from '@18f/identity-password-toggle-element';
+
+customElements.define('lg-password-toggle', PasswordToggleElement);