diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_summary_example-summary-card-grouped_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_summary_example-summary-card-grouped_0_document_0_desktop.png new file mode 100644 index 0000000000..ab0391cb1c --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_summary_example-summary-card-grouped_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1e5a0f82a3934e491562d59c1eab61d7a124d9beac50e23e52371dc1946deed7 +size 162935 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_summary_example-summary-card-grouped_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_summary_example-summary-card-grouped_0_document_1_tablet.png new file mode 100644 index 0000000000..1f311d9ace --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_summary_example-summary-card-grouped_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c5316a26f411a862d90d6dad13faa64f43370090aa93f407b55c701516f388d2 +size 168527 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_summary_example-summary-card-grouped_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_summary_example-summary-card-grouped_0_document_2_mobile.png new file mode 100644 index 0000000000..2ce307e780 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_summary_example-summary-card-grouped_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:122998307359232529634d3408e63f06fba93805bf684671960d5addd87d36af +size 164608 diff --git a/src/components/document-list/document-list.scss b/src/components/document-list/document-list.scss index f0eb68e9ea..323d2a7160 100644 --- a/src/components/document-list/document-list.scss +++ b/src/components/document-list/document-list.scss @@ -4,7 +4,7 @@ margin-bottom: 0; &__item { - border-bottom: 1px solid var(--ons-color-borders-list); + border-bottom: 1px solid var(--ons-color-borders-light); margin: 0 0 1.5rem; padding: 0 0 1.5rem; diff --git a/src/components/download-resources/_download-resources.scss b/src/components/download-resources/_download-resources.scss index 914a17d488..ccfacdee02 100644 --- a/src/components/download-resources/_download-resources.scss +++ b/src/components/download-resources/_download-resources.scss @@ -1,6 +1,6 @@ .ons-adv-filter { &__gallery { - border-top: 1px solid var(--ons-color-borders-list); + border-top: 1px solid var(--ons-color-borders-light); margin-left: 0; padding-left: 0; padding-top: 1.5rem; diff --git a/src/components/summary/_macro-options.md b/src/components/summary/_macro-options.md index 4ca0ac1520..ad4a3e9c91 100644 --- a/src/components/summary/_macro-options.md +++ b/src/components/summary/_macro-options.md @@ -1,8 +1,8 @@ -| Name | Type | Required | Description | -| --------- | ------------------ | -------- | ----------------------------------------- | -| summaries | Array`` | true | An array of [summaries](#summaries) | -| classes | string | false | Classes to add to the summary component | -| hub | boolean | false | Set to “true” to use the summary as a hub | +| Name | Type | Required | Description | +| --------- | ------------------ | -------- | -------------------------------------------------------------- | +| summaries | Array`` | true | An array of [summaries](#summaries) | +| classes | string | false | Classes to add to the summary component | +| variant | string | false | Can be set to card or hub to use those variants of the summary | ## Summaries @@ -13,13 +13,13 @@ ## SummaryGroup -| Name | Type | Required | Description | -| --------------- | -------------------- | ----------------------------------- | ------------------------------------------------------------------------------ | -| rows | Array`` | true (unless `placeholderText` set) | An array of [rows](#summaryrow) within a group | -| placeholderText | string | true (unless `rows` set) | A message to be shown as a placeholder if there are no rows in the summary | -| groupTitle | string | false | The title heading for a summary within a group | -| id | string | false | The HTML `id` of the group | -| summaryLink | Array`` | false | Settings for the [summary link](#summarylink) used to a new row to the summary | +| Name | Type | Required | Description | +| --------------- | -------------------- | ------------------------------------------- | ------------------------------------------------------------------------------ | +| rows | Array`` | true (unless `placeholderText` set) | An array of [rows](#summaryrow) within a group | +| placeholderText | string | true (unless `rows` set) | A message to be shown as a placeholder if there are no rows in the summary | +| groupTitle | string | false (`true` if variant is set to `card` ) | The title heading for a summary within a group | +| id | string | false | The HTML `id` of the group | +| summaryLink | Array`` | false | Settings for the [summary link](#summarylink) used to a new row to the summary | ## SummaryRow diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk index 5f2909d658..be028fc91b 100644 --- a/src/components/summary/_macro.njk +++ b/src/components/summary/_macro.njk @@ -2,13 +2,17 @@ {% set className = "ons-summary" %} {% set titleSize = "2" %} - {% if params.classes %} - {% set className = className + " " + params.classes %} + {% if params.variant == "hub" %} + {% set variantHub = true %} + {% set className = className + " ons-summary--hub" %} + {% elif params.variant %} + {% set variantClasses = " ons-summary__group--" + params.variant %} {% endif %} - {% if params.hub %} - {% set className = className + " ons-summary--hub" %} + {% if params.classes %} + {% set className = className + " " + params.classes %} {% endif %} +
{% for summary in params.summaries %} {% if summary.summaryTitle %} @@ -16,7 +20,7 @@ {% set titleSize = "3" %} {% endif %} {% for group in summary.groups %} -
+
{% if group.groupTitle %} {{ group.groupTitle }} {% endif %} @@ -27,7 +31,6 @@ {% set itemClass = "" %} {% if row.error %} {% set itemClass = " ons-summary__item--error" %}{% endif %} {% if row.total %} {% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %} -
{% if row.errorMessage %}
{{ row.errorMessage }}
@@ -57,7 +60,7 @@
{# Render section status for mobile if is hub #} - {% if params.hub and rowItem.valueList %} + {% if variantHub and rowItem.valueList %} — {{ rowItem.valueList[0].text | safe }} {% endif %} @@ -111,8 +114,10 @@ {% endif %} {% if group.summaryLink %} -
- {{ group.summaryLink.text }} +
+ {% if params.variant == 'card' %}
{% endif %} + {{ group.summaryLink.text }} + {% if params.variant == 'card' %}
{% endif %}
{% endif %}
diff --git a/src/components/summary/_macro.spec.js b/src/components/summary/_macro.spec.js index 3d88fb4e07..0585af9049 100644 --- a/src/components/summary/_macro.spec.js +++ b/src/components/summary/_macro.spec.js @@ -533,7 +533,7 @@ describe('macro: summary', () => { const $ = cheerio.load( renderComponent('summary', { ...EXAMPLE_SUMMARY_BASIC, - hub: true, + variant: 'hub', }), ); @@ -545,7 +545,7 @@ describe('macro: summary', () => { const $ = cheerio.load( renderComponent('summary', { ...EXAMPLE_SUMMARY_BASIC, - hub: true, + variant: 'hub', }), ); @@ -556,7 +556,7 @@ describe('macro: summary', () => { const $ = cheerio.load( renderComponent('summary', { ...EXAMPLE_SUMMARY_BASIC, - hub: true, + variant: 'hub', }), ); @@ -605,3 +605,23 @@ describe('macro: summary', () => { }); }); }); + +describe('mode: card', () => { + it('passes jest-axe checks', async () => { + const $ = cheerio.load(renderComponent('summary', { ...EXAMPLE_SUMMARY_BASIC, variant: 'card' })); + + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + + it('has the correct classes applied', () => { + const $ = cheerio.load( + renderComponent('summary', { + ...EXAMPLE_SUMMARY_MULTIPLE_GROUPS, + variant: 'card', + }), + ); + + expect($('.ons-summary__group').hasClass('ons-summary__group--card')).toBe(true); + }); +}); diff --git a/src/components/summary/_summary.scss b/src/components/summary/_summary.scss index 5050beaad9..582c08f566 100644 --- a/src/components/summary/_summary.scss +++ b/src/components/summary/_summary.scss @@ -27,7 +27,7 @@ $hub-row-spacing: 1.3rem; line-height: 1.4; &:not(:last-child), - &:nth-of-type(1) { + &:not(.ons-summary__group--card .ons-summary__item):nth-of-type(1) { border-bottom: 1px solid var(--ons-color-borders); } @@ -208,4 +208,36 @@ $hub-row-spacing: 1.3rem; } } } + + &__group { + &--card { + border: 1px solid var(--ons-color-borders-light); + .ons-summary__items { + padding: 0 1.25rem; + .ons-summary__item:not(:last-child) { + border-bottom: 1px solid var(--ons-color-borders-light); + } + } + .ons-summary__group-title { + background-color: var(--ons-color-grey-5); + padding: 1rem 1.25rem; + } + .ons-summary__link { + padding: 0 1.25rem; + div { + padding: 1rem 0; + border-top: 1px solid var(--ons-color-borders-light); + } + } + .ons-summary__placeholder { + display: block; + padding: 0.5rem 1.25rem 0; + } + .ons-summary__placeholder + .ons-summary__link { + div { + border-top: none; + } + } + } + } } diff --git a/src/components/summary/example-summary-card-grouped.njk b/src/components/summary/example-summary-card-grouped.njk new file mode 100644 index 0000000000..faf240dcc2 --- /dev/null +++ b/src/components/summary/example-summary-card-grouped.njk @@ -0,0 +1,352 @@ +{% from "components/summary/_macro.njk" import onsSummary %} + +{{ + onsSummary({ + "variant": "card", + "summaries": [ + { + "summaryTitle": "John Doe", + "groups": [ + { + "groupTitle": "Personal details", + "rows": [ + { + "rowTitle": "Are you John Doe?", + "rowItems": [ + { + "valueList": [ + { + "text": "Yes I am" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + }, + { + "rowTitle": "What's your date of birth?", + "rowItems": [ + { + "valueList": [ + { + "text": "1 January 1981" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + }, + { + "rowTitle": "What is your sex?", + "rowItems": [ + { + "valueList": [ + { + "text": "Male" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + } + ] + }, + { + "groupTitle": "Identity and health", + "rows": [ + { + "rowTitle": "What is your country of birth?", + "rowItems": [ + { + "valueList": [ + { + "text": "England" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + }, + { + "rowTitle": "What passports do you hold?", + "rowItems": [ + { + "valueList": [ + { + "text": "United Kingdom" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + } + ] + }, + { + "groupTitle": "Qualifications", + "rows": [ + { + "rowTitle": "Have you completed an apprenticeship?", + "rowItems": [ + { + "valueList": [ + { + "text": "Yes" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + }, + { + "rowTitle": "Have you achieved a GCSE or equivalent qualification?", + "rowItems": [ + { + "valueList": [ + { + "text": "5 GCSEs grades A* to C or 9 to 4" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + } + ] + }, + { + "groupTitle": "Employment history", + "rows": [ + { + "rowItems": [ + { + "rowTitle": "Name of UK company", + "valueList": [ + { + "text": "Company A" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + }, + { + "text": "Remove", + "visuallyHiddenText": "Remove company", + "url": "#0" + } + ] + }, + { + "rowTitle": "Head office location", + "valueList": [ + { + "text": "Cardiff" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + }, + { + "rowTitle": "Is this UK company your current employer?", + "valueList": [ + { + "text": "No" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + }, + { + "rowItems": [ + { + "rowTitle": "Name of UK company", + "valueList": [ + { + "text": "Company A" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + }, + { + "text": "Remove", + "visuallyHiddenText": "Remove company", + "url": "#0" + } + ] + }, + { + "rowTitle": "Head office location", + "valueList": [ + { + "text": "Newport" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + }, + { + "rowTitle": "Is this UK company your current employer?", + "valueList": [ + { + "text": "Yes" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + } + ], + "summaryLink": { + "text": "Add a UK company or branch", + "url": "#0", + "attributes": { + "data-qa": "add-item-link" + } + } + }, + { + "groupTitle": "Spending", + "rows": [ + { + "rowTitle": "What are your monthly household expenses?", + "rowItems": [ + { + "rowTitle": "Food", + "valueList": [ + { + "text": "£50.00" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + }, + { + "rowTitle": "Utilities", + "valueList": [ + { + "text": "£65.00" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + }, + { + "rowTitle": "Transport", + "valueList": [ + { + "text": "£70.00" + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + }, + { + "rowTitle": "Other", + "valueList": [ + { + "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." + } + ], + "actions": [ + { + "text": "Change", + "visuallyHiddenText": "Change answer", + "url": "#0" + } + ] + } + ] + } + ] + } + ] + } + ] + }) +}} diff --git a/src/components/summary/example-summary-hub.njk b/src/components/summary/example-summary-hub.njk index 351349d3f6..5811c61f49 100644 --- a/src/components/summary/example-summary-hub.njk +++ b/src/components/summary/example-summary-hub.njk @@ -1,7 +1,7 @@ {% from "components/summary/_macro.njk" import onsSummary %} {{ onsSummary({ - "hub": true, + "variant": "hub", "summaries": [ { "groups": [ diff --git a/src/patterns/hub-and-spoke/example-hub-complete.njk b/src/patterns/hub-and-spoke/example-hub-complete.njk index e9111321d0..4e40e6dd29 100644 --- a/src/patterns/hub-and-spoke/example-hub-complete.njk +++ b/src/patterns/hub-and-spoke/example-hub-complete.njk @@ -27,7 +27,7 @@ layout: ~ {% endcall %} {{ onsSummary({ - "hub": true, + "variant": "hub", "classes": "ons-u-mt-m", "summaries": [ { diff --git a/src/patterns/hub-and-spoke/example-hub.njk b/src/patterns/hub-and-spoke/example-hub.njk index 023d583d45..a04d8a1c4b 100644 --- a/src/patterns/hub-and-spoke/example-hub.njk +++ b/src/patterns/hub-and-spoke/example-hub.njk @@ -21,7 +21,7 @@ layout: ~

Choose another section to complete

{{ onsSummary({ - "hub": true, + "variant": "hub", "classes": "ons-u-mt-m", "summaries": [ { diff --git a/src/scss/vars/_colors.scss b/src/scss/vars/_colors.scss index b76b6d0bb3..03df675874 100644 --- a/src/scss/vars/_colors.scss +++ b/src/scss/vars/_colors.scss @@ -97,7 +97,7 @@ // Borders --ons-color-borders: var(--ons-color-grey-75); --ons-color-borders-indent: var(--ons-color-grey-35); - --ons-color-borders-list: var(--ons-color-grey-35); + --ons-color-borders-light: var(--ons-color-grey-35); --ons-color-borders-document-image: var(--ons-color-grey-15); --ons-color-borders-document-image-focus: var(--ons-color-black);