@ons/design-system 62.2.4 → 64.0.0

package/scss/main.scss

@@ -26,13 +26,13 @@
 @import '../components/footer/footer';
 @import '../components/header/header';
 @import '../components/hero/hero';
-@import '../components/icons/icons';
-@import '../components/images/images';
+@import '../components/icon/icon';
+@import '../components/image/image';
 @import '../components/input/input-type';
 @import '../components/input/input';
 @import '../components/label/label';
 @import '../components/language-selector/language';
-@import '../components/lists/list';
+@import '../components/list/list';
 @import '../components/message-list/message-list';
 @import '../components/message/message';
 @import '../components/metadata/metadata';
@@ -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/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;
-  }
-}