@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/th/tbid/tbid.ts

@@ -0,0 +1,215 @@
+import { api, LightningElement } from 'lwc';
+
+import { getJSON, csrfHeader } from 'shared/fetch';
+
+export const EVENT_LOGIN = 'login';
+export const EVENT_LOGOUT = 'logout';
+
+export const TRAILHEAD_EVENT_LOGIN = 'trailhead_login';
+export const TRAILHEAD_EVENT_LOGOUT = 'trailhead_logout';
+export const TRAILHEAD_EVENT_SIGNUP = 'trailhead_signup';
+
+export const TBID_EVENT_INIT = 'tbid_will_init';
+export const TBID_EVENT_LOGIN = 'tbid_will_login';
+export const TBID_EVENT_LOGOUT = 'tbid_will_logout';
+
+export const TBID_INIT = '__tbid_init';
+export const TBID_LOGIN = '__tbid_login';
+export const TBID_LOGOUT = '__tbid_logout';
+
+export const TBID_SCRIPT_PATH = '/resource/authProviderEmbeddedLogin_v1_3';
+export const TBID_LOGOUT_PATH = '/services/auth/rp/oidc/logout';
+
+export const LOCK_KEY = 'tbid.tabAuthLock';
+export const LOCK_TIMEOUT = 5000;
+
+declare var SFIDWidget: {
+    init: () => void;
+    login: () => void;
+    logout: () => void;
+    signup: () => void;
+};
+
+export default class extends LightningElement {
+    @api authenticated: string | null = null;
+
+    @api csrfToken: string = '';
+
+    @api loginRedirectPath: string = null!;
+    @api loginStatusPath: string = null!;
+    @api loginTried: string | null = null;
+    @api logoutRedirectPath: string = null!;
+
+    @api tbidAuthProviderLoginPath: string = null!;
+    @api tbidAuthProviderSignupPath: string = null!;
+    @api tbidCommunityUri: string = null!;
+    @api tbidRedirectUri: string = null!;
+
+    private loadSFID: Promise<unknown> = null!;
+
+    private get scriptSrc() {
+        return `${this.tbidCommunityUri}${TBID_SCRIPT_PATH}`;
+    }
+
+    private get logoutIframeSrc() {
+        return `${this.tbidCommunityUri}${TBID_LOGOUT_PATH}`;
+    }
+
+    connectedCallback() {
+        this.appendMetaTag('salesforce-cache-max-age', '0');
+        this.appendMetaTag('salesforce-brand', 'trailhead');
+        this.appendMetaTag('salesforce-community', this.tbidCommunityUri);
+        this.appendMetaTag('salesforce-use-min-js', 'false');
+
+        this.appendMetaTag('salesforce-init-handler', TBID_INIT);
+        this.appendMetaTag('salesforce-login-handler', TBID_LOGIN);
+        this.appendMetaTag('salesforce-logout-handler', TBID_LOGOUT);
+
+        this.appendMetaTag('salesforce-mode', 'authprovider');
+        this.appendMetaTag('salesforce-redirect-uri', this.tbidRedirectUri);
+
+        this.appendMetaTag(
+            'salesforce-authprovider-login',
+            this.tbidAuthProviderLoginPath
+        );
+        this.appendMetaTag(
+            'salesforce-authprovider-signup',
+            this.tbidAuthProviderSignupPath
+        );
+
+        Object.defineProperty(window, TBID_INIT, {
+            value: () => this.onInit(),
+            writable: process.env.NODE_ENV === 'test'
+        });
+        Object.defineProperty(window, TBID_LOGIN, {
+            value: () => this.onLogin(),
+            writable: process.env.NODE_ENV === 'test'
+        });
+        Object.defineProperty(window, TBID_LOGOUT, {
+            value: () => this.onLogout(),
+            writable: process.env.NODE_ENV === 'test'
+        });
+
+        this.loadSFID = loadSFID(this.scriptSrc).catch((error) => {
+            this.dispatchEvent(
+                new CustomEvent('error', {
+                    detail: { error }
+                })
+            );
+        });
+
+        document.addEventListener(TRAILHEAD_EVENT_LOGIN, this);
+        document.addEventListener(TRAILHEAD_EVENT_LOGOUT, this);
+        document.addEventListener(TRAILHEAD_EVENT_SIGNUP, this);
+    }
+
+    disconnectedCallback() {
+        document.removeEventListener(TRAILHEAD_EVENT_LOGIN, this);
+        document.removeEventListener(TRAILHEAD_EVENT_LOGOUT, this);
+        document.removeEventListener(TRAILHEAD_EVENT_SIGNUP, this);
+    }
+
+    handleEvent(e: Event) {
+        switch (e.type) {
+            case TRAILHEAD_EVENT_LOGIN:
+                SFIDWidget.login();
+                break;
+            case TRAILHEAD_EVENT_LOGOUT:
+                loadIframe(this.logoutIframeSrc).then(() => {
+                    SFIDWidget.logout();
+                });
+                break;
+            case TRAILHEAD_EVENT_SIGNUP:
+                SFIDWidget.signup();
+                break;
+        }
+    }
+
+    private appendMetaTag(name: string, content: string) {
+        let tag = document.createElement('meta');
+        tag.name = name;
+        tag.content = content;
+        document.head.appendChild(tag);
+    }
+
+    private onInit() {
+        this.dispatchEvent(new CustomEvent(TBID_EVENT_INIT));
+    }
+
+    private async onLogin() {
+        this.dispatchEvent(new CustomEvent(TBID_EVENT_LOGIN));
+        this.dispatchEvent(new CustomEvent(EVENT_LOGIN));
+        let lock = new Lock(LOCK_KEY, LOCK_TIMEOUT);
+        let { user } = await getJSON<{ user: string }>(this.loginStatusPath, {
+            headers: csrfHeader(this.csrfToken)
+        });
+        let newSession =
+            (user === 'logged_in' && this.authenticated !== 'true') ||
+            (user === 'not_logged_in' && this.loginTried !== 'true');
+        if (newSession) {
+            if (lock.aquire()) window.location.href = this.loginRedirectPath;
+            else setTimeout(this.onLogin.bind(this), LOCK_TIMEOUT);
+        } else {
+            lock.release();
+            this.onInit();
+        }
+    }
+
+    private onLogout() {
+        this.dispatchEvent(new CustomEvent(TBID_EVENT_LOGOUT));
+        this.dispatchEvent(new CustomEvent(EVENT_LOGOUT));
+        SFIDWidget.init();
+        window.location.href = this.logoutRedirectPath;
+    }
+}
+
+export class Lock {
+    constructor(private key: string, private timeout: number) {}
+
+    aquire() {
+        if (this.locked) return false;
+        sessionStorage.setItem(this.key, String(Date.now() + this.timeout));
+        return true;
+    }
+
+    release() {
+        sessionStorage.removeItem(this.key);
+    }
+
+    private get existingLock() {
+        let storageValue = sessionStorage.getItem(this.key) || '';
+        let value = parseInt(storageValue, 10);
+        return Number.isNaN(value) ? 0 : value;
+    }
+
+    private get locked() {
+        return this.existingLock > Date.now();
+    }
+}
+
+function loadSFID(src: string) {
+    let load = new Promise<void>((resolve, reject) => {
+        let script = document.createElement('script');
+        script.onload = () => resolve(undefined);
+        script.onerror = () => reject(new Error('TH_TBID_SFID_LOAD'));
+        script.async = false;
+        script.src = src;
+        document.head.appendChild(script);
+    });
+    let timeout = new Promise((_, reject) =>
+        setTimeout(reject, 5000, new Error('TH_TBID_SFID_TIMEOUT'))
+    );
+    return Promise.race([load, timeout]);
+}
+
+function loadIframe(url: string) {
+    return new Promise((resolve, reject) => {
+        const iframe = document.createElement('iframe');
+        iframe.setAttribute('sandbox', 'allow-scripts');
+        iframe.style.display = 'none';
+        iframe.addEventListener('load', resolve, { once: true });
+        iframe.addEventListener('error', reject, { once: true });
+        iframe.src = url;
+        document.body.appendChild(iframe);
+    });
+}

