@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tm/faqA/faqA.css

@@ -0,0 +1,87 @@
+@import 'tds/reset';
+
+ul {
+    --gutter: 40px;
+    --gap: var(--tds-spacing-8);
+    background-color: var(--tds-color-white);
+    border-radius: var(--tds-radius-lg);
+    box-shadow: var(--tds-shadow-lg);
+    display: grid;
+    grid-auto-flow: row;
+    grid-row-gap: var(--gap);
+    margin: auto;
+    max-width: 800px;
+    padding: var(--tds-spacing-8);
+}
+
+.item {
+    position: relative;
+}
+
+.item hr {
+    background-color: var(--tds-color-fog);
+    border: none;
+    display: block;
+    height: 1px;
+    left: var(--gutter);
+    position: absolute;
+    right: 0;
+    top: calc(100% + var(--gap) / 2);
+}
+
+.item:last-child hr {
+    display: none;
+}
+
+.item--expanded {
+}
+
+h3 {
+    align-items: center;
+    display: flex;
+    color: var(--tds-color-brand);
+    font-size: var(--tds-font-size-xl);
+}
+
+button {
+    appearance: none;
+    -webkit-appearance: none;
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    font-size: inherit;
+    height: 100%;
+}
+
+button > div {
+    align-items: center;
+    display: flex;
+    height: 100%;
+}
+
+button .icon-wrapper {
+    align-items: center;
+    display: flex;
+    width: var(--gutter);
+}
+
+button .icon {
+    transform: rotate(-90deg);
+    transition: transform 300ms;
+}
+
+.item--expanded button .icon {
+    transform: rotate(0deg);
+}
+
+.description {
+    display: none;
+    line-height: var(--tds-line-height-normal);
+    margin-left: var(--gutter);
+    margin-top: var(--tds-spacing-3);
+}
+
+.item--expanded .description {
+    display: block;
+}

package/src/modules/tm/faqA/faqA.html

@@ -0,0 +1,27 @@
+<template>
+    <ul>
+        <template for:each={faqs} for:item="item">
+            <li class={item.className} key={item.id}>
+                <h3>
+                    <button
+                        aria-controls={item.id}
+                        aria-expanded={item.expanded}
+                        onclick={item.onClick}
+                    >
+                        <div>
+                            <span class="icon-wrapper">
+                                <tds-icon
+                                    class="icon"
+                                    symbol="switch"
+                                ></tds-icon>
+                            </span>
+                            <span title={item.title}>{item.title}</span>
+                        </div>
+                    </button>
+                </h3>
+                <div class="description" id={item.id}>{item.description}</div>
+                <hr />
+            </li>
+        </template>
+    </ul>
+</template>

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

@@ -0,0 +1,25 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-faq-a',
+    parameters: {
+        modules: ['/modules/tm-faq-a.js']
+    }
+};
+
+export const Base = () => html`
+    <tm-faq-a>
+        <tm-faq-item
+            title="Why become a contact tracer on Trailhead?"
+            description="Trailhead can not only teach the essential skills needed to become a contact tracer, but is exlusivley in the position to teach you all the skills needed to use the Salesforce platform, used by over 100k companies around the world."
+        ></tm-faq-item>
+        <tm-faq-item
+            title="Why become a contact tracer on Trailhead?"
+            description="Trailhead can not only teach the essential skills needed to become a contact tracer, but is exlusivley in the position to teach you all the skills needed to use the Salesforce platform, used by over 100k companies around the world."
+        ></tm-faq-item>
+        <tm-faq-item
+            title="Why become a contact tracer on Trailhead?"
+            description="Trailhead can not only teach the essential skills needed to become a contact tracer, but is exlusivley in the position to teach you all the skills needed to use the Salesforce platform, used by over 100k companies around the world."
+        ></tm-faq-item>
+    </tm-faq-a>
+`;

package/src/modules/tm/faqA/faqA.ts

