@salesforcedevs/arch-components 1.20.17-alpha9 → 1.25.0

package/src/modules/arch/explorer/types.d.ts

@@ -0,0 +1,60 @@
+export type Tool = {
+    Name: string;
+    Description: string;
+    URL: string;
+}
+
+export type Resource = {
+    Name: string;
+    Description: string;
+    URL: string;
+}
+
+export type Dimension = {
+    Behavior: string;
+    Name: string;
+    Weight: number;
+    isDisabled: boolean;
+}
+
+export type Behavior = {
+    Capability: string;
+    Name: string;
+    Weight: number;
+    Dimensions: Dimension[];
+}
+
+export type Location = {
+    Name: string;
+    isDisabled: boolean;
+}
+
+export type Pattern = {
+    Name?: string;
+    Description: string; 
+    Example?: string;
+    Weight?: number | null;
+    LastUpdated?: string;
+    Location: string;
+    Capability: string;
+    Behavior: string;
+    Consideration: string;
+    ConsiderationURL: string;
+    Dimension: string;
+    DimensionURL: string;
+    Mirror?: Pattern;
+    Tools?: Tool[];
+    Resources?: Resource[];
+    ProductArea: string;
+}
+
+export type Filter = {
+    Type: string;
+    Name: string;
+}
+
+export type VersionInfo = {
+    Number: string;
+    Name: string;
+    URL: string;
+}

package/src/modules/arch/fetch/fetch.ts

@@ -0,0 +1,55 @@
+export function csrfHeader(token: string = '') {
+    return {
+        'X-CSRF-Token': token
+    };
+}
+
+export function fetch(url: string, { ...options }: { [key: string]: any } = {}) {
+    return window.fetch(url, {
+        ...options,
+        credentials: 'same-origin'
+    });
+}
+
+export function fetchJSON<T>(
+    url: string,
+    { headers, ...options }: { [key: string]: any } = {}
+) {
+    return fetch(url, {
+        ...options,
+        headers: {
+            ...headers,
+            Accept: 'application/json; charset=utf-8'
+        }
+    }).then(async (response) => {
+        if (response.ok) {
+            return response.json() as Promise<T>;
+        }
+        if (/json/.test(String(response.headers.get('Content-Type')))) {
+            return response
+                .json()
+                .then((errorJSON) => Promise.reject(errorJSON));
+        }
+        throw new Error(
+            `Application error code ${response.status} for "${url}"`
+        );
+    });
+}
+
+export { fetchJSON as getJSON };
+
+export function postJSON<T>(
+    url: string,
+    body?: object,
+    { headers, method = 'POST', ...options }: { [key: string]: any } = {}
+) {
+    return fetchJSON<T>(url, {
+        ...options,
+        method,
+        headers: {
+            ...headers,
+            'Content-Type': 'application/json; charset=utf-8'
+        },
+        body: typeof body === 'string' ? body : JSON.stringify(body)
+    });
+}

package/src/modules/arch/footerMfe/footerMfe.html

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

package/src/modules/arch/footerMfe/footerMfe.ts

@@ -0,0 +1,19 @@
+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/arch/gallery/gallery.css

