@salesforcedevs/arch-components 1.20.17-alpha13 → 1.20.17-alpha15

package/src/modules/arch/tabset/tabset.ts

@@ -0,0 +1,244 @@
+import { LightningElement, api, track } from "lwc";
+import classnames from "classnames";
+import { TabElement } from "./../tab/tab";
+import { Menu } from "arch/menu";
+import { calculateOverflow } from "arch/overflow";
+
+export type Tab = TabElement & {
+    active: boolean;
+    className: string;
+    hidden: boolean;
+    labelId: string | null;
+    onselect: () => void;
+    onmenuselect: () => void;
+    overflow: boolean;
+    tabindex: number;
+    width: number;
+};
+
+export default class extends LightningElement {
+    @track private tabs: Tab[] = [];
+
+    private get activeTab() {
+        return this.tabs.find((t) => t.active) || null;
+    }
+
+    private _activeTabValue: string | null = null;
+
+    @api
+    get activeTabValue() {
+        return this._activeTabValue;
+    }
+
+    set activeTabValue(newValue) {
+        this.setActiveTabValueInternal(newValue);
+    }
+
+    private setActiveTabValueInternal(newValue: string | null) {
+        // Already selected, do nothing
+        if (!newValue || this._activeTabValue === newValue) {
+            return;
+        }
+
+        // Unload previously active tab
+        if (this.activeTab) {
+            this.activeTab.unload();
+        }
+
+        // Update tab properties
+        this._activeTabValue = newValue;
+
+        this.tabs = this.tabs.map((t) => ({
+            ...t,
+            ...this.calculatedTabProperties(t.value === newValue)
+        }));
+
+        // Load the new tab
+        if (this.activeTab) {
+            this.activeTab.load();
+        }
+    }
+
+    private hasOverflow: boolean = false;
+
+    private menu = new Menu({
+        onChange: () => {},
+        shadowRoot: this.template
+    });
+
+    connectedCallback() {
+        window.addEventListener("resize", this.handleWindowResize);
+    }
+
+    renderedCallback() {
+        // Set the first tab as active by default
+        if (!this.activeTabValue && this.tabs.length) {
+            this.setActiveTabValueInternal(this.tabs[0].value);
+        }
+
+        // Repaint
+        requestAnimationFrame(this.detectOverflow.bind(this));
+        this.menu.renderedCallback();
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("resize", this.handleWindowResize);
+        this.menu.disconnectedCallback();
+    }
+
+    // TODO i18n
+    private get labels() {
+        return {
+            overflowButton: "More"
+        };
+    }
+
+    private get isOverflowHidden() {
+        return !this.hasOverflow;
+    }
+
+    private calculatedTabProperties(isActive: boolean) {
+        return {
+            active: isActive,
+            className: classnames("tab", {
+                "tab-active": isActive
+            }),
+            labelId: isActive ? "active-tab" : null,
+            hidden: !isActive,
+            tabindex: isActive ? 0 : -1
+        };
+    }
+
+    // Detect if tabs need to be placed in an overflow menu
+    private detectOverflow() {
+        const tabs = Array.from(
+            this.template.querySelectorAll('.tab[role="presentation"]')
+        ) as HTMLElement[];
+
+        // Update tab.width
+        tabs.forEach((t) => {
+            const value = t.querySelector("a")!.getAttribute("data-value");
+            const tab = this.tabs.find((tabItem) => tabItem.value === value);
+            if (tab) {
+                const { paddingLeft, width, paddingRight } =
+                    getComputedStyle(t);
+                tab.width =
+                    parseInt(paddingLeft, 10) +
+                    parseInt(width, 10) +
+                    parseInt(paddingRight, 10);
+            }
+        });
+
+        // Calculate which items need to be placed in overflow
+        const { overflowItems } = calculateOverflow(
+            this.tabs,
+            this.template.querySelector(".tablist")!.getBoundingClientRect()
+                .width,
+            this.template
+                .querySelector(".overflow-tab")!
+                .getBoundingClientRect().width
+        );
+
+        this.hasOverflow = !!overflowItems.length;
+
+        // Update tab.overflow
+        this.tabs.forEach((i) => {
+            i.overflow = !!overflowItems.find((o) => o.value === i.value);
+        });
+    }
+
+    private handleWindowResize = () => {
+        this.detectOverflow();
+
+        if (this.menu) {
+            this.menu.close();
+        }
+    };
+
+    private handleTabRegister(e: { detail: TabElement }) {
+        const element = e.detail;
+
+        const tab: Tab = {
+            ...this.calculatedTabProperties(
+                element.value === this.activeTabValue
+            ),
+            ...element,
+            onselect: () => {
+                this.setActiveTabValueInternal(element.value);
+            },
+            onmenuselect: () => {
+                this.setActiveTabValueInternal(element.value);
+
+                // Re-focus the menu button
+                this.template.querySelector('[data-menu="trigger"]')!.focus();
+
+                if (this.menu) {
+                    this.menu.close();
+                }
+            },
+            overflow: false,
+            width: 0
+        };
+
+        this.tabs.push(tab);
+
+        // Load the tab if it's currently active
+        if (element.value === this.activeTabValue) {
+            tab.load();
+        }
+    }
+
+    private handleKeyDown(e: KeyboardEvent) {
+        switch (e.code) {
+            // Cycle through tabs
+            case "ArrowLeft":
+            case "ArrowRight": {
+                e.preventDefault();
+                e.stopPropagation();
+
+                const increment = e.code === "ArrowLeft" ? -1 : 1;
+                const visibleTabs = this.tabs.filter((t) => !t.overflow);
+                const currentFocusedIndex = visibleTabs.findIndex(
+                    (tabItem) => tabItem.value === this.activeTabValue
+                );
+
+                let newIndex = currentFocusedIndex + increment;
+                if (newIndex < 0) {
+                    newIndex = visibleTabs.length - 1;
+                }
+                if (newIndex + 1 > visibleTabs.length) {
+                    newIndex = 0;
+                }
+
+                // Set the active tabpanel and focus the tab
+                const newValue = visibleTabs[newIndex].value;
+                this.setActiveTabValueInternal(newValue);
+                this.template
+                    .querySelector(`a[data-value=${newValue}]`)!
+                    .focus();
+                break;
+            }
+            case "ArrowDown":
+                // Focus the tabpanel
+                this.template.querySelector('[role="tabpanel"]')!.focus();
+                break;
+            case "Enter":
+            case "Space": {
+                e.preventDefault();
+                e.stopPropagation();
+
+                const element = e.target as HTMLElement;
+
+                if (element && element.nodeName === "A") {
+                    const newValue = element.getAttribute("data-value");
+                    if (newValue) {
+                        this.setActiveTabValueInternal(newValue);
+                    }
+                }
+                break;
+            }
+            default:
+                break;
+        }
+    }
+}

