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

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

@@ -1,142 +0,0 @@
-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>
-                `
-            );
-
-            const 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>
-                `
-            );
-            const 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

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

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

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

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

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

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

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

@@ -1,43 +0,0 @@
-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', () => {
-        const 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', () => {
-        const 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', () => {
-        const 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', () => {
-        const element = renderIntoBody(
-            html` <tds-header-avatar></tds-header-avatar> `
-        );
-        expect(element.shadowRoot!.querySelector('svg')).toBeNull();
-    });
-});

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

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

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

@@ -1,15 +0,0 @@
-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 '';}
-        const isLong = this.percent > 50 ? 1 : 0;
-        const fill = 1 - this.percent / 100;
-        const arcX = Math.cos(2 * Math.PI * fill);
-        const 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

@@ -1,32 +0,0 @@
-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', () => {
-            const element = renderIntoBody(
-                html`
-                    <tds-header-help-button href="/"></tds-header-help-button>
-                `
-            );
-            const 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

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

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

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

@@ -1,50 +0,0 @@
-import { html, renderIntoBody } from 'shared/testutils';
-
-import Heading from '../heading';
-
-customElements.define('tds-heading', Heading.CustomElementConstructor);
-
-describe('tds-heading', () => {
-    it('level 1', () => {
-        const element = renderIntoBody(
-            html` <tds-heading level="1"></tds-heading> `
-        );
-        expect(element.shadowRoot!.querySelector('h1')).toBeTruthy();
-    });
-    it('level 2', () => {
-        const element = renderIntoBody(
-            html` <tds-heading level="2"></tds-heading> `
-        );
-        expect(element.shadowRoot!.querySelector('h2')).toBeTruthy();
-    });
-    it('level 3', () => {
-        const element = renderIntoBody(
-            html` <tds-heading level="3"></tds-heading> `
-        );
-        expect(element.shadowRoot!.querySelector('h3')).toBeTruthy();
-    });
-    it('level 4', () => {
-        const element = renderIntoBody(
-            html` <tds-heading level="4"></tds-heading> `
-        );
-        expect(element.shadowRoot!.querySelector('h4')).toBeTruthy();
-    });
-    it('level 5', () => {
-        const element = renderIntoBody(
-            html` <tds-heading level="5"></tds-heading> `
-        );
-        expect(element.shadowRoot!.querySelector('h5')).toBeTruthy();
-    });
-    it('level 6', () => {
-        const element = renderIntoBody(
-            html` <tds-heading level="6"></tds-heading> `
-        );
-        expect(element.shadowRoot!.querySelector('h6')).toBeTruthy();
-    });
-    it('null', () => {
-        const 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

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

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

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

@@ -1,36 +0,0 @@
-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>
-`;