@ons/design-system 67.0.5 → 67.1.0

package/components/access-code/example-access-code-error.njk

@@ -58,28 +58,25 @@ layout: ~
         "classes": "ons-u-mb-xl"
     }) }}
 
-    <h2>If you don’t have an access code</h2>
+    <h2>If you do not have an access code</h2>
     <p>
-        You can <a href="#0">request a new access code</a> to start a new study if you have lost or not received an access code. This can be sent to you by text or post.
+        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>.
+        This can be sent to you by text or post.
     </p>
 
     {% set content %}
-        <p>If you need to answer separately from the people you live with, you can <a href='#0'>request an individual access code</a> to start a separate study.</p>
+        <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
         {% call onsPanel({
                 "type": "warn"
             })
         %}
-            Someone in your household must still complete a study using a household access code
+            Someone in your household must still complete a study using this household access code
         {% endcall %}
     {% endset %}
 
     {% call onsDetails({
             "id": "details-access-code-error",
-            "title": "Need to answer separately from your household?",
-            "button": {
-                "close": "Hide this",
-                "contextSuffix": "content"
-            }
+        "title": "Need to answer separately from your household?"
         })
     %}
         {{ content | safe }}

package/components/access-code/example-access-code.njk

@@ -34,28 +34,25 @@ layout: ~
         "classes": "ons-u-mb-xl"
     }) }}
 
-    <h2>If you don’t have an access code</h2>
+    <h2>If you do not have an access code</h2>
     <p>
-        You can <a href="#0">request a new access code</a> to start a new study if you have lost or not received an access code. This can be sent to you by text or post.
+        If you have lost or not received an access code, you can <a href="#0">request a new access code</a>.
+        This can be sent to you by text or post.
     </p>
 
     {% set content %}
-        <p>If you need to answer separately from the people you live with, you can <a href='#0'>request an individual access code</a> to start a separate study.</p>
+        <p>If you need to answer separately from the people you live with, you can <a href="#0">request an individual access code</a>.</p>
         {% call onsPanel({
                 type: "warn"
             })
         %}
-            Someone in your household must still complete a study using a household access code
+            Someone in your household must still complete a study using this household access code
         {% endcall %}
     {% endset %}
 
     {% call onsDetails({
-            id: "details",
-            title: "Need to answer separately from your household?",
-            button: {
-                "close": "Hide this",
-                "contextSuffix": "content"
-            }
+        "id": "details",
+        "title": "Need to answer separately from your household?"
         })
     %}
         {{ content | safe }}

package/components/date-field-input/_macro.njk

@@ -0,0 +1,86 @@
+{% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %}
+{% from "components/fieldset/_macro.njk" import onsFieldset %}
+{% from "components/input/_macro.njk" import onsInput %}
+{% from "components/error/_macro.njk" import onsError %}
+
+{% macro onsDateFieldInput(params) %}
+    {% set fields %}
+        {% for field in params.fields %}
+            {{
+                onsInput({
+                    "id": field.id,
+                    "classes": field.classes,
+                    "width": field.width,
+                    "type": "number",
+                    "name": field.name,
+                    "value": field.value,
+                    "min": field.min,
+                    "max": field.max,
+                    "maxLength": field.maxLength,
+                    "suffix": field.suffix,
+                    "label": field.label,
+                    "attributes": field.attributes,
+                    "error": field.error,
+                    "fieldId": field.fieldId
+                })
+            }}
+        {% endfor %}
+    {% endset %}
+
+    {% if numberOfFields > 1 %}
+        {% set fields %}
+            <div class="ons-field-group">
+                {{ fields | safe }}
+            </div>
+        {% endset %}
+    {% endif %}
+
+    {% if params.mutuallyExclusive %}
+        {% set mutuallyExclusive = params.mutuallyExclusive | setAttributes({
+            "id": params.id,
+            "legend": params.legendOrLabel,
+            "legendClasses": params.legendClasses,
+            "description": params.description,
+            "error": params.error,
+            "classes": params.classes,
+            "legendIsQuestionTitle": params.legendIsQuestionTitle,
+            "dontWrap": params.dontWrap,
+            "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
+            "or": params.mutuallyExclusive.or,
+            "deselectMessage": params.mutuallyExclusive.deselectMessage,
+            "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
+            "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective
+        }) %}
+
+        {% call onsMutuallyExclusive(mutuallyExclusive) %}
+            <div class="ons-field-group">
+                {{ fields | safe }}
+            </div>
+        {% endcall %}
+    {% elif params.numberOfFields > 1 %}
+        {% call onsFieldset({
+            "id": params.id,
+            "legend": params.legendOrLabel,
+            "classes": params.classes,
+            "description": params.description,
+            "legendClasses": params.legendClasses,
+            "error": params.error,
+            "legendIsQuestionTitle": params.legendIsQuestionTitle,
+            "dontWrap": params.dontWrap
+        }) %}
+            <div class="ons-field-group">
+                {{ fields | safe }}
+            </div>
+        {% endcall %}
+    {% elif params.numberOfFields == 1 %}
+        {% if params.error %}
+            {% call onsError(params.error) %}
+                {{ fields | safe }}
+            {% endcall %}
+        {% else %}
+            {{ fields | safe }}
+        {% endif %}
+    {% else %}
+        {{ fields | safe }}
+    {% endif %}
+{% endmacro %}

