From f4b1347db9655c49ce3a1297fee724d1af15f5f3 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Wed, 27 Nov 2024 12:10:21 +0000 Subject: [PATCH 01/48] add inital changes --- .../description-list/_description-list.scss | 8 + .../description-list/_macro-options.md | 1 + src/components/description-list/_macro.njk | 37 ++- .../description-list/_macro.spec.js | 269 ++++++++---------- .../description-list/_test-examples.js | 57 ++++ .../example-description-list-horizontal.njk | 58 ++++ 6 files changed, 272 insertions(+), 158 deletions(-) create mode 100644 src/components/description-list/_test-examples.js create mode 100644 src/components/description-list/example-description-list-horizontal.njk diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index c96a09c8c5..4bd3a0373d 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -1,6 +1,14 @@ .ons-description-list { &__items { margin: 0 0 2rem; + + &.ons-description-list--horizontal { + @media (width >= 980px) { + grid-template-columns: repeat(3, 1fr); + display: grid; + gap: 0.5rem 2.5rem; + } + } } &__term { diff --git a/src/components/description-list/_macro-options.md b/src/components/description-list/_macro-options.md index bd2240c953..884f343c17 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) | +| horizontal | boolean | false | Set to "true" to align the description list horizontally | ## Item diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index ecc80957fb..1fccc0105b 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -1,23 +1,34 @@ {% macro onsDescriptionList(params) %}
{% for item in params.itemsList %} - {% if item.term | length %} -
{{ item.term }}
- {% endif %} - {% for descriptionItem in item.descriptions %} - {% if descriptionItem.description | length %} -
- {{- descriptionItem.description -}} -
+ {% set descriptionItems %} + {% if item.term | length %} +
{{ item.term }}
{% endif %} - {% endfor %} + + {% for descriptionItem in item.descriptions %} + {% if descriptionItem.description | length %} +
+ {{- descriptionItem.description -}} +
+ {% endif %} + {% endfor %} + {% endset %} + + {% if params.horizontal %} +
{{ descriptionItems | safe }}
+ {% else %} + {{ descriptionItems | safe }} + {% endif %} {% endfor %}
{% endmacro %} diff --git a/src/components/description-list/_macro.spec.js b/src/components/description-list/_macro.spec.js index 77734837f3..f669d3278b 100644 --- a/src/components/description-list/_macro.spec.js +++ b/src/components/description-list/_macro.spec.js @@ -1,167 +1,146 @@ /** @jest-environment jsdom */ import * as cheerio from 'cheerio'; - import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; - -const EXAMPLE_DESCRIPTION_LIST_FULL = { - id: 'example-id', - classes: 'ons-u-mb-no', - descriptionListLabel: 'This is an example of the description list component', - termCol: 2, - descriptionCol: 10, - itemsList: [ - { - term: 'Survey:', - descriptions: [ - { - id: 'description-1', - description: 'Bricks & Blocks', - }, - ], - }, - { - term: 'RU Refs:', - descriptions: [ - { - id: 'description-2', - description: '49900000118', - }, - { - id: 'description-3', - description: '49300005832', - }, - ], - }, - ], -}; - -const EXAMPLE_DESCRIPTION_LIST_MINIMAL = { - itemsList: [ - { - term: 'Survey:', - descriptions: [ - { - description: 'Bricks & Blocks', - }, - ], - }, - { - term: 'RU Refs:', - descriptions: [ - { - description: '49900000118', - }, - { - description: '49300005832', - }, - ], - }, - ], -}; - -describe('macro: description-list', () => { - it('passes jest-axe checks when all parameters are provided', async () => { - const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL)); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); +import { EXAMPLE_DESCRIPTION_LIST_FULL, EXAMPLE_DESCRIPTION_LIST_MINIMAL } from './_test-examples'; + +describe('FOR: Macro: Description List', () => { + describe('GIVEN: Params: required', () => { + describe('WHEN: all required params are provided', () => { + const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_MINIMAL)); + test('THEN: jest-axe checks pass', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + }); }); - it('passes jest-axe checks when minimal parameters are provided', async () => { - const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_MINIMAL)); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); + describe('GIVEN: Params: all', () => { + describe('WHEN: all params are provided', () => { + const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL)); + test('THEN: jest-axe checks pass', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + }); }); - it('has the provided `id` attribute', () => { - const $ = cheerio.load( - renderComponent('description-list', { - ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - id: 'example-id', - }), - ); - - expect($('#example-id').length).toBe(1); + describe('GIVEN: Params: id', () => { + describe('WHEN: id is provided', () => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + id: 'example-id', + }), + ); + test('THEN: renders with provided id', () => { + expect($('#example-id').length).toBe(1); + }); + }); }); - it('has additionally provided style classes', () => { - const $ = cheerio.load( - renderComponent('description-list', { - ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - classes: 'extra-class another-extra-class', - }), - ); - - expect($('.ons-description-list').hasClass('extra-class')).toBe(true); - expect($('.ons-description-list').hasClass('another-extra-class')).toBe(true); + describe('GIVEN: Params: classes', () => { + describe('WHEN: additional style classes are provided', () => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + classes: 'extra-class another-extra-class', + }), + ); + test('THEN: renders with provided classes', () => { + expect($('.ons-description-list').hasClass('extra-class')).toBe(true); + expect($('.ons-description-list').hasClass('another-extra-class')).toBe(true); + }); + }); }); - it('outputs `title` and `aria-label` attributes when `descriptionListLabel` is provided', () => { - const $ = cheerio.load( - renderComponent('description-list', { - ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - descriptionListLabel: 'This is an example of the description list component', - }), - ); - - expect($('.ons-description-list').attr('title')).toBe('This is an example of the description list component'); - expect($('.ons-description-list').attr('aria-label')).toBe('This is an example of the description list component'); + describe('GIVEN: Params: descriptionListLabel', () => { + describe('WHEN: descriptionListLabel is provided', () => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + descriptionListLabel: 'This is an example of the description list component', + }), + ); + test('THEN: renders with title and aria-label attributes', () => { + expect($('.ons-description-list').attr('title')).toBe('This is an example of the description list component'); + expect($('.ons-description-list').attr('aria-label')).toBe('This is an example of the description list component'); + }); + }); }); - it('outputs list items as expected', () => { - const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL)); - - const $listElements = $('.ons-description-list__term, .ons-description-list__value'); - - expect($listElements[0].tagName).toBe('dt'); - expect($($listElements[0]).text()).toBe('Survey:'); - - expect($listElements[1].tagName).toBe('dd'); - expect($($listElements[1]).attr('id')).toBe('description-1'); - expect($($listElements[1]).text()).toBe('Bricks & Blocks'); - - expect($listElements[2].tagName).toBe('dt'); - expect($($listElements[2]).text()).toBe('RU Refs:'); - - expect($listElements[3].tagName).toBe('dd'); - expect($($listElements[3]).attr('id')).toBe('description-2'); - expect($($listElements[3]).text()).toBe('49900000118'); - - expect($listElements[4].tagName).toBe('dd'); - expect($($listElements[4]).attr('id')).toBe('description-3'); - expect($($listElements[4]).text()).toBe('49300005832'); + describe('GIVEN: Params: horizontal', () => { + describe('WHEN: horizontal is true', () => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + horizontal: true, + }), + ); + test('THEN: renders with the horizontal class', () => { + expect($('.ons-description-list').hasClass('ons-description-list--horizontal')).toBe(true); + }); + }); }); - it.each([ - [1, 'ons-col-1\\@m'], - [4, 'ons-col-4\\@m'], - ])('applies class for the provided `termCol` (%i -> %s)', (termCol, expectedClass) => { - const $ = cheerio.load( - renderComponent('description-list', { - ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - termCol, - }), - ); - - const $termElements = $(`.ons-description-list__term.${expectedClass}`); - expect($termElements.length).toBe(2); + describe('GIVEN: Params: termCol', () => { + describe('WHEN: termCol is provided', () => { + test.each([ + [1, 'ons-col-1\\@m'], + [4, 'ons-col-4\\@m'], + ])('THEN: applies the correct termCol class (%i -> %s)', (termCol, expectedClass) => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + termCol, + }), + ); + expect($(`.ons-description-list__term.${expectedClass}`).length).toBe(2); + }); + }); }); - it.each([ - [1, 'ons-col-1\\@m'], - [4, 'ons-col-4\\@m'], - ])('applies class for the provided `descriptionCol` (%i -> %s)', (descriptionCol, expectedClass) => { - const $ = cheerio.load( - renderComponent('description-list', { - ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - descriptionCol, - }), - ); + describe('GIVEN: Params: descriptionCol', () => { + describe('WHEN: descriptionCol is provided', () => { + test.each([ + [1, 'ons-col-1\\@m'], + [4, 'ons-col-4\\@m'], + ])('THEN: applies the correct descriptionCol class (%i -> %s)', (descriptionCol, expectedClass) => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + descriptionCol, + }), + ); + expect($(`.ons-description-list__value.${expectedClass}`).length).toBe(3); + }); + }); + }); - const $valueElements = $(`.ons-description-list__value.${expectedClass}`); - expect($valueElements.length).toBe(3); + describe('GIVEN: Params: itemsList', () => { + describe('WHEN: itemsList is provided', () => { + const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL)); + test('THEN: renders list items correctly', () => { + const $listElements = $('.ons-description-list__term, .ons-description-list__value'); + expect($listElements[0].tagName).toBe('dt'); + expect($($listElements[0]).text().trim()).toBe('Survey:'); + + expect($listElements[1].tagName).toBe('dd'); + expect($($listElements[1]).attr('id')).toBe('description-1'); + expect($($listElements[1]).text().trim()).toBe('Bricks & Blocks'); + + expect($listElements[2].tagName).toBe('dt'); + expect($($listElements[2]).text().trim()).toBe('RU Refs:'); + + expect($listElements[3].tagName).toBe('dd'); + expect($($listElements[3]).attr('id')).toBe('description-2'); + expect($($listElements[3]).text().trim()).toBe('49900000118'); + + expect($listElements[4].tagName).toBe('dd'); + expect($($listElements[4]).attr('id')).toBe('description-3'); + expect($($listElements[4]).text().trim()).toBe('49300005832'); + }); + }); }); }); diff --git a/src/components/description-list/_test-examples.js b/src/components/description-list/_test-examples.js new file mode 100644 index 0000000000..b859af00a1 --- /dev/null +++ b/src/components/description-list/_test-examples.js @@ -0,0 +1,57 @@ +export const EXAMPLE_DESCRIPTION_LIST_FULL = { + id: 'example-id', + classes: 'ons-u-mb-no', + descriptionListLabel: 'This is an example of the description list component', + termCol: 2, + descriptionCol: 10, + itemsList: [ + { + term: 'Survey:', + descriptions: [ + { + id: 'description-1', + description: 'Bricks & Blocks', + }, + ], + }, + { + term: 'RU Refs:', + descriptions: [ + { + id: 'description-2', + description: '49900000118', + }, + { + id: 'description-3', + description: '49300005832', + }, + ], + }, + ], +}; + +export const EXAMPLE_DESCRIPTION_LIST_MINIMAL = { + termCol: 2, + descriptionCol: 10, + itemsList: [ + { + term: 'Survey:', + descriptions: [ + { + description: 'Bricks & Blocks', + }, + ], + }, + { + term: 'RU Refs:', + descriptions: [ + { + description: '49900000118', + }, + { + description: '49300005832', + }, + ], + }, + ], +}; diff --git a/src/components/description-list/example-description-list-horizontal.njk b/src/components/description-list/example-description-list-horizontal.njk new file mode 100644 index 0000000000..879c880d0d --- /dev/null +++ b/src/components/description-list/example-description-list-horizontal.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", + "horizontal": true, + "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" + } + ] + } + ] + }) +}} From 349573c9640bde38b41d9565eb04d3b0f9058188 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Wed, 27 Nov 2024 12:30:41 +0000 Subject: [PATCH 02/48] approve vr tests --- ...xample-description-list-horizontal_0_document_0_desktop.png | 3 +++ ...example-description-list-horizontal_0_document_1_tablet.png | 3 +++ ...example-description-list-horizontal_0_document_2_mobile.png | 3 +++ 3 files changed, 9 insertions(+) create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_0_desktop.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_1_tablet.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_0_desktop.png new file mode 100644 index 0000000000..21a27eb892 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8de37dd64d375e7aa93453235b48a44e50935484af481b0baff2d575d1305b6f +size 29077 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_1_tablet.png new file mode 100644 index 0000000000..f06bdc38d8 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:04da17ed895f94dc3bf96700d9fd562cee5a38d311bf862a5921f93209f53efa +size 26778 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_2_mobile.png new file mode 100644 index 0000000000..d5556431cf --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d7a5e742650b69a620ad6a88f413455914569b892fc3f3d1b07fb218f9e85824 +size 23732 From 22c7b5f5f3bb5bb5ad57a3814ca23b4c6afae2bb Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 28 Nov 2024 13:47:59 +0000 Subject: [PATCH 03/48] update as per PR comments --- .../description-list/_description-list.scss | 16 +- .../description-list/_macro-options.md | 18 +- src/components/description-list/_macro.njk | 8 +- .../description-list/_macro.spec.js | 277 ++++++++++-------- ...jk => example-inline-description-list.njk} | 2 +- 5 files changed, 179 insertions(+), 142 deletions(-) rename src/components/description-list/{example-description-list-horizontal.njk => example-inline-description-list.njk} (98%) diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index 4bd3a0373d..fe27da808c 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -1,13 +1,17 @@ .ons-description-list { &__items { margin: 0 0 2rem; + } - &.ons-description-list--horizontal { - @media (width >= 980px) { - grid-template-columns: repeat(3, 1fr); - display: grid; - gap: 0.5rem 2.5rem; - } + &--inline { + @include mq(l) { + grid-template-columns: repeat(3, 1fr); + display: grid; + gap: 0.5rem 2.5rem; + } + .ons-description-list__term, + .ons-description-list__value { + overflow-wrap: normal; } } diff --git a/src/components/description-list/_macro-options.md b/src/components/description-list/_macro-options.md index 884f343c17..2f98305102 100644 --- a/src/components/description-list/_macro-options.md +++ b/src/components/description-list/_macro-options.md @@ -1,12 +1,12 @@ -| Name | Type | Required | Description | -| -------------------- | ------------- | -------- | -------------------------------------------------------------------------------------------------------------- | -| id | string | false | The HTML `id` for the description list (`
`) | -| classes | string | false | Classes to apply to description list (`
`) | -| descriptionListLabel | string | false | Sets the HTML `title` and `aria-label` attributes to provide additional information about the description list | -| 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) | -| horizontal | boolean | false | Set to "true" to align the description list horizontally | +| Name | Type | Required | Description | +| -------------------- | --------------- | -------- | -------------------------------------------------------------------------------------------------------------- | +| id | string | false | The HTML `id` for the description list (`
`) | +| classes | string | false | Classes to apply to description list (`
`) | +| descriptionListLabel | string | false | Sets the HTML `title` and `aria-label` attributes to provide additional information about the description list | +| 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) | +| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants:“inline” | ## Item diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index 1fccc0105b..b5dc49aa5c 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -1,6 +1,6 @@ {% macro onsDescriptionList(params) %}
{{ item.term }} +
+ {{ item.term }} +
{% endif %} {% for descriptionItem in item.descriptions %} @@ -24,7 +26,7 @@ {% endfor %} {% endset %} - {% if params.horizontal %} + {% if params.variants == 'inline' %}
{{ descriptionItems | safe }}
{% else %} {{ descriptionItems | safe }} diff --git a/src/components/description-list/_macro.spec.js b/src/components/description-list/_macro.spec.js index f669d3278b..ed908dfa01 100644 --- a/src/components/description-list/_macro.spec.js +++ b/src/components/description-list/_macro.spec.js @@ -3,144 +3,175 @@ import * as cheerio from 'cheerio'; import axe from '../../tests/helpers/axe'; import { renderComponent } from '../../tests/helpers/rendering'; -import { EXAMPLE_DESCRIPTION_LIST_FULL, EXAMPLE_DESCRIPTION_LIST_MINIMAL } from './_test-examples'; - -describe('FOR: Macro: Description List', () => { - describe('GIVEN: Params: required', () => { - describe('WHEN: all required params are provided', () => { - const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_MINIMAL)); - test('THEN: jest-axe checks pass', async () => { - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - }); + +const EXAMPLE_DESCRIPTION_LIST_FULL = { + id: 'example-id', + classes: 'ons-u-mb-no', + descriptionListLabel: 'This is an example of the description list component', + termCol: 2, + descriptionCol: 10, + itemsList: [ + { + term: 'Survey:', + descriptions: [ + { + id: 'description-1', + description: 'Bricks & Blocks', + }, + ], + }, + { + term: 'RU Refs:', + descriptions: [ + { + id: 'description-2', + description: '49900000118', + }, + { + id: 'description-3', + description: '49300005832', + }, + ], + }, + ], +}; + +const EXAMPLE_DESCRIPTION_LIST_MINIMAL = { + itemsList: [ + { + term: 'Survey:', + descriptions: [ + { + description: 'Bricks & Blocks', + }, + ], + }, + { + term: 'RU Refs:', + descriptions: [ + { + description: '49900000118', + }, + { + description: '49300005832', + }, + ], + }, + ], +}; + +describe('macro: description-list', () => { + it('passes jest-axe checks when all parameters are provided', async () => { + const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL)); + + const results = await axe($.html()); + expect(results).toHaveNoViolations(); }); - describe('GIVEN: Params: all', () => { - describe('WHEN: all params are provided', () => { - const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL)); - test('THEN: jest-axe checks pass', async () => { - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - }); + it('passes jest-axe checks when minimal parameters are provided', async () => { + const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_MINIMAL)); + + const results = await axe($.html()); + expect(results).toHaveNoViolations(); }); - describe('GIVEN: Params: id', () => { - describe('WHEN: id is provided', () => { - const $ = cheerio.load( - renderComponent('description-list', { - ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - id: 'example-id', - }), - ); - test('THEN: renders with provided id', () => { - expect($('#example-id').length).toBe(1); - }); - }); + it('has the provided `id` attribute', () => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + id: 'example-id', + }), + ); + + expect($('#example-id').length).toBe(1); }); - describe('GIVEN: Params: classes', () => { - describe('WHEN: additional style classes are provided', () => { - const $ = cheerio.load( - renderComponent('description-list', { - ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - classes: 'extra-class another-extra-class', - }), - ); - test('THEN: renders with provided classes', () => { - expect($('.ons-description-list').hasClass('extra-class')).toBe(true); - expect($('.ons-description-list').hasClass('another-extra-class')).toBe(true); - }); - }); + it('has provided variant style class when variant is provided', () => { + const $ = cheerio.load( + renderComponent('list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + variants: 'inline', + }), + ); + + expect($('.ons-description-list').hasClass('ons-description-list--horizontal')).toBe(true); }); - describe('GIVEN: Params: descriptionListLabel', () => { - describe('WHEN: descriptionListLabel is provided', () => { - const $ = cheerio.load( - renderComponent('description-list', { - ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - descriptionListLabel: 'This is an example of the description list component', - }), - ); - test('THEN: renders with title and aria-label attributes', () => { - expect($('.ons-description-list').attr('title')).toBe('This is an example of the description list component'); - expect($('.ons-description-list').attr('aria-label')).toBe('This is an example of the description list component'); - }); - }); + it('has additionally provided style classes', () => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + classes: 'extra-class another-extra-class', + }), + ); + + expect($('.ons-description-list').hasClass('extra-class')).toBe(true); + expect($('.ons-description-list').hasClass('another-extra-class')).toBe(true); }); - describe('GIVEN: Params: horizontal', () => { - describe('WHEN: horizontal is true', () => { - const $ = cheerio.load( - renderComponent('description-list', { - ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - horizontal: true, - }), - ); - test('THEN: renders with the horizontal class', () => { - expect($('.ons-description-list').hasClass('ons-description-list--horizontal')).toBe(true); - }); - }); + it('outputs `title` and `aria-label` attributes when `descriptionListLabel` is provided', () => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + descriptionListLabel: 'This is an example of the description list component', + }), + ); + + expect($('.ons-description-list').attr('title')).toBe('This is an example of the description list component'); + expect($('.ons-description-list').attr('aria-label')).toBe('This is an example of the description list component'); }); - describe('GIVEN: Params: termCol', () => { - describe('WHEN: termCol is provided', () => { - test.each([ - [1, 'ons-col-1\\@m'], - [4, 'ons-col-4\\@m'], - ])('THEN: applies the correct termCol class (%i -> %s)', (termCol, expectedClass) => { - const $ = cheerio.load( - renderComponent('description-list', { - ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - termCol, - }), - ); - expect($(`.ons-description-list__term.${expectedClass}`).length).toBe(2); - }); - }); + it('outputs list items as expected', () => { + const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL)); + + const $listElements = $('.ons-description-list__term, .ons-description-list__value'); + + expect($listElements[0].tagName).toBe('dt'); + expect($($listElements[0]).text()).toBe('Survey:'); + + expect($listElements[1].tagName).toBe('dd'); + expect($($listElements[1]).attr('id')).toBe('description-1'); + expect($($listElements[1]).text()).toBe('Bricks & Blocks'); + + expect($listElements[2].tagName).toBe('dt'); + expect($($listElements[2]).text()).toBe('RU Refs:'); + + expect($listElements[3].tagName).toBe('dd'); + expect($($listElements[3]).attr('id')).toBe('description-2'); + expect($($listElements[3]).text()).toBe('49900000118'); + + expect($listElements[4].tagName).toBe('dd'); + expect($($listElements[4]).attr('id')).toBe('description-3'); + expect($($listElements[4]).text()).toBe('49300005832'); }); - describe('GIVEN: Params: descriptionCol', () => { - describe('WHEN: descriptionCol is provided', () => { - test.each([ - [1, 'ons-col-1\\@m'], - [4, 'ons-col-4\\@m'], - ])('THEN: applies the correct descriptionCol class (%i -> %s)', (descriptionCol, expectedClass) => { - const $ = cheerio.load( - renderComponent('description-list', { - ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - descriptionCol, - }), - ); - expect($(`.ons-description-list__value.${expectedClass}`).length).toBe(3); - }); - }); + it.each([ + [1, 'ons-col-1\\@m'], + [4, 'ons-col-4\\@m'], + ])('applies class for the provided `termCol` (%i -> %s)', (termCol, expectedClass) => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + termCol, + }), + ); + + const $termElements = $(`.ons-description-list__term.${expectedClass}`); + expect($termElements.length).toBe(2); }); - describe('GIVEN: Params: itemsList', () => { - describe('WHEN: itemsList is provided', () => { - const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL)); - test('THEN: renders list items correctly', () => { - const $listElements = $('.ons-description-list__term, .ons-description-list__value'); - expect($listElements[0].tagName).toBe('dt'); - expect($($listElements[0]).text().trim()).toBe('Survey:'); - - expect($listElements[1].tagName).toBe('dd'); - expect($($listElements[1]).attr('id')).toBe('description-1'); - expect($($listElements[1]).text().trim()).toBe('Bricks & Blocks'); - - expect($listElements[2].tagName).toBe('dt'); - expect($($listElements[2]).text().trim()).toBe('RU Refs:'); - - expect($listElements[3].tagName).toBe('dd'); - expect($($listElements[3]).attr('id')).toBe('description-2'); - expect($($listElements[3]).text().trim()).toBe('49900000118'); - - expect($listElements[4].tagName).toBe('dd'); - expect($($listElements[4]).attr('id')).toBe('description-3'); - expect($($listElements[4]).text().trim()).toBe('49300005832'); - }); - }); + it.each([ + [1, 'ons-col-1\\@m'], + [4, 'ons-col-4\\@m'], + ])('applies class for the provided `descriptionCol` (%i -> %s)', (descriptionCol, expectedClass) => { + const $ = cheerio.load( + renderComponent('description-list', { + ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, + descriptionCol, + }), + ); + + const $valueElements = $(`.ons-description-list__value.${expectedClass}`); + expect($valueElements.length).toBe(3); }); }); diff --git a/src/components/description-list/example-description-list-horizontal.njk b/src/components/description-list/example-inline-description-list.njk similarity index 98% rename from src/components/description-list/example-description-list-horizontal.njk rename to src/components/description-list/example-inline-description-list.njk index 879c880d0d..0c185373b0 100644 --- a/src/components/description-list/example-description-list-horizontal.njk +++ b/src/components/description-list/example-inline-description-list.njk @@ -3,7 +3,7 @@ onsDescriptionList({ "classes": "ons-u-mb-no", "descriptionListLabel": "Information about this business and its survey requirements", - "horizontal": true, + "variants": 'inline', "termCol": "4", "descriptionCol": "8", "itemsList": [ From 79f772b49e3e3ad5f423827ddcb7061e6bd263b6 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 28 Nov 2024 13:48:46 +0000 Subject: [PATCH 04/48] delete test example --- .../description-list/_test-examples.js | 57 ------------------- 1 file changed, 57 deletions(-) delete mode 100644 src/components/description-list/_test-examples.js diff --git a/src/components/description-list/_test-examples.js b/src/components/description-list/_test-examples.js deleted file mode 100644 index b859af00a1..0000000000 --- a/src/components/description-list/_test-examples.js +++ /dev/null @@ -1,57 +0,0 @@ -export const EXAMPLE_DESCRIPTION_LIST_FULL = { - id: 'example-id', - classes: 'ons-u-mb-no', - descriptionListLabel: 'This is an example of the description list component', - termCol: 2, - descriptionCol: 10, - itemsList: [ - { - term: 'Survey:', - descriptions: [ - { - id: 'description-1', - description: 'Bricks & Blocks', - }, - ], - }, - { - term: 'RU Refs:', - descriptions: [ - { - id: 'description-2', - description: '49900000118', - }, - { - id: 'description-3', - description: '49300005832', - }, - ], - }, - ], -}; - -export const EXAMPLE_DESCRIPTION_LIST_MINIMAL = { - termCol: 2, - descriptionCol: 10, - itemsList: [ - { - term: 'Survey:', - descriptions: [ - { - description: 'Bricks & Blocks', - }, - ], - }, - { - term: 'RU Refs:', - descriptions: [ - { - description: '49900000118', - }, - { - description: '49300005832', - }, - ], - }, - ], -}; From 35558773ac7e70c0fb1b5067b0dbcbdf1ce777d4 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 28 Nov 2024 13:52:49 +0000 Subject: [PATCH 05/48] fix failing test --- src/components/description-list/_macro.spec.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/description-list/_macro.spec.js b/src/components/description-list/_macro.spec.js index ed908dfa01..276da89527 100644 --- a/src/components/description-list/_macro.spec.js +++ b/src/components/description-list/_macro.spec.js @@ -86,15 +86,15 @@ describe('macro: description-list', () => { expect($('#example-id').length).toBe(1); }); - it('has provided variant style class when variant is provided', () => { + it('has the provided variant style class when variant is provided', () => { const $ = cheerio.load( - renderComponent('list', { + renderComponent('description-list', { ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, variants: 'inline', }), ); - expect($('.ons-description-list').hasClass('ons-description-list--horizontal')).toBe(true); + expect($('.ons-description-list').hasClass('ons-description-list--inline')).toBe(true); }); it('has additionally provided style classes', () => { @@ -127,22 +127,22 @@ describe('macro: description-list', () => { const $listElements = $('.ons-description-list__term, .ons-description-list__value'); expect($listElements[0].tagName).toBe('dt'); - expect($($listElements[0]).text()).toBe('Survey:'); + expect($($listElements[0]).text().trim()).toBe('Survey:'); expect($listElements[1].tagName).toBe('dd'); expect($($listElements[1]).attr('id')).toBe('description-1'); - expect($($listElements[1]).text()).toBe('Bricks & Blocks'); + expect($($listElements[1]).text().trim()).toBe('Bricks & Blocks'); expect($listElements[2].tagName).toBe('dt'); - expect($($listElements[2]).text()).toBe('RU Refs:'); + expect($($listElements[2]).text().trim()).toBe('RU Refs:'); expect($listElements[3].tagName).toBe('dd'); expect($($listElements[3]).attr('id')).toBe('description-2'); - expect($($listElements[3]).text()).toBe('49900000118'); + expect($($listElements[3]).text().trim()).toBe('49900000118'); expect($listElements[4].tagName).toBe('dd'); expect($($listElements[4]).attr('id')).toBe('description-3'); - expect($($listElements[4]).text()).toBe('49300005832'); + expect($($listElements[4]).text().trim()).toBe('49300005832'); }); it.each([ From 6b953a84e48c9c71f1a6c484923d3451be6ec515 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 29 Nov 2024 09:01:14 +0000 Subject: [PATCH 06/48] address div issue --- .../description-list/_description-list.scss | 59 ++++++++++--------- .../description-list/_macro-options.md | 18 +++--- src/components/description-list/_macro.njk | 16 ++--- .../description-list/_macro.spec.js | 2 +- .../example-inline-description-list.njk | 2 +- 5 files changed, 45 insertions(+), 52 deletions(-) diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index fe27da808c..9bb8d4d189 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -1,44 +1,45 @@ .ons-description-list { - &__items { + &__items & { margin: 0 0 2rem; - } - &--inline { - @include mq(l) { - grid-template-columns: repeat(3, 1fr); - display: grid; - gap: 0.5rem 2.5rem; - } - .ons-description-list__term, - .ons-description-list__value { - overflow-wrap: normal; + &__term { + clear: both; + float: left; + font-weight: $font-weight-bold; + word-break: break-word; } - } - &__term { - clear: both; - float: left; - font-weight: $font-weight-bold; + &__value { + float: right; + margin-left: 0; /* As normalize adds a 40px left margin */ + word-break: break-word; - &:not(:first-child) { - margin-top: 0.5rem; + & + & { + @include mq(m) { + margin-top: 0; + } + } } } - &__value { - float: right; - margin-left: 0; /* As normalize adds a 40px left margin */ - - &:not(:nth-of-type(1)) { - @include mq(m) { - margin-top: 0.5rem; + &__item { + &:not(:first-child) { + .ons-description-list__term { + @extend .ons-u-mt-2xs; + } + .ons-description-list__value:nth-of-type(1) { + @include mq(m) { + margin-top: 0.5rem; + } } } + } - & + & { - @include mq(m) { - margin-top: 0; - } + &--inline { + @include mq(l) { + grid-template-columns: repeat(3, 1fr); + display: grid; + gap: 0.5rem 2.5rem; } } } diff --git a/src/components/description-list/_macro-options.md b/src/components/description-list/_macro-options.md index 2f98305102..eef2cbe4c2 100644 --- a/src/components/description-list/_macro-options.md +++ b/src/components/description-list/_macro-options.md @@ -1,12 +1,12 @@ -| Name | Type | Required | Description | -| -------------------- | --------------- | -------- | -------------------------------------------------------------------------------------------------------------- | -| id | string | false | The HTML `id` for the description list (`
`) | -| classes | string | false | Classes to apply to description list (`
`) | -| descriptionListLabel | string | false | Sets the HTML `title` and `aria-label` attributes to provide additional information about the description list | -| 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) | -| variants | array or string | false | An array of values or single value (string) to adjust the component using available variants:“inline” | +| Name | Type | Required | Description | +| -------------------- | ------------- | -------- | -------------------------------------------------------------------------------------------------------------- | +| id | string | false | The HTML `id` for the description list (`
`) | +| classes | string | false | Classes to apply to description list (`
`) | +| descriptionListLabel | string | false | Sets the HTML `title` and `aria-label` attributes to provide additional information about the description list | +| 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 discription list inline | ## Item diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index b5dc49aa5c..b989fd0983 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -1,17 +1,15 @@ {% macro onsDescriptionList(params) %}
{% for item in params.itemsList %} - {% set descriptionItems %} +
{% if item.term | length %} -
- {{ item.term }} -
+
{{ item.term }}
{% endif %} {% for descriptionItem in item.descriptions %} @@ -24,13 +22,7 @@
{% endif %} {% endfor %} - {% endset %} - - {% if params.variants == 'inline' %} -
{{ descriptionItems | safe }}
- {% else %} - {{ descriptionItems | safe }} - {% endif %} + {% endfor %}
{% endmacro %} diff --git a/src/components/description-list/_macro.spec.js b/src/components/description-list/_macro.spec.js index 276da89527..33ea4e3502 100644 --- a/src/components/description-list/_macro.spec.js +++ b/src/components/description-list/_macro.spec.js @@ -90,7 +90,7 @@ describe('macro: description-list', () => { const $ = cheerio.load( renderComponent('description-list', { ...EXAMPLE_DESCRIPTION_LIST_MINIMAL, - variants: 'inline', + variant: 'inline', }), ); diff --git a/src/components/description-list/example-inline-description-list.njk b/src/components/description-list/example-inline-description-list.njk index 0c185373b0..e7114ffd1e 100644 --- a/src/components/description-list/example-inline-description-list.njk +++ b/src/components/description-list/example-inline-description-list.njk @@ -3,7 +3,7 @@ onsDescriptionList({ "classes": "ons-u-mb-no", "descriptionListLabel": "Information about this business and its survey requirements", - "variants": 'inline', + "variant": 'inline', "termCol": "4", "descriptionCol": "8", "itemsList": [ From c62a87d78cc69fb93a572c167815b5bd0765f4a4 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 29 Nov 2024 09:39:25 +0000 Subject: [PATCH 07/48] approve visual tests --- ...n-list-horizontal_0_document_0_desktop.png | 3 -- ...on-list-horizontal_0_document_1_tablet.png | 3 -- ...on-list-horizontal_0_document_2_mobile.png | 3 -- ...-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 | 30 +++++++++---------- 7 files changed, 24 insertions(+), 24 deletions(-) delete mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_0_desktop.png delete mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_1_tablet.png delete mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_2_mobile.png 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 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_0_desktop.png deleted file mode 100644 index 21a27eb892..0000000000 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_0_desktop.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:8de37dd64d375e7aa93453235b48a44e50935484af481b0baff2d575d1305b6f -size 29077 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_1_tablet.png deleted file mode 100644 index f06bdc38d8..0000000000 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_1_tablet.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:04da17ed895f94dc3bf96700d9fd562cee5a38d311bf862a5921f93209f53efa -size 26778 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_2_mobile.png deleted file mode 100644 index d5556431cf..0000000000 --- a/backstop_data/bitmaps_reference/ds-vr-test__components_description-list_example-description-list-horizontal_0_document_2_mobile.png +++ /dev/null @@ -1,3 +0,0 @@ -version https://git-lfs.github.com/spec/v1 -oid sha256:d7a5e742650b69a620ad6a88f413455914569b892fc3f3d1b07fb218f9e85824 -size 23732 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..be826618ec --- /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:1919cf6a432a9c345066cf225c145175d5f4efc295a0c768eceb92425b506d12 +size 31145 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 9bb8d4d189..cc3998423d 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -1,23 +1,23 @@ .ons-description-list { - &__items & { + &__items { margin: 0 0 2rem; + } - &__term { - clear: both; - float: left; - font-weight: $font-weight-bold; - word-break: break-word; - } + &__term { + clear: both; + float: left; + font-weight: $font-weight-bold; + word-break: break-word; + } - &__value { - float: right; - margin-left: 0; /* As normalize adds a 40px left margin */ - word-break: break-word; + &__value { + float: right; + margin-left: 0; /* As normalize adds a 40px left margin */ + word-break: break-word; - & + & { - @include mq(m) { - margin-top: 0; - } + & + & { + @include mq(m) { + margin-top: 0; } } } From 5dd8f0e942ec5f5576748fc04e87d5288632a314 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 29 Nov 2024 14:42:11 +0000 Subject: [PATCH 08/48] update breakpoints --- src/components/description-list/_description-list.scss | 4 ++-- src/components/description-list/_macro.njk | 8 ++++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index cc3998423d..589ef80e9e 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -16,7 +16,7 @@ word-break: break-word; & + & { - @include mq(m) { + @include mq(xs) { margin-top: 0; } } @@ -28,7 +28,7 @@ @extend .ons-u-mt-2xs; } .ons-description-list__value:nth-of-type(1) { - @include mq(m) { + @include mq(xs) { margin-top: 0.5rem; } } diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index b989fd0983..eb7cc5300f 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -9,14 +9,18 @@ {% for item in params.itemsList %}
{% if item.term | length %} -
{{ item.term }}
+
+ {{ item.term }} +
{% endif %} {% for descriptionItem in item.descriptions %} {% if descriptionItem.description | length %}
{{- descriptionItem.description -}}
From 56775f86139d72b6043935f187cee7c09639e6bf Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 29 Nov 2024 14:55:54 +0000 Subject: [PATCH 09/48] update css --- src/components/description-list/_description-list.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index 589ef80e9e..8cfd696291 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -7,13 +7,13 @@ clear: both; float: left; font-weight: $font-weight-bold; - word-break: break-word; + word-wrap: break-word; } &__value { float: right; margin-left: 0; /* As normalize adds a 40px left margin */ - word-break: break-word; + word-wrap: break-word; & + & { @include mq(xs) { From 0470ee41e0e9c5c1decc7513d453732cd3a2384a Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 2 Dec 2024 10:49:52 +0000 Subject: [PATCH 10/48] fix typo --- src/components/description-list/_macro-options.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/description-list/_macro-options.md b/src/components/description-list/_macro-options.md index eef2cbe4c2..324f027775 100644 --- a/src/components/description-list/_macro-options.md +++ b/src/components/description-list/_macro-options.md @@ -6,7 +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 discription list inline | +| variant | string | false | Set to "inline" to display the description list inline | ## Item From f08e1b658d3d5d780639e0c1b2dca121aee54bb3 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Wed, 27 Nov 2024 13:48:34 +0000 Subject: [PATCH 11/48] add initial changes --- src/components/hero/_macro-options.md | 20 +++++++++---------- src/components/hero/example-hero-analysis.njk | 15 ++++++++++++++ 2 files changed, 25 insertions(+), 10 deletions(-) create mode 100644 src/components/hero/example-hero-analysis.njk diff --git a/src/components/hero/_macro-options.md b/src/components/hero/_macro-options.md index e721a9c007..93bc583b7c 100644 --- a/src/components/hero/_macro-options.md +++ b/src/components/hero/_macro-options.md @@ -1,13 +1,13 @@ -| Name | Type | Required | Description | -| -------------- | ---------------- | -------- | ------------------------------------------------------------------------------------------------------- | -| variants | array or string | false | An array of values or single value (string) to adjust the component using available variant, “dark” | -| wide | boolean | false | Set to “true” when using the `wide` page layout container | -| title | string | true | Text for the hero title | -| subtitle | string | false | Text for the hero subtitle | -| text | string | false | Text to follow the hero title and subtitle | -| button | `Object
From 2f21710c7e62fa52b96b9eeb9736947b6dcc1e81 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Wed, 4 Dec 2024 09:44:15 +0000 Subject: [PATCH 18/48] approve visual test --- ...t_example-inline-description-list_0_document_0_desktop.png | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index be826618ec..c46ad4c3f9 100644 --- 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 @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1919cf6a432a9c345066cf225c145175d5f4efc295a0c768eceb92425b506d12 -size 31145 +oid sha256:c65118b76e1bf0e4bc5f522168651f389ce685d6b5b8737d5d10d9912fa4e6ba +size 26374 From f6ab261aa91341362f87cb91e30aa482fdfef07a Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Wed, 4 Dec 2024 19:05:39 +0000 Subject: [PATCH 19/48] fix accessibility issues --- .../description-list/_description-list.scss | 9 ------ src/components/description-list/_macro.njk | 29 +++++++++---------- 2 files changed, 14 insertions(+), 24 deletions(-) diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index 9dd4d25b22..a97ff362c5 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -65,24 +65,15 @@ gap: 0.5rem 2.5rem; .ons-grid__col { - flex: none; width: auto; - display: block; } .ons-description-list__value { float: none; - grid-column: auto; - } - - .ons-description-list__values { - display: flex; - flex-wrap: wrap; } .ons-description-list__term { margin-right: 1rem; - grid-column: auto; } } } diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index c648a48c91..a164a627c9 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -15,21 +15,20 @@ {{ item.term }} {% endif %} - - {% for descriptionItem in item.descriptions %} - {% if descriptionItem.description | length %} -
- {{- descriptionItem.description -}} - {%- if params.variant == 'inline' and item.descriptions | length > 1 and loop.index != item.descriptions | length -%} - , - {% endif %} -
- {% endif %} - {% endfor %} - + {% for descriptionItem in item.descriptions %} + {% if descriptionItem.description | length %} +
+ {{- descriptionItem.description -}} + + {%- if params.variant == 'inline' and item.descriptions | length > 1 and loop.index != item.descriptions | length -%} + , + {% endif %} +
+ {% endif %} + {% endfor %} {% endfor %}
From 724349b9236f3e3c85ce7a35307ab28279db82b4 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 5 Dec 2024 13:33:18 +0000 Subject: [PATCH 20/48] fix grid issues --- .../description-list/_description-list.scss | 18 +++++------------- src/components/description-list/_macro.njk | 4 ---- 2 files changed, 5 insertions(+), 17 deletions(-) diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index a97ff362c5..d403873649 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -22,15 +22,6 @@ } } - &-inline-comma { - display: none; - - @include mq(l) { - display: inline; - margin-right: 0.5rem; - } - } - &__item { &:not(:first-child) { .ons-description-list__term { @@ -64,12 +55,13 @@ grid-template-columns: repeat(3, 1fr); gap: 0.5rem 2.5rem; - .ons-grid__col { - width: auto; + .ons-description-list__value { + grid-column-start: 2; } - .ons-description-list__value { - float: none; + .ons-description-list__item { + display: grid; + grid-template-columns: auto 1fr; } .ons-description-list__term { diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index a164a627c9..4c55a8080d 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -22,10 +22,6 @@ class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}" > {{- descriptionItem.description -}} - - {%- if params.variant == 'inline' and item.descriptions | length > 1 and loop.index != item.descriptions | length -%} - , - {% endif %}
{% endif %} {% endfor %} From 0680abb616612e6c81bb8e75617798047e0c9dce Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 5 Dec 2024 13:44:45 +0000 Subject: [PATCH 21/48] approve visual test --- ...t_example-inline-description-list_0_document_0_desktop.png | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 index c46ad4c3f9..0a08429eb9 100644 --- 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 @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c65118b76e1bf0e4bc5f522168651f389ce685d6b5b8737d5d10d9912fa4e6ba -size 26374 +oid sha256:10b3fac1f117b5156eed79c8e8acd67c758bcf750706a405f707127224f296e5 +size 29101 From 1140c34deeaf2f92941d5981d43e24256a893112 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 5 Dec 2024 15:38:30 +0000 Subject: [PATCH 22/48] add minor changes and fix failing test --- src/components/hero/_hero.scss | 16 +++++++------ src/components/hero/_macro-options.md | 2 +- src/components/hero/_macro.njk | 4 ++-- src/components/hero/_macro.spec.js | 24 +++++++++---------- src/components/hero/example-hero-analysis.njk | 2 +- 5 files changed, 25 insertions(+), 23 deletions(-) diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss index 1ea77b28f7..f44d7923da 100644 --- a/src/components/hero/_hero.scss +++ b/src/components/hero/_hero.scss @@ -30,10 +30,10 @@ &--analysis { background-color: var(--ons-color-banner-bg); + } - &-text { - color: var(--ons-color-branded) !important; - } + &--topic { + color: var(--ons-color-branded) !important; } &__container { @@ -309,9 +309,11 @@ } &__title-container { - display: flex; - align-items: start; - justify-content: space-between; - gap: 1rem; + @include mq(l) { + display: flex; + align-items: start; + justify-content: space-between; + gap: 1rem; + } } } diff --git a/src/components/hero/_macro-options.md b/src/components/hero/_macro-options.md index e5db6f2e08..619bb96a1b 100644 --- a/src/components/hero/_macro-options.md +++ b/src/components/hero/_macro-options.md @@ -2,7 +2,7 @@ | --------------- | --------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------- | | variants | array or string | false | An array of values or single value (string) to adjust the component using available variant, “dark, navy-blue and analysis” | | wide | boolean | false | Set to “true” when using the `wide` page layout container | -| analysisText | string | false | Text for the hero analysis text | +| topic | string | false | Topic for the hero | | title | string | true | Text for the hero title | | subtitle | string | false | Text for the hero subtitle | | text | string | false | Text to follow the hero title and subtitle | diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk index 617f26aee7..2075c810d8 100644 --- a/src/components/hero/_macro.njk +++ b/src/components/hero/_macro.njk @@ -27,7 +27,7 @@ "classes": params.breadcrumbs.classes }) }} -

