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

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

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

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

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

@@ -1,40 +0,0 @@
-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) => {
-            const isExpanded = this.expanded.has(i);
-            return {
-                ...item,
-                className: `item ${isExpanded ? 'item--expanded' : ''}`,
-                id: `item-${i}`,
-                expanded: isExpanded,
-                onClick: () => {
-                    const 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

@@ -1,116 +0,0 @@
-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 () => {
-        const 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', () => {
-        const 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

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

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

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

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

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

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

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

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

@@ -1,35 +0,0 @@
-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() {
-        const section = this.template.querySelector('section');
-        if (section) {
-            section.innerHTML = this.template.host.innerHTML;
-        }
-    }
-}

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

@@ -1,51 +0,0 @@
-import { html, renderIntoBody, $ } from 'shared/testutils';
-
-import HeroA from '../heroA';
-
-customElements.define('tm-hero-a', HeroA.CustomElementConstructor);
-
-describe('tm-hero-a', () => {
-    it('works', async () => {
-        const 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();
-
-        const 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);
-    });
-});