@ons/design-system 64.0.0 → 65.1.0

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/external-link/_external-link.scss

@@ -3,19 +3,19 @@
     visibility: hidden;
     white-space: nowrap;
   }
-  .ons-svg-icon {
+  .ons-icon {
     fill: var(--ons-color-grey-100);
     margin: 0 0 0 0.25rem;
     padding-bottom: 0.1rem;
     visibility: visible;
   }
   &:focus {
-    .ons-svg-icon {
+    .ons-icon {
       fill: var(--ons-color-black);
     }
   }
   &:hover {
-    .ons-svg-icon {
+    .ons-icon {
       fill: var(--ons-color-text-link-hover);
       .ons-footer & {
         fill: var(--ons-color-black);

package/components/external-link/_macro.njk

@@ -3,7 +3,7 @@
     <a href="{{ params.url }}" class="ons-external-link{% if params.classes %} {{ params.classes }}{% endif %}" target="_blank" rel="noopener">
         <span class="ons-external-link__text">
         {{- params.linkText | safe -}}
-        </span><span class="ons-external-link__icon">&nbsp;<svg class="ons-svg-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
+        </span><span class="ons-external-link__icon">&nbsp;<svg class="ons-icon" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg" focusable="false" aria-hidden="true">
         <path d="M13.5,9H13a.5.5,0,0,0-.5.5v3h-9v-9h3A.5.5,0,0,0,7,3V2.5A.5.5,0,0,0,6.5,2h-4a.5.5,0,0,0-.5.5v11a.5.5,0,0,0,.5.5h11a.5.5,0,0,0,.5-.5v-4A.5.5,0,0,0,13.5,9Z" transform="translate(-2 -1.99)"/>
         <path d="M8.83,7.88a.51.51,0,0,0,.71,0l2.31-2.32,1.28,1.28A.51.51,0,0,0,14,6.49v-4a.52.52,0,0,0-.5-.5h-4A.51.51,0,0,0,9,2.52a.58.58,0,0,0,.14.33l1.28,1.28L8.12,6.46a.51.51,0,0,0,0,.71Z" transform="translate(-2 -1.99)"/>
     </svg></span><span class="ons-external-link__new-window-description ons-u-vh"> ({{- params.newWindowDescription | default("opens in a new tab") -}})</span></a>

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/footer/_footer.scss

@@ -30,8 +30,8 @@
     vertical-align: middle;
   }
 
-  .ons-svg-logo,
-  .ons-svg-logo__group {
+  .ons-icon--logo,
+  .ons-icon--logo__group {
     fill: var(--ons-color-black) !important;
   }
 

package/components/footer/example-footer-with-alternative-organisation.njk

@@ -4,18 +4,18 @@
 {% from "components/footer/_macro.njk" import onsFooter %}
 {{
     onsFooter({
-        "poweredBy": '<svg class="ons-svg-logo ons-svg-logo--nisra" xmlns="http://www.w3.org/2000/svg" width="170" height="56" viewBox="0 1 170 54" aria-labelledby="poweredby-alt">
+        "poweredBy": '<svg class="ons-icon--logo ons-icon--logo--nisra" xmlns="http://www.w3.org/2000/svg" width="170" height="56" viewBox="0 1 170 54" aria-labelledby="poweredby-alt">
             <title id="poweredby-alt">NISRA - Northern Ireland Statistics and Research Agency</title>
-            <g class="ons-svg-logo__group" fill="#3d7cc9">
+            <g class="ons-icon--logo__group" fill="#3d7cc9">
                 <path d="M0,39.3c2.7,4.7,6.1,8.1,10.8,10.8c4.6,2.7,9.7,4,14.7,4c7,0,13.8-2.5,19.2-7.1c0.3-0.3,0.6-0.5,0.9-0.8 c2.1-2,3.9-4.2,5.5-6.9l-15.2-8.8l-1.2-0.7l-8.6-4.9l-0.6-0.4L25,24.8L6.4,35.6l-1.1,0.6L0,39.3L0,39.3z"></path>
             </g>
-            <g class="ons-svg-logo__group" fill="#cddb00">
+            <g class="ons-icon--logo__group" fill="#cddb00">
                 <path d="M36.4,7.2c-0.4-0.1-0.8-0.3-1.2-0.4c-2.9-0.9-5.9-1.4-9.1-1.4v18.1l9.1,5.3l1.2,0.7l15.2,8.8l1,0.6l-0.6,1 c-1.5,2.6-3.3,4.9-5.4,6.9l5,2.9c2.7-4.7,3.9-9.3,3.9-14.7C55.6,22.2,47.6,11.4,36.4,7.2L36.4,7.2z"></path>
             </g>
-            <g class="ons-svg-logo__group" fill="#00205c">
+            <g class="ons-icon--logo__group" fill="#00205c">
                 <path d="M6.2,34.4L25,23.5V4.2h1.2c3.1,0,6.2,0.5,9.1,1.4V0c-5.4,0-10,1.2-14.7,4C9.5,10.3,4.2,22.6,6.2,34.4z"></path>
             </g>
-            <g class="ons-svg-logo__group ons-svg-logo__group--text" fill="#00205c">
+            <g class="ons-icon--logo__group ons-icon--logo__group--text" fill="#00205c">
                 <path d="M94.5,48.4l-1-0.2c-0.4-0.1-0.7-0.2-0.7-0.5s0.3-0.5,0.8-0.5c0.7,0,0.8,0.4,0.8,0.5l0.9-0.2c-0.3-0.9-1.2-1.1-1.8-1.1 c-1.5,0-1.7,1-1.7,1.5c0,1.1,1,1.3,1.4,1.3l0.8,0.2c0.2,0,0.5,0.2,0.5,0.5c0,0.5-0.7,0.6-1,0.6c-0.7,0-0.9-0.3-1-0.6l-0.8,0.2 c0.2,0.7,0.9,1.1,1.9,1.1c0.6,0,2-0.2,2-1.5C95.6,49,95.2,48.5,94.5,48.4z M91.2,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4 c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H91.2z M88.3,47.7c0.2-0.3,0.5-0.4,0.8-0.4c0.4,0,0.6,0.2,0.8,0.4c0.2,0.3,0.2,0.5,0.2,0.7h-2C88.1,48.2,88.2,48,88.3,47.7z M148.6,49.6l-1.1-3h-1.1l1.6,4.3l0.1,0.3c0,0.1-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.1-1,0.1v0.8h0.6c0.4,0,0.9-0.1,1.2-1l1.8-5.2
             h-0.8L148.6,49.6z M100.4,49c0-1.3-0.6-2.5-2.1-2.5c-1.3,0-2.1,1-2.1,2.4c0,1.1,0.6,2.4,2.1,2.4c0.9,0,1.7-0.4,2-1.4l-0.9-0.2
             c-0.1,0.2-0.3,0.7-1,0.7c-0.4,0-0.7-0.1-0.9-0.4c-0.3-0.4-0.2-0.7-0.2-1H100.4z M97.5,47.7c0.2-0.3,0.5-0.4,0.8-0.4

package/components/header/_header.scss

@@ -79,10 +79,10 @@
   &--neutral & {
     &__top {
       background: var(--ons-color-header-masthead-internal);
-      .ons-svg-logo {
+      .ons-icon--logo {
         display: block;
-        .ons-svg-logo__group--text,
-        .ons-svg-logo__group--primary {
+        .ons-icon--logo__group--text,
+        .ons-icon--logo__group--primary {
           fill: var(--ons-color-white);
         }
       }
@@ -91,7 +91,7 @@
       background-color: transparent;
       box-shadow: none;
       outline: 3px solid var(--ons-color-focus);
-      .ons-svg-logo {
+      .ons-icon--logo {
         fill: var(--ons-color-text-link-focus);
       }
     }
@@ -140,7 +140,7 @@
     }
   }
 
-  .ons-svg-logo {
+  .ons-icon--logo {
     display: block;
   }
 
@@ -155,9 +155,9 @@
 
   &__org-logo-link {
     &:focus {
-      .ons-svg-logo {
+      .ons-icon--logo {
         fill: var(--ons-color-black) !important;
-        .ons-svg-logo__group {
+        .ons-icon--logo__group {
           fill: var(--ons-color-black) !important;
         }
       }
@@ -207,7 +207,7 @@
       &:first-child {
         margin-left: 0;
       }
-      .ons-svg-icon {
+      .ons-icon {
         clip-path: circle(9px at center);
         margin-right: 0.5rem;
       }

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/icon/_icon.scss

@@ -1,4 +1,4 @@
-.ons-svg-icon {
+.ons-icon {
   height: 1rem;
   vertical-align: middle;
   width: 1rem;