@ons/design-system 65.0.0 → 65.1.0

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/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>
 

package/components/document-list/_macro.spec.js

@@ -117,7 +117,7 @@ describe('macro: document list', () => {
     it('has the correct container if `fullWidth`', () => {
       const $ = cheerio.load(
         renderComponent('document-list', {
-          documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, fullWidth: true }],
+          documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true }],
         }),
       );
 
@@ -127,7 +127,7 @@ describe('macro: document list', () => {
     it('has the correct container class if `fullWidth` and `wide`', () => {
       const $ = cheerio.load(
         renderComponent('document-list', {
-          documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, fullWidth: true, wide: true }],
+          documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true, wide: true }],
         }),
       );
 

package/components/document-list/example-document-list-search-result-featured.njk

@@ -12,7 +12,7 @@
                     "text": 'Topic'
                 }
             },
-            "description": '<p>Figures on <em class="ons-highlight">crime</em> levels and trends for England and Wales based primarily on two sets of statistics: the <em class="ons-highlight">Crime</em> Survey for England and Wales (CSEW) and police recorded crime data.</p>
+            "description": '<p>Figures on <strong class="ons-highlight">crime</strong> levels and trends for England and Wales based primarily on two sets of statistics: the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) and police recorded crime data.</p>
             <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>'
         }
     ]

package/components/document-list/example-document-list-search-results.njk

@@ -12,7 +12,7 @@
                     "text": 'Topic'
                 }
             },
-            "description": '<p>Figures on <em class="ons-highlight">crime</em> levels and trends for England and Wales based primarily on two sets of statistics: the <em class="ons-highlight">Crime</em> Survey for England and Wales (CSEW) and police recorded <em class="ons-highlight">crime</em> data.</p>
+            "description": '<p>Figures on <strong class="ons-highlight">crime</strong> levels and trends for England and Wales based primarily on two sets of statistics: the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) and police recorded <strong class="ons-highlight">crime</strong> data.</p>
             <p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>'
         },
         {
@@ -29,7 +29,7 @@
                     "short": '18 February 2021'
                 }
             },
-            "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <em class="ons-highlight">Crime</em> Survey for England and Wales (CSEW) data.</p>'
+            "description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <strong class="ons-highlight">Crime</strong> Survey for England and Wales (CSEW) data.</p>'
         },
         {
             "url": '#0',
@@ -45,7 +45,7 @@
                     "short": '2 December 2019'
                 }
             },
