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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,3 +0,0 @@
-// 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>"`;