package/src/modules/tm/card/__tests__/card.test.ts

@@ -0,0 +1,65 @@
+import { nextTick } from 'shared/testutils';
+import Card from '../card';
+import { track } from 'tds/instrumentation';
+import { querySelector } from 'kagekiri';
+
+customElements.define('tm-card', Card.CustomElementConstructor);
+
+jest.mock('tds/instrumentation', () => {
+    return {
+        track: jest.fn()
+    };
+});
+
+describe('tm-card', () => {
+    beforeEach(() => {
+        // Mock SalesforceInteractions global object
+        (window as any).SalesforceInteractions = {
+            sendEvent: jest.fn()
+        };
+        // Clear the track mock
+        (track as jest.Mock).mockClear();
+    });
+
+    afterEach(() => {
+        document.body.innerHTML = '';
+        delete (window as any).SalesforceInteractions;
+    });
+
+    it('tracks clicks from anchor and image', async () => {
+        document.body.innerHTML = `
+            <tm-card
+                title="Item title"
+                cta-href="/#"
+                cta-title="Explore"
+                img-src="/image.png"
+            ></tm-card>
+        `;
+        await nextTick();
+
+        const item = document.body.querySelector('tm-card')!;
+        const anchor = querySelector('a', item);
+        const img = querySelector('.image', item);
+
+        anchor!.click();
+        img!.click();
+
+        expect(track).toBeCalledTimes(2);
+        const trackCalls = (track as jest.Mock).mock.calls;
+
+        // Both clicks should call track with select_content event
+        expect(trackCalls[0][0]).toBe(item);
+        expect(trackCalls[0][1]).toBe('select_content');
+        expect(trackCalls[0][2]).toMatchObject({
+            contentType: 'card grid',
+            itemLocation: 'card'
+        });
+
+        expect(trackCalls[1][0]).toBe(item);
+        expect(trackCalls[1][1]).toBe('select_content');
+        expect(trackCalls[1][2]).toMatchObject({
+            contentType: 'card grid',
+            itemLocation: 'card'
+        });
+    });
+});