package/src/modules/arch/testutils.ts

@@ -0,0 +1,118 @@
+import { html, render, TemplateResult } from 'lit-html';
+import { querySelectorAll, querySelector } from 'kagekiri';
+// @ts-ignore we are using a beta feature "setFeatureFlagForTest" that tsc doesn't like
+import { createElement, LightningElement, setFeatureFlagForTest } from 'lwc';
+
+export { html, render };
+
+export function nextTick() {
+    return new Promise((resolve) => {
+        process.nextTick(resolve);
+    });
+}
+
+export function $(selector: string, element: HTMLElement) {
+    return element.shadowRoot!.querySelectorAll(selector);
+}
+
+export function $testid(value: string, element: HTMLElement) {
+    return $(`[data-testid="${value}"]`, element);
+}
+
+export function renderIntoBody(template: TemplateResult) {
+    const element = document.createElement('div');
+    document.body.append(element);
+    render(template, element);
+    return element.children[0] as HTMLElement;
+}
+
+export async function renderIntoBodyAndWait(
+    template: TemplateResult,
+    ready:
+        | ((params: {
+              querySelector: typeof querySelector;
+              querySelectorAll: typeof querySelectorAll;
+          }) => boolean)
+        | string
+) {
+    const element = renderIntoBody(template);
+    await new Promise((resolve) => {
+        const check = () => {
+            const isReady =
+                typeof ready === 'string'
+                    ? querySelector(ready, element) !== null
+                    : ready({ querySelector, querySelectorAll });
+            if (isReady) {
+                resolve();
+            } else {
+                requestAnimationFrame(check);
+            }
+        };
+        requestAnimationFrame(check);
+    });
+    return element;
+}
+
+// LWC Component Testing Utilities
+export const renderLightningElement = (
+    element: LightningElement,
+    properties = {}
+) => {
+    Object.assign(element, properties);
+    document.body.appendChild(element as unknown as Node);
+    return element;
+};
+
+export const createRenderComponent = (
+    tag: string,
+    LWC: new () => LightningElement
+) => {
+    setFeatureFlagForTest('ENABLE_LIGHT_DOM_COMPONENTS', true);
+    return (properties = {}) => {
+        const component = createElement(tag, {
+            is: LWC
+        });
+
+        renderLightningElement(component, properties);
+        return component;
+    };
+};
+
+export const mockSlottedElement = <T extends HTMLElement>(
+    element: any,
+    elementType = 'button',
+    slotName?: string
+): { slottedElement: T; slot: HTMLSlotElement } => {
+    const slot: HTMLSlotElement = element.shadowRoot.querySelector(
+        `slot${slotName ? `[name='${slotName}']` : ''}`
+    );
+    expect(slot).not.toBeNull();
+
+    const slottedElement = document.createElement(elementType) as T;
+    slot.assignedElements = jest.fn(() => [slottedElement]);
+    slot.dispatchEvent(new Event('slotchange'));
+
+    return { slottedElement, slot };
+};
+
+const wait = () => new Promise((res) => setTimeout(res, 0));
+
+const renderAllShadowDoms = (element: {
+    shadowRoot: { children: HTMLElement };
+}) => {
+    if (element.shadowRoot) {
+        return element.shadowRoot.children;
+    }
+
+    return element;
+};
+
+export const toSnapshot = async <T extends Object>(
+    renderFn: Function,
+    props?: T
+) => {
+    const element = renderFn(props);
+    await wait();
+    const doc = renderAllShadowDoms(element);
+    return expect(doc).toMatchSnapshot();
+};

