@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tds/childSummary/childSummary.ts

@@ -0,0 +1,63 @@
+import { api, LightningElement } from 'lwc';
+
+type TitleMode = 'anchor' | 'button' | 'text';
+
+export default class extends LightningElement {
+    @api complete: boolean = false;
+    @api path: string | null = null;
+    @api subtitle: string | null = null;
+    @api title: string = '';
+
+    private _titleMode: TitleMode = 'anchor';
+
+    @api
+    get titleMode(): TitleMode {
+        // Backwards compatability
+        if (this._titleMode === 'anchor' && !this.path) {
+            if (process.env.NODE_ENV === 'development') {
+                console.warn(
+                    `title-mode was set to "anchor" but is missing "path" attribute, falling back to "button"`
+                );
+            }
+            return 'button';
+        }
+        return this._titleMode;
+    }
+
+    set titleMode(value) {
+        this._titleMode = value;
+    }
+
+    private onButtonClick(e: MouseEvent) {
+        this.dispatchEvent(new CustomEvent('navigate'));
+    }
+
+    private onItemClick(e: MouseEvent) {
+        // This code allows the entire component to be clicked,
+        // but we don't want to override the default behavior of anchors/buttons
+        switch (this.titleMode) {
+            case 'anchor': {
+                if (e.target && (e.target as HTMLElement).tagName === 'A')
+                    break;
+                window.location.href = this.path!;
+            }
+            case 'button': {
+                if (e.target && (e.target as HTMLElement).tagName === 'BUTTON')
+                    break;
+                this.dispatchEvent(new CustomEvent('navigate'));
+            }
+        }
+    }
+
+    private get titleIsAnchor() {
+        return this.titleMode === 'anchor';
+    }
+
+    private get titleIsButton() {
+        return this.titleMode === 'button';
+    }
+
+    private get titleIsText() {
+        return this.titleMode === 'text';
+    }
+}

package/src/modules/tds/childSummary/types.d.ts

@@ -0,0 +1,10 @@
+export type ChildSummary = {
+    id: string;
+    title: string;
+    estimatedTime: number;
+    path?: string;
+    user?: {
+        finishedAt?: string;
+        pointsEarned?: number;
+    };
+};

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

@@ -0,0 +1,32 @@
+import { querySelector } from 'kagekiri';
+import ContentChildListItem from '../contentChildListItem';
+
+import { html, renderIntoBody } from 'shared/testutils';
+
+customElements.define(
+    'tds-content-child-list-item',
+    ContentChildListItem.CustomElementConstructor
+);
+
+describe('tds-content-child-list-item', () => {
+    it('dispatches a navigate event', async () => {
+        let handler = jest.fn();
+        let element = renderIntoBody(html`
+            <tds-content-child-list-item
+                .summary=${{ title: 'Hello' }}
+                title-mode="button"
+            ></tds-content-child-list-item>
+        `);
+        element.addEventListener('navigate', handler);
+        querySelector('button', element)!.dispatchEvent(
+            new MouseEvent('click')
+        );
+        expect(handler).toHaveBeenCalledWith(
+            expect.objectContaining({
+                detail: {
+                    title: 'Hello'
+                }
+            })
+        );
+    });
+});

package/src/modules/tds/contentChildListItem/contentChildListItem.css

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

package/src/modules/tds/contentChildListItem/contentChildListItem.html

@@ -0,0 +1,10 @@
+<template>
+    <tds-child-summary
+        complete={complete}
+        path={summary.path}
+        onnavigate={onNavigate}
+        subtitle={subtitle}
+        title={summary.title}
+        title-mode={titleMode}
+    ></tds-child-summary>
+</template>

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

