@salesforcedevs/arch-components 1.28.5-node22-1 → 1.29.0

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/lwc.config.json

@@ -15,7 +15,6 @@
         "arch/cardGridD",
         "arch/cardNew",
         "arch/children",
-        "arch/content",
         "arch/contentIcon",
         "arch/context",
         "arch/contextAdapter",
@@ -31,6 +30,7 @@
         "arch/pageHeaderA",
         "arch/pill",
         "arch/reflectedElement",
+        "arch/searchHybrid",
         "arch/searchList",
         "arch/sectionA",
         "arch/select",

package/package.json

@@ -1,47 +1,48 @@
 {
-  "name": "@salesforcedevs/arch-components",
-  "version": "1.28.5-node22-1",
-  "description": "Architect Lightning web components",
-  "license": "MIT",
-  "engines": {
-    "node": "22.x"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@coveo/headless": "3.22.2",
-    "@floating-ui/dom": "1.5.1",
-    "@optimizely/optimizely-sdk": "5.3.0",
-    "@shikijs/colorized-brackets": "^3.12.2",
-    "@types/throttle-debounce": "5.0.2",
-    "@vimeo/player": "2.22.0",
-    "classnames": "2.5.1",
-    "composed-offset-position": "0.0.4",
-    "coveo-search-ui": "2.10113.0",
-    "debounce": "1.2.1",
-    "js-cookie": "3.0.5",
-    "jspdf": "^2.5.1",
-    "lodash.defaults": "4.2.0",
-    "lodash.get": "4.4.2",
-    "lodash.kebabcase": "4.1.1",
-    "memoize-one": "6.0.0",
-    "microtip": "0.2.2",
-    "shiki": "^3.12.2",
-    "throttle-debounce": "5.0.0",
-    "uuid": "9.0.1"
-  },
-  "devDependencies": {
-    "@types/classnames": "2.3.1",
-    "@types/debounce": "1.2.4",
-    "@types/js-cookie": "3.0.6",
-    "@types/lodash.defaults": "4.2.9",
-    "@types/lodash.get": "4.4.9",
-    "@types/lodash.kebabcase": "4.1.9",
-    "@types/luxon": "3.4.2",
-    "@types/uuid": "8.3.4",
-    "@types/vimeo__player": "2.18.3",
-    "eventsourcemock": "2.0.0",
-    "luxon": "3.4.4"
-  }
-}
+    "name": "@salesforcedevs/arch-components",
+    "version": "1.29.0",
+    "description": "Architect Lightning web components",
+    "license": "MIT",
+    "engines": {
+        "node": "22.x"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@coveo/headless": "3.22.2",
+        "@floating-ui/dom": "1.5.1",
+        "@optimizely/optimizely-sdk": "5.3.0",
+        "@shikijs/colorized-brackets": "^3.12.2",
+        "@types/throttle-debounce": "5.0.2",
+        "@vimeo/player": "2.22.0",
+        "classnames": "2.5.1",
+        "composed-offset-position": "0.0.4",
+        "coveo-search-ui": "2.10113.0",
+        "debounce": "1.2.1",
+        "js-cookie": "3.0.5",
+        "jspdf": "^2.5.1",
+        "lodash.defaults": "4.2.0",
+        "lodash.get": "4.4.2",
+        "lodash.kebabcase": "4.1.1",
+        "memoize-one": "6.0.0",
+        "microtip": "0.2.2",
+        "shiki": "^3.12.2",
+        "throttle-debounce": "5.0.0",
+        "uuid": "9.0.1"
+    },
+    "devDependencies": {
+        "@types/classnames": "2.3.1",
+        "@types/debounce": "1.2.4",
+        "@types/js-cookie": "3.0.6",
+        "@types/lodash.defaults": "4.2.9",
+        "@types/lodash.get": "4.4.9",
+        "@types/lodash.kebabcase": "4.1.9",
+        "@types/luxon": "3.4.2",
+        "@types/uuid": "8.3.4",
+        "@types/vimeo__player": "2.18.3",
+        "eventsourcemock": "2.0.0",
+        "luxon": "3.4.4"
+    },
+    "gitHead": "5d072e2fa81d7eccadcbfb4134ee007ce2b0c7c4"
+}

package/src/modules/arch/browserLocale/browserLocale.ts

