@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tds/footerLinks/__tests__/footerLinks.test.ts

@@ -0,0 +1,142 @@
+import { html, renderIntoBody } from 'shared/testutils';
+
+import FooterLinks from '../footerLinks';
+
+import { track } from 'tds/instrumentation';
+
+jest.mock('tds/instrumentation', () => {
+    return {
+        track: jest.fn()
+    };
+});
+
+customElements.define('tds-footer-links', FooterLinks.CustomElementConstructor);
+
+const content = {
+    columns: [
+        {
+            heading: 'Learn',
+            links: [
+                {
+                    href: '/',
+                    label: 'Trails'
+                },
+                {
+                    href: '/',
+                    label: 'Trailmixes'
+                }
+            ]
+        },
+        {
+            heading: 'Extras',
+            links: [
+                {
+                    href: '/',
+                    label: 'myTrailhead'
+                },
+                {
+                    href: '/',
+                    target: '_blank',
+                    label: 'Help'
+                }
+            ]
+        }
+    ]
+};
+
+describe('tds-footer-links', () => {
+    beforeEach(() => {
+        (track as jest.Mock).mockClear();
+    });
+
+    it('renders columns', () => {
+        const element = renderIntoBody(
+            html`
+                <tds-footer-links
+                    .columns=${content.columns}
+                ></tds-footer-links>
+            `
+        );
+        expect(element.shadowRoot!.innerHTML).toMatchHTMLSnapshot();
+    });
+
+    // Skip this test as LWC in test mode doesn't support child nodes for light DOM components
+    it.skip('renders columns and slots', () => {
+        const element = renderIntoBody(
+            html`
+                <tds-footer-links .columns=${content.columns}>
+                    <div slot="left">left</div>
+                    <div slot="right">right</div>
+                </tds-footer-links>
+            `
+        );
+        const getSlot = (name: string) =>
+            element.shadowRoot!.querySelector(
+                `slot[name="${name}"]`
+            )! as HTMLSlotElement;
+        expect(getSlot('left').assignedElements()[0].textContent).toEqual(
+            'left'
+        );
+        expect(getSlot('right').assignedElements()[0].textContent).toEqual(
+            'right'
+        );
+    });
+
+    describe('tracking', () => {
+        it('link_clicked', () => {
+            const element = renderIntoBody(
+                html`
+                    <tds-footer-links
+                        .columns=${content.columns}
+                    ></tds-footer-links>
+                `
+            );
+
+            let handler = jest.fn();
+            document.addEventListener('trailhead_track', handler, {
+                once: true
+            });
+
+            element
+                .shadowRoot!.querySelector('.links__column a')!
+                .dispatchEvent(new MouseEvent('click'));
+
+            expect(handler.mock.calls[0][0].detail).toEqual(
+                expect.objectContaining({
+                    eventName: 'link_clicked',
+                    payload: expect.objectContaining({
+                        label: 'Trails'
+                    })
+                })
+            );
+
+            expect(track).toBeCalledTimes(1);
+            expect(track).toBeCalledWith(element, 'custEv_bottomNavLinkClick', {
+                headingText: 'Learn',
+                linkText: 'Trails',
+                subHeadingText: 'Trails'
+            });
+        });
+    });
+
+    describe('eventing', () => {
+        it('link_click', () => {
+            const element = renderIntoBody(
+                html`
+                    <tds-footer-links
+                        .columns=${content.columns}
+                    ></tds-footer-links>
+                `
+            );
+            let handler = jest.fn();
+            element.addEventListener('link_click', handler);
+            // Columns
+            element
+                .shadowRoot!.querySelector('.links__column a')!
+                .dispatchEvent(new MouseEvent('click'));
+            expect(handler.mock.calls[0][0].detail).toEqual(
+                content.columns[0].links[0]
+            );
+        });
+    });
+});

package/src/modules/tds/footerLinks/footerLinks.css

