@salesforcedevs/arch-components 1.20.17-alpha1 → 1.20.17-alpha11

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

@@ -1,215 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,131 +0,0 @@
-@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

@@ -1,81 +0,0 @@
-<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>