@@ -0,0 +1,46 @@
+import { html } from 'lit-html';
+
+// Fixtures not found - using placeholder types
+const unit: any = {};
+const unitComplete: any = {};
+
+export default {
+    title: 'tds/tds-content-child-list-item',
+    parameters: {
+        modules: ['/modules/tds-content-child-list-item.js']
+    }
+};
+
+const navigateHandler = (e: CustomEvent) => {
+    console.log('onNavigate', e.detail);
+};
+
+export const Base = () => html`
+    <div style="padding: 20px; background-color: #f0f0f0;">
+        <tds-content-child-list-item
+            @navigate=${navigateHandler}
+            .summary=${unit}
+        ></tds-content-child-list-item>
+    </div>
+`;
+
+export const Complete = () => html`
+    <div style="padding: 20px; background-color: #f0f0f0;">
+        <tds-content-child-list-item
+            @navigate=${navigateHandler}
+            .summary=${unitComplete}
+        >
+        </tds-content-child-list-item>
+    </div>
+`;
+
+export const CompleteSpanish = () => html`
+    <div style="padding: 20px; background-color: #f0f0f0;">
+        <tds-content-child-list-item
+            lang="es-MX"
+            @navigate=${navigateHandler}
+            .summary=${unitComplete}
+        >
+        </tds-content-child-list-item>
+    </div>
+`;

package/src/modules/tds/contentChildListItem/contentChildListItem.ts

@@ -0,0 +1,34 @@
+import { api, LightningElement } from 'lwc';
+import { ChildSummary } from '../childSummary/types';
+import { hoursMinutesLabel } from 'shared/labels/timeHelpers';
+import { pointLabel } from 'shared/labels/pointHelpers';
+
+export default class extends LightningElement {
+    @api lang: string = 'en';
+    @api summary: ChildSummary = null!;
+    @api titleMode: 'anchor' | 'button' | 'text' = 'anchor';
+
+    private onNavigate() {
+        this.dispatchEvent(
+            new CustomEvent('navigate', { detail: this.summary })
+        );
+    }
+
+    private get user() {
+        return this.summary.user || { finishedAt: null, pointsEarned: null };
+    }
+
+    private get subtitle() {
+        if (this.user.finishedAt) {
+            return pointLabel(this.lang, this.user.pointsEarned);
+        }
+
+        if (this.summary.estimatedTime) {
+            return hoursMinutesLabel(this.lang, this.summary.estimatedTime);
+        }
+    }
+
+    private get complete() {
+        return this.user.finishedAt ? true : false;
+    }
+}

package/src/modules/tds/contentIcon/contentIcon.css

@@ -0,0 +1,47 @@
+@import 'tds/reset';
+
+.image-container {
+    border-radius: var(--tds-radius-lg);
+    position: relative;
+}
+
+.image {
+    border-radius: var(--tds-radius-lg);
+    display: block;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+
+.icon {
+    align-self: center;
+    color: var(--tds-color-white);
+    display: flex;
+    background-color: var(--tds-color-evergreen);
+    border-radius: var(--tds-radius-full);
+    border: 3px solid var(--tds-color-white);
+    box-sizing: border-box;
+    justify-content: center;
+    height: var(--size);
+    position: absolute;
+    right: -10px;
+    top: -4px;
+    width: var(--size);
+}
+
+.icon--small,
+.icon--medium {
+    --size: 30px;
+}
+
+.icon--large,
+.icon--xlarge {
+    --size: 38px;
+}
+
+.icon-svg {
+    --icon-size: 100%;
+    height: 60%;
+    margin: auto;
+    width: 60%;
+}

package/src/modules/tds/contentIcon/contentIcon.html

@@ -0,0 +1,15 @@
+<template>
+    <div class="image-container" style={imageContainerStyles}>
+        <img src={src} class="image" loading="lazy" decoding="async"/>
+        <template if:true={checked}>
+            <div class={iconClassName}>
+                <tds-icon
+                    class="icon-svg"
+                    size="override"
+                    sprite="action"
+                    symbol="check"
+                ></tds-icon>
+            </div>
+        </template>
+    </div>
+</template>

package/src/modules/tds/contentIcon/contentIcon.stories.js

@@ -0,0 +1,110 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tds/tds-content-icon',
+    parameters: {
+        modules: ['/modules/tds-content-icon.js']
+    }
+};
+
+export const Base = () => html`
+    <tds-content-icon src="/images/badge-1.png"></tds-content-icon>
+`;
+
+export const BaseChecked = () => html`
+    <tds-content-icon
+        .checked=${true}
+        src="/images/badge-1.png"
+    ></tds-content-icon>
+`;
+
+export const BaseSmall = () => html`
+    <tds-content-icon size="small" src="/images/badge-1.png"></tds-content-icon>
+`;
+
+export const BaseSmallChecked = () => html`
+    <tds-content-icon
+        .checked=${true}
+        size="small"
+        src="/images/badge-1.png"
+    ></tds-content-icon>
+`;
+
+export const BaseLarge = () => html`
+    <tds-content-icon size="large" src="/images/badge-1.png"></tds-content-icon>
+`;
+
+export const BaseLargeChecked = () => html`
+    <tds-content-icon
+        .checked=${true}
+        size="large"
+        src="/images/badge-1.png"
+    ></tds-content-icon>
+`;
+
+export const BaseXLarge = () => html`
+    <tds-content-icon
+        size="xlarge"
+        src="/images/badge-1.png"
+    ></tds-content-icon>
+`;
+
+export const BaseXLargeChecked = () => html`
+    <tds-content-icon
+        .checked=${true}
+        size="xlarge"
+        src="/images/badge-1.png"
+    ></tds-content-icon>
+`;
+
+export const Trail = () => html`
+    <tds-content-icon
+        .background=${true}
+        color="rgb(221, 49, 49)"
+        src="/images/badge-trail-1.png"
+    ></tds-content-icon>
+`;
+
+export const TrailChecked = () => html`
+    <tds-content-icon
+        .background=${true}
+        color="rgb(221, 49, 49)"
+        .checked=${true}
+        src="/images/badge-trail-1.png"
+    ></tds-content-icon>
+`;
+
+export const TrailSmall = () => html`
+    <tds-content-icon
+        .background=${true}
+        color="rgb(221, 49, 49)"
+        size="small"
+        src="/images/badge-trail-1.png"
+    ></tds-content-icon>
+`;
+
+export const TrailLarge = () => html`
+    <tds-content-icon
+        .background=${true}
+        color="rgb(221, 49, 49)"
+        size="large"
+        src="/images/badge-trail-1.png"
+    ></tds-content-icon>
+`;
+
+export const Trailmix = () => html`
+    <tds-content-icon
+        .background=${true}
+        size="large"
+        src="/images/trailblazer-1.png"
+    ></tds-content-icon>
+`;
+
+export const TrailmixComplete = () => html`
+    <tds-content-icon
+        .background=${true}
+        size="large"
+        .checked=${true}
+        src="/images/trailblazer-1.png"
+    ></tds-content-icon>
+`;