@@ -0,0 +1,365 @@
+@import "arch/reset";
+
+:host {
+    font-size: var(--arch-font-size-md);
+}
+
+.filter-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.filter-title {
+    display: inline-block;
+    margin-right: var(--arch-spacing-8);
+}
+
+.filter-header h2 {
+    font-size: var(--arch-font-size-lg);
+}
+
+.filter-form {
+    margin-bottom: var(--arch-spacing-8);
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+
+.filter-form > * {
+    margin-right: var(--arch-spacing-4);
+    margin-left: var(--arch-spacing-4);
+}
+
+.filter-form arch-select {
+    flex: 1;
+}
+
+.arch-select {
+    width: 60%;
+    box-sizing: border-box;
+}
+
+.search-input {
+    width: 40%;
+    box-sizing: border-box;
+}
+
+.search-input-wrapper {
+    align-items: stretch;
+    display: flex;
+    position: relative;
+}
+
+.search-input-label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+    display: block;
+    padding-right: var(--arch-spacing-2);
+    padding-top: var(--arch-spacing-2);
+    color: var(--arch-color-meteorite);
+    font-size: var(--arch-font-size-xs);
+    margin-bottom: var(--arch-spacing-2);
+}
+
+.search-input-input {
+    border-radius: var(--arch-radius-md);
+    border: 1px solid var(--arch-color-fog);
+    color: var(--arch-color-black);
+    flex: 1;
+    font-family: inherit;
+    font-size: var(--arch-font-size-md);
+    line-height: 1.875;
+    overflow: hidden;
+    padding: 0.4rem 0;
+    padding-left: var(--arch-spacing-8);
+    position: relative;
+    text-overflow: ellipsis;
+    transition: border 0.1s linear, background-color 0.1s linear;
+    white-space: nowrap;
+}
+
+.search-input-icon {
+    color: var(--arch-color-granite);
+    left: 10px;
+    position: absolute;
+    top: 13px;
+    z-index: 1;
+}
+
+.table-summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--arch-spacing-4);
+}
+
+.table-summary > div {
+    margin-bottom: var(--arch-spacing-4);
+}
+
+.table-summary .page-size-controls,
+.table-summary .collapse-buttons {
+    flex-basis: 25%;
+}
+
+.table-summary .page-size-controls {
+    display: flex;
+    align-items: center;
+}
+
+.table-summary .page-size-controls div {
+    margin-right: 0.5rem;
+    color: var(--arch-color-meteorite);
+}
+
+.table-summary .collapse-buttons {
+    text-align: right;
+}
+
+.table-summary .collapse-buttons button:first-child {
+    margin-right: 0.5rem;
+}
+
+.table-summary .collapse-buttons button:last-child {
+    margin-left: 0.5rem;
+}
+
+.table-summary .filter-stats {
+    text-align: center;
+    color: var(--arch-color-meteorite);
+}
+
+table {
+    width: 100%;
+    margin: 0 auto;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-right: 1px solid #dddbda;
+    border-left: 1px solid #dddbda;
+    border-bottom: 1px solid #111;
+    vertical-align: middle;
+    margin-bottom: var(--arch-spacing-8);
+}
+
+thead {
+    display: table-header-group;
+    border-color: inherit;
+}
+
+th {
+    background-color: #ebf5ff;
+    border-top: 1px solid #dddbda;
+    border-bottom: 1px solid #111;
+    padding: 1rem;
+    vertical-align: middle;
+}
+
+tr {
+    display: table-row;
+    vertical-align: middle;
+}
+
+tr:nth-child(even) td {
+    background: #fafaf9;
+}
+
+tr td:first-child {
+    border-left: 3px solid transparent;
+}
+
+tr td:last-child {
+    border-right: 3px solid transparent;
+}
+
+tr:hover td {
+    box-shadow: #dddbda 0 -1px 0 inset, #dddbda 0 1px 0 inset;
+    background: #fafaf9;
+}
+
+tr:hover td:first-child {
+    border-left: 3px solid var(--arch-color-brand);
+}
+
+tr:hover td:last-child {
+    border-right: 3px solid var(--arch-color-brand);
+}
+
+td {
+    padding: 0.75rem 1rem;
+    border-top: 1px solid #dddbda;
+    border-bottom: 1px solid #dddbda;
+}
+
+.status {
+    text-align: center;
+}
+
+.feature a {
+    color: var(--arch-color-brand);
+    text-decoration: none;
+}
+
+.feature a:hover {
+    text-decoration: underline;
+}
+
+.feature p {
+    margin-bottom: var(--arch-spacing-2);
+}
+
+.feature .inline {
+    display: flex;
+}
+
+.feature .inline h4 {
+    padding-right: var(--arch-spacing-4);
+}
+
+td.empty-table {
+    height: 20rem;
+    text-align: center;
+    pointer-events: none;
+}
+
+td.empty-table arch-spinner {
+    display: inline-block;
+}
+
+button.link {
+    background: none;
+    border-width: 0;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.pagination-controls {
+    display: flex;
+    justify-content: center;
+    margin-bottom: var(--arch-spacing-8);
+}
+
+.pagination-controls arch-button {
+    padding: 0 1rem;
+}
+
+.safe-harbor {
+    border-radius: 10px;
+    border: 1px solid gray;
+    padding: 20px;
+    margin-bottom: 20px;
+}
+
+.safe-harbor img {
+    margin-right: 10px;
+    float: left;
+}
+
+@media screen and (max-width: 48rem) {
+    .filter-header {
+        flex-direction: column-reverse;
+    }
+
+    .filter-header div {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .filter-header arch-social-share {
+        margin-bottom: var(--arch-spacing-6);
+    }
+
+    .table-summary {
+        flex-direction: column;
+    }
+
+    .table-wrapper {
+        overflow-x: scroll;
+    }
+
+    .docs-grid-container {
+        position: relative;
+    }
+
+    .docs-action-bar {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        padding: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-lg);
+    }
+
+    .docs-action-bar > .records-container {
+        margin-right: auto;
+    }
+
+    .docs-action-bar .filters-container {
+        display: flex;
+    }
+
+    .docs-action-bar .filters-container > *:not(:first-child),
+    .docs-search-input {
+        margin-left: var(--dx-g-spacing-sm);
+    }
+
+    .docs-search-input {
+        --dx-c-input-width: 285px;
+    }
+
+    .docs-card {
+        --dx-c-body-max-lines: 4;
+        --dx-c-heading-max-lines: 2;
+    }
+
+    .pagination-container {
+        max-width: fit-content;
+        margin: var(--dx-g-spacing-lg) auto;
+    }
+
+    @media screen and (max-width: 1024px) {
+        .docs-card {
+            --dx-c-body-max-lines: 3;
+        }
+    }
+
+    @media screen and (max-width: 768px) {
+        .docs-action-bar {
+            flex-direction: column-reverse;
+            width: 100%;
+            padding: 0;
+        }
+
+        .docs-search-input {
+            --dx-c-input-width: 100%;
+
+            width: 100%;
+            margin-bottom: var(--dx-g-spacing-md);
+        }
+
+        .docs-action-bar .records-container {
+            transform: translateY(-100%);
+        }
+    }
+
+    @media screen and (max-width: 600px) {
+        .pagination-container {
+            width: 100%;
+            overflow: hidden;
+        }
+
+        .pagination-container > * {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    }
+
+    @media screen and (max-width: 460px) {
+        .docs-action-bar .records-container {
+            transform: initial;
+            padding: var(--dx-g-spacing-md) 0;
+        }
+    }
+}

package/src/modules/arch/gallery/gallery.html

@@ -0,0 +1,71 @@
+<template>
+    <div class="filter-header">
+        <div>
+            <h2 class="filter-title">Search for {_searchTitle}</h2>
+            <arch-button class="clear-filter" onclick={handleResetFiltersClick}>
+                Clear filters
+            </arch-button>
+        </div>
+        <arch-social-share
+            title={socialTitle}
+            url={shareUrl}
+        ></arch-social-share>
+    </div>
+    <div class="filter-form">
+        <arch-select
+            label={_filterLabel}
+            value={_selectFilter}
+            onchange={filterChange}
+        >
+            <option value="">- All {_filterLabel}s -</option>
+            <template for:each={filterOptions} for:item="item">
+                <option key={item.label} value={item.value}>
+                    {item.label}
+                </option>
+            </template>
+        </arch-select>
+
+        <template if:true={_showMetaFilter}>
+            <arch-select
+                label={_metaFilterLabel}
+                value={_selectMetaFilter}
+                onchange={metaFilterChange}
+            >
+                <option value="">- All {_metaFilterLabel}s -</option>
+                <template for:each={metaFilterOptions} for:item="item">
+                    <option key={item.label} value={item.value}>
+                        {item.label}
+                    </option>
+                </template>
+            </arch-select>
+        </template>
+
+        <div class="search-input">
+            <label class="search-input-label" for="search">Search</label>
+            <div class="search-input-wrapper">
+                <arch-icon
+                    class="search-input-icon"
+                    size="small"
+                    symbol="search"
+                ></arch-icon>
+                <input
+                    id="search"
+                    class="search-input-input"
+                    placeholder="Search..."
+                    icon-symbol="search"
+                    aria-label="Search..."
+                    value={_keywordFilter}
+                    oninput={keywordFilterChange}
+                    disabled={isLoading}
+                />
+            </div>
+        </div>
+    </div>
+    <div role="region" aria-label="Gallery results" aria-live="polite">
+        <arch-card-grid-a
+            img-aspect="60%"
+            img-type="full"
+            items={filteredCards}
+        ></arch-card-grid-a>
+    </div>
+</template>