@ons/design-system 65.1.0 → 65.2.1

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

@@ -13,28 +13,28 @@
             "name": "contact",
             "checkboxes": [
                 {
-                    "id": "post",
+                    "id": "post-example-checkbox-with-revealed-select",
                     "label": {
                         "text": "By post"
                     },
                     "value": "post"
                 },
                 {
-                    "id": "email",
+                    "id": "email-example-checkbox-with-revealed-select",
                     "label": {
                         "text": "By email"
                     },
                     "value": "email"
                 },
                 {
-                    "id": "phone",
+                    "id": "phone-example-checkbox-with-revealed-select",
                     "label": {
                         "text": "By phone"
                     },
                     "value": "phone",
                     "other": {
                         "otherType": "select",
-                        "id": "phone-time",
+                        "id": "phone-time-example-checkbox-with-revealed-select",
                         "name": "phone-time",
                         "label": {
                             "text": "Choose preferred time of day"

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

@@ -12,42 +12,42 @@
             "dontWrap": true,
             "checkboxes": [
                 {
-                    "id": "gluten-free",
+                    "id": "gluten-free-example-checkbox-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Gluten free"
                     },
                     "value": "gluten-free"
                 },
                 {
-                    "id": "lactose-intolerant",
+                    "id": "lactose-intolerant-example-checkbox-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Lactose intolerant"
                     },
                     "value": "lactose-intolerant"
                 },
                 {
-                    "id": "vegan",
+                    "id": "vegan-example-checkbox-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Vegan"
                     },
                     "value": "vegan"
                 },
                 {
-                    "id": "vegetarian",
+                    "id": "vegetarian-example-checkbox-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Vegetarian"
                     },
                     "value": "vegetarian"
                 },
                 {
-                    "id": "other-checkbox",
+                    "id": "other-checkbox-with-revealed-text-input-expanded",
                     "label": {
                         "text": "Other"
                     },
                     "value": "other",
                     "checked": true,
                     "other": {
-                        "id": "other-textbox",
+                        "id": "other-textbox-example-checkbox-with-revealed-text-input-expanded",
                         "name": "other-answer",
                         "label": {
                             "text": "Enter dietary requirements"

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

@@ -12,41 +12,41 @@
             "dontWrap": true,
             "checkboxes": [
                 {
-                    "id": "gluten-free",
+                    "id": "gluten-free-example-checkbox-with-revealed-text-input",
                     "label": {
                         "text": "Gluten free"
                     },
                     "value": "gluten-free"
                 },
                 {
-                    "id": "lactose-intolerant",
+                    "id": "lactose-intolerant-example-checkbox-with-revealed-text-input",
                     "label": {
                         "text": "Lactose intolerant"
                     },
                     "value": "lactose-intolerant"
                 },
                 {
-                    "id": "vegan",
+                    "id": "vegan-example-checkbox-with-revealed-text-input",
                     "label": {
                         "text": "Vegan"
                     },
                     "value": "vegan"
                 },
                 {
-                    "id": "vegetarian",
+                    "id": "vegetarian-example-checkbox-with-revealed-text-input",
                     "label": {
                         "text": "Vegetarian"
                     },
                     "value": "vegetarian"
                 },
                 {
-                    "id": "other-checkbox",
+                    "id": "other-checkbox-with-revealed-text-input",
                     "label": {
                         "text": "Other"
                     },
                     "value": "other",
                     "other": {
-                        "id": "other-textbox",
+                        "id": "other-textbox-example-checkbox-with-revealed-text-input",
                         "name": "other-answer",
                         "label": {
                             "text": "Enter dietary requirements"

package/components/checkboxes/example-checkboxes-with-select-all-button.njk

@@ -18,28 +18,28 @@
             },
             "checkboxes": [
                 {
-                    "id": "mobile-phone",
+                    "id": "mobile-phone-example-checkbox-with-select-all-button",
                     "label": {
                         "text": "Mobile phone"
                     },
                     "value": "mobile-phone"
                 },
                 {
-                    "id": "tablet",
+                    "id": "tablet-example-checkbox-with-select-all-button",
                     "label": {
                         "text": "Tablet"
                     },
                     "value": "tablet"
                 },
                 {
-                    "id": "laptop",
+                    "id": "laptop-example-checkbox-with-select-all-button",
                     "label": {
                         "text": "Laptop"
                     },
                     "value": "laptop"
                 },
                 {
-                    "id": "desktop",
+                    "id": "desktop-example-checkbox-with-select-all-button",
                     "label": {
                         "text": "Desktop computer"
                     },

package/components/checkboxes/example-checkboxes-with-visible-text-input.njk

@@ -13,42 +13,42 @@
             "name": "dietary",
             "checkboxes": [
                 {
-                    "id": "gluten-free",
+                    "id": "gluten-free-example-checkbox-with-visible-text-input",
                     "label": {
                         "text": "Gluten free"
                     },
                     "value": "gluten-free"
                 },
                 {
-                    "id": "lactose-intolerant",
+                    "id": "lactose-intolerant-example-checkbox-with-visible-text-input",
                     "label": {
                         "text": "Lactose intolerant"
                     },
                     "value": "lactose-intolerant"
                 },
                 {
-                    "id": "vegan",
+                    "id": "vegan-example-checkbox-with-visible-text-input",
                     "label": {
                         "text": "Vegan"
                     },
                     "value": "vegan"
                 },
                 {
-                    "id": "vegetarian",
+                    "id": "vegetarian-example-checkbox-with-visible-text-input",
                     "label": {
                         "text": "Vegetarian"
                     },
                     "value": "vegetarian"
                 },
                 {
-                    "id": "other-checkbox",
+                    "id": "other-checkbox-with-visible-text-input",
                     "label": {
                         "text": "Other"
                     },
                     "value": "other",
                     "other": {
                         "open": true,
-                        "id": "other-textbox",
+                        "id": "other-textbox-example-checkbox-with-visible-text-input",
                         "name": "other-answer",
                         "label": {
                             "text": "Enter dietary requirements"

package/components/checkboxes/example-checkboxes-without-border.njk

@@ -8,21 +8,21 @@
         "borderless": true,
         "checkboxes": [
             {
-                "id": "booklet",
+                "id": "booklet-example-checkbox-without-border",
                 "label": {
                     "text": "Booklet"
                 },
                 "value": "booklet"
             },
             {
-                "id": "logo",
+                "id": "logo-example-checkbox-without-border",
                 "label": {
                     "text": "Logo"
                 },
                 "value": "logo"
             },
             {
-                "id": "poster",
+                "id": "poster-example-checkbox-without-border",
                 "label": {
                     "text": "Poster"
                 },

package/components/checkboxes/example-checkboxes.njk

@@ -13,28 +13,28 @@
             "name": "devices",
             "checkboxes": [
                 {
-                    "id": "mobile-phone",
+                    "id": "mobile-phone-example",
                     "label": {
                         "text": "Mobile phone"
                     },
                     "value": "mobile-phone"
                 },
                 {
-                    "id": "tablet",
+                    "id": "tablet-example",
                     "label": {
                         "text": "Tablet"
                     },
                     "value": "tablet"
                 },
                 {
-                    "id": "laptop",
+                    "id": "laptop-example",
                     "label": {
                         "text": "Laptop"
                     },
                     "value": "laptop"
                 },
                 {
-                    "id": "desktop",
+                    "id": "desktop-example",
                     "label": {
                         "text": "Desktop computer"
                     },

package/components/date-input/example-date-input-error.njk

@@ -2,7 +2,7 @@
 {% from "components/date-input/_macro.njk" import onsDateInput %}
 {{
     onsDateInput({
-        "id": "period-from-date",
+        "id": "period-from-date-input-error-example",
         "legendOrLabel": "Period from:",
         "description": "For example, 31 3 2019",
         "day": {
@@ -31,7 +31,7 @@
 
 {{
     onsDateInput({
-        "id": "period-to-date",
+        "id": "period-to-date-input-error-example",
         "legendOrLabel": "Period to:",
         "description": "For example, 31 3 2020",
         "day": {

package/components/date-input/example-date-input.njk

@@ -2,7 +2,7 @@
 
 {{
     onsDateInput({
-        "id": "date",
+        "id": "date-input-example",
         "legendOrLabel": "Date of birth",
         "description": "For example, 31 3 1980",
         "day": {

package/components/details/example-details-with-warning.njk

@@ -3,7 +3,7 @@
 
 {%
     call onsDetails({
-        "id": "details",
+        "id": "details-example-with-warning",
         "title": "Need to answer separately from your household?"
     })
 %}

package/components/details/example-details.njk

@@ -2,7 +2,7 @@
 
 {{
     onsDetails({
-        "id": "details",
+        "id": "details-example",
         "title": "What is a photovoltaic system?",
         "content": "<p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed, or use a solar tracker to follow the sun across the sky.</p>"
     })

package/components/download-resources/_download-resources.scss

@@ -49,22 +49,20 @@
 
   &__panel--is-visible {
     background-color: var(--ons-color-white);
-    bottom: 0;
+    inset: 0;
     display: block;
     height: calc(100% - 76px); // Height of action buttons
-    left: 0;
     overflow-y: scroll;
     padding: 1rem;
     position: fixed;
-    right: 0;
-    top: 0;
     z-index: 10;
   }
 
   &__actions {
     background-color: var(--ons-color-white);
     bottom: 0;
-    box-shadow: 0 0 5px 0 rgba(34, 34, 34, 0.5), 0 -1px 0 0 rgba(65, 64, 66, 0.5);
+    box-shadow: 0 0 5px 0 rgb(34 34 34 / 50%),
+      0 -1px 0 0 rgb(65 64 66 / 50%);
     display: flex;
     left: 0;
     padding: 1rem;

package/components/duration/example-duration-error.njk

@@ -3,27 +3,27 @@
 
 {{
     onsDuration({
-        "id": "address-duration",
+        "id": "address-duration-error-example",
         "legendOrLabel": 'How long have you lived at this address?',
         "legendClasses": 'ons-u-vh',
         "field1": {
-            "id": "address-duration-years",
+            "id": "address-duration-years-error-example",
             "name": "address-duration-years",
             "suffix": {
                 "text": "Years",
-                "id": "address-duration-years-suffix"
+                "id": "address-duration-years-suffix-error-example"
             }
         },
         "field2": {
-            "id": "address-duration-months",
+            "id": "address-duration-months-error-example",
             "name": "address-duration-months",
             "suffix": {
                 "text": "Months",
-                "id": "address-duration-months-suffix"
+                "id": "address-duration-months-suffix-error-example"
             }
         },
         "error": {
-            "id": "address-duration-error",
+            "id": "address-duration-error-example",
             "text": "Enter how long you have lived at this address"
         }
     })

package/components/duration/example-duration.njk

@@ -7,25 +7,25 @@
     "legendIsQuestionTitle": true
 }) %}
     {{ onsDuration({
-        "id": "address-duration",
+        "id": "address-duration-example",
         "dontWrap": true,
         "field1": {
-            "id": "address-duration-years",
+            "id": "address-duration-years-example",
             "name": "address-duration-years",
             "suffix": {
                 "text": "Years",
-                "id": "address-duration-years-suffix"
+                "id": "address-duration-years-suffix-example"
             },
             "attributes": {
                 "autocomplete": "off"
             }
         },
         "field2": {
-            "id": "address-duration-months",
+            "id": "address-duration-months-example",
             "name": "address-duration-months",
             "suffix": {
                 "text": "Months",
-                "id": "address-duration-months-suffix"
+                "id": "address-duration-months-suffix-example"
             },
             "attributes": {
                 "autocomplete": "off"

package/components/external-link/example-external-link.njk

@@ -2,7 +2,7 @@
 
 <p>This is a paragraph of text with a {{
     onsExternalLink({
-        "url": "#1",
+        "url": "#0",
         "linkText": "link to an external website"
     })
 }}</p>

package/components/header/example-header-external-with-service-links.njk

@@ -9,7 +9,7 @@
         "mastheadLogoUrl": '#0',
         "titleUrl": '#0',
         "serviceLinks": {
-            "id": "service-links",
+            "id": "service-links-external",
             "ariaLabel": 'Services menu',
             "ariaListLabel": 'Menu',
             "toggleServicesButton": {

package/components/header/example-header-internal.njk

@@ -10,7 +10,7 @@
         "variants": 'internal',
         "titleUrl": '#0',
         "serviceLinks": {
-            "id": "service-links",
+            "id": "service-links-internal",
             "ariaLabel": 'Services menu',
             "ariaListLabel": 'Menu',
             "toggleServicesButton": {

package/components/helpers/_grid.scss

@@ -0,0 +1,6 @@
+.ons-pl-grid-col {
+  background: var(--ons-color-grey-5);
+  font-size: 0.8rem;
+  margin: 0 0 1rem;
+  padding: 1rem;
+}

package/components/helpers/grid.njk

@@ -0,0 +1,19 @@
+{% macro patternLibExampleGrid(params) %}
+  {% if params.container -%}
+    <div class="ons-container">
+  {% endif -%}
+
+  <div class="ons-grid">
+      {% for item in (params.itemsList if params.itemsList is iterable else params.itemsList.items()) -%}
+          {% for i in range(0, item.repeat | default(1)  ) -%}
+              <div class="ons-grid__col ons-col-{{ item.col }}@m {{ item.classes }}">
+                  <div class="ons-pl-grid-col">{{ item.col }} col</div>
+              </div>
+          {%- endfor %}
+      {%- endfor %}
+  </div>
+
+  {% if params.container -%}
+    </div>
+  {% endif -%}
+{% endmacro %}

package/components/input/_input-type.scss

@@ -57,13 +57,10 @@
     @extend %ons-input-focus;
 
     border-radius: $input-radius;
-    bottom: 0;
+    inset: 0;
     content: '';
     display: block;
-    left: 0;
     position: absolute;
-    right: 0;
-    top: 0;
   }
 
   &:not(&--prefix) & {
@@ -100,16 +97,13 @@
 
   & + .ons-input-type__type::after {
     border-radius: $input-radius;
-    bottom: 0;
+    inset: 0;
 
     // Style input + prefix/suffix for errors
     box-shadow: 0 0 0 1px var(--ons-color-errors);
     content: '';
     display: block;
-    left: 0;
     outline: 1px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
     position: absolute;
-    right: 0;
-    top: 0;
   }
 }

package/components/input/_input.scss

@@ -1,5 +1,6 @@
 %ons-input-focus {
-  box-shadow: 0 0 0 $input-border-width var(--ons-color-input-border), 0 0 0 4px var(--ons-color-focus);
+  box-shadow: 0 0 0 $input-border-width var(--ons-color-input-border),
+    0 0 0 4px var(--ons-color-focus);
 
   // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
   outline: 3px solid transparent;
@@ -31,7 +32,7 @@
   @include mq(s) {
     &--text,
     &--select {
-      &:not(.ons-input--block):not([class*='input--w-']) {
+      &:not(.ons-input--block, [class*='input--w-']) {
         width: $input-width;
       }
     }
@@ -131,7 +132,7 @@
 }
 
 .ons-input--ghost {
-  border: 2px solid rgba(255, 255, 255, 0.6);
+  border: 2px solid rgb(255 255 255 / 60%);
   &:focus {
     border: 2px solid var(--ons-color-input-border);
   }

package/components/input/example-input-email.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "email",
+        "id": "email-example-input-email",
         "type": "email",
         "autocomplete": "email",
         "label": {

package/components/input/example-input-number.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "number",
+        "id": "number-example-input",
         "type": "number",
         "width": "2",
         "autocomplete": "off",

package/components/input/example-input-numeric-values.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "number",
+        "id": "number-example-input-numeric-values",
         "type": "number",
         "width": "2",
         "autocomplete": "off",
@@ -15,7 +15,7 @@
 }}
 {{
     onsInput({
-        "id": "prefixed",
+        "id": "prefixed-example-input-numeric-values",
         "type": "number",
         "width": "6",
         "autocomplete": "off",
@@ -25,13 +25,13 @@
         "prefix": {
             "text": "£",
             "title": "British pounds (GBP)",
-            "id": "annual-salary-gpb-prefix"
+            "id": "annual-salary-gpb-prefix-example-input-numeric-values"
         }
     })
 }}
 {{
     onsInput({
-        "id": "suffixed-percent",
+        "id": "suffixed-percent-example-input-numeric-values",
         "type": "number",
         "width": "3",
         "autocomplete": "off",
@@ -41,13 +41,13 @@
         "suffix": {
             "title": "per cent",
             "text": "%",
-            "id": "internet-access-per-cent-suffix"
+            "id": "internet-access-per-cent-suffix-example-input-numeric-values"
         }
     })
 }}
 {{
     onsInput({
-        "id": "suffixed-centimetres",
+        "id": "suffixed-centimetres-example-input-numeric-values",
         "type": "number",
         "width": "4",
         "autocomplete": "off",
@@ -58,7 +58,7 @@
         "suffix": {
             "title": "centimetres",
             "text": "cm",
-            "id": "length-cm-suffix"
+            "id": "length-cm-suffix-example-input-numeric-values"
         }
     })
 }}

package/components/input/example-input-text-with-character-limit-checker.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "text",
+        "id": "text-example-input-with-char-limit-checker",
         "label": {
             "text": "Enter some text"
         },

package/components/input/example-input-text-with-description.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "text",
+        "id": "text-example-input-with-description",
         "label": {
             "text": "Enter some text",
             "description": "Example description hint text"

package/components/input/example-input-text.njk

@@ -1,7 +1,7 @@
 {% from "components/input/_macro.njk" import onsInput %}
 {{
     onsInput({
-        "id": "text",
+        "id": "text-example-input",
         "label": {
             "text": "Enter some text"
         }