@ons/design-system 59.0.0 → 60.0.0

package/components/icons/_macro.spec.js

@@ -26,16 +26,10 @@ describe('macro: icons', () => {
     'instagram',
     'linkedin',
     'loader',
-    'census-logo-cy',
-    'census-logo-en',
     'ons-logo-en',
     'ons-logo-cy',
     'ons-logo-stacked-en',
     'ons-logo-stacked-cy',
-    'nisra-logo',
-    'nisra-logo-mobile',
-    'ni-finance-logo',
-    'ni-finance-logo-mobile',
     'crest',
     'ogl',
     'circle-lined',
@@ -97,20 +91,12 @@ describe('macro: icons', () => {
   });
 
   describe.each([
-    ['census-logo-cy', 'Logo Cyfrifiad 2021'],
-    ['census-logo-en', 'Census 2021 logo'],
     ['ons-logo-en', 'Office for National Statistics logo'],
     ['ons-logo-cy', 'Logo Swyddfa Ystadegau Gwladol'],
     ['ons-logo-stacked-en', 'Office for National Statistics logo'],
     ['ons-logo-stacked-cy', 'Logo Swyddfa Ystadegau Gwladol'],
-    ['nisra-logo', 'Nisra logo'],
-    ['nisra-logo-mobile', 'Nisra logo'],
-    ['ni-finance-logo', 'Northern Ireland Department of Finance logo'],
-    ['ni-finance-logo-mobile', 'Northern Ireland Department of Finance logo'],
     ['crest', 'Royal coat of arms of the United Kingdom'],
     ['ogl', 'Open Government License logo'],
-    ['hm-gov-logo-en', 'HM Government logo'],
-    ['hm-gov-logo-cy', 'Logo Llywodraeth EM'],
   ])('icon type: %s', (iconType, expectedAltText) => {
     it(`has default alt text '${expectedAltText}'`, () => {
       const $ = cheerio.load(renderComponent('icons', { iconType }));

package/components/navigation/_macro.njk

@@ -3,7 +3,7 @@
     {% from "components/autosuggest/_macro.njk" import onsAutosuggest %}
     <div class="ons-navigation-wrapper{% if params.variants == 'neutral' %} ons-navigation-wrapper--neutral{% endif %}">
         <div class="ons-container ons-container--gutterless@xxs@l{{ ' ons-container--full-width' if params.fullWidth or params.navigation.fullWidth }}{{ ' ons-container--wide' if params.wide or params.navigation.wide }}">
-            {% if params.navigation.siteSearchAutosuggest %}
+            {% if params.siteSearchAutosuggest %}
                 <div class="ons-navigation-search ons-js-navigation-search">
                     {% set autosuggestClasses = "ons-input-search ons-input-search--icon" %}
                     {% set autosuggestLabelClasses = "ons-u-pl-m" %}
@@ -17,24 +17,24 @@
                         "containerClasses": "ons-autosuggest-input--header",
                         "classes": autosuggestClasses,
                         "label": {
-                            "text": params.navigation.siteSearchAutosuggest.label,
+                            "text": params.siteSearchAutosuggest.label,
                             "id": "ons-site-search-label",
                             "classes": autosuggestLabelClasses
                         },
                         "accessiblePlaceholder": true,
                         "autocomplete": "off",
-                        "instructions": params.navigation.siteSearchAutosuggest.instructions,
-                        "ariaYouHaveSelected":params.navigation.siteSearchAutosuggest.ariaYouHaveSelected,
-                        "ariaMinChars": params.navigation.siteSearchAutosuggest.ariaMinChars,
-                        "ariaResultsLabel": params.navigation.siteSearchAutosuggest.ariaResultsLabel,
-                        "ariaOneResult": params.navigation.siteSearchAutosuggest.ariaOneResult,
-                        "ariaNResults": params.navigation.siteSearchAutosuggest.ariaNResults,
-                        "ariaLimitedResults": params.navigation.siteSearchAutosuggest.ariaLimitedResults,
-                        "moreResults": params.navigation.siteSearchAutosuggest.moreResults,
-                        "resultsTitle": params.navigation.siteSearchAutosuggest.resultsTitle,
-                        "autosuggestData": params.navigation.siteSearchAutosuggest.autosuggestData,
-                        "noResults": params.navigation.siteSearchAutosuggest.noResults,
-                        "typeMore": params.navigation.siteSearchAutosuggest.typeMore
+                        "instructions": params.siteSearchAutosuggest.instructions,
+                        "ariaYouHaveSelected":params.siteSearchAutosuggest.ariaYouHaveSelected,
+                        "ariaMinChars": params.siteSearchAutosuggest.ariaMinChars,
+                        "ariaResultsLabel": params.siteSearchAutosuggest.ariaResultsLabel,
+                        "ariaOneResult": params.siteSearchAutosuggest.ariaOneResult,
+                        "ariaNResults": params.siteSearchAutosuggest.ariaNResults,
+                        "ariaLimitedResults": params.siteSearchAutosuggest.ariaLimitedResults,
+                        "moreResults": params.siteSearchAutosuggest.moreResults,
+                        "resultsTitle": params.siteSearchAutosuggest.resultsTitle,
+                        "autosuggestData": params.siteSearchAutosuggest.autosuggestData,
+                        "noResults": params.siteSearchAutosuggest.noResults,
+                        "typeMore": params.siteSearchAutosuggest.typeMore
                     }) }}
                 </div>
             {% endif %}

package/components/navigation/_macro.spec.js

@@ -119,11 +119,9 @@ describe('macro: navigation', () => {
       const autosuggestSpy = faker.spy('autosuggest', { suppressOutput: true });
 
       faker.renderComponent('navigation', {
-        navigation: {
-          ...PARAMS,
-          siteSearchAutosuggest: {
-            ...SITE_SEARCH_AUTOSUGGEST,
-          },
+        navigation: PARAMS,
+        siteSearchAutosuggest: {
+          ...SITE_SEARCH_AUTOSUGGEST,
         },
       });
 

package/components/navigation/_navigation.scss

@@ -123,19 +123,19 @@
   }
 
   &__item--active > &__link {
-    font-weight: 700;
+    font-weight: $font-weight-bold;
   }
 
   &-wrapper {
     &--neutral {
-      background: var(--ons-color-header-light);
+      background: var(--ons-color-header-neutral);
       .ons-navigation__item {
         &--active,
         &:hover {
-          border-color: var(--ons-color-branded);
+          border-color: var(--ons-color-links);
         }
         .ons-navigation__link {
-          color: var(--ons-color-branded-text);
+          color: var(--ons-color-header-navigation-links);
         }
       }
     }

package/components/panel/_panel.scss

@@ -181,7 +181,7 @@
       border-radius: 50%;
       color: var(--ons-color-white);
       font-size: 1.5rem;
-      font-weight: 900;
+      font-weight: $font-weight-bold;
       line-height: 2rem;
       min-height: 2rem;
       min-width: 2rem;

package/components/summary/_summary.scss

@@ -35,7 +35,7 @@ $hub-row-spacing: 1.3rem;
       @extend .ons-u-fs-m;
 
       border-width: 2px;
-      font-weight: 700;
+      font-weight: $font-weight-bold;
 
       .ons-summary__values {
         padding-top: 23px;
@@ -109,7 +109,7 @@ $hub-row-spacing: 1.3rem;
   &__item--error & {
     &__row-title--error {
       color: var(--ons-color-errors);
-      font-weight: 700;
+      font-weight: $font-weight-bold;
       padding: $summary-row-spacing $summary-col-spacing;
     }
 

package/components/table/_table.scss

@@ -9,7 +9,7 @@
   }
 
   &__caption {
-    font-weight: 700;
+    font-weight: $font-weight-bold;
     text-align: left;
   }
 
@@ -88,7 +88,7 @@
         &::before {
           content: attr(data-th);
           float: left;
-          font-weight: 700;
+          font-weight: $font-weight-bold;
           padding-right: 1rem;
         }
       }
@@ -198,7 +198,7 @@
         color: var(--ons-color-text-link);
         display: inline-block;
         font-family: $font-sans;
-        font-weight: 700;
+        font-weight: $font-weight-bold;
         line-height: 1rem;
         padding: 0 0 0.2rem;
         text-decoration: underline;