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

package/src/modules/th/search/mocks/responses.ts

@@ -1,54 +0,0 @@
-import { CoveoCompletion, UserRecent } from '../types';
-
-export const completions: { completions: CoveoCompletion[] } = {
-    completions: [
-        {
-            expression: 'LWC',
-            score: 1,
-            highlighted: 'LWC',
-            executableConfidence: 1
-        },
-        {
-            expression: 'Visualforce Pages',
-            score: 1,
-            highlighted: 'Visualforce Pages',
-            executableConfidence: 1
-        }
-    ]
-};
-
-export const recents: { recents: UserRecent[] } = {
-    recents: [
-        {
-            color: null,
-            completion: null,
-            content_type: 'Module',
-            icon_url: '/images/badge-1.png',
-            path: '/en/content/learn/modules/salesforce-cms-basics',
-            title: 'Salesforce CMS Basics 1',
-            type: 'recent_favorite'
-        },
-        {
-            color: null,
-            completion: null,
-            content_type: 'Module',
-            icon_url: '/images/badge-1.png',
-            path: '/en/content/learn/modules/salesforce-cms-basics',
-            title: 'Salesforce CMS Basics 2',
-            type: 'recent_favorite'
-        },
-        {
-            color: 'var(--tds-color-brand)',
-            completion: null,
-            content_type: 'Trailmix',
-            icon_url: '/images/badge-1.png',
-            path: '/en/content/learn/modules/salesforce-cms-basics',
-            title: 'Salesforce CMS Basics 3',
-            type: 'recent_favorite'
-        }
-    ]
-};
-
-export const token = {
-    token: 'TOKEN'
-};

package/src/modules/th/search/search.css

@@ -1,4 +0,0 @@
-:host {
-    display: block;
-    width: 100%;
-}

package/src/modules/th/search/search.html

@@ -1,12 +0,0 @@
-<template>
-    <tds-search
-        completions={completions}
-        default-value={defaultCompletionTerms}
-        if:true={config}
-        onfocus={onFocus}
-        onchange={onChange}
-        onsearch={onSearch}
-        placeholder={config.labels.placeholder}
-        recents={recents}
-    ></tds-search>
-</template>

package/src/modules/th/search/search.ts

