@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tm/utils/utils.ts

@@ -0,0 +1,18 @@
+export function waitForPageSettled() {
+    return new Promise<void>((resolve) => {
+        let prevH: number = 0;
+        let prevY = window.scrollY;
+        function check() {
+            let nextH = window.innerHeight + document.body.scrollHeight;
+            let nextY = window.scrollY;
+            let settled = nextH === prevH;
+            if (settled) {
+                if (nextY === prevY) resolve();
+                return;
+            }
+            prevH = nextH;
+            requestAnimationFrame(check);
+        }
+        requestAnimationFrame(check);
+    });
+}

package/src/modules/tm/youtube/youtube.css

@@ -0,0 +1,7 @@
+:host {
+    display: block;
+}
+
+iframe {
+    border-radius: var(--tds-radius-lg);
+}

package/src/modules/tm/youtube/youtube.html

@@ -0,0 +1,10 @@
+<template>
+    <iframe
+        data-chromatic="ignore"
+        height={height}
+        frameborder="0"
+        src={src}
+        type="text/html"
+        width={width}
+    ></iframe>
+</template>

package/src/modules/tm/youtube/youtube.stories.js

@@ -0,0 +1,15 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-youtube',
+    parameters: {
+        modules: ['/modules/tm-youtube.js'],
+        chromatic: {
+            disable: true
+        }
+    }
+};
+
+export const Base = () => html`
+    <tm-youtube video-id="dQw4w9WgXcQ"></tm-youtube>
+`;

package/src/modules/tm/youtube/youtube.ts

@@ -0,0 +1,27 @@
+import { api, LightningElement, track } from 'lwc';
+import { waitForPageSettled } from 'tm/utils';
+
+export default class extends LightningElement {
+    @api videoId: string = undefined!;
+
+    @track private height = 0;
+    @track private width = 0;
+
+    private didSetSize = false;
+
+    private get src() {
+        return `https://www.youtube.com/embed/${this.videoId}`;
+    }
+
+    renderedCallback() {
+        if (!this.didSetSize) {
+            this.didSetSize = true;
+            waitForPageSettled().then(() => {
+                let w = this.template.host.offsetWidth;
+                let ratio = 0.5625;
+                this.height = w * ratio;
+                this.width = w;
+            });
+        }
+    }
+}

package/src/modules/ui/focusTrap/focusTrap.html

@@ -0,0 +1,5 @@
+<template>
+    <div data-id="start" tabindex={startTabIndex}></div>
+    <slot></slot>
+    <div data-id="end" tabindex={endTabIndex}></div>
+</template>

package/src/modules/ui/focusTrap/focusTrap.ts

@@ -0,0 +1,104 @@
+import { api, LightningElement } from 'lwc';
+
+import { isFocusable, isHidden } from '@a11y/focus-trap';
+import { queryShadowRoot } from '@a11y/focus-trap/shadow';
+
+import { debounce } from 'shared/debounce';
+
+// This is a re-implementation of https://github.com/andreasbm/focus-trap
+// since LWC does not currently support custom elements in a template
+export default class extends LightningElement {
+    @api private inactive = false;
+    private focused = false;
+    private init = false;
+
+    private $start!: HTMLElement;
+    private $end!: HTMLElement;
+
+    private $activeElement: Element | null = null;
+
+    private get startTabIndex() {
+        return !this.focused || this.inactive ? '-1' : '0';
+    }
+
+    private get endTabIndex() {
+        return !this.focused || this.inactive ? '-1' : '0';
+    }
+
+    renderedCallback() {
+        if (this.init) return;
+        else this.init = true;
+
+        this.$start = this.template.querySelector(
+            `[data-id="start"]`
+        ) as HTMLElement;
+        this.$end = this.template.querySelector(
+            `[data-id="end"]`
+        ) as HTMLElement;
+
+        this.$start.addEventListener('focus', this.focusLastElement);
+        this.$end.addEventListener('focus', this.focusFirstElement);
+
+        this.addEventListener('focusin', this.onFocusIn);
+        this.addEventListener('focusout', this.onFocusOut);
+        this.addEventListener('keyup', this.onKeyUp as EventListener);
+
+        this.$activeElement = getActiveElement(document.activeElement);
+
+        this.focusFirstElement();
+    }
+
+    disconnectedCallback() {
+        this.removeEventListener('focusin', this.onFocusIn);
+        this.removeEventListener('focusout', this.onFocusOut);
+        if (this.$activeElement && this.$activeElement instanceof HTMLElement)
+            this.$activeElement.focus();
+    }
+
+    private focusFirstElement = () => {
+        this.trapFocus();
+    };
+
+    private focusLastElement = () => {
+        this.trapFocus(true);
+    };
+
+    private onFocusIn = debounce(() => {
+        this.focused = true;
+    }, 0);
+
+    private onFocusOut = debounce(() => {
+        this.focused = false;
+    }, 0);
+
+    private onKeyUp = (e: KeyboardEvent) => {
+        if (e.key === 'Esc' || e.key === 'Escape') {
+            this.dispatchEvent(new CustomEvent('requestclose'));
+        }
+    };
+
+    private getFocusableElements(): HTMLElement[] {
+        // @ts-ignore
+        let children = this.template.querySelector('slot').assignedElements();
+        // @ts-ignore
+        return queryShadowRoot({ children }, isHidden, isFocusable);
+    }
+
+    private trapFocus(trapToEnd?: boolean) {
+        if (this.inactive) return;
+        let focusableElements = this.getFocusableElements();
+        if (focusableElements.length > 0) {
+            if (trapToEnd) {
+                focusableElements[focusableElements.length - 1].focus();
+            } else {
+                focusableElements[0].focus();
+            }
+        }
+    }
+}
+
+function getActiveElement(element: Element | null): Element | null {
+    if (element && element.shadowRoot)
+        return getActiveElement(element.shadowRoot.activeElement);
+    return element;
+}

