Skip to content

Use Icon List component for requested attributes consent #9555

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aduth merged 4 commits into from
Nov 16, 2023
Merged

Use Icon List component for requested attributes consent #9555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
64187ae
Support tag options for IconListItemComponent
aduth Nov 7, 2023
877a3bb
Use IconListComponent for requested attributes
aduth Nov 7, 2023
eb07ff4
Use ButtonComponent for auth confirmation
aduth Nov 7, 2023
4a06e37
Remove seemingly-unnecessary assertion content scoping
aduth Nov 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion app/assets/stylesheets/components/_index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
@forward 'hr';
@forward 'icon';
@forward 'language-picker';
@forward 'list';
@forward 'modal';
@forward 'nav';
@forward 'page-heading';
Expand Down
17 changes: 0 additions & 17 deletions app/assets/stylesheets/components/_list.scss
View file
Open in desktop

This file was deleted.

5 changes: 3 additions & 2 deletions app/components/icon_list_component.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,12 @@ def css_class
end

class IconListItemComponent < BaseComponent
attr_reader :icon, :color
attr_reader :icon, :color, :tag_options

def initialize(icon:, color:)
def initialize(icon:, color:, **tag_options)
@icon = icon
@color = color
@tag_options = tag_options
end

def icon_css_class
Expand Down
4 changes: 2 additions & 2 deletions app/components/icon_list_item_component.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<li class="usa-icon-list__item">
<%= content_tag(:li, **tag_options, class: [*tag_options[:class], 'usa-icon-list__item']) do %>
Copy link
Copy Markdown
Contributor

@zachmargolis zachmargolis Nov 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need to remove class so we don't accidentally override it?

Suggested change
<%= content_tag(:li, **tag_options, class: [*tag_options[:class], 'usa-icon-list__item']) do %>
<%= content_tag(:li, **tag_options.except(:class), class: [*tag_options[:class], 'usa-icon-list__item']) do %>

Copy link
Copy Markdown
Contributor Author

@aduth aduth Nov 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we need to remove class so we don't accidentally override it?

The order of the hash is intentional in ensuring that the component's class assignment always wins since it's defined last, and the relevant spec is written to cover for regressions on this behavior.

<%= content_tag(:div, class: icon_css_class) do %>
<%= render IconComponent.new(icon: icon) %>
<% end %>
<div class="usa-icon-list__content"><%= content %></div>
</li>
<% end %>
32 changes: 0 additions & 32 deletions app/views/sign_up/completions/_requested_attributes.html.erb
View file
Open in desktop

This file was deleted.

38 changes: 33 additions & 5 deletions app/views/sign_up/completions/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,44 @@
<%= image_tag asset_url(@presenter.image_name), width: 140, alt: @presenter.image_alt, class: 'margin-bottom-2' %>
</div>

<%= render PageHeadingComponent.new(class: 'tablet:margin-right-1 tablet:margin-left-1 text-center') do %>
<%= render PageHeadingComponent.new(class: 'text-center') do %>
<%= @presenter.heading %>
<% end %>

<p class="tablet:margin-right-1 tablet:margin-left-1 margin-top-4 margin-bottom-4">
<p class="margin-top-4 margin-bottom-4">
<%= @presenter.intro.html_safe %>
</p>
<div class='tablet:margin-left-1 tablet:margin-right-1'>
<%= render 'sign_up/completions/requested_attributes', pii: @presenter.pii %>
</div>

<%= render IconListComponent.new(icon: :check_circle, color: :success, class: 'border-bottom border-primary-light') do |c| %>
<% @presenter.pii.each do |attribute_key, attribute_value| %>
<% next if attribute_value.blank? %>
<% c.with_item(class: 'padding-y-2 border-top border-primary-light') do %>
<strong class="display-block">
<%= t("help_text.requested_attributes.#{attribute_key}") %>
</strong>
<% if attribute_value.is_a? Array %>
<ul class="usa-list usa-list--unstyled">
<% attribute_value.each do |item| %>
<li><%= item %></li>
<% end %>
</ul>
<% elsif attribute_key == :social_security_number %>
<%= render(
'shared/masked_text',
text: attribute_value,
masked_text: SsnFormatter.format_masked(attribute_value),
accessible_masked_text: t(
'idv.accessible_labels.masked_ssn',
first_number: attribute_value[0],
last_number: attribute_value[-1],
),
) %>
<% else %>
<%= attribute_value.to_s %>
<% end %>
<% end %>
<% end %>
<% end %>