@@ -0,0 +1,40 @@
+import { track } from 'lwc';
+
+import { ChildrenElement } from 'shared/children';
+
+export type Item = {
+    description: string;
+    title: string;
+};
+
+export default class extends ChildrenElement<Item> {
+    childTagName = 'TM-FAQ-ITEM';
+    extractor = extractItemAttributes;
+
+    @track expanded = new Set<number>();
+
+    private get faqs() {
+        return this.items.map((item, i) => {
+            let isExpanded = this.expanded.has(i);
+            return {
+                ...item,
+                className: `item ${isExpanded ? 'item--expanded' : ''}`,
+                id: `item-${i}`,
+                expanded: isExpanded,
+                onClick: () => {
+                    let expanded = new Set(this.expanded);
+                    if (expanded.has(i)) expanded.delete(i);
+                    else expanded.add(i);
+                    this.expanded = expanded;
+                }
+            };
+        });
+    }
+}
+
+export function extractItemAttributes(element: Element) {
+    return {
+        description: element.getAttribute('description'),
+        title: element.getAttribute('title')
+    } as Item;
+}

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

@@ -0,0 +1,116 @@
+import { html, renderIntoBody, $ } from 'shared/testutils';
+
+import FeatureGridA from '../featureGridA';
+
+import { track } from 'tds/instrumentation';
+
+jest.mock('tds/instrumentation', () => {
+    return {
+        track: jest.fn()
+    };
+});
+
+customElements.define(
+    'tm-feature-grid-a',
+    FeatureGridA.CustomElementConstructor
+);
+
+describe('tm-feature-grid-a', () => {
+    beforeEach(() => {
+        (track as jest.Mock).mockClear();
+    });
+
+    // Skip these tests as LWC in test mode doesn't support child nodes for light DOM components
+    // The featureGridA component uses slots for tm-card children, which isn't compatible with lit-html rendering in tests
+    it.skip('works', async () => {
+        let element = renderIntoBody(
+            html`
+                <tm-feature-grid-a>
+                    <tm-card
+                        title="Hello"
+                        cta-primary-href="/lol"
+                        cta-primary-title="Click"
+                    ></tm-card>
+                    <tm-card title="World"></tm-card>
+                </tm-feature-grid-a>
+            `
+        );
+        expect($('tds-button-link', element)[0].textContent).toEqual('Click');
+        expect($('h3', element)[0].textContent).toEqual('Hello');
+        expect($('h3', element)[1].textContent).toEqual('World');
+    });
+
+    it.skip('dispatches tracking events', async () => {
+        const handler = jest.fn();
+
+        const gridElement = renderIntoBody(
+            html`
+                <tm-feature-grid-a>
+                    <tm-card
+                        title="Hello"
+                        cta-primary-href="/primary"
+                        cta-primary-title="heyo"
+                    ></tm-card>
+                    <tm-card
+                        title="Cool"
+                        cta-secondary-href="/secondary"
+                        cta-secondary-title="yoo"
+                    ></tm-card>
+                </tm-feature-grid-a>
+            `
+        );
+
+        gridElement.addEventListener('trailhead_track', handler);
+
+        gridElement
+            .shadowRoot!.querySelector('tds-button-link')!
+            .dispatchEvent(
+                new MouseEvent('click', { bubbles: true, composed: true })
+            );
+
+        gridElement
+            .shadowRoot!.querySelector('a')!
+            .dispatchEvent(
+                new MouseEvent('click', { bubbles: true, composed: true })
+            );
+
+        expect(handler).toHaveBeenCalledTimes(2);
+        expect(handler.mock.calls[0][0].detail).toEqual({
+            eventName: 'cta_clicked',
+            payload: {
+                label: 'heyo',
+                pageLocation: 'TM-FEATURE-GRID-A',
+                ctaType: 'primary'
+            }
+        });
+        expect(handler.mock.calls[1][0].detail).toEqual({
+            eventName: 'cta_clicked',
+            payload: {
+                label: 'yoo',
+                pageLocation: 'TM-FEATURE-GRID-A',
+                ctaType: 'secondary'
+            }
+        });
+
+        expect(track).toBeCalledTimes(2);
+        const trackCalls = (track as jest.Mock).mock.calls;
+        expect(trackCalls[0]).toEqual([
+            gridElement,
+            'select_content',
+            { contentType: 'banner', itemTitle: 'heyo' }
+        ]);
+        expect(trackCalls[1]).toEqual([
+            gridElement,
+            'select_content',
+            { contentType: 'banner', itemTitle: 'yoo' }
+        ]);
+    });
+
+    it('renders the component', () => {
+        let element = renderIntoBody(
+            html`<tm-feature-grid-a></tm-feature-grid-a>`
+        );
+        expect(element).toBeTruthy();
+        expect(element.shadowRoot).toBeTruthy();
+    });
+});

