@salesforcedevs/arch-components 1.20.17-alpha1 → 1.20.17-alpha10

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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