package/src/modules/tm/card/card.css

@@ -0,0 +1,131 @@
+@import 'tds/reset';
+@import 'tm/cardBase';
+
+:host {
+    height: 100%;
+}
+
+a {
+    color: var(--tds-color-brand);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.card {
+    display: flex;
+}
+
+.content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    color: var(--tds-color-black);
+}
+
+.content-inner {
+    flex: 1;
+}
+
+.pretitle {
+    font-size: var(--tds-font-size-sm);
+    color: var(--tds-color-meteorite);
+    padding-bottom: var(--tds-spacing-1);
+}
+
+.title {
+    font-size: var(--tds-font-size-lg);
+    font-weight: bold;
+}
+
+.description {
+    margin-top: var(--tds-spacing-3);
+    line-height: var(--tds-line-height-normal);
+}
+
+.cta {
+    font-weight: bold;
+    margin-top: var(--tds-spacing-3);
+    display: block;
+}
+
+div.image {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+img.image {
+    max-width: 90%;
+    max-height: 100px;
+}
+
+.card[data-href] .image {
+    cursor: pointer;
+}
+
+.card:not([data-image]),
+.card[data-image=''] {
+    padding: var(--tds-spacing-6);
+}
+
+.card[data-image^='top'] {
+    flex-direction: column-reverse;
+}
+
+.card[data-image^='top'] .content {
+    padding: var(--tds-spacing-6);
+}
+
+.card[data-image='top--cover'] .image {
+    height: 0;
+    border-top-left-radius: var(--tds-radius-lg);
+    border-top-right-radius: var(--tds-radius-lg);
+}
+
+.card[data-image='top--small'] .image {
+    align-self: flex-start;
+    margin: var(--tds-spacing-6) var(--tds-spacing-6) 0 var(--tds-spacing-6);
+    max-height: 75px;
+}
+
+.card[data-image='right--cover'] {
+    align-items: stretch;
+    padding: var(--tds-spacing-6);
+}
+
+.card[data-image='right--cover'] .image {
+    flex: 1;
+}
+
+.card[data-image='right--cover'] .image {
+    align-self: stretch;
+    border-radius: var(--tds-radius-lg);
+    margin-left: var(--tds-spacing-6);
+}
+
+.card[data-image='left--cover'] {
+    align-items: top;
+    flex-direction: row-reverse;
+    padding: var(--tds-spacing-6);
+}
+
+.card[data-image='left--cover'] .image {
+    align-self: stretch;
+    border-radius: var(--tds-radius-lg);
+    flex: 1;
+    margin-right: var(--tds-spacing-6);
+}
+
+.card[data-image='left--small'] {
+    align-items: flex-start;
+    flex-direction: row-reverse;
+    padding: var(--tds-spacing-6);
+}
+
+.card[data-image='left--small'] .image {
+    width: 50px;
+    margin-right: var(--tds-spacing-6);
+}

package/src/modules/tm/card/card.html

@@ -0,0 +1,81 @@
+<template>
+    <article
+        class="card card-base"
+        data-href={ctaHref}
+        data-image={imgVariantResponsive}
+        role="article"
+        aria-labelledby={cardTitleId}
+        tabindex="0"
+        onkeydown={handleCardKeydown}
+    >
+        <div class="content">
+            <div class="content-inner">
+                <template if:true={pretitle}>
+                    <p class="pretitle">{pretitle}</p>
+                </template>
+                <template if:true={pretitleHref}>
+                    <p><a href={pretitleHref}>{pretitleHrefText}</a></p>
+                </template>
+                <h3 class="title" id={cardTitleId}>{title}</h3>
+                <p if:true={description} class="description">{description}</p>
+            </div>
+            <a
+                if:true={ctaTitle}
+                class="cta"
+                name={ctaTitleId}
+                id={ctaTitleId}
+                href={ctaHref}
+                target={ctaTarget}
+                aria-label={assistiveText}
+                onclick={trackLinkClick}
+                rel={rel}
+                >{ctaTitle}<img
+                    if:true={isExternalHref}
+                    src="/assets/images/new_window.svg"
+                    style="display: inline; height: 1rem; margin: 0 0 0 5px"
+                    aria-label="Open link in new window"
+            /></a>
+        </div>
+        <template if:true={imgSrc}>
+            <div
+                name={ctaHref}
+                id={imageDivId}
+                class="image"
+                if:false={imgTag}
+                onclick={onImageClick}
+                style={imgStyle}
+                data-href={ctaHref}
+            ></div>
+            <picture if:true={imgTagNoSvg}>
+                <template if:false={isRemoteImage}>
+                    <source srcset={imgSrcSetWebP} />
+                    <source srcset={imgSrcSetJpg} />
+                </template>
+                <img
+                    name={ctaHref}
+                    id={imageImgId}
+                    class="image"
+                    if:true={imgTag}
+                    onclick={onImageClick}
+                    style={imgStyle}
+                    src={imgSrc}
+                    alt={imageAltText}
+                    loading="lazy"
+                    decoding="async"
+                />
+            </picture>
+            <img
+                name={ctaHref}
+                id={imageSvgId}
+                class="image"
+                if:true={imgTagSvg}
+                onclick={onImageClick}
+                style={imgStyle}
+                src={imgSrc}
+                alt={description}
+                loading="lazy"
+                decoding="async"
+            />
+        </template>
+    </article>
+</template>