-            "description": '<p>An overview of published data on disability and <em class="ons-highlight">crime</em> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>'
+            "description": '<p>An overview of published data on disability and <strong class="ons-highlight">crime</strong> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>'
         },
         {
             "url": '#0',

package/components/fieldset/_fieldset.scss

@@ -10,7 +10,7 @@
       margin: 0;
       padding: 0 0 1.5rem;
 
-      em,
+      strong,
       .ons-highlight {
         @extend .ons-highlight;
       }

package/components/header/_macro.njk

@@ -102,9 +102,9 @@
                                                         href="{{ item.url }}"
                                                         class="ons-header-service-nav__link"
                                                         {% if item.id %} id="{{ item.id }}"{% endif %}
-                                                    >{{ item.title }}</a>
+                                                    >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
                                                 {% else %}
-                                                    {{ item.title }}
+                                                    {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
                                                 {% endif %}
                                                 </li>
                                             {% endfor %}
@@ -153,9 +153,9 @@
                                     href="{{ item.url }}"
                                     class="ons-header-service-nav__link"
                                     {% if item.id %} id="{{ item.id }}"{% endif %}
-                                >{{ item.title }}</a>
+                                >{% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}</a>
                             {% else %}
-                                {{ item.title }}
+                                {% if item.title %}{{ item.title }}{% elif item.text %}{{ item.text }}{% endif %}
                             {% endif %}
                             </li>
                         {% endfor %}

package/components/header/example-header-external-with-navigation.njk

@@ -13,23 +13,23 @@
             "currentPath": '#home',
             "itemsList": [
                 {
-                    "title": 'Home',
+                    "text": 'Home',
                     "url": '#home'
                 },
                 {
-                    "title": 'Guidance',
+                    "text": 'Guidance',
                     "url": '#0'
                 },
                 {
-                    "title": 'Foundations',
+                    "text": 'Foundations',
                     "url": '#0'
                 },
                 {
-                    "title": 'Components',
+                    "text": 'Components',
                     "url": '#0'
                 },
                 {
-                    "title": 'Patterns',
+                    "text": 'Patterns',
                     "url": '#0'
                 }
             ],

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

@@ -18,15 +18,15 @@
             },
             "itemsList": [
                 {
-                    "title": "Help",
+                    "text": "Help",
                     "url": "#0"
                 },
                 {
-                    "title": "My Account",
+                    "text": "My Account",
                     "url": "#0"
                 },
                 {
-                    "title": "Sign out",
+                    "text": "Sign out",
                     "url": "#0"
                 }
             ]

package/components/header/example-header-external-with-sub-navigation.njk

@@ -15,29 +15,29 @@
             "currentPageTitle": 'Design system',
             "itemsList": [
                 {
-                    "title": 'Service standard',
+                    "text": 'Service standard',
                     "url": '#0'
                 },
                 {
-                    "title": 'Design system',
+                    "text": 'Design system',
                     "url": '#design-system'
                 },
                 {
-                    "title": 'Accessibility',
+                    "text": 'Accessibility',
                     "url": '#0'
                 },
                 {
-                    "title": 'Brand guidelines',
+                    "text": 'Brand guidelines',
                     "url": '#0'
                 },
                 {
-                    "title": 'Content style guide',
+                    "text": 'Content style guide',
                     "url": '#0'
                 }
             ],
             "toggleNavigationButton": {
                 "text": 'Menu',
-                "ariaLabel": 'Toggle main menu'
+                "ariaLabel": 'Toggle menu'
             },
             "subNavigation": {
                 "id": 'sub-nav',
@@ -46,19 +46,19 @@
                 "ariaLabel": 'Section menu',
                 "itemsList": [
                     {
-                        "title": 'Guidance',
+                        "text": 'Guidance',
                         "url": '#0'
                     },
                     {
-                        "title": 'Foundations',
+                        "text": 'Foundations',
                         "url": '#0'
                     },
                     {
-                        "title": 'Components',
+                        "text": 'Components',
                         "url": '#0'
                     },
                     {
-                        "title": 'Patterns',
+                        "text": 'Patterns',
                         "url": '#patterns',
                         "sections": [
                             {

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

@@ -19,11 +19,11 @@
             },
             "itemsList": [
                 {
-                    "title": "Jacky Turner",
+                    "text": "Jacky Turner",
                     "iconType": 'person'
                 },
                 {
-                    "title": "Sign out",
+                    "text": "Sign out",
                     "url": "#0"
                 }
             ]

package/components/header/example-header-neutral-for-multicoloured-logo.njk

@@ -18,15 +18,15 @@
             },
             "itemsList": [
                 {
-                    "title": "Help",
+                    "text": "Help",
                     "url": "#0"
                 },
                 {
-                    "title": "My Account",
+                    "text": "My Account",
                     "url": "#0"
                 },
                 {
-                    "title": "Sign out",
+                    "text": "Sign out",
                     "url": "#0"
                 }
             ]
@@ -38,15 +38,15 @@
             "currentPageTitle": 'Design system',
             "itemsList": [
                 {
-                    "title": 'Menu item 1',
+                    "text": 'Menu item 1',
                     "url": '#0'
                 },
                 {
-                    "title": 'Menu item 2',
+                    "text": 'Menu item 2',
                     "url": '#menu-item-2'
                 },
                 {
-                    "title": 'Menu item 3',
+                    "text": 'Menu item 3',
                     "url": '#0'
                 }
             ],

package/components/list/_list.scss

@@ -1,10 +1,13 @@
 .ons-list {
-  margin: 0 0 1rem;
+  margin: 0;
   padding: 0 0 0 1.5rem;
 
   &__item {
+    &:first-child {
+      margin-top: 0.5rem;
+    }
     &:last-child {
-      margin-bottom: 0;
+      margin-bottom: -0.5;
     }
   }