package/src/modules/tm/featureGridA/featureGridA.css

@@ -0,0 +1,95 @@
+@import 'tds/reset';
+
+section {
+    display: flex;
+    margin-bottom: var(--tds-spacing-12);
+}
+
+section:nth-child(odd) {
+    flex-direction: row-reverse;
+}
+
+section:nth-child(even) .content {
+    margin-right: var(--tds-spacing-12);
+}
+
+section:nth-child(odd) .content {
+    margin-left: var(--tds-spacing-12);
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    justify-content: center;
+}
+
+.title {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-size: var(--tds-font-size-2xl);
+}
+
+.description {
+    line-height: 1.5;
+    margin: var(--tds-spacing-4) 0;
+}
+
+.ctas {
+    align-self: flex-start;
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    text-align: center;
+}
+
+.ctas > * {
+    margin-right: var(--tds-spacing-4);
+    margin-bottom: var(--tds-spacing-4);
+}
+
+.cta--secondary {
+    color: var(--tds-color-brand);
+    font-weight: bold;
+    text-decoration: none;
+    white-space: nowrap;
+}
+
+.image {
+    max-height: 500px;
+    max-width: 50%;
+    object-fit: contain;
+}
+
+@media screen and (max-width: 800px) {
+    .image {
+        max-width: 40%;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    section {
+        flex-direction: column-reverse !important;
+    }
+
+    .content {
+        margin: auto !important;
+        width: auto;
+    }
+
+    .ctas {
+        align-self: center;
+        flex-direction: column;
+    }
+
+    .image {
+        max-height: 300px;
+        max-width: 100%;
+        margin-bottom: var(--tds-spacing-6);
+        width: auto;
+    }
+
+    section:last-child {
+        margin-bottom: var(--tds-spacing-0);
+    }
+}

package/src/modules/tm/featureGridA/featureGridA.html

@@ -0,0 +1,34 @@
+<template>
+    <template for:each={items} for:item="item">
+        <section key={item.title}>
+            <div class="content">
+                <h3 class="title">{item.title}</h3>
+                <p class="description">{item.description}</p>
+                <div class="ctas">
+                    <tds-button-link
+                        if:true={item.ctaPrimaryTitle}
+                        href={item.ctaPrimaryHref}
+                        target={item.ctaPrimaryTarget}
+                        onclick={item.handlePrimaryCtaClick}
+                        >{item.ctaPrimaryTitle}</tds-button-link
+                    >
+                    <a
+                        class="cta--secondary"
+                        if:true={item.ctaSecondaryTitle}
+                        href={item.ctaSecondaryHref}
+                        target={item.ctaSecondaryTarget}
+                        onclick={item.handleSecondaryCtaClick}
+                        >{item.ctaSecondaryTitle}</a
+                    >
+                </div>
+            </div>
+            <img
+                class="image"
+                src={item.imgSrc}
+                alt={item.description}
+                loading="lazy"
+                decoding="async"
+            />
+        </section>
+    </template>
+</template>

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

@@ -0,0 +1,45 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-feature-grid-a',
+    parameters: {
+        chromatic: {
+            viewports: [400, 500, 800, 1199]
+        },
+        modules: ['/modules/tm-feature-grid-a.js']
+    }
+};
+
+export const Base = () => html`
+    <div style="max-width: 960px">
+        <tm-feature-grid-a>
+            <tm-card
+                cta-primary-href="/trust"
+                cta-primary-title="Check Out Trust"
+                description="Salesforce is committed to achieving and maintaining the trust of our customers. Integral to this mission is providing a robust compliance program that carefully considers data protection matters across our suite of services, including data submitted by customers to our services ('Customer Data')"
+                img-src="/images/card-a.png"
+                title="Trust & Compliance"
+            ></tm-card>
+            <tm-card
+                cta-primary-href="/appexchange"
+                cta-primary-title="Go To AppExchange"
+                cta-primary-target="_blank"
+                cta-secondary-href="/trailhead"
+                cta-secondary-title="Start a Trail on Trailhead"
+                cta-secondary-target="_blank"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque erat enim, eget tempor dolor gravida quis. Donec varius justo ultricies felis rhoncus convallis. "
+                img-src="/images/card-a.png"
+                title="App Exchange"
+            ></tm-card>
+            <tm-card
+                cta-primary-href="/"
+                cta-primary-title="Primary"
+                cta-secondary-href="/"
+                cta-secondary-title="Secondary"
+                description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum scelerisque erat enim, eget tempor dolor gravida quis. Donec varius justo ultricies felis rhoncus convallis. "
+                img-src="/images/card-a.png"
+                title="Feature C"
+            ></tm-card>
+        </tm-feature-grid-a>
+    </div>
+`;

