@salesforcedevs/arch-components 1.20.17-alpha9 → 1.25.1-alpha

package/src/modules/arch/pageHeaderA/pageHeaderA.css

@@ -0,0 +1,82 @@
+@import 'arch/reset';
+
+.root {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    padding: var(--arch-spacing-12) 0;
+    padding-left: 1rem;
+}
+
+@media screen and (max-width: 800px) {
+    .root {
+        padding-top: 1.25rem;
+        display: block;
+    }
+}
+
+.pretitle {
+    color: var(--arch-colors-meteorite);
+}
+
+h1 {
+    font-size: var(--arch-font-size-4xl);
+    margin: 0;
+    padding: 0;
+}
+
+.actions {
+    align-items: center;
+    display: grid;
+    grid-auto-flow: column;
+    grid-column-gap: var(--arch-spacing-2);
+}
+
+@media screen and (max-width: 800px) {
+    .root,
+    .actions {
+        padding-top: 1.25rem;
+    }
+
+    .actions {
+        width: 120px;
+    }
+}
+
+.actions a,
+.actions a:visited {
+    padding-right: 1rem;
+    color: var(--arch-color-black);
+    text-decoration: none;
+}
+
+.actions a:hover {
+    color: var(--arch-color-brand);
+}
+
+.actions img {
+    width: 18px;
+    margin-right: 1rem;
+}
+
+.actions svg {
+    height: 1rem;
+}
+
+.actions svg.fill {
+    fill: var(--arch-color-meteorite);
+}
+
+.actions svg.fill:hover {
+    fill: var(--arch-color-brand);
+}
+
+.actions svg.stroke {
+    stroke: var(--arch-color-meteorite);
+    fill: var(--arch-color-meteorite);
+}
+
+.actions svg.stroke:hover {
+    stroke: var(--arch-color-brand);
+    fill: var(--arch-color-brand);
+}

package/src/modules/arch/pageHeaderA/pageHeaderA.html

@@ -0,0 +1,24 @@
+<template>
+    <div class="root">
+        <div class="heading">
+            <span class="pretitle" if:true={pretitle}>{pretitle}</span>
+            <h1>{title}</h1>
+        </div>
+        <div class="actions">
+            <!--
+            <template if:false={isJpTranslationBlank}>
+                <a 
+                    href={jptranslation}
+                    class="jp-translation"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label="日本語版はここからダウンロード"
+                    >
+                <img src="https://a.sfdcstatic.com/developer-website/images/architect/icons/globe.png" />
+                日本語版はここからダウンロード</a>
+            </template>
+            -->
+            <arch-social-share title={title} url={location}></arch-social-share>
+        </div>
+    </div>
+</template>

package/src/modules/arch/pageHeaderA/pageHeaderA.stories.js

