@lion/ui 0.16.1 → 0.17.0-menu-system.0

package/components/menu/test-suites/InteractiveListMixin.suite.js

@@ -0,0 +1,142 @@
+import { LitElement } from 'lit';
+import { expect, html, fixture, unsafeStatic, defineCE } from '@open-wc/testing';
+import { InteractiveListMixin } from '../src/InteractiveListMixin.js';
+
+class InteractiveListClass extends InteractiveListMixin(LitElement) {}
+
+/**
+ * @typedef {import('../types/InteractiveListMixinTypes.js').InteractiveListItemRole} InteractiveListItemRole
+ */
+
+/** @type {InteractiveListItemRole[]} */
+const supportedRoles = [
+  'menuitem',
+  'menuitemcheckbox',
+  'menuitemradio',
+  'option',
+  'treeitem',
+  'radio',
+  'checkbox',
+];
+
+/**
+ * @typedef {Object} TestConfig
+ * @property {string} tagString
+ */
+
+/**
+ * @param {TestConfig} [customConfig]
+ */
+export function runInteractiveListMixinSuite(customConfig) {
+  const cfg = {
+    tagString: customConfig?.tagString || defineCE(InteractiveListClass),
+  };
+
+  const { tagString } = cfg;
+  const tag = unsafeStatic(tagString);
+
+  describe('InteractiveListMixin', () => {
+    it(`supports items with role="${supportedRoles.join('|')}"`, async () => {
+      const el = await fixture(html`
+        <${tag} name="foo">
+          ${supportedRoles.map(role => html` <div role="${role}"></div> `)}
+        </${tag}>
+      `);
+      // @ts-ignore - test element with InteractiveListMixin properties
+      expect(el.listItems.length).to.equal(supportedRoles.length);
+      supportedRoles.forEach((role, i) => {
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[i].getAttribute('role')).to.equal(role);
+      });
+    });
+
+    it('moves elements to a private [slot=list] for optimal DX and a11y', async () => {
+      const el = await fixture(html`
+        <${tag} name="foo">
+          <div role="menuitem" id="item1">Item 1</div>
+          <div role="menuitem" id="item2">Item 2</div>
+        </${tag}>
+      `);
+      // @ts-ignore - test element with InteractiveListMixin properties
+      const listSlotNode = Array.from(el.children).find(c => c.slot === 'list');
+      // @ts-ignore - accessing children property
+      const listItemEls = Array.from(listSlotNode.children);
+      // @ts-ignore - test element with InteractiveListMixin properties
+      expect(listItemEls.includes(el.listItems[0])).to.be.true;
+      // @ts-ignore - test element with InteractiveListMixin properties
+      expect(listItemEls.includes(el.listItems[1])).to.be.true;
+    });
+
+    it('inherits from DisclosureMixin', async () => {});
+
+    describe('Active mode', async () => {
+      it('supports "activedescendant" pattern', async () => {
+        const el = await fixture(html`
+        <${tag} name="foo" ._activeMode="${'activedescendant'}">
+          <div role="menuitem" id="item1">Item 1</div>
+          <div role="menuitem" id="item2">Item 2</div>
+        </${tag}>
+      `);
+        // @ts-ignore - test element with InteractiveListMixin properties
+        el.checkedIndex = 0;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        const listSlotNode = Array.from(el.children).find(c => c.slot === 'list');
+
+        // @ts-ignore - test element with InteractiveListMixin properties
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[0].hasAttribute('id')).to.be.true;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[1].hasAttribute('id')).to.be.true;
+        expect(listSlotNode?.hasAttribute('aria-activedescendant')).to.be.false;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        el.activeIndex = 1;
+        expect(listSlotNode?.hasAttribute('aria-activedescendant')).to.be.true;
+      });
+
+      it('supports "roving-tabindex" pattern', async () => {
+        const el = await fixture(html`
+          <${tag} name="foo" ._activeMode="${'roving-tabindex'}">
+            <div role="menuitem" id="item1">Item 1</div>
+            <div role="menuitem" id="item2">Item 2</div>
+          </${tag}>
+        `);
+
+        // @ts-ignore - test element with InteractiveListMixin properties
+        el.activeIndex = 0;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[0].getAttribute('tabindex')).to.equal('0');
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[1].getAttribute('tabindex')).to.equal('-1');
+
+        // @ts-ignore - test element with InteractiveListMixin properties
+        el.activeIndex = 1;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[0].getAttribute('tabindex')).to.equal('-1');
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(el.listItems[1].getAttribute('tabindex')).to.equal('0');
+
+        // @ts-ignore - test element with InteractiveListMixin properties
+        el.activeIndex = 1;
+        // @ts-ignore - test element with InteractiveListMixin properties
+        expect(document.activeElement).to.equal(el.listItems[1]);
+      });
+    });
+
+    // Copy tests from ListboxMixin. Later, make this mixin a fundament of the ListboxMixin
+
+    // orientation
+    // multipleChoice
+    // selectionFollowsFocus
+    // rotateKeyboardNavigation
+    // noPreselect
+    // _scrollTargetNode
+
+    describe('Widget extensions', () => {
+      it('can be extended to [role=listbox]', async () => {});
+      it('can be extended to [role=menu]', async () => {});
+      it('can be extended to [role=menubar]', async () => {});
+      it('can be extended to [role=toolbar]', async () => {});
+      it('can be extended to [role=tree]', async () => {});
+    });
+  });
+}

