@ons/design-system 59.1.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

@@ -128,14 +128,14 @@
 
   &-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);
         }
       }
     }