@ons/design-system 70.0.17 → 72.0.1

package/components/share-page/_macro.spec.js

@@ -8,7 +8,7 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 const EXAMPLE_SHARE_PAGE = {
     title: 'Share page',
     pageTitle: 'An example page',
-    pageURL: 'https://example.com/an-example-page',
+    pageUrl: 'https://example.com/an-example-page',
     facebook: true,
     twitter: true,
 };
@@ -31,7 +31,7 @@ describe('macro: share-page', () => {
         const $ = cheerio.load(
             renderComponent('share-page', {
                 ...EXAMPLE_SHARE_PAGE,
-                titleTag: 'h4',
+                headingLevel: 4,
             }),
         );
 

package/components/share-page/example-share-page.njk

@@ -4,7 +4,7 @@
     onsSharePage({
         "title": 'Share this post',
         "pageTitle": 'A page to share',
-        "pageURL": 'https://example.com/a-page-to-share',
+        "pageUrl": 'https://example.com/a-page-to-share',
         "facebook": true,
         "twitter": true
     })

package/components/status/_status.scss

@@ -17,7 +17,7 @@
         box-sizing: border-box;
         content: '';
         display: inline-block;
-        margin-right: 0.391rem;
+        margin-right: 0.5rem;
     }
 
     /* Small status indicators for information dense situations */

package/components/summary/_macro.njk

@@ -15,17 +15,17 @@
 
     <div class="{{ className }}">
         {% for summary in params.summaries %}
-            {% if summary.summaryTitle %}
-                <h2 class="ons-summary__title ons-u-mb-m{{ ' ons-u-mt-m' if loop.index > 1 }}">{{ summary.summaryTitle }}</h2>
+            {% if summary.title %}
+                <h2 class="ons-summary__title ons-u-mb-l{{ ' ons-u-mt-l' if loop.index > 1 else "" }}">{{ summary.title }}</h2>
                 {% set headingLevel = "3" %}
             {% endif %}
             {% for group in summary.groups %}
-                <div {% if group.id %}id="{{ group.id }}"{{ ' ' }}{% endif %}class="ons-summary__group{{ variantClasses }}">
-                    {% if group.groupTitle %}
-                        {% set openingHeadingTag = "<h" + headingLevel %}
-                        {% set closingHeadingTag = "</h" + headingLevel + ">" %}
+                <div {% if group.id %}id="{{ group.id }}"{% endif %} class="ons-summary__group{{ variantClasses }}">
+                    {% if group.title %}
+                        {% set openingHeadingTag = "<h" ~ headingLevel %}
+                        {% set closingHeadingTag = "</h" ~ headingLevel ~ ">" %}
                         {{ openingHeadingTag | safe }}
-                        class="ons-summary__group-title">{{ group.groupTitle }}{{ closingHeadingTag | safe }}
+                        class="ons-summary__group-title">{{ group.title }}{{ closingHeadingTag | safe }}
                     {% endif %}
                     {% if group.rows %}
                         <dl class="ons-summary__items">
@@ -37,63 +37,63 @@
                                     {% if row.errorMessage %}
                                         <div class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</div>
                                     {% endif %}
-                                    {% if row.rowItems | length > 1 and row.rowTitle %}
+                                    {% if row.itemsList | length > 1 and row.title %}
                                         <div class="ons-summary__row-title ons-summary__row-title--no-group-title ons-u-fs-r">
-                                            {{- row.rowTitle -}}
+                                            {{- row.title -}}
                                         </div>
                                     {% endif %}
 
-                                    {% for rowItem in row.rowItems %}
+                                    {% for item in row.itemsList %}
                                         <div
-                                            class="ons-summary__row{{ ' ons-summary__row--has-values' if rowItem.valueList }}"
-                                            {% if rowItem.id %}id="{{ rowItem.id }}"{% endif %}
+                                            class="ons-summary__row{{ ' ons-summary__row--has-values' if item.valueList else "" }}"
+                                            {% if item.id %}id="{{ item.id }}"{% endif %}
                                         >
                                             <dt
                                                 class="ons-summary__item-title"
-                                                {% if rowItem.rowTitleAttributes %}{% for attribute, value in (rowItem.rowTitleAttributes.items() if rowItem.rowTitleAttributes is mapping and rowItem.rowTitleAttributes.items else rowItem.rowTitleAttributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                                {% if item.titleAttributes %}{% for attribute, value in (item.titleAttributes.items() if item.titleAttributes is mapping and item.titleAttributes.items else item.titleAttributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
                                             >
-                                                {% if rowItem.iconType %}
+                                                {% if item.iconType %}
                                                     {% from "components/icon/_macro.njk" import onsIcon %}
                                                     <span
-                                                        class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if rowItem.iconType == 'check' }}"
+                                                        class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if item.iconType == 'check' else "" }}"
                                                     >
                                                         {{-
                                                             onsIcon({
-                                                                "iconType": rowItem.iconType
+                                                                "iconType": item.iconType
                                                             })
                                                         -}}
-                                                        {% if rowItem.iconVisuallyHiddenText %}
-                                                            <span class="ons-u-vh">{{ rowItem.iconVisuallyHiddenText }}</span>
+                                                        {% if item.iconVisuallyHiddenText %}
+                                                            <span class="ons-u-vh">{{ item.iconVisuallyHiddenText }}</span>
                                                         {% endif %}
                                                     </span>
                                                 {% endif %}
 
                                                 <div
-                                                    class="ons-summary__item--text{{ ' ons-summary__item-title--text' if rowItem.iconType }}"
+                                                    class="ons-summary__item--text{{ ' ons-summary__item-title--text' if item.iconType else "" }}"
                                                 >
-                                                    {{- rowItem.rowTitle | default(row.rowTitle) | safe -}}
+                                                    {{- item.title | default(row.title) | safe -}}
                                                 </div>
 
                                                 {# Render section status for mobile if is hub #}
-                                                {% if variantHub and rowItem.valueList %}
-                                                    <span class="ons-u-d-no@m ons-u-fs-r"> — {{ rowItem.valueList[0].text | safe }}</span>
+                                                {% if variantHub and item.valueList %}
+                                                    <span class="ons-u-d-no@m ons-u-fs-r"> — {{ item.valueList[0].text | safe }}</span>
                                                 {% endif %}
                                             </dt>
-                                            {% if rowItem.valueList %}
+                                            {% if item.valueList %}
                                                 <dd
-                                                    class="ons-summary__values{{ ' ons-summary__values--2' if not rowItem.actions }}"
-                                                    {% if rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{ ' ' }}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
+                                                    class="ons-summary__values{{ ' ons-summary__values--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 rowItem.valueList | length == 1 %}
-                                                        <span class="ons-summary__text">{{ rowItem.valueList[0].text | safe }}</span>
-                                                        {% if rowItem.valueList[0].other or rowItem.valueList[0].other == 0 %}
+                                                    {% if item.valueList | length == 1 %}
+                                                        <span class="ons-summary__text">{{ item.valueList[0].text | safe }}</span>
+                                                        {% if item.valueList[0].other or item.valueList[0].other == 0 %}
                                                             <ul class="ons-u-mb-no">
-                                                                <li>{{ rowItem.valueList[0].other | safe }}</li>
+                                                                <li>{{ item.valueList[0].other | safe }}</li>
                                                             </ul>
                                                         {% endif %}
                                                     {% else %}
                                                         <ul class="ons-u-mb-no">
-                                                            {% for value in rowItem.valueList %}
+                                                            {% for value in item.valueList %}
                                                                 <li>
                                                                     <span class="ons-summary__text">{{ value.text | safe }}</span>
                                                                     {% if value.other or value.other == 0 %}
@@ -107,9 +107,9 @@
                                                     {% endif %}
                                                 </dd>
                                             {% endif %}
-                                            {% if rowItem.actions %}
+                                            {% if item.actions %}
                                                 <dd class="ons-summary__actions">
-                                                    {% for action in rowItem.actions %}
+                                                    {% for action in item.actions %}
                                                         {% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
                                                         <a
                                                             href="{{ action.url }}"
@@ -135,7 +135,7 @@
 
                     {% if group.summaryLink %}
                         <div
-                            class="ons-summary__link{{ ' ons-u-pt-s' if params.variant != 'card' and (group.placeholderText or group.rows) }}{{ ' ons-u-bt' if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' }}{{ ' ons-u-mb-xl' if not group.last }}"
+                            class="ons-summary__link{{ ' ons-u-pt-s' if params.variant != 'card' and (group.placeholderText or group.rows) }}{{ ' ons-u-bt' if group.placeholderText is not defined and group.rows | length > 1 and params.variant != 'card' }}{{ ' ons-u-mb-3xl' if not group.last }}"
                         >
                             {% set link %}
                                 <a

package/components/summary/_macro.spec.js

@@ -8,12 +8,12 @@ import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
 const EXAMPLE_SUMMARY_ROWS = {
     rows: [
         {
-            // Contains - row with icon, attributes and rowTitleAttributes, other value, no action
+            // Contains - row with icon, attributes and titleAttributes, other value, no action
             id: 'row-id-1',
-            rowTitle: 'row title 1',
-            rowItems: [
+            title: 'row title 1',
+            itemsList: [
                 {
-                    rowTitleAttributes: {
+                    titleAttributes: {
                         a: 123,
                         b: 456,
                     },
@@ -36,10 +36,10 @@ const EXAMPLE_SUMMARY_ROWS = {
         {
             // Contains - row with error and multiple actions
             id: 'row-id-2',
-            rowTitle: 'row title 2',
+            title: 'row title 2',
             error: true,
             errorMessage: 'there are errors',
-            rowItems: [
+            itemsList: [
                 {
                     id: 'item-id-2',
                     valueList: [
@@ -69,8 +69,8 @@ const EXAMPLE_SUMMARY_ROWS = {
         {
             // Contains - row with multiple rows and multiple values
             id: 'row-id-3',
-            rowTitle: 'row title 3',
-            rowItems: [
+            title: 'row title 3',
+            itemsList: [
                 {
                     id: 'item-id-3',
                     valueList: [
@@ -95,9 +95,9 @@ const EXAMPLE_SUMMARY_ROWS = {
         {
             // Contains - row with total
             id: 'row-id-4',
-            rowTitle: 'row title 4',
+            title: 'row title 4',
             total: true,
-            rowItems: [
+            itemsList: [
                 {
                     id: 'item-id-5',
                     valueList: [
@@ -115,7 +115,7 @@ const EXAMPLE_SUMMARY_GROUPS = {
     groups: [
         {
             id: 'group-id-1',
-            groupTitle: 'group title',
+            title: 'group title',
             ...EXAMPLE_SUMMARY_ROWS,
         },
     ],
@@ -139,9 +139,9 @@ const EXAMPLE_SUMMARY_GROUPS_NO_ROWS = {
 const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
     rows: [
         {
-            rowItems: [
+            itemsList: [
                 {
-                    rowTitle: 'row item 1',
+                    title: 'row item 1',
                     valueList: [
                         {
                             text: 'list item 1',
@@ -161,7 +161,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
                     ],
                 },
                 {
-                    rowTitle: 'row item 2',
+                    title: 'row item 2',
                     valueList: [
                         {
                             text: 'list item 2',
@@ -176,7 +176,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
                     ],
                 },
                 {
-                    rowTitle: 'row item 3',
+                    title: 'row item 3',
                     valueList: [
                         {
                             text: 'list item 3',
@@ -193,9 +193,9 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
             ],
         },
         {
-            rowItems: [
+            itemsList: [
                 {
-                    rowTitle: 'row item 4',
+                    title: 'row item 4',
                     valueList: [
                         {
                             text: 'list item 4',
@@ -215,7 +215,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
                     ],
                 },
                 {
-                    rowTitle: 'row item 5',
+                    title: 'row item 5',
                     valueList: [
                         {
                             text: 'list item 5',
@@ -230,7 +230,7 @@ const EXAMPLE_SUMMARY_HOUSEHOLD_GROUP = {
                     ],
                 },
                 {
-                    rowTitle: 'row item 6',
+                    title: 'row item 6',
                     valueList: [
                         {
                             text: 'list item 6',
@@ -264,7 +264,7 @@ const EXAMPLE_SUMMARY_BASIC = {
 const EXAMPLE_SUMMARY_WITH_TITLE = {
     summaries: [
         {
-            summaryTitle: 'summary title',
+            title: 'summary title',
             ...EXAMPLE_SUMMARY_GROUPS,
         },
     ],
@@ -273,7 +273,7 @@ const EXAMPLE_SUMMARY_WITH_TITLE = {
 const EXAMPLE_SUMMARY_WITH_NO_ROWS = {
     summaries: [
         {
-            summaryTitle: 'summary title',
+            title: 'summary title',
             ...EXAMPLE_SUMMARY_GROUPS_NO_ROWS,
         },
     ],
@@ -282,21 +282,21 @@ const EXAMPLE_SUMMARY_WITH_NO_ROWS = {
 const EXAMPLE_SUMMARY_MULTIPLE_GROUPS = {
     summaries: [
         {
-            summaryTitle: 'summary title',
+            title: 'summary title',
             groups: [
                 {
                     id: 'group-id-1',
-                    groupTitle: 'group title',
+                    title: 'group title',
                     ...EXAMPLE_SUMMARY_ROWS,
                 },
                 {
                     id: 'group-id-2',
-                    groupTitle: 'group title',
+                    title: 'group title',
                     ...EXAMPLE_SUMMARY_HOUSEHOLD_GROUP,
                 },
                 {
                     id: 'group-id-3',
-                    groupTitle: 'group title',
+                    title: 'group title',
                     ...EXAMPLE_SUMMARY_ROWS,
                 },
             ],
@@ -345,13 +345,13 @@ describe('macro: summary', () => {
                 expect($('#group-id-1').length).toBe(1);
             });
 
-            it('has the correct `groupTitle` tag', () => {
+            it('has the correct group `title` tag', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
                 expect($('.ons-summary__group-title')[0].tagName).toBe('h2');
             });
 
-            it('has the `groupTitle` text', () => {
+            it('has the group `title` text', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
                 expect($('.ons-summary__group-title').text()).toBe('group title');
@@ -360,7 +360,7 @@ describe('macro: summary', () => {
             it('has larger margin between groups if the top one is a household style summary', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_MULTIPLE_GROUPS));
 
-                expect($('.ons-summary__group:nth-last-of-type(2) .ons-summary__link').hasClass('ons-u-mb-xl')).toBe(true);
+                expect($('.ons-summary__group:nth-last-of-type(2) .ons-summary__link').hasClass('ons-u-mb-3xl')).toBe(true);
             });
         });
 
@@ -377,13 +377,13 @@ describe('macro: summary', () => {
                 expect($('.ons-summary__items .ons-summary__item:nth-of-type(4)').hasClass('ons-summary__item--total')).toBe(true);
             });
 
-            it('displays the `rowTitle` text', () => {
+            it('displays the row `title` text', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
                 expect($('.ons-summary__items .ons-summary__item:nth-of-type(3) .ons-summary__row-title').text()).toBe('row title 3');
             });
 
-            it('overrides the `rowTitle` with the `errorMessage` if provided', () => {
+            it('overrides the row `title` with the `errorMessage` if provided', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_TITLE));
 
                 expect($('.ons-summary__items .ons-summary__item:nth-of-type(2) .ons-summary__row-title--error').text()).toBe(
@@ -405,7 +405,7 @@ describe('macro: summary', () => {
                 expect($('.ons-summary__row--has-values').length).toBe(5);
             });
 
-            it('has custom `rowTitleAttributes`', () => {
+            it('has custom row `titleAttributes`', () => {
                 const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_BASIC));
 
                 expect($('.ons-summary__item-title').attr('a')).toBe('123');
@@ -414,7 +414,7 @@ describe('macro: summary', () => {
         });
 
         describe('part: item title', () => {
-            it('displays the `rowTitle` text', () => {
+            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(
@@ -562,7 +562,7 @@ describe('macro: summary', () => {
             expect(results).toHaveNoViolations();
         });
 
-        it('displays the `summaryTitle`', () => {
+        it('displays the summary `title`', () => {
             const $ = cheerio.load(renderComponent('summary', EXAMPLE_SUMMARY_WITH_TITLE));
 
             expect($('.ons-summary__title').text()).toBe('summary title');
@@ -593,7 +593,7 @@ describe('macro: summary', () => {
             expect($('.ons-summary').hasClass('ons-summary--hub')).toBe(true);
         });
 
-        it('has the value rendered after the `rowTitle` that shows on mobile', () => {
+        it('has the value rendered after the row `title` that shows on mobile', () => {
             const $ = cheerio.load(
                 renderComponent('summary', {
                     ...EXAMPLE_SUMMARY_BASIC,

package/components/summary/_summary.scss

@@ -24,8 +24,6 @@ $hub-row-spacing: 1.3rem;
     }
 
     &__item {
-        line-height: 1.4;
-
         &:not(:last-child),
         &:not(.ons-summary__group--card .ons-summary__item):nth-of-type(1) {
             border-bottom: 1px solid var(--ons-color-borders);
@@ -92,7 +90,7 @@ $hub-row-spacing: 1.3rem;
         background: var(--ons-color-black);
         display: inline-block;
         height: 1.15rem;
-        margin: 0.18rem 0.25rem 0;
+        margin: 0.25rem 0.25rem 0;
         vertical-align: middle;
         width: 1px;
     }
@@ -148,7 +146,7 @@ $hub-row-spacing: 1.3rem;
     }
 
     // Breakpoints
-    @include mq(xxs, m, none, '<') {
+    @include mq('2xs', m, none, '<') {
         &__item-title,
         &__values,
         &__actions {

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

@@ -5,14 +5,14 @@
         "variant": "card",
         "summaries": [
             {
-                "summaryTitle": "John Doe",
+                "title": "John Doe",
                 "groups": [
                     {
-                        "groupTitle": "Personal details",
+                        "title": "Personal details",
                         "rows": [
                             {
-                                "rowTitle": "Are you John Doe?",
-                                "rowItems": [
+                                "title": "Are you John Doe?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -30,8 +30,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "What's your date of birth?",
-                                "rowItems": [
+                                "title": "What's your date of birth?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -49,8 +49,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "What is your sex?",
-                                "rowItems": [
+                                "title": "What is your sex?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -70,11 +70,11 @@
                         ]
                     },
                     {
-                        "groupTitle": "Identity and health",
+                        "title": "Identity and health",
                         "rows": [
                             {
-                                "rowTitle": "What is your country of birth?",
-                                "rowItems": [
+                                "title": "What is your country of birth?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -92,8 +92,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "What passports do you hold?",
-                                "rowItems": [
+                                "title": "What passports do you hold?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -113,11 +113,11 @@
                         ]
                     },
                     {
-                        "groupTitle": "Qualifications",
+                        "title": "Qualifications",
                         "rows": [
                             {
-                                "rowTitle": "Have you completed an apprenticeship?",
-                                "rowItems": [
+                                "title": "Have you completed an apprenticeship?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -135,8 +135,8 @@
                                 ]
                             },
                             {
-                                "rowTitle": "Have you achieved a GCSE or equivalent qualification?",
-                                "rowItems": [
+                                "title": "Have you achieved a GCSE or equivalent qualification?",
+                                "itemsList": [
                                     {
                                         "valueList": [
                                             {
@@ -156,12 +156,12 @@
                         ]
                     },
                     {
-                        "groupTitle": "Employment history",
+                        "title": "Employment history",
                         "rows": [
                             {
-                                "rowItems": [
+                                "itemsList": [
                                     {
-                                        "rowTitle": "Name of UK company",
+                                        "title": "Name of UK company",
                                         "valueList": [
                                             {
                                                 "text": "Company A"
@@ -181,7 +181,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Head office location",
+                                        "title": "Head office location",
                                         "valueList": [
                                             {
                                                 "text": "Cardiff"
@@ -196,7 +196,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Is this UK company your current employer?",
+                                        "title": "Is this UK company your current employer?",
                                         "valueList": [
                                             {
                                                 "text": "No"
@@ -213,9 +213,9 @@
                                 ]
                             },
                             {
-                                "rowItems": [
+                                "itemsList": [
                                     {
-                                        "rowTitle": "Name of UK company",
+                                        "title": "Name of UK company",
                                         "valueList": [
                                             {
                                                 "text": "Company A"
@@ -235,7 +235,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Head office location",
+                                        "title": "Head office location",
                                         "valueList": [
                                             {
                                                 "text": "Newport"
@@ -250,7 +250,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Is this UK company your current employer?",
+                                        "title": "Is this UK company your current employer?",
                                         "valueList": [
                                             {
                                                 "text": "Yes"
@@ -276,13 +276,13 @@
                         }
                     },
                     {
-                        "groupTitle": "Spending",
+                        "title": "Spending",
                         "rows": [
                             {
-                                "rowTitle": "What are your monthly household expenses?",
-                                "rowItems": [
+                                "title": "What are your monthly household expenses?",
+                                "itemsList": [
                                     {
-                                        "rowTitle": "Food",
+                                        "title": "Food",
                                         "valueList": [
                                             {
                                                 "text": "£50.00"
@@ -297,7 +297,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Utilities",
+                                        "title": "Utilities",
                                         "valueList": [
                                             {
                                                 "text": "£65.00"
@@ -312,7 +312,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Transport",
+                                        "title": "Transport",
                                         "valueList": [
                                             {
                                                 "text": "£70.00"
@@ -327,7 +327,7 @@
                                         ]
                                     },
                                     {
-                                        "rowTitle": "Other",
+                                        "title": "Other",
                                         "valueList": [
                                             {
                                                 "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."