18F · aduth · Sep 17, 2021 · Aug 10, 2021 · Aug 11, 2021 · Sep 8, 2021
diff --git a/.erb-lint.yml b/.erb-lint.yml
@@ -71,8 +71,7 @@ linters:
           - '(not-)?rounded(-(top|right|bottom|left|lg))?'
           - '((sm|md|lg)-)?hide'
           - '(sm|md|lg)-show'
-          - 'btn(-(small|big|narrow|wide|link|primary|secondary|danger|disabled|big|narrow|transparent))?'
-          - ':not(label).btn-border'
+          - 'btn(-(small|big|narrow|wide|link|primary|secondary|danger|disabled|big|narrow|transparent|border))?'
           - 'border-(none|black|gray|white|aqua|orange|fuchsia|purple|maroon|darken-[1-4]|lighten-[1-4])'
           - 'h3'
         suggestion: 'Use USWDS classes instead of BassCSS.'

diff --git a/app/assets/stylesheets/components/_btn.scss b/app/assets/stylesheets/components/_btn.scss
@@ -1,16 +1,3 @@
-.btn-border {
-  border-color: $border-color;
-  border-radius: 8px;
-  border-style: solid;
-  border-width: $border-width;
-  box-sizing: border-box;
-  padding: $space-1 $space-2;
-
-  &.is-focused {
-    border-color: $field-focus-color;
-  }
-}
-
 .account-action-button {
   @include u-radius('lg');
   background-color: color('primary-lighter');

diff --git a/app/assets/stylesheets/components/_form.scss b/app/assets/stylesheets/components/_form.scss
@@ -31,8 +31,7 @@ textarea {
     font-family: $monospace-font-family;
   }
 
-  &:focus,
-  &.is-focused {
+  &:focus {
     border-color: $field-focus-color;
     box-shadow: 0 0 0 2px rgba($field-focus-color, .5);
     outline: none;
@@ -44,11 +43,6 @@ textarea {
   }
 }
 
-.radio-extra {
-  margin-left: $radio-checkbox-space;
-}
-
-
 // error states
 .has-error input {
   background-image: url(image-path('alert/error.svg'));
@@ -82,102 +76,6 @@ input::-webkit-inner-spin-button {
   }
 }
 
-.checkbox {
-  display: block;
-
-  .indicator {
-    background-color: $white;
-    border: $border-width solid $blue;
-    border-radius: .25rem;
-  }
-
-  input:checked ~ .indicator {
-    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
-  }
-}
-
-// wtf-forms.css
-.checkbox,
-.radio {
-  cursor: pointer;
-  padding-left: 24px;
-  position: relative;
-}
-
-.checkbox input,
-.radio input, {
-  opacity: 0;
-  position: absolute;
-  z-index: -1;
-}
-
-.radio .visible {
-  opacity: 1;
-  position: relative;
-  z-index: inherit;
-}
-
-.indicator {
-  // scss-lint:disable VendorPrefix
-  background-position: center center;
-  background-repeat: no-repeat;
-  background-size: .5rem .5rem;
-  box-sizing: border-box;
-  display: block;
-  font-size: 65%;
-  height: 1rem;
-  left: 0;
-  line-height: 1rem;
-  position: absolute;
-  text-align: center;
-  top: .25rem;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-  user-select: none;
-  width: 1rem;
-}
-
-.checkbox input:focus ~ .indicator,
-.radio input:focus ~ .indicator {
-  box-shadow: 0 0 0 2px rgba($blue, .5);
-}
-
-.checkbox input:checked ~ .indicator,
-.radio input:checked ~ .indicator {
-  background-color: $blue;
-  color: $white;
-}
-
-.checkbox input:active ~ .indicator,
-.radio input:active ~ .indicator {
-  background-color: $blue-light;
-  color: $white;
-}
-
-.indicator-checked::before {
-  color: #fff;
-  content: '\2713';
-  font-size: 11px;
-  font-weight: bold;
-  line-height: .8em;
-}
-
-.radio .indicator {
-  background-color: #f2f9ff;
-  border: $border-width solid $blue;
-  border-radius: 50%;
-}
-
-.radio input:checked ~ .indicator {
-  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
-}
-
-.radio input:disabled ~ .indicator {
-  background-color: $gray-light;
-  border-color: $gray;
-}
-
 .text-hint {
   color: #707070;
 }

diff --git a/app/assets/stylesheets/components/_password-toggle.scss b/app/assets/stylesheets/components/_password-toggle.scss
@@ -0,0 +1,8 @@
+.password-toggle__toggle {
+  @include u-pin-right;
+  top: -24px;
+
+  .usa-checkbox__label {
+    @include u-margin-y(0);
+  }
+}
diff --git a/app/assets/stylesheets/components/all.scss b/app/assets/stylesheets/components/all.scss
@@ -17,6 +17,7 @@
 @import 'nav';
 @import 'page-heading';
 @import 'password';
+@import 'password-toggle';
 @import 'profile-section';
 @import 'personal-key';
 @import 'verification-badge';

diff --git a/app/assets/stylesheets/print.scss b/app/assets/stylesheets/print.scss
@@ -2,7 +2,8 @@
   nav,
   footer,
   .usa-button,
-  .btn-border,
+  .usa-radio__input--bordered,
+  .usa-checkbox__input--bordered,
   .ico {
     display: none;
   }

diff --git a/app/javascript/app/checkbox.js b/app/javascript/app/checkbox.js
diff --git a/app/javascript/app/phone-internationalization.js b/app/javascript/app/phone-internationalization.js
@@ -10,19 +10,11 @@ const selectedInternationCodeOption = () => {
   return /** @type {HTMLOptionElement} */ (dropdown.item(dropdown.selectedIndex));
 };
 
-const setRadioEnabled = (radio, isEnabled) => {
-  radio.disabled = !isEnabled;
-
-  const label = /** @type {Element} */ radio.parentNode.parentNode;
-
-  label.classList.toggle('usa-button--disabled', !isEnabled);
-};
-
 const updateOTPDeliveryMethods = () => {
-  const phoneRadio = document.querySelector(
+  const phoneRadio = /** @type {HTMLInputElement?} */ (document.querySelector(
     '[data-international-phone-form] .otp_delivery_preference_voice',
-  );
-  const smsRadio = /** @type {HTMLElement} */ (document.querySelector(
+  ));
+  const smsRadio = /** @type {HTMLInputElement?} */ (document.querySelector(
     '[data-international-phone-form] .otp_delivery_preference_sms',
   ));
 
@@ -38,8 +30,8 @@ const updateOTPDeliveryMethods = () => {
   const supportsSms = selectedOption.dataset.supportsSms === 'true';
   const supportsVoice = selectedOption.dataset.supportsVoice === 'true';
 
-  setRadioEnabled(smsRadio, supportsSms);
-  setRadioEnabled(phoneRadio, supportsVoice);
+  smsRadio.disabled = !supportsSms;
+  phoneRadio.disabled = !supportsVoice;
 
   if (supportsVoice) {
     deliveryMethodHint.innerText = I18n.t(

diff --git a/app/javascript/app/pw-toggle.js b/app/javascript/app/pw-toggle.js
@@ -8,13 +8,14 @@ function togglePw() {
       input.parentNode.classList.add('relative');
 
       const el = `
-        <div class="top-n24 right-0 absolute">
-          <label class="btn-border" for="pw-toggle-${i}">
-            <span class="checkbox">
-              <input id="pw-toggle-${i}" type="checkbox">
-              <span class="indicator"></span>
-              ${I18n.t('forms.passwords.show')}
-            </span>
+        <div class="password-toggle__toggle">
+          <input
+            id="pw-toggle-${i}"
+            type="checkbox"
+            class="usa-checkbox__input usa-checkbox__input--bordered"
+          >
+          <label for="pw-toggle-${i}" class="usa-checkbox__label">
+            ${I18n.t('forms.passwords.show')}
           </label>
         </div>`;
       input.insertAdjacentHTML('afterend', el);

diff --git a/app/javascript/app/radio-btn.js b/app/javascript/app/radio-btn.js
diff --git a/app/javascript/app/ssn-field.js b/app/javascript/app/ssn-field.js
@@ -9,13 +9,14 @@ function formatSSNFieldAndLimitLength() {
   if (inputs) {
     [].slice.call(inputs).forEach((input, i) => {
       const el = `
-        <div class="mt1 right">
-          <label class="btn-border" for="ssn-toggle-${i}">
-            <span class="checkbox">
-              <input id="ssn-toggle-${i}" type="checkbox">
-              <span class="indicator"></span>
-              ${I18n.t('forms.ssn.show')}
-            </span>
+        <div class="margin-top-1 float-right">
+          <input
+            id="ssn-toggle-${i}"
+            type="checkbox"
+            class="usa-checkbox__input usa-checkbox__input--bordered"
+          >
+          <label for="ssn-toggle-${i}" class="usa-checkbox__label">
+            ${I18n.t('forms.ssn.show')}
           </label>
         </div>`;
       input.insertAdjacentHTML('afterend', el);

diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
@@ -1,9 +1,7 @@
 require('../app/components/index');
 require('../app/utils/index');
 require('../app/pw-toggle');
-require('../app/checkbox');
 require('../app/form-field-format');
-require('../app/radio-btn');
 require('../app/print-personal-key');
 require('../app/i18n-dropdown');
 require('../app/accessible-forms');

diff --git a/app/javascript/packs/webauthn-unhide-signup.js b/app/javascript/packs/webauthn-unhide-signup.js
@@ -2,9 +2,8 @@ const WebAuthn = require('../app/webauthn');
 
 function unhideWebauthn() {
   if (WebAuthn.isWebAuthnEnabled()) {
-    const elem = document.querySelector('label[for=two_factor_options_form_selection_webauthn]');
+    const elem = document.getElementById('select_webauthn');
     if (elem) {
-      elem.hidden = false;
       elem.classList.remove('display-none');
     }
   }

diff --git a/app/views/idv/doc_auth/agreement.html.erb b/app/views/idv/doc_auth/agreement.html.erb
@@ -19,14 +19,15 @@
                        url: url_for,
                        method: 'put',
                        html: { autocomplete: 'off', class: 'margin-top-2 js-consent-continue-form' } do |f| %>
-  <br/>
-  <label class="margin-top-neg-1 margin-bottom-4" for="ial2_consent_given">
-    <span class="checkbox">
-      <%= check_box_tag :ial2_consent_given, true, false %>
-      <span class="indicator"></span>
-      <%= t('doc_auth.instructions.consent') %>
-      <%= new_window_link_to t('doc_auth.instructions.learn_more'), 'https://login.gov/policy/' %>
-    </span>
+  <%= check_box_tag(
+        :ial2_consent_given,
+        true,
+        false,
+        class: 'usa-checkbox__input',
+      ) %>
+  <label class="usa-checkbox__label margin-bottom-4" for="ial2_consent_given">
+    <%= t('doc_auth.instructions.consent') %>
+    <%= new_window_link_to t('doc_auth.instructions.learn_more'), MarketingSite.security_and_privacy_practices_url %>
   </label>
   <%= f.button :button, t('doc_auth.buttons.continue'), type: :submit,
                class: 'usa-button--big usa-button--wide' %>