@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/sa/gallery/gallery.ts

@@ -0,0 +1,300 @@
+import { LightningElement, api, track } from 'lwc';
+import { Card } from 'tm/card';
+import { FilterOption } from './types';
+import { sendInteractionEvent, InteractionEventTypes } from 'shared/helpers';
+import { debounce } from 'shared/debounce';
+
+// function to get the cards array from the json payload
+async function getGridCards(data: string, imageHash: string) {
+    const parsedData = JSON.parse(data);
+    // Sort the data based on the `sort` value
+    parsedData.sort((a: any, b: any) => a.sort - b.sort);
+    // load the gallery cards
+    return await parsedData.map((item: any) => {
+        const card: any = {
+            assistiveText: "Click here to go to this resource",
+            //ctaTitle: "Read More",
+            ctaTarget: null,
+            pretitleHref: null,
+            pretitleHrefText: null
+        }
+
+        // Dynamically set all other properties based on the data object
+        for (const prop in item) {
+            if (item.hasOwnProperty(prop)) {
+                switch (prop) {
+                    case "url":
+                        card.ctaHref = item[prop];
+                        break;
+                    default:
+                        (card as any)[prop] = item[prop];
+                }
+            }
+
+            // Set imgSrc to thumbnail if it exists, otherwise use image
+            if (item.thumbnail) {
+                card.imgSrc = `/1/asset/immutable/s/${imageHash}${item.thumbnail}`;
+            } else if (item.image) {
+                card.imgSrc = item.image;
+            }
+        }
+
+        return card;
+    });
+}
+export default class gallery extends LightningElement {
+
+    // get the inputs from the config
+    _content: string | null = null;
+    _filterData: any;
+    _filterProperty: any;
+    _filterLabel: any;
+    _searchTitle: any;
+    _imageHash: string | null = null;
+    @api containerId: string = '';
+
+    // second filter drop down is optional and pulled from the json data set
+    _showMetaFilter = false;
+    _metaFilterProperty: any;
+    _metaFilterLabel: any;
+
+    // get the inputs from the form
+    _selectFilter: string = '';
+    _keywordFilter: string = '';
+    _selectMetaFilter: string = '';
+
+    // set up the outputs
+    allCards: Card[] = [];
+    filteredCards: Card[] = [];
+    shareUrl = window.location.href;
+
+    // prep the filters options
+    filterOptions: FilterOption[] = [];
+    metaFilterOptions: FilterOption[] = [];
+
+    // populate the filter drop down
+    connectedCallback() {
+        // Check if we're on the data model gallery page
+        if (this.containerId === 'data-model-gallery' && window.location.hash === '#data-model-gallery') {
+            window.location.href = 'https://developer.salesforce.com/docs/platform/data-models/guide/get-started.html';
+        }
+    }
+    get socialTitle(){
+        //Search title is plurar, removing last letter to make the title singular (should be a letter S)
+        return `${this._searchTitle.substring(0, this._searchTitle.length - 1)} Gallery`;
+    }
+
+    // fetch the filter data from a url 
+    async fetchFilterData() {
+        try {
+            const response = await fetch(this._filterData);
+            const data = await response.json();
+            this.filterOptions = data as FilterOption[];
+        } catch (error: any) {
+            console.error("An error occurred getting the filter list:", error?.message || String(error));
+        }
+    }
+
+    // handle the filter selection change
+    filterChange(evt: { detail: string }) {
+        this._selectFilter = evt.detail;
+        this.applyFilters();
+    }
+
+    private sendInteractionEvent = debounce((event,target)=>{            
+        sendInteractionEvent("Gallery Search",InteractionEventTypes.INPUT_CHANGE,event,target);
+    },1000);
+
+    // handle typing in the search box
+    keywordFilterChange(evt: InputEvent) {
+        const target = (evt.currentTarget as HTMLInputElement);
+        this.sendInteractionEvent(evt,target);
+        this._keywordFilter = (evt.currentTarget as HTMLInputElement).value;
+        this.applyFilters();
+    }
+
+    // handle the filter selection change
+    metaFilterChange(evt: { detail: string }) {
+        this._selectMetaFilter = evt.detail;
+        this.applyFilters();
+    }
+
+    // update the gallery based on filtering
+    async applyFilters() {
+        this.filteredCards = this.allCards.filter((card: any) => {
+            let isFilterMatch = (this._selectFilter === '' || (card as any)[this._filterProperty]?.toLowerCase().includes(this._selectFilter.toLocaleLowerCase()));
+            let isMetaMatch = ((this._showMetaFilter) ? ((this._selectMetaFilter === '' || (card as any)[this._metaFilterProperty]?.toLowerCase().includes(this._selectMetaFilter.toLocaleLowerCase()))) : true);
+            let isKeywordMatch = (this._keywordFilter === ''
+                || (card.pretitle && card.pretitle.toLowerCase().includes(this._keywordFilter.toLowerCase()))
+                || (card.title && card.title.toLowerCase().includes(this._keywordFilter.toLowerCase()))
+                || (card.description && card.description.toLowerCase().includes(this._keywordFilter.toLowerCase()))
+            );
+
+            if (isFilterMatch && isMetaMatch && isKeywordMatch)
+                return card;
+        });
+
+        // Update page state so that we track filters in URL params
+        const params = new URLSearchParams();
+
+        if (this._selectFilter !== '')
+            params.set(this._filterLabel, this._selectFilter);
+        if (this._showMetaFilter && this._selectMetaFilter !== '')
+            params.set(this._metaFilterLabel, this._selectMetaFilter);
+        if (this._keywordFilter !== '')
+            params.set('keywords', this._keywordFilter);
+
+        const paramsString = params.toString();
+        let updatedUrl = window.location.pathname;
+
+        // Update the hash to the containerId if it's been filtered or from the URL on load
+        const hash = this.containerId ? `#${this.containerId}` : window.location.hash.split('?')[0];
+
+        if (hash)
+            updatedUrl += hash;
+        if (paramsString)
+            updatedUrl += `?${paramsString}`;
+
+        history.replaceState(history.state, document.title, updatedUrl);
+        this.shareUrl = `${window.location.protocol}//${window.location.hostname}${updatedUrl}`;
+
+        // Scrolls to container element to keep new data in focus. 
+        if (hash) {
+            const targetElement = document.querySelector(`#${this.containerId}`);
+            // Scroll to the target element if it exists
+            if (targetElement) {
+                targetElement.scrollIntoView({ behavior: "smooth" });
+            }
+        }
+    }
+
+    checkURLParams() {
+        // Load filters from URL params
+        let requireFilterUpdate = false;
+        const url = new URL(window.location.href.replace('#', ''));
+        const params = url.searchParams;
+        for (const [key, value] of params.entries()) {
+            switch (key) {
+                case this._filterLabel:
+                    this._selectFilter = value;
+                    requireFilterUpdate = true;
+                    break;
+                case this._metaFilterLabel:
+                    this._selectMetaFilter = value;
+                    requireFilterUpdate = true;
+                    break;
+                case 'keywords':
+                    this._keywordFilter = value;
+                    requireFilterUpdate = true;
+                    break;
+                default:
+                    break;
+            }
+        };
+
+        return requireFilterUpdate;
+    }
+
+    handleResetFiltersClick() {
+        this._selectFilter = '';
+        (this._showMetaFilter) ? this._selectMetaFilter = '' : true;
+        this._keywordFilter = '';
+        this.applyFilters();
+    }
+
+    private updateCards() {
+        if (this._content && this._imageHash) {
+            try {
+                getGridCards(this._content, this._imageHash).then((res) => {
+                    this.allCards = this.filteredCards = res;
+                    if (this._showMetaFilter) {
+                        let typesArr = [...new Set(this.allCards.map((item: any) => (item as any).type))];
+                        typesArr.sort((a: string, b: string) => a.localeCompare(b));
+                        this.metaFilterOptions = typesArr.map((type: string) => ({ label: type, value: type })) as FilterOption[];
+                    }
+                    if (this.checkURLParams())
+                        this.applyFilters();
+                });
+            } catch (error: any) {
+                console.error("An error occurred getting the cards:", error?.message || String(error));
+            }
+        } 
+    }
+
+    // bind the config to the variables  
+    @api
+    set searchtitle(value) {
+        if (this._searchTitle !== value) {
+            this._searchTitle = value;
+        }
+    }
+    get searchtitle() {
+        return this._searchTitle;
+    }
+
+    @api 
+    set imageHash(value) {
+        this._imageHash = value;
+        this.updateCards();
+    }
+    get imageHash() {
+        return this._imageHash;
+    }
+
+    @api
+    set content(value) {
+        this._content = value;
+        this.updateCards();
+    }
+    get content() {
+        return this._content;
+    }
+
+    @api
+    set filter(value) {
+        if (this._filterData !== value) {
+            this._filterData = value;
+            if (!this._filterData.endsWith('.json')) {
+                this.filterOptions = JSON.parse(this._filterData) as FilterOption[];
+            } else {
+                this.fetchFilterData();
+            }
+        }
+    }
+    get filter() {
+        return this._filterData;
+    }
+
+    @api
+    set property(value) {
+        if (this._filterProperty !== value) {
+            this._filterProperty = value;
+        }
+    }
+    get property() {
+        return this._filterProperty;
+    }
+
+    @api
+    set label(value) {
+        if (this._filterLabel !== value) {
+            this._filterLabel = value;
+        }
+    }
+    get label() {
+        return this._filterLabel;
+    }
+
+    // below is for getting and setting the optional second filter
+    @api
+    set metafilters(value) {
+        if (this._metaFilterProperty !== value) {
+            this._showMetaFilter = true;
+            this._metaFilterProperty = value;
+            this._metaFilterLabel = value.charAt(0).toUpperCase() + value.slice(1);
+        }
+    }
+    get metafilters() {
+        return this._metaFilterProperty;
+    }
+}