@@ -0,0 +1,80 @@
+@import 'tds/reset';
+
+a {
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.footer {
+    padding: var(--tds-spacing-8) var(--tds-spacing-4) var(--tds-spacing-4);
+    border-top: 1px solid var(--tds-color-fog);
+}
+
+.container {
+    margin: 0 auto;
+    max-width: var(--tds-container-xl);
+}
+.links {
+    display: flex;
+}
+
+.links__column {
+    flex-shrink: 0;
+    font-size: var(--tds-font-size-sm);
+    padding: var(--tds-spacing-4) var(--tds-spacing-2) 0;
+    width: 17%;
+}
+
+.heading {
+    color: var(--tds-color-meteorite);
+    font-weight: bold;
+    margin-bottom: var(--tds-spacing-4);
+    font-size: var(--tds-font-size-md);
+}
+
+.links__column li {
+    margin: var(--tds-spacing-3) 0;
+}
+
+.links__column a {
+    color: var(--tds-color-meteorite);
+}
+
+.bottom {
+    display: none;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 auto;
+    margin-top: var(--tds-spacing-10);
+    max-width: 1400px;
+}
+
+.footer[data-slots*='left'] .bottom,
+.footer[data-slots*='right'] .bottom {
+    display: flex;
+}
+
+@media screen and (max-width: 48rem) {
+    .bottom {
+        flex-wrap: wrap;
+    }
+
+    .links {
+        flex-wrap: wrap;
+    }
+    .links__column {
+        width: 50%;
+    }
+}
+
+@media screen and (max-width: 24rem) {
+    .links {
+        flex-wrap: wrap;
+    }
+    .links__column {
+        width: 100%;
+    }
+}

package/src/modules/tds/footerLinks/footerLinks.html

@@ -0,0 +1,30 @@
+<template>
+    <div class="footer" data-slots={slots}>
+        <div class="container">
+            <nav class="links">
+                <template for:each={_columns} for:item="column">
+                    <div class="links__column" key={column.heading}>
+                        <div class="heading">{column.heading}</div>
+                        <ul if:true={column.links}>
+                            <template for:each={column.links} for:item="link">
+                                <li key={link.label}>
+                                    <a
+                                        href={link.href}
+                                        target={link.target}
+                                        rel={link.rel}
+                                        onclick={link.handleClick}
+                                        >{link.label}</a
+                                    >
+                                </li>
+                            </template>
+                        </ul>
+                    </div>
+                </template>
+            </nav>
+            <div class="bottom">
+                <slot name="left" onslotchange={handleSlotChange}></slot>
+                <slot name="right" onslotchange={handleSlotChange}></slot>
+            </div>
+        </div>
+    </div>
+</template>

package/src/modules/tds/footerLinks/footerLinks.ts

@@ -0,0 +1,48 @@
+import { api, LightningElement } from 'lwc';
+
+import { assignedSlotNames } from 'common/slot';
+import { track } from 'shared/track';
+import { track as analyticsTrack } from 'tds/instrumentation';
+
+import { FooterLink, FooterColumn } from './types';
+import { sendInteractionEvent, InteractionEventTypes } from 'shared/helpers';
+
+export default class extends LightningElement {
+    @api columns: FooterColumn[] = null!;
+
+    private slots: string = '';
+
+    private get _columns() {
+        return this.columns.map((col) => {
+            return Object.assign({}, col, {
+                links: col.links.map((link) => {
+                    return Object.assign({}, link, {
+                        handleClick: this.handleLinkClick.bind(this, link)
+                    });
+                })
+            });
+        });
+    }
+
+    private handleLinkClick(link: FooterLink, e: MouseEvent) {
+        sendInteractionEvent('Footer Click', InteractionEventTypes.CLICK, e, e.currentTarget);
+
+        this.dispatchEvent(new CustomEvent('link_click', { detail: link }));
+        track(this.template.host, 'link_clicked', { label: link.label });
+
+        const target = e.currentTarget as HTMLAnchorElement;
+        const column = target.closest('.links__column');
+        const heading = column && column.querySelector('.heading');
+        const headingText = (heading && heading.textContent) || '';
+
+        analyticsTrack(this.template.host, 'custEv_bottomNavLinkClick', {
+            headingText: headingText,
+            subHeadingText: target.textContent,
+            linkText: link.label
+        });
+    }
+
+    private handleSlotChange() {
+        this.slots = assignedSlotNames(this.template).join(' ');
+    }
+}

package/src/modules/tds/footerLinks/types.ts

@@ -0,0 +1,11 @@
+export type FooterLink = {
+    href: string;
+    target?: string;
+    label: string;
+    key?: string;
+};
+
+export type FooterColumn = {
+    heading: string;
+    links: FooterLink[];
+};

package/src/modules/tds/footerMfe/footerMfe.html

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

package/src/modules/tds/footerMfe/footerMfe.ts

@@ -0,0 +1,19 @@
+import { LightningElement } from 'lwc';
+
+export default class FooterMfe extends LightningElement {
+    private didRender = false;
+
+    renderedCallback() {
+        if (this.didRender) {
+            return;
+        }
+        this.didRender = true;
+
+        // Since the footer is a third-party component, we need to create it dynamically (LWC won't recognize it as a valid component).
+        const footerElement = document.createElement('hgf-footer');
+        footerElement.setAttribute('origin', window.location.origin); // will call the route handler for `/c360/experience/v1/navigation`
+        footerElement.setAttribute('hide-language-selector', 'true');
+        footerElement.setAttribute('home-href', `/${window.location.host}`); // ugly hack: ideally this wouldn't be necessary, but the only way to remove the "See all ways to contact us" link from the footer is to set this to a non-empty value other than "us"; and given the way that the footer works, the non-empty value needs to be something that can be appended to `/` and work correctly
+        this.template.querySelector('div')!.appendChild(footerElement);
+    }
+}

package/src/modules/tds/headerAvatar/__tests__/headerAvatar.test.ts

@@ -0,0 +1,43 @@
+import { html, renderIntoBody } from 'shared/testutils';
+
+import HeaderAvatar from '../headerAvatar';
+
+customElements.define(
+    'tds-header-avatar',
+    HeaderAvatar.CustomElementConstructor
+);
+
+describe('tds-header-avatar', () => {
+    it('sets the img src', () => {
+        let element = renderIntoBody(
+            html` <tds-header-avatar img-src="image.png"></tds-header-avatar> `
+        );
+        expect(element.shadowRoot!.querySelector('img')).toHaveAttribute(
+            'src',
+            'image.png'
+        );
+    });
+    it('sets the progress percent', () => {
+        let element = renderIntoBody(
+            html` <tds-header-avatar .percent=${50}></tds-header-avatar> `
+        );
+        expect(
+            element.shadowRoot!.querySelector('[role=progressbar]')
+        ).toHaveAttribute('aria-valuenow', '50');
+    });
+    it('sets the progress path', () => {
+        let element = renderIntoBody(
+            html` <tds-header-avatar .percent=${100}></tds-header-avatar> `
+        );
+        expect(element.shadowRoot!.querySelector('path')).toHaveAttribute(
+            'd',
+            'M 1 0 A 1 1 0 1 0 1 0 L 0 0'
+        );
+    });
+    it('hides the progress if no percent is passed', () => {
+        let element = renderIntoBody(
+            html` <tds-header-avatar></tds-header-avatar> `
+        );
+        expect(element.shadowRoot!.querySelector('svg')).toBeNull();
+    });
+});

package/src/modules/tds/headerAvatar/headerAvatar.css

@@ -0,0 +1,45 @@
+:host {
+    display: block;
+}
+
+.progress-ring {
+    position: relative;
+    display: block;
+    height: 38px;
+    width: 38px;
+    border-radius: 50%;
+    background: #dddbda;
+}
+
+.progress-ring__progress {
+    transform: scaleX(-1) rotate(-90deg);
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    position: absolute;
+}
+
+.progress-ring__path {
+    fill: rgb(44, 127, 92); /* TODO: token */
+}
+
+.progress-ring__content {
+    --size: 3px;
+    background-color: white;
+    bottom: calc(var(--size) * 2);
+    border-radius: 50%;
+    box-shadow: 0px 0px 0px var(--size) white;
+    left: calc(var(--size) * 2);
+    position: absolute;
+    right: calc(var(--size) * 2);
+    top: calc(var(--size) * 2);
+    z-index: 1;
+}
+
+.progress-ring__content img {
+    border-radius: 100px;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}

package/src/modules/tds/headerAvatar/headerAvatar.html

@@ -0,0 +1,25 @@
+<template>
+    <div if:true={percent} class="progress-ring">
+        <div
+            class="progress-ring__progress"
+            role="progressbar"
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-valuenow={percent}
+        >
+            <svg viewBox="-1 -1 2 2">
+                <path class="progress-ring__path" d={d}></path>
+            </svg>
+        </div>
+        <div class="progress-ring__content">
+            <img alt="" src={imgSrc} loading="lazy" decoding="async" />
+        </div>
+    </div>
+    <img
+        alt=""
+        class="progress-ring"
+        if:false={percent}
+        src={imgSrc}
+        loading="lazy"
+    />
+</template>

package/src/modules/tds/headerAvatar/headerAvatar.ts

@@ -0,0 +1,15 @@
+import { api, LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    @api imgSrc: string = '';
+    @api percent: number | null = null;
+
+    private get d() {
+        if (!this.percent) return '';
+        let isLong = this.percent > 50 ? 1 : 0;
+        let fill = 1 - this.percent / 100;
+        let arcX = Math.cos(2 * Math.PI * fill);
+        let arcY = Math.sin(2 * Math.PI * fill);
+        return `M 1 0 A 1 1 0 ${isLong} 0 ${arcX} ${arcY} L 0 0`;
+    }
+}

package/src/modules/tds/headerHelpButton/__tests__/headerHelpButton.test.ts

@@ -0,0 +1,32 @@
+import { html, renderIntoBody } from 'shared/testutils';
+
+import HeaderHelpButton from '../headerHelpButton';
+
+customElements.define(
+    'tds-header-help-button',
+    HeaderHelpButton.CustomElementConstructor
+);
+
+describe('tds-header-help-button', () => {
+    describe('tracking', () => {
+        it('header_help_clicked', () => {
+            let element = renderIntoBody(
+                html`
+                    <tds-header-help-button href="/"></tds-header-help-button>
+                `
+            );
+            let handler = jest.fn();
+            document.addEventListener('trailhead_track', handler, {
+                once: true
+            });
+            element
+                .shadowRoot!.querySelector('.help')!
+                .dispatchEvent(new MouseEvent('click'));
+            expect(handler.mock.calls[0][0].detail).toEqual(
+                expect.objectContaining({
+                    eventName: 'help_clicked'
+                })
+            );
+        });
+    });
+});

package/src/modules/tds/headerHelpButton/headerHelpButton.css

@@ -0,0 +1,14 @@
+@import 'tds/reset';
+
+.help-icon {
+    background-color: var(--tds-color-meteorite);
+    border-radius: 100px;
+    color: var(--tds-color-white);
+    padding: var(--tds-spacing-1);
+}
+
+.help,
+.help:visited,
+.help:active {
+    color: var(--tds-color-white);
+}

package/src/modules/tds/headerHelpButton/headerHelpButton.html

@@ -0,0 +1,19 @@
+<template>
+    <tds-button-icon-link
+        aria-label={assistiveText}
+        class="help"
+        href={href}
+        onclick={onClick}
+        variant="bare"
+        rel="noopener"
+        target="_blank"
+    >
+        <span class="help-icon">
+            <tds-icon
+                size="small"
+                sprite="action"
+                symbol="question_post_action"
+            ></tds-icon>
+        </span>
+    </tds-button-icon-link>
+</template>

package/src/modules/tds/headerHelpButton/headerHelpButton.ts

@@ -0,0 +1,12 @@
+import { api, LightningElement } from 'lwc';
+
+import { track } from 'shared/track';
+
+export default class extends LightningElement {
+    @api assistiveText: string = '';
+    @api href: string = '';
+
+    private onClick() {
+        track(this.template.host, 'help_clicked', {});
+    }
+}

package/src/modules/tds/heading/__tests__/heading.test.ts

@@ -0,0 +1,50 @@
+import { html, renderIntoBody } from 'shared/testutils';
+
+import Heading from '../heading';
+
+customElements.define('tds-heading', Heading.CustomElementConstructor);
+
+describe('tds-heading', () => {
+    it('level 1', () => {
+        let element = renderIntoBody(
+            html` <tds-heading level="1"></tds-heading> `
+        );
+        expect(element.shadowRoot!.querySelector('h1')).toBeTruthy();
+    });
+    it('level 2', () => {
+        let element = renderIntoBody(
+            html` <tds-heading level="2"></tds-heading> `
+        );
+        expect(element.shadowRoot!.querySelector('h2')).toBeTruthy();
+    });
+    it('level 3', () => {
+        let element = renderIntoBody(
+            html` <tds-heading level="3"></tds-heading> `
+        );
+        expect(element.shadowRoot!.querySelector('h3')).toBeTruthy();
+    });
+    it('level 4', () => {
+        let element = renderIntoBody(
+            html` <tds-heading level="4"></tds-heading> `
+        );
+        expect(element.shadowRoot!.querySelector('h4')).toBeTruthy();
+    });
+    it('level 5', () => {
+        let element = renderIntoBody(
+            html` <tds-heading level="5"></tds-heading> `
+        );
+        expect(element.shadowRoot!.querySelector('h5')).toBeTruthy();
+    });
+    it('level 6', () => {
+        let element = renderIntoBody(
+            html` <tds-heading level="6"></tds-heading> `
+        );
+        expect(element.shadowRoot!.querySelector('h6')).toBeTruthy();
+    });
+    it('null', () => {
+        let element = renderIntoBody(html` <tds-heading></tds-heading> `);
+        expect(
+            Array.from(element.shadowRoot!.children).map((n) => n.tagName)
+        ).toEqual(['SLOT']);
+    });
+});

package/src/modules/tds/heading/heading.css

@@ -0,0 +1 @@
+@import 'tds/reset';

package/src/modules/tds/heading/heading.html

@@ -0,0 +1,9 @@
+<template>
+    <h1 class="heading" if:true={isLevel1}><slot></slot></h1>
+    <h2 class="heading" if:true={isLevel2}><slot></slot></h2>
+    <h3 class="heading" if:true={isLevel3}><slot></slot></h3>
+    <h4 class="heading" if:true={isLevel4}><slot></slot></h4>
+    <h5 class="heading" if:true={isLevel5}><slot></slot></h5>
+    <h6 class="heading" if:true={isLevel6}><slot></slot></h6>
+    <template if:false={isHeading}><slot></slot></template>
+</template>

package/src/modules/tds/heading/heading.stories.ts

@@ -0,0 +1,36 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-heading',
+    parameters: {
+        modules: ['/modules/tds-heading.js']
+    }
+};
+
+export const Level1 = () => html`
+    <tds-heading level="1"> Level 1 </tds-heading>
+`;
+
+export const Level2 = () => html`
+    <tds-heading level="2"> Level 2 </tds-heading>
+`;
+
+export const Level3 = () => html`
+    <tds-heading level="3"> Level 3 </tds-heading>
+`;
+
+export const Level4 = () => html`
+    <tds-heading level="4"> Level 4 </tds-heading>
+`;
+
+export const Level5 = () => html`
+    <tds-heading level="5"> Level 5 </tds-heading>
+`;
+
+export const Level6 = () => html`
+    <tds-heading level="6"> Level 6 </tds-heading>
+`;
+
+export const NoHeading = () => html`
+    <tds-heading> Not a heading </tds-heading>
+`;