@salesforcedevs/arch-components 1.20.17-alpha14 → 1.20.17-alpha16

package/src/modules/arch/content/content.ts

@@ -0,0 +1,169 @@
+import { api, LightningElement, track } from 'lwc';
+import { createImageUrl, sendInteractionEvent, InteractionEventTypes } from 'arch/helpers';
+
+const ARCHITECT_BASE_REGEX = /^https?:\/\/([\w-]*\.)?architect/; // matches roughly any subdomain of architect
+
+export default class extends LightningElement {
+    private observer!: MutationObserver;
+    private didSetContent = false;
+
+    @api socialTitle: string | null = null;
+    @api lastUpdated: string | null = null;
+    @api readingTime: string | null = null;
+    @api navHidden: string | null = null;
+    @api imageHash: string | null = null;
+
+    @track private headings: {
+        href: string;
+        id: string;
+        label: string;
+    }[] = [];
+
+    private get showHeadingsNav() {
+        return this.navHidden === null && this.headings.length > 0;
+    }
+
+    private get rootClassName() {
+        return 'root';
+    }
+
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            this.setContent();
+        });
+        this.observer.observe(this.template.host, {
+            characterData: true,
+            childList: true,
+            subtree: true
+        });
+        this.setContent();
+        const that = this;
+        window.addEventListener('hashchange', function locationHashChanged() {
+            const heading: HTMLElement | null = that.template.querySelector(`[id="${window.location.hash.substring(1)}"]`);
+            if (heading) {
+                heading.style.scrollMarginTop = `var(--dx-g-global-header-height)`; // required adjustment for global nav
+                heading.scrollIntoView({
+                    behavior: 'instant', // we can't use smooth here anymore, because the global nav MFE resizes itself and messes up scrolling
+                    block: "start",
+                });
+            }
+        });
+    }
+
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+
+    renderedCallback() {
+        if (!this.didSetContent) {
+            this.didSetContent = true;
+            this.setContent();
+            if (window.location.hash) {
+                this.scrollToHash(window.location.hash);
+            }
+        }
+    }
+
+    private onHeadingClick(e: MouseEvent) {
+        const anchor = e.currentTarget as HTMLAnchorElement;
+        this.scrollToHash(anchor.hash);
+    }
+
+    private onContentClick(e: MouseEvent) {
+        const element = e.target as HTMLElement;
+        const targetIsImage =
+            element instanceof HTMLImageElement &&
+            element.parentElement instanceof HTMLAnchorElement;
+
+        if (element instanceof HTMLAnchorElement || targetIsImage) {
+            const anchorEl = targetIsImage ? element.parentElement : element;
+            const url = new URL(
+                anchorEl.href || element.src,
+                window.location.protocol + '//' + window.location.host
+            );
+            const filename = url.pathname.substr(
+                url.pathname.lastIndexOf('/') + 1
+            );
+
+            if (anchorEl.hasAttribute('download') || filename.includes('.')) {
+                const regexImg = new RegExp(/[^\s]+(.*?).(jpg|jpeg|png|gif|JPG|JPEG|PNG|GIF|webp)$/);
+                if (regexImg.test(filename)) {
+                    sendInteractionEvent('Image Click', InteractionEventTypes.IMAGE_CLICK, e, element)
+                } else {
+                    sendInteractionEvent('File Download', InteractionEventTypes.FILE_DOWNLOAD, e, anchorEl)
+                }
+            } else if (anchorEl.target) {
+                sendInteractionEvent('Link Click', InteractionEventTypes.CLICK, e, anchorEl);
+            }
+        }
+    }
+
+    private scrollToHash(hash: string) {
+        const heading: HTMLElement | null = this.template.querySelector(`[id="${hash.split('?')[0].substring(1)}"]`);
+        if (heading) {
+            heading.style.scrollMarginTop = `var(--dx-g-global-header-height)`; // required adjustment for global nav
+            heading.scrollIntoView({
+                behavior: "instant",
+                block: "start",
+            });
+        }
+    }
+
+    private setContent() {
+        const main = this.template.querySelector('main');
+        if (main) {
+            main.innerHTML = this.template.host.innerHTML.replace(
+                /(<table>[\s\S]+?<\/table>)/g,
+                `<div class="table">$1</div>`
+            );
+            this.headings = Array.from(main.querySelectorAll('h2,h3')).map(
+                (n) => {
+                    const label = n.innerText.trim();
+                    const id = label.replace(/[^a-zA-Z0-9]/g, '_');
+                    const href = `#${id}`;
+                    const style =
+                        n.tagName === 'H3' ? 'padding-left: 1.25rem' : '';
+                    // Side effects in map ftw
+                    n.id = id;
+                    return { href, id, label, style };
+                }
+            );
+            Array.from(main.querySelectorAll('a')).forEach((el) => {
+                if (
+                    !el.href.startsWith('/') &&
+                    !ARCHITECT_BASE_REGEX.test(el.href) &&
+                    !el.href.startsWith('about:blank#') &&
+                    !el.href.startsWith('http://localhost') &&
+                    !el.href.startsWith('https://sfdc.co') &&
+                    !el.href.startsWith('https://sf-archs.cdn.salesforce-experience.com') &&
+                    !el.href.includes('herokuapp.com')
+                ) {
+                    const doc = el.ownerDocument;
+                    const img = doc.createElement('img');
+                    img.src = 'https://a.sfdcstatic.com/developer-website/images/architect/new_window.svg';
+                    img.style =
+                        'display: inline;height: 1.2rem;margin:0 0 0 5px;';
+                    img.alt = 'Open link in new window';
+                    el.appendChild(img);
+                    el.target = '_blank';
+                    el.rel = 'noopener';
+                }
+            });
+            Array.from(main.querySelectorAll('img')).forEach((el) => {
+                el.src = createImageUrl(el.src, this.imageHash);
+            });
+        }
+    }
+
+    private get showScroll() {
+        return parseInt(this.readingTime, 10) > 4;
+    }
+
+    private onScrollClick() {
+        window.scroll({
+            top: 0,
+            left: 0,
+            behavior: 'smooth'
+        });
+    }
+}

