@ons/design-system 63.0.0 → 65.0.0

package/scss/base/_global.scss

@@ -61,7 +61,7 @@ a {
     color: var(--ons-color-text-link-hover);
     text-decoration: underline solid var(--ons-color-text-link-hover) 2px;
   }
-  &:focus:not(.ons-btn--link):not(.ons-btn--ghost):not(.ons-js-clear-btn):not(.ons-download__thumbnail--link):not(.ons-tab--row):not(.ons-skip-link) {
+  &:focus:not(.ons-btn--link):not(.ons-btn--ghost):not(.ons-js-clear-btn):not(.ons-download__thumbnail--link):not(.ons-tab--row):not(.ons-skip-to-content) {
     @extend %a-focus;
   }
 }

package/scss/main.scss

@@ -3,7 +3,7 @@
 @import 'helpers/index';
 @import 'base/index';
 @import 'objects/index';
-@import '../components/access-code/uac';
+@import '../components/access-code/access-code';
 @import '../components/address-output/address-output';
 @import '../components/autosuggest/autosuggest';
 @import '../components/breadcrumbs/breadcrumbs';
@@ -47,7 +47,6 @@
 @import '../components/radios/radios';
 @import '../components/related-content/related-content';
 @import '../components/relationships/relationships';
-@import '../components/search/search';
 @import '../components/section-navigation/section-navigation';
 @import '../components/skip-to-content/skip';
 @import '../components/status/status';

package/scss/objects/_spacing.scss

@@ -2,11 +2,11 @@
 .ons-field-group +,
 .ons-fieldset +,
 .ons-input-items +,
-.ons-figure +,
+.ons-image +,
 .ons-panel +,
 .ons-summary__group +,
 .ons-details:not(.ons-details--accordion) + {
-  .ons-figure,
+  .ons-image,
   .ons-panel,
   .ons-field,
   .ons-field-group,
@@ -17,6 +17,6 @@
   }
 }
 
