@salesforcedevs/arch-components 1.20.17-alpha4 → 1.20.17-alpha5

package/src/modules/tm/content/content.html

@@ -1,53 +0,0 @@
-<template>
-    <div class="read">
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="18"
-            height="18"
-            viewBox="0 0 52 52"
-        >
-            <g fill="#3e3e3c">
-                <path
-                    d="m26 2c-13.2 0-24 10.8-24 24s10.8 24 24 24 24-10.8 24-24-10.8-24-24-24z m0 42c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18z m3.4-17.8c-0.3-0.3-0.4-0.7-0.4-1.1v-9.6c0-0.8-0.7-1.5-1.5-1.5h-3c-0.8 0-1.5 0.7-1.5 1.5v12.1c0 0.4 0.2 0.8 0.4 1.1l7.4 7.4c0.6 0.6 1.5 0.6 2.1 0l2.1-2.1c0.6-0.6 0.6-1.5 0-2.1l-5.6-5.7z"
-                ></path>
-            </g>
-        </svg>
-        {readingTime} minute read
-    </div>
-    <div class="read">
-        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar3" viewBox="0 0 16 16">
-            <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z"></path>
-            <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
-        </svg>
-        Last updated {lastUpdated}
-    </div>
-    <div class={rootClassName}>
-        <main lwc:dom="manual" onclick={onContentClick}></main>
-        <aside if:true={showHeadingsNav}>
-            <template iterator:heading={headings}>
-                <a
-                    href={heading.value.href}
-                    key={heading.value.id}
-                    onclick={onHeadingClick}
-                    style={heading.value.style}
-                    >{heading.value.label}</a
-                >
-            </template>
-        </aside>
-        <div class="scroll" if:true={showScroll} onclick={onScrollClick}>
-            <svg
-                xmlns="http://www.w3.org/2000/svg"
-                x="0px"
-                y="0px"
-                viewBox="0 0 1000 1000"
-                enable-background="new 0 0 1000 1000"
-            >
-                <g>
-                    <path
-                        d="M990,699.9c0,8.1,0,16.3-8.1,24.4c-16.3,16.3-40.7,16.3-56.9,0L502,350.2L79.1,732.4c-16.3,16.3-40.7,16.3-56.9,0c-16.3-16.3-16.3-40.7,0-56.9l447.3-406.6c24.4-16.3,40.7-16.3,56.9-8.1l447.3,406.6C981.9,675.5,990,691.8,990,699.9z"
-                    ></path>
-                </g>
-            </svg>
-        </div>
-    </div>
-</template>

package/src/modules/tm/content/content.stories.js

@@ -1,14 +0,0 @@
-import { html } from 'lit-html';
-
-import { ContentExamples } from './__fixtures__';
-
-export default {
-    title: 'tm/tm-content',
-    parameters: {
-        modules: ['/modules/tm-content.js']
-    }
-};
-
-export const Base = () => html`
-    <tm-content> ${ContentExamples()} </tm-content>
-`;

package/src/modules/tm/content/content.ts

@@ -1,171 +0,0 @@
-import { isInteger } from 'lodash';
-import { api, LightningElement, track } from 'lwc';
-import { track as analyticsTrack } from 'tds/instrumentation';
-import { createImageUrl, sendInteractionEvent, InteractionEventTypes } from 'shared/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: 'auto' as ScrollBehavior, // 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 href = (anchorEl as HTMLAnchorElement)?.href || (element as HTMLImageElement)?.src;
-            const url = new URL(
-                href || '',
-                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 as HTMLAnchorElement).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: "auto" as ScrollBehavior,
-                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 as HTMLElement).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 = '/assets/images/new_window.svg';
-                    img.setAttribute('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) => {
-                if (el.src) {
-                    el.src = createImageUrl(el.src, this.imageHash || '');
-                }
-            });
-        }
-    }
-
-    private get showScroll() {
-        return parseInt(this.readingTime || '0') > 4;
-    }
-
-    private onScrollClick() {
-        window.scroll({
-            top: 0,
-            left: 0,
-            behavior: 'smooth'
-        });
-    }
-}

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