package/src/modules/arch/contentIcon/contentIcon.css

@@ -0,0 +1,48 @@
+@import "arch/reset";
+
+.image-container {
+    border-radius: var(--arch-radius-lg);
+    position: relative;
+}
+
+.image {
+    border-radius: var(--arch-radius-lg);
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
+.icon {
+    align-self: center;
+    color: var(--arch-color-white);
+    display: flex;
+    background-color: var(--arch-color-evergreen);
+    border-radius: var(--arch-radius-full);
+    border: 3px solid var(--arch-color-white);
+    box-sizing: border-box;
+    justify-content: center;
+    height: var(--size);
+    position: absolute;
+    right: -10px;
+    top: -4px;
+    width: var(--size);
+}
+
+.icon-small,
+.icon-medium {
+    --size: 30px;
+}
+
+.icon-large,
+.icon-xlarge {
+    --size: 38px;
+}
+
+.icon-svg {
+    --icon-size: 100%;
+
+    height: 60%;
+    margin: auto;
+    width: 60%;
+}

package/src/modules/arch/contentIcon/contentIcon.html

@@ -0,0 +1,15 @@
+<template>
+    <div class="image-container" style={imageContainerStyles}>
+        <img src={src} class="image" alt="" loading="lazy" decoding="async" />
+        <template if:true={checked}>
+            <div class={iconClassName}>
+                <arch-icon
+                    class="icon-svg"
+                    size="override"
+                    sprite="action"
+                    symbol="check"
+                ></arch-icon>
+            </div>
+        </template>
+    </div>
+</template>

package/src/modules/arch/contentIcon/contentIcon.stories.js

@@ -0,0 +1,130 @@
+import { html } from "lit-html";
+
+export default {
+    title: "arch/arch-content-icon",
+    component: "sb-arch-content-icon"
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-content-icon {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+    <sb-arch-content-icon src="/images/badge-1.png"></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const BaseChecked = () => html` ${createStyles()}
+    <sb-arch-content-icon
+        .checked=${true}
+        src="/images/badge-1.png"
+    ></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const BaseSmall = () => html` ${createStyles()}
+    <sb-arch-content-icon size="small" src="/images/badge-1.png"></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const BaseSmallChecked = () => html` ${createStyles()}
+    <sb-arch-content-icon
+        .checked=${true}
+        size="small"
+        src="/images/badge-1.png"
+    ></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const BaseLarge = () => html` ${createStyles()}
+    <sb-arch-content-icon size="large" src="/images/badge-1.png"></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const BaseLargeChecked = () => html` ${createStyles()}
+    <sb-arch-content-icon
+        .checked=${true}
+        size="large"
+        src="/images/badge-1.png"
+    ></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const BaseXLarge = () => html` ${createStyles()}
+    <sb-arch-content-icon
+        size="xlarge"
+        src="/images/badge-1.png"
+    ></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const BaseXLargeChecked = () => html` ${createStyles()}
+    <sb-arch-content-icon
+        .checked=${true}
+        size="xlarge"
+        src="/images/badge-1.png"
+    ></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const Trail = () => html` ${createStyles()}
+    <sb-arch-content-icon
+        .background=${true}
+        color="rgb(221, 49, 49)"
+        src="/images/badge-trail-1.png"
+    ></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const TrailChecked = () => html` ${createStyles()}
+    <sb-arch-content-icon
+        .background=${true}
+        color="rgb(221, 49, 49)"
+        .checked=${true}
+        src="/images/badge-trail-1.png"
+    ></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const TrailSmall = () => html` ${createStyles()}
+    <sb-arch-content-icon
+        .background=${true}
+        color="rgb(221, 49, 49)"
+        size="small"
+        src="/images/badge-trail-1.png"
+    ></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const TrailLarge = () => html` ${createStyles()}
+    <sb-arch-content-icon
+        .background=${true}
+        color="rgb(221, 49, 49)"
+        size="large"
+        src="/images/badge-trail-1.png"
+    ></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const Trailmix = () => html` ${createStyles()}
+    <sb-arch-content-icon
+        .background=${true}
+        size="large"
+        src="/images/trailblazer-1.png"
+    ></sb-arch-content-icon>
+`;
+
+// prettier-ignore
+export const TrailmixComplete = () => html` ${createStyles()}
+    <sb-arch-content-icon
+        .background=${true}
+        size="large"
+        .checked=${true}
+        src="/images/trailblazer-1.png"
+    ></sb-arch-content-icon>
+`;

package/src/modules/arch/contentIcon/contentIcon.ts

@@ -0,0 +1,68 @@
+import { api, LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    @api background: boolean = false;
+    @api checked: boolean = false;
+    @api color: string | null = null;
+    @api size: 'small' | 'medium' | 'large' | 'xlarge' = 'medium';
+    _src: string;
+
+    @api
+    get src() {
+        return this._src;
+    }
+    set src(value) {
+        const cms = value?.indexOf('sf-archs');
+        if (cms !== -1) {
+            this._src = `https://${value.substring(value.indexOf('sf-archs'))}`;
+        } else {
+            this._src = value;
+        }
+    }
+    private get imageSize() {
+        switch (this.size) {
+            case 'small':
+                return 64;
+            case 'medium':
+                return 72;
+            case 'large':
+                return 96;
+            case 'xlarge':
+                return 128;
+            default:
+                return 72;
+        }
+    }
+
+    private get imageContainerStyles() {
+        const styles = `height: ${this.imageSize}px; width: ${this.imageSize}px;`;
+        if (this.background) {
+            return [styles, `background-color: ${this.color};`].join(' ');
+        }
+        return styles;
+    }
+
+    private get iconClassName() {
+        return `icon icon--${this.size}`;
+    }
+
+    private get imgSrcSetWebP() {
+        const imgType = this.src.split('.').pop();
+        const imgName = this.src.replace(`.${imgType}`, '');
+        return `${imgName}-search.webp 75w`;
+    }
+
+    private get imgSrcSetJpg() {
+        const imgType = this.src.split('.').pop();
+        const imgName = this.src.replace(`.${imgType}`, '');
+        return `${imgName}-search.jpg 75w`;
+    }
+
+    private get imgTagNoSvg() {
+        return !this.src.toLowerCase().endsWith('svg');
+    }
+
+    private get imgTagSvg() {
+        return this.src.toLowerCase().endsWith('svg');
+    }
+}