package/src/modules/tds/contentIcon/contentIcon.ts

@@ -0,0 +1,66 @@
+import { api, LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    @api background: boolean = false;
+    @api checked: boolean = false;
+    @api color: string | null = null;
+    @api size: 'small' | 'medium' | 'large' | 'xlarge' = 'medium';
+    _src: string = '';
+
+    @api
+    get src() {
+        return this._src;
+    }
+    set src(value) {
+        const cms = value?.indexOf('sf-archs');
+        if (cms !== -1) {
+            this._src = `https://${value.substring(value.indexOf('sf-archs'))}`;
+        } else {
+            this._src = value;
+        }
+    }
+    private get imageSize() {
+        switch (this.size) {
+            case 'small':
+                return 64;
+            case 'medium':
+                return 72;
+            case 'large':
+                return 96;
+            case 'xlarge':
+                return 128;
+        }
+    }
+
+    private get imageContainerStyles() {
+        let styles = `height: ${this.imageSize}px; width: ${this.imageSize}px;`;
+        if (this.background) {
+            return [styles, `background-color: ${this.color};`].join(' ');
+        }
+        return styles;
+    }
+
+    private get iconClassName() {
+        return `icon icon--${this.size}`;
+    }
+
+    private get imgSrcSetWebP() {
+        const imgType = this.src.split('.').pop();
+        const imgName = this.src.replace(`.${imgType}`, '');
+        return `${imgName}-search.webp 75w`;
+    }
+
+    private get imgSrcSetJpg() {
+        const imgType = this.src.split('.').pop();
+        const imgName = this.src.replace(`.${imgType}`, '');
+        return `${imgName}-search.jpg 75w`;
+    }
+
+    private get imgTagNoSvg() {
+        return !this.src.toLowerCase().endsWith('svg');
+    }
+
+    private get imgTagSvg() {
+        return this.src.toLowerCase().endsWith('svg');
+    }
+}

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