<% if !@multiple_factors_enabled %>
<%= render(AlertComponent.new(type: :warning, class: 'margin-bottom-4')) do %>
Expand Down
50 changes: 27 additions & 23 deletions app/views/users/authorization_confirmation/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,30 +6,34 @@
<%= render PageHeadingComponent.new.with_content(decorated_sp_session.new_session_heading) %>
<% end %>

<div class='margin-top-4'>
<div class='margin-left-1 margin-bottom-1 text-bold'>
<%= t('user_authorization_confirmation.currently_logged_in') %>
</div>
<div class='tablet:margin-left-1 tablet:margin-right-1' >
<ul class='margin-bottom-4 usa-list--unstyled border-bottom border-primary-light success-bullets requested-attributes'>
<li class='success-bullet border-top border-primary-light'>
<span class='text-bold'>
<%= t('help_text.requested_attributes.email') %>
</span>
<span class='padding-left-2'>
<%= @email %>
</span>
</li>
</ul>
</div>
<div class="text-bold margin-top-4 margin-bottom-1">
<%= t('user_authorization_confirmation.currently_logged_in') %>
</div>
<%= render IconListComponent.new(icon: :check_circle, color: :success, class: 'border-bottom border-primary-light') do |c| %>
<% c.with_item(class: 'padding-y-2 border-top border-primary-light') do %>
<span class="text-bold padding-right-2">
<%= t('help_text.requested_attributes.email') %>
</span>
<%= @email %>
<% end %>
<% end %>

<div class='margin-top-4 text-center'>
<%= button_to(user_authorization_confirmation_path, class: 'usa-button usa-button--big usa-button--wide', method: :post) { t('user_authorization_confirmation.continue') } %>
</div>
<div class='margin-top-4 text-center'>
<div class="margin-top-4 text-center">
<%= render ButtonComponent.new(
action: ->(**tag_options, &block) do
button_to(user_authorization_confirmation_path, method: :post, **tag_options, &block)
end,
big: true,
wide: true,
).with_content(t('user_authorization_confirmation.continue')) %>
<div class="margin-y-4">
<%= t('user_authorization_confirmation.or') %>
</div>
<div class='margin-top-4 text-center'>
<%= button_to(reset_user_authorization_path, class: 'usa-button usa-button--big usa-button--wide', method: :delete) { t('user_authorization_confirmation.sign_in') } %>
</div>
<%= render ButtonComponent.new(
action: ->(**tag_options, &block) do
button_to(reset_user_authorization_path, method: :delete, **tag_options, &block)
end,
big: true,
wide: true,
).with_content(t('user_authorization_confirmation.sign_in')) %>
</div>
18 changes: 16 additions & 2 deletions spec/components/icon_list_component_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,11 @@
end

context 'with additional tag options' do
it 'applies tag options to wrapper element' do
rendered = render_inline IconListComponent.new(class: 'custom-class', data: { foo: 'bar' })
subject(:rendered) do
render_inline IconListComponent.new(class: 'custom-class', data: { foo: 'bar' })
end

it 'applies tag options to wrapper element' do
expect(rendered).to have_css('.usa-icon-list.custom-class[data-foo="bar"]')
end
end
Expand Down Expand Up @@ -65,5 +67,17 @@
expect(rendered).to have_css('.usa-icon use[href$=".svg#cancel"]', count: 1)
end
end

context 'with additional tag options on item' do
subject(:rendered) do
render_inline IconListComponent.new(icon: :cancel) do |c|
c.with_item(class: 'custom-class', data: { foo: 'bar' }) { 'First' }
end
end

it 'applies tag options to wrapper element' do
expect(rendered).to have_css('.usa-icon-list__item.custom-class[data-foo="bar"]')
end
end
end
end
6 changes: 2 additions & 4 deletions spec/features/openid_connect/authorization_confirmation_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,8 @@ def create_user_and_remember_device
perform_in_browser(:two) do
confirm_email_in_a_different_browser(email)
expect(current_path).to eq sign_up_completed_path
within('.requested-attributes') do
expect(page).to have_content t('help_text.requested_attributes.email')
expect(page).to have_content email
end
expect(page).to have_content t('help_text.requested_attributes.email')
expect(page).to have_content email

click_agree_and_continue

