diff --git a/Gemfile b/Gemfile index 9ac8b7f3ee4..dee8b7bdd59 100644 --- a/Gemfile +++ b/Gemfile @@ -57,7 +57,7 @@ gem 'profanity_filter' gem 'propshaft' gem 'rack', '>= 3.0' gem 'rack-attack', github: 'rack/rack-attack', ref: 'd9fedfae4f7f6409f33857763391f4e18a6d7467' -gem 'rack-cors', '>= 1.0.5', require: 'rack/cors' +gem 'rack-cors', '>= 1.0.5', '< 2.0.1', require: 'rack/cors' gem 'rack-headers_filter' gem 'rack-timeout', require: false gem 'redacted_struct' @@ -76,7 +76,8 @@ gem 'stringex', require: false gem 'strong_migrations', '>= 0.4.2' gem 'subprocess', require: false gem 'terminal-table', require: false -gem 'valid_email', '>= 0.1.3' +# until a release includes https://github.com/hallelujah/valid_email/pull/126 +gem 'valid_email', '>= 0.1.3', github: 'hallelujah/valid_email', ref: '486b860' gem 'view_component', '~> 3.0' gem 'webauthn', '~> 2.5.2' gem 'xmldsig', '~> 0.6' diff --git a/Gemfile.lock b/Gemfile.lock index d31c1a552bd..e912059a4eb 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -44,6 +44,16 @@ GIT nokogiri (>= 1.10.2) pkcs11 +GIT + remote: https://github.com/hallelujah/valid_email.git + revision: 486b860fb40281d1ba99ec7621505abc5c9ad5bb + ref: 486b860 + specs: + valid_email (0.2.0) + activemodel + mail (>= 2.6.1) + simpleidn + GIT remote: https://github.com/hashrocket/capybara-webmock.git revision: d3f3b7c8edbeca7b575e74b256ad22df80d2b420 @@ -216,7 +226,7 @@ GEM erubi (~> 1.4) parser (>= 2.4) smart_properties - bigdecimal (3.1.5) + bigdecimal (3.1.6) bindata (2.4.15) bootsnap (1.17.0) msgpack (~> 1.2) @@ -249,7 +259,7 @@ GEM coderay (1.1.3) coercible (1.0.0) descendants_tracker (~> 0.0.1) - concurrent-ruby (1.2.2) + concurrent-ruby (1.2.3) connection_pool (2.4.1) cose (1.3.0) cbor (~> 0.5.9) @@ -418,11 +428,11 @@ GEM mini_histogram (0.3.1) mini_mime (1.1.5) mini_portile2 (2.8.5) - minitest (5.20.0) + minitest (5.22.2) msgpack (1.7.2) multiset (0.5.3) mutex_m (0.2.0) - net-imap (0.4.6) + net-imap (0.4.10) date net-protocol net-pop (0.1.2) @@ -431,7 +441,7 @@ GEM timeout net-sftp (3.0.0) net-ssh (>= 5.0.0, < 7.0.0) - net-smtp (0.4.0) + net-smtp (0.4.0.1) net-protocol net-ssh (6.1.0) newrelic_rpm (9.7.0) @@ -485,7 +495,7 @@ GEM raabro (1.4.0) racc (1.7.3) rack (3.0.9.1) - rack-cors (2.0.1) + rack-cors (2.0.0) rack (>= 2.0.0) rack-headers_filter (0.0.1) rack-mini-profiler (3.3.0) @@ -683,13 +693,9 @@ GEM concurrent-ruby (~> 1.0) unf (0.1.4) unf_ext - unf_ext (0.0.8) + unf_ext (0.0.9.1) unicode-display_width (2.5.0) uniform_notifier (1.16.0) - valid_email (0.1.4) - activemodel - mail (>= 2.6.1) - simpleidn view_component (3.9.0) activesupport (>= 5.2.0, < 8.0) concurrent-ruby (~> 1.0) @@ -729,7 +735,7 @@ GEM nokogiri (~> 1.11) xpath (3.2.0) nokogiri (~> 1.8) - yard (0.9.34) + yard (0.9.35) zeitwerk (2.6.12) zlib (3.0.0) zonebie (0.6.1) @@ -812,7 +818,7 @@ DEPENDENCIES puma (~> 6.0) rack (>= 3.0) rack-attack! - rack-cors (>= 1.0.5) + rack-cors (>= 1.0.5, < 2.0.1) rack-headers_filter rack-mini-profiler (>= 1.1.3) rack-test (>= 1.1.0) @@ -850,7 +856,7 @@ DEPENDENCIES subprocess tableparser terminal-table - valid_email (>= 0.1.3) + valid_email (>= 0.1.3)! view_component (~> 3.0) webauthn (~> 2.5.2) webmock diff --git a/app/assets/images/globe-blue.svg b/app/assets/images/globe-blue.svg deleted file mode 100644 index a1782e86118..00000000000 --- a/app/assets/images/globe-blue.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/images/globe-white.svg b/app/assets/images/globe-white.svg deleted file mode 100644 index 88a59e3d128..00000000000 --- a/app/assets/images/globe-white.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/assets/stylesheets/components/_language-picker.scss b/app/assets/stylesheets/components/_language-picker.scss index 5910f030e92..39c43f5755a 100644 --- a/app/assets/stylesheets/components/_language-picker.scss +++ b/app/assets/stylesheets/components/_language-picker.scss @@ -43,18 +43,6 @@ } } - span { - margin: 0 units(1); - } - - &::after { - content: ''; - display: block; - width: 0.8125rem; - height: 0.8125rem; - background-size: 0.8125rem; - } - &.usa-accordion__button[aria-expanded='false'], &.usa-accordion__button[aria-expanded='true'] { background-image: none; @@ -64,23 +52,28 @@ &:hover { background-color: transparent; } - - &::after { - background-image: url('/angle-arrow-up.svg'); - - @include at-media('tablet') { - background-image: url('/angle-arrow-up-white.svg'); - } - } } &.usa-accordion__button[aria-expanded='true'] { @include u-bg('primary'); color: color('white'); + } +} - &::after { - background-image: url('/angle-arrow-down-white.svg'); - } +.language-picker__label-text { + margin-left: units(1); + margin-right: units(0.5); +} + +.language-picker__expander { + transition: transform $project-easing; + + @media (prefers-reduced-motion) { + transition: none; + } + + .usa-accordion__button[aria-expanded='false'] & { + transform: rotate(-180deg); } } diff --git a/app/components/icon_component.html.erb b/app/components/icon_component.html.erb index 59d6b4b5695..274a84e440e 100644 --- a/app/components/icon_component.html.erb +++ b/app/components/icon_component.html.erb @@ -1,10 +1,11 @@ <%= content_tag( - :svg, - aria: { hidden: true }, - focusable: 'false', - role: 'img', + :span, + content_tag( + :style, + "#icon-#{unique_id} { mask-image: url(#{icon_path}); -webkit-mask-image: url(#{icon_path}); }", + nonce: content_security_policy_nonce, + ), **tag_options, + id: "icon-#{unique_id}", class: css_class, - ) do %> - -<% end %> + ) -%> diff --git a/app/components/icon_component.rb b/app/components/icon_component.rb index 40250ff994a..4923b3ea551 100644 --- a/app/components/icon_component.rb +++ b/app/components/icon_component.rb @@ -255,13 +255,13 @@ def initialize(icon:, size: nil, **tag_options) end def css_class - classes = ['usa-icon', *tag_options[:class]] + classes = ['icon', 'usa-icon', *tag_options[:class]] classes << "usa-icon--size-#{size}" if size classes end def icon_path - asset_path([asset_path('sprite.svg'), '#', icon].join, host: asset_host) + @icon_path ||= asset_path("usa-icons/#{icon}.svg", host: asset_host) end private diff --git a/app/components/icon_component.scss b/app/components/icon_component.scss index 6b0bdc27e2a..2591b1d1b9c 100644 --- a/app/components/icon_component.scss +++ b/app/components/icon_component.scss @@ -3,6 +3,11 @@ @forward 'usa-icon'; +.icon { + mask-size: 100%; + background-color: currentColor; +} + $icon-min-padding: 2px; // Upstream: https://github.com/uswds/uswds/pull/4493 diff --git a/app/components/language_picker_component.html.erb b/app/components/language_picker_component.html.erb index 7caa09ead3a..9aab9f2bb86 100644 --- a/app/components/language_picker_component.html.erb +++ b/app/components/language_picker_component.html.erb @@ -7,11 +7,11 @@ expanded: false, }, ) do %> - <%= image_tag(asset_url('globe-blue.svg'), width: 12, height: 12, alt: '', class: 'tablet:display-none') %> - <%= image_tag(asset_url('globe-white.svg'), width: 12, height: 12, alt: '', class: 'display-none tablet:display-inline') %> - + <%= render IconComponent.new(icon: :language) %> + <%= t('i18n.language') %> + <%= render IconComponent.new(icon: :expand_more, size: 3, class: 'language-picker__expander') %> <% end %>