@@ -0,0 +1,76 @@
+import { ContextWireAdapter } from '../../../common/context';
+import {
+    ContextAdapter,
+    setDefaultValue,
+    setGlobalContext,
+    ContextAdapterValue,
+    ContextAdapterConfig,
+    ContextAdapterContext
+} from '../contextAdapter';
+
+describe('tds-context-adapter', () => {
+    let setValue: jest.Mock<(value: string) => void>;
+    let adapter: ContextWireAdapter<
+        ContextAdapterValue,
+        ContextAdapterConfig,
+        ContextAdapterContext
+    >;
+    beforeEach(() => {
+        setValue = jest.fn();
+        adapter = new ContextAdapter(setValue);
+    });
+    it('default values', () => {
+        adapter = new ContextAdapter(setValue);
+        expect(adapter.value).toEqual(
+            expect.objectContaining({
+                assetsUrl: '/assets/images',
+                crossOriginAssets: false,
+                locale: 'en'
+            })
+        );
+    });
+    describe('resolution', () => {
+        beforeEach(() => {
+            setGlobalContext(null!);
+            setDefaultValue({
+                assetsUrl: '/default/ui',
+                crossOriginAssets: false,
+                locale: 'en'
+            });
+        });
+        it('uses the default value', () => {
+            setDefaultValue({
+                assetsUrl: '/default/ui',
+                crossOriginAssets: false,
+                locale: 'en'
+            });
+            adapter = new ContextAdapter(setValue);
+            expect(adapter.value).toEqual(
+                expect.objectContaining({ assetsUrl: '/default/ui' })
+            );
+        });
+        it('uses the global context', () => {
+            setGlobalContext({ assetsUrl: '/global/ui' });
+            expect(adapter.value).toEqual(
+                expect.objectContaining({ assetsUrl: '/global/ui' })
+            );
+        });
+        it('uses the local context', () => {
+            setGlobalContext({ assetsUrl: '/global/ui' });
+            adapter.update({}, { assetsUrl: '/local/ui' });
+            expect(adapter.value).toEqual(
+                expect.objectContaining({ assetsUrl: '/local/ui' })
+            );
+        });
+        it('uses the adapter config', () => {
+            setGlobalContext({ assetsUrl: '/global/ui' });
+            adapter.update(
+                { assetsUrl: '/adapter/ui' },
+                { assetsUrl: '/global/ui' }
+            );
+            expect(adapter.value).toEqual(
+                expect.objectContaining({ assetsUrl: '/adapter/ui' })
+            );
+        });
+    });
+});

package/src/modules/tds/contextAdapter/constants.ts

@@ -0,0 +1 @@
+export const DEFAULT_LOCALE = 'en';

package/src/modules/tds/contextAdapter/contextAdapter.html

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

package/src/modules/tds/contextAdapter/contextAdapter.ts

@@ -0,0 +1,54 @@
+import { Locale } from 'shared/i18n';
+import { DEFAULT_LOCALE } from './constants';
+import { createContextAdapter } from 'common/context';
+
+type Nullable<T> = T | null;
+
+export type ContextAdapterValue = {
+    crossOriginAssets: boolean;
+    assetsUrl: string;
+    locale: Locale;
+};
+
+export type ContextAdapterConfig = {
+    crossOriginAssets?: Nullable<boolean>;
+    assetsUrl?: Nullable<string>;
+    locale?: Nullable<Locale>;
+};
+
+export type ContextAdapterContext = {
+    crossOriginAssets?: Nullable<boolean>;
+    assetsUrl?: Nullable<string>;
+    locale?: Nullable<Locale>;
+};
+
+export const ContextAdapter = createContextAdapter<
+    ContextAdapterValue,
+    ContextAdapterConfig,
+    ContextAdapterContext
+>(
+    (): ContextAdapterValue => {
+        return {
+            crossOriginAssets: process.env.CROSS_ORIGIN_ASSETS === 'true',
+            // See `rollup.config.js` for more explanation of this variable
+            // If set, we trim everything after /modules to get the absolute assets url on `th-components`
+            // If not, we default to the relative assets url on `th-components`
+            assetsUrl: process.env.IMPORT_META_URL
+                ? String(process.env.IMPORT_META_URL).replace(/\/modules.*/, '')
+                : '/assets/images',
+            locale: getDefaultLocale() as Locale
+        };
+    },
+    {
+        assetsUrl: 'optional',
+        crossOriginAssets: 'optional',
+        locale: 'optional'
+    }
+);
+
+export const { setGlobalContext, setDefaultValue } = ContextAdapter;
+
+function getDefaultLocale() {
+    // @ts-ignore
+    return window.locale || DEFAULT_LOCALE;
+}