package/components/menu/types/InteractiveListMixinTypes.d.ts

@@ -0,0 +1,82 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+import { SlotHost } from '../../core/types/SlotMixinTypes.js';
+import { DisabledHost } from '../../core/types/DisabledMixinTypes.js';
+
+export type InteractiveListItemRole =
+  | 'menuitem'
+  | 'menuitemcheckbox'
+  | 'menuitemradio'
+  | 'option'
+  | 'treeitem'
+  | 'radio'
+  | 'checkbox';
+
+export declare class InteractiveListHost {
+  /**
+   * When true, will synchronize activedescendant and selected element on
+   * arrow key navigation.
+   * This behavior can usually be seen on <select> on the Windows platform.
+   * Note that this behavior cannot be used when multiple-choice is true.
+   * See: https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus
+   */
+  public selectionFollowsFocus: Boolean;
+  /**
+   * Will give first option active state when navigated to the next option from
+   * last option.
+   */
+  public rotateKeyboardNavigation: Boolean;
+  /**
+   * Informs screen reader and affects keyboard navigation.
+   * By default 'vertical'
+   */
+  public orientation: 'vertical' | 'horizontal';
+
+  public hasNoDefaultSelected: boolean;
+
+  public singleOption: boolean;
+
+  public checkedIndex: number | number[];
+
+  public activeIndex: number;
+
+  public listItems: HTMLElement[];
+
+  public setCheckedIndex(index: number): void;
+
+  protected _scrollTargetNode: HTMLElement;
+
+  protected _listNode: HTMLElement;
+
+  // private __setupListboxNode(): void;
+
+  protected _getPreviousEnabledOption(currentIndex: number, offset?: number): number;
+
+  protected _getNextEnabledOption(currentIndex: number, offset?: number): number;
+
+  protected _onListKeyDown(ev: KeyboardEvent): void;
+
+  protected _onListKeyUp(ev: KeyboardEvent): void;
+
+  // protected _setupListboxNode(): void;
+
+  // protected _teardownListboxNode(): void;
+
+  protected _onListClick(ev: MouseEvent): void;
+
+  // protected _setupListboxInteractions(): void;
+
+  // protected _onChildActiveChanged(ev: Event): void;
+}
+
+export declare function InteractiveListHostImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<InteractiveListHost> &
+  InteractiveListHost &
+  Constructor<DisabledHost> &
+  typeof DisabledHost &
+  Constructor<SlotHost> &
+  typeof SlotHost;
+
+export type InteractiveListMixin = typeof InteractiveListHostImplementation;

package/components/navigation-bar/README.md

@@ -0,0 +1 @@
+N.B. api is very very beta

package/components/navigation-bar/src/LionNavigationBar.js