@@ -1,172 +0,0 @@
-import { api, LightningElement, wire } from 'lwc';
-import {
-    ContextAdapter as ThContextAdapter,
-    ContextAdapterValue as ThContextAdapterValue
-} from 'th/contextAdapter';
-
-import { debounce } from 'shared/debounce';
-import { getJSON } from 'shared/fetch';
-import { TrailheadAPIClient } from 'shared/trailhead';
-
-import {
-    Completion,
-    Recent,
-    RecentSection,
-    SearchEvent
-} from '../../tds/search/types';
-
-import { RECENTS_PATH, TOKEN_PATH } from './constants';
-import { CoveoCompletion, Config, UserRecent } from './types';
-
-export default class extends LightningElement {
-    @api config: Config = null!;
-
-    private accessToken: string | null = null;
-
-    private get client() {
-        return new TrailheadAPIClient({ csrfToken: this.context.csrf });
-    }
-
-    private completionTerms: string = '';
-    private completionController: AbortController | null = null;
-    private completions: Completion[] = [];
-
-    @wire(ThContextAdapter)
-    private context: ThContextAdapterValue = null!;
-
-    private defaultCompletionTerms = '';
-
-    private getCompletions = debounce(async (terms: string) => {
-        const { completionController: prevController, config } = this;
-        if (prevController) {prevController.abort();}
-        if (!config) {return;}
-        if (!terms.length) {
-            this.completions = [];
-            return;
-        }
-        const controller = (this.completionController = new AbortController());
-        const accessToken = await this.getAccessToken();
-        const url = getCompletionsUrl({
-            accessToken,
-            baseUrl: config.coveo.querySuggestUrl,
-            locale: config.coveo.locale,
-            terms
-        });
-        const { completions } = await getJSON<{ completions: CoveoCompletion[] }>(
-            url,
-            { signal: controller.signal }
-        );
-        if (this.completionTerms === terms)
-            {this.completions = completions.map((c) => ({
-                value: c.expression,
-                valueHighlighted: c.highlighted
-            }));}
-    }, 250);
-
-    private recents: RecentSection[] | null = null;
-
-    private async getAccessToken() {
-        if (this.accessToken) {return this.accessToken;}
-        const { token } = await this.client.post<{ token: string }>(TOKEN_PATH);
-        this.accessToken = token;
-        return token;
-    }
-
-    private async getRecents() {
-        const { config } = this;
-        try {
-            const { recents } = await this.client.get<{ recents: UserRecent[] }>(
-                RECENTS_PATH
-            );
-            const { recent_favorite, recent_item } = recents.reduce<
-                {
-                    [type in UserRecent['type']]: UserRecent[];
-                }
-            >((a, b) => (a[b.type].push(b), a), {
-                recent_favorite: [],
-                recent_item: []
-            });
-            this.recents = [
-                {
-                    items: recent_item.map(toRecent),
-                    title: config.labels.recentViewed
-                },
-                {
-                    items: recent_favorite.map(toRecent),
-                    title: config.labels.recentFavorites
-                }
-            ].filter((s) => s.items.length);
-        } catch (e) {
-            console.error(e);
-        }
-    }
-
-    private onFocus(e: FocusEvent) {
-        if (!this.recents) {this.getRecents();}
-    }
-
-    private onChange(e: CustomEvent<{ value: string }>) {
-        this.completionTerms = e.detail.value;
-        this.getCompletions(e.detail.value);
-    }
-
-    private onSearch(e: CustomEvent<SearchEvent>) {
-        const { config } = this;
-        switch (e.detail.type) {
-            case 'completion': {
-                const query = new URLSearchParams({
-                    keywords: e.detail.value.value,
-                    suggested: 'true'
-                }).toString();
-                window.location.href = `${config!.searchUrl}?${query}`;
-                break;
-            }
-            case 'input': {
-                const query = new URLSearchParams({
-                    keywords: e.detail.value
-                }).toString();
-                window.location.href = `${config!.searchUrl}?${query}`;
-                break;
-            }
-            case 'recent': {
-                window.location.href = e.detail.value.path;
-                break;
-            }
-        }
-    }
-
-    connectedCallback() {
-        const params = new URLSearchParams(window.location.search);
-        if (params.has('keywords')) {
-            this.defaultCompletionTerms = params.get('keywords')!;
-        }
-    }
-}
-
-function getCompletionsUrl(params: {
-    accessToken: string;
-    baseUrl: string;
-    locale: string;
-    terms: string;
-}) {
-    let { accessToken, baseUrl, locale, terms } = { ...params };
-    if (!/^http/.test(baseUrl)) {baseUrl = `${process.env.API_HOST}${baseUrl}`;}
-    const query = new URLSearchParams({
-        access_token: accessToken,
-        count: '10',
-        enableWordCompletion: 'true',
-        locale,
-        q: terms
-    }).toString();
-    return `${baseUrl}?${query}`;
-}
-
-function toRecent(recent: UserRecent): Recent {
-    return {
-        icon: recent.icon_url,
-        iconBackgroundColor: recent.color ? recent.color : undefined,
-        path: recent.path,
-        pretitle: recent.content_type,
-        title: recent.title
-    };
-}

package/src/modules/th/search/types.d.ts

@@ -1,29 +0,0 @@
-export type Config = {
-    coveo: {
-        locale: string;
-        querySuggestUrl: string;
-    };
-    labels: {
-        placeholder: string;
-        recentViewed: string;
-        recentFavorites: string;
-    };
-    searchUrl: string;
-};
-
-export type CoveoCompletion = {
-    expression: string;
-    score: number;
-    highlighted: string;
-    executableConfidence: number;
-};
-
-export type UserRecent = {
-    color: string | null;
-    completion: string | null;
-    content_type: string;
-    icon_url: string;
-    path: string;
-    title: string;
-    type: 'recent_favorite' | 'recent_item';
-};