-.ons-breadcrumb + .ons-grid {
+.ons-breadcrumbs + .ons-grid {
   margin-top: -1rem;
 }

package/scss/overrides/hcm.scss

@@ -3,7 +3,7 @@
   // Brightness makes all images black, except transparent parts, which remain transparent
   // Then, invert(1) makes the black parts white
   .ons-footer__ogl-img,
-  .ons-quote .ons-svg-icon,
+  .ons-quote .ons-icon,
   .ons-footer img {
     filter: brightness(0) invert(1);
   }
@@ -36,7 +36,7 @@
   // Select - Overrides custom background image icon
   .ons-input--select {
     background: var(--ons-color-input-bg)
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ons-svg-icon' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1.5.3 6 5.4 10.5.3c.2-.2.4-.2.6 0l.7.7c.1.2.1.4 0 .5L6.3 7.7c-.2.2-.4.2-.6 0L.2 1.6C.1 1.4.1 1.2.2 1L.9.3c.2-.1.4-.1.6 0z'/%3E%3C/svg%3E")
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='ons-icon' viewBox='0 0 12 8'%3E%3Cpath fill='%23fff' d='M1.5.3 6 5.4 10.5.3c.2-.2.4-.2.6 0l.7.7c.1.2.1.4 0 .5L6.3 7.7c-.2.2-.4.2-.6 0L.2 1.6C.1 1.4.1 1.2.2 1L.9.3c.2-.1.4-.1.6 0z'/%3E%3C/svg%3E")
       no-repeat center right 10px;
     background-size: 1rem;
   }
@@ -48,12 +48,12 @@
 
   // Element icons – matches icon with the link colour
   .ons-details,
-  .ons-breadcrumb__item,
+  .ons-breadcrumbs__item,
   .ons-panel,
   .ons-btn__inner,
   .ons-external-link,
   .ons-list--icons {
-    & .ons-svg-icon {
+    & .ons-icon {
       fill: currentColor !important;
       forced-color-adjust: auto;
     }
@@ -63,7 +63,7 @@
   .ons-header__org-logo,
   .ons-header__title-logo,
   .ons-footer {
-    & .ons-svg-logo {
+    & .ons-icon--logo {
       fill: currentColor !important;
       forced-color-adjust: auto;
     }
@@ -115,7 +115,7 @@
   }
 
   // Add borders to separate banners with no backgrounds
-  .ons-skip-link,
+  .ons-skip-to-content,
   .ons-browser-banner,
   .ons-cookies-banner,
   .ons-header,

package/scss/overrides/rtl.scss

@@ -63,7 +63,7 @@
 
   // Buttons
   .ons-btn {
-    .ons-svg-icon {
+    .ons-icon {
       margin: 0 0.5rem 0.1rem 0;
       transform: rotate(180deg);
     }
@@ -83,7 +83,7 @@
       margin: 0 2rem 0 0;
     }
 
-    .ons-svg-icon {
+    .ons-icon {
       transform: rotate(180deg);
     }
   }

package/scss/print.scss

@@ -4,7 +4,7 @@
 .ons-footer,
 .ons-cookies-banner,
 .ons-language-links,
-.ons-breadcrumb,
+.ons-breadcrumbs,
 .ons-u-ph {
   display: none !important;
 }

package/components/access-code/uac.dom.js

@@ -1,11 +0,0 @@
-import domready from '../../js/domready';
-
-domready(async () => {
-  const uacInputs = [...document.querySelectorAll('.ons-js-uac')];
-
-  if (uacInputs.length) {
-    const UAC = (await import('./uac')).default;
-
-    uacInputs.forEach(element => new UAC(element));
-  }
-});

package/components/search/_macro.njk

@@ -1,30 +0,0 @@
-{% macro onsSearch(params) %}
-    {% from "components/button/_macro.njk" import onsButton %}
-
-    {% set content = caller() %}
-
-    <div class="ons-search-component">
-        {{ content | safe }}
-            
-        {%- set buttonLabel -%}
-            {%- if params.searchButton.visuallyHideButtonText == true -%}
-                <span class="ons-u-vh">{{ params.searchButton.text }}</span>
-            {%- else -%}
-                {{ params.searchButton.text }}
-            {%- endif -%}
-        {%- endset -%}
-
-        {{
-            onsButton({
-                "type": params.searchButton.type,
-                "html": buttonLabel,
-                "id": params.searchButton.id,
-                "variants": 'small',
-                "classes": 'ons-search__btn' + (" " + params.searchButton.classes if params.searchButton.classes else ""),
-                "attributes": params.searchButton.attributes,
-                "iconType": params.searchButton.iconType,
-                "iconPosition": 'only' if params.searchButton.visuallyHideButtonText == true else 'before'
-            })
-        }}
-    </div>
-{% endmacro %}

package/components/search/_macro.spec.js

@@ -1,69 +0,0 @@
-/** @jest-environment jsdom */
-
-import * as cheerio from 'cheerio';
-
-import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
-
-const EXAMPLE_SEARCH = {
-  searchButton: {
-    id: 'search-button-id',
-    type: 'button',
-    text: 'Search for address',
-    iconType: 'search',
-    classes: 'extra-search-button-class',
-    attributes: { a: 42 },
-  },
-};
-
-const FAKE_NESTED_CONTENT = '<span class="test--nested">Nested content...</span>';
-
-describe('macro: search', () => {
-  it('renders expected nested content', () => {
-    const $ = cheerio.load(renderComponent('search', EXAMPLE_SEARCH, FAKE_NESTED_CONTENT));
-
-    expect($('.ons-search-component .test--nested').text()).toBe('Nested content...');
-  });
-
-  it('renders button component', () => {
-    const faker = templateFaker();
-    const buttonSpy = faker.spy('button');
-
-    faker.renderComponent('input', EXAMPLE_SEARCH);
-
-    expect(buttonSpy.occurrences[0]).toEqual({
-      id: 'search-button-id',
-      type: 'button',
-      html: 'Search for address',
-      variants: 'small',
-      classes: 'ons-search__btn extra-search-button-class',
-      attributes: EXAMPLE_SEARCH.searchButton.attributes,
-      iconType: 'search',
-      iconPosition: 'before',
-    });
-  });
-
-  it('renders button component with a visibly hidden label when specified', () => {
-    const faker = templateFaker();
-    const buttonSpy = faker.spy('button');
-
-    faker.renderComponent('input', {
-      searchButton: {
-        id: 'search-button-id',
-        type: 'button',
-        text: 'Search for address',
-        iconType: 'search',
-        visuallyHideButtonText: true,
-      },
-    });
-
-    expect(buttonSpy.occurrences[0]).toEqual({
-      id: 'search-button-id',
-      type: 'button',
-      html: '<span class="ons-u-vh">Search for address</span>',
-      variants: 'small',
-      classes: 'ons-search__btn',
-      iconPosition: 'only',
-      iconType: 'search',
-    });
-  });
-});

package/components/search/_search.scss

@@ -1,9 +0,0 @@
-.ons-search-component {
-  display: flex;
-  flex-flow: row wrap;
-  gap: 0.5rem;
-
-  @include mq(s) {
-    flex-flow: row nowrap !important;
-  }
-}