@ons/design-system 62.1.1 → 62.2.1

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/components/summary/_macro.njk

@@ -12,7 +12,7 @@
     <div class="{{ className }}">
         {% for summary in params.summaries %}
             {% if summary.summaryTitle %}
-                <h2 class="ons-summary__title ons-u-mb-m">{{ summary.summaryTitle }}</h2>
+                <h2 class="ons-summary__title ons-u-mb-m{{ " ons-u-mt-m" if loop.index > 1 else "" }}">{{ summary.summaryTitle }}</h2>
                 {% set titleSize = "3" %}
             {% endif %}
             {% for group in summary.groups %}

package/components/tabs/example-tabs.njk

@@ -7,7 +7,8 @@
             {
                 "id": "ukis",
                 "title": 'UKIS',
-                "content": '<h3>Aim of this survey</h3>
+                "content": '<h2 class="ons-u-d-no@m">UKIS</h2>
+                <h3>Aim of this survey</h3>
                 <p class="ons-u-fs-r">The aim of the UK Innovation Survey (UKIS) is to collect data from businesses about various aspects of their innovation related activities. Using this data we can measure the level, types and trends in innovation.</p>
                 <h3>How we’ll use this data</h3>
                 <p class="ons-u-fs-r">The UKIS data is a major source of evidence to inform government policy. It is used to promote innovation activities among businesses to boost economic growth. It is an important contribution to the European-wide Community Innovation Survey (CIS). The CIS is used for international benchmarking and comparison purposes.</p>
@@ -16,14 +17,16 @@
             {
                 "id": "vacancy-survey",
                 "title": 'Vacancy survey',
-                "content": '<h3>Purpose</h3>
+                "content": '<h2 class="ons-u-d-no@m">Vacancy survey</h2>
+                <h3>Purpose</h3>
                 <p class="ons-u-fs-r">The Vacancy Survey is a regular survey of businesses, which provides an accurate and comprehensive measure of the total number of vacancies across the economy and fills a gap in the information available regarding the demand for labour. Before the Vacancy Survey was introduced, the only information available nationally about vacancies was from records of vacancies notified to Job Centres by employers. This provided only a partial picture, possibly less than half of all vacancies, because employers are under no obligation to notify vacancies to Job Centres. This business based survey has a more complete coverage and is included in the monthly ONS Labour Market Statistical Bulletin.</p>
                 <p>You can <a href="https://www.ons.gov.uk/surveys/informationforbusinesses/businesssurveys/vacancysurvey">find more information on the Vacancy Survey on the ONS website</a>.</p>'
             },
             {
                 "id": "monthly-business-survey",
                 "title": 'Monthly Business Survey',
-                "content": '<h3>Aim of this survey</h3>
+                "content": '<h2 class="ons-u-d-no@m">Monthly Business Survey</h2>
+                <h3>Aim of this survey</h3>
                 <p class="ons-u-fs-r">The Monthly Business Survey (MBS) collects monthly information on employment of businesses in Great Britain. Your response contributes to Labour Market Statistics.</p>
                 <h4>What you need to know</h4>
                 <p class="ons-u-fs-r">To complete the survey, you will need the following information to answer the survey questions:</p>

package/package.json

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