package/src/modules/tm/card/__tests__/card.test.ts

@@ -1,65 +0,0 @@
-import { nextTick } from 'shared/testutils';
-import Card from '../card';
-import { track } from 'tds/instrumentation';
-import { querySelector } from 'kagekiri';
-
-customElements.define('tm-card', Card.CustomElementConstructor);
-
-jest.mock('tds/instrumentation', () => {
-    return {
-        track: jest.fn()
-    };
-});
-
-describe('tm-card', () => {
-    beforeEach(() => {
-        // Mock SalesforceInteractions global object
-        (window as any).SalesforceInteractions = {
-            sendEvent: jest.fn()
-        };
-        // Clear the track mock
-        (track as jest.Mock).mockClear();
-    });
-
-    afterEach(() => {
-        document.body.innerHTML = '';
-        delete (window as any).SalesforceInteractions;
-    });
-
-    it('tracks clicks from anchor and image', async () => {
-        document.body.innerHTML = `
-            <tm-card
-                title="Item title"
-                cta-href="/#"
-                cta-title="Explore"
-                img-src="/image.png"
-            ></tm-card>
-        `;
-        await nextTick();
-
-        const item = document.body.querySelector('tm-card')!;
-        const anchor = querySelector('a', item);
-        const img = querySelector('.image', item);
-
-        anchor!.click();
-        img!.click();
-
-        expect(track).toBeCalledTimes(2);
-        const trackCalls = (track as jest.Mock).mock.calls;
-
-        // Both clicks should call track with select_content event
-        expect(trackCalls[0][0]).toBe(item);
-        expect(trackCalls[0][1]).toBe('select_content');
-        expect(trackCalls[0][2]).toMatchObject({
-            contentType: 'card grid',
-            itemLocation: 'card'
-        });
-
-        expect(trackCalls[1][0]).toBe(item);
-        expect(trackCalls[1][1]).toBe('select_content');
-        expect(trackCalls[1][2]).toMatchObject({
-            contentType: 'card grid',
-            itemLocation: 'card'
-        });
-    });
-});

package/src/modules/tm/card/card.css

