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

src/components/error/_macro.njk

@@ -2,19 +2,30 @@
 
 {% macro onsError(params) %}
     {% set content %}
-        <p
-            class="ons-panel__error"
-            {% 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>
+        {% if params.text is not string %}
+            <ul class="ons-list ons-list--bare">
+                {% 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 %}
+            </ul>
+        {% else %}
+            <p class="ons-panel__error"
+                {% 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>
+        {% endif %}
         {{ 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 error messages when the `text` param is set to an array type', () => {
+    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,68 @@
+
+{% 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": "#date-input-error",
+                    "variants": "inPageLink"
+                },
+                {
+                    "text": "Enter a date that is after 1 January 2019",
+                    "url": "#date-input-error",
+                    "variants": "inPageLink"
+                }
+            ]
+        })
+    }}
+{% endcall %}
+
+{{
+    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" 
+            ]
+        }
+    })
+}}