@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tm/pageNavigationA/pageNavigationA.css

@@ -0,0 +1,41 @@
+@import 'tds/reset';
+
+nav {
+    align-items: center;
+    background-color: var(--tds-color-white);
+    display: grid;
+    grid-auto-flow: column;
+    grid-column-gap: var(--tds-spacing-1);
+    justify-content: center;
+    padding: var(--tds-spacing-2);
+    border-bottom: 1px solid #00000010; /* fix token */
+}
+
+nav a {
+    border-radius: var(--tds-radius-lg);
+    padding: var(--tds-spacing-2) var(--tds-spacing-5);
+    color: var(--tds-color-black);
+    text-decoration: none;
+    font-weight: bold;
+}
+
+nav a:hover {
+    border-radius: var(--tds-radius-lg);
+    padding: var(--tds-spacing-2) var(--tds-spacing-5);
+    background-color: hsl(
+        var(--tds-color-brand-h),
+        var(--tds-color-brand-s),
+        calc(var(--tds-color-brand-l) + 55%)
+    );
+}
+
+nav a[aria-current='page'] {
+    color: var(--tds-color-brand);
+    border-radius: var(--tds-radius-lg);
+    padding: var(--tds-spacing-2) var(--tds-spacing-5);
+    background-color: hsl(
+        var(--tds-color-brand-h),
+        var(--tds-color-brand-s),
+        calc(var(--tds-color-brand-l) + 50%)
+    );
+}

package/src/modules/tm/pageNavigationA/pageNavigationA.html

@@ -0,0 +1,9 @@
+<template>
+    <nav>
+        <template for:each={items} for:item="item">
+            <a aria-current={item.ariaCurrent} href={item.href} key={item.title}
+                >{item.title}</a
+            >
+        </template>
+    </nav>
+</template>

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

@@ -0,0 +1,34 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-page-navigation-a',
+    parameters: {
+        modules: ['/modules/tm-page-navigation-a.js']
+    }
+};
+
+export const Base = () => html`
+  <tm-page-navigation-a>
+    <tm-page-navigation-item
+      href="/"
+      title="Salesforce Architect"
+    ></tm-page-navigation-item>
+    <tm-page-navigation-item
+      active
+      href="/"
+      title="Design"
+    ></tm-page-navigation-item>
+    <tm-page-navigation-item
+      href="/"
+      title="Deliver"
+    ></tm-page-navigation-item>
+    <tm-page-navigation-item
+      href="/"
+      title="Govern"
+    ></tm-page-navigation-a-item>
+    <tm-page-navigation-item
+      href="/"
+      title="Roadmap"
+    ></tm-page-navigation-item>
+  </tm-page-navigation-a>
+`;

package/src/modules/tm/pageNavigationA/pageNavigationA.ts

@@ -0,0 +1,18 @@
+import { ChildrenElement } from 'shared/children';
+
+type Item = {
+    ariaCurrent: string | null;
+    href: string;
+    title: string;
+};
+
+export default class extends ChildrenElement<Item> {
+    childTagName = 'TM-PAGE-NAVIGATION-ITEM';
+    extractor = (element: Element) => {
+        return {
+            ariaCurrent: element.hasAttribute('active') ? 'page' : null,
+            href: element.getAttribute('href'),
+            title: element.getAttribute('title')
+        } as Item;
+    };
+}

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

@@ -0,0 +1,89 @@
+import { html, renderIntoBody } from 'shared/testutils';
+
+import PromoA from '../promoA';
+
+import { track } from 'tds/instrumentation';
+
+jest.mock('tds/instrumentation', () => {
+    return {
+        track: jest.fn()
+    };
+});
+
+customElements.define('tm-prom-a', PromoA.CustomElementConstructor);
+
+describe('tm-prom-a', () => {
+    let open: jest.Mock;
+    Object.defineProperty(window, 'open', { get: () => open });
+    beforeEach(() => {
+        open = jest.fn();
+    });
+    it('handles click on the image', async () => {
+        let element = renderIntoBody(
+            html`
+                <tm-prom-a
+                    cta-href="/promo"
+                    cta-target="_blank"
+                    cta-title="Promo"
+                ></tm-prom-a>
+            `
+        );
+        element.shadowRoot!.querySelector('div')!.click();
+        expect(open).toHaveBeenCalledWith('/promo', '_blank');
+    });
+    it('stops propogation on the tds-button-link', async () => {
+        let element = renderIntoBody(
+            html`
+                <tm-prom-a
+                    cta-href="/promo"
+                    cta-target="_blank"
+                    cta-title="Promo"
+                ></tm-prom-a>
+            `
+        );
+        element
+            .shadowRoot!.querySelector('tds-button-link')!
+            .shadowRoot!.querySelector('a')!
+            .click();
+        expect(open).not.toHaveBeenCalled();
+    });
+    it('tracks survey links', async () => {
+        let element = renderIntoBody(
+            html`
+                <tm-prom-a
+                    cta-target="_blank"
+                    cta-href="https://sfdc.co/arch-site-survey"
+                    cta-title="Promo"
+                ></tm-prom-a>
+            `
+        );
+        const anchor = element
+            .shadowRoot!.querySelector('tds-button-link')!
+            .shadowRoot!.querySelector('a')!;
+
+        element.shadowRoot!.querySelector('div')!.click();
+        anchor.click();
+
+        expect(track).toBeCalledTimes(2);
+        const trackCalls = (track as jest.Mock).mock.calls;
+        expect(trackCalls[0]).toEqual([
+            element,
+            'site_survey',
+            {
+                linkText: 'Promo',
+                linkUrl: 'https://sfdc.co/arch-site-survey',
+                itemLocation: 'banner'
+            }
+        ]);
+
+        expect(trackCalls[1]).toEqual([
+            element,
+            'site_survey',
+            {
+                linkText: 'Promo',
+                linkUrl: 'https://sfdc.co/arch-site-survey',
+                itemLocation: 'banner'
+            }
+        ]);
+    });
+});