Expand Down
6 changes: 2 additions & 4 deletions spec/features/saml/authorization_confirmation_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,10 +107,8 @@ def create_user_and_remember_device
perform_in_browser(:two) do
confirm_email_in_a_different_browser(email)
expect(current_path).to eq sign_up_completed_path
within('.requested-attributes') do
expect(page).to have_content t('help_text.requested_attributes.email')
expect(page).to have_content email
end
expect(page).to have_content t('help_text.requested_attributes.email')
expect(page).to have_content email

click_agree_and_continue

Expand Down
15 changes: 6 additions & 9 deletions spec/features/saml/ial1_sso_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,12 @@
perform_in_browser(:two) do
confirm_email_in_a_different_browser(email)
expect(current_path).to eq sign_up_completed_path
within('.requested-attributes') do
expect(page).to have_content t('help_text.requested_attributes.email')
expect(page).to have_content email
expect(page).to_not have_content t('help_text.requested_attributes.address')
expect(page).to_not have_content t('help_text.requested_attributes.birthdate')
expect(page).to_not have_content t('help_text.requested_attributes.phone')
expect(page).
to_not have_content t('help_text.requested_attributes.social_security_number')
end
expect(page).to have_content t('help_text.requested_attributes.email')
expect(page).to have_content email
expect(page).to_not have_content t('help_text.requested_attributes.address')
expect(page).to_not have_content t('help_text.requested_attributes.birthdate')
expect(page).to_not have_content t('help_text.requested_attributes.phone')
expect(page).to_not have_content t('help_text.requested_attributes.social_security_number')

click_agree_and_continue

Expand Down
52 changes: 24 additions & 28 deletions spec/support/idv_examples/sp_requested_attributes.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,22 +22,20 @@

expect(current_path).to eq(sign_up_completed_path)

within('.requested-attributes') do
expect(page).to have_content t('help_text.requested_attributes.email')
expect(page).to have_content user.email
expect(page).to_not have_content t('help_text.requested_attributes.address')
expect(page).to_not have_content t('help_text.requested_attributes.birthdate')
expect(page).to have_content t('help_text.requested_attributes.full_name')
expect(page).to have_content 'FAKEY MCFAKERSON'
expect(page).to have_content t('help_text.requested_attributes.phone')
expect(page).to have_content '+1 202-555-1212'
expect(page).to have_content t('help_text.requested_attributes.social_security_number')
expect(page).to have_css(
'.masked-text__text',
text: DocAuthHelper::GOOD_SSN,
visible: :hidden,
)
end
expect(page).to have_content t('help_text.requested_attributes.email')
expect(page).to have_content user.email
expect(page).to_not have_content t('help_text.requested_attributes.address')
expect(page).to_not have_content t('help_text.requested_attributes.birthdate')
expect(page).to have_content t('help_text.requested_attributes.full_name')
expect(page).to have_content 'FAKEY MCFAKERSON'
expect(page).to have_content t('help_text.requested_attributes.phone')
expect(page).to have_content '+1 202-555-1212'
expect(page).to have_content t('help_text.requested_attributes.social_security_number')
expect(page).to have_css(
'.masked-text__text',
text: DocAuthHelper::GOOD_SSN,
visible: :hidden,
)
end
end

Expand Down Expand Up @@ -88,18 +86,16 @@

expect(current_path).to eq(sign_up_completed_path)

within('.requested-attributes') do
expect(page).to have_content t('help_text.requested_attributes.email')
expect(page).to have_content user.email
expect(page).to_not have_content t('help_text.requested_attributes.address')
expect(page).to_not have_content t('help_text.requested_attributes.birthdate')
expect(page).to have_content t('help_text.requested_attributes.full_name')
expect(page).to have_content 'FAKEY MCFAKERSON'
expect(page).to have_content t('help_text.requested_attributes.phone')
expect(page).to have_content '+1 202-555-1212'
expect(page).to have_content t('help_text.requested_attributes.social_security_number')
expect(page).to have_content DocAuthHelper::GOOD_SSN
end
expect(page).to have_content t('help_text.requested_attributes.email')
expect(page).to have_content user.email
expect(page).to_not have_content t('help_text.requested_attributes.address')
expect(page).to_not have_content t('help_text.requested_attributes.birthdate')
expect(page).to have_content t('help_text.requested_attributes.full_name')
expect(page).to have_content 'FAKEY MCFAKERSON'
expect(page).to have_content t('help_text.requested_attributes.phone')
expect(page).to have_content '+1 202-555-1212'
expect(page).to have_content t('help_text.requested_attributes.social_security_number')
expect(page).to have_content DocAuthHelper::GOOD_SSN
end
end
end