@@ -1,131 +0,0 @@
-@import 'tds/reset';
-@import 'tm/cardBase';
-
-:host {
-    height: 100%;
-}
-
-a {
-    color: var(--tds-color-brand);
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-.card {
-    display: flex;
-}
-
-.content {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    color: var(--tds-color-black);
-}
-
-.content-inner {
-    flex: 1;
-}
-
-.pretitle {
-    font-size: var(--tds-font-size-sm);
-    color: var(--tds-color-meteorite);
-    padding-bottom: var(--tds-spacing-1);
-}
-
-.title {
-    font-size: var(--tds-font-size-lg);
-    font-weight: bold;
-}
-
-.description {
-    margin-top: var(--tds-spacing-3);
-    line-height: var(--tds-line-height-normal);
-}
-
-.cta {
-    font-weight: bold;
-    margin-top: var(--tds-spacing-3);
-    display: block;
-}
-
-div.image {
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-}
-
-img.image {
-    max-width: 90%;
-    max-height: 100px;
-}
-
-.card[data-href] .image {
-    cursor: pointer;
-}
-
-.card:not([data-image]),
-.card[data-image=''] {
-    padding: var(--tds-spacing-6);
-}
-
-.card[data-image^='top'] {
-    flex-direction: column-reverse;
-}
-
-.card[data-image^='top'] .content {
-    padding: var(--tds-spacing-6);
-}
-
-.card[data-image='top--cover'] .image {
-    height: 0;
-    border-top-left-radius: var(--tds-radius-lg);
-    border-top-right-radius: var(--tds-radius-lg);
-}
-
-.card[data-image='top--small'] .image {
-    align-self: flex-start;
-    margin: var(--tds-spacing-6) var(--tds-spacing-6) 0 var(--tds-spacing-6);
-    max-height: 75px;
-}
-
-.card[data-image='right--cover'] {
-    align-items: stretch;
-    padding: var(--tds-spacing-6);
-}
-
-.card[data-image='right--cover'] .image {
-    flex: 1;
-}
-
-.card[data-image='right--cover'] .image {
-    align-self: stretch;
-    border-radius: var(--tds-radius-lg);
-    margin-left: var(--tds-spacing-6);
-}
-
-.card[data-image='left--cover'] {
-    align-items: top;
-    flex-direction: row-reverse;
-    padding: var(--tds-spacing-6);
-}
-
-.card[data-image='left--cover'] .image {
-    align-self: stretch;
-    border-radius: var(--tds-radius-lg);
-    flex: 1;
-    margin-right: var(--tds-spacing-6);
-}
-
-.card[data-image='left--small'] {
-    align-items: flex-start;
-    flex-direction: row-reverse;
-    padding: var(--tds-spacing-6);
-}
-
-.card[data-image='left--small'] .image {
-    width: 50px;
-    margin-right: var(--tds-spacing-6);
-}

package/src/modules/tm/card/card.html

@@ -1,81 +0,0 @@
-<template>
-    <article
-        class="card card-base"
-        data-href={ctaHref}
-        data-image={imgVariantResponsive}
-        role="article"
-        aria-labelledby={cardTitleId}
-        tabindex="0"
-        onkeydown={handleCardKeydown}
-    >
-        <div class="content">
-            <div class="content-inner">
-                <template if:true={pretitle}>
-                    <p class="pretitle">{pretitle}</p>
-                </template>
-                <template if:true={pretitleHref}>
-                    <p><a href={pretitleHref}>{pretitleHrefText}</a></p>
-                </template>
-                <h3 class="title" id={cardTitleId}>{title}</h3>
-                <p if:true={description} class="description">{description}</p>
-            </div>
-            <a
-                if:true={ctaTitle}
-                class="cta"
-                name={ctaTitleId}
-                id={ctaTitleId}
-                href={ctaHref}
-                target={ctaTarget}
-                aria-label={assistiveText}
-                onclick={trackLinkClick}
-                rel={rel}
-                >{ctaTitle}<img
-                    if:true={isExternalHref}
-                    src="/assets/images/new_window.svg"
-                    style="display: inline; height: 1rem; margin: 0 0 0 5px"
-                    aria-label="Open link in new window"
-            /></a>
-        </div>
-        <template if:true={imgSrc}>
-            <div
-                name={ctaHref}
-                id={imageDivId}
-                class="image"
-                if:false={imgTag}
-                onclick={onImageClick}
-                style={imgStyle}
-                data-href={ctaHref}
-            ></div>
-            <picture if:true={imgTagNoSvg}>
-                <template if:false={isRemoteImage}>
-                    <source srcset={imgSrcSetWebP} />
-                    <source srcset={imgSrcSetJpg} />
-                </template>
-                <img
-                    name={ctaHref}
-                    id={imageImgId}
-                    class="image"
-                    if:true={imgTag}
-                    onclick={onImageClick}
-                    style={imgStyle}
-                    src={imgSrc}
-                    alt={imageAltText}
-                    loading="lazy"
-                    decoding="async"
-                />
-            </picture>
-            <img
-                name={ctaHref}
-                id={imageSvgId}
-                class="image"
-                if:true={imgTagSvg}
-                onclick={onImageClick}
-                style={imgStyle}
-                src={imgSrc}
-                alt={description}
-                loading="lazy"
-                decoding="async"
-            />
-        </template>
-    </article>
-</template>