diff --git a/.erb-lint.yml b/.erb-lint.yml index 5af55ccd4ee..efbd546de1a 100644 --- 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 index b5c59b4ba08..15226f91c45 100644 --- 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 index cfe0442f56f..30e31afa9f2 100644 --- 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 new file mode 100644 index 00000000000..e83e3d190a1 --- /dev/null +++ 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 index dd423d36d95..3742f0266d5 100644 --- 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 index 53792d311c6..0749d805c36 100644 --- 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 deleted file mode 100644 index 5ab3734c4f1..00000000000 --- a/app/javascript/app/checkbox.js +++ /dev/null @@ -1,25 +0,0 @@ -function checkbox() { - const styledCheckbox = document.querySelectorAll('input[type=checkbox]'); - if (styledCheckbox) { - [].slice.call(styledCheckbox).forEach((input) => { - // display checkbox with checkmark in high contrast mode - input.addEventListener('change', function () { - const indicator = input.parentNode.querySelector('.indicator'); - if (indicator) { - if (this.checked) { - indicator.classList.add('indicator-checked'); - } else { - indicator.classList.remove('indicator-checked'); - } - } - }); - // allow checkbox label to be read by screen readers - const label = input.parentNode.textContent.trim(); - if (label) { - input.setAttribute('aria-label', label); - } - }); - } -} - -document.addEventListener('DOMContentLoaded', checkbox); diff --git a/app/javascript/app/phone-internationalization.js b/app/javascript/app/phone-internationalization.js index 0232bfcace2..f3c88ac7c8b 100644 --- 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 index 430fff3ec9d..f9efb4ed9f0 100644 --- 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 = ` -
-