{{ params.analysisText | safe }}

+

{{ params.topic | safe }}

{% endif %}
@@ -75,7 +75,7 @@ {% from "components/description-list/_macro.njk" import onsDescriptionList %} {{ onsDescriptionList({ - "classes": "ons-u-mb-no", + "classes": "ons-u-mb-no ons-u-pt-l", "variant": 'inline', "termCol": params.descriptionList.termCol, "descriptionCol": params.descriptionList.descriptionCol, diff --git a/src/components/hero/_macro.spec.js b/src/components/hero/_macro.spec.js index 1e054f5036..89c3918987 100644 --- a/src/components/hero/_macro.spec.js +++ b/src/components/hero/_macro.spec.js @@ -93,11 +93,11 @@ describe('macro: hero', () => { expect($('.ons-hero--navy-blue .ons-hero__circles').length).toBe(1); }); - it('outputs the correct analysis text with `analysis` variant', () => { - const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'analysis', analysisText: 'Analysis Text' })); + it('outputs the correct topic for `analysis` variant', () => { + const $ = cheerio.load(renderComponent('hero', { ...EXAMPLE_HERO, variants: 'analysis', topic: 'Topic Text' })); - const content = $('.ons-hero--analysis-text').text().trim(); - expect(content).toEqual(expect.stringContaining('Analysis Text')); + const content = $('.ons-hero--topic').text().trim(); + expect(content).toEqual(expect.stringContaining('Topic Text')); }); it('outputs the correct breadcrumbs', () => { @@ -121,16 +121,15 @@ describe('macro: hero', () => { }), ); - const breadcrumbs = $('.ons-breadcrumbs__item'); - console.log(breadcrumbs); + const breadcrumbs = $('.ons-breadcrumbs__link'); expect($(breadcrumbs).length).toBe(2); expect($(breadcrumbs[0]).attr('href')).toBe('/breadcrumb-1'); - expect($(breadcrumbs[0]).text().trim()).toBe('BreadCrumbs 1:'); + expect($(breadcrumbs[0]).text().trim()).toBe('Breadcrumbs 1'); expect($(breadcrumbs[1]).attr('href')).toBe('/breadcrumb-2'); - expect($(breadcrumbs[1]).text().trim()).toBe('BreadCrumbs 2:'); + expect($(breadcrumbs[1]).text().trim()).toBe('Breadcrumbs 2'); }); - it('outputs the correct description list with `termCol` and `descriptionCol`', () => { + it('outputs the correct description list value', () => { const $ = cheerio.load( renderComponent('hero', { ...EXAMPLE_HERO, @@ -159,8 +158,9 @@ describe('macro: hero', () => { }, }), ); - // console.log($.html()); - expect($('.ons-description-list__term')).hasClass('ons-col-4@xs').toBe(true); - expect($('.ons-description-list__value')).hasClass('ons-col-8@xs').toBe(true); + + const descriptionText = $('.ons-description-list__value'); + expect($(descriptionText[0]).text().trim()).toBe('description1'); + expect($(descriptionText[1]).text().trim()).toBe('description2'); }); }); diff --git a/src/components/hero/example-hero-analysis.njk b/src/components/hero/example-hero-analysis.njk index cbf5755439..fad02012a0 100644 --- a/src/components/hero/example-hero-analysis.njk +++ b/src/components/hero/example-hero-analysis.njk @@ -6,7 +6,7 @@ {{ onsHero({ "variants": 'analysis', - "analysisText": 'Analysis', + "topic": 'Analysis', "title": 'Retail sales rise amid summer discounts and sporting events, according to a first estimate', "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id mattis ligula, nec sollicitudin arcu. Donec non tristique tellus. Donec eget malesuada lorem.', "breadcrumbs": { From 11e71bb50406b6923bf980032494a0aadc162c00 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Thu, 5 Dec 2024 15:38:56 +0000 Subject: [PATCH 23/48] Update src/components/description-list/_description-list.scss Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/description-list/_description-list.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index d403873649..4ec1d6f078 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -13,7 +13,6 @@ &__value { float: right; margin-left: 0; /* As normalize adds a 40px left margin */ - word-wrap: break-word; & + & { @include mq(xs) { From 5938ce0621e841a411b2094515049c9655ac1813 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Thu, 5 Dec 2024 15:39:08 +0000 Subject: [PATCH 24/48] Update src/components/description-list/_macro.njk Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/description-list/_macro.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index 4c55a8080d..329491b2c9 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -12,7 +12,7 @@
- {{ item.term }} + {{- item.term -}}
{% endif %} {% for descriptionItem in item.descriptions %} From a42b1ce590a721c8291b57b189c80bdb91ce4409 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya <86783201+precious-onyenaucheya-ons@users.noreply.github.com> Date: Thu, 5 Dec 2024 15:39:26 +0000 Subject: [PATCH 25/48] Update src/components/description-list/_description-list.scss Co-authored-by: rmccar <42928680+rmccar@users.noreply.github.com> --- src/components/description-list/_description-list.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index 4ec1d6f078..73a89207c1 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -7,7 +7,6 @@ clear: both; float: left; font-weight: $font-weight-bold; - word-wrap: break-word; } &__value { From 27bd70897b5a7edbafd56ca7a2db4817191f6d7d Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 5 Dec 2024 15:50:18 +0000 Subject: [PATCH 26/48] revert changes --- src/components/description-list/_macro.spec.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/description-list/_macro.spec.js b/src/components/description-list/_macro.spec.js index 33ea4e3502..fa45111ceb 100644 --- a/src/components/description-list/_macro.spec.js +++ b/src/components/description-list/_macro.spec.js @@ -127,22 +127,22 @@ describe('macro: description-list', () => { const $listElements = $('.ons-description-list__term, .ons-description-list__value'); expect($listElements[0].tagName).toBe('dt'); - expect($($listElements[0]).text().trim()).toBe('Survey:'); + expect($($listElements[0]).text()).toBe('Survey:'); expect($listElements[1].tagName).toBe('dd'); expect($($listElements[1]).attr('id')).toBe('description-1'); - expect($($listElements[1]).text().trim()).toBe('Bricks & Blocks'); + expect($($listElements[1]).text()).toBe('Bricks & Blocks'); expect($listElements[2].tagName).toBe('dt'); - expect($($listElements[2]).text().trim()).toBe('RU Refs:'); + expect($($listElements[2]).text()).toBe('RU Refs:'); expect($listElements[3].tagName).toBe('dd'); expect($($listElements[3]).attr('id')).toBe('description-2'); - expect($($listElements[3]).text().trim()).toBe('49900000118'); + expect($($listElements[3]).text()).toBe('49900000118'); expect($listElements[4].tagName).toBe('dd'); expect($($listElements[4]).attr('id')).toBe('description-3'); - expect($($listElements[4]).text().trim()).toBe('49300005832'); + expect($($listElements[4]).text()).toBe('49300005832'); }); it.each([ From b23bbf15b4ff4521c045da402a58e4e9870350e3 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 6 Dec 2024 09:09:31 +0000 Subject: [PATCH 27/48] update column width --- ...st_example-inline-description-list_0_document_1_tablet.png | 4 ++-- .../description-list/example-inline-description-list.njk | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) 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 index 094d8bb803..83f1cf9da9 100644 --- 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 @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f86583c3c214887dfe5a160e4f9e89827597713760b91ed7bef9650d6830abb3 -size 26901 +oid sha256:82be9393019fea2f313800b4433b2fed55593f61b26420895a54373f40753a69 +size 26896 diff --git a/src/components/description-list/example-inline-description-list.njk b/src/components/description-list/example-inline-description-list.njk index e7114ffd1e..a996efd925 100644 --- a/src/components/description-list/example-inline-description-list.njk +++ b/src/components/description-list/example-inline-description-list.njk @@ -4,8 +4,8 @@ "classes": "ons-u-mb-no", "descriptionListLabel": "Information about this business and its survey requirements", "variant": 'inline', - "termCol": "4", - "descriptionCol": "8", + "termCol": "3", + "descriptionCol": "9", "itemsList": [ { "term": "Survey:", From 035b326c695a7bb6b101a287d6009ca0ae38b44c Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 6 Dec 2024 12:55:43 +0000 Subject: [PATCH 28/48] update styling --- src/components/description-list/_description-list.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index 73a89207c1..07e443bc1c 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -7,6 +7,7 @@ clear: both; float: left; font-weight: $font-weight-bold; + white-space: nowrap; } &__value { @@ -48,6 +49,9 @@ } &--inline { + .ons-description-list__term { + padding-right: 1rem; + } @include mq(l) { display: grid; grid-template-columns: repeat(3, 1fr); From ff0de57f7732c9f92b931874205723ab310e9345 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Fri, 6 Dec 2024 12:59:50 +0000 Subject: [PATCH 29/48] remove margin from item --- src/components/description-list/_description-list.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/description-list/_description-list.scss b/src/components/description-list/_description-list.scss index 07e443bc1c..807b62fb44 100644 --- a/src/components/description-list/_description-list.scss +++ b/src/components/description-list/_description-list.scss @@ -65,10 +65,6 @@ display: grid; grid-template-columns: auto 1fr; } - - .ons-description-list__term { - margin-right: 1rem; - } } } } From d9b3d83e767920fa58d5cf36f4991b534017e34d Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 16 Dec 2024 12:04:51 +0000 Subject: [PATCH 30/48] update --- src/components/hero/_macro.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk index 2075c810d8..f9046483c6 100644 --- a/src/components/hero/_macro.njk +++ b/src/components/hero/_macro.njk @@ -43,7 +43,7 @@
{% if params.variants == 'analysis' %} {% from "components/icon/_macro.njk" import onsIcon %} -
+
{{- onsIcon({ "iconType": 'official-statistics' From ba37ef93a345a71dd988839d54adf6a87e8b20ec Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 16 Dec 2024 13:31:17 +0000 Subject: [PATCH 31/48] revert changes --- src/components/hero/_macro.njk | 4 +--- src/components/hero/example-hero-analysis.njk | 1 + 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk index f9046483c6..61534555ac 100644 --- a/src/components/hero/_macro.njk +++ b/src/components/hero/_macro.njk @@ -14,9 +14,7 @@
{% endif %}
-
+
{% if params.variants == 'analysis' %} {% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %} {{ diff --git a/src/components/hero/example-hero-analysis.njk b/src/components/hero/example-hero-analysis.njk index fad02012a0..8aaf9ca74d 100644 --- a/src/components/hero/example-hero-analysis.njk +++ b/src/components/hero/example-hero-analysis.njk @@ -6,6 +6,7 @@ {{ onsHero({ "variants": 'analysis', + "detailsColumns": '12', "topic": 'Analysis', "title": 'Retail sales rise amid summer discounts and sporting events, according to a first estimate', "text": 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id mattis ligula, nec sollicitudin arcu. Donec non tristique tellus. Donec eget malesuada lorem.', From 65d5a14bca8b9fa75e881dca4fd49a0f02578e55 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 16 Dec 2024 15:19:39 +0000 Subject: [PATCH 32/48] update css and test --- ...onents_hero_example-hero-analysis_0_document_0_desktop.png | 3 +++ ...ponents_hero_example-hero-analysis_0_document_1_tablet.png | 3 +++ ...ponents_hero_example-hero-analysis_0_document_2_mobile.png | 3 +++ src/components/hero/_hero.scss | 4 ---- src/components/hero/_macro.njk | 2 +- src/components/hero/_macro.spec.js | 2 +- 6 files changed, 11 insertions(+), 6 deletions(-) create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_0_desktop.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_1_tablet.png create mode 100644 backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_2_mobile.png diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_0_desktop.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_0_desktop.png new file mode 100644 index 0000000000..bf0abdf7d0 --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_0_desktop.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ba360ad7034466e250b4f92601f11621c20510eef8373674bdd1ad8a8cd29755 +size 74371 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_1_tablet.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_1_tablet.png new file mode 100644 index 0000000000..bbc0dae60a --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_1_tablet.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:48a17aa21a2c9e8ae79f50382780aa1eebbe50df41d527c0e88fe8d23380b854 +size 74405 diff --git a/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_2_mobile.png b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_2_mobile.png new file mode 100644 index 0000000000..9ec9760c6e --- /dev/null +++ b/backstop_data/bitmaps_reference/ds-vr-test__components_hero_example-hero-analysis_0_document_2_mobile.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f2ca214e4b04d7f84e30c87010b47ab3ece0e046098e57c2919b1d676a1fb83e +size 70356 diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss index f44d7923da..9e03008c2d 100644 --- a/src/components/hero/_hero.scss +++ b/src/components/hero/_hero.scss @@ -51,10 +51,6 @@ height: 100%; } - &__text:has(+ .ons-btn) { - margin-bottom: 2rem; - } - &__pre-title { margin-bottom: 0.5rem; diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk index 61534555ac..17be18e2d0 100644 --- a/src/components/hero/_macro.njk +++ b/src/components/hero/_macro.njk @@ -58,7 +58,7 @@ {% endif %} {{ onsButton({ - "classes": btnClasses, + "classes": ' ons-u-mt-s ' + btnClasses, "type": 'button', "text": params.button.text, "url": params.button.url diff --git a/src/components/hero/_macro.spec.js b/src/components/hero/_macro.spec.js index 89c3918987..ccbf9893bd 100644 --- a/src/components/hero/_macro.spec.js +++ b/src/components/hero/_macro.spec.js @@ -78,7 +78,7 @@ describe('macro: hero', () => { faker.renderComponent('hero', { ...EXAMPLE_HERO, variants: 'dark' }); - expect(buttonSpy.occurrences[0]).toHaveProperty('classes', ' ons-btn--ghost'); + expect(buttonSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mt-s ons-btn--ghost'); }); it('calls with content', () => { From 094b8c9baa1cedbb0b0448659e303b2db2ef897e Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Mon, 16 Dec 2024 15:33:16 +0000 Subject: [PATCH 33/48] fix failing test --- src/components/hero/_macro.njk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/hero/_macro.njk b/src/components/hero/_macro.njk index 17be18e2d0..5e44198854 100644 --- a/src/components/hero/_macro.njk +++ b/src/components/hero/_macro.njk @@ -58,7 +58,7 @@ {% endif %} {{ onsButton({ - "classes": ' ons-u-mt-s ' + btnClasses, + "classes": 'ons-u-mt-s' + btnClasses, "type": 'button', "text": params.button.text, "url": params.button.url From 12506cb4d082d1c4f0ee4bfbaf53f6341df832c7 Mon Sep 17 00:00:00 2001 From: Precious Onyenaucheya Date: Thu, 19 Dec 2024 13:12:45 +0000 Subject: [PATCH 34/48] update as per PR comments --- src/components/hero/_hero.scss | 32 +++++++++++-- src/components/hero/_macro-options.md | 27 +++++------ src/components/hero/_macro.njk | 46 ++++++++++--------- src/components/hero/_macro.spec.js | 22 +++++++-- ...ero-analysis.njk => example-hero-grey.njk} | 5 +- 5 files changed, 86 insertions(+), 46 deletions(-) rename src/components/hero/{example-hero-analysis.njk => example-hero-grey.njk} (96%) diff --git a/src/components/hero/_hero.scss b/src/components/hero/_hero.scss index 9e03008c2d..f2735f17c6 100644 --- a/src/components/hero/_hero.scss +++ b/src/components/hero/_hero.scss @@ -28,12 +28,32 @@ } } - &--analysis { - background-color: var(--ons-color-banner-bg); + &--grey { + background-color: #efeff0; + &::before { + content: ''; + background-color: var(--ons-color-banner-bg); + border-radius: 0 0 50% 50%; + inset: 0; + left: -40%; + position: absolute; + width: 150%; + @include mq(l) { + border-radius: 0 0 300% 150%; + left: 0; + width: 100%; + } + } + } + &__badge { + @include mq(xs) { + margin-top: 2.5rem; + margin-bottom: 1rem; + } } &--topic { - color: var(--ons-color-branded) !important; + color: var(--ons-color-branded); } &__container { @@ -306,10 +326,14 @@ &__title-container { @include mq(l) { - display: flex; + display: grid; align-items: start; justify-content: space-between; gap: 1rem; + + &.ons-hero__title-badge { + grid-template-columns: 1fr auto; + } } } } diff --git a/src/components/hero/_macro-options.md b/src/components/hero/_macro-options.md index 619bb96a1b..1e5cca03f7 100644 --- a/src/components/hero/_macro-options.md +++ b/src/components/hero/_macro-options.md @@ -1,16 +1,17 @@ -| Name | Type | Required | Description | -| --------------- | --------------------------------------------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------- | -| variants | array or string | false | An array of values or single value (string) to adjust the component using available variant, “dark, navy-blue and analysis” | -| wide | boolean | false | Set to “true” when using the `wide` page layout container | -| topic | string | false | Topic for the hero | -| title | string | true | Text for the hero title | -| subtitle | string | false | Text for the hero subtitle | -| text | string | false | Text to follow the hero title and subtitle | -| button | `Object