package/src/modules/sa/gallery/types.d.ts

@@ -0,0 +1,35 @@
+export type GalleryCard = {
+    id?: string;
+    pretitle: string | null;
+    title: string;
+    description: string;
+    image: string | null;
+    status?: string | null;
+    sort: number | null;
+    updated?: Date | null;
+    productAreas: string[];
+    url: string | null;
+};
+
+export type CardAttribute = string | null;
+export type Card = {
+    assistiveText: CardAttribute;
+    ctaHref: CardAttribute;
+    ctaTarget: CardAttribute;
+    ctaTitle: CardAttribute;
+    description: CardAttribute;
+    imgSrc: CardAttribute;
+    pretitle: CardAttribute;
+    pretitleHref: CardAttribute;
+    pretitleHrefText: CardAttribute;
+    title: CardAttribute;
+};
+
+export type GalleryCards = {
+    items: Card[];
+}
+
+export type FilterOption = {
+    label: string;
+    value: string;
+};

package/src/modules/sa/socialShare/socialShare.css

@@ -0,0 +1,49 @@
+@import 'tds/reset';
+
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.actions {
+    align-items: center;
+    display: grid;
+    grid-auto-flow: column;
+    grid-column-gap: var(--tds-spacing-2);
+}
+
+@media screen and (max-width: 800px) {
+    .actions {
+        width: 120px;
+    }
+}
+
+.actions a {
+    margin-right: 1rem;
+}
+.actions a:last-of-type {
+    margin-right: 0;
+}
+
+.actions svg {
+    height: 1rem;
+}
+
+.actions svg.fill {
+    fill: var(--tds-color-meteorite);
+}
+
+.actions svg.fill:hover {
+    fill: var(--tds-color-brand);
+}
+
+.actions svg.stroke {
+    stroke: var(--tds-color-meteorite);
+    fill: var(--tds-color-meteorite);
+}
+
+.actions svg.stroke:hover {
+    stroke: var(--tds-color-brand);
+    fill: var(--tds-color-brand);
+}

package/src/modules/sa/socialShare/socialShare.html

@@ -0,0 +1,56 @@
+<template>
+    <div class="actions">
+        <a
+            onclick={handleClick}
+            href={shareTwitter}
+            target="_blank"
+            rel="noopener"
+            id="Share-on-Twitter"
+            name="Share on Twitter"
+            aria-label="Share on Twitter (opens new tab)"
+            class="fill"
+            ><svg
+                viewBox="0 0 18 14"
+                class="fill"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M17.308 2.325a7.333 7.333 0 01-2.041.52 3.396 3.396 0 001.565-1.836 7.374 7.374 0 01-2.258.808c-.33-.33-.73-.595-1.176-.775a3.767 3.767 0 00-1.412-.274 3.75 3.75 0 00-2.518.995A3.218 3.218 0 008.43 4.108c.002.254.033.507.094.755A10.658 10.658 0 014.46 3.847a9.912 9.912 0 01-3.256-2.471 3.128 3.128 0 00-.39 2.419c.205.823.738 1.544 1.494 2.017A3.678 3.678 0 01.72 5.39a.124.124 0 000 .053c.005.767.294 1.509.82 2.101.525.592 1.254 1 2.065 1.153-.326.071-.66.1-.995.087a4.39 4.39 0 01-.671 0 3.36 3.36 0 001.265 1.638c.594.412 1.31.645 2.052.666a7.475 7.475 0 01-4.413 1.423 8.92 8.92 0 01-.844-.08 10.571 10.571 0 005.445 1.49c6.526 0 10.096-5.057 10.096-9.446v-.434a6.933 6.933 0 001.767-1.717z"
+                ></path></svg>
+        </a>
+        <a
+            onclick={handleClick}
+            href={shareLinkedIn}
+            target="_blank"
+            rel="noopener"
+            id="Share-on-LinkedIn"
+            name="Share on LinkedIn"
+            aria-label="Share on LinkedIn (opens new tab)"
+            ><svg
+                viewBox="0 0 16 17"
+                class="fill"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M15.923 10.187v6.428H12.51v-5.998c0-1.506-.493-2.535-1.729-2.535-.943 0-1.504.693-1.75 1.364-.09.24-.114.573-.114.908v6.261H5.503s.046-10.158 0-11.21h3.414v1.588l-.023.037h.023v-.037c.453-.762 1.263-1.852 3.076-1.852 2.246 0 3.93 1.602 3.93 5.046zM1.932 0C.764 0 0 .837 0 1.937c0 1.076.742 1.938 1.887 1.938h.022c1.19 0 1.931-.862 1.931-1.938C3.818.837 3.1 0 1.932 0zM.202 16.615h3.413V5.405H.203v11.21z"
+                ></path></svg>
+        </a>
+        <a
+            onclick={handleClick}
+            href={shareFacebook}
+            target="_blank"
+            rel="noopener"
+            id="Share-on-Facebook"
+            name="Share on Facebook"
+            aria-label="Share on Facebook (opens new tab)"
+            ><svg
+                viewBox="0 0 9 18"
+                class="stroke"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M6.115 0c-2.173 0-3.66 1.5-3.66 4.23v2.363H0v3.195h2.455V18h2.926V9.788h2.45l.37-3.195H5.38V4.545c0-.922.236-1.545 1.42-1.545h1.507V.128A18.2 18.2 0 006.115 0z"
+                ></path></svg>
+        </a>
+    </div>
+</template>

package/src/modules/sa/socialShare/socialShare.ts

@@ -0,0 +1,29 @@
+import { LightningElement, api } from 'lwc';
+import { sendInteractionEvent, InteractionEventTypes } from 'shared/helpers';
+
+export default class extends LightningElement {
+    @api title: string = '';
+    @api url: string = window.location.href;
+
+    private get shareTwitter() {
+        return `https://twitter.com/intent/tweet/?text=${encodeURIComponent(
+            this.title || ''
+        )}&url=${encodeURIComponent(this.url)}&via=SalesforceArchs`;
+    }
+
+    private get shareLinkedIn() {
+        return `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURI(
+            this.url
+        )}`;
+    }
+
+    private get shareFacebook() {
+        return `https://www.facebook.com/sharer/sharer.php?u=${encodeURI(
+            this.url
+        )}`;
+    }
+    handleClick(e: any){
+        sendInteractionEvent('Social Share Click', InteractionEventTypes.CLICK, e, e.currentTarget);
+
+    }
+}

package/src/modules/shared/a11y/a11y.ts

@@ -0,0 +1,25 @@
+import { isDisabled, isHidden } from '@a11y/focus-trap';
+
+export function getFocusableElements(node: Element): HTMLElement[] {
+    const focusableTags = new Set(
+        ['a', 'button', 'input', 'select', 'textarea'].map((t) =>
+            t.toUpperCase()
+        )
+    );
+    if (
+        focusableTags.has(node.tagName) &&
+        !isDisabled(node as HTMLElement) &&
+        !isHidden(node as HTMLElement)
+    )
+        return [node] as HTMLElement[];
+    if (node.shadowRoot)
+        return Array.from(node.shadowRoot.children).flatMap(
+            getFocusableElements
+        );
+    if (node instanceof HTMLSlotElement) {
+        let assignedElements = node.assignedElements();
+        if (assignedElements.length)
+            return assignedElements.flatMap(getFocusableElements);
+    }
+    return Array.from(node.children).flatMap(getFocusableElements);
+}

package/src/modules/shared/children/children.ts

@@ -0,0 +1,29 @@
+import { track, LightningElement } from 'lwc';
+
+export abstract class ChildrenElement<T> extends LightningElement {
+    private observer!: MutationObserver;
+
+    @track items: T[] = [];
+    abstract extractor: (element: Element) => T;
+
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            this.setItems();
+        });
+        this.observer.observe(this.template.host, {
+            childList: true,
+            subtree: true
+        });
+        this.setItems();
+    }
+
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+
+    setItems() {
+        this.items = Array.from(this.template.host.children).map(
+            this.extractor
+        );
+    }
+}

package/src/modules/shared/color/color.ts

@@ -0,0 +1,52 @@
+export function hexToRGB(h: string) {
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (h.length == 4) {
+        r = +('0x' + h[1] + h[1]);
+        g = +('0x' + h[2] + h[2]);
+        b = +('0x' + h[3] + h[3]);
+    } else if (h.length == 7) {
+        r = +('0x' + h[1] + h[2]);
+        g = +('0x' + h[3] + h[4]);
+        b = +('0x' + h[5] + h[6]);
+    }
+    return [r, g, b];
+}
+
+export function RGBToHSL(r: number, g: number, b: number) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    let cmin = Math.min(r, g, b);
+    let cmax = Math.max(r, g, b);
+    let delta = cmax - cmin;
+    let h = 0;
+    let s = 0;
+    let l = 0;
+    if (delta === 0) h = 0;
+    else if (cmax === r) h = ((g - b) / delta) % 6;
+    else if (cmax === g) h = (b - r) / delta + 2;
+    else h = (r - g) / delta + 4;
+    h = Math.round(h * 60);
+    if (h < 0) h += 360;
+    l = (cmax + cmin) / 2;
+    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+    s = +s.toFixed(1);
+    l = +l.toFixed(1);
+    return [h, s, l];
+}
+
+export function rgb(r: number, g: number, b: number) {
+    return `rgb(${r},${g},${b})`;
+}
+
+export function hsl(h: number, s: number, l: number) {
+    return `hsl(${h},${s * 100}%,${l * 100}%)`;
+}
+
+export function lightenHex(hex: string, by: number) {
+    let [r, g, b] = hexToRGB(hex);
+    let [h, s, l] = RGBToHSL(r, g, b);
+    return hsl(h, s, l + by);
+}

package/src/modules/shared/debounce/debounce.ts

@@ -0,0 +1,32 @@
+type Procedure = (...args: any[]) => void;
+
+type Options = {
+    isImmediate: boolean;
+};
+
+export function debounce<F extends Procedure>(
+    func: F,
+    waitMilliseconds = 50,
+    options: Options = {
+        isImmediate: false
+    }
+): F {
+    let timeoutId: ReturnType<typeof setTimeout> | undefined;
+    return function (this: any, ...args: any[]) {
+        const context = this;
+        const doLater = function () {
+            timeoutId = undefined;
+            if (!options.isImmediate) {
+                func.apply(context, args);
+            }
+        };
+        const shouldCallNow = options.isImmediate && timeoutId === undefined;
+        if (timeoutId !== undefined) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(doLater, waitMilliseconds);
+        if (shouldCallNow) {
+            func.apply(context, args);
+        }
+    } as any;
+}