package/components/date-input/_macro.njk

@@ -1,12 +1,8 @@
-{% macro onsDateInput(params) %}
-    {% from "components/fieldset/_macro.njk" import onsFieldset %}
-    {% from "components/mutually-exclusive/_macro.njk" import onsMutuallyExclusive %}
-    {% from "components/input/_macro.njk" import onsInput %}
-    {% from "components/error/_macro.njk" import onsError %}
+{% from "components/date-field-input/_macro.njk" import onsDateFieldInput %}
 
+{% macro onsDateInput(params) %}
     {% set exclusiveClass = " ons-js-exclusive-group-item" if params.mutuallyExclusive else "" %}
-
-    {%- set numberOfFields = 0 -%}
+     {%- set numberOfFields = 0 -%}
 
     {%- if params.day -%}
         {%- set numberOfFields = numberOfFields + 1 -%}
@@ -20,114 +16,82 @@
         {%- set numberOfFields = numberOfFields + 1 -%}
     {%- endif -%}
 
-    {% set fields %}
-        {% if params.day %}
-            {{ onsInput({
-                "id": params.id + "-day",
-                "type": "number",
-                "name": params.day.name,
-                "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
-                "width": "2",
-                "min": 1,
-                "max": 31,
-                "maxLength": 2,
-                "attributes": params.day.attributes,
-                "label": {
-                    "text": params.day.label.text if numberOfFields > 1 else params.legendOrLabel,
-                    "description": params.day.label.description if numberOfFields > 1 else params.description,
-                    "id": params.id + "-day-label"
-                },
-                "value": params.day.value
-            }) }}
-        {% endif %}
-
-        {% if params.month %}
-            {{ onsInput({
-                "id": params.id + "-month",
-                "type": "number",
-                "name": params.month.name,
-                "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
-                "width": "2",
-                "min": 1,
-                "max": 12,
-                "maxLength": 2,
-                "attributes": params.month.attributes,
-                "label": {
-                    "text": params.month.label.text if numberOfFields > 1 else params.legendOrLabel,
-                    "description": params.month.label.description if numberOfFields > 1 else params.description,
-                    "id": params.id + "-month-label"
-                },
-                "value": params.month.value
-            }) }}
-        {% endif %}
-
-        {% if params.year %}
-            {{ onsInput({
-                "id": params.id + "-year",
-                "type": "number",
-                "name": params.year.name,
-                "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default(""),
-                "width": "4",
-                "min": 1000,
-                "max": 3000,
-                "maxLength": 4,
-                "attributes": params.year.attributes,
-                "label": {
-                    "text": params.year.label.text if numberOfFields > 1 else params.legendOrLabel,
-                    "description": params.year.label.description if numberOfFields > 1 else params.description,
-                    "id": params.id + "-year-label"
-                },
-                "value": params.year.value
-            }) }}
-        {% endif %}
-    {% endset %}
-
-    {% if numberOfFields > 1 %}
-        {% set fields %}
-            <div class="ons-field-group">
-                {{ fields | safe }}
-            </div>
-        {% endset %}
+    {% set fields = [] %}
+    {% if params.day %}
+        {% set dayField = {
+            "id": params.id + "-day",
+            "label": {
+                 "text": params.day.label.text if numberOfFields > 1 else params.legendOrLabel,
+                 "description": params.day.label.description if numberOfFields > 1 else params.description,
+                  "id": params.id + "-day-label"
+            },
+            "name": params.day.name,
+            "width": "2",
+            "min": 1,
+            "max": 31,
+            "maxLength": 2,
+            "attributes": params.day.attributes,
+            "value": params.day.value,
+            "classes": (" ons-input--error" if (params.error and params.day.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default("")
+        } %}
+        {% set fields = (fields.push(dayField), fields) %}
     {% 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 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 numberOfFields == 1 %}
-        {% if params.error %}
-            {% call onsError(params.error) %}
-                {{ fields | safe }}
-            {% endcall %}
-        {% else %}
-            {{ fields | safe }}
-        {% endif %}
-    {% else %}
-        {% 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 %}
+    {% if params.month %}
+        {% set monthField = {
+            "id": params.id + "-month",
+            "label": { 
+                "text": params.month.label.text if numberOfFields > 1 else params.legendOrLabel,
+                "description": params.month.label.description if numberOfFields > 1 else params.description,
+                "id": params.id + "-month-label"
+            },
+            "name": params.month.name,
+            "width": "2",
+            "min": 1,
+            "max": 12,
+            "maxLength": 2,
+            "attributes": params.month.attributes,
+            "value": params.month.value,
+            "classes": (" ons-input--error" if (params.error and params.month.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default("")
+        } %}
+        {% set fields = (fields.push(monthField), fields) %}
     {% endif %}
+    {% if params.year %}
+        {% set yearField = {
+            "id": params.id + "-year",
+            "label": { 
+                "text": params.year.label.text if numberOfFields > 1 else params.legendOrLabel,
+                "description": params.year.label.description if numberOfFields > 1 else params.description,
+                "id": params.id + "-year-label"
+            }, 
+            "name": params.year.name,
+            "width": "4",
+            "min": 1000,
+            "max": 3000,
+            "maxLength": 4,
+            "attributes": params.year.attributes,
+            "value": params.year.value, 
+            "classes": (" ons-input--error" if (params.error and params.year.error) or (params.error and not params.day.error and not params.month.error and not params.year.error) else "") + exclusiveClass | default("")
+        } %}
+        {% set fields = (fields.push(yearField), fields) %}
+    {% endif %}
+
+    {{ onsDateFieldInput({
+        "id": params.id,
+        "legendOrLabel": params.legendOrLabel,
+        "description": params.description,
+        "mutuallyExclusive": params.mutuallyExclusive,
+        "fields": fields,
+        "numberOfFields": numberOfFields,
+        "error": params.error,
+        "legend": params.legendOrLabel,
+        "dontWrap": params.dontWrap,
+        "legendClasses": params.legendClasses,
+        "legendIsQuestionTitle": params.legendIsQuestionTitle,
+        "classes": params.classes,
+        "exclusiveOptions": params.mutuallyExclusive.exclusiveOptions,
+        "or": params.mutuallyExclusive.or,
+        "deselectMessage": params.mutuallyExclusive.deselectMessage,
+        "deselectGroupAdjective": params.mutuallyExclusive.deselectGroupAdjective,
+        "deselectExclusiveOptionAdjective": params.mutuallyExclusive.deselectExclusiveOptionAdjective
+    }) }}
 {% endmacro %}

package/components/{metadata/_metadata.scss → description-list/_description-list.scss}

@@ -1,5 +1,5 @@
-.ons-metadata {
-  &__list {
+.ons-description-list {
+  &__items {
     margin: 0 0 2rem;
   }
 

package/components/description-list/_macro.njk

@@ -0,0 +1,14 @@
+{% macro onsDescriptionList(params) %}
+  <dl class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-cf{{ (' ' + params.classes) if params.classes }}"{% if params.id %} id="{{ params.id }}" {% endif %}{% if params.descriptionListLabel %} title="{{ params.descriptionListLabel }}" aria-label="{{ params.descriptionListLabel }}"{% endif %}>
+    {% for item in params.itemsList %}
+      {% if item.term | length %}
+          <dt class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
+      {% endif %}
+        {% for descriptionItem in item.descriptions %}
+          {% if descriptionItem.description | length %}
+            <dd {% if descriptionItem.id %}id="{{ descriptionItem.id }}" {% endif %}class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@m">{{ descriptionItem.description }}</dd>
+          {% endif %}
+        {% endfor %}
+    {% endfor %}
+  </dl>
+{% endmacro %}

package/components/{metadata → description-list}/_macro.spec.js

@@ -5,10 +5,10 @@ import * as cheerio from 'cheerio';
 import axe from '../../tests/helpers/axe';
 import { renderComponent } from '../../tests/helpers/rendering';
 
-const EXAMPLE_METADATA_FULL = {
+const EXAMPLE_DESCRIPTION_LIST_FULL = {
   id: 'example-id',
   classes: 'ons-u-mb-no',
-  metadataLabel: 'This is an example of the metadata component',
+  descriptionListLabel: 'This is an example of the description list component',
   termCol: 2,
   descriptionCol: 10,
   itemsList: [
@@ -37,7 +37,7 @@ const EXAMPLE_METADATA_FULL = {
   ],
 };
 
-const EXAMPLE_METADATA_MINIMAL = {
+const EXAMPLE_DESCRIPTION_LIST_MINIMAL = {
   itemsList: [
     {
       term: 'Survey:',
@@ -61,16 +61,16 @@ const EXAMPLE_METADATA_MINIMAL = {
   ],
 };
 
-describe('macro: metadata', () => {
+describe('macro: description-list', () => {
   it('passes jest-axe checks when all parameters are provided', async () => {
-    const $ = cheerio.load(renderComponent('metadata', EXAMPLE_METADATA_FULL));
+    const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL));
 
     const results = await axe($.html());
     expect(results).toHaveNoViolations();
   });
 
   it('passes jest-axe checks when minimal parameters are provided', async () => {
-    const $ = cheerio.load(renderComponent('metadata', EXAMPLE_METADATA_MINIMAL));
+    const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_MINIMAL));
 
     const results = await axe($.html());
     expect(results).toHaveNoViolations();
@@ -78,8 +78,8 @@ describe('macro: metadata', () => {
 
   it('has the provided `id` attribute', () => {
     const $ = cheerio.load(
-      renderComponent('metadata', {
-        ...EXAMPLE_METADATA_MINIMAL,
+      renderComponent('description-list', {
+        ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
         id: 'example-id',
       }),
     );
@@ -89,32 +89,32 @@ describe('macro: metadata', () => {
 
   it('has additionally provided style classes', () => {
     const $ = cheerio.load(
-      renderComponent('metadata', {
-        ...EXAMPLE_METADATA_MINIMAL,
+      renderComponent('description-list', {
+        ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
         classes: 'extra-class another-extra-class',
       }),
     );
 
-    expect($('.ons-metadata').hasClass('extra-class')).toBe(true);
-    expect($('.ons-metadata').hasClass('another-extra-class')).toBe(true);
+    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 `metadataLabel` is provided', () => {
+  it('outputs `title` and `aria-label` attributes when `descriptionListLabel` is provided', () => {
     const $ = cheerio.load(
-      renderComponent('metadata', {
-        ...EXAMPLE_METADATA_MINIMAL,
-        metadataLabel: 'This is an example of the metadata component',
+      renderComponent('description-list', {
+        ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
+        descriptionListLabel: 'This is an example of the description list component',
       }),
     );
 
-    expect($('.ons-metadata').attr('title')).toBe('This is an example of the metadata component');
-    expect($('.ons-metadata').attr('aria-label')).toBe('This is an example of the metadata 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');
   });
 
   it('outputs list items as expected', () => {
-    const $ = cheerio.load(renderComponent('metadata', EXAMPLE_METADATA_FULL));
+    const $ = cheerio.load(renderComponent('description-list', EXAMPLE_DESCRIPTION_LIST_FULL));
 
-    const $listElements = $('.ons-metadata__term, .ons-metadata__value');
+    const $listElements = $('.ons-description-list__term, .ons-description-list__value');
 
     expect($listElements[0].tagName).toBe('dt');
     expect($($listElements[0]).text()).toBe('Survey:');
@@ -140,13 +140,13 @@ describe('macro: metadata', () => {
     [4, 'ons-col-4\\@m'],
   ])('applies class for the provided `termCol` (%i -> %s)', (termCol, expectedClass) => {
     const $ = cheerio.load(
-      renderComponent('metadata', {
-        ...EXAMPLE_METADATA_MINIMAL,
+      renderComponent('description-list', {
+        ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
         termCol,
       }),
     );
 
-    const $termElements = $(`.ons-metadata__term.${expectedClass}`);
+    const $termElements = $(`.ons-description-list__term.${expectedClass}`);
     expect($termElements.length).toBe(2);
   });
 
@@ -155,13 +155,13 @@ describe('macro: metadata', () => {
     [4, 'ons-col-4\\@m'],
   ])('applies class for the provided `descriptionCol` (%i -> %s)', (descriptionCol, expectedClass) => {
     const $ = cheerio.load(
-      renderComponent('metadata', {
-        ...EXAMPLE_METADATA_MINIMAL,
+      renderComponent('description-list', {
+        ...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
         descriptionCol,
       }),
     );
 
-    const $valueElements = $(`.ons-metadata__value.${expectedClass}`);
+    const $valueElements = $(`.ons-description-list__value.${expectedClass}`);
     expect($valueElements.length).toBe(3);
   });
 });

package/components/{metadata/example-metadata.njk → description-list/example-description-list.njk}

@@ -1,8 +1,8 @@
-{% from "components/metadata/_macro.njk" import onsMetadata %}
+{% from "components/description-list/_macro.njk" import onsDescriptionList %}
 {{
-    onsMetadata({
+    onsDescriptionList({
         "classes": "ons-u-mb-no",
-        "metadataLabel": "Information about this business and its survey requirements",
+        "descriptionListLabel": "Information about this business and its survey requirements",
         "termCol": "2",
         "descriptionCol": "10",
         "itemsList": [