package/src/modules/tm/promoA/promoA.css

@@ -0,0 +1,95 @@
+@import 'tds/reset';
+
+:host {
+    margin: auto;
+    max-width: 1200px;
+}
+
+.promo {
+    align-items: flex-start;
+    border-radius: var(--tds-radius-lg);
+    box-shadow: var(--tds-shadow-md);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    margin: 0 0 0 2rem;
+    position: relative;
+    min-height: 380px;
+}
+
+.shadow {
+    background: linear-gradient(
+        90deg,
+        var(--shadow-color-start),
+        var(--shadow-color-end)
+    );
+    border-radius: var(--tds-radius-lg);
+    display: block;
+    height: 100%;
+    position: absolute;
+    transform: translate3d(10px, 10px, 0);
+    transition: transform 250ms ease-in-out;
+    width: 100%;
+}
+
+.promo:hover .shadow {
+    transform: translate3d(16px, 16px, 0);
+}
+
+.promo:hover .content {
+    box-shadow: var(--tds-shadow-lg);
+}
+
+.image {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    border-radius: var(--tds-radius-lg);
+    height: 100%;
+    position: absolute;
+    width: 100%;
+}
+
+.content {
+    background-color: var(--tds-color-white);
+    border-radius: var(--tds-radius-lg);
+    box-sizing: border-box;
+    box-shadow: var(--tds-shadow-md);
+    height: 100%;
+    padding: var(--tds-spacing-8);
+    margin: var(--tds-spacing-6) 30% var(--tds-spacing-6)
+        calc(var(--tds-spacing-8) * -1);
+    max-width: 400px;
+    z-index: 2;
+    transition: transform 250ms ease-in-out;
+}
+
+.spacer {
+    height: 0;
+    padding-top: 40%;
+}
+
+@media screen and (max-width: 500px) {
+    .content {
+        margin: 80% var(--tds-spacing-4) var(--tds-spacing-4);
+    }
+
+    .promo {
+        margin: 0;
+    }
+}
+
+.title {
+    font-family: Neutraface;
+    font-size: var(--tds-font-size-2xl);
+    line-height: 1.125;
+}
+
+.description {
+    margin: var(--tds-spacing-2) 0;
+    font-size: var(--tds-font-size-lg);
+}
+
+.cta {
+    padding-top: var(--tds-spacing-2);
+}

package/src/modules/tm/promoA/promoA.html

@@ -0,0 +1,22 @@
+<template>
+    <div class={promoClassName} onclick={onClick}>
+        <div class="shadow" if:true={showShadow} style={shadowStyle}></div>
+        <div class="image" style={imageStyle}></div>
+        <div class="content">
+            <h3 class="title">{title}</h3>
+            <p if:true={description} class="description">{description}</p>
+            <tds-button-link
+                class="cta"
+                href={ctaHref}
+                if:true={ctaTitle}
+                onclick={onLinkClick}
+                target={ctaTarget}
+                variant="brand"
+                rel="noopener"
+            >
+                {ctaTitle}
+            </tds-button-link>
+        </div>
+        <div class="spacer" style={spacerStyle}></div>
+    </div>
+</template>

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