@@ -0,0 +1,104 @@
+/**
+ * @file Resolves a browser's preferred language (BCP-47 tags from
+ * navigator.languages) to one of the site's supported locale ids
+ * (e.g. "en-us", "ja-jp", "zh-tw"). Used to pick a sensible default language
+ * for search when the page itself carries no locale.
+ */
+
+const DEFAULT_LOCALE = "en-us";
+
+/**
+ * Region/script-aware overrides for cases a plain language-only match can't
+ * resolve. Keys are normalized lowercase BCP-47 tags (or language-only codes);
+ * values are site locale ids. Order of checks: exact id -> these rules ->
+ * language-only first match -> default.
+ *
+ * Product decisions baked in (see search locale design):
+ *   - bare "es" -> es-mx (languages.yml lists es-mx as the generic Spanish)
+ *   - any pt-* -> pt-br (only Brazilian Portuguese is published)
+ *   - no/nb/nn -> nb-no (only Norwegian id)
+ *   - Chinese is matched on script/region, never collapsed to language-only.
+ */
+const TAG_OVERRIDES: Record<string, string> = {
+    // Chinese — Traditional
+    "zh-tw": "zh-tw",
+    "zh-hant": "zh-tw",
+    "zh-hk": "zh-tw",
+    "zh-mo": "zh-tw",
+    // Chinese — Simplified (and bare "zh")
+    zh: "zh-cn",
+    "zh-cn": "zh-cn",
+    "zh-hans": "zh-cn",
+    "zh-sg": "zh-cn",
+    // Spanish
+    es: "es-mx",
+    "es-es": "es-es",
+    // Portuguese (only pt-br exists)
+    pt: "pt-br",
+    "pt-pt": "pt-br",
+    // Norwegian (only nb-no exists)
+    no: "nb-no",
+    nb: "nb-no",
+    nn: "nb-no"
+};
+
+/**
+ * Map a single language-only code (e.g. "ja", "de") to its site locale id by
+ * finding the first supported id whose language subtag matches.
+ */
+function languageOnlyMatch(
+    language: string,
+    supportedIds: string[]
+): string | undefined {
+    return supportedIds.find((id) => id.split("-")[0] === language);
+}
+
+/**
+ * Resolve the best site locale id for the given browser languages.
+ * The first browser language that maps to a supported id wins; earlier entries
+ * take precedence over later ones (matching navigator.languages ordering).
+ * @param navigatorLanguages Ordered list of BCP-47 tags (navigator.languages).
+ * @param supportedIds Site locale ids actually offered (e.g. from the dropdown).
+ * @returns A supported locale id, or "en-us" if nothing matches.
+ */
+export function resolveBrowserLocale(
+    navigatorLanguages: readonly string[] | undefined,
+    supportedIds: string[]
+): string {
+    if (!navigatorLanguages || navigatorLanguages.length === 0) {
+        return DEFAULT_LOCALE;
+    }
+
+    const supported = new Set(supportedIds);
+
+    for (const raw of navigatorLanguages) {
+        if (!raw) {
+            continue;
+        }
+        const tag = raw.toLowerCase();
+
+        // 1. Exact id match (e.g. "ja-jp" -> ja-jp).
+        if (supported.has(tag)) {
+            return tag;
+        }
+
+        // 2. Region/script override (e.g. "zh-tw" -> zh-tw, "es" -> es-mx).
+        const overridden = TAG_OVERRIDES[tag];
+        if (overridden && supported.has(overridden)) {
+            return overridden;
+        }
+
+        // 3. Language-only fall-through (e.g. "de-ch" -> de -> de-de).
+        const language = tag.split("-")[0];
+        const overriddenLang = TAG_OVERRIDES[language];
+        if (overriddenLang && supported.has(overriddenLang)) {
+            return overriddenLang;
+        }
+        const matched = languageOnlyMatch(language, supportedIds);
+        if (matched) {
+            return matched;
+        }
+    }
+
+    return DEFAULT_LOCALE;
+}

package/src/modules/arch/localePreference/localePreference.ts

