@ons/design-system 72.6.0 → 72.9.0

package/components/pagination/_macro.njk

@@ -13,7 +13,7 @@
         aria-label="Pagination ({{ position }})"
     >
         <div class="ons-pagination__position">{{ position }}</div>
-        <ul class="ons-pagination__items">
+        <ul class="ons-pagination__items{{ ' ons-pagination__items--no-previous' if currentPageIndex == 1 }}">
             {% if currentPageIndex != 1 %}
                 {% set prevPageIndex = currentPageIndex - 2 %}
                 <li class="ons-pagination__item ons-pagination__item--previous">

package/components/pagination/_pagination.scss

@@ -7,7 +7,14 @@ $pagination-item-width: 2.5rem;
     }
 
     &__items {
+        margin: 0 $pagination-item-padding * -1;
         padding: 0;
+
+        &--no-previous {
+            @include mq(m) {
+                margin: 0;
+            }
+        }
     }
 
     &__item {
@@ -16,7 +23,6 @@ $pagination-item-width: 2.5rem;
 
         &--previous,
         &--next {
-            margin: 0 $pagination-item-padding * -1;
             display: inline-block;
         }
 
@@ -25,12 +31,6 @@ $pagination-item-width: 2.5rem;
                 display: inline-block;
             }
         }
-
-        @include mq('2xs', m) {
-            &--previous ~ &--next {
-                margin: 0;
-            }
-        }
     }
 
     &__item,

package/components/summary/_macro.njk

@@ -77,7 +77,7 @@
                                         </dt>
                                         {% if item.valueList %}
                                             <dd
-                                                class="ons-summary__values{{ ' ons-summary__values--2' if not item.actions }}"
+                                                class="ons-summary__values{{ ' ons-summary__column-size--2' if not item.actions }}"
                                                 {% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                                             >
                                                 {% if item.valueList | length == 1 %}
@@ -104,7 +104,7 @@
                                             </dd>
                                         {% endif %}
                                         {% if item.actions %}
-                                            <dd class="ons-summary__actions" {% if item.id %}id="{{ item.id }}"{% endif %}>
+                                            <dd class="ons-summary__actions{{ ' ons-summary__column-size--2' if not item.valueList }}" {% if item.id %}id="{{ item.id }}"{% endif %}>
                                                 {% for action in item.actions %}
                                                     {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
                                                     <a

package/components/summary/_macro.spec.js

@@ -196,20 +196,10 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
             itemsList: [
                 {
                     title: 'row item 4',
-                    valueList: [
-                        {
-                            text: 'list item 4',
-                        },
-                    ],
                     actions: [
                         {
                             text: 'Change',
-                            visuallyHiddenText: 'change answer',
-                            url: '#0',
-                        },
-                        {
-                            text: 'Remove',
-                            visuallyHiddenText: 'remove list item',
+                            visuallyHiddenText: 'change list item',
                             url: '#0',
                         },
                     ],
@@ -221,13 +211,6 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
                             text: 'list item 5',
                         },
                     ],
-                    actions: [
-                        {
-                            text: 'Change',
-                            visuallyHiddenText: 'change list item',
-                            url: '#0',
-                        },
-                    ],
                 },
                 {
                     title: 'row item 6',
@@ -304,6 +287,21 @@ const EXAMPLE_SUMMARY_MULTIPLE_GROUPS = {
     ],
 };
 
+const EXAMPLE_SUMMARY_SINGLE_GROUP = {
+    summaries: [
+        {
+            title: 'summary title',
+            groups: [
+                {
+                    id: 'group-id-1',
+                    title: 'group title',
+                    ...EXAMPLE_SUMMARY_HOUSEHOLD_GROUP,
+                },
+            ],
+        },
+    ],
+};
+
 // To address a DAC issue, we've disabled specific axe definition list rules causing test failures.
 // While resolving it would require a significant refactor, the failures are deemed non-critical for accessibility,
 // leading to their removal in this context. [https://github.com/ONSdigital/design-system/issues/3027]
@@ -411,9 +409,9 @@ describe('macro: summary', () => {
             it('displays the row `title` text', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
-                expect($('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text').text().trim()).toBe(
-                    'row title 1',
-                );
+                expect(
+                    $('.ons-summary__items .ons-summary__item:nth-of-type(1) .ons-summary__item--text:nth-of-type(1)').text().trim(),
+                ).toBe('row title 1');
             });
 
             it('has a custom icon `iconType`', () => {
@@ -473,6 +471,16 @@ describe('macro: summary', () => {
 
                 expect($('.ons-summary__items .ons-summary__item:nth-of-type(3) .ons-summary__values ul').length).toBe(1);
             });
+
+            it('adds the `ons-summary__column-size--2` class if no `valueList` is provided', () => {
+                const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_SINGLE_GROUP));
+
+                expect(
+                    $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__actions').hasClass(
+                        'ons-summary__column-size--2',
+                    ),
+                ).toBe(true);
+            });
         });
 
         describe('part: item action', () => {
@@ -549,6 +557,14 @@ describe('macro: summary', () => {
                     ),
                 ).toBe('def');
             });
+
+            it('adds the `ons-summary__column-size--2` class if no action is provided', () => {
+                const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_SINGLE_GROUP));
+
+                expect(
+                    $('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__values').hasClass('ons-summary__column-size--2'),
+                ).toBe(true);
+            });
         });
     });
 

package/components/summary/_summary.scss

@@ -192,10 +192,14 @@ $hub-row-spacing: 1.3rem;
             text-align: right;
         }
 
-        &__values--2 {
+        &__column-size--2 {
             flex: 10.5 1 66%;
         }
 
+        &__actions ~ &__values.ons-summary__column-size--2 {
+            padding-right: 33%;
+        }
+
         &--hub & {
             &__item-title,
             &__values,

package/components/summary/example-summary-grouped.njk

@@ -284,11 +284,6 @@
                                 "itemsList": [
                                     {
                                         "title": "Food",
-                                        "valueList": [
-                                            {
-                                                "text": "£50.00"
-                                            }
-                                        ],
                                         "actions": [
                                             {
                                                 "text": "Change",
@@ -333,13 +328,6 @@
                                             {
                                                 "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
                                             }
-                                        ],
-                                        "actions": [
-                                            {
-                                                "text": "Change",
-                                                "visuallyHiddenText": "Change answer",
-                                                "url": "#0"
-                                            }
                                         ]
                                     }
                                 ]