@lion/ui 0.0.1

package/components/form-integrations/test/model-value-event.test.js

@@ -0,0 +1,154 @@
+import '@lion/ui/define/lion-fieldset.js';
+import '@lion/ui/define/lion-input.js';
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import sinon from 'sinon';
+
+/**
+ * @typedef {import('../../input/src/LionInput.js').LionInput} LionInput
+ * @typedef {import('../../fieldset/src/LionFieldset.js').LionFieldset} LionFieldset
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+const inputFixture = /** @type {(arg: TemplateResult) => Promise<LionInput>} */ (fixture);
+const fieldsetFixture = /** @type {(arg: TemplateResult) => Promise<LionFieldset>} */ (fixture);
+
+describe('model value event', () => {
+  describe('form path', () => {
+    it('should be property', async () => {
+      const spy = sinon.spy();
+      const input = await inputFixture(html`<lion-input></lion-input>`);
+      input.addEventListener('model-value-changed', spy);
+      input.modelValue = 'woof';
+      const e = spy.firstCall.args[0];
+      expect(e.detail).to.have.property('formPath');
+    });
+
+    it('should contain dispatching field', async () => {
+      const spy = sinon.spy();
+      const input = await inputFixture(html`<lion-input></lion-input>`);
+      input.addEventListener('model-value-changed', spy);
+      input.modelValue = 'foo';
+      const e = spy.firstCall.args[0];
+      expect(e.detail.formPath).to.eql([input]);
+    });
+
+    it('should contain field and group', async () => {
+      const spy = sinon.spy();
+      const fieldset = await fieldsetFixture(html`
+        <lion-fieldset name="fieldset">
+          <lion-input name="input"></lion-input>
+        </lion-fieldset>
+      `);
+      await fieldset.registrationComplete;
+      fieldset.addEventListener('model-value-changed', spy);
+      const input = /** @type {LionInput} */ (fieldset.querySelector('lion-input'));
+      input.modelValue = 'foo';
+      const e = spy.firstCall.args[0];
+      expect(e.detail.formPath).to.eql([input, fieldset]);
+    });
+
+    it('should contain deep elements', async () => {
+      const spy = sinon.spy();
+      const grandparent = await fieldsetFixture(html`
+        <lion-fieldset name="grandparent">
+          <lion-fieldset name="parent">
+            <lion-input name="input"></lion-input>
+          </lion-fieldset>
+        </lion-fieldset>
+      `);
+      const parent = /** @type {LionFieldset} */ (grandparent.querySelector('[name=parent]'));
+      const input = /** @type {LionInput} */ (grandparent.querySelector('[name=input]'));
+      await grandparent.registrationComplete;
+      await parent.registrationComplete;
+
+      grandparent.addEventListener('model-value-changed', spy);
+      input.modelValue = 'foo';
+      const e = spy.firstCall.args[0];
+      expect(e.detail.formPath).to.eql([input, parent, grandparent]);
+    });
+
+    it('should ignore elements that are not fields or fieldsets', async () => {
+      const spy = sinon.spy();
+      const grandparent = await fieldsetFixture(html`
+        <lion-fieldset name="grandparent">
+          <div>
+            <lion-fieldset name="parent">
+              <div>
+                <div>
+                  <lion-input name="input"></lion-input>
+                </div>
+              </div>
+            </lion-fieldset>
+          </div>
+        </lion-fieldset>
+      `);
+      const parent = /** @type {LionFieldset} */ (grandparent.querySelector('[name=parent]'));
+      const input = /** @type {LionInput} */ (grandparent.querySelector('[name=input]'));
+      await grandparent.registrationComplete;
+      await parent.registrationComplete;
+
+      grandparent.addEventListener('model-value-changed', spy);
+      input.modelValue = 'foo';
+      const e = spy.firstCall.args[0];
+      expect(e.detail.formPath).to.eql([input, parent, grandparent]);
+    });
+  });
+
+  describe('signature', () => {
+    /** @type {?} */
+    let e;
+    beforeEach(async () => {
+      const spy = sinon.spy();
+      const el = await inputFixture(html`<lion-input></lion-input>`);
+      el.addEventListener('model-value-changed', spy);
+      el.modelValue = 'foo';
+      // eslint-disable-next-line prefer-destructuring
+      e = spy.firstCall.args[0];
+    });
+
+    // TODO: Re-enable at some point...
+    // In my opinion (@CubLion) we should not bubble events.
+    // Instead each parent should explicitly listen to children events,
+    // and then re-dispatch on themselves.
+    it.skip('should not bubble', async () => {
+      expect(e.bubbles).to.be.false;
+    });
+
+    it('should not leave shadow boundary', async () => {
+      expect(e.composed).to.be.false;
+    });
+  });
+
+  describe('propagation', () => {
+    it('should dispatch different event at each level', async () => {
+      const grandparent = await fieldsetFixture(html`
+        <lion-fieldset name="grandparent">
+          <lion-fieldset name="parent">
+            <lion-input name="input"></lion-input>
+          </lion-fieldset>
+        </lion-fieldset>
+      `);
+      const parent = /** @type {LionFieldset} */ (grandparent.querySelector('[name="parent"]'));
+      const input = /** @type {LionInput} */ (grandparent.querySelector('[name="input"]'));
+      await grandparent.registrationComplete;
+      await parent.registrationComplete;
+
+      /** @type {sinon.SinonSpy[]} */
+      const spies = [];
+      [grandparent, parent, input].forEach(element => {
+        const spy = sinon.spy();
+        spies.push(spy);
+        element.addEventListener('model-value-changed', spy);
+      });
+      input.modelValue = 'foo';
+      spies.forEach((spy, index) => {
+        const currentEvent = spy.firstCall.args[0];
+        for (let i = index + 1; i < spies.length; i += 1) {
+          const nextEvent = spies[i].firstCall.args[0];
+          expect(currentEvent).not.to.eql(nextEvent);
+        }
+      });
+    });
+  });
+});

