@salesforcedevs/arch-components 1.20.17-alpha8 → 1.25.0

package/src/modules/arch/gallery/gallery.ts

@@ -0,0 +1,366 @@
+import { LightningElement, api } from "lwc";
+import { Card } from "arch/card";
+import { FilterOption } from "./types";
+import { sendInteractionEvent, InteractionEventTypes } from "arch/helpers";
+import { debounce } from "arch/debounce";
+
+// function to get the cards array from the json payload
+async function getGridCards(data, imageHash) {
+    const parsedData = JSON.parse(data);
+    // Sort the data based on the `sort` value
+    parsedData.sort((a, b) => a.sort - b.sort);
+    // load the gallery cards
+    return parsedData.map((item) => {
+        const card: Card = {
+            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 (Object.prototype.hasOwnProperty.call(item, prop)) {
+                switch (prop) {
+                    case "url":
+                        card.ctaHref = item[prop];
+                        break;
+                    default:
+                        card[prop] = item[prop];
+                }
+            }
+        }
+
+        // Set imgSrc to thumbnail if it exists, otherwise use image
+        if (item.thumbnail) {
+            // Use thumbnail as-is if it's a full URL (starts with http), otherwise prepend asset path
+            if (item.thumbnail.startsWith("http")) {
+                card.imgSrc = item.thumbnail;
+            } else {
+                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;
+    _filterProperty;
+    _filterLabel;
+    _searchTitle;
+    _imageHash: string | null = null;
+    @api containerId: string;
+
+    // second filter drop down is optional and pulled from the json data set
+    _showMetaFilter = false;
+    _metaFilterProperty;
+    _metaFilterLabel;
+
+    // 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) {
+            console.error(
+                "An error occurred getting the filter list:",
+                error.message
+            );
+        }
+    }
+
+    // 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) => {
+            const isFilterMatch =
+                this._selectFilter === "" ||
+                card[this._filterProperty]
+                    ?.toLowerCase()
+                    .includes(this._selectFilter.toLocaleLowerCase());
+            const isMetaMatch = this._showMetaFilter
+                ? this._selectMetaFilter === "" ||
+                  card[this._metaFilterProperty]
+                      ?.toLowerCase()
+                      .includes(this._selectMetaFilter.toLocaleLowerCase())
+                : true;
+            const 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 true;
+            }
+            return false;
+        });
+
+        // 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 urlHash = this.containerId
+            ? `#${this.containerId}`
+            : window.location.hash.split("?")[0];
+
+        if (urlHash) {
+            updatedUrl += urlHash;
+        }
+        if (paramsString) {
+            updatedUrl += `?${paramsString}`;
+        }
+
+        window.history.replaceState(
+            window.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 (urlHash) {
+            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 = "";
+        if (this._showMetaFilter) {
+            this._selectMetaFilter = "";
+        }
+        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) {
+                        const typesArr = [
+                            ...new Set(this.allCards.map((item) => item.type))
+                        ];
+                        typesArr.sort((a, b) => a.localeCompare(b));
+                        this.metaFilterOptions = typesArr.map((type) => ({
+                            label: type,
+                            value: type
+                        })) as FilterOption[];
+                    }
+                    if (this.checkURLParams()) {
+                        this.applyFilters();
+                    }
+                });
+            } catch (error) {
+                console.error(
+                    "An error occurred getting the cards:",
+                    error.message
+                );
+            }
+        }
+    }
+
+    // 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/arch/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/arch/heading/heading.css

@@ -0,0 +1 @@
+@import 'arch/reset';

package/src/modules/arch/heading/heading.html

@@ -0,0 +1,9 @@
+<template>
+    <h1 class="heading" if:true={isLevel1}><slot></slot></h1>
+    <h2 class="heading" if:true={isLevel2}><slot></slot></h2>
+    <h3 class="heading" if:true={isLevel3}><slot></slot></h3>
+    <h4 class="heading" if:true={isLevel4}><slot></slot></h4>
+    <h5 class="heading" if:true={isLevel5}><slot></slot></h5>
+    <h6 class="heading" if:true={isLevel6}><slot></slot></h6>
+    <template if:false={isHeading}><slot></slot></template>
+</template>

package/src/modules/arch/heading/heading.ts