@@ -0,0 +1,25 @@
+import { html } from "lit-html";
+
+export default {
+    title: "arch/arch-page-header-a",
+    component: "sb-arch-page-header-a"
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-page-header-a {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+    <sb-arch-page-header-a
+        pretitle="Reference Architecture"
+        title="Content Lifecycle Management and Modeling"
+    >
+        <sb-arch-cta title="Download" variant="brand"></sb-arch-cta>
+        <sb-arch-cta title="Share"></sb-arch-cta>
+    </sb-arch-page-header-a>
+`;

package/src/modules/arch/pageHeaderA/pageHeaderA.ts

@@ -0,0 +1,51 @@
+import { api } from 'lwc';
+import { ChildrenElement } from 'arch/children';
+
+export type CTA = {
+    href: string;
+    target?: string;
+    title: string;
+    variant: string;
+};
+
+export default class extends ChildrenElement<CTA> {
+    @api pretitle: string | null = null;
+    @api title: string = '';
+    @api url: string = '';
+    @api jptranslation: string | null = null;
+
+    childTagName = 'arch-CTA';
+    
+    location: string=window.location.href;
+
+    extractor = (element: Element) => {
+        return {
+            href: element.getAttribute('href')!,
+            target: element.getAttribute('target') || undefined,
+            title: element.getAttribute('title')!,
+            variant: element.getAttribute('variant') || 'neutral'
+        };
+    };
+
+    private get shareTwitter() {
+        return decodeURI(
+            `https://twitter.com/intent/tweet/?text=${this.title}&url=${window.location.href}&via=SalesforceArchs`
+        );
+    }
+
+    private get shareLinkedIn() {
+        return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI(
+            window.location.href
+        )}`;
+    }
+
+    private get shareFacebook() {
+        return `https://www.facebook.com/sharer/sharer.php?u=${encodeURI(
+            window.location.href
+        )}`;
+    }
+
+    get isJpTranslationBlank() {
+        return !this.jptranslation || this.jptranslation.trim() === '';
+    }
+}

package/src/modules/arch/pill/pill.css

@@ -0,0 +1,70 @@
+@import "arch/reset";
+
+:host {
+    display: inline-flex;
+    max-width: 100%;
+}
+
+.pill {
+    display: flex;
+    align-items: center;
+    position: relative;
+    color: var(--arch-color-meteorite);
+    border: 1px solid var(--arch-color-granite);
+    border-radius: var(--arch-radius-md);
+    padding-left: var(--arch-spacing-3);
+    padding-right: var(--arch-spacing-8);
+    height: var(--arch-spacing-10);
+    max-width: 100%;
+    box-sizing: border-box;
+}
+
+.pill:not(.pill-bare):hover {
+    background-color: var(--arch-color-sand);
+}
+
+.pill-link {
+    cursor: pointer;
+    color: var(--arch-color-brand);
+}
+
+.pill-bare {
+    border-color: transparent;
+}
+
+.pill-label {
+    font-size: var(--arch-font-size-sm);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.pill-remove {
+    color: var(--arch-color-meteorite);
+    border: none;
+    background-color: transparent;
+    padding: 2px;
+    cursor: pointer;
+    position: absolute;
+    right: var(--arch-spacing-2);
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.pill-remove:hover,
+.pill-remove:focus {
+    color: var(--arch-color-black);
+}
+
+.assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+}

package/src/modules/arch/pill/pill.html

@@ -0,0 +1,17 @@
+<template>
+    <div class={className} role="option" aria-selected="true">
+        <div class="pill-label" title={titleWithFallback}>
+            <slot onslotchange={setTitle}></slot>
+        </div>
+
+        <button
+            class="pill-remove"
+            title={removeButtonTitle}
+            onclick={handleRemove}
+        >
+            <arch-icon symbol="close" size="x-small"></arch-icon>
+
+            <div class="assistive-text">{removeButtonTitle}</div>
+        </button>
+    </div>
+</template>

package/src/modules/arch/pill/pill.ts

@@ -0,0 +1,34 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api label: string = '';
+    @api removeButtonTitle: string = 'Remove';
+    @api variant: 'link' | 'bare' | null = null;
+
+    private titleWithFallback: string | null = null;
+
+    private get className() {
+        return ['pill', this.variant ? `pill--${this.variant}` : false]
+            .filter(Boolean)
+            .join(' ');
+    }
+
+    // Use slot node text as a title if the title attribute isn't provided
+    private setTitle() {
+        const slot = this.template.querySelector('slot') as HTMLSlotElement;
+
+        this.titleWithFallback =
+            this.title ||
+            (slot
+                ? slot
+                      .assignedNodes()
+                      .map((n) => n.textContent)
+                      .join('')
+                : '');
+    }
+
+    private handleRemove(e: MouseEvent) {
+        e.stopPropagation();
+        this.dispatchEvent(new CustomEvent('remove'));
+    }
+}

package/src/modules/arch/polling-request.ts

@@ -0,0 +1,97 @@
+const DEFAULT_INTERVAL = 3000;
+const DEFAULT_RETRIES = 10;
+
+export type PollingRequestInit<T> = {
+    request: () => Promise<T>;
+    done?: (res: T) => boolean;
+    interval?: number;
+    retries?: number;
+};
+
+/**
+ * Creates a Promise-like polling request
+ * @class PollingRequest
+ * @example
+ * const res = await new PollingRequest({ ... });
+ */
+export class PollingRequest<T> {
+    // Internals
+    private resolve: (value?: T) => void = () => {};
+    private reject: (reason?: any) => void = () => {};
+    private readonly promise: Promise<T>;
+    private timer: ReturnType<typeof setTimeout> | null = null;
+    private attempt: number = 0;
+
+    // Arguments
+    private request: () => Promise<T>;
+    private done: (res: T) => boolean;
+    private interval: number;
+    private retries: number;
+
+    constructor({ request, done, interval, retries }: PollingRequestInit<T>) {
+        this.promise = new Promise<T>((resolve, reject) => {
+            this.resolve = resolve;
+            this.reject = reject;
+        });
+
+        this.request = request;
+        this.done = done || (() => true);
+        this.interval = interval || DEFAULT_INTERVAL;
+        this.retries = retries || DEFAULT_RETRIES;
+
+        this.start();
+    }
+
+    async then(
+        onfulfilled?: (value: T) => T | PromiseLike<T>,
+        onrejected?: (reason: any) => PromiseLike<never>
+    ): Promise<T> {
+        return this.promise.then(onfulfilled, onrejected);
+    }
+
+    async catch(onRejected?: (reason: any) => PromiseLike<never>): Promise<T> {
+        return this.promise.catch(onRejected);
+    }
+
+    private start() {
+        this.poll();
+    }
+
+    private stop() {
+        if (this.timer) {
+            clearTimeout(this.timer);
+        }
+
+        this.retries = 0;
+        this.attempt = 0;
+        this.timer = null;
+    }
+
+    private async poll() {
+        const currentAttempt = (this.attempt = this.attempt + 1);
+
+        try {
+            const res = await this.request();
+
+            // If polling was stopped before the request could complete
+            if (currentAttempt !== this.attempt) {return;}
+
+            if (this.done(res)) {
+                this.stop();
+                this.resolve(res);
+            }
+
+            if (this.attempt < this.retries) {
+                this.timer = setTimeout(this.poll.bind(this), this.interval);
+            } else {
+                throw new Error('timeout');
+            }
+        } catch (err) {
+            // If polling was stopped before the request could complete
+            if (currentAttempt !== this.attempt) {return;}
+
+            this.stop();
+            this.reject(err);
+        }
+    }
+}

package/src/modules/arch/reflectedElement/reflectedElement.html

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

package/src/{common → modules/arch}/reflectedElement/reflectedElement.ts

@@ -4,18 +4,18 @@
  * to the innerHTML of the element (Shadow DOM) returned by
  * contentElement() (which must use the lwc:dom="manual" directive).
  */
-import { LightningElement } from 'lwc';
+import { LightningElement } from "lwc";
 
 export class ReflectedElement extends LightningElement {
     private observer!: MutationObserver;
     private didSetContent = false;
 
     get contentElement(): Element {
-        throw new Error('Not Implemented');
+        throw new Error("Not Implemented");
     }
 
     connectedCallback() {
-        this.observer = new MutationObserver((e) => {
+        this.observer = new MutationObserver(() => {
             this.setContent();
         });
         this.observer.observe(this.template.host, {
@@ -48,3 +48,5 @@ export class ReflectedElement extends LightningElement {
         this.innerHTMLSetCallback();
     }
 }
+
+export default ReflectedElement;

package/src/modules/arch/reset/reset.css

@@ -0,0 +1,39 @@
+:host {
+    display: block;
+    line-height: normal;
+}
+
+* {
+    box-sizing: border-box;
+    font-family: inherit;
+    margin: 0;
+    padding: 0;
+}
+
+ul {
+    list-style: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-size: inherit;
+}
+
+[tabindex]:not([tabindex='-1']),
+a,
+button,
+input,
+select,
+textarea {
+    outline: 2px solid transparent;
+    outline-offset: 5px;
+    transition: outline-offset var(--arch-duration-short) linear;
+}
+
+*:not(:disabled):focus {
+    outline-color: var(--arch-color-brand);
+    outline-offset: 2px;
+}

package/src/modules/arch/searchList/searchList.css

@@ -0,0 +1,120 @@
+@import "arch/reset";
+
+:host {
+    font-size: var(--arch-font-size-md);
+    position: relative;
+    width: 100%;
+    z-index: 10;
+}
+
+.search-input-wrapper {
+    align-items: stretch;
+    display: flex;
+    position: relative;
+}
+
+.search-input-label {
+    position: absolute !important;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    white-space: nowrap;
+}
+
+.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;
+}
+
+.search-results {
+    background-color: white;
+    border-radius: var(--arch-radius-lg);
+    box-shadow: var(--arch-shadow-lg);
+    left: 0;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    padding: var(--arch-spacing-6);
+    box-sizing: border-box;
+    margin-top: var(--arch-spacing-1);
+}
+
+.search-result:hover,
+.search-result[aria-selected="true"] {
+    background-color: var(--arch-color-sand);
+    cursor: pointer;
+    border-radius: var(--arch-radius-lg);
+}
+
+.search-result,
+.search-result-heading {
+    color: var(--arch-color-black);
+    font-size: var(--arch-font-size-sm);
+    line-height: var(--arch-line-height-snug);
+    padding-left: var(--arch-spacing-2);
+    padding-right: var(--arch-spacing-2);
+}
+
+.search-result-heading {
+    font-weight: bold;
+    margin: var(--arch-spacing-5) 0 var(--arch-spacing-1) 0;
+}
+
+.search-result-group:first-child .search-result-heading {
+    font-weight: bold;
+    margin: 0 0 var(--arch-spacing-1) 0;
+}
+
+.search-result {
+    align-items: center;
+    display: flex;
+    padding: var(--arch-spacing-2);
+}
+
+.search-result-icon {
+    color: #b0adab; /* TODO: token */
+    margin-right: var(--arch-spacing-2);
+}
+
+.search-result-image {
+    border-radius: var(--arch-radius-lg);
+    margin-right: var(--arch-spacing-2);
+    max-width: 40px;
+}
+
+.search-result-pretitle {
+    color: var(--arch-color-meteorite);
+    font-size: var(--arch-font-size-sm);
+    line-height: var(--arch-line-height-snug);
+}
+
+.search-result-title {
+    color: var(--arch-color-black);
+    font-size: var(--arch-font-size-md);
+    font-weight: bold;
+}
+
+[data-listbox="options"][aria-hidden="true"] {
+    display: none;
+}

package/src/modules/arch/searchList/searchList.html

@@ -0,0 +1,42 @@
+<template>
+    <arch-section-a background="white" title={titleSearchResults}>
+        <template if:true={results}>
+            <template for:each={results} for:item="result">
+                <div key={result.title}>
+                    <arch-summary
+                        description={result.description}
+                        compact
+                        display-mode="brick-tile"
+                        path={result.url}
+                        title={result.title}
+                    >
+                        <dx-icon-badge sprite="brand" symbol="knowledge_base" background-color="blue-vibrant-20" size="small"></dx-icon-badge>
+
+                        <div slot="pretitle"></div>
+                        <span slot="meta-right"></span>
+                        <span slot="meta-left">{result.description}</span>
+                    </arch-summary>
+                    <!-- prettier-ignore -->
+                    <hr>
+                </div>
+            </template>
+        </template>
+        <template if:true={showSearchSuggestions}>
+            <div style="display: block">
+                <center>
+                    <img
+                        src="https://a.sfdcstatic.com/developer-website/images/architect/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>
+    </arch-section-a>
+</template>

package/src/modules/arch/searchList/searchList.ts

@@ -0,0 +1,53 @@
+import { LightningElement, api, track } from "lwc";
+
+export default class SearchList extends LightningElement {
+    queryString?: string = "";
+    titleSearchResults: string = "";
+    showSearchSuggestions = false;
+
+    @api algoliaIndex: string = "";
+    @api algoliaAppId: string = "";
+    @api algoliaApiKey: string = "";
+
+    @track results: any;
+
+    connectedCallback() {
+        const params = new URLSearchParams(window.location.search);
+        if (params && params.get("keywords")) {
+            const keywords = params.get("keywords") || "";
+            fetch(
+                `https://${this.algoliaAppId}-dsn.algolia.net/1/indexes/${this.algoliaIndex}?query=${keywords}&hitsPerPage=20`,
+                {
+                    headers: {
+                        "X-Algolia-Application-Id": this.algoliaAppId,
+                        "X-Algolia-API-Key": this.algoliaApiKey
+                    }
+                }
+            )
+                .then((result) => {
+                    return result.json();
+                })
+                .then((json) => {
+                    if (json.hits && json.hits.length) {
+                        this.titleSearchResults = `Search results for "${decodeURIComponent(
+                            keywords
+                        )}"`;
+                        this.results = json.hits;
+                        this.showSearchSuggestions = false;
+                    } else {
+                        this.titleSearchResults = `No results for "${decodeURIComponent(
+                            keywords
+                        )}"`;
+                        this.showSearchSuggestions = true;
+                    }
+                })
+                .catch(() => {
+                    this.titleSearchResults = `An error occured`;
+                    this.showSearchSuggestions = false;
+                });
+        } else {
+            this.titleSearchResults = "No keywords provided";
+            this.showSearchSuggestions = false;
+        }
+    }
+}