package/components/helpers/src/SbActionLogger.js

@@ -0,0 +1,269 @@
+import { css, html, LitElement, render } from 'lit';
+
+/** @typedef {import('lit').TemplateResult} TemplateResult */
+
+export class SbActionLogger extends LitElement {
+  static get properties() {
+    return {
+      title: { type: String, reflect: true },
+      simple: { type: Boolean, reflect: true },
+      __logCounter: { type: Number },
+    };
+  }
+
+  static get styles() {
+    return [
+      css`
+        :host {
+          --sb-action-logger-title-color: black;
+          --sb-action-logger-text-color: black;
+          --sb-action-logger-cue-color-primary: #3f51b5;
+          --sb-action-logger-cue-color-secondary: #c5cae9;
+          --sb-action-logger-cue-duration: 1000ms;
+          --sb-action-logger-max-height: 110px;
+
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+          display: block;
+          font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
+            BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        }
+
+        .header__info {
+          color: var(--sb-action-logger-title-color);
+          display: flex;
+          align-items: center;
+          padding: 16px;
+          font-size: 16px;
+        }
+
+        .header__clear {
+          margin-left: 16px;
+          border-radius: 0px;
+          background-color: rgba(0, 0, 0, 0.05);
+          border: none;
+          cursor: pointer;
+          padding: 8px;
+        }
+
+        .header__clear:hover {
+          background-color: rgba(0, 0, 0, 0.1);
+        }
+
+        .header__title {
+          margin: 0;
+          font-weight: bold;
+          flex-grow: 1;
+        }
+
+        .header__log-cue {
+          position: relative;
+          height: 3px;
+          background-color: var(--sb-action-logger-cue-color-secondary);
+          overflow: hidden;
+        }
+
+        .header__log-cue-overlay {
+          position: absolute;
+          height: 3px;
+          width: 50px;
+          left: -50px;
+          background-color: var(--sb-action-logger-cue-color-primary);
+        }
+
+        .header__log-cue-overlay--slide {
+          animation: slidethrough var(--sb-action-logger-cue-duration) ease-in;
+        }
+
+        @keyframes slidethrough {
+          from {
+            left: -50px;
+            width: 50px;
+          }
+
+          to {
+            left: 100%;
+            width: 500px;
+          }
+        }
+
+        .logger {
+          overflow-y: auto;
+          max-height: var(--sb-action-logger-max-height);
+        }
+
+        .logger__log {
+          padding: 16px;
+          display: flex;
+        }
+
+        .logger__log:not(:last-child) {
+          border-bottom: 1px solid lightgrey;
+        }
+
+        .logger__log code {
+          color: var(--sb-action-logger-text-color);
+          white-space: pre-wrap; /* css-3 */
+          white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
+          white-space: -pre-wrap; /* Opera 4-6 */
+          white-space: -o-pre-wrap; /* Opera 7 */
+          word-wrap: break-word; /* Internet Explorer 5.5+ */
+        }
+
+        .logger__log-count {
+          align-self: baseline;
+          line-height: 8px;
+          font-size: 12px;
+          padding: 4px;
+          border-radius: 4px;
+          margin-right: 8px;
+          color: white;
+          background-color: #777;
+        }
+      `,
+    ];
+  }
+
+  constructor() {
+    super();
+    this.title = 'Action Logger';
+    this.simple = false;
+    this.__logCounter = 0;
+  }
+
+  get loggerEl() {
+    return /** @type {HTMLElement} */ (
+      /** @type {ShadowRoot} */ (this.shadowRoot).querySelector('.logger')
+    );
+  }
+
+  /**
+   * Renders the passed content as a node, and appends it to the logger
+   * Only supports simple values, will be interpreted to a String
+   * E.g. an Object will become '[object Object]'
+   *
+   * @param {string} content Content to be logged to the action logger
+   */
+  log(content) {
+    this.__animateCue();
+
+    if (this.simple) {
+      this.__clearLogs();
+    }
+
+    if (this.__isConsecutiveDuplicateLog(content)) {
+      this.__handleConsecutiveDuplicateLog();
+    } else {
+      this.__appendLog(content);
+      this.loggerEl.scrollTo({
+        top: this.loggerEl.scrollHeight,
+        behavior: 'smooth',
+      });
+    }
+
+    this.__logCounter += 1; // increment total log counter
+  }
+
+  /**
+   * Protected getter that returns the template of a single log
+   *
+   * @param {string} content
+   * @return {TemplateResult} TemplateResult that uses the content passed to create a log
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _logTemplate(content) {
+    return html`
+      <div class="logger__log">
+        <code>${content}</code>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div class="header">
+        <div class="header__info">
+          <p class="header__title">${this.title}</p>
+          <div class="header__counter">${this.__logCounter}</div>
+          <button class="header__clear" @click=${this.__clearLogs}>Clear</button>
+        </div>
+        <div class="header__log-cue">
+          <div class="header__log-cue-overlay"></div>
+        </div>
+      </div>
+      <div class="logger"></div>
+    `;
+  }
+
+  /**
+   * @param {string} content
+   */
+  __appendLog(content) {
+    const offlineRenderContainer = document.createElement('div');
+    render(this._logTemplate(content), offlineRenderContainer);
+    if (offlineRenderContainer.firstElementChild) {
+      this.loggerEl.appendChild(offlineRenderContainer.firstElementChild);
+    }
+  }
+
+  /**
+   * @param {string} content
+   */
+  __isConsecutiveDuplicateLog(content) {
+    if (
+      this.loggerEl.lastElementChild &&
+      this.loggerEl.lastElementChild.querySelector('code')?.textContent?.trim() === content
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  __handleConsecutiveDuplicateLog() {
+    if (!this.loggerEl.lastElementChild?.querySelector('.logger__log-count')) {
+      this.__prependLogCounterElement();
+    }
+
+    // Increment log counter for these duplicate logs
+
+    const logCounter = this.loggerEl.lastElementChild?.querySelector('.logger__log-count');
+    if (logCounter instanceof HTMLElement) {
+      const logCount = logCounter.textContent;
+      if (logCount != null) {
+        const incrementedLogCount = parseInt(logCount, 10) + 1;
+        logCounter.innerText = incrementedLogCount.toString();
+      }
+    }
+  }
+
+  __prependLogCounterElement() {
+    const countEl = document.createElement('div');
+    countEl.classList.add('logger__log-count');
+    countEl.innerText = (1).toString();
+
+    const loggerLastElementChild = this.loggerEl.lastElementChild;
+    if (loggerLastElementChild) {
+      loggerLastElementChild.insertBefore(countEl, loggerLastElementChild.firstElementChild);
+    }
+  }
+
+  __animateCue() {
+    const cueEl = this.shadowRoot?.querySelector('.header__log-cue-overlay');
+    if (cueEl) {
+      cueEl.classList.remove('header__log-cue-overlay--slide');
+      // This triggers browser to stop batching changes because it has to evaluate something.
+      // eslint-disable-next-line no-void
+      void this.offsetWidth;
+      // So that when we arrive here, the browser sees this adding as an actual 'change'
+      // and this means the animation gets refired.
+      cueEl.classList.add('header__log-cue-overlay--slide');
+    }
+  }
+
+  __clearLogs() {
+    const loggerEl = this.shadowRoot?.querySelector('.logger');
+    if (loggerEl) {
+      loggerEl.innerHTML = '';
+      this.__logCounter = 0;
+    }
+  }
+}

package/components/helpers/src/SbLocaleSwitcher.js

@@ -0,0 +1,32 @@
+import { LitElement, html } from 'lit';
+
+export class SbLocaleSwitcher extends LitElement {
+  static get properties() {
+    return {
+      showLocales: { type: Array, attribute: 'show-locales' },
+    };
+  }
+
+  constructor() {
+    super();
+    this.showLocales = ['en-GB', 'en-US', 'en-AU', 'nl-NL', 'nl-BE'];
+  }
+
+  /**
+   * @param {string} locale
+   */
+  // eslint-disable-next-line class-methods-use-this
+  callback(locale) {
+    document.documentElement.lang = locale;
+  }
+
+  render() {
+    return html`
+      ${this.showLocales.map(
+        showLocale => html`
+          <button @click=${() => this.callback(showLocale)}>${showLocale}</button>
+        `,
+      )}
+    `;
+  }
+}

package/components/helpers/src/renderLitAsNode.js

@@ -0,0 +1,13 @@
+import { render } from 'lit';
+
+/**
+ * Helper to render a lit TemplateResult as an offline-created DOM node
+ * Make sure that the top-most element in the template has no siblings,
+ * as they won't be taken into account. We only return firstElementChild.
+ * @param {import('lit').TemplateResult} litHtmlTemplate
+ */
+export const renderLitAsNode = litHtmlTemplate => {
+  const offlineRenderContainer = document.createElement('div');
+  render(litHtmlTemplate, offlineRenderContainer);
+  return offlineRenderContainer.firstElementChild;
+};

package/components/helpers/src/sortEachDepth.js

@@ -0,0 +1,84 @@
+/**
+ * Sorts each depth level according to the provided array order.
+ *
+ * @example
+ * addParameters({
+ *   options: {
+ *     showRoots: true,
+ *     storySort: sortEachDepth([
+ *       ['Intro', 'Forms', 'Buttons', '...'] // 1. level - ordered like this rest default order
+ *       ['Intro', '...', 'System'], // 2. level - Intro first, System last in between default order
+ *       ['Overview', '...'] // 3. level - Intro first rest default order
+ *     ]),
+ * });
+ *
+ * @param {Array.<[]>} orderPerDepth array of arrays giving the order of each level
+ */
+export function sortEachDepth(orderPerDepth) {
+  return (/** @type {Array.<?>} */ a, /** @type {Array.<?>} */ b) => {
+    // If the two stories have the same story kind, then use the default
+    // ordering, which is the order they are defined in the story file.
+    if (a[1].kind === b[1].kind) {
+      return 0;
+    }
+    const storyKindA = a[1].kind.split('/');
+    const storyKindB = b[1].kind.split('/');
+    let depth = 0;
+    let nameA;
+    let nameB;
+    let indexA;
+    let indexB;
+    /** @type {Array.<?>} */
+    let ordering = orderPerDepth[0] || [];
+    if (ordering.indexOf('...') !== -1 && ordering.indexOf('...abc') !== -1) {
+      throw new Error(
+        `Found ${ordering.join(',')} You need to use either "..." or "...abc" for each level.`,
+      );
+    }
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      nameA = storyKindA[depth] ? storyKindA[depth] : '';
+      nameB = storyKindB[depth] ? storyKindB[depth] : '';
+
+      if (nameA === nameB) {
+        // We'll need to look at the next part of the name.
+        depth += 1;
+        ordering = orderPerDepth[depth] || [];
+        if (ordering.indexOf('...') !== -1 && ordering.indexOf('...abc') !== -1) {
+          throw new Error('You need to use either "..." or "...abc" for each level.');
+        }
+        // eslint-disable-next-line no-continue
+        continue;
+      } else {
+        // Look for the names in the given `ordering` array.
+        indexA = ordering.indexOf(nameA);
+        indexB = ordering.indexOf(nameB);
+
+        // If at least one of the names is found, sort by the `ordering` array.
+        if (indexA !== -1 || indexB !== -1) {
+          // If one of the names is not found in `ordering`, list it at the place of '...' or last.
+          let insertPosition = ordering.length;
+          if (ordering.indexOf('...') !== -1) {
+            insertPosition = ordering.indexOf('...');
+          }
+          if (ordering.indexOf('...abc') !== -1) {
+            insertPosition = ordering.indexOf('...abc');
+          }
+
+          if (indexA === -1) {
+            indexA = insertPosition;
+          }
+          if (indexB === -1) {
+            indexB = insertPosition;
+          }
+          return indexA - indexB;
+        }
+      }
+      if (ordering.indexOf('...abc') !== -1) {
+        return nameA.localeCompare(nameB);
+      }
+      // Otherwise, use source code order.
+      return 0;
+    }
+  };
+}

package/components/helpers/test/renderLitAsNode.test.js

@@ -0,0 +1,39 @@
+import { expect } from '@open-wc/testing';
+import { html } from 'lit';
+import { renderLitAsNode } from '../src/renderLitAsNode.js';
+
+describe('renderLitAsNode', () => {
+  it('should return a matching HTMLElement (Node)', () => {
+    const el = renderLitAsNode(html`
+      <div>
+        <a href="#" target="_blank">Link</a>
+        Some text: <span>Hello, World</span>
+      </div>
+    `);
+
+    expect(el).to.be.instanceOf(HTMLElement);
+    expect(el).dom.to.equal(`
+      <div>
+        <a href="#" target="_blank">Link</a>
+        Some text: <span>Hello, World</span>
+      </div>
+    `);
+  });
+
+  it('should only render and return the first (root) node in the template', () => {
+    const el = renderLitAsNode(html`
+      <div>
+        <a href="#" target="_blank">Link</a>
+        Some text: <span>Hello, World</span>
+      </div>
+      <div>Sibling div</div>
+    `);
+
+    expect(el).dom.to.equal(`
+      <div>
+        <a href="#" target="_blank">Link</a>
+        Some text: <span>Hello, World</span>
+      </div>
+    `);
+  });
+});