@@ -0,0 +1,72 @@
+/**
+ * @file Per-device storage for the user's chosen search language, gated behind
+ * OneTrust functional-cookie consent.
+ *
+ * There is no shared consent util in the codebase; this mirrors the consent
+ * read used on the admin site (page-events-calendar.php's one_trust_notice),
+ * which parses the OptanonConsent cookie's `groups` field and inspects the
+ * functional category. OneTrust's standard functional group id is C0003;
+ * "C0003:1" means granted, "C0003:0" means denied.
+ */
+
+const STORAGE_KEY = "arch-search-language";
+const FUNCTIONAL_GROUP_ID = "C0003";
+
+/**
+ * Read the OptanonConsent cookie and return whether the functional group is
+ * granted. Defensive: if OneTrust hasn't loaded or the cookie is absent
+ * (tests, pre-consent, non-prod), returns false so we never persist without
+ * an explicit grant.
+ */
+function hasFunctionalConsent(): boolean {
+    try {
+        const cookie = document.cookie
+            .split("; ")
+            .find((row) => row.startsWith("OptanonConsent="));
+        if (!cookie) {
+            return false;
+        }
+        // The cookie value is URL-encoded querystring-style, e.g.
+        // "...&groups=C0001:1,C0003:1,C0002:0&...".
+        const value = decodeURIComponent(cookie.split("=").slice(1).join("="));
+        const groups = new URLSearchParams(value).get("groups");
+        if (!groups) {
+            return false;
+        }
+        return groups
+            .split(",")
+            .some((entry) => entry.trim() === `${FUNCTIONAL_GROUP_ID}:1`);
+    } catch (e) {
+        return false;
+    }
+}
+
+/**
+ * Get the stored language preference, or null if none / unavailable.
+ * Reading an already-stored preference is low-risk, so it is not consent-gated.
+ */
+export function getStoredLanguage(): string | null {
+    try {
+        return window.localStorage.getItem(STORAGE_KEY);
+    } catch (e) {
+        return null;
+    }
+}
+
+/**
+ * Persist the chosen language, but only if the user has granted functional
+ * consent. Returns true if the value was written, false if it was skipped
+ * (no consent) or failed. When skipped, the choice still applies for the
+ * current page/session via in-memory state and the ?lang= URL param.
+ */
+export function setStoredLanguage(language: string): boolean {
+    if (!language || !hasFunctionalConsent()) {
+        return false;
+    }
+    try {
+        window.localStorage.setItem(STORAGE_KEY, language);
+        return true;
+    } catch (e) {
+        return false;
+    }
+}

package/src/modules/arch/searchHybrid/searchHybrid.css