@@ -0,0 +1,38 @@
+import { html } from 'lit-html';
+import { styleMap } from 'lit-html/directives/style-map';
+
+export default {
+    title: 'tm/tm-promo-a',
+    parameters: {
+        chromatic: {
+            viewports: [400, 800, 1199]
+        },
+        modules: ['/modules/tm-promo-a.js']
+    }
+};
+
+export const Base = () => html`
+    <div style=${styleMap({ padding: '2rem' })}>
+        <tm-promo-a
+            title="Get Signed Up for Architect Dreamforce Sessions"
+            description="Sessions are filling up fast! This is basically an ad."
+            img-src="/images/promo.png"
+            cta-href="/"
+            cta-title="Sign Up"
+        ></tm-promo-a>
+    </div>
+`;
+
+export const Shadow = () => html`
+    <div style=${styleMap({ padding: '2rem' })}>
+        <tm-promo-a
+            title="Get Signed Up for Architect Dreamforce Sessions"
+            description="Sessions are filling up fast! This is basically an ad."
+            img-src="/images/promo.png"
+            cta-href="/"
+            cta-title="Sign Up"
+            shadow-color-start="red"
+            shadow-color-end="purple"
+        ></tm-promo-a>
+    </div>
+`;

package/src/modules/tm/promoA/promoA.ts

@@ -0,0 +1,62 @@
+import { api, LightningElement } from 'lwc';
+import { track } from 'tds/instrumentation';
+
+export default class extends LightningElement {
+    @api ctaHref: string | null = null;
+    @api ctaTarget: string | null = null;
+    @api ctaTitle: string | null = null;
+    @api imgAspect: string | null = null;
+    @api imgSrc: string | null = null;
+    @api description: string | null = null;
+    @api shadowColorStart: string | null = null;
+    @api shadowColorEnd: string | null = null;
+    @api title: string = '';
+
+    private get imageStyle() {
+        return [`background-image: url(${this.imgSrc})`].join(';');
+    }
+
+    private get promoClassName() {
+        return `promo ${this.showShadow ? 'promo--shadow' : ''}`;
+    }
+
+    private get shadowStyle() {
+        return [
+            `--shadow-color-start: ${this.shadowColorStart}`,
+            `--shadow-color-end: ${this.shadowColorEnd}`
+        ].join(';');
+    }
+
+    private get showShadow() {
+        return this.shadowColorStart && this.shadowColorEnd;
+    }
+
+    private get spacerStyle() {
+        return `padding-top: ${this.imgAspect || '33%'}`;
+    }
+
+    private onClick(e: MouseEvent) {
+        let { ctaHref, ctaTarget } = this;
+        if (ctaHref) {
+            if (ctaTarget) window.open(ctaHref, ctaTarget);
+            else window.location.href = ctaHref;
+        }
+        this.trackLinkClick();
+    }
+
+    private trackLinkClick() {
+        let { ctaHref, ctaTitle } = this;
+        if (ctaHref === 'https://sfdc.co/arch-site-survey') {
+            track(this.template.host, 'site_survey', {
+                linkText: ctaTitle,
+                linkUrl: ctaHref,
+                itemLocation: 'banner'
+            });
+        }
+    }
+
+    private onLinkClick(e: MouseEvent) {
+        e.stopPropagation();
+        this.trackLinkClick();
+    }
+}

package/src/modules/tm/sectionA/sectionA.css

@@ -0,0 +1,64 @@
+@import 'tds/reset';
+
+.section {
+    padding: var(--tds-spacing-20) var(--tds-spacing-6);
+}
+
+.section--white {
+    background-color: var(--tds-color-white);
+    color: var(--tds-color-black);
+}
+
+.section--dark {
+    background-color: var(--tds-color-theme-dark);
+    color: var(--tds-color-white);
+}
+
+.section--light {
+    background-color: var(--tds-color-blue-ninety-five);
+    color: var(--tds-color-black);
+}
+
+.section--blue {
+    background-color: var(--tds-color-theme-light);
+    color: var(--tds-color-black);
+}
+
+.section--bright {
+    background-color: var(--tds-color-theme-bright);
+    color: var(--tds-color-black);
+}
+
+.content-container {
+    margin: auto;
+    max-width: 600px;
+    text-align: center;
+    padding-bottom: var(--tds-spacing-4);
+}
+
+.content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin: auto;
+    max-width: 1280px;
+}
+
+.title {
+    font-size: var(--tds-font-size-2xl);
+    margin-bottom: var(--tds-spacing-2);
+}
+
+.description {
+    font-size: var(--tds-font-size-lg);
+    line-height: 1.5;
+    margin-bottom: var(--tds-spacing-6);
+}
+
+.slot {
+    align-self: stretch;
+}
+
+.cta {
+    margin-top: var(--tds-spacing-6);
+}

package/src/modules/tm/sectionA/sectionA.html