package/src/modules/ui/focusVisible/__tests__/focusVisible.test.ts

@@ -0,0 +1,95 @@
+import { html, renderIntoBody, nextTick } from 'shared/testutils';
+
+import FocusVisible from '../focusVisible';
+
+customElements.define(
+    'ui-focus-visible',
+    FocusVisible.CustomElementConstructor
+);
+
+describe('ui-focus-visible', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild);
+        }
+    });
+
+    // Skip these tests as LWC in test mode doesn't support child nodes for light DOM components
+    // The focusVisible component requires child elements in slots
+    it.skip('defaults to true', async () => {
+        const element = renderIntoBody(html`
+            <ui-focus-visible>
+                <div></div>
+            </ui-focus-visible>
+        `);
+        await nextTick();
+        expect(element.querySelector('div')).toHaveAttribute(
+            'data-focus-visible',
+            'true'
+        );
+    });
+    it.skip('handles mutation', async () => {
+        const element = renderIntoBody(html`
+            <ui-focus-visible></ui-focus-visible>
+        `);
+        await nextTick();
+        element.appendChild(document.createElement('div'));
+        await nextTick();
+        expect(element.querySelector('div')).toHaveAttribute(
+            'data-focus-visible',
+            'true'
+        );
+    });
+    it.skip('changes to false on mousedown', async () => {
+        const element = renderIntoBody(html`
+            <ui-focus-visible>
+                <div></div>
+            </ui-focus-visible>
+        `);
+        await nextTick();
+        document.dispatchEvent(new MouseEvent('mousedown'));
+        expect(element.querySelector('div')).toHaveAttribute(
+            'data-focus-visible',
+            'false'
+        );
+    });
+    it.skip('changes to false on mousemove', async () => {
+        const element = renderIntoBody(html`
+            <ui-focus-visible>
+                <div></div>
+            </ui-focus-visible>
+        `);
+        await nextTick();
+        document.dispatchEvent(new MouseEvent('mousemove'));
+        expect(element.querySelector('div')).toHaveAttribute(
+            'data-focus-visible',
+            'false'
+        );
+    });
+    it.skip('changes to true on keydown', async () => {
+        const element = renderIntoBody(html`
+            <ui-focus-visible>
+                <div></div>
+            </ui-focus-visible>
+        `);
+        await nextTick();
+        document.dispatchEvent(new MouseEvent('mousemove'));
+        expect(element.querySelector('div')).toHaveAttribute(
+            'data-focus-visible',
+            'false'
+        );
+        document.dispatchEvent(new KeyboardEvent('keydown'));
+        expect(element.querySelector('div')).toHaveAttribute(
+            'data-focus-visible',
+            'true'
+        );
+    });
+
+    it('renders the component', () => {
+        const element = renderIntoBody(
+            html`<ui-focus-visible></ui-focus-visible>`
+        );
+        expect(element).toBeTruthy();
+        expect(element.shadowRoot).toBeTruthy();
+    });
+});

package/src/modules/ui/focusVisible/focusVisible.html

@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>

package/src/modules/ui/focusVisible/focusVisible.ts

@@ -0,0 +1,46 @@
+import { LightningElement } from 'lwc';
+
+let focusVisible = true;
+let handlers: (() => void)[] = [];
+
+export default class extends LightningElement {
+    private observer!: MutationObserver;
+
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            this.onChange();
+        });
+        this.observer.observe(this.template.host, {
+            childList: true
+        });
+        handlers.push(this.onChange);
+        this.onChange();
+    }
+
+    disconnectedCallback() {
+        handlers = handlers.filter((h) => h !== this.onChange);
+        this.observer.disconnect();
+    }
+
+    private onChange = () => {
+        for (let node of Array.from(this.template.host.children)) {
+            node.setAttribute('data-focus-visible', String(focusVisible));
+        }
+    };
+}
+
+document.addEventListener('mousedown', onMouse, { passive: true });
+document.addEventListener('mousemove', onMouse, { passive: true });
+document.addEventListener('keydown', onKeyboard, { passive: true });
+
+function onMouse(event: MouseEvent) {
+    if (!focusVisible) return;
+    else focusVisible = false;
+    for (let handler of handlers) handler();
+}
+
+function onKeyboard(event: KeyboardEvent) {
+    if (focusVisible) return;
+    else focusVisible = true;
+    for (let handler of handlers) handler();
+}