Implement Modal

index.js

@@ -6,4 +6,5 @@ export * from './packages/toast/toast';
 export * from './packages/toast/toast-container';
 export * from './packages/toast/api';
 export * from './packages/broadcast';
+export * from './packages/modal';
 export * from './packages/utils/expand-transition';

package.json

@@ -79,9 +79,12 @@
     "vite-plugin-html": "3.2.0"
   },
   "dependencies": {
+    "@a11y/focus-trap": "^1.0.5",
     "@fabric-ds/core": "0.0.15",
     "@open-wc/testing": "3.1.6",
-    "html-format": "1.0.2"
+    "dialog-polyfill": "^0.5.6",
+    "html-format": "1.0.2",
+    "scroll-doctor": "^1.0.1"
   },
   "publishConfig": {
     "access": "public"

packages/modal/index.js

@@ -0,0 +1,182 @@
+import { html, css } from 'lit';
+import { fclasses, FabricElement } from '../utils';
+import { modal as c } from '@fabric-ds/css/component-classes';
+import { leftButtonSvg, rightButtonSvg } from './svgs';
+import { setup, teardown } from 'scroll-doctor';
+import dialogPolyfill from 'dialog-polyfill';
+
+class FabricModal extends FabricElement {
+  static properties = {
+    open: { type: Boolean },
+    left: { type: Boolean },
+    right: { type: Boolean },
+  };
+
+  static styles = css`
+    :host {
+      --f-modal-width: 640px;
+      --f-modal-max-height: 80%;
+    }
+    .modal {
+      width: var(--f-modal-width);
+    }
+    dialog {
+      padding: 0;
+      border: none !important;
+      /* !important used here to override polyfill CSS, if loaded */
+    }
+    ::backdrop {
+      background-color: #00000059;
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    const dialog = this.renderRoot.querySelector('dialog');
+    dialogPolyfill.registerDialog(dialog);
+  }
+
+  get _leftButtonClasses() {
+    return fclasses({
+      [c.transitionTitle]: true,
+      [c.titleButton]: true,
+      [c.titleButtonLeft]: true,
+      'justify-self-start': true,
+    });
+  }
+
+  get _rightButtonClasses() {
+    return fclasses({
+      [c.transitionTitle]: true,
+      [c.titleButton]: true,
+      [c.titleButtonRight]: true,
+      'justify-self-end': true,
+    });
+  }
+
+  get _titleClasses() {
+    return fclasses({
+      [c.transitionTitle]: true,
+      'justify-self-center': !!this.left,
+      'col-span-2': !this.left,
+    });
+  }
+
+  willUpdate() {
+    if (!this.open && this._scrollDoctorEnabled) {
+      // this.renderRoot.querySelector('dialog').close();
+      // close dialog case
+      this.renderRoot.querySelector('dialog').close();
+      teardown();
+      this._removeSafariDialogHack();
+    }
+  }
+
+  updated() {
+    if (this.open && !this._scrollDoctorEnabled) {
+      // open dialog case
+      setup(this);
+      this._scrollDoctorEnabled = true;
+      // take note of where the focus is for later
+      this._activeEl = document.activeElement;
+      this.renderRoot.querySelector('dialog').showModal();
+      this._applySafariDialogHack();
+    } else if (!this.open && this._scrollDoctorEnabled) {
+      this._scrollDoctorEnabled = false;
+      this._activeEl?.focus();
+    }
+  }
+
+  _containerKeyDown(event) {
+    if (event.key === 'Escape') this._dismiss();
+  }
+
+  _containerClick(event) {
+    event.stopPropagation();
+  }
+
+  _dismiss(event) {
+    this.dispatchEvent(new CustomEvent('close'));
+  }
+
+  get _leftButton() {
+    return html`<button
+      type="button"
+      aria-label="Tilbake"
+      class="${this._leftButtonClasses}"
+      @click="${this._dismiss}"
+    >
+      ${leftButtonSvg}
+    </button>`;
+  }
+
+  get _rightButton() {
+    return html`<button
+      type="button"
+      aria-label="Lukk"
+      class="${this._rightButtonClasses}"
+      @click="${this._dismiss}"
+    >
+      ${rightButtonSvg}
+    </button>`;
+  }
+
+  _applySafariDialogHack() {
+    // Nasty workaround for Safari + VoiceOver to make sure surrounding content is not available for VoiceOver.
+    // Super important that these aria-hidden attributes are removed when the dialog is closed.
+    this._hiddenSurroundings = [];
+    ['previousElementSibling', 'nextElementSibling'].forEach((direction) => {
+      let el = this;
+      while (el !== document.body) {
+        if (el[direction]) {
+          el = el[direction];
+          if (el.getAttribute('aria-hidden') !== 'true') {
+            this._hiddenSurroundings.push(el);
+            el.setAttribute('aria-hidden', 'true');
+          }
+        } else el = el.parentNode;
+      }
+    });
+  }
+
+  _removeSafariDialogHack() {
+    this._hiddenSurroundings.forEach((el) => el.removeAttribute('aria-hidden'));
+  }
+
+  render() {
+    return html`
+      ${this._fabricStylesheet}
+      <dialog @click="${this._dismiss}" class="overflow-hidden inset-0 bg-transparent">
+        <div
+          class="${c.modal}"
+          tabindex="-1"
+          aria-labelledby="fabric_modal_id"
+          @click="${this._containerClick}"
+          @keydown="${this._containerKeyDown}"
+        >
+          <div class="${c.title}">
+            ${this.left ? this._leftButton : ''}
+            <div id="fabric_modal_id" class="${this._titleClasses}">
+              <p class="${c.titleText}">
+                <slot name="title"></slot>
+              </p>
+            </div>
+            ${this.right ? this._rightButton : ''}
+          </div>
+          <div class="${c.content}">
+            <slot></slot>
+          </div>
+          <div class="${c.footer}">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </dialog>
+    `;
+  }
+}
+
+if (!customElements.get('f-modal')) {
+  customElements.define('f-modal', FabricModal);
+}
+
+export { FabricModal };

packages/modal/svgs.js

@@ -0,0 +1,30 @@
+import { fclasses } from '../utils';
+import { html } from 'lit';
+import { modal as c } from '@fabric-ds/css/component-classes';
+
+export const leftButtonSvg = html`<svg
+  class="${fclasses({ [c.titleButtonIcon]: true, 'transform rotate-90': true })}"
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 16 16"
+>
+  <path
+    fill="currentColor"
+    fillRule="nonzero"
+    d="M8 2.25a.75.75 0 01.743.648L8.75 3v8.189l3.72-3.72a.75.75 0 011.133.977l-.073.084-5 5a.747.747 0 01-.374.204l-.104.014h-.104a.747.747 0 01-.478-.218l-5-5a.75.75 0 01.976-1.133l.084.073 3.72 3.719V3A.75.75 0 018 2.25z"
+  ></path>
+</svg>`;
+
+export const rightButtonSvg = html`<svg
+  class=${c.titleButtonIcon}
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 24 24"
+>
+  <path
+    fill="none"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2.5"
+    d="M12 12l6 6-6-6-6 6 6-6zm0 0L6 6l6 6 6-6-6 6z"
+  />
+</svg> `;

packages/modal/test.js

@@ -0,0 +1,43 @@
+/* eslint-disable no-undef */
+import tap, { test, beforeEach, teardown } from 'tap';
+import { chromium } from 'playwright';
+import { addContentToPage } from '../../tests/utils/index.js';
+
+tap.before(async () => {
+  const browser = await chromium.launch({ headless: true });
+  tap.context.browser = browser;
+});
+
+beforeEach(async (t) => {
+  const { browser } = t.context;
+  const context = await browser.newContext();
+  t.context.page = await context.newPage();
+});
+
+teardown(async () => {
+  const { browser } = tap.context;
+  browser.close();
+});
+
+test('Box component with no attributes is rendered on the page', async (t) => {
+  // GIVEN: A box component
+  const component = `
+    <f-box>
+      <p>This is a box</p>
+    </f-box>
+  `;
+
+  // WHEN: the component is added to the page
+  const page = await addContentToPage({
+    page: t.context.page,
+    content: component,
+  });
+
+  // THEN: the component is visible in the DOM
+  const locator = await page.locator('f-box');
+  t.equal((await locator.innerHTML()).trim(), '<p>This is a box</p>', 'HTML should be rendered');
+  t.equal(await locator.getAttribute('bleed'), null, 'Bleed attribute should be null');
+  t.equal(await locator.getAttribute('bordered'), null, 'Bordered attribute should be null');
+  t.equal(await locator.getAttribute('info'), null, 'Info attribute should be null');
+  t.equal(await locator.getAttribute('neutral'), null, 'Neutral attribute should be null');
+});