@salesforcedevs/arch-components 1.20.17-alpha1

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

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

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

@@ -0,0 +1,171 @@
+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() {
+            let 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) {
+        let 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
+            );
+            let filename = url.pathname.substr(
+                url.pathname.lastIndexOf('/') + 1
+            );
+
+            if (anchorEl.hasAttribute('download') || filename.includes('.')) {
+                let 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) {
+        let 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() {
+        let 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) => {
+                    let label = (n as HTMLElement).innerText.trim();
+                    let id = label.replace(/[^a-zA-Z0-9]/g, '_');
+                    let href = `#${id}`;
+                    let 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

@@ -0,0 +1,52 @@
+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 () => {
+        let 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();
+
+        let 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

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

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

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

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

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

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

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

@@ -0,0 +1,48 @@
+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) => {
+        let 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'
+];