@salesforcedevs/arch-components 1.20.17-alpha8 → 1.25.0

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/{common → modules/arch}/context/context.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @lwc/lwc/no-disallowed-lwc-imports */
 import {
     ContextConsumer,
     createContextProvider,
@@ -5,12 +6,12 @@ import {
     LightningElement,
     wire,
     WireAdapter
-} from 'lwc';
+} from "lwc";
 
-import { EffectAdapter } from 'common/effectAdapter';
+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> {
@@ -86,35 +87,24 @@ export function createContextAdapter<Value, Config, Context>(
 function compactConfig<T>(config?: T) {
     return Object.fromEntries(
         Object.entries({ ...config }).filter(
-            ([key, value]) => typeof value !== 'undefined' && value !== null
+            ([, value]) => typeof value !== "undefined" && value !== null
         )
     );
 }
 
-export function createBaseContextProviderElement<Value, Config, Context>(
-    adapterClass: ContextWireAdapterConstructor<Value, Config, Context>
-) {
-    const contextualizer = createContextProvider(adapterClass);
-
-    return class ProviderElement extends BaseProvider<Context> {
-        public get contextualizer() {
-            return contextualizer;
-        }
-    };
-}
-
 class BaseProvider<Context> extends LightningElement {
     private consumers = new Set<ContextConsumer<Context>>();
 
     public get contextualizer(): Contextualizer<Context> {
-        throw new Error('contextualizer not implenented');
+        throw new Error("contextualizer not implenented");
     }
 
+    // eslint-disable-next-line @lwc/lwc/no-unknown-wire-adapters
     @wire(EffectAdapter, {
-        localContext: '$localContext'
+        localContext: "$localContext"
     })
     private updateConsumers({ localContext }: { localContext: Context }) {
-        for (let consumer of this.consumers) {
+        for (const consumer of this.consumers) {
             consumer.provide(localContext);
         }
     }
@@ -135,3 +125,15 @@ class BaseProvider<Context> extends LightningElement {
         });
     }
 }
+
+export function createBaseContextProviderElement<Value, Config, Context>(
+    adapterClass: ContextWireAdapterConstructor<Value, Config, Context>
+) {
+    const contextualizer = createContextProvider(adapterClass);
+
+    return class ProviderElement extends BaseProvider<Context> {
+        public get contextualizer() {
+            return contextualizer;
+        }
+    };
+}

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

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

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;
+}