package/src/modules/tm/featureGridA/featureGridA.ts

@@ -0,0 +1,59 @@
+import { ChildrenElement } from 'shared/children';
+import { track } from 'shared/track';
+import { track as analyticsTrack } from 'tds/instrumentation';
+
+export type Feature = {
+    ctaPrimaryHref: string;
+    ctaPrimaryTitle: string;
+    ctaPrimaryTarget: string;
+    ctaSecondaryHref: string;
+    ctaSecondaryTarget: string;
+    ctaSecondaryTitle: string;
+    description: string;
+    imgSrc: string;
+    title: string;
+};
+
+export default class extends ChildrenElement<Feature> {
+    extractor = (element: Element) => {
+        const ctaPrimaryTitle = element.getAttribute('cta-primary-title')!;
+        const ctaSecondaryTitle = element.getAttribute('cta-secondary-title')!;
+        const bannerTitle = element.getAttribute('title')!;
+        return {
+            ctaPrimaryHref: element.getAttribute('cta-primary-href')!,
+            ctaPrimaryTarget: element.getAttribute('cta-primary-target') || '',
+            ctaPrimaryTitle,
+            ctaSecondaryHref: element.getAttribute('cta-secondary-href')!,
+            ctaSecondaryTarget:
+                element.getAttribute('cta-secondary-target') || '',
+            ctaSecondaryTitle,
+            description: element.getAttribute('description')!,
+            imgSrc: element.getAttribute('img-src')!,
+            title: bannerTitle,
+            handlePrimaryCtaClick: this.handleCtaClick.bind(
+                this,
+                'primary',
+                ctaPrimaryTitle,
+                bannerTitle
+            ),
+            handleSecondaryCtaClick: this.handleCtaClick.bind(
+                this,
+                'secondary',
+                ctaSecondaryTitle,
+                bannerTitle
+            )
+        };
+    };
+
+    handleCtaClick(ctaType: string, label: string, bannerTitle: string) {
+        track(this.template.host, 'cta_clicked', {
+            ctaType,
+            label
+        });
+        analyticsTrack(this.template.host, 'select_content', {
+            contentType: 'banner',
+            itemTitle:
+                !bannerTitle || bannerTitle === '' ? undefined : bannerTitle
+        });
+    }
+}

package/src/modules/tm/footnote/footnote.css

