diff --git a/src/components/summary/_macro-options.md b/src/components/summary/_macro-options.md index 31ec6ecb60..52c01010b1 100644 --- a/src/components/summary/_macro-options.md +++ b/src/components/summary/_macro-options.md @@ -36,7 +36,6 @@ | Name | Type | Required | Description | | ---------------------- | ---------------------- | -------- | ------------------------------------------------------------------------------------------- | -| id | string | false | The HTML `id` of the row item | | iconType | string | false | Adds an icon before the row title, by setting the [icon type](/foundations/icons#icon-type) | | iconVisuallyHiddenText | string | false | Visually hidden text in a span under the icon to add more context for screen readers | | title | string | false | The title for the row item | diff --git a/src/components/summary/_macro.njk b/src/components/summary/_macro.njk index e4f4a1617a..33ba88d346 100644 --- a/src/components/summary/_macro.njk +++ b/src/components/summary/_macro.njk @@ -35,96 +35,91 @@ {% if row.total %}{% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
{% if row.errorMessage %} -
{{ row.errorMessage }}
+
{{ row.errorMessage }}
{% endif %} {% if row.itemsList | length > 1 and row.title %} -
+
{{- row.title -}} -
+ {% endif %} {% for item in row.itemsList %} -
-
- {% if item.iconType %} - {% from "components/icon/_macro.njk" import onsIcon %} - - {{- - onsIcon({ - "iconType": item.iconType - }) - -}} - {% if item.iconVisuallyHiddenText %} - {{ item.iconVisuallyHiddenText }} - {% endif %} - - {% endif %} - -
- {{- item.title | default(row.title) | safe -}} -
+ {{- + onsIcon({ + "iconType": item.iconType + }) + -}} + {% if item.iconVisuallyHiddenText %} + {{ item.iconVisuallyHiddenText }} + {% endif %} + + {% endif %} - {# Render section status for mobile if is hub #} - {% if variantHub and item.valueList %} - — {{ item.valueList[0].text | safe }} - {% endif %} -
- {% if item.valueList %} -
- {% if item.valueList | length == 1 %} - {{ item.valueList[0].text | safe }} - {% if item.valueList[0].other or item.valueList[0].other == 0 %} -
    -
  • {{ item.valueList[0].other | safe }}
    • -
- {% endif %} - {% else %} +
+ {{- item.title | default(row.title) | safe -}} +
+ + {# Render section status for mobile if is hub #} + {% if variantHub and item.valueList %} + — {{ item.valueList[0].text | safe }} + {% endif %} + + {% if item.valueList %} +
+ {% if item.valueList | length == 1 %} + {{ item.valueList[0].text | safe }} + {% if item.valueList[0].other or item.valueList[0].other == 0 %}
    - {% for value in item.valueList %} -
  • - {{ value.text | safe }} - {% if value.other or value.other == 0 %} -
      -
    • {{ value.other | safe }}
      • -
    - {% endif %} -
    • - {% endfor %} +
  • {{ item.valueList[0].other | safe }}
{% endif %} -
- {% endif %} - {% if item.actions %} -
- {% for action in item.actions %} - {% if loop.index > 1 %}{% endif %} - - - {{ action.visuallyHiddenText }} - - {% endfor %} -
- {% endif %} -
+ {% else %} + + {% endif %} + + {% endif %} + {% if item.actions %} +
+ {% for action in item.actions %} + {% if loop.index > 1 %}{% endif %} + + + {{ action.visuallyHiddenText }} + + {% endfor %} +
+ {% endif %} {% endfor %}
{% endfor %} @@ -146,7 +141,7 @@ {% endset %} {% if params.variant == 'card' %} -
{{ link | safe }}
+
{{ link | safe }}
{% else %} {{ link | safe }} {% endif %} diff --git a/src/components/summary/_macro.spec.js b/src/components/summary/_macro.spec.js index 3240e26e89..80843f6579 100644 --- a/src/components/summary/_macro.spec.js +++ b/src/components/summary/_macro.spec.js @@ -399,12 +399,6 @@ describe('macro: summary', () => { expect($('#row-id-3').length).toBe(1); }); - it('has the correct class for each row when there is a `valueList`', () => { - const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); - - expect($('.ons-summary__row--has-values').length).toBe(5); - }); - it('has custom row `titleAttributes`', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); @@ -462,18 +456,16 @@ describe('macro: summary', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); expect( - $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__row .ons-summary__values .ons-summary__text') - .text() - .trim(), + $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__values .ons-summary__text').text().trim(), ).toBe('row value 1'); }); it('displays the `other` text', () => { const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC)); - expect( - $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__row .ons-summary__values ul li').text().trim(), - ).toBe('other value'); + expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__values ul li').text().trim()).toBe( + 'other value', + ); }); it('wraps the `valueList` in a ul if multiple values provided', () => { @@ -601,9 +593,7 @@ describe('macro: summary', () => { }), ); - expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__row .ons-summary__item-title span').text()).toBe( - ' — row value 2', - ); + expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__item-title span').text()).toBe(' — row value 2'); }); }); diff --git a/src/components/summary/_summary.scss b/src/components/summary/_summary.scss index 6c634b7354..38a7323d39 100644 --- a/src/components/summary/_summary.scss +++ b/src/components/summary/_summary.scss @@ -18,12 +18,10 @@ $hub-row-spacing: 1.3rem; } } - &__row { + &__item { display: flex; margin: 0; - } - - &__item { + flex-wrap: wrap; &:not(:last-child), &:not(.ons-summary__group--card .ons-summary__item):nth-of-type(1) { border-bottom: 1px solid var(--ons-color-borders); @@ -51,6 +49,7 @@ $hub-row-spacing: 1.3rem; &__row-title { padding: $summary-row-spacing 0; text-align: left; + flex: 0 0 100%; } // reduces the gap between row title and summary title when there is no group title &__title + &__group &__row-title--no-group-title { @@ -95,12 +94,13 @@ $hub-row-spacing: 1.3rem; width: 1px; } - // Item Modifiers + // Row Modifiers &__item--error & { &__row-title--error { color: var(--ons-color-errors); font-weight: $font-weight-bold; padding: $summary-row-spacing $summary-col-spacing; + flex: 0 0 100%; } &__row-title, @@ -159,7 +159,7 @@ $hub-row-spacing: 1.3rem; } } - &__row { + &__item { flex-direction: column; } } @@ -172,14 +172,19 @@ $hub-row-spacing: 1.3rem; flex: 5 1 33%; padding-top: $summary-row-spacing; vertical-align: top; - &:not(:last-child) { - padding-right: $summary-col-spacing; - } + } + + &__item-title, + &__values { + padding-right: $summary-col-spacing; } &__actions { display: flex; justify-content: right; + & :not(.ons-summary__item-title--error) { + padding-right: 0; + } } &__button { @@ -215,7 +220,7 @@ $hub-row-spacing: 1.3rem; } .ons-summary__link { padding: 0 1.25rem; - div { + &-container { padding: 1rem 0; border-top: 1px solid var(--ons-color-borders-light); } @@ -225,7 +230,7 @@ $hub-row-spacing: 1.3rem; padding: 0.5rem 1.25rem 0; } .ons-summary__placeholder + .ons-summary__link { - div { + &-container { border-top: 0; } }