package/src/modules/arch/context/context.ts

@@ -11,7 +11,7 @@ import {
 import { EffectAdapter } from "arch/effectAdapter";
 
 export interface ContextWireAdapter<Value, Config, Context>
-    extends WireAdapter<Value, Config, Context> {
+    extends WireAdapter<Config, Context> {
     value: Value;
 }
 export interface ContextWireAdapterConstructor<Value, Config, Context> {

package/src/modules/arch/contextAdapter/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_LOCALE = 'en';

package/src/modules/arch/contextAdapter/contextAdapter.html

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

package/src/modules/arch/contextAdapter/contextAdapter.ts

@@ -0,0 +1,54 @@
+import { Locale } from 'arch/i18n';
+import { DEFAULT_LOCALE } from './constants';
+import { createContextAdapter } from 'arch/context';
+
+type Nullable<T> = T | null;
+
+export type ContextAdapterValue = {
+    crossOriginAssets: boolean;
+    assetsUrl: string;
+    locale: Locale;
+};
+
+export type ContextAdapterConfig = {
+    crossOriginAssets?: Nullable<boolean>;
+    assetsUrl?: Nullable<string>;
+    locale?: Nullable<Locale>;
+};
+
+export type ContextAdapterContext = {
+    crossOriginAssets?: Nullable<boolean>;
+    assetsUrl?: Nullable<string>;
+    locale?: Nullable<Locale>;
+};
+
+export const ContextAdapter = createContextAdapter<
+    ContextAdapterValue,
+    ContextAdapterConfig,
+    ContextAdapterContext
+>(
+    () => {
+        return {
+            crossOriginAssets: process.env.CROSS_ORIGIN_ASSETS === 'true',
+            // See `rollup.config.js` for more explanation of this variable
+            // If set, we trim everything after /modules to get the absolute assets url on `th-components`
+            // If not, we default to the relative assets url on `th-components`
+            assetsUrl: process.env.IMPORT_META_URL
+                ? String(process.env.IMPORT_META_URL).replace(/\/modules.*/, '')
+                : '/assets/images',
+            locale: getDefaultLocale()
+        };
+    },
+    {
+        assetsUrl: 'optional',
+        crossOriginAssets: 'optional',
+        locale: 'optional'
+    }
+);
+
+export const { setGlobalContext, setDefaultValue } = ContextAdapter;
+
+function getDefaultLocale() {
+    // @ts-ignore
+    return window.locale || DEFAULT_LOCALE;
+}

package/src/modules/arch/debounce/debounce.ts

@@ -0,0 +1,32 @@
+type Procedure = (...args: any[]) => void;
+
+type Options = {
+    isImmediate: boolean;
+};
+
+export function debounce<F extends Procedure>(
+    func: F,
+    waitMilliseconds = 50,
+    options: Options = {
+        isImmediate: false
+    }
+): F {
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+    return function (this: any, ...args: any[]) {
+        const context = this;
+        const doLater = function () {
+            timeoutId = undefined;
+            if (!options.isImmediate) {
+                func.apply(context, args);
+            }
+        };
+        const shouldCallNow = options.isImmediate && timeoutId === undefined;
+        if (timeoutId !== undefined) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(doLater, waitMilliseconds);
+        if (shouldCallNow) {
+            func.apply(context, args);
+        }
+    } as any;
+}

package/src/modules/arch/dialog/dialog.ts

@@ -0,0 +1,154 @@
+import {
+    Instance as PopperInstance,
+    Placement as PopperPlacement
+} from '@popperjs/core';
+
+export type DialogState = {
+    isOpen?: boolean;
+};
+
+export type Placement =
+    | 'top'
+    | 'top left'
+    | 'top right'
+    | 'right'
+    | 'right top'
+    | 'right bottom'
+    | 'bottom'
+    | 'bottom left'
+    | 'bottom right'
+    | 'left'
+    | 'left top'
+    | 'left bottom';
+
+const DEFAULT_PLACEMENT = 'top';
+const NUBBIN_SIZE = 14;
+
+export class Dialog {
+    constructor(
+        private trigger: HTMLElement,
+        private dialog: HTMLElement,
+        private options: {
+            placement?: Placement;
+            onChange?: (Partial: DialogState) => void;
+        } = {}
+    ) {
+        this.create();
+    }
+
+    popper: PopperInstance | null = null;
+
+    private _state: DialogState = { isOpen: false };
+
+    get state(): DialogState {
+        return this._state;
+    }
+
+    set state(nextState: DialogState) {
+        this._state = { ...this._state, ...nextState };
+
+        if (this.options.onChange) {
+            this.options.onChange(this.state);
+        }
+    }
+
+    private async create() {
+        const modifiers = [
+            {
+                name: 'flip',
+                options: {
+                    padding: NUBBIN_SIZE
+                }
+            },
+            {
+                name: 'hide',
+                enabled: false
+            },
+            {
+                name: 'preventOverflow',
+                options: {
+                    padding: {
+                        top: 2,
+                        bottom: 2,
+                        left: 5,
+                        right: 5
+                    }
+                }
+            },
+            {
+                name: 'offset',
+                options: {
+                    offset: ({ placement, reference }: any) => {
+                        if (placement.match(/^(top|bottom)/)) {
+                            return [0, NUBBIN_SIZE];
+                        }
+
+                        if (placement.match(/end?/)) {
+                            return [(reference.height / 2) * 1, NUBBIN_SIZE];
+                        }
+
+                        if (placement.match(/start?/)) {
+                            return [(reference.height / 2) * -1, NUBBIN_SIZE];
+                        }
+
+                        return [0, NUBBIN_SIZE];
+                    }
+                }
+            }
+        ];
+        const { createPopper } = await import('@popperjs/core');
+
+        this.popper = createPopper(this.trigger, this.dialog, {
+            placement: this.getPlacement(this.options.placement),
+            modifiers
+        });
+
+        // Show
+        this.trigger.addEventListener('mouseenter', this.show.bind(this));
+        this.trigger.addEventListener('focusin', this.show.bind(this));
+
+        // Hide
+        this.trigger.addEventListener('mouseleave', this.hide.bind(this));
+        this.trigger.addEventListener('focusout', this.hide.bind(this));
+    }
+
+    destroy() {
+        this.popper!.destroy();
+        this.popper = null;
+    }
+
+    private async show() {
+        await this.popper!.update();
+        this.state = { isOpen: true };
+    }
+
+    private hide() {
+        this.state = { isOpen: false };
+    }
+
+    // Map the "placement" property used by SLDS to the correct Popper "placement"
+    private getPlacement(
+        placement: Placement = DEFAULT_PLACEMENT
+    ): PopperPlacement {
+        switch (placement) {
+            case 'top left':
+                return 'top-start';
+            case 'top right':
+                return 'top-end';
+            case 'right top':
+                return 'right-start';
+            case 'right bottom':
+                return 'right-end';
+            case 'bottom left':
+                return 'bottom-start';
+            case 'bottom right':
+                return 'bottom-end';
+            case 'left top':
+                return 'left-start';
+            case 'left bottom':
+                return 'left-end';
+            default:
+                return placement;
+        }
+    }
+}