@@ -0,0 +1,449 @@
+import { LitElement, html, css } from 'lit';
+import { LionMenuHybrid } from '@lion/ui/menu.js';
+import { ScopedElementsMixin } from '../../core/src/ScopedElementsMixin.js';
+
+/**
+ * @typedef {import('./types.js').NavBarResponsiveMode} NavBarResponsiveMode
+ * @typedef {import('./types.js').MenuItem} MenuItem
+ * @typedef {import('./types.js').CtaLink} CtaLink
+ * @typedef {import('./types.js').Logo} Logo
+ * @typedef {import('./types.js').LevelConfig} LevelConfig
+ */
+
+export class LionNavigationBar extends ScopedElementsMixin(LitElement) {
+  static get properties() {
+    return {
+      responsiveMode: { type: String, reflect: true, attribute: 'responsive-mode' },
+      // logo: { type: String },
+      menuItems: { type: Array },
+      menuSupportItems: { type: Array },
+      ctaPrimary: { type: Object },
+      ctaSecondary: { type: Object },
+      suggestions: { type: Array },
+      showOnMobile: { type: Array, attribute: 'show-on-mobile', reflect: true },
+
+      _levelCfg: { state: true },
+    };
+  }
+
+  static get scopedElements() {
+    return {
+      // 'lion-menu-overlay': LionMenuOverlay,
+      'lion-menu-hybrid': LionMenuHybrid,
+    };
+  }
+
+  static get styles() {
+    return [
+      css`
+        /** specific styles */
+
+        :host([responsive-mode='desktop']) [data-has-full-width-flyout] > [slot='list'] {
+          /** make sure that we give the right styles */
+          position: relative;
+        }
+
+        :host([responsive-mode='desktop'])
+          [data-has-full-width-flyout]
+          > [slot='list']
+          [level='2']
+          > [slot='list'] {
+          position: absolute;
+          width: 100%;
+          left: 0;
+          right: 0;
+          min-height: 300px;
+          padding: 1em;
+          background-color: white;
+          border: 1px solid gray;
+          box-sizing: border-box;
+        }
+
+        :host([responsive-mode='desktop']) [level='3'] > [slot='list'] {
+          position: absolute;
+          left: 33.333%;
+          width: 33.333%;
+          top: 0;
+          padding: 1em;
+          background-color: white;
+          box-sizing: border-box;
+          height: 100%;
+        }
+
+        :host([responsive-mode='mobile']) nav {
+          border: 1px solid black;
+          display: block;
+          position: fixed;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          min-width: 500px;
+        }
+
+        :host([responsive-mode='mobile']) [level][opened] > [slot='list'] {
+          left: 0;
+          width: 100%;
+          top: 0;
+          box-sizing: border-box;
+        }
+
+        :host([responsive-mode='mobile']) [slot='list'] {
+          position: relative;
+          padding: 1em;
+          background-color: white;
+        }
+
+        :host([responsive-mode='mobile']) [level='2'] > [slot='list'],
+        :host([responsive-mode='mobile']) [level='3'] > [slot='list'] {
+          position: absolute;
+          left: 100%;
+          top: 0;
+          box-sizing: border-box;
+          padding-bottom: 200%;
+        }
+
+        :host([responsive-mode='mobile']) nav {
+          display: flex;
+          flex-direction: column;
+          /* height: 100%;
+          justify-content: space-between; */
+        }
+
+        /* :host([responsive-mode='mobile']) .cta-items {
+          position: absolute;
+          bottom: 0;
+          width: 100%;
+          padding: 1em;
+          background-color: white;
+          box-sizing: border-box;
+        } */
+
+        :host([responsive-mode='mobile']) .logo-and-close {
+          padding: 1em;
+        }
+      `,
+    ];
+  }
+
+  constructor() {
+    super();
+
+    /** @type {Logo} */
+    this.logo = { type: 'ing', alt: 'ING homepage', href: '/' };
+    /** @type {MenuItem[]} */
+    this.menuSupportItems = [];
+    // /**
+    //  * @type {string[]}
+    //  * @description Choose which items to show on mobile when in default mode, maximum of two. Possible values: 'search', 'ctaPrimary', 'ctaSecondary', 'avatarMenu'
+    //  */
+    // this.showOnMobile = [];
+    /**
+     * @type {CtaLink}
+     */
+    // @ts-ignore
+    this.ctaPrimary = {};
+    /**
+     * @type {CtaLink}
+     */
+    // @ts-ignore
+    this.ctaSecondary = {};
+    /** @type {MenuItem[]} */
+    this.menuItems = [];
+    // /** @type {Boolean} */
+    // this.searchDisabled = false;
+    this.breakpointMin = 1400; // force desktop
+    /** @type {string[]} */
+    this.suggestions = [];
+
+    this.prefilledSuggestion = '';
+
+    // Assign styles as a property, so that subclasses can augment it
+    // this.styles = styles;
+    // this.menuOpened = false;
+
+    const mql = window.matchMedia(`(width <= ${this.breakpointMin}px)`);
+    /** @type {NavBarResponsiveMode} */
+    this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
+    this._levelCfg = LionNavigationBar.#getLevelCfg(this.responsiveMode);
+    this._levelSecondaryCfg = this.#getSecondaryLevelCfg();
+
+    mql.addEventListener('change', () => {
+      this.responsiveMode = mql.matches ? 'mobile' : 'desktop';
+      this._levelCfg = LionNavigationBar.#getLevelCfg(this.responsiveMode);
+      this._levelSecondaryCfg = this.#getSecondaryLevelCfg();
+    });
+
+    this.#storeLatestFocusedElementId();
+    this.#delegateAnalyticsEvents();
+  }
+
+  #getSecondaryLevelCfg() {
+    if (this.responsiveMode === 'mobile') {
+      return {
+        l1: {
+          isBar: true,
+        },
+        l2: {
+          isBar: false,
+        },
+      };
+    }
+
+    return {
+      l1: {
+        isBar: true,
+      },
+      l2: {
+        isBar: false,
+      },
+    };
+  }
+
+  /** @type {string | null} */
+  #latestFocusedElementId = null;
+
+  #storeLatestFocusedElementId() {
+    this.addEventListener('focusin', ({ target }) => {
+      // @ts-ignore
+      this.#latestFocusedElementId = target.id;
+    });
+  }
+
+  #syncLatestFocusedElementForNewResponsiveMode() {
+    // We might show/hide or rerender some elements (with same ids) in different positions in the DOM.
+    // As these are physically different elements, we must move focus (as otherwise it would be reset to body)
+    if (!this.#latestFocusedElementId) return;
+    const newFocusedElement = this.shadowRoot?.querySelector(`#${this.#latestFocusedElementId}`);
+    if (newFocusedElement instanceof HTMLElement) {
+      newFocusedElement.focus();
+    }
+  }
+
+  #delegateAnalyticsEvents() {
+    this.addEventListener('click', ({ target }) => {
+      if (!target || !(target instanceof HTMLElement)) return;
+
+      // @ts-expect-error
+      const isButton = target.tagName === 'BUTTON' || target.constructor._$isLionButton$;
+      const isAnchor = target.tagName === 'A';
+      if (!isButton && !isAnchor) return;
+
+      if (!target.id) return;
+
+      // TODO: do in extension layer
+      this.dispatchEvent(
+        new CustomEvent('nav-item-click', {
+          // N.B. we can also retrive the item
+          detail: {
+            item: {
+              id: target.id,
+              label: target.textContent?.trim() || '',
+              href: isAnchor ? target.getAttribute('href') : undefined,
+            },
+          },
+          // bubbles: true,
+          // composed: true,
+        }),
+      );
+    });
+  }
+
+  /**
+   * @param {NavBarResponsiveMode} responsiveMode
+   */
+  static #getLevelCfg(responsiveMode) {
+    // N.B. we're fighting some of the overlay configs provided by LionMenuOverlay here,
+    // the idea is to take over all of that when depending on LionMenu, after removing LonMenuOverlay and LionMenuHybrid components altogether.
+
+    if (responsiveMode === 'mobile') {
+      return {
+        l1: {
+          isBar: false,
+          openableConfig: {
+            // We want to do the absolute positioning ourselves, popper is not suited for this...
+            placementMode: 'custom',
+            isOpenable: false,
+            hidesOnOutsideClick: false,
+            inheritsReferenceWidth: 'none',
+          },
+        },
+        l2: {
+          openableConfig: {
+            // We want disclosure behavior
+            placementMode: 'custom',
+            hidesOnOutsideClick: false,
+            inheritsReferenceWidth: 'none',
+          },
+        },
+        l3: {
+          openableConfig: {
+            // We want disclosure behavior
+            placementMode: 'custom',
+            hidesOnOutsideClick: false,
+            inheritsReferenceWidth: 'none',
+          },
+        },
+      };
+    }
+
+    return {
+      l1: {
+        isBar: true,
+        hasFullWidthFlyout: true,
+        openableConfig: {
+          // We want disclosure behavior
+          placementMode: 'custom',
+          // N.B. we don't have an invoker...
+          isOpenable: false,
+          inheritsReferenceWidth: 'none',
+          focusContentOnOpen: true,
+        },
+      },
+      l2: {
+        openableConfig: {
+          // We want disclosure behavior
+          placementMode: 'custom',
+          hidesOnOutsideClick: true,
+          hidesOnEscape: true,
+          inheritsReferenceWidth: 'none',
+          focusContentOnOpen: true,
+        },
+      },
+      l3: {
+        openableConfig: {
+          // We want disclosure behavior
+          placementMode: 'custom',
+          inheritsReferenceWidth: 'none',
+          focusContentOnOpen: true,
+          // TODO: implement in OverlayController
+          hideVisually: true,
+        },
+      },
+    };
+  }
+
+  /**
+   * @param {import('lit').PropertyValues} changedProperties
+   */
+  updated(changedProperties) {
+    if (changedProperties.has('responsiveMode')) {
+      this._levelCfg = LionNavigationBar.#getLevelCfg(this.responsiveMode);
+      this.#syncLatestFocusedElementForNewResponsiveMode();
+    }
+  }
+
+  render() {
+    return html`
+      <nav>
+        <div class="nav-header">
+          <div class="logo-and-close">
+            <a href="${this.logo.href || '#'}">
+              <img src="${this.logo.src || ''}" alt="${this.logo.alt || ''}" />
+            </a>
+            ${this.responsiveMode === 'mobile'
+              ? html`<button data-close data-level="1">✖️</button>`
+              : ''}
+          </div>
+          ${LionNavigationBar._searchTemplate(this.suggestions, this.prefilledSuggestion)}
+        </div>
+        <div class="nav-body">
+          ${this._menulevelTemplate(this.menuSupportItems, 1, this._levelSecondaryCfg.l1, '')}
+          ${this.responsiveMode === 'desktop'
+            ? LionNavigationBar._ctaTemplate(this.ctaPrimary, this.ctaSecondary)
+            : ''}
+          ${this._menulevelTemplate(this.menuItems, 1, this._levelCfg.l1, '')}
+        </div>
+        ${this.responsiveMode === 'mobile'
+          ? html`<div class="nav-footer">
+              ${LionNavigationBar._ctaTemplate(this.ctaPrimary, this.ctaSecondary)}
+            </div>`
+          : ''}
+      </nav>
+    `;
+  }
+
+  /**
+   * @param {string[]} suggestions
+   * @returns {import('lit').TemplateResult}
+   */
+  static _searchTemplate(suggestions, prefilledSuggestion = '') {
+    return html` <form role="search">
+      <input
+        type="search"
+        list="search-list"
+        placeholder="What are you looking for?"
+        .value="${prefilledSuggestion}"
+      />
+      <datalist id="search-list">
+        ${suggestions.map(suggestion => html`<option value="${suggestion}"></option>`)}
+      </datalist>
+      <input type="submit" value="Search" />
+    </form>`;
+  }
+
+  /**
+   * @param {CtaLink} ctaPrimary
+   * @param {CtaLink} ctaSecondary
+   * @returns {import('lit').TemplateResult}
+   */
+  static _ctaTemplate(ctaPrimary, ctaSecondary) {
+    return html`<div class="cta-items">
+      ${ctaSecondary?.href
+        ? html`<div class="cta-secondary">
+            <a id="${ctaSecondary.id}" href="${ctaSecondary.href}">${ctaSecondary.label} </a>
+          </div>`
+        : ''}
+      ${ctaPrimary?.href
+        ? html`<div class="cta-primary">
+            <a id="${ctaPrimary.id}" href="${ctaPrimary.href}">${ctaPrimary.label} </a>
+          </div>`
+        : ''}
+    </div>`;
+  }
+
+  /**
+   * @param {MenuItem[]} menuItemsForLevel
+   * @param {number} level
+   * @param {LevelConfig} cfgForLevel
+   * @returns {import('lit').TemplateResult}
+   */
+  _menulevelTemplate(menuItemsForLevel, level, cfgForLevel, prevText = '') {
+    // @ts-ignore
+    const cfgForNextLevel = this._levelCfg[`l${level + 1}`];
+
+    const getId = (/** @type {import("./types.js").MenuItem} */ menuItem) =>
+      menuItem.id || `l${level}-${menuItem.title}`;
+
+    return html`<lion-menu-hybrid
+      .config="${cfgForLevel.openableConfig || {}}"
+      .bar="${cfgForLevel.isBar}"
+      ?data-has-full-width-flyout="${cfgForLevel.hasFullWidthFlyout}"
+      ._activeMode="${'tabbable-disclosure'}"
+    >
+      ${level > 1 && this.responsiveMode === 'mobile'
+        ? html` <div role="listitem">
+            <button data-close data-level="${level}">&lt; ${prevText}</button>
+          </div>`
+        : ''}
+      ${menuItemsForLevel.map(
+        menuItem => html`
+          <div role="listitem">
+            ${menuItem.sub
+              ? html` <button id="${getId(menuItem)}" data-invoker>${menuItem.title}</button>
+                  ${menuItem.sub
+                    ? this._menulevelTemplate(
+                        menuItem.sub,
+                        level + 1,
+                        cfgForNextLevel,
+                        menuItem.title,
+                      )
+                    : ''}`
+              : html` <a id="${getId(menuItem)}" href="${menuItem.link || ''}"
+                  >${menuItem.title}</a
+                >`}
+          </div>
+        `,
+      )}
+    </lion-menu-hybrid>`;
+  }
+}