@@ -0,0 +1,28 @@
+@import 'tds/reset';
+
+section {
+    color: var(--tds-color-meteorite);
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    padding: var(--tds-spacing-20) var(--tds-spacing-6);
+    text-align: center;
+    margin: auto;
+    max-width: calc(640px + var(--tds-spacing-6) * 2);
+    line-height: var(--tds-line-height-normal);
+}
+
+section h3 {
+    font-size: var(--tds-font-size-md);
+    font-weight: bold;
+    margin: 1em 0;
+}
+
+section p {
+    font-size: var(--tds-font-size-sm);
+    margin: 1em 0;
+}
+
+section a {
+    color: var(--tds-color-meteorite);
+}

package/src/modules/tm/footnote/footnote.html

@@ -0,0 +1,3 @@
+<template>
+    <section lwc:dom="manual"></section>
+</template>

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

@@ -0,0 +1,29 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-footnote',
+    parameters: {
+        modules: ['/modules/tm-footnote.js']
+    }
+};
+
+export const Base = () => html`
+    <tm-footnote>
+        <h3>Be an Innovator Daily Sweepstakes Rules</h3>
+        <p>
+            NO PURCHASE NECESSARY. VOID WHERE PROHIBITED. Be an Innovator Daily
+            Sweepstakes runs 4/19/19 12:00am PST to 5/6/19 11:59pm PST.
+            Sweepstakes open to legal residents of the U.S. (incl. D.C.), Canada
+            (excl. Quebec), France, Germany, India, Ireland, Japan, Netherlands,
+            New Zealand, Spain, and United Kingdom. Must be 18+ (20+ in Japan).
+            Restrictions apply.
+        </p>
+        <p>
+            See official rules: <a href="#">English</a>,
+            <a href="#">Français</a>, Deutsch, <a href="#">Español</a>,
+            <a href="#">日本語</a>, <a href="#">हिन्दीद</a>,
+            <a href="#">Lietuvių</a>, <a href="#">Magyar</a>,
+            <a href="#">Українська</a>
+        </p>
+    </tm-footnote>
+`;

package/src/modules/tm/footnote/footnote.ts

@@ -0,0 +1,35 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    private observer!: MutationObserver;
+    private didSetContent = false;
+
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            this.setContent();
+        });
+        this.observer.observe(this.template.host, {
+            childList: true,
+            subtree: true
+        });
+        this.setContent();
+    }
+
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+
+    renderedCallback() {
+        if (!this.didSetContent) {
+            this.didSetContent = true;
+            this.setContent();
+        }
+    }
+
+    private setContent() {
+        let section = this.template.querySelector('section');
+        if (section) {
+            section.innerHTML = this.template.host.innerHTML;
+        }
+    }
+}

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

@@ -0,0 +1,51 @@
+import { html, renderIntoBody, $ } from 'shared/testutils';
+
+import HeroA from '../heroA';
+
+customElements.define('tm-hero-a', HeroA.CustomElementConstructor);
+
+describe('tm-hero-a', () => {
+    it('works', async () => {
+        let element = renderIntoBody(
+            html`
+                <tm-hero-a
+                    cta-label="Click"
+                    cta-href="/lol"
+                    title="hello"
+                ></tm-hero-a>
+            `
+        );
+        expect($('tds-button-link', element)[0].textContent).toEqual('Click');
+        expect($('h1', element)[0].textContent).toEqual('hello');
+    });
+
+    it('dispatched a trailhead track event', async () => {
+        const handler = jest.fn();
+
+        let element = renderIntoBody(
+            html`
+                <tm-hero-a
+                    cta-label="Click"
+                    cta-href="/lol"
+                    variant="brand"
+                ></tm-hero-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-HERO-A',
+                ctaType: 'primary'
+            }
+        };
+
+        expect(handler).toHaveBeenCalled();
+        expect(handler.mock.calls[0][0].detail).toEqual(expectedPayload);
+    });
+});