From 2f6bcf08a63dcfcf0a2447607b3b3252e1f0dea1 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Mon, 9 Dec 2024 13:29:11 +0000 Subject: [PATCH] Add inline description list variant (#3439) Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- ...-description-list_0_document_0_desktop.png | 3 + ...e-description-list_0_document_1_tablet.png | 3 + ...e-description-list_0_document_2_mobile.png | 3 + .../description-list/_description-list.scss | 49 +++++++++++++--- .../description-list/_macro-options.md | 1 + src/components/description-list/_macro.njk | 32 ++++++---- .../description-list/_macro.spec.js | 12 +++- .../example-inline-description-list.njk | 58 +++++++++++++++++++ 8 files changed, 139 insertions(+), 22 deletions(-) create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_0_desktop.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_1_tablet.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_2_mobile.png create mode 100644 src/components/description-list/example-inline-description-list.njk diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_0_desktop.png new file mode 100644 index 0000000000..0a08429eb9 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:10b3fac1f117b5156eed79c8e8acd67c758bcf750706a405f707127224f296e5 +size 29101 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_1_tablet.png new file mode 100644 index 0000000000..094d8bb803 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f86583c3c214887dfe5a160e4f9e89827597713760b91ed7bef9650d6830abb3 +size 26901 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_2_mobile.png new file mode 100644 index 0000000000..f5141703a9 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-inline-description-list_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:24353f18540d373c96f4de57c56514d2dfc1c2d792c92436bff1ae9e0fd55e35 +size 23850 diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index c96a09c8c5..bb13bae702 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -7,25 +7,56 @@ clear: both; float: left; font-weight: $font-weight-bold; - - &:not(:first-child) { - margin-top: 0.5rem; - } } &__value { float: right; margin-left: 0; /* As normalize adds a 40px left margin */ + } - &:not(:nth-of-type(1)) { - @include mq(m) { + &__item { + &:not(:first-child) { + .ons-description-list__term { margin-top: 0.5rem; } + + .ons-description-list__value:nth-of-type(1) { + @include mq(m) { + margin-top: 0.5rem; + } + } + + .ons-description-list--inline & { + .ons-description-list__value:nth-of-type(1), + .ons-description-list__term { + @include mq(l) { + margin-top: 0; + } + @include mq(xs, l) { + margin-top: 0.5rem; + } + } + } + } + } + + &--inline { + .ons-description-list__term { + padding-right: 1rem; } - & + & { - @include mq(m) { - margin-top: 0; + @include mq(l) { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.5rem 2.5rem; + + .ons-description-list__value { + grid-column-start: 2; + } + + .ons-description-list__item { + display: grid; + grid-template-columns: auto 1fr; } } } diff --git a/src/components/description-list/_macro-options.md b/src/components/description-list/_macro-options.md index bd2240c953..324f027775 100644 --- a/src/components/description-list/_macro-options.md +++ b/src/components/description-list/_macro-options.md @@ -6,6 +6,7 @@ | termCol | number | true | The number of grid columns used for the `
` elements above medium breakpoint | | descriptionCol | number | true | The number of grid columns used for the `
` elements above medium breakpoint | | itemsList | array`` | true | Settings for the terms and descriptions of the [description list items](#item) | +| variant | string | false | Set to "inline" to display the description list inline | ## Item diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index ecc80957fb..329491b2c9 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -1,23 +1,31 @@ {% macro onsDescriptionList(params) %}
{% for item in params.itemsList %} - {% if item.term | length %} -
{{ item.term }}
- {% endif %} - {% for descriptionItem in item.descriptions %} - {% if descriptionItem.description | length %} -
+ {% if item.term | length %} +
- {{- descriptionItem.description -}} -
+ {{- item.term -}} + {% endif %} - {% endfor %} + {% for descriptionItem in item.descriptions %} + {% if descriptionItem.description | length %} +
+ {{- descriptionItem.description -}} +
+ {% endif %} + {% endfor %} + {% endfor %} {% endmacro %} diff --git a/src/components/description-list/_macro.spec.js b/src/components/description-list/_macro.spec.js index 77734837f3..fa45111ceb 100644 --- a/src/components/description-list/_macro.spec.js +++ b/src/components/description-list/_macro.spec.js @@ -1,7 +1,6 @@ /** @jest-environment jsdom */ import * as cheerio from 'cheerio'; - import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; @@ -87,6 +86,17 @@ describe('macro: description-list', () => { expect($('#example-id').length).toBe(1); }); + it('has the provided variant style class when variant is provided', () => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + variant: 'inline', + }), + ); + + expect($('.ons-description-list').hasClass('ons-description-list--inline')).toBe(true); + }); + it('has additionally provided style classes', () => { const $ = cheerio.load( renderComponent('description-list', { diff --git a/src/components/description-list/example-inline-description-list.njk b/src/components/description-list/example-inline-description-list.njk new file mode 100644 index 0000000000..e7114ffd1e --- /dev/null +++ b/src/components/description-list/example-inline-description-list.njk @@ -0,0 +1,58 @@ +{% from "components/description-list/_macro.njk" import onsDescriptionList %} +{{ + onsDescriptionList({ + "classes": "ons-u-mb-no", + "descriptionListLabel": "Information about this business and its survey requirements", + "variant": 'inline', + "termCol": "4", + "descriptionCol": "8", + "itemsList": [ + { + "term": "Survey:", + "descriptions": [ + { + "description": "Bricks & Blocks" + } + ] + }, + { + "term": "RU Refs:", + "descriptions": [ + { + "description": "49900000118" + }, + { + "description": "49300005832" + } + ] + }, + { + "term": "Business:", + "descriptions": [ + { + "description": "Bolts & Ratchets Ltd." + } + ] + }, + { + "term": "Trading as:", + "descriptions": [ + { + "description": "Bolts & Ratchets" + } + ] + }, + { + "term": "To:", + "descriptions": [ + { + "description": "Jacky Turner" + }, + { + "description": "Louise Goodland" + } + ] + } + ] + }) +}}