@@ -1,52 +0,0 @@
-import { html, renderIntoBody, $ } from 'shared/testutils';
-
-import EndCapA from '../endCapA';
-
-customElements.define('tm-end-cap-a', EndCapA.CustomElementConstructor);
-
-describe('tm-end-cap-a', () => {
-    it('works', async () => {
-        const element = renderIntoBody(
-            html`
-                <tm-end-cap-a
-                    cta-label="Click"
-                    cta-href="/lol"
-                    title="hello"
-                ></tm-end-cap-a>
-            `
-        );
-        expect($('tds-button-link', element)[0].textContent).toEqual('Click');
-        expect($('h2', element)[0].textContent).toEqual('hello');
-    });
-
-    it('dispatched a trailhead track event', async () => {
-        const handler = jest.fn();
-
-        const element = renderIntoBody(
-            html`
-                <tm-end-cap-a
-                    cta-label="Click"
-                    cta-href="/lol"
-                    title="hello"
-                ></tm-end-cap-a>
-            `
-        );
-        document.addEventListener('trailhead_track', handler);
-
-        $('tds-button-link', element)[0].dispatchEvent(
-            new MouseEvent('click', { bubbles: true, composed: true })
-        );
-
-        const expectedPayload = {
-            eventName: 'cta_clicked',
-            payload: {
-                label: 'Click',
-                pageLocation: 'TM-END-CAP-A',
-                ctaType: 'primary'
-            }
-        };
-
-        expect(handler).toHaveBeenCalled();
-        expect(handler.mock.calls[0][0].detail).toEqual(expectedPayload);
-    });
-});

package/src/modules/tm/endCapA/endCapA.css

@@ -1,64 +0,0 @@
-@import 'tds/reset';
-
-a {
-    text-decoration: none;
-}
-
-img {
-    display: block;
-    max-width: 100%;
-    max-height: 100px;
-}
-
-.end-cap {
-    padding: var(--tds-spacing-20) var(--tds-spacing-6);
-}
-
-.end-cap--white {
-    background-color: var(--tds-color-white);
-    color: var(--tds-color-black);
-}
-
-.end-cap--dark {
-    background-color: var(--tds-color-theme-dark);
-    color: var(--tds-color-white);
-}
-
-.end-cap--light {
-    background-color: var(--tds-color-theme-light);
-    color: var(--tds-color-black);
-}
-
-.content {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    padding: var(--tds-spacing-6) 0;
-    text-align: center;
-    margin: auto;
-    max-width: 640px;
-}
-
-h2 {
-    white-space: pre-line;
-    font-family: Neutraface;
-    font-size: var(--tds-font-size-3xl);
-    line-height: 1.125;
-    margin-top: var(--tds-spacing-4);
-}
-
-p {
-    font-size: var(--tds-font-size-xl);
-    margin-top: var(--tds-spacing-2);
-    line-height: 1.5;
-}
-
-.cta {
-    margin-top: var(--tds-spacing-5);
-}
-
-@media screen and (max-width: 1280px) {
-}
-
-@media screen and (max-width: 768px) {
-}

package/src/modules/tm/endCapA/endCapA.html

@@ -1,21 +0,0 @@
-<template>
-    <div class={endCapClassName}>
-        <div class="content">
-            <img alt="" if:true={imgSrc} src={imgSrc} />
-            <h2>{title}</h2>
-            <p if:true={subtitle}>{subtitle}</p>
-            <tds-button-link
-                class="cta"
-                size="large"
-                if:true={ctaHref}
-                href={ctaHref}
-                target={ctaTarget}
-                variant="neutral"
-                onclick={handleCtaClick}
-                loading="lazy"
-                decoding="async"
-                >{ctaLabel}
-            </tds-button-link>
-        </div>
-    </div>
-</template>

package/src/modules/tm/endCapA/endCapA.stories.js

