diff --git a/app/assets/stylesheets/components/_all.scss b/app/assets/stylesheets/components/_all.scss index eaddcd914..706179696 100644 --- a/app/assets/stylesheets/components/_all.scss +++ b/app/assets/stylesheets/components/_all.scss @@ -1,3 +1,4 @@ +@import "claim/card"; @import "autocomplete"; @import "content_header"; @import "header"; diff --git a/app/assets/stylesheets/components/claim/card.scss b/app/assets/stylesheets/components/claim/card.scss new file mode 100644 index 000000000..81315ab50 --- /dev/null +++ b/app/assets/stylesheets/components/claim/card.scss @@ -0,0 +1,46 @@ +.claim-card { + display: flex; + flex-direction: column; + gap: govuk-spacing(1); + border-bottom: 1px solid $govuk-border-colour; + padding: govuk-spacing(2) 0; + margin-bottom: govuk-spacing(1); + + .claim-card__header { + display: flex; + justify-content: space-between; + align-items: flex-start; + flex-wrap: wrap; + + .claim-card__header__name { + display: flex; + gap: govuk-spacing(1); + + &.govuk-heading-s { + margin-bottom: govuk-spacing(1); + } + } + } + + .claim-card__body { + display: flex; + justify-content: space-between; + gap: govuk-spacing(2); + + .claim-card__body__provider { + flex-grow: 1; + max-width: 66%; + } + + .claim-card__body__right { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-end; + } + + .govuk-body-s { + margin-bottom: govuk-spacing(1); + } + } +} diff --git a/app/components/claim/card_component.html.erb b/app/components/claim/card_component.html.erb new file mode 100644 index 000000000..df9123c50 --- /dev/null +++ b/app/components/claim/card_component.html.erb @@ -0,0 +1,20 @@ +
<%= t("pagination_info", from: @pagy.from, to: @pagy.to, count: @pagy.count) %>
diff --git a/config/locales/en/claims/support/claims.yml b/config/locales/en/claims/support/claims.yml index 1159153b4..e5cd73eb5 100644 --- a/config/locales/en/claims/support/claims.yml +++ b/config/locales/en/claims/support/claims.yml @@ -3,7 +3,7 @@ en: support: claims: index: - heading: Claims + heading: Claims (%{count}) download_csv: Download claims search_label: Search by claim reference show: diff --git a/spec/system/claims/support/claims/view_a_claim_spec.rb b/spec/system/claims/support/claims/view_a_claim_spec.rb index 931497147..595e47925 100644 --- a/spec/system/claims/support/claims/view_a_claim_spec.rb +++ b/spec/system/claims/support/claims/view_a_claim_spec.rb @@ -36,7 +36,7 @@ def when_i_visit_claim_index_page end def when_i_click_on_claim(claim) - click_on(claim.id) + click_on(claim.school.name) end def then_i_can_see_the_details_of_a_submitted_claim diff --git a/spec/system/claims/support/claims/view_claims_spec.rb b/spec/system/claims/support/claims/view_claims_spec.rb index c2c0bfa88..3a754685f 100644 --- a/spec/system/claims/support/claims/view_claims_spec.rb +++ b/spec/system/claims/support/claims/view_claims_spec.rb @@ -13,6 +13,7 @@ scenario "Support user visits the claims index page" do when_i_visit_claim_index_page then_i_see_a_list_of_submitted_claims + and_i_see_no_draft_claims end private @@ -27,15 +28,17 @@ def when_i_visit_claim_index_page end def then_i_see_a_list_of_submitted_claims - expect(page).to have_content("ID") - expect(page).to have_content("Status") - expect(page).to have_selector("tbody tr", count: 1) - - expect(page).not_to have_selector("td", text: claim_1.id) - - within("tbody tr:nth-child(1)") do - expect(page).to have_selector("td", text: claim_2.id) - expect(page).to have_selector("td", text: "Submitted") + within(".claim-card:nth-child(1)") do + expect(page).to have_content(claim_2.school.name) + expect(page).to have_content(claim_2.reference) + expect(page).to have_content("Submitted") + expect(page).to have_content(claim_2.provider.name) + expect(page).to have_content(I18n.l(claim_2.created_at.to_date, format: :short)) + expect(page).to have_content(claim_2.amount.format(no_cents_if_whole: true)) end end + + def and_i_see_no_draft_claims + expect(page).not_to have_content(claim_1.reference) + end end