package/src/modules/arch/threeCardGrid/threeCardGrid.css

@@ -0,0 +1,6 @@
+/* Override the default grid template columns at tablet resolution, forcing 3 columns */
+@media screen and (min-width: 640px) {
+    dx-grid::part(container) {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}

package/src/modules/arch/threeCardGrid/threeCardGrid.html

@@ -0,0 +1,5 @@
+<template>
+    <dx-grid columns="three">
+        <slot></slot>
+    </dx-grid>
+</template>

package/src/modules/arch/threeCardGrid/threeCardGrid.ts

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class ThreeCardGrid extends LightningElement {}

package/src/modules/arch/track/track.ts

@@ -0,0 +1,23 @@
+type TrackingPayload = {
+    label?: string;
+    ctaType?: string;
+};
+
+export const track = (
+    element: HTMLElement,
+    eventName: string,
+    payload: TrackingPayload
+) => {
+    const trackEvent = new CustomEvent('trailhead_track', {
+        bubbles: true,
+        composed: true,
+        detail: {
+            eventName,
+            payload: {
+                ...payload,
+                ...{ pageLocation: element.tagName }
+            }
+        }
+    });
+    element.dispatchEvent(trackEvent);
+};

package/src/modules/arch/trailhead.ts

@@ -0,0 +1,120 @@
+/**
+ * @file Utilites for interacting with the Trailhead platform.
+ */
+import { fetch, fetchJSON, postJSON, csrfHeader } from './fetch/fetch';
+import { PollingRequest, PollingRequestInit } from './polling-request';
+import logger from './logger/logger';
+import { Org } from '../modules/th/orgPicker/types';
+
+const CSRF_WARNING =
+    'A CSRF token required for this request. Set it using fromTrailhead.configure().';
+
+const DEFAULT_BASE_URL = '';
+
+type TrailheadAPIClientInit = {
+    baseUrl?: string;
+    csrfToken?: string;
+};
+
+/**
+ * Client for interacting with Trailhead via API requests
+ * @example
+ * const fromTrailhead = new TrailheadAPIClient({ csrfToken: "XXX" });
+ * fromTrailhead.get("/user_orgs");
+ */
+export class TrailheadAPIClient {
+    baseUrl: string = DEFAULT_BASE_URL;
+    csrfToken: string | undefined;
+
+    constructor(args: TrailheadAPIClientInit = {}) {
+        this.configure(args);
+    }
+
+    configure({
+        baseUrl = process.env.API_HOST,
+        csrfToken
+    }: TrailheadAPIClientInit) {
+        this.baseUrl = baseUrl || DEFAULT_BASE_URL;
+        this.csrfToken = csrfToken;
+    }
+
+    async get<T>(path: string) {
+        return fetchJSON<T>(this.makeUrl(path));
+    }
+
+    async post<T>(path: string, body?: object) {
+        this.checkRequest();
+        return postJSON<T>(this.makeUrl(path), body, {
+            headers: { ...csrfHeader(this.csrfToken) }
+        });
+    }
+
+    async patch<T>(path: string, body?: object) {
+        this.checkRequest();
+        return postJSON<T>(this.makeUrl(path), body, {
+            method: 'PATCH',
+            headers: {
+                ...csrfHeader(this.csrfToken)
+            }
+        });
+    }
+
+    async delete<T>(path: string) {
+        this.checkRequest();
+        return fetchJSON<T>(this.makeUrl(path), {
+            method: 'DELETE',
+            headers: { ...csrfHeader(this.csrfToken) }
+        });
+    }
+
+    async poll<T>(args: PollingRequestInit<T>) {
+        return new PollingRequest<T>(args);
+    }
+
+    makeUrl(path: string) {
+        return [this.baseUrl, path]
+            .map((s) => s.replace(/^\/|\/$/g, ''))
+            .join('/');
+    }
+
+    private checkRequest() {
+        if (!this.csrfToken) {
+            logger.warn(CSRF_WARNING);
+        }
+    }
+}
+
+/**
+ * Determine if an org is reachable (after creation) by
+ * requesting open endpoints. The org is reachable if the
+ * user's client resolves the freshly propagated DNS entries.
+ */
+export async function isOrgReachable(org: Org): Promise<boolean> {
+    const subdomain = org.instance_url.split('.')[0];
+
+    const responses = await Promise.all([
+        fetch(
+            `${subdomain}.my.salesforce.com/.well-known/openid-configuration`
+        ),
+        fetch(
+            `${subdomain}--c.documentforce.com/.well-known/openid-configuration`,
+            {
+                mode: 'no-cors'
+            }
+        ),
+        fetch(
+            `${subdomain}--th-con-app.visualforce.com/.well-known/openid-configuration`,
+            {
+                mode: 'no-cors'
+            }
+        ),
+        fetch(
+            `${subdomain}.lightning.force.com/.well-known/openid-configuration`,
+            {
+                mode: 'no-cors'
+            }
+        )
+    ]).catch(() => Promise.resolve([{ status: 404 }]));
+
+    return responses.every((r) => r.status === 200 || r.status === 0);
+}

package/src/modules/arch/types.d.ts

@@ -0,0 +1 @@
+export type BooleanAttr = boolean | string | null;

package/src/modules/arch/useEffectAttr.ts

@@ -0,0 +1,16 @@
+export function useEffectAttr(fn: Function, deps: Array<string>, context: any) {
+    const prevValues = new Map<string, any>();
+    return () => {
+        const prev = deps.map((key) => prevValues.get(key));
+        const next = deps.map((key) => context[key]);
+        for (const i in prev) {
+            if (next[i] !== prev[i]) {
+                fn.call(context);
+                break;
+            }
+        }
+        for (const k of deps) {
+            prevValues.set(k, context[k]);
+        }
+    };
+}

package/src/modules/arch/utils/utils.ts

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

package/src/modules/arch/withState.ts

@@ -0,0 +1,21 @@
+import { directive, NodePart } from 'lit-html';
+
+export type WithStateState = any;
+export type WithStateSetState = (state: any) => void;
+
+/**
+ * lit-html directive for creating thin, stateful renderings
+ * @example
+ * html`${withState((state, setState) => html`state.msg`, { msg: 'hello!' })}`
+ */
+export default directive((render, initialState = {}) => (part: NodePart) => {
+    let prevState = initialState;
+
+    function setState(nextState: WithStateState) {
+        part.setValue(render({ ...prevState, ...nextState }, setState));
+        part.commit();
+        prevState = { ...prevState, ...nextState };
+    }
+
+    part.setValue(render(initialState, setState));
+});

package/src/modules/arch/xsfMfeEvents/xsfMfeEvents.html

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

package/src/modules/arch/xsfMfeEvents/xsfMfeEvents.ts

@@ -0,0 +1,47 @@
+import { LightningElement } from 'lwc';
+import { track } from 'arch/instrumentation';
+
+type EventHandler = (event: Event) => void;
+
+export default class XsfMfeEvents extends LightningElement {
+    connectedCallback() {
+        document.addEventListener(
+            'www_spasearch',
+            this.handleSearch as EventHandler
+        );
+        document.addEventListener('www_track', this.handleTrack as EventHandler);
+        document.addEventListener('toggle_global_nav', this.handleToggleGlobalNav as EventHandler);
+    }
+
+    disconnectedCallback() {
+        document.removeEventListener(
+            'www_spasearch',
+            this.handleSearch as EventHandler
+        );
+        document.removeEventListener('www_track', this.handleTrack as EventHandler);
+        document.removeEventListener('toggle_global_nav', this.handleToggleGlobalNav as EventHandler);
+    }
+
+    handleSearch = ({ target, type, detail }: CustomEvent) => {
+        const searchTerm = detail?.searchTerm;
+        track(target, type, { searchTerm });
+        if (searchTerm) {
+            window.location.href = `/search/?keywords=${encodeURIComponent(
+                searchTerm
+            )}`;
+        }
+    };
+
+    handleTrack = ({ target, detail }: CustomEvent) => {
+        const { event: eventName, ...payload } = detail;
+        track(target as EventTarget, eventName, payload);
+    };
+
+    handleToggleGlobalNav = ({ detail }: CustomEvent) => {
+        const isVisible = detail;
+        document.documentElement?.style.setProperty(
+            '--dx-g-global-header-nav-row-count',
+            isVisible ? '2' : '1'
+        );
+    };
+}

package/src/modules/arch/slot/slot.ts

@@ -1,20 +0,0 @@
-export function assignedSlotNames(template: {
-    querySelectorAll(selector: string): NodeList;
-}) {
-    let slots = Array.from(
-        template.querySelectorAll('slot')
-    ) as HTMLSlotElement[];
-    return slots
-        .filter(isSlotAssigned)
-        .map((slot) => slot.getAttribute('name') || 'default');
-}
-
-export function isSlotAssigned(slot: HTMLSlotElement): boolean {
-    let [element] = slot.assignedElements();
-    if (element) {
-        if (element.tagName === 'SLOT')
-            return isSlotAssigned(element as HTMLSlotElement);
-        return true;
-    }
-    return slot.children.length > 0;
-}