@lion/ui 0.0.1

package/components/button/src/LionButton.js

@@ -0,0 +1,222 @@
+import { html, LitElement, css } from 'lit';
+import { browserDetection, DisabledWithTabIndexMixin } from '@lion/ui/core.js';
+
+const isKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ' || e.key === 'Enter';
+const isSpaceKeyboardClickEvent = (/** @type {KeyboardEvent} */ e) => e.key === ' ';
+
+/**
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+
+/**
+ * Use LionButton (or LionButtonReset|LionButtonSubmit) when there is a need to extend HTMLButtonElement.
+ * It allows to create complex shadow DOM for buttons needing this. Think of:
+ * - a material Design button that needs a JS controlled ripple
+ * - a LionSelectRich invoker that needs a complex shadow DOM structure
+ * (for styling/maintainability purposes)
+ * - a specialized button (for instance a primary button or icon button in a Design System) that
+ * needs a simple api: `<my-button>text</my-button>` is always better than
+ * `<button class="my-button"><div class="my-button__container">text</div><button>`
+ *
+ * In other cases, whenever you can, still use native HTMLButtonElement (`<button>`).
+ *
+ * Note that LionButton is meant for buttons with type="button". It's cleaner and more
+ * lightweight than LionButtonReset and LionButtonSubmit, which should only be considered when native
+ * `<form>` support is needed:
+ * - When type="reset|submit" should be supported, use LionButtonReset.
+ * - When implicit form submission should be supported on top, use LionButtonSubmit.
+ */
+export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
+  static get properties() {
+    return {
+      active: { type: Boolean, reflect: true },
+      type: { type: String, reflect: true },
+    };
+  }
+
+  render() {
+    return html` <div class="button-content" id="${this._buttonId}"><slot></slot></div> `;
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          position: relative;
+          display: inline-flex;
+          box-sizing: border-box;
+          vertical-align: middle;
+          line-height: 24px;
+          background: #eee; /* minimal styling to make it recognizable as btn */
+          padding: 8px; /* padding to fix with min-height */
+          outline: none; /* focus style handled below */
+          cursor: default; /* we should always see the default arrow, never a caret */
+          /* TODO: remove, native button also allows selection. Could be usability concern... */
+          user-select: none;
+          -webkit-user-select: none;
+          -moz-user-select: none;
+          -ms-user-select: none;
+        }
+
+        :host::before {
+          content: '';
+
+          /* center vertically and horizontally */
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+
+          /* Minimum click area to meet [WCAG Success Criterion 2.5.5 Target Size (Enhanced)](https://www.w3.org/TR/WCAG22/#target-size-enhanced) */
+          min-height: 44px;
+          min-width: 44px;
+          width: 100%;
+          height: 100%;
+        }
+
+        .button-content {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        /* Show focus styles on keyboard focus. */
+        :host(:focus:not([disabled])),
+        :host(:focus-visible) {
+          /* if you extend, please overwrite */
+          outline: 2px solid #bde4ff;
+        }
+
+        /* Hide focus styles if they're not needed, for example,
+        when an element receives focus via the mouse. */
+        :host(:focus:not(:focus-visible)) {
+          outline: 0;
+        }
+
+        :host(:hover) {
+          /* if you extend, please overwrite */
+          background: #f4f6f7;
+        }
+
+        :host(:active), /* keep native :active to render quickly where possible */
+        :host([active]) /* use custom [active] to fix IE11 */ {
+          /* if you extend, please overwrite */
+          background: gray;
+        }
+
+        :host([hidden]) {
+          display: none;
+        }
+
+        :host([disabled]) {
+          pointer-events: none;
+          /* if you extend, please overwrite */
+          background: lightgray;
+          color: #adadad;
+          fill: #adadad;
+        }
+      `,
+    ];
+  }
+
+  constructor() {
+    super();
+    this.type = 'button';
+    this.active = false;
+
+    this._buttonId = `button-${Math.random().toString(36).substr(2, 10)}`;
+    if (browserDetection.isIE11) {
+      this.updateComplete.then(() => {
+        if (!this.hasAttribute('aria-labelledby')) {
+          this.setAttribute('aria-labelledby', this._buttonId);
+        }
+      });
+    }
+    this.__setupEvents();
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'button');
+    }
+  }
+
+  /**
+   * @param {import('lit').PropertyValues } changedProperties
+   */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('disabled')) {
+      this.setAttribute('aria-disabled', `${this.disabled}`); // create mixin if we need it in more places
+    }
+  }
+
+  /**
+   * @private
+   */
+  __setupEvents() {
+    this.addEventListener('mousedown', this.__mousedownHandler);
+    this.addEventListener('keydown', this.__keydownHandler);
+    this.addEventListener('keyup', this.__keyupHandler);
+  }
+
+  /**
+   * @private
+   */
+  __mousedownHandler() {
+    this.active = true;
+    const mouseupHandler = () => {
+      this.active = false;
+      document.removeEventListener('mouseup', mouseupHandler);
+      this.removeEventListener('mouseup', mouseupHandler);
+    };
+    document.addEventListener('mouseup', mouseupHandler);
+    this.addEventListener('mouseup', mouseupHandler);
+  }
+
+  /**
+   * @param {KeyboardEvent} event
+   * @private
+   */
+  __keydownHandler(event) {
+    if (this.active || !isKeyboardClickEvent(event)) {
+      if (isSpaceKeyboardClickEvent(event)) {
+        event.preventDefault();
+      }
+      return;
+    }
+
+    if (isSpaceKeyboardClickEvent(event)) {
+      event.preventDefault();
+    }
+
+    this.active = true;
+    /**
+     * @param {KeyboardEvent} keyupEvent
+     */
+    const keyupHandler = keyupEvent => {
+      if (isKeyboardClickEvent(keyupEvent)) {
+        this.active = false;
+        document.removeEventListener('keyup', keyupHandler, true);
+      }
+    };
+    document.addEventListener('keyup', keyupHandler, true);
+  }
+
+  /**
+   * @param {KeyboardEvent} event
+   * @private
+   */
+  __keyupHandler(event) {
+    if (isKeyboardClickEvent(event)) {
+      // Fixes IE11 double submit/click. Enter keypress somehow triggers the __keyUpHandler on the native <button>
+      if (event.target && event.target !== this) {
+        return;
+      }
+      // dispatch click
+      this.click();
+    }
+  }
+}

package/components/button/src/LionButtonReset.js

@@ -0,0 +1,124 @@
+import { LionButton } from './LionButton.js';
+
+/**
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+
+/**
+ * This adds functionality for form buttons (type 'submit' and 'reset').
+ * It allows to submit or reset a <form> by spawning a click on a temporrary native button inside
+ * the form.
+ * Use LionButtonSubmit when implicit form submission should be supported as well.
+ *
+ * Functionality in this button is not purely for type="reset", also for type="submit".
+ * For mainainability purposes the submit functionality is part of LionButtonReset
+ * (it needs the same logic).
+ * LionButtonReset could therefore actually be considered as 'LionButtonForm' (without the
+ * implicit form submission logic), but LionButtonReset is an easier to grasp name for
+ * Application Developers: for reset buttons, always use LionButtonReset, for submit
+ * buttons always use LionButtonSubmit.
+ */
+export class LionButtonReset extends LionButton {
+  constructor() {
+    super();
+    this.type = 'reset';
+    this.__setupDelegationInConstructor();
+
+    /** @type {HTMLButtonElement} */
+    this.__submitAndResetHelperButton = document.createElement('button');
+
+    /** @type {EventListener} */
+    this.__preventEventLeakage = this.__preventEventLeakage.bind(this);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    // Old browsers (IE11, Old Edge, Firefox ESR 60) don't have the `.form`
+    // property defined immediately on the native button, so do this after first render on connected.
+    this.updateComplete.then(() => {
+      this._setupSubmitAndResetHelperOnConnected();
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._teardownSubmitAndResetHelperOnDisconnected();
+  }
+
+  /**
+   * Prevents that someone who listens outside or on form catches the click event
+   * @param {Event} e
+   * @private
+   */
+  __preventEventLeakage(e) {
+    if (e.target === this.__submitAndResetHelperButton) {
+      e.stopImmediatePropagation();
+    }
+  }
+
+  /**
+   * @protected
+   */
+  _setupSubmitAndResetHelperOnConnected() {
+    // Get form
+    this.appendChild(this.__submitAndResetHelperButton);
+    /** @type {HTMLFormElement|null} */
+    this._form = this.__submitAndResetHelperButton.form;
+    this.removeChild(this.__submitAndResetHelperButton);
+
+    if (this._form) {
+      this._form.addEventListener('click', this.__preventEventLeakage);
+    }
+  }
+
+  /**
+   * @protected
+   */
+  _teardownSubmitAndResetHelperOnDisconnected() {
+    if (this._form) {
+      this._form.removeEventListener('click', this.__preventEventLeakage);
+    }
+  }
+
+  /**
+   * Delegate click, by flashing a native button as a direct child
+   * of the form, and firing click on this button. This will fire the form submit
+   * without side effects caused by the click bubbling back up to lion-button.
+   * @param {Event} ev
+   * @protected
+   * @returns {Promise<void>}
+   */
+  // TODO: rename to _clickDelegationHandler in v1
+  async __clickDelegationHandler(ev) {
+    // Wait for updateComplete if form is not yet available
+    if (!this._form) {
+      await this.updateComplete;
+    }
+
+    if ((this.type === 'submit' || this.type === 'reset') && ev.target === this && this._form) {
+      /**
+       * Here, we make sure our button is compatible with a native form, by firing a click
+       * from a native button that our form responds to. The native button we spawn will be a direct
+       * child of the form, plus the click event that will be sent will be prevented from
+       * propagating outside of the form. This will keep the amount of 'noise' (click events
+       * from 'ghost elements' that can be intercepted by listeners in the bubble chain) to an
+       * absolute minimum.
+       */
+      this.__submitAndResetHelperButton.type = this.type;
+
+      this._form.appendChild(this.__submitAndResetHelperButton);
+      // Form submission or reset will happen
+      this.__submitAndResetHelperButton.click();
+      this._form.removeChild(this.__submitAndResetHelperButton);
+    }
+  }
+
+  /**
+   * @private
+   */
+  __setupDelegationInConstructor() {
+    // do not move to connectedCallback, otherwise IE11 breaks.
+    // more info: https://github.com/ing-bank/lion/issues/179#issuecomment-511763835
+    this.addEventListener('click', this.__clickDelegationHandler, true);
+  }
+}

package/components/button/src/LionButtonSubmit.js

@@ -0,0 +1,109 @@
+import { LionButtonReset } from './LionButtonReset.js';
+
+/**
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ * @typedef {{lionButtons: Set<LionButtonSubmit>, helper:HTMLButtonElement, observer:MutationObserver}} HelperRegistration
+ */
+
+/** @type {WeakMap<HTMLFormElement, HelperRegistration>} */
+const implicitHelperMap = new WeakMap();
+
+function createImplicitSubmitHelperButton() {
+  const buttonEl = document.createElement('button');
+  buttonEl.tabIndex = -1;
+  buttonEl.type = 'submit';
+  buttonEl.setAttribute('aria-hidden', 'true');
+
+  // Make it sr-only
+  buttonEl.style.cssText = `
+    position: absolute;
+    top: 0;
+    left: 0;
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    overflow: hidden;
+    white-space: nowrap;
+    height: 1px;
+    width: 1px;
+    padding: 0; /* reset default agent styles */
+    border: 0; /* reset default agent styles */
+  `;
+  return buttonEl;
+}
+
+/**
+ * Contains all the funcionaility of LionButton and LionButtonReset. On top of that it
+ * supports implicit form submission.
+ *
+ * Use when:
+ * - the Application Developer should be able to switch types between 'submit'|'reset'|'button'
+ * (this is similar to how native HTMLButtonElement works)
+ * - a submit button with native form support is needed
+ */
+export class LionButtonSubmit extends LionButtonReset {
+  /**
+   * @type {HTMLButtonElement|null}
+   * @protected
+   */
+  get _nativeButtonNode() {
+    return implicitHelperMap.get(/** @type {HTMLFormElement} */ (this._form))?.helper || null;
+  }
+
+  constructor() {
+    super();
+    this.type = 'submit';
+
+    /** @type {HTMLButtonElement|null} */
+    this.__implicitSubmitHelperButton = null;
+  }
+
+  _setupSubmitAndResetHelperOnConnected() {
+    super._setupSubmitAndResetHelperOnConnected();
+
+    if (!this._form || this.type !== 'submit') {
+      return;
+    }
+    /** @type {HTMLFormElement} */
+    const form = this._form;
+    const registrationForCurForm = implicitHelperMap.get(this._form);
+
+    if (!registrationForCurForm) {
+      const buttonEl = createImplicitSubmitHelperButton();
+      const wrapperEl = document.createElement('div');
+      wrapperEl.appendChild(buttonEl);
+      implicitHelperMap.set(this._form, {
+        lionButtons: new Set(),
+        helper: buttonEl,
+        observer: new MutationObserver(() => {
+          form.appendChild(wrapperEl);
+        }),
+      });
+      form.appendChild(wrapperEl);
+
+      // Prevent that the just created button gets lost during rerender
+      implicitHelperMap.get(form)?.observer.observe(wrapperEl, { childList: true });
+    }
+    implicitHelperMap.get(form)?.lionButtons.add(this);
+  }
+
+  _teardownSubmitAndResetHelperOnDisconnected() {
+    super._teardownSubmitAndResetHelperOnDisconnected();
+
+    if (this._form) {
+      // If we are the last button to leave the form, clean up the
+      const registrationForCurForm = /** @type {HelperRegistration} */ (
+        implicitHelperMap.get(/** @type {HTMLFormElement} */ (this._form))
+      );
+      if (registrationForCurForm) {
+        registrationForCurForm.lionButtons.delete(this);
+        if (!registrationForCurForm.lionButtons.size) {
+          if (this._form.contains(registrationForCurForm.helper)) {
+            registrationForCurForm.helper.remove();
+          }
+          implicitHelperMap.get(this._form)?.observer.disconnect();
+          implicitHelperMap.delete(this._form);
+        }
+      }
+    }
+  }
+}

package/components/button/test/demos.screenshots-test.js

@@ -0,0 +1,61 @@
+// @ts-nocheck
+/* globals capture getStoryPage */
+
+const selector = 'lion-button';
+
+describe('buttons-button', () => {
+  it('main', async () => {
+    const id = 'buttons-button--main';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('main-hovered', async () => {
+    const id = 'buttons-button--main';
+    const page = await getStoryPage(id);
+    await page.hover(selector);
+    await capture({ selector, id: `${id}-hovered`, page });
+  });
+  it('main-focused', async () => {
+    const id = 'buttons-button--main';
+    const page = await getStoryPage(id);
+    await page.focus(selector);
+    await capture({ selector, id: `${id}-focused`, page });
+  });
+  it('handler', async () => {
+    const id = 'buttons-button--handler';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('icon-button', async () => {
+    const id = 'buttons-button--icon-button';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('icon-only', async () => {
+    const id = 'buttons-button--icon-only';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('icon-only-hovered', async () => {
+    const id = 'buttons-button--icon-only';
+    const page = await getStoryPage(id);
+    await page.hover(selector);
+    await capture({ selector, id: `${id}-hovered`, page });
+  });
+  it('icon-only-focused', async () => {
+    const id = 'buttons-button--icon-only';
+    const page = await getStoryPage(id);
+    await page.focus(selector);
+    await capture({ selector, id: `${id}-focused`, page });
+  });
+  it('disabled', async () => {
+    const id = 'buttons-button--disabled';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+  it('within-form', async () => {
+    const id = 'buttons-button--within-form';
+    const page = await getStoryPage(id);
+    await capture({ selector, id, page });
+  });
+});

package/components/button/test/lion-button.test.js

@@ -0,0 +1,9 @@
+import { LionButtonSuite } from '../test-suites/LionButton.suite.js';
+import { LionButtonResetSuite } from '../test-suites/LionButtonReset.suite.js';
+import { LionButtonSubmitSuite } from '../test-suites/LionButtonSubmit.suite.js';
+
+describe('lion-button', () => {
+  LionButtonSuite();
+  LionButtonResetSuite();
+  LionButtonSubmitSuite();
+});