@ons/design-system 62.1.0 → 62.2.0

package/README.md

@@ -81,6 +81,16 @@ To run all axe tests:
 yarn test --testNamePattern="axe"
 ```
 
+### Snapshot test for base page template
+
+There is a snapshot test of the base page template that runs alongside the component tests. The snapshot will need to be updated if the base page template is changed.
+
+To update the snapshot:
+
+```bash
+yarn test --testNamePattern="base page template" -u
+```
+
 ### Run tests locally in watch mode
 
 This will watch for changed files based on git uncommitted files.

package/components/question/_macro.njk

@@ -22,7 +22,9 @@
             {% call onsDetails({
                 "id": params.definition.id,
                 "classes": 'ons-u-mb-m',
-                "title": params.definition.title
+                "title": params.definition.title,
+                "headingAttributes": params.definition.headingAttributes,
+                "contentAttributes": params.definition.contentAttributes
             }) %}
                 {% if params.definition.content %}
                     {{ params.definition.content | safe }}
@@ -35,7 +37,9 @@
         {% set questionGuidance %}
             {% from "components/panel/_macro.njk" import onsPanel %}
             {% call onsPanel({
-                "classes": "ons-question-guidance ons-u-mb-m"
+                "id": params.guidance.id,
+                "classes": "ons-question-guidance ons-u-mb-m",
+                "attributes": params.guidance.attributes
             }) %}
                 {% if params.guidance.content %}
                     {{ params.guidance.content | safe }}
@@ -65,6 +69,30 @@
         class="ons-question ons-u-mb-l{% if params.classes %} {{ params.classes }}{% endif %}"
         {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
     >
+        {% set additionalContent %}
+            {% if params.warning %}
+                {% from "components/panel/_macro.njk" import onsPanel %}
+                {% call onsPanel({
+                    "id": params.warning.id,
+                    "type": "warn"
+                }) %}
+                    <p>{{ params.warning.body }}</p>
+                {% endcall %}
+            {% endif %}
+
+            {% if params.instruction %}
+                {{- instHtml | safe -}}
+            {% endif %}
+
+            {% if params.definition %}
+                {{- questionDefinition | safe -}}
+            {% endif %}
+
+            {% if params.guidance %}
+                {{- questionGuidance | safe -}}
+            {% endif %}
+        {% endset %}
+
         {% if params.legendIsQuestionTitle %}
             {% from "components/fieldset/_macro.njk" import onsFieldset %}
 
@@ -78,6 +106,7 @@
                     "legendClasses": params.legendClasses,
                     "legendTitleClasses": params.legendTitleClasses
                 }) %}
+                    {{- additionalContent | safe -}}
                     {{ content }}
                 {% endcall %}
             </div>
@@ -91,17 +120,7 @@
                 {{- descHtml | safe -}}
             {% endif %}
 
-            {% if params.instruction %}
-                {{- instHtml | safe -}}
-            {% endif %}
-
-            {% if params.definition %}
-                {{- questionDefinition | safe -}}
-            {% endif %}
-
-            {% if params.guidance %}
-                {{- questionGuidance | safe -}}
-            {% endif %}
+            {{- additionalContent | safe -}}
 
             <div class="ons-question__answer ons-u-mb-m">
                 {{ caller() if caller }}
@@ -113,7 +132,9 @@
             {% call onsDetails({
                 "id": params.justification.id,
                 "classes": 'ons-u-mb-m',
-                "title": params.justification.title | default('Why we ask this question')
+                "title": params.justification.title | default('Why we ask this question'),
+                "headingAttributes": params.justification.headingAttributes,
+                "contentAttributes": params.justification.contentAttributes
             }) %}
                 {{ params.justification.content | safe }}
             {% endcall %}

package/components/question/_macro.spec.js

@@ -11,6 +11,14 @@ const EXAMPLE_QUESTION_BASIC = {
   description: 'Question description',
 };
 
+const EXAMPLE_QUESTION_WARNING = {
+  ...EXAMPLE_QUESTION_BASIC,
+  warning: {
+    id: 'warning-id',
+    body: 'Warning content',
+  },
+};
+
 const EXAMPLE_QUESTION_DEFINITION = {
   ...EXAMPLE_QUESTION_BASIC,
   definition: {
@@ -70,6 +78,7 @@ const EXAMPLE_QUESTION_DESCRIPTION_FIRST = {
 describe('macro: question', () => {
   describe.each([
     ['with basic parameters', EXAMPLE_QUESTION_BASIC],
+    ['with warning', EXAMPLE_QUESTION_WARNING],
     ['with definition', EXAMPLE_QUESTION_DEFINITION],
     ['with guidance', EXAMPLE_QUESTION_GUIDANCE],
     ['with justification', EXAMPLE_QUESTION_JUSTIFICATION],
@@ -80,6 +89,7 @@ describe('macro: question', () => {
     [
       'with all options combined',
       {
+        ...EXAMPLE_QUESTION_WARNING,
         ...EXAMPLE_QUESTION_DEFINITION,
         ...EXAMPLE_QUESTION_GUIDANCE,
         ...EXAMPLE_QUESTION_JUSTIFICATION,
@@ -162,6 +172,24 @@ describe('macro: question', () => {
     });
   });
 
+  describe('mode: with warning', () => {
+    it('outputs the expected panel', () => {
+      const faker = templateFaker();
+      const panelSpy = faker.spy('panel');
+
+      faker.renderComponent('question', EXAMPLE_QUESTION_WARNING);
+
+      expect(panelSpy.occurrences[0]).toHaveProperty('id', 'warning-id');
+      expect(panelSpy.occurrences[0]).toHaveProperty('type', 'warn');
+    });
+
+    it('outputs the expected panel content', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_WARNING));
+
+      expect($('.ons-panel__body > p').text()).toBe('Warning content');
+    });
+  });
+
   describe('mode: with definition', () => {
     it('outputs the expected details', () => {
       const faker = templateFaker();

package/components/question/example-question-ccs.njk

@@ -4,9 +4,7 @@ layout: ~
 ---
 {% extends "layout/_template.njk" %}
 {% from "components/question/_macro.njk" import onsQuestion %}
-{% from "components/details/_macro.njk" import onsDetails %}
 {% from "components/input/_macro.njk" import onsInput %}
-{% from "components/button/_macro.njk" import onsButton %}
 
 {% set pageConfig = {
     "header": {

package/components/question/example-question-fieldset.njk

@@ -4,10 +4,7 @@ layout: ~
 ---
 {% extends "layout/_template.njk" %}
 {% from "components/question/_macro.njk" import onsQuestion %}
-{% from "components/details/_macro.njk" import onsDetails %}
-{% from "components/panel/_macro.njk" import onsPanel %}
 {% from "components/radios/_macro.njk" import onsRadios %}
-{% from "components/button/_macro.njk" import onsButton %}
 
 {% set pageConfig = {
     "header": {
@@ -65,34 +62,34 @@ layout: ~
     }) %}
 
         {{ onsRadios({
-        "id": "number-of-employees",
-        "name": "number-of-employees",
-        "legend": questionTitle,
-        "legendClasses": "ons-u-vh",
-        "radios": [
-            {
-                "id": "number-of-employees-1-9",
-                "label": {
-                    "text": "1 – 9 employees"
-                },
-                "value": "1-9"
-            },
-            {
-                "id": "number-of-employees-10-49",
-                "label": {
-                    "text": "10 – 49 employees"
+            "id": "number-of-employees",
+            "name": "number-of-employees",
+            "legend": questionTitle,
+            "legendClasses": "ons-u-vh",
+            "radios": [
+                {
+                    "id": "number-of-employees-1-9",
+                    "label": {
+                        "text": "1 – 9 employees"
+                    },
+                    "value": "1-9"
                 },
-                "value": "10-49"
-            },
-            {
-                "id": "number-of-employees-50-100",
-                "label": {
-                    "text": "50 – 100+ employees",
-                    "description": "Include multi-corporations"
+                {
+                    "id": "number-of-employees-10-49",
+                    "label": {
+                        "text": "10 – 49 employees"
+                    },
+                    "value": "10-49"
                 },
-                "value": "50-100"
-            }
-        ]
+                {
+                    "id": "number-of-employees-50-100",
+                    "label": {
+                        "text": "50 – 100+ employees",
+                        "description": "Include multi-corporations"
+                    },
+                    "value": "50-100"
+                }
+            ]
         }) }}
 
     {% endcall %}

package/components/question/example-question-interviewer-note.njk

@@ -6,9 +6,6 @@ layout: ~
 
 {% extends "layout/_template.njk" %}
 {% from "components/question/_macro.njk" import onsQuestion %}
-{% from "components/details/_macro.njk" import onsDetails %}
-{% from "components/input/_macro.njk" import onsInput %}
-{% from "components/button/_macro.njk" import onsButton %}
 
 {% set pageConfig = {
     "header": {

package/components/question/example-question-no-fieldset.njk

@@ -4,9 +4,7 @@ layout: ~
 ---
 {% extends "layout/_template.njk" %}
 {% from "components/question/_macro.njk" import onsQuestion %}
-{% from "components/details/_macro.njk" import onsDetails %}
 {% from "components/input/_macro.njk" import onsInput %}
-{% from "components/button/_macro.njk" import onsButton %}
 
 {% set pageConfig = {
     "header": {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ons/design-system",
   "description": "ONS Design System built CSS, JS, and Nunjucks templates",
-  "version": "62.1.0",
+  "version": "62.2.0",
   "main": "index.js",
   "license": "MIT",
   "author": {