feat(sbb-autocomplete-grid): component implementation (#2512)

src/elements/autocomplete-grid.ts

@@ -0,0 +1,6 @@
+export * from './autocomplete-grid/autocomplete-grid.js';
+export * from './autocomplete-grid/autocomplete-grid-button.js';
+export * from './autocomplete-grid/autocomplete-grid-cell.js';
+export * from './autocomplete-grid/autocomplete-grid-optgroup.js';
+export * from './autocomplete-grid/autocomplete-grid-option.js';
+export * from './autocomplete-grid/autocomplete-grid-row.js';

src/elements/autocomplete-grid/autocomplete-grid-button.ts

@@ -0,0 +1 @@
+export * from './autocomplete-grid-button/autocomplete-grid-button.js';

src/elements/autocomplete-grid/autocomplete-grid-button/__snapshots__/autocomplete-grid-button.snapshot.spec.snap.js

@@ -0,0 +1,116 @@
+/* @web/test-runner snapshot v1 */
+export const snapshots = {};
+
+snapshots["sbb-autocomplete-grid-button renders DOM"] = 
+`<sbb-autocomplete-grid-button
+  aria-disabled="false"
+  data-action=""
+  data-button=""
+  dir="ltr"
+  icon-name="pie-small"
+  id="sbb-autocomplete-grid-button-1"
+  role="button"
+>
+</sbb-autocomplete-grid-button>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders DOM */
+
+snapshots["sbb-autocomplete-grid-button renders Shadow DOM"] = 
+`<span class="sbb-action-base sbb-autocomplete-grid-button">
+  <slot name="icon">
+    <sbb-icon
+      aria-hidden="true"
+      data-namespace="default"
+      name="pie-small"
+      role="img"
+    >
+    </sbb-icon>
+  </slot>
+</span>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders Shadow DOM */
+
+snapshots["sbb-autocomplete-grid-button renders disabled DOM"] = 
+`<sbb-autocomplete-grid-button
+  aria-disabled="true"
+  data-action=""
+  data-button=""
+  dir="ltr"
+  disabled=""
+  icon-name="pie-small"
+  id="sbb-autocomplete-grid-button-3"
+  role="button"
+>
+</sbb-autocomplete-grid-button>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders disabled DOM */
+
+snapshots["sbb-autocomplete-grid-button renders disabled Shadow DOM"] = 
+`<span class="sbb-action-base sbb-autocomplete-grid-button">
+  <slot name="icon">
+    <sbb-icon
+      aria-hidden="true"
+      data-namespace="default"
+      name="pie-small"
+      role="img"
+    >
+    </sbb-icon>
+  </slot>
+</span>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders disabled Shadow DOM */
+
+snapshots["sbb-autocomplete-grid-button renders negative without icon DOM"] = 
+`<sbb-autocomplete-grid-button
+  aria-disabled="false"
+  data-action=""
+  data-button=""
+  dir="ltr"
+  id="sbb-autocomplete-grid-button-5"
+  negative=""
+  role="button"
+>
+</sbb-autocomplete-grid-button>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders negative without icon DOM */
+
+snapshots["sbb-autocomplete-grid-button renders negative without icon Shadow DOM"] = 
+`<span class="sbb-action-base sbb-autocomplete-grid-button">
+  <slot name="icon">
+  </slot>
+</span>
+`;
+/* end snapshot sbb-autocomplete-grid-button renders negative without icon Shadow DOM */
+
+snapshots["sbb-autocomplete-grid-button A11y tree Chrome"] = 
+`<p>
+  {
+  "role": "WebArea",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-button A11y tree Chrome */
+
+snapshots["sbb-autocomplete-grid-button A11y tree Firefox"] = 
+`<p>
+  {
+  "role": "document",
+  "name": "",
+  "children": [
+    {
+      "role": "button",
+      "name": ""
+    }
+  ]
+}
+</p>
+`;
+/* end snapshot sbb-autocomplete-grid-button A11y tree Firefox */
+

src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.scss

@@ -0,0 +1,15 @@
+@use '../../core/styles' as sbb;
+
+// Box-sizing rules contained in typography are not traversing Shadow DOM boundaries. We need to include box-sizing mixin in every component.
+@include sbb.box-sizing;
+
+:host {
+  // Use !important here to not interfere with Firefox focus ring definition
+  // which appears in normalize css of several frameworks.
+  outline: none !important;
+  display: block;
+
+  --sbb-button-display: flex;
+}
+
+@include sbb.icon-button('.sbb-autocomplete-grid-button', '::slotted(sbb-icon), sbb-icon');

src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.snapshot.spec.ts

@@ -0,0 +1,104 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture, testA11yTreeSnapshot } from '../../core/testing/private.js';
+import { waitForLitRender } from '../../core/testing.js';
+
+import type { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
+import '../../form-field.js';
+import '../autocomplete-grid.js';
+import '../autocomplete-grid-row.js';
+import '../autocomplete-grid-cell.js';
+import './autocomplete-grid-button.js';
+
+describe('sbb-autocomplete-grid-button', () => {
+  describe('renders', () => {
+    let root: SbbAutocompleteGridButtonElement;
+    beforeEach(async () => {
+      root = (
+        await fixture(html`
+          <sbb-autocomplete-grid origin="anchor">
+            <sbb-autocomplete-grid-row>
+              <sbb-autocomplete-grid-cell>
+                <sbb-autocomplete-grid-button icon-name="pie-small"></sbb-autocomplete-grid-button>
+              </sbb-autocomplete-grid-cell>
+            </sbb-autocomplete-grid-row>
+          </sbb-autocomplete-grid>
+          <div id="anchor"></div>
+        `)
+      ).querySelector('sbb-autocomplete-grid-button')!;
+      await waitForLitRender(root);
+    });
+
+    it('DOM', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+  });
+
+  describe('renders disabled', () => {
+    let root: SbbAutocompleteGridButtonElement;
+    beforeEach(async () => {
+      root = (
+        await fixture(html`
+          <sbb-autocomplete-grid origin="anchor">
+            <sbb-autocomplete-grid-row>
+              <sbb-autocomplete-grid-cell>
+                <sbb-autocomplete-grid-button
+                  disabled
+                  icon-name="pie-small"
+                ></sbb-autocomplete-grid-button>
+              </sbb-autocomplete-grid-cell>
+            </sbb-autocomplete-grid-row>
+          </sbb-autocomplete-grid>
+          <div id="anchor"></div>
+        `)
+      ).querySelector('sbb-autocomplete-grid-button')!;
+      await waitForLitRender(root);
+    });
+
+    it('DOM', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+  });
+
+  describe('renders negative without icon', () => {
+    let root: SbbAutocompleteGridButtonElement;
+    beforeEach(async () => {
+      root = (
+        await fixture(html`
+          <sbb-form-field negative>
+            <input />
+            <sbb-autocomplete-grid>
+              <sbb-autocomplete-grid-row>
+                <sbb-autocomplete-grid-cell>
+                  <sbb-autocomplete-grid-button></sbb-autocomplete-grid-button>
+                </sbb-autocomplete-grid-cell>
+              </sbb-autocomplete-grid-row>
+            </sbb-autocomplete-grid>
+          </sbb-form-field>
+        `)
+      ).querySelector('sbb-autocomplete-grid-button')!;
+      await waitForLitRender(root);
+    });
+
+    it('DOM', async () => {
+      await expect(root).dom.to.be.equalSnapshot();
+    });
+
+    it('Shadow DOM', async () => {
+      await expect(root).shadowDom.to.be.equalSnapshot();
+    });
+  });
+
+  testA11yTreeSnapshot(
+    html`<sbb-autocomplete-grid-button icon-name="pie-small"></sbb-autocomplete-grid-button>`,
+  );
+});

src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.spec.ts

@@ -0,0 +1,53 @@
+import { assert, expect } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../../core/testing/private.js';
+import { EventSpy, waitForCondition, waitForLitRender } from '../../core/testing.js';
+
+import { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
+
+describe(`sbb-autocomplete-grid-button`, () => {
+  let element: SbbAutocompleteGridButtonElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html`<sbb-autocomplete-grid-button>Button</sbb-autocomplete-grid-button>`,
+    );
+  });
+
+  it('renders', async () => {
+    assert.instanceOf(element, SbbAutocompleteGridButtonElement);
+  });
+
+  describe('events', () => {
+    it('dispatches event on click', async () => {
+      const clickSpy = new EventSpy('click');
+
+      element.click();
+      await waitForCondition(() => clickSpy.events.length === 1);
+      expect(clickSpy.count).to.be.equal(1);
+    });
+
+    it('should not dispatch event on click if disabled', async () => {
+      element.setAttribute('disabled', 'true');
+
+      await waitForLitRender(element);
+
+      const clickSpy = new EventSpy('click');
+
+      element.click();
+      expect(clickSpy.count).not.to.be.greaterThan(0);
+    });
+
+    it('should stop propagating host click if disabled', async () => {
+      element.disabled = true;
+
+      const clickSpy = new EventSpy('click');
+
+      element.dispatchEvent(new CustomEvent('click'));
+      await waitForLitRender(element);
+
+      expect(clickSpy.count).not.to.be.greaterThan(0);
+    });
+  });
+});

src/elements/autocomplete-grid/autocomplete-grid-button/autocomplete-grid-button.ssr.spec.ts

@@ -0,0 +1,21 @@
+import { assert } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+
+import { fixture } from '../../core/testing/private.js';
+
+import { SbbAutocompleteGridButtonElement } from './autocomplete-grid-button.js';
+
+describe(`sbb-autocomplete-grid-button ssr`, () => {
+  let element: SbbAutocompleteGridButtonElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html`<sbb-autocomplete-grid-button>Button</sbb-autocomplete-grid-button>`,
+      { modules: ['./autocomplete-grid-button.ts'] },
+    );
+  });
+
+  it('renders', async () => {
+    assert.instanceOf(element, SbbAutocompleteGridButtonElement);
+  });
+});