@@ -0,0 +1,21 @@
+<template>
+    <section class={sectionClassName}>
+        <div class="content">
+            <div class="content-container">
+                <h2 if:true={title} class="title">{title}</h2>
+                <p if:true={description} class="description">{description}</p>
+            </div>
+            <div class="slot">
+                <slot></slot>
+            </div>
+            <tds-button-link
+                href={ctaHref}
+                target={ctaTarget}
+                if:true={ctaHref}
+                class="cta"
+            >
+                {ctaTitle}
+            </tds-button-link>
+        </div>
+    </section>
+</template>

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

@@ -0,0 +1,18 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-section-a',
+    parameters: {
+        modules: ['/modules/tm-section-a.js']
+    }
+};
+
+export const Base = () => html`
+    <tm-section-a
+        description="Build apps faster, integrate easier, make apps smarter"
+        title="Explore Content"
+        cta-href="/"
+        cta-title="Explore"
+    >
+    </tm-section-a>
+`;

package/src/modules/tm/sectionA/sectionA.ts

@@ -0,0 +1,27 @@
+import { api, LightningElement } from 'lwc';
+import { waitForPageSettled } from 'tm/utils';
+
+export default class extends LightningElement {
+    @api background: string | null = null;
+    @api description: string | null = null;
+    @api title: string = '';
+    @api ctaHref: string | null = null;
+    @api ctaTitle: string | null = null;
+    @api ctaTarget: string | null = null;
+
+    connectedCallback() {
+        let hash = window.location.hash.slice(1);
+        if (this.id && this.id === hash) {
+            // We have to restore the natural browser behavior of
+            // jumping to anchors because when DOMContentLoaded fires
+            // the page won't be fully rendered yet
+            waitForPageSettled().then(() => {
+                this.template.host.scrollIntoView();
+            });
+        }
+    }
+
+    private get sectionClassName() {
+        return `section section--${this.background}`;
+    }
+}

package/src/modules/tm/sectionSpacer/sectionSpacer.css

@@ -0,0 +1,4 @@
+:host {
+    display: block;
+    height: var(--tds-spacing-20);
+}

package/src/modules/tm/sectionSpacer/sectionSpacer.html

@@ -0,0 +1 @@
+<template> </template>

package/src/modules/tm/sectionSpacer/sectionSpacer.ts

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}

package/src/modules/tm/skillsCardA/skillsCardA.css

@@ -0,0 +1,73 @@
+@import 'tds/reset';
+
+.card {
+    background-color: var(--tds-color-white);
+    border-radius: var(--tds-radius-lg);
+    box-shadow: var(--tds-shadow-sm);
+    padding: 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-xl);
+    font-weight: normal;
+}
+
+.description {
+    line-height: 1.5;
+    margin-top: var(--tds-spacing-3);
+    margin-bottom: var(--tds-spacing-6);
+}
+
+ul {
+    display: grid;
+    grid-auto-flow: row;
+    grid-row-gap: var(--tds-spacing-6);
+}
+
+li .progress-label {
+    display: block;
+    color: var(--tds-color-meteorite);
+    margin-bottom: var(--tds-spacing-2);
+}
+
+li a {
+    text-decoration: underline;
+}
+
+.progress-bar {
+    background-color: var(--tds-color-sand);
+    border-radius: 100px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) inset;
+    height: 20px;
+}
+
+.progress-value {
+    height: 100%;
+}
+
+.progress-value--cold {
+    border-radius: 100px;
+    background: linear-gradient(
+        90deg,
+        rgba(22, 99, 195, 1) 0%,
+        rgba(15, 194, 226, 1) 100%
+    );
+}
+
+.progress-value--warm {
+    border-radius: 100px;
+    background: linear-gradient(
+        90deg,
+        rgba(195, 46, 22, 1) 0%,
+        rgba(226, 140, 15, 1) 100%
+    );
+}

package/src/modules/tm/skillsCardA/skillsCardA.html

@@ -0,0 +1,37 @@
+<template>
+    <div class="card">
+        <div class="content">
+            <h3 class="title">{title}</h3>
+            <p class="description">{description}</p>
+        </div>
+        <ul>
+            <template for:each={skills} for:item="item">
+                <li key={item.title}>
+                    <template if:true={item.href}>
+                        <a
+                            href={item.href}
+                            class="progress-label"
+                            target={item.target}
+                            >{item.title}</a
+                        >
+                    </template>
+                    <template if:false={item.href}>
+                        <span class="progress-label">{item.title}</span>
+                    </template>
+                    <div
+                        aria-valuemin="0"
+                        aria-valuemax="100"
+                        aria-valuenow={item.value}
+                        class="progress-bar"
+                        role="progressbar"
+                    >
+                        <div
+                            class={item.valueClassName}
+                            style={item.valueStyle}
+                        ></div>
+                    </div>
+                </li>
+            </template>
+        </ul>
+    </div>
+</template>