@ons/design-system 64.0.0 → 65.1.0

package/components/button/_macro.spec.js

@@ -200,7 +200,7 @@ describe('macro: button', () => {
       }),
     );
 
-    expect($('.ons-svg-icon + .ons-btn__text').text()).toBe('Click me!');
+    expect($('.ons-icon + .ons-btn__text').text()).toBe('Click me!');
   });
 
   it('has custom icon after button text', () => {
@@ -213,7 +213,7 @@ describe('macro: button', () => {
     );
 
     expect(
-      $('.ons-btn__text + .ons-svg-icon')
+      $('.ons-btn__text + .ons-icon')
         .prev()
         .text(),
     ).toBe('Click me!');

package/components/call-to-action/_macro.njk

@@ -14,7 +14,7 @@
                         "text": params.button.text,
                         "url": params.button.url,
                         "variants": "small"
-                    })}}
+                    }) }}
                 </div>
             </div>
         </div>

package/components/card/_card.scss

@@ -1,6 +1,20 @@
 .ons-card {
   margin: 0 0 2rem;
   width: 100%;
+
+  &__link {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__image--reorder {
+    order: 1;
+  }
+
+  &__title--reorder {
+    order: 2;
+  }
+
   &__link:hover {
     text-decoration-thickness: 3px;
   }

package/components/card/_macro.njk

@@ -4,21 +4,20 @@
 
   {% set titleSize = params.titleSize | default('2') %}
 
-  <div class="ons-card" aria-describedBy="{{ params.textId }}">
+  <div class="ons-card">
 
     {%- if params.image -%}
       {%- if params.url -%}
-        <a href="{{ params.url }}" class="ons-card__link ons-u-db">
+        <a href="{{ params.url }}" class="ons-card__link">
       {%- endif -%}
+          <h{{ titleSize }} class="ons-card__title ons-card__title--reorder {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
+              {{ params.title }}
+          </h{{ titleSize }}>
           {% if params.image.smallSrc %}
-            <img class="ons-card__image ons-u-mb-s" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
+            <img class="ons-card__image ons-u-mb-s ons-card__image--reorder" height="200" width="303"{% if params.image.largeSrc %} srcset="{{ params.image.smallSrc }} 1x, {{ params.image.largeSrc }} 2x"{% endif %} src="{{ params.image.smallSrc }}" alt="{{ params.image.alt }}" loading="lazy">
           {% elif params.image == true or params.image.placeholderURL %}
-            <img class="ons-card__image ons-u-mb-s" height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
+            <img class="ons-card__image ons-u-mb-s ons-card__image--reorder" height="100" width="303" srcset="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png 1x, {{ params.image.placeholderURL if params.image.placeholderURL }}/img/large/placeholder-card.png 2x" src="{{ params.image.placeholderURL if params.image.placeholderURL }}/img/small/placeholder-card.png" alt="" loading="lazy">
           {% endif %}
-
-          <h{{ titleSize }} class="ons-card__title {{ params.titleClasses | default('ons-u-fs-m')}}" id="{{ params.id }}">
-            {{ params.title }}
-          </h{{ titleSize }}>
       {%- if params.url -%}
         </a>
       {%- endif -%}

package/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk

@@ -0,0 +1,88 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+    {{
+        onsCheckboxes({
+            "legend": "Content type",
+            "checkboxesLabel": "Show only:",
+            "borderless": true,
+            "name": "dietary",
+            "checkboxes": [
+                {
+                    "id": "data",
+                    "label": {
+                        "text": "Data (309)"
+                    },
+                    "value": "data",
+                    "checked": true,
+                    "other": {
+                        "otherType": "checkboxes",
+                        "selectAllChildren": true,
+                        "legend": "Data type",
+                        "legendClasses": "ons-u-vh",
+                        "name": "name",
+                        "checkboxes": [
+                            {
+                                "id": "datasets",
+                                "label": {
+                                    "text": "Datasets (100)"
+                                },
+                                "value": "datasets"
+                            },
+                            {
+                                "id": "timeseries",
+                                "label": {
+                                    "text": "Timeseries (20)"
+                                },
+                                "value": "timeseries"
+                            },
+                            {
+                                "id": "requested",
+                                "label": {
+                                    "text": "User requested data (17)"
+                                },
+                                "value": "requested"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "id": "publications",
+                    "label": {
+                        "text": "Publications (137)"
+                    },
+                    "value": "publications",
+                    "checked": true,
+                    "other": {
+                        "otherType": "checkboxes",
+                        "selectAllChildren": true,
+                        "legend": "Publication type",
+                        "legendClasses": "ons-u-vh",
+                        "name": "name",
+                        "checkboxes": [
+                            {
+                                "id": "press-release",
+                                "label": {
+                                    "text": "Press release (100)"
+                                },
+                                "value": "pressrelease"
+                            },
+                            {
+                                "id": "bulletin",
+                                "label": {
+                                    "text": "Bulletin (20)"
+                                },
+                                "value": "bulletin"
+                            }
+                        ]
+                    }
+                },
+                {
+                    "id": "areas",
+                    "label": {
+                        "text": "Areas (0)"
+                    },
+                    "value": "areas"
+                }       
+            ]
+        })
+    }}

package/components/checkboxes/example-checkboxes-with-revealed-radios-expanded.njk

@@ -0,0 +1,70 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{{
+    onsCheckboxes({
+        "checkboxesLabel": "Select all that apply",
+        "legend": "How would you like us to contact you?",
+        "name": "contact",
+        "borderless": true,
+        "checkboxes": [
+            {
+                "id": "post",
+                "label": {
+                    "text": "By post"
+                },
+                "value": "post"
+            },
+            {
+                "id": "email",
+                "label": {
+                    "text": "By email"
+                },
+                "value": "email"
+            },
+            {
+                "id": "phone",
+                "label": {
+                    "text": "By phone"
+                },
+                "value": "phone",
+                "checked": true,
+                "other": {
+                    "otherType": "radios",
+                    "id": "phone-time",
+                    "name": "phone-time",
+                    "legend": "Choose preferred time of day",
+                    "radios": [
+                        {
+                            "value": "anytime",
+                            "id": "anytime",
+                            "label": {
+                                "text": "Any time of day"
+                            }
+                        },
+                        {
+                            "value": "morning",
+                            "id": "morning",
+                            "label": {
+                                "text": "Morning"
+                            }
+                        },
+                        {
+                            "value": "afternoon",
+                            "id": "afternoon",
+                            "label": {
+                                "text": "Afternoon"
+                            }
+                        },
+                        {
+                            "value": "evening",
+                            "id": "evening",
+                            "label": {
+                                "text": "Evening"
+                            }
+                        }
+                    ]
+                }
+            }
+        ]
+    })
+}}

package/components/checkboxes/example-checkboxes-with-revealed-select-expanded.njk

@@ -0,0 +1,72 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{% call onsQuestion({
+    "title": "How would you like us to contact you?",
+    "legendIsQuestionTitle": true,
+    "classes": "ons-u-mt-no"
+}) %}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "name": "contact",
+            "checkboxes": [
+                {
+                    "id": "post",
+                    "label": {
+                        "text": "By post"
+                    },
+                    "value": "post"
+                },
+                {
+                    "id": "email",
+                    "label": {
+                        "text": "By email"
+                    },
+                    "value": "email"
+                },
+                {
+                    "id": "phone",
+                    "label": {
+                        "text": "By phone"
+                    },
+                    "value": "phone",
+                    "checked": true,
+                    "other": {
+                        "otherType": "select",
+                        "id": "phone-time",
+                        "name": "phone-time",
+                        "label": {
+                            "text": "Choose preferred time of day"
+                        },
+                        "options": [
+                            {
+                                "value": "",
+                                "text": "Select an option",
+                                "disabled": true,
+                                "selected": true
+                            },
+                            {
+                                "value": "anytime",
+                                "text": "Anytime of day"
+                            },
+                            {
+                                "value": "morning",
+                                "text": "Morning"
+                            },
+                            {
+                                "value": "afternoon",
+                                "text": "Afternoon"
+                            },
+                            {
+                                "value": "evening",
+                                "text": "Evening"
+                            }
+                        ]
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/checkboxes/example-checkboxes-with-revealed-text-input-expanded.njk

@@ -0,0 +1,60 @@
+{% from "components/question/_macro.njk" import onsQuestion %}
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{% call onsQuestion({
+    "title": "Do you have any dietary requirements?",
+    "legendIsQuestionTitle": true,
+    "classes": "ons-u-mt-no"
+}) %}
+    {{
+        onsCheckboxes({
+            "checkboxesLabel": "Select all that apply",
+            "dontWrap": true,
+            "checkboxes": [
+                {
+                    "id": "gluten-free",
+                    "label": {
+                        "text": "Gluten free"
+                    },
+                    "value": "gluten-free"
+                },
+                {
+                    "id": "lactose-intolerant",
+                    "label": {
+                        "text": "Lactose intolerant"
+                    },
+                    "value": "lactose-intolerant"
+                },
+                {
+                    "id": "vegan",
+                    "label": {
+                        "text": "Vegan"
+                    },
+                    "value": "vegan"
+                },
+                {
+                    "id": "vegetarian",
+                    "label": {
+                        "text": "Vegetarian"
+                    },
+                    "value": "vegetarian"
+                },
+                {
+                    "id": "other-checkbox",
+                    "label": {
+                        "text": "Other"
+                    },
+                    "value": "other",
+                    "checked": true,
+                    "other": {
+                        "id": "other-textbox",
+                        "name": "other-answer",
+                        "label": {
+                            "text": "Enter dietary requirements"
+                        }
+                    }
+                }
+            ]
+        })
+    }}
+{% endcall %}

package/components/content-pagination/_content-pagination.scss

@@ -37,7 +37,7 @@
   }
 
   &__link-text {
-    @extend .ons-u-fs-m;
+    @extend .ons-u-fs-r--b;
 
     margin: 0 0 0 0.5rem;
     vertical-align: middle;

package/components/date-input/_macro.njk

@@ -26,7 +26,7 @@
                 "id": params.id + "-day",
                 "type": "number",
                 "name": params.day.name,
-                "classes": (" ons-input--error" if params.error else "") + exclusiveClass | default(""),
+                "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,
@@ -46,7 +46,7 @@
                 "id": params.id + "-month",
                 "type": "number",
                 "name": params.month.name,
-                "classes": (" ons-input--error" if params.error else "") + exclusiveClass | default(""),
+                "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,
@@ -66,7 +66,7 @@
                 "id": params.id + "-year",
                 "type": "number",
                 "name": params.year.name,
-                "classes": (" ons-input--error" if params.error else "") + exclusiveClass | default(""),
+                "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,

package/components/date-input/_macro.spec.js

@@ -11,6 +11,15 @@ const EXAMPLE_DATE_INPUT_BASE = {
   description: 'For example, 31 3 1980',
 };
 
+const EXAMPLE_DATE_INPUT_BASE_WITH_ERROR = {
+  id: 'date',
+  legendOrLabel: 'Date of birth',
+  description: 'For example, 31 3 1980',
+  error: {
+    text: 'Enter a date that is after 1 January 2019',
+  },
+};
+
 const EXAMPLE_DAY_FIELD = {
   day: {
     label: {
@@ -53,6 +62,66 @@ const EXAMPLE_YEAR_FIELD = {
   },
 };
 
+const EXAMPLE_DAY_FIELD_WITH_ERROR = {
+  day: {
+    label: {
+      text: 'Day',
+      description: 'The day',
+    },
+    value: 'Day',
+    error: true,
+    name: 'day',
+    attributes: {
+      autocomplete: 'bday-day',
+    },
+  },
+};
+
+const EXAMPLE_MONTH_FIELD_WITH_ERROR = {
+  month: {
+    label: {
+      text: 'Month',
+      description: 'The month',
+    },
+    value: 'Month',
+    error: true,
+    name: 'month',
+    attributes: {
+      autocomplete: 'bday-month',
+    },
+  },
+};
+
+const EXAMPLE_YEAR_FIELD_WITH_ERROR = {
+  year: {
+    label: {
+      text: 'Year',
+      description: 'The year',
+    },
+    value: 'Year',
+    error: true,
+    name: 'year',
+    attributes: {
+      autocomplete: 'bday-year',
+    },
+  },
+};
+
+const EXAMPLE_YEAR_FIELD_WITH_NO_ERROR = {
+  year: {
+    label: {
+      text: 'Year',
+      description: 'The year',
+    },
+    value: 'Year',
+    name: 'year',
+    error: false,
+    attributes: {
+      autocomplete: 'bday-year',
+    },
+  },
+};
+
 const EXAMPLE_DATE_SINGLE_FIELD = {
   ...EXAMPLE_DATE_INPUT_BASE,
   ...EXAMPLE_YEAR_FIELD,
@@ -65,6 +134,25 @@ const EXAMPLE_DATE_MULTIPLE_FIELDS = {
   ...EXAMPLE_YEAR_FIELD,
 };
 
+const EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_SINGLE_ERROR = {
+  ...EXAMPLE_DATE_INPUT_BASE_WITH_ERROR,
+  ...EXAMPLE_DAY_FIELD,
+  ...EXAMPLE_MONTH_FIELD,
+  ...EXAMPLE_YEAR_FIELD_WITH_ERROR,
+};
+
+const EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_ERROR = {
+  ...EXAMPLE_DATE_INPUT_BASE_WITH_ERROR,
+  ...EXAMPLE_DAY_FIELD_WITH_ERROR,
+  ...EXAMPLE_MONTH_FIELD_WITH_ERROR,
+  ...EXAMPLE_YEAR_FIELD_WITH_ERROR,
+};
+
+const EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_NO_ERROR = {
+  ...EXAMPLE_DATE_INPUT_BASE,
+  ...EXAMPLE_YEAR_FIELD_WITH_NO_ERROR,
+};
+
 describe('macro: date input', () => {
   describe('mode: multiple fields', () => {
     it('passes jest-axe checks', async () => {
@@ -282,4 +370,34 @@ describe('macro: date input', () => {
       });
     });
   });
+
+  describe('mode: multiple fields with single field error', () => {
+    it('passes jest-axe checks', async () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_SINGLE_ERROR));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has the provided error class on one input', async () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_SINGLE_ERROR));
+      const $errorContent = $('.ons-input--error');
+
+      expect($errorContent.length).toBe(1);
+    });
+
+    it('has the provided error class on multiple inputs', async () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_ERROR));
+      const $errorContent = $('.ons-input--error');
+
+      expect($errorContent.length).toBe(3);
+    });
+
+    it('does not provide error class when error parameter set to false', async () => {
+      const $ = cheerio.load(renderComponent('date-input', EXAMPLE_DATE_MULTIPLE_FIELDS_WITH_NO_ERROR));
+      const $errorContent = $('.ons-input--error');
+
+      expect($errorContent.length).toBe(0);
+    });
+  });
 });

package/components/date-input/example-date-input-error-for-single-field.njk

@@ -0,0 +1,63 @@
+
+{% from "components/date-input/_macro.njk" import onsDateInput %}
+{{
+    onsDateInput({
+        "id": "period-from-date",
+        "legendOrLabel": "Period from:",
+        "description": "For example, 31 3 2019",
+        "day": {
+            "label": {
+                "text": "Day"
+            },
+            "name": "day",
+            "value": "1"
+        },
+        "month": {
+            "label": {
+                "text": "Month"
+            },
+            "name": "month",
+            "value": "1"
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year",
+            "value": "2019"
+        }
+    })
+}}
+
+{{
+    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": "12"
+        },
+        "year": {
+            "label": {
+                "text": "Year"
+            },
+            "name": "year",
+            "value": "2018",
+            "error": true
+        },
+        "error": {
+            "text": "Enter a date that is after 1 January 2019"
+        }
+    })
+}}

package/components/details/_details.scss

@@ -22,7 +22,7 @@ $details-caret-width: 1.5rem;
         margin-left: -$details-caret-width;
         padding-left: $details-caret-width;
       }
-      .ons-details__icon .ons-svg-icon {
+      .ons-details__icon .ons-icon {
         fill: var(--ons-color-text-link-focus);
       }
     }

package/components/document-list/_macro.njk

@@ -2,9 +2,9 @@
     <ul{% if params.id %} id="{{ params.id }}"{% endif %} class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
         {% for document in params.documents %}
 
-        <li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"{% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
+        <li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.featured and document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"{% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
 
-            {% if document.fullWidth == true %}
+            {% if document.featured and document.fullWidth == true %}
 
                 <div class="ons-container{{ ' ons-container--wide' if document.wide == true }}">
 
@@ -50,10 +50,8 @@
 
                                     {%- if document.metadata.date %}
                                         <li class="ons-document-list__item-attribute">
-                                            {% if document.metadata.date -%}
-                                                {% set prefixClasses = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
-                                                <span class="{{ prefixClasses }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
-                                            {%- endif -%}
+                                            {% set prefixClasses = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
+                                            <span class="{{ prefixClasses }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
                                             {% if document.metadata.date.iso -%}
                                                 <time datetime="{{ document.metadata.date.iso }}">{{ document.metadata.date.short }}</time>
                                             {%- endif %}
@@ -99,7 +97,7 @@
 
                     </div>
 
-            {% if document.fullWidth == true %}
+            {% if document.featured and document.fullWidth == true %}
 
                 </div>