@@ -0,0 +1,113 @@
+@import "arch/reset";
+
+:host {
+    font-size: var(--arch-font-size-md);
+    position: relative;
+    width: 100%;
+}
+
+.search-toolbar {
+    display: flex;
+    gap: var(--arch-spacing-4);
+    justify-content: flex-end;
+    margin-bottom: var(--arch-spacing-4);
+}
+
+.search-language-selector,
+.search-sort-selector {
+    display: flex;
+}
+
+.search-facets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--arch-spacing-2);
+    margin-bottom: var(--arch-spacing-4);
+}
+
+.search-facet-chip {
+    align-items: center;
+    background-color: white;
+    border: 1px solid var(--arch-color-fog);
+    border-radius: var(--arch-radius-lg);
+    color: var(--arch-color-black);
+    cursor: pointer;
+    display: inline-flex;
+    font-family: inherit;
+    font-size: var(--arch-font-size-sm);
+    gap: var(--arch-spacing-2);
+    padding: var(--arch-spacing-1) var(--arch-spacing-3);
+}
+
+.search-facet-chip[aria-pressed="true"] {
+    background-color: var(--arch-color-meteorite);
+    border-color: var(--arch-color-meteorite);
+    color: white;
+}
+
+.search-facet-count {
+    font-size: var(--arch-font-size-xs);
+    opacity: 0.8;
+}
+
+.search-summary {
+    color: var(--arch-color-granite);
+    font-size: var(--arch-font-size-sm);
+    margin-bottom: var(--arch-spacing-4);
+}
+
+/* Semantic results list (WCAG 1.3.1) — reset the list chrome so the visual
+   is identical to the prior div-based markup. */
+.search-result-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.search-result-type {
+    color: var(--arch-color-meteorite);
+    font-size: var(--arch-font-size-sm);
+    line-height: var(--arch-line-height-snug);
+}
+
+.search-state {
+    padding: var(--arch-spacing-6) 0;
+    text-align: center;
+}
+
+.search-state-error {
+    color: var(--arch-color-error, #c23934);
+}
+
+.search-pagination {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--arch-spacing-2);
+    justify-content: center;
+    margin-top: var(--arch-spacing-6);
+}
+
+.search-pagination button {
+    background-color: white;
+    border: 1px solid var(--arch-color-fog);
+    border-radius: var(--arch-radius-md);
+    color: var(--arch-color-black);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--arch-font-size-sm);
+    min-width: 2.5rem;
+    padding: var(--arch-spacing-1) var(--arch-spacing-3);
+}
+
+.search-pagination button[disabled] {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.search-pagination button[aria-current="page"] {
+    background-color: var(--arch-color-meteorite);
+    border-color: var(--arch-color-meteorite);
+    color: white;
+    opacity: 1;
+}

package/src/modules/arch/searchHybrid/searchHybrid.html

@@ -0,0 +1,164 @@
+<template>
+    <arch-section-a background="white" title="Search">
+        <div class="search-toolbar">
+            <template lwc:if={showLanguageSelector}>
+                <div class="search-language-selector">
+                    <arch-select
+                        assistive-text="Search language"
+                        value={language}
+                        onchange={handleLanguageChange}
+                    >
+                        <template for:each={localeOptions} for:item="locale">
+                            <option key={locale.id} value={locale.id}>
+                                {locale.displayText}
+                            </option>
+                        </template>
+                    </arch-select>
+                </div>
+            </template>
+            <div class="search-sort-selector">
+                <arch-select
+                    assistive-text="Sort results"
+                    value={sort}
+                    onchange={handleSortChange}
+                >
+                    <template for:each={sortChoices} for:item="choice">
+                        <option key={choice.id} value={choice.id}>
+                            {choice.displayText}
+                        </option>
+                    </template>
+                </arch-select>
+            </div>
+        </div>
+
+        <template lwc:if={showFacets}>
+            <div class="search-facets" role="group" aria-label="Filter by type">
+                <template for:each={contentTypeFacets} for:item="facet">
+                    <button
+                        key={facet.value}
+                        type="button"
+                        class="search-facet-chip"
+                        data-value={facet.value}
+                        aria-pressed={facet.active}
+                        onclick={handleFacetClick}
+                    >
+                        {facet.label}
+                        <span class="search-facet-count">{facet.count}</span>
+                    </button>
+                </template>
+            </div>
+        </template>
+
+        <template lwc:if={isLoading}>
+            <div class="search-state search-state-loading">
+                <arch-spinner size="medium"></arch-spinner>
+            </div>
+        </template>
+
+        <template lwc:if={isIdle}>
+            <div class="search-state search-state-idle">
+                <p>Enter a search to get started.</p>
+            </div>
+        </template>
+
+        <template lwc:if={isError}>
+            <div class="search-state search-state-error" role="alert">
+                <p>{errorMessage}</p>
+            </div>
+        </template>
+
+        <template lwc:if={isEmpty}>
+            <div class="search-state search-state-empty">
+                <center>
+                    <img
+                        src="https://developer.salesforce.com/ns-assets/ruth_search.png"
+                        alt="Search tips illustration"
+                    />
+                    <h4 style="padding-top: 8px">Here are some search tips</h4>
+                    <span style="display: block">
+                        Check the spelling of your keywords.
+                    </span>
+                    <span style="display: block">
+                        Try using fewer, different, or more general words.
+                    </span>
+                </center>
+            </div>
+        </template>
+
+        <template lwc:if={hasResults}>
+            <p class="search-summary">{summaryText}</p>
+            <ul class="search-result-list">
+                <template for:each={results} for:item="result">
+                    <li class="search-result-item" key={result.key}>
+                        <arch-summary
+                            compact
+                            display-mode="brick-tile"
+                            path={result.url}
+                            title={result.decodedTitle}
+                        >
+                            <div slot="pretitle">
+                                <template lwc:if={result.hasContentType}>
+                                    <span class="search-result-type">
+                                        {result.contentType}
+                                    </span>
+                                </template>
+                            </div>
+                            <span slot="meta-right">
+                                <template lwc:if={result.hasDate}>
+                                    <time>{result.displayDate}</time>
+                                </template>
+                            </span>
+                            <span slot="meta-left">
+                                <template lwc:if={result.hasDescription}>
+                                    {result.decodedDescription}
+                                </template>
+                            </span>
+                        </arch-summary>
+                        <!-- prettier-ignore -->
+                        <hr>
+                    </li>
+                </template>
+            </ul>
+
+            <template lwc:if={showPagination}>
+                <nav
+                    class="search-pagination"
+                    aria-label="Search results pages"
+                >
+                    <button
+                        type="button"
+                        class="search-page-prev"
+                        aria-label="Previous page"
+                        disabled={isFirstPage}
+                        onclick={handlePrevPage}
+                    >
+                        Previous
+                    </button>
+                    <template for:each={pageButtons} for:item="pageButton">
+                        <button
+                            key={pageButton.page}
+                            type="button"
+                            class="search-page-number"
+                            data-page={pageButton.page}
+                            aria-label={pageButton.label}
+                            aria-current={pageButton.ariaCurrent}
+                            disabled={pageButton.isCurrent}
+                            onclick={handlePageClick}
+                        >
+                            {pageButton.label}
+                        </button>
+                    </template>
+                    <button
+                        type="button"
+                        class="search-page-next"
+                        aria-label="Next page"
+                        disabled={isLastPage}
+                        onclick={handleNextPage}
+                    >
+                        Next
+                    </button>
+                </nav>
+            </template>
+        </template>
+    </arch-section-a>
+</template>