@@ -1,37 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tm/tm-end-cap-a',
-    parameters: {
-        modules: ['/modules/tm-end-cap-a.js']
-    }
-};
-
-export const Base = () => html`
-    <tm-end-cap-a
-        cta-href="/"
-        cta-label="Get Started"
-        subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
-        title="Begin the Architect Journey Trailmix"
-    ></tm-end-cap-a>
-`;
-
-export const Light = () => html`
-    <tm-end-cap-a
-        background="light"
-        cta-href="/"
-        cta-label="Get Started"
-        subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
-        title="Begin the Architect Journey Trailmix"
-    ></tm-end-cap-a>
-`;
-
-export const Dark = () => html`
-    <tm-end-cap-a
-        background="dark"
-        cta-href="/"
-        cta-label="Get Started"
-        subtitle="Connect to your customers in a whole new way with the world's #1 CRM."
-        title="Begin the Architect Journey Trailmix"
-    ></tm-end-cap-a>
-`;

package/src/modules/tm/endCapA/endCapA.ts

@@ -1,23 +0,0 @@
-import { api, LightningElement } from 'lwc';
-import { track } from 'shared/track';
-
-export default class extends LightningElement {
-    @api background: 'white' | 'dark' | 'light' = 'white';
-    @api ctaHref: string | undefined;
-    @api ctaLabel: string | undefined;
-    @api ctaTarget: string | null = null;
-    @api imgSrc: string | undefined;
-    @api subtitle: string | undefined;
-    @api title: string = '';
-
-    private get endCapClassName() {
-        return `end-cap end-cap--${this.background}`;
-    }
-
-    private handleCtaClick() {
-        track(this.template.host, 'cta_clicked', {
-            ctaType: 'primary',
-            label: this.ctaLabel
-        });
-    }
-}

package/src/modules/tm/eventsA/eventsA.css

@@ -1,107 +0,0 @@
-@import 'tds/reset';
-@import 'tm/cardBase';
-
-:host {
-    color: var(--tds-color-black);
-    margin: auto;
-    max-width: 960px;
-}
-
-a {
-    color: var(--tds-color-brand);
-    font-weight: bold;
-    text-decoration: none;
-}
-a:hover {
-    text-decoration: underline;
-}
-
-ul {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-    grid-column-gap: var(--tds-spacing-6);
-    grid-row-gap: var(--tds-spacing-6);
-    justify-content: center;
-    margin: 0;
-    max-width: 1280px;
-    padding: 0;
-}
-
-.card {
-    display: flex;
-    padding: var(--tds-spacing-6);
-}
-
-.information {
-    margin-left: var(--tds-spacing-4);
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-}
-
-.pretitle {
-    color: var(--tds-color-meteorite);
-    font-size: var(--tds-font-size-sm);
-    padding-bottom: var(--tds-spacing-1);
-}
-
-.calendar {
-    border-radius: var(--tds-spacing-2);
-    box-shadow: var(--tds-shadow-sm);
-    display: flex;
-    flex-direction: column;
-    min-width: 80px;
-    overflow: hidden;
-}
-
-.calendar__head {
-    background: #de4949;
-    border: 2px solid #c73434;
-    border-radius: var(--tds-radius-lg) var(--tds-radius-lg) 0 0;
-    color: white;
-    font-weight: bold;
-    padding: var(--tds-spacing-1);
-    text-align: center;
-    font-size: var(--tds-font-size-sm);
-    text-transform: uppercase;
-}
-
-.calendar__body {
-    align-items: center;
-    border-radius: 0 0 var(--tds-radius-lg) var(--tds-radius-lg);
-    display: flex;
-    font-family: Neutraface;
-    font-size: var(--tds-font-size-2xl);
-    font-weight: bold;
-    justify-content: center;
-    padding: var(--tds-spacing-3);
-}
-
-.title {
-    font-size: var(--tds-font-size-lg);
-    font-weight: bold;
-    padding-bottom: var(--tds-spacing-1);
-}
-
-.date {
-    font-weight: bold;
-}
-
-.date,
-.time,
-.location {
-    font-size: var(--tds-font-size-sm);
-    padding-top: var(--tds-spacing-1);
-}
-
-.cta {
-    font-size: var(--tds-font-size-md);
-    margin-top: var(--tds-spacing-4);
-    display: block;
-}
-
-@media screen and (max-width: 1200px) {
-    ul {
-        padding: 0 var(--tds-spacing-4);
-    }
-}