package/src/modules/tds/dialogStyles/dialogStyles.css

@@ -0,0 +1,90 @@
+@import 'tds/reset';
+
+:host {
+    --nubbin-size: 14px;
+}
+
+[aria-hidden='true'] {
+    visibility: hidden;
+    pointer-events: none;
+}
+
+.with-nubbin::before,
+.with-nubbin::after {
+    content: '';
+    width: var(--nubbin-size);
+    height: var(--nubbin-size);
+    transform: rotate(45deg);
+    position: absolute;
+    z-index: -1;
+}
+
+.with-nubbin::before {
+    background-color: inherit;
+}
+
+.with-nubbin::after {
+    box-shadow: var(--tds-shadow-sm);
+}
+
+.with-nubbin[data-popper-placement^='top']::before,
+.with-nubbin[data-popper-placement^='top']::after {
+    bottom: calc(var(--nubbin-size) / 2 * -1);
+}
+
+.with-nubbin[data-popper-placement^='bottom']::before,
+.with-nubbin[data-popper-placement^='bottom']::after {
+    top: calc(var(--nubbin-size) / 2 * -1);
+}
+
+.with-nubbin[data-popper-placement^='right']::before,
+.with-nubbin[data-popper-placement^='right']::after {
+    left: calc(var(--nubbin-size) / 2 * -1);
+}
+
+.with-nubbin[data-popper-placement^='left']::before,
+.with-nubbin[data-popper-placement^='left']::after {
+    right: calc(var(--nubbin-size) / 2 * -1);
+}
+
+.with-nubbin[data-popper-placement='top']::before,
+.with-nubbin[data-popper-placement='bottom']::before,
+.with-nubbin[data-popper-placement='top']::after,
+.with-nubbin[data-popper-placement='bottom']::after {
+    left: calc(50% - var(--nubbin-size) / 2);
+}
+
+.with-nubbin[data-popper-placement='top-start']::before,
+.with-nubbin[data-popper-placement='bottom-start']::before,
+.with-nubbin[data-popper-placement='top-start']::after,
+.with-nubbin[data-popper-placement='bottom-start']::after {
+    left: var(--nubbin-size);
+}
+
+.with-nubbin[data-popper-placement='top-end']::before,
+.with-nubbin[data-popper-placement='bottom-end']::before,
+.with-nubbin[data-popper-placement='top-end']::after,
+.with-nubbin[data-popper-placement='bottom-end']::after {
+    right: var(--nubbin-size);
+}
+
+.with-nubbin[data-popper-placement='right']::before,
+.with-nubbin[data-popper-placement='left']::before,
+.with-nubbin[data-popper-placement='right']::after,
+.with-nubbin[data-popper-placement='left']::after {
+    top: calc(50% - var(--nubbin-size) / 2);
+}
+
+.with-nubbin[data-popper-placement='right-start']::before,
+.with-nubbin[data-popper-placement='left-start']::before,
+.with-nubbin[data-popper-placement='right-start']::after,
+.with-nubbin[data-popper-placement='left-start']::after {
+    top: var(--nubbin-size);
+}
+
+.with-nubbin[data-popper-placement='right-end']::before,
+.with-nubbin[data-popper-placement='left-end']::before,
+.with-nubbin[data-popper-placement='right-end']::after,
+.with-nubbin[data-popper-placement='left-end']::after {
+    bottom: var(--nubbin-size);
+}

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`undefined: toMatchHTMLSnapshot 1`] = `"<div class="footer" data-slots=""><div class="container"><nav class="links"><div class="links__column"><div class="heading">Learn</div><ul><li><a href="/">Trails</a></li><li><a href="/">Trailmixes</a></li></ul></div><div class="links__column"><div class="heading">Extras</div><ul><li><a href="/">myTrailhead</a></li><li><a href="/" target="_blank">Help</a></li></ul></div></nav><div class="bottom"><slot name="left"></slot><slot name="right"></slot></div></div></div>"`;