@salesforcedevs/arch-components 1.20.17-alpha8 → 1.25.0

package/src/modules/arch/heroA/heroA.html

@@ -0,0 +1,28 @@
+<template>
+    <div class={heroClassName}>
+        <div class="content">
+            <div class="content-start">
+                <h1 class="title">{title}</h1>
+                <p if:true={subtitle} class="subtitle">{subtitle}</p>
+                <slot name="cta">
+                    <arch-button-link
+                        class="cta"
+                        size="large"
+                        href={ctaHref}
+                        target={ctaTarget}
+                        if:true={ctaHref}
+                        variant={buttonVariant}
+                        onclick={handleCtaClick}
+                    >
+                        {ctaLabel}
+                    </arch-button-link>
+                </slot>
+            </div>
+            <div if:true={imgSrc} class={contentEndClassName}>
+                <picture>
+                    <img alt="" src={imgSrc} loading="lazy" decoding="async" />
+                </picture>
+            </div>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,60 @@
+import { html } from "lit-html";
+
+export default {
+    title: "arch/arch-hero-a",
+    component: "sb-arch-hero-a",
+    parameters: {
+        chromatic: {
+            viewports: [400, 1100, 1199]
+        }
+    }
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-hero-a {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+    <sb-arch-hero-a
+        cta-href="/"
+        cta-label="CTA"
+        img-src="/images/hero-a-architect.png"
+        img-align="bottom"
+        subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+        title="Hello
+Architects"
+    ></sb-arch-hero-a>
+`;
+
+// prettier-ignore
+export const Light = () => html` ${createStyles()}
+    <sb-arch-hero-a
+        background="light"
+        cta-href="/"
+        cta-label="CTA"
+        img-src="/images/hero-a-architect.png"
+        img-align="bottom"
+        subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+        title="Hello
+Architects"
+    ></sb-arch-hero-a>
+`;
+
+// prettier-ignore
+export const Dark = () => html` ${createStyles()}
+    <sb-arch-hero-a
+        background="dark"
+        cta-href="/"
+        cta-label="CTA"
+        img-src="/images/hero-a-architect.png"
+        img-align="bottom"
+        subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+        title="Hello
+Architects"
+    ></sb-arch-hero-a>
+`;

package/src/modules/arch/heroA/heroA.ts

@@ -0,0 +1,53 @@
+import { api, LightningElement } from 'lwc';
+import { track } from 'arch/track';
+
+const widths = [820, 640, 320, 75];
+
+export default class extends LightningElement {
+    @api background: 'white' | 'dark' | 'light' = 'white';
+    @api ctaHref: string | undefined;
+    @api ctaLabel: string | undefined;
+    @api ctaTarget: string | undefined;
+    @api imgSrc: string | undefined;
+    @api imgAlign: 'bottom' | 'center' = 'center';
+    @api subtitle: string | undefined;
+    @api title: string = '';
+
+    private get buttonVariant() {
+        return this.background === 'dark' ? 'neutral' : 'brand';
+    }
+
+    private get heroClassName() {
+        return `hero hero--${this.background}`;
+    }
+
+    private get contentEndClassName() {
+        return `content-end content-end--${this.imgAlign}`;
+    }
+
+    private handleCtaClick() {
+        track(this.template.host, 'cta_clicked', {
+            ctaType: 'primary',
+            label: this.ctaLabel
+        });
+    }
+
+    private get imgSrcSetWebP() {
+
+        if(this.isRemoteImage){
+            return this.imgSrc;
+        } 
+            const imgType = this.imgSrc.split('.').pop();
+            const imgName = this.imgSrc.replace(`.${imgType}`, '');
+            const srcSet: string[] = [];
+            widths.forEach((width) => {
+                srcSet.push(`${imgName}-${width}w.webp ${width}w`);
+            });
+            return srcSet.join(',');
+        
+    }
+
+    private get isRemoteImage() {
+        return /^(https?:\/\/|\/\/)/i.test(this.imgSrc);
+    }
+}

package/src/modules/arch/heroB/heroB.css

@@ -0,0 +1,79 @@
+@import "arch/reset";
+
+a {
+    text-decoration: none;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    max-height: 100px;
+}
+
+.hero-white {
+    background-color: var(--arch-color-white);
+    color: var(--arch-color-black);
+}
+
+.hero-dark {
+    background-color: var(--arch-color-theme-dark);
+    color: var(--arch-color-white);
+}
+
+.hero-blue {
+    background-color: var(--arch-color-blue-ninety-five);
+    color: var(--arch-color-black);
+}
+
+.hero-light {
+    background-color: var(--arch-color-theme-light);
+    color: var(--arch-color-black);
+}
+
+.hero-bright {
+    background-color: var(--arch-color-theme-bright);
+    color: var(--arch-color-black);
+}
+
+.content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--arch-spacing-6) 0;
+    text-align: center;
+    min-height: 448px;
+    max-width: 600px;
+    margin: auto;
+}
+
+.content > * + * {
+    margin-top: var(--arch-spacing-4);
+}
+
+.title {
+    font-family: Neutraface, sans-serif;
+    font-size: var(--arch-font-size-6xl);
+    line-height: 1;
+    white-space: pre-line;
+}
+
+.subtitle {
+    line-height: 1.5;
+    margin: var(--arch-spacing-2) 0;
+    font-size: var(--arch-font-size-xl);
+}
+
+.cta {
+    margin-top: var(--arch-spacing-2);
+}
+
+@media screen and (max-width: 1280px) {
+    .hero {
+        padding: 0 var(--arch-spacing-4);
+    }
+}
+
+@media screen and (max-width: 768px) {
+    /* Empty media query block */
+}

package/src/modules/arch/heroB/heroB.html

@@ -0,0 +1,27 @@
+<template>
+    <div class={heroClassName} style={backgroundStyle}>
+        <div class="content">
+            <img
+                alt=""
+                if:true={imgSrc}
+                src={imgSrc}
+                loading="lazy"
+                decoding="async"
+            />
+            <h1 class="title">{title}</h1>
+            <p class="subtitle" if:true={subtitle}>{subtitle}</p>
+            <slot name="cta">
+                <arch-button-link
+                    class="cta"
+                    size="large"
+                    href={ctaHref}
+                    target={ctaTarget}
+                    if:true={ctaHref}
+                    variant={buttonVariant}
+                >
+                    {ctaLabel}
+                </arch-button-link>
+            </slot>
+        </div>
+    </div>
+</template>

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

@@ -0,0 +1,55 @@
+import { html } from "lit-html";
+
+export default {
+    title: "arch/arch-hero-b",
+    component: "sb-arch-hero-b",
+    parameters: {
+        chromatic: {
+            viewports: [400, 1199]
+        }
+    }
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-hero-b {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+  <sb-arch-hero-b
+    cta-href="/"
+    cta-label="CTA"
+    img-src="/images/hero-b.png"
+    subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+    title="Hello Architects"
+  ></sb-arch-hero-b>
+`;
+
+// prettier-ignore
+export const Light = () => html` ${createStyles()}
+  <sb-arch-hero-b
+    background="light"
+    cta-href="/"
+    cta-label="CTA"
+    img-src="/images/hero-b.png"
+    subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+    title="Hello Architects"
+  ></sb-arch-hero-b>
+`;
+
+// prettier-ignore
+export const Dark = () => html` ${createStyles()}
+  <sb-arch-hero-b
+    background="dark"
+    background-src="/images/architect-bg.svg"
+    cta-href="/"
+    cta-label="CTA"
+    img-src="/images/hero-b.png"
+    subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
+    title="Hello Architects"
+  ></sb-arch-hero-b>
+`;

package/src/modules/arch/heroB/heroB.ts

@@ -0,0 +1,26 @@
+import { api, LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    @api background: 'white' | 'dark' | 'light' = 'white';
+    @api backgroundSrc: string | undefined;
+    @api ctaHref: string | undefined;
+    @api ctaLabel: string | undefined;
+    @api ctaTarget: string | undefined;
+    @api imgSrc: string | undefined;
+    @api subtitle: string | undefined;
+    @api title: string = '';
+
+    private get buttonVariant() {
+        return this.background === 'dark' ? 'neutral' : 'brand';
+    }
+
+    private get heroClassName() {
+        return `hero hero--${this.background}`;
+    }
+
+    private get backgroundStyle() {
+        return this.backgroundSrc
+            ? `background-image: url(${this.backgroundSrc})`
+            : '';
+    }
+}

package/src/modules/arch/i18n/i18n.ts

@@ -0,0 +1,78 @@
+/**
+ * @file Provides a localization service
+ */
+import i18n from 'i18n-js';
+
+export type Locale = 'de' | 'en' | 'es-MX' | 'fr' | 'ja' | 'pt-BR';
+
+type Labels = {
+    [key: string]: string;
+};
+
+type Locales = {
+    [locale in Locale]?: {
+        [key: string]: Labels | string;
+    };
+};
+
+type Scope = {
+    [scopeName: string]: Locales;
+};
+
+i18n.defaultLocale = 'en';
+i18n.fallbacks = true;
+
+export function toLocaleKey(value: string) {
+    return value.replace(
+        /([a-z]{2,3})(?:[_-])?([A-Z]{2})/g,
+        (_, lang, country) => `${lang}-${country.toUpperCase()}`
+    );
+}
+
+let guid = 0;
+
+/**
+ * @class I18n
+ * @example
+ * import { I18n } from "shared/i18n";
+ * import labels from "./locales";
+ * const i18n = new I18n({ scopeName: labels });
+ * i18n.t("en", "scopeName", "foo.bar");
+ */
+export class I18n {
+    private id = guid++;
+
+    constructor(scope?: Scope) {
+        if (scope) {this.addScope(scope);}
+    }
+
+    t(
+        locale: string,
+        scope: string,
+        key: string,
+        options?: i18n.TranslateOptions
+    ) {
+        // i18n-js is a singleton, so setting locale on each call is required to
+        // avoid overriding the locale of other components' call to this function
+        i18n.locale = locale;
+        return i18n.t(`${scope}_${this.id}.${key}`, options);
+    }
+
+    addScope(scope: Scope) {
+        for (const [scopeName, locales] of Object.entries(scope)) {
+            if (Object.prototype.hasOwnProperty.call(scope, scopeName)) {
+                for (const [locale, labels] of Object.entries(locales)) {
+                    if (Object.prototype.hasOwnProperty.call(locales, locale)) {
+                        // Modules can only export indentifiers, so we transform the key
+                        // "esMX" => "es-MX"
+                        const localeKey = toLocaleKey(locale);
+                        i18n.translations[localeKey] = {
+                            ...i18n.translations[localeKey],
+                            [`${scopeName}_${this.id}`]: labels
+                        };
+                    }
+                }
+            }
+        }
+    }
+}

package/src/modules/arch/icon/icon.css

@@ -0,0 +1,28 @@
+@import "arch/reset";
+
+svg {
+    display: block;
+    fill: currentcolor;
+    height: var(--icon-size);
+    width: var(--icon-size);
+}
+
+.size-x-small {
+    --icon-size: var(--arch-spacing-3);
+}
+
+.size-small {
+    --icon-size: var(--arch-spacing-4);
+}
+
+.size-medium {
+    --icon-size: var(--arch-spacing-5);
+}
+
+.size-large {
+    --icon-size: var(--arch-spacing-6);
+}
+
+.size-xlarge {
+    --icon-size: var(--arch-spacing-10);
+}

package/src/modules/arch/icon/icon.html

@@ -0,0 +1,17 @@
+<template>
+    <svg
+        aria-hidden="true"
+        class={className}
+        if:false={context.crossOriginAssets}
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <use xlink:href={href}></use>
+    </svg>
+    <svg
+        aria-hidden="true"
+        class={className}
+        if:true={context.crossOriginAssets}
+        lwc:dom="manual"
+        xmlns="http://www.w3.org/2000/svg"
+    ></svg>
+</template>

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

@@ -0,0 +1,26 @@
+import { html } from "lit-html";
+
+export default {
+    title: "arch/arch-icon",
+    component: "sb-arch-icon"
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-icon {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+    <sb-arch-icon size="large" symbol="edit"></sb-arch-icon>
+`;
+
+// prettier-ignore
+export const Action = () => html` ${createStyles()}
+    <div style="color: red">
+        <sb-arch-icon size="large" sprite="action" symbol="check"></sb-arch-icon>
+    </div>
+`;

package/src/modules/arch/icon/icon.ts

@@ -0,0 +1,92 @@
+import { api, LightningElement, wire } from "lwc";
+import { ContextAdapter, ContextAdapterValue } from "arch/contextAdapter";
+
+/* ROLLUP_PLATFORM
+import * as iconUtils from 'lightning/iconUtils';
+*/
+
+type Size = "x-small" | "small" | "medium" | "large" | "xlarge" | "override";
+
+type Sprite =
+    | "action"
+    | "custom"
+    | "doctype"
+    | "social"
+    | "social-round"
+    | "utility";
+
+const fetches = new Map<string, Promise<any>>();
+
+export default class extends LightningElement {
+    @api sprite: Sprite = "utility";
+    @api size: Size = "medium";
+    @api symbol: string = "";
+
+    private node: SVGSymbolElement | undefined;
+
+    // eslint-disable-next-line @lwc/lwc/no-unknown-wire-adapters
+    @wire(ContextAdapter)
+    private context: ContextAdapterValue = null!;
+
+    private get className() {
+        return `size--${this.size}`;
+    }
+
+    private get href() {
+        /* ROLLUP_PLATFORM
+    return iconUtils.getIconPath(`${this.sprite}:${this.symbol}`);
+    */
+        return `${this.context.assetsUrl}/icons/${this.sprite}-sprite/svg/symbols.svg#${this.symbol}`;
+    }
+
+    private get symbolId() {
+        return `tds__${this.sprite}__${this.symbol}`;
+    }
+
+    renderedCallback() {
+        if (this.context.crossOriginAssets) {
+            this.appendNodes();
+        }
+    }
+
+    private async appendNodes() {
+        if (process.env.NODE_ENV === "test") {
+            return;
+        }
+        const { symbolId } = this;
+        if (this.node && this.node.id === symbolId) {
+            return;
+        }
+        await this.fetchSprite(this.sprite);
+        const svg = this.template.querySelector("svg")!;
+        const node = document
+            .getElementById(symbolId)!
+            .cloneNode(true) as SVGSymbolElement;
+        while (svg.firstChild) {
+            svg.removeChild(svg.firstChild);
+        }
+        for (const n of Array.from(node.childNodes)) {
+            svg.appendChild(n);
+        }
+        svg.setAttribute("viewBox", node.getAttribute("viewBox")!);
+    }
+
+    private async fetchSprite(sprite: Sprite) {
+        if (fetches.has(sprite)) {
+            return fetches.get(sprite);
+        }
+        const promise = fetch(
+            `${this.context.assetsUrl}/icons/${this.sprite}-sprite/svg/symbols.svg`
+        )
+            .then((res) => res.text())
+            .then((svg) => svg.replace(/id="/g, `id="tds__${sprite}__`))
+            .then((svg) => {
+                const node = document.createElement("div");
+                node.innerHTML = svg;
+                node.style.display = "none";
+                document.body.appendChild(node);
+            });
+        fetches.set(sprite, promise);
+        return promise;
+    }
+}

package/src/modules/arch/instrumentation/instrumentation.css

@@ -0,0 +1 @@
+/* Instrumentation styles */

package/src/modules/arch/instrumentation/instrumentation.html

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

package/src/modules/arch/instrumentation/instrumentation.ts

@@ -0,0 +1,113 @@
+import { LightningElement, api } from 'lwc';
+
+const TRACKING_EVENT_NAME = 'architectssite_track';
+const LISTENER_QUEUE = '__TDS_INSTRUMENTATION_QUEUE__';
+const LISTENER_INDICATOR = '__TDS_INSTRUMENTATION_IS_INITIALIZED__';
+
+export function track(
+    element: EventTarget,
+    event: string,
+    payload: Record<string, unknown>
+): void {
+    const detail = { event, payload };
+    // if window.LISTENER_INDICATOR is undefined, `arch-instrumentation` has not
+    // been mounted, and the listener hasn't been attached.
+    if ((window as any)[LISTENER_INDICATOR] === undefined) {
+        (window as any)[LISTENER_QUEUE] = (window as any)[LISTENER_QUEUE] || [];
+        (window as any)[LISTENER_QUEUE].push(detail);
+    } else {
+        const e = new CustomEvent(TRACKING_EVENT_NAME, {
+            bubbles: true,
+            composed: true,
+            detail
+        });
+        element.dispatchEvent(e);
+    }
+}
+
+const googleTagManager = {
+    track: function (e: Event) {
+        if ((window as any).dataLayer === undefined) {
+            (window as any).dataLayer = [];
+        }
+        const { event, payload } = (e as CustomEvent).detail;
+        (window as any).dataLayer.push({ ...payload, event });
+    }
+};
+
+interface TrackEventListener {
+    add: () => void;
+    remove: () => void;
+}
+
+export function trackEventListener(
+    trackerFns: { track: (e: Event) => void }[] = []
+): TrackEventListener {
+    if (trackerFns.length === 0) {
+        throw new Error('No tracker functions passed');
+    }
+
+    const trackWebEvent = (e: Event) => {
+        trackerFns.forEach((tracker) => {
+            tracker.track(e);
+        });
+    };
+
+    const attachEventListener = () => {
+        document.addEventListener(TRACKING_EVENT_NAME, trackWebEvent);
+    };
+
+    const removeEventListener = () => {
+        document.removeEventListener(TRACKING_EVENT_NAME, trackWebEvent);
+    };
+
+    return {
+        add: attachEventListener,
+        remove: removeEventListener
+    };
+}
+
+export default class Instrumentation extends LightningElement {
+    @api useGoogleTagManager = false;
+
+    private tracker: TrackEventListener | null = null;
+
+    private setupTracker() {
+        const trackerFunctions = this.useGoogleTagManager
+            ? [googleTagManager]
+            : [];
+        this.tracker = trackEventListener(trackerFunctions);
+        this.tracker.add();
+        (window as any)[LISTENER_INDICATOR] = true;
+    }
+
+    private dispatchQueuedEvents() {
+        while ((window as any)[LISTENER_QUEUE].length > 0) {
+            const event = (window as any)[LISTENER_QUEUE].pop() as {
+                event: string;
+                payload: Record<string, unknown>;
+            };
+            track(this, event.event, event.payload);
+        }
+    }
+
+    renderedCallback() {
+        if (this.tracker === null) {
+            this.setupTracker();
+
+            if (
+                (window as any)[LISTENER_QUEUE] !== undefined &&
+                (window as any)[LISTENER_QUEUE].length > 0
+            ) {
+                this.dispatchQueuedEvents();
+            }
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.tracker !== null) {
+            this.tracker.remove();
+            this.tracker = null;
+        }
+    }
+}