package/src/modules/tm/eventsA/eventsA.html

@@ -1,26 +0,0 @@
-<template>
-    <ul>
-        <template for:each={items} for:item="item">
-            <li key={item.title} class="card card-base">
-                <div>
-                    <div class="calendar">
-                        <div class="calendar__head">{item.month}</div>
-                        <div class="calendar__body">{item.day}</div>
-                    </div>
-                </div>
-                <div class="information">
-                    <div class="details">
-                        <div class="pretitle">{item.pretitle}</div>
-                        <div class="title">{item.title}</div>
-                        <div class="date">{item.date}</div>
-                        <div class="time">{item.time}</div>
-                        <div class="location">{item.location}</div>
-                    </div>
-                    <a class="cta" href={item.ctaHref} target={item.ctaTarget}
-                        >{item.ctaTitle}</a
-                    >
-                </div>
-            </li>
-        </template>
-    </ul>
-</template>

package/src/modules/tm/eventsA/eventsA.stories.js

@@ -1,51 +0,0 @@
-import { html } from 'lit-html';
-
-export default {
-    title: 'tm/tm-events-a',
-    parameters: {
-        chromatic: {
-            viewports: [400, 800, 1199]
-        },
-        modules: ['/modules/tm-events-a.js']
-    }
-};
-
-export const Base = () => html`
-    <tm-events-a>
-        <tm-event-item
-            date="Thursday, January 23, 2020"
-            cta-href="/"
-            cta-title="Details"
-            pretitle="Event"
-            time="09:35 AM EST"
-            title="Event A"
-        ></tm-event-item>
-        <tm-event-item
-            date="Thursday, January 23, 2020"
-            cta-href="/"
-            cta-title="Details"
-            pretitle="Event"
-            time="09:35 AM EST"
-            title="Event B"
-            location="San Francisco, CA"
-        ></tm-event-item>
-        <tm-event-item
-            date="Thursday, January 23, 2020"
-            cta-href="/"
-            cta-title="Details"
-            pretitle="Event"
-            time="09:35 AM EST"
-            title="Event C"
-            location="San Francisco, CA"
-        ></tm-event-item>
-        <tm-event-item
-            date="Thursday, January 23, 2020"
-            cta-href="/"
-            cta-title="Details"
-            pretitle="Event"
-            time="09:35 AM EST"
-            title="Event D"
-            location="San Francisco, CA"
-        ></tm-event-item>
-    </tm-events-a>
-`;

package/src/modules/tm/eventsA/eventsA.ts

@@ -1,48 +0,0 @@
-import { ChildrenElement } from 'shared/children';
-
-export type Event = {
-    day: string;
-    date: string;
-    ctaHref: string;
-    ctaTarget: string;
-    ctaTitle: string;
-    month: string;
-    pretitle: string;
-    time: string;
-    location: string;
-    title: string;
-};
-
-export default class extends ChildrenElement<Event> {
-    childTagName = 'TM-EVENT-ITEM';
-    extractor = (element: Element) => {
-        const date = new Date(element.getAttribute('date')!);
-        return {
-            day: String(date.getDate()),
-            date: element.getAttribute('date')!,
-            ctaHref: element.getAttribute('cta-href')!,
-            ctaTarget: element.getAttribute('cta-target') || '',
-            ctaTitle: element.getAttribute('cta-title')!,
-            month: months[date.getMonth()!],
-            pretitle: element.getAttribute('pretitle')!,
-            time: element.getAttribute('time')!,
-            location: element.getAttribute('location')!,
-            title: element.getAttribute('title')!
-        };
-    };
-}
-
-const months = [
-    'Jan',
-    'Feb',
-    'Mar',
-    'Apr',
-    'May',
-    'Jun',
-    'Jul',
-    'Aug',
-    'Sep',
-    'Oct',
-    'Nov',
-    'Dec'
-];