@ons/design-system 69.0.0 → 70.0.0

package/components/duration/_macro.spec.js

@@ -11,6 +11,15 @@ const EXAMPLE_DURATION_INPUT_BASE = {
   description: 'Enter “0” into the years field if you have lived at this address for less than a year',
 };
 
+const EXAMPLE_DURATION_INPUT_BASE_WITH_ERROR = {
+  id: 'duration',
+  legendOrLabel: 'How long have you lived at this address?',
+  description: 'Enter “0” into the years field if you have lived at this address for less than a year',
+  error: {
+    text: 'Enter how long you have lived at this address',
+  },
+};
+
 const EXAMPLE_FIELD_1 = {
   field1: {
     id: 'address-duration-years',
@@ -35,6 +44,45 @@ const EXAMPLE_FIELD_2 = {
   },
 };
 
+const EXAMPLE_FIELD_1_WITH_ERROR = {
+  field1: {
+    id: 'address-duration-years',
+    name: 'address-duration-years',
+    value: '0',
+    error: true,
+    suffix: {
+      text: 'Years',
+      id: 'address-duration-years-suffix',
+    },
+  },
+};
+
+const EXAMPLE_FIELD_2_WITH_ERROR = {
+  field2: {
+    id: 'address-duration-months',
+    name: 'address-duration-months',
+    value: '0',
+    error: true,
+    suffix: {
+      text: 'Months',
+      id: 'address-duration-months-suffix',
+    },
+  },
+};
+
+const EXAMPLE_FIELD_1_WITH_ERROR_FALSE = {
+  field1: {
+    id: 'address-duration-years',
+    name: 'address-duration-years',
+    value: '0',
+    error: false,
+    suffix: {
+      text: 'Years',
+      id: 'address-duration-years-suffix',
+    },
+  },
+};
+
 const EXAMPLE_DURATION_SINGLE_FIELD = {
   ...EXAMPLE_DURATION_INPUT_BASE,
   ...EXAMPLE_FIELD_1,
@@ -46,6 +94,23 @@ const EXAMPLE_DURATION_MULTIPLE_FIELDS = {
   ...EXAMPLE_FIELD_2,
 };
 
+const EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_SINGLE_ERROR = {
+  ...EXAMPLE_DURATION_INPUT_BASE_WITH_ERROR,
+  ...EXAMPLE_FIELD_1,
+  ...EXAMPLE_FIELD_2_WITH_ERROR,
+};
+
+const EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_ERROR = {
+  ...EXAMPLE_DURATION_INPUT_BASE_WITH_ERROR,
+  ...EXAMPLE_FIELD_1_WITH_ERROR,
+  ...EXAMPLE_FIELD_2_WITH_ERROR,
+};
+
+const EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_ERROR_FALSE = {
+  ...EXAMPLE_DURATION_INPUT_BASE,
+  ...EXAMPLE_FIELD_1_WITH_ERROR_FALSE,
+};
+
 describe('macro: duration', () => {
   describe('mode: multiple fields', () => {
     it('passes jest-axe checks', async () => {
@@ -109,6 +174,12 @@ describe('macro: duration', () => {
       expect($(div).hasClass('ons-field-group')).toBe(true);
     });
 
+    it('has the correct number of inputs', () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS));
+      const $inputs = $('.ons-input');
+      expect($inputs.length).toBe(2);
+    });
+
     it('has the expected `fieldset` output', () => {
       const faker = templateFaker();
       const fieldsetSpy = faker.spy('fieldset');
@@ -141,10 +212,11 @@ describe('macro: duration', () => {
           mutuallyExclusive: {
             legendClasses: 'custom-legend-class',
             dontWrap: true,
+            classes: undefined,
             legendIsQuestionTitle: true,
             error: false,
             mutuallyExclusive: {
-              checkbox: {},
+              exclusiveOptions: {},
               or: 'Or',
               deselectMessage: 'Deselect message',
               deselectGroupAdjective: 'Deselect group adjective',
@@ -166,10 +238,10 @@ describe('macro: duration', () => {
         ...EXAMPLE_DURATION_MULTIPLE_FIELDS,
         legendClasses: 'custom-legend-class',
         dontWrap: true,
+        classes: undefined,
         legendIsQuestionTitle: true,
         error: false,
         mutuallyExclusive: {
-          checkbox: {},
           or: 'Or',
           deselectMessage: 'Deselect message',
           deselectGroupAdjective: 'Deselect group adjective',
@@ -183,9 +255,9 @@ describe('macro: duration', () => {
         description: 'Enter “0” into the years field if you have lived at this address for less than a year',
         legendClasses: 'custom-legend-class',
         dontWrap: true,
+        classes: undefined,
         legendIsQuestionTitle: true,
         error: false,
-        checkbox: {},
         or: 'Or',
         deselectMessage: 'Deselect message',
         deselectGroupAdjective: 'Deselect group adjective',
@@ -215,7 +287,6 @@ describe('macro: duration', () => {
         classes: '',
         value: '0',
         attributes: undefined,
-        classes: '',
         error: undefined,
         fieldId: 'duration',
         label: {
@@ -226,10 +297,17 @@ describe('macro: duration', () => {
         suffix: {
           id: 'address-duration-years-suffix',
           text: 'Years',
+          title: undefined,
         },
       });
     });
 
+    it('has the correct number of inputs', () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_SINGLE_FIELD));
+      const $inputs = $('.ons-input');
+      expect($inputs.length).toBe(1);
+    });
+
     it('has the expected `error` output', () => {
       const faker = templateFaker();
       const errorSpy = faker.spy('error');
@@ -244,4 +322,34 @@ describe('macro: duration', () => {
       });
     });
   });
+
+  describe('mode: multiple fields with errors', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_SINGLE_ERROR));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the provided error class on one input', async () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_SINGLE_ERROR));
+      const $errorContent = $('.ons-input--error');
+
+      expect($errorContent.length).toBe(1);
+    });
+
+    it('has the provided error class on multiple inputs', async () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_ERROR));
+      const $errorContent = $('.ons-input--error');
+
+      expect($errorContent.length).toBe(2);
+    });
+
+    it('does not provide error class when error parameter set to false', async () => {
+      const $ = cheerio.load(renderComponent('duration', EXAMPLE_DURATION_MULTIPLE_FIELDS_WITH_ERROR_FALSE));
+      const $errorContent = $('.ons-input--error');
+
+      expect($errorContent.length).toBe(0);
+    });
+  });
 });

package/components/duration/example-duration-error-for-single-field.njk

@@ -6,7 +6,7 @@
     "legendOrLabel": 'How long do you spend travelling to and from work each day?',
     "legendClasses": 'ons-u-vh',
     "error": {
-        "text": "Enter a number that is less than 60",
+        "text": "Enter a number of minutes that is less than 60",
         "id": "duration-error"
     },
     "field1": {

package/components/duration/example-duration-single-field.njk

@@ -0,0 +1,24 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/duration/_macro.njk" import onsDuration %}
+
+{% call onsQuestion({
+    "title": "How many years have you lived at this address?",
+    "description": "<p>Enter “0” into the years field if you have lived at this address for less than a year</p>",
+    "legendIsQuestionTitle": true
+}) %}
+    {{ onsDuration({
+        "id": "address-duration-example-single",
+        "dontWrap": true,
+        "field1": {
+            "id": "address-duration-years-example",
+            "name": "address-duration-years",
+            "suffix": {
+                "text": "Years",
+                "id": "address-duration-years-suffix-example"
+            },
+            "attributes": {
+                "autocomplete": "off"
+            }
+        }
+    }) }}
+{% endcall %}

package/components/feedback/_macro.njk

@@ -1,5 +1,5 @@
 {% macro onsFeedback(params) %}
-    {% set headingLevel = params.headingLevel | default("2") %}
+    {% set headingLevel = params.headingLevel | default(2) %}
     <div {% if params.id %} id="{{ params.id }}"{% endif %} class="ons-feedback{% if params.classes %} {{ params.classes }}{% endif %}">
         <h{{ headingLevel }} class="ons-feedback__heading{{ ' ' + params.headingClasses if params.headingClasses }}">
             {{ params.heading }}

package/components/header/_macro.njk

@@ -45,7 +45,7 @@
                                     {{-
                                         onsIcon({
                                             "iconType": 'ons-logo-' + currentLanguageISOCode,
-                                            "altText": 'Office for National Statistics logo'
+                                            "altText": 'Office for National Statistics homepage'
                                         })
                                     -}}
                                 {% endif %}

package/components/header/_macro.spec.js

@@ -275,7 +275,7 @@ describe('macro: header', () => {
 
       faker.renderComponent('header', EXAMPLE_HEADER_BASIC);
 
-      expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics logo');
+      expect(iconsSpy.occurrences[0].altText).toBe('Office for National Statistics homepage');
     });
 
     it('has the default masthead mobile logo icon alt text', () => {

package/components/icon/_macro.njk

@@ -130,8 +130,8 @@
             </rect>
         </svg>
     {%- elif params.iconType == "ons-logo-en" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-en-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-en-alt') }}">{{ params.altText | default ('Office for National Statistics logo') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="197" height="19" viewBox="33 2 552 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-en-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-en-alt') }}">{{ params.altText | default ('Office for National Statistics homepage') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"/>
             </g>
@@ -169,8 +169,8 @@
             </g>
         </svg>
     {%- elif params.iconType == "ons-logo-cy" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-cy-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-cy-alt') }}">{{ params.altText | default ('Logo Swyddfa Ystadegau Gwladol') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="207" height="19" viewBox="15 2 620 60" aria-labelledby="{{ params.altTextId | default ('ons-logo-cy-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-cy-alt') }}">{{ params.altText | default ('Hafan Swyddfa Ystadegau Gwladol') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,34.6c.8-1.69,1.39-3,2.32-4.6A38.28,38.28,0,0,1,0,23.4V34.6M5,3S0,3,0,9.25v1A62.12,62.12,0,0,0,4.2,27a43.77,43.77,0,0,1,9.42-10.79C21.69,9.21,31.16,5.13,45.9,3Z"/>
             </g>
@@ -204,8 +204,8 @@
             </g>
         </svg>
     {%- elif params.iconType == "ons-logo-stacked-en" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Office for National Statistics logo') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="120" height="27" viewBox="0 5 595 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Office for National Statistics homepage') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"/>
             </g>
@@ -217,8 +217,8 @@
             </g>
         </svg>
     {%- elif params.iconType == "ons-logo-stacked-cy" -%}
-        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-cy-alt') }}">
-            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Logo Swyddfa Ystadegau Gwladol') }}</title>
+        <svg class="ons-icon--logo{{ iconClasses }}" xmlns="http://www.w3.org/2000/svg" width="130" height="27" viewBox="0 5 645 116" aria-labelledby="{{ params.altTextId | default ('ons-logo-stacked-cy-alt') }}" role="img">
+            <title id="{{ params.altTextId | default ('ons-logo-stacked-en-alt') }}">{{ params.altText | default ('Hafan Swyddfa Ystadegau Gwladol') }}</title>
             <g class="ons-icon--logo__group ons-icon--logo__group--secondary" fill="#a8bd3a">
                 <path d="M0,70.5c1.8-3.7,3.6-7.2,5.6-10.7A127.94,127.94,0,0,1,0,42.6V70.5M10.9,0S0,0,0,13.5v7.2A128.06,128.06,0,0,0,7.9,56.2a114.75,114.75,0,0,1,22.3-26C47.8,15.1,71.5,4.7,103.7.1Z"/>
             </g>

package/components/icon/_macro.spec.js

@@ -91,10 +91,10 @@ describe('macro: icon', () => {
   });
 
   describe.each([
-    ['ons-logo-en', 'Office for National Statistics logo'],
-    ['ons-logo-cy', 'Logo Swyddfa Ystadegau Gwladol'],
-    ['ons-logo-stacked-en', 'Office for National Statistics logo'],
-    ['ons-logo-stacked-cy', 'Logo Swyddfa Ystadegau Gwladol'],
+    ['ons-logo-en', 'Office for National Statistics homepage'],
+    ['ons-logo-cy', 'Hafan Swyddfa Ystadegau Gwladol'],
+    ['ons-logo-stacked-en', 'Office for National Statistics homepage'],
+    ['ons-logo-stacked-cy', 'Hafan Swyddfa Ystadegau Gwladol'],
     ['crest', 'Royal coat of arms of the United Kingdom'],
     ['ogl', 'Open Government License logo'],
   ])('icon type: %s', (iconType, expectedAltText) => {

package/components/metadata/_macro.njk

@@ -1,14 +1,14 @@
 {% from "components/description-list/_macro.njk" import onsDescriptionList %}
 
 {% macro onsMetadata(params) %}
-{{
-    onsDescriptionList({
-        "id": params.id,
-        "classes": params.classes,
-        "descriptionListLabel": params.metadataLabel,
-        "termCol": params.termCol,
-        "descriptionCol": params.descriptionCol,
-        "itemsList": params.itemsList
-    })
-}}
+    {{
+        onsDescriptionList({
+            "id": params.id,
+            "classes": params.classes,
+            "descriptionListLabel": params.metadataLabel,
+            "termCol": params.termCol,
+            "descriptionCol": params.descriptionCol,
+            "itemsList": params.itemsList
+        })
+    }}
 {% endmacro %}

package/components/multiple-input-fields/_macro.njk

@@ -0,0 +1,49 @@
+{% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %}
+{% from "components/fieldset/_macro.njk" import onsFieldset %}
+
+{% macro onsMultipleInputFields(params) %}
+    {% if params.numberOfFields > 1 %}
+        {% set fields %}
+            <div class="ons-field-group">
+                {{ params.fields | safe }}
+            </div>
+        {% endset %}
+    {% else %}
+        {{ params.fields | safe }}
+    {% endif %}
+
+    {% if params.mutuallyExclusive %}
+        {% call onsMutuallyExclusive({
+            "id": params.id,
+            "legend": params.legendOrLabel,
+            "legendClasses": params.legendClasses,
+            "description": params.description,
+            "classes": params.classes,
+            "dontWrap": params.dontWrap if params.numberOfFields > 1 else true,
+            "legendIsQuestionTitle": params.legendIsQuestionTitle,
+            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
+            "or": params.mutuallyExclusive.or,
+            "deselectMessage": params.mutuallyExclusive.deselectMessage,
+            "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
+            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective,
+            "error": params.error
+        }) %}
+            {{ fields | safe }}
+        {% endcall %}
+    {% elif params.numberOfFields > 1 %}
+        {% call onsFieldset({
+            "id": params.id,
+            "legend": params.legendOrLabel,
+            "legendClasses": params.legendClasses,
+            "description": params.description,
+            "classes": params.classes,
+            "dontWrap": params.dontWrap,
+            "legendIsQuestionTitle": params.legendIsQuestionTitle,
+            "error": params.error
+        }) %}
+            {{ fields | safe }}
+        {% endcall %}
+    {% else %}
+        {{ fields | safe }}
+    {% endif %}
+{% endmacro %}

package/components/section-navigation/_macro.njk

@@ -1,11 +1,11 @@
 {% macro onsSectionNavigation(params) %}
-    {% set headingLevel = params.headingLevel | int | default(2) %}
-    {% set sectionTitleHeadingLevel =  headingLevel + 1 %}
+    {% set headingLevel = params.headingLevel | default(2) %}
+    {% set sectionTitleHeadingLevel = headingLevel + 1 %}
     <nav class="ons-section-nav{% if params.variants == 'vertical' %} ons-section-nav--vertical{% endif %} {% if params.classes %} {{ params.classes }} {% endif %}"{% if params.id %} id="{{ params.id }}"{% endif %} aria-labelledby="{{ params.hiddenTitleId | default("section-menu-nav-title")}}">
-    <h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
+        <h{{ headingLevel }} class="ons-u-vh" id="{{ params.hiddenTitleId | default("section-menu-nav-title") }}">{{ params.hiddenTitle | default("Pages in this section") }}</h{{ headingLevel }}>
         {% if params.sections %}
             {% for section in params.sections %}
-                {% set sectionItemHeadingLevel =  headingLevel + 2 if section.title else headingLevel + 1 %}
+                {% set sectionItemHeadingLevel = headingLevel + 2 if section.title else headingLevel + 1 %}
                 <div class="ons-section-nav__sub">
                     {% if section.title %}
                         <h{{ sectionTitleHeadingLevel }} class="ons-u-fs-r--b ons-u-mb-s">{{ section.title }}</h{{ sectionTitleHeadingLevel }}>
@@ -18,12 +18,12 @@
                                 {% set isCurrent = false %}
                             {% endif %}
                             <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
-                              {% if isCurrent == true %} 
-                                  <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
-                              {% else %}
-                                  <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
-                              {% endif %}
-                            {% if item.anchors and isCurrent == true %}
+                                {% if isCurrent == true %}
+                                    <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ sectionItemHeadingLevel }}>
+                                {% else %}
+                                    <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
+                                {% endif %}
+                                {% if item.anchors and isCurrent == true %}
                                     <ul class="ons-section-nav__sub-items ons-list ons-list--dashed ons-u-mt-xs ons-u-mb-xs">
                                         {% for anchor in item.anchors %}
                                             <li class="ons-section-nav__item ons-list__item">
@@ -43,7 +43,7 @@
             {% endif %}
             <ul class="ons-section-nav__list">
                 {% for item in params.itemsList %}
-                    {% set sectionItemHeadingLevel =  headingLevel + 2 if params.title else headingLevel + 1 %}
+                    {% set sectionItemHeadingLevel = headingLevel + 2 if params.title else headingLevel + 1 %}
                     {% if (params.currentPath and item.url == params.currentPath) or (params.tabQuery and params.tabQuery == item.title|lower) %}
                         {% set isCurrent = true %}
                     {% else %}
@@ -51,7 +51,7 @@
                     {% endif %}
                     <li class="ons-section-nav__item{% if item.classes %}{{ ' ' + item.classes }}{% endif %}{% if isCurrent == true %} ons-section-nav__item--active{% endif %}">
                         {% if isCurrent == true %} 
-                            <h{{ sectionItemHeadingLevel}} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
+                            <h{{ sectionItemHeadingLevel }} class="ons-section-nav__link ons-section-nav__item-header" href="{{ item.url }}" aria-current="location">{{ item.title }}</h{{ headingLevel + 2 if section.title else headingLevel + 1 }}>
                         {% else %}
                             <a class="ons-section-nav__link" href="{{ item.url }}">{{ item.title }}</a>
                         {% endif %}

package/components/summary/_macro.njk

@@ -1,6 +1,6 @@
 {% macro onsSummary(params) %}
     {% set className = "ons-summary" %}
-    {% set titleSize = "2" %}
+    {% set headingLevel = 2 %}
 
     {% if params.variant == "hub" %}
         {% set variantHub = true %}
@@ -17,12 +17,12 @@
         {% 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 else "" }}">{{ summary.summaryTitle }}</h2>
-                {% set titleSize = "3" %}
+                {% 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 %}
-                        <h{{ titleSize }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ titleSize }}>
+                        <h{{ headingLevel }} class="ons-summary__group-title">{{ group.groupTitle }}</h{{ headingLevel }}>
                     {% endif %}
                     {% if group.rows %}
                         <dl class="ons-summary__items">