2753 error panel needs extending to accept two errors for one input

src/components/error/_macro-options.md

@@ -0,0 +1,5 @@
+| Name       | Type                      | Required | Description                                                        |
+| ---------- | ------------------------- | -------- | ------------------------------------------------------------------ |
+| id         | string                    | true     | The HTML id attribute that the error summary link can anchor to    |
+| text       | string or array`<string>` | true     | The text describing the error                                      |
+| attributes | object                    | false    | HTML attributes (for example, data attributes) to add to the field |

src/components/error/_macro.njk

@@ -2,19 +2,30 @@
 
 {% macro onsError(params) %}
     {% set content %}
-        <p
-            class="ons-panel__error"
+    <ul class="ons-list ons-list--bare">
+        {% if params.text is not string %}
+            {% for item in params.text %}
+            <li class="ons-panel__error ons-list__item"
+                {% 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 %}
+            >
+                <strong>{{ item }}</strong>
+            </li>
+            {% endfor %}
+        {% else %}
+        <li class="ons-panel__error ons-list__item"
             {% 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 %}
         >
             <strong>{{ params.text }}</strong>
-        </p>
+        </li>
+        {% endif %}
+    </ul>
         {{ caller() }}
     {% endset %}
 
     {% call onsPanel({
         "type": "error",
         "id": params.id
     }) %}
-       {{ content | safe }}
+    {{ content | safe }}
     {% endcall %}
-{% endmacro %}
+{% endmacro %} 

src/components/error/_macro.spec.js

@@ -36,11 +36,23 @@ describe('macro: error', () => {
       ),
     );
 
-    expect(
-      $('.ons-panel__error')
-        .text()
-        .trim(),
-    ).toBe('Example error text.');
+    expect($('.ons-panel__error').text().trim()).toBe('Example error text.');
+  });
+
+  it('has the provided `text` if an array was provided', () => {
+    const $ = cheerio.load(
+      renderComponent(
+        'error',
+        {
+          text: ['Example error text.', 'Example error text 2.'],
+          id: 'example-error',
+        },
+        FAKE_NESTED_CONTENT,
+      ),
+    );
+
+    expect($('.ons-panel__error').text().trim()).toContain('Example error text.');
+    expect($('.ons-panel__error').text().trim()).toContain('Example error text 2.');
   });
 
   it('applies the provided `attributes` to the error content paragraph', () => {

src/patterns/correct-errors/example-error-proto-multiple-error-per-input.njk

@@ -0,0 +1,96 @@
+
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+{% from "components/panel/_macro.njk" import onsPanel %}
+{% from "components/list/_macro.njk" import onsList %}
+
+{% call
+        onsPanel({
+            title: "There is a problem with this page",
+            type: "error"
+        })
+    %}
+
+        {{
+            onsList({
+                "element": "ol",
+                "itemsList": [
+                    {
+                        "text": "Enter a number between 1 to 12",
+                        "url": "#month-error",
+                        "variants": "inPageLink"
+                    },
+                    {
+                        "text": "Enter a date that is after 1 January 2019",
+                        "url": "#year-error",
+                        "variants": "inPageLink"
+                    }
+                ]
+            })
+        }}
+    {% endcall %}
+{{
+    onsDateInput({
+        "id": "period-from-date",
+        "legendOrLabel": "Period from:",
+        "description": "For example, 31 3 2019",
+        "day": {
+            "label": {
+                "text": "Day"
+            },
+            "name": "day",
+            "value": "31"
+        },
+        "month": {
+            "label": {
+                "text": "Month"
+            },
+            "name": "month",
+            "value": "13"
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year",
+            "value": "2018"
+        }
+    })
+}}
+
+{{
+    onsDateInput({
+        "id": "period-to-date",
+        "legendOrLabel": "Period to:",
+        "description": "For example, 31 3 2020",
+        "day": {
+            "label": {
+                "text": "Day"
+            },
+            "name": "day",
+            "value": "31"
+        },
+        "month": {
+            "label": {
+                "text": "Month"
+            },
+            "name": "month",
+            "value": "13",
+            "error": true
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year",
+            "value": "2018",
+            "error": true
+        },
+        "error": {
+            "id": "date-input-error",
+            "text": [
+                "Enter a number between 1 to 12",
+                "Enter a date that is after 1 January 2019" 
+            ]
+        }
+    })
+}}