@@ -0,0 +1,36 @@
+import { api, LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    // In the future, this could accept a value of "auto" which
+    // could traverse the DOM tree and figure out the appropriate level
+    @api level: '1' | '2' | '3' | '4' | '5' | '6' | null = null;
+
+    private get isHeading() {
+        // If "level" is null, we render a <slot> and with no heading
+        return this.level !== null;
+    }
+
+    private get isLevel1() {
+        return this.level === '1';
+    }
+
+    private get isLevel2() {
+        return this.level === '2';
+    }
+
+    private get isLevel3() {
+        return this.level === '3';
+    }
+
+    private get isLevel4() {
+        return this.level === '4';
+    }
+
+    private get isLevel5() {
+        return this.level === '5';
+    }
+
+    private get isLevel6() {
+        return this.level === '6';
+    }
+}

package/src/modules/arch/helpers/helpers.ts

@@ -0,0 +1,141 @@
+export function attrToBool(attr: any) {
+    if (typeof attr === "boolean") {
+        return attr;
+    }
+    if (typeof attr === "string") {
+        return attr === "true" || attr === "";
+    }
+    return !!attr;
+}
+
+export function hash(value: string) {
+    let hashValue = 0;
+    for (let i = 0; i < value.length; i++) {
+        const char = value.charCodeAt(i);
+        hashValue = (hashValue << 5) - hashValue + char;
+        hashValue |= 0;
+    }
+    return hashValue;
+}
+
+export function createImageUrl(image: string, hashParam: string) {
+    if (image.startsWith("/assets")) {
+        const segments = image.split("/");
+        return `/1/asset/immutable/s/${hashParam}/$assetsDir/images/${
+            segments[segments.length - 1]
+        }`;
+    }
+    return image;
+}
+
+export const InteractionEventTypes = Object.freeze({
+    CLICK: "CLICK",
+    PAGE_VIEW: "PAGE_VIEW",
+    INPUT_CHANGE: "INPUT_CHANGE",
+    FILE_DOWNLOAD: "FILE_DOWNLOAD",
+    IMAGE_DOWNLOAD: "IMAGE_DOWNLOAD", //used with CDN
+    IMAGE_CLICK: "IMAGE_CLICK",
+    DROPDOWN_CHANGE: "DROPDOWN_CHANGE"
+});
+const channelActions = Object.freeze({
+    DOWNLOAD: "DOWNLOAD",
+    VIEW: "VIEW"
+});
+const channelActionsStatus = Object.freeze({
+    SUCCESS: "SUCCESS",
+    FAILURE: "FAILURE"
+});
+export function sendInteractionEvent(name, type, event, target?) {
+    const element = target || event.currentTarget;
+    let text: string = "";
+    let eventValue: string = "";
+    let channelAction: string = "";
+    const channelActionStatus: string = channelActionsStatus.SUCCESS;
+    const pageUrl = new URL(document.location.href);
+    const searchTitle = pageUrl.searchParams.get("keywords") || "";
+    if (
+        type === InteractionEventTypes.IMAGE_CLICK ||
+        type === InteractionEventTypes.FILE_DOWNLOAD
+    ) {
+        eventValue = element.href || element.src;
+        const url = new URL(
+            eventValue,
+            window.location.protocol + "//" + window.location.host
+        );
+        text = url.pathname.substr(url.pathname.lastIndexOf("/") + 1);
+        channelAction = channelActions.DOWNLOAD;
+    }
+    if (type === InteractionEventTypes.CLICK) {
+        eventValue = element.href || "";
+
+        let textNode = element;
+        if (element.firstChild.localName === "slot") {
+            textNode = element.firstChild
+                .assignedNodes()
+                .find((child) => child.textContent !== "");
+        }
+        text = element.ariaLabel || textNode.textContent || textNode.innerText;
+
+        if (eventValue.includes("/view/")) {
+            type = InteractionEventTypes.IMAGE_CLICK;
+            const imgSrc = target.getElementsByTagName("img")[0].src;
+            channelAction = channelActions.VIEW;
+
+            if (imgSrc) {
+                const url = new URL(
+                    imgSrc,
+                    window.location.protocol + "//" + window.location.host
+                );
+                text = url.pathname.substr(url.pathname.lastIndexOf("/") + 1);
+            }
+        }
+        if (eventValue.includes("/cms/delivery/media")) {
+            type = InteractionEventTypes.IMAGE_DOWNLOAD;
+            channelAction = channelActions.DOWNLOAD;
+        }
+    }
+    if (type === InteractionEventTypes.DROPDOWN_CHANGE) {
+        text = element.id;
+        eventValue = element.value;
+    }
+    if (type === InteractionEventTypes.INPUT_CHANGE) {
+        text = element.ariaLabel;
+        eventValue = element.value;
+    }
+    let env = "DEV";
+    if (window.location.host === "architect.salesforce.com") {
+        env = "PRD";
+    }
+    if (window.location.host.includes("site-staging")) {
+        env = "STG";
+    }
+    text = text.replace(/^\s+|\s+$/g, "");
+    const pathNameArray = window.location.pathname.split("/");
+    const interaction = {
+        name: name,
+        eventType: "websiteInteractionEvent",
+        topLevelLocation: pathNameArray[1] || "/",
+        secondLevelLocation: pathNameArray[2],
+        page: pathNameArray[3],
+        params: window.location.search || window.location.hash,
+        interactionType: type,
+        interactionElement: element
+            ? `${element.localName}/${element.name}/${text}`
+            : "",
+        eventValue: eventValue,
+        env: env,
+        gaClientId: localStorage.getItem("ga_client_id"),
+        elementId: element.id,
+        elementLabel: text,
+        channelAction: channelAction,
+        channelActionStatus: channelActionStatus,
+        testSend: env === "PRD" ? "false" : "true",
+        pageId: pathNameArray[pathNameArray.length - 1],
+        pageTitle: document.title,
+        searchTitle: pathNameArray[1] === "search" ? searchTitle : "",
+        domainName: window.location.hostname
+    };
+    (window as any).SalesforceInteractions?.sendEvent({
+        interaction: interaction
+    });
+}

package/src/modules/arch/heroA/heroA.css

@@ -0,0 +1,116 @@
+@import "arch/reset";
+
+a {
+    text-decoration: none;
+}
+
+img {
+    display: block;
+    max-width: 100%;
+    max-height: 475px;
+}
+
+.hero {
+    padding: 0 var(--arch-spacing-6);
+}
+
+.hero-white {
+    background-color: var(--arch-color-white);
+    color: var(--arch-color-black);
+}
+
+.hero-dark {
+    background-color: var(--arch-color-theme-dark);
+    color: var(--arch-color-white);
+}
+
+.hero-blue {
+    background-color: var(--arch-color-blue-ninety-five);
+    color: var(--arch-color-black);
+}
+
+.hero-light {
+    background-color: var(--arch-color-theme-light);
+    color: var(--arch-color-black);
+}
+
+.hero-bright {
+    background-color: var(--arch-color-theme-bright);
+    color: var(--arch-color-black);
+}
+
+.content {
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+    margin: auto;
+    max-width: 1280px;
+    min-height: 500px;
+}
+
+.content-start {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    padding-top: var(--arch-spacing-12);
+    padding-bottom: var(--arch-spacing-12);
+    padding-right: var(--arch-spacing-6);
+    width: 40%;
+    min-width: 400px;
+}
+
+.content-end-center {
+    margin-top: var(--arch-spacing-8);
+    margin-bottom: var(--arch-spacing-8);
+}
+
+.content-end-bottom {
+    align-self: flex-end;
+    margin-top: var(--arch-spacing-8);
+}
+
+.title {
+    font-family: Neutraface, sans-serif;
+    font-size: var(--arch-font-size-6xl);
+    line-height: 1;
+    white-space: pre-line;
+}
+
+.subtitle {
+    line-height: 1.5;
+    margin: var(--arch-spacing-2) 0;
+    font-size: var(--arch-font-size-xl);
+}
+
+.cta {
+    margin-top: var(--arch-spacing-2);
+}
+
+@media screen and (max-width: 1100px) {
+    .content {
+        flex-direction: column;
+        padding-top: var(--arch-spacing-8);
+    }
+
+    .content-start {
+        align-items: center;
+        margin: auto;
+        max-width: 400px;
+        min-width: auto;
+        padding: var(--arch-spacing-2) 0 var(--arch-spacing-3);
+        text-align: center;
+        width: 100%;
+    }
+
+    .content-end {
+        margin-left: auto;
+        margin-right: auto;
+        max-width: 450px;
+        max-height: 450px;
+    }
+
+    .title {
+        white-space: normal;
+        font-size: var(--arch-font-size-5xl);
+    }
+}