@salesforcedevs/arch-components 1.20.17-alpha13 → 1.20.17-alpha15

package/src/modules/arch/buttonLink/buttonLink.ts

@@ -0,0 +1,8 @@
+import { api } from 'lwc';
+import Button from 'arch/button';
+
+export default class extends Button {
+    @api href: string | null = null;
+    @api rel: string | null = null;
+    @api target: '_self' | '_blank' | '_parent' | '_top' | null = null;
+}

package/src/modules/arch/buttonStyles/buttonStyles.css

@@ -0,0 +1,220 @@
+@import "arch/reset";
+
+:host {
+    display: inline-flex;
+
+    --dark-1: 5%;
+    --dark-2: 15%;
+
+    color: var(--arch-color-meteorite);
+}
+
+.button {
+    align-items: center;
+    appearance: none;
+    border: 1px solid transparent;
+    background-color: transparent;
+    border-radius: var(--arch-spacing-1);
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    font-weight: bold;
+    line-height: 1.25;
+    font-size: var(--arch-font-size-sm);
+    padding: calc(var(--arch-spacing-3) * 0.8333) var(--arch-spacing-4);
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.button-variant {
+    background-color: hsl(
+        var(--color-bg-h) var(--color-bg-s) var(--color-bg-l)
+    );
+    border: 1px solid hsl(var(--color-bg-h) var(--color-bg-s) var(--color-bg-l));
+    box-shadow: 0 1px 0
+        hsl(
+            var(--color-bg-h) var(--color-bg-s)
+                calc(var(--color-bg-l) - var(--dark-2))
+        );
+    color: var(--color);
+}
+
+.button-variant:hover:not(.button-disabled),
+.button-variant:focus:not(.button-disabled),
+.button-variant:active:not(.button-disabled) {
+    color: var(--color);
+}
+
+.button-variant:hover:not(.button-disabled),
+.button-variant:focus:not(.button-disabled) {
+    background-color: hsl(
+        var(--color-bg-h) var(--color-bg-s)
+            calc(var(--color-bg-l) - var(--dark-1))
+    );
+    border-color: hsl(
+        var(--color-bg-h) var(--color-bg-s)
+            calc(var(--color-bg-l) - var(--dark-1))
+    );
+}
+
+.button-variant:active:not(.button-disabled) {
+    background-color: hsl(
+        var(--color-bg-h) var(--color-bg-s)
+            calc(var(--color-bg-l) - var(--dark-2))
+    );
+    border-color: hsl(
+        var(--color-bg-h) var(--color-bg-s)
+            calc(var(--color-bg-l) - var(--dark-2))
+    );
+    box-shadow: 0 1px 0
+            hsl(
+                var(--color-bg-h) var(--color-bg-s)
+                    calc(var(--color-bg-l) - var(--dark-2))
+            ),
+        0 0 4px hsl(var(--color-bg-h) var(--color-bg-s) var(--color-bg-l));
+}
+
+.button-neutral {
+    color: var(--arch-color-brand);
+    background-color: var(--arch-color-white);
+    box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 5%), 0 2px 0 hsl(0deg 0% 0% / 5%);
+}
+
+.button-neutral:hover:not(.button-disabled),
+.button-neutral:focus:not(.button-disabled) {
+    background-color: var(--arch-color-sand);
+}
+
+.button-neutral:active:not(.button-disabled) {
+    background-color: var(--arch-color-fog);
+    color: var(--arch-color-meteorite);
+}
+
+.button-bare:hover:not(.button-disabled),
+.button-bare:focus:not(.button-disabled) {
+    background-color: var(--arch-color-sand);
+    color: hsl(
+        var(--arch-color-meteorite-h) var(--arch-color-meteorite-s)
+            calc(var(--arch-color-meteorite-l) - var(--dark-1))
+    );
+}
+
+.button-border-filled {
+    background-color: var(--arch-color-white);
+    border-color: var(--arch-color-fog);
+    box-shadow: 0 1px 0 0 hsl(0deg 0% 0% / 10%);
+}
+
+.button-border-filled:hover:not(.button-disabled),
+.button-border-filled:focus:not(.button-disabled) {
+    background-color: var(--arch-color-sand);
+    color: hsl(
+        var(--arch-color-meteorite-h) var(--arch-color-meteorite-s)
+            calc(var(--arch-color-meteorite-l) - var(--dark-1))
+    );
+}
+
+.button-bare:active:not(.button-disabled),
+.button-border-filled:active:not(.button-disabled) {
+    background-color: var(--arch-color-fog);
+    color: hsl(
+        var(--arch-color-meteorite-h) var(--arch-color-meteorite-s)
+            calc(var(--arch-color-meteorite-l) - var(--dark-1))
+    );
+}
+
+.button-brand {
+    --color: var(--arch-color-white);
+    --color-bg-h: var(--arch-color-brand-h);
+    --color-bg-s: var(--arch-color-brand-s);
+    --color-bg-l: var(--arch-color-brand-l);
+}
+
+.button-success {
+    --color: var(--arch-color-white);
+    --color-bg-h: var(--arch-color-success-h);
+    --color-bg-s: var(--arch-color-success-s);
+    --color-bg-l: var(--arch-color-success-l);
+}
+
+.button-destructive {
+    --color: var(--arch-color-white);
+    --color-bg-h: var(--arch-color-destructive-h);
+    --color-bg-s: var(--arch-color-destructive-s);
+    --color-bg-l: var(--arch-color-destructive-l);
+}
+
+.button-destructive-inverse {
+    color: var(--arch-color-destructive);
+    background-color: var(--arch-color-white);
+    border-color: transparent;
+    box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 5%), 0 2px 0 hsl(0deg 0% 0% / 5%);
+}
+
+.button-destructive-inverse:hover:not(.button-disabled),
+.button-destructive-inverse:focus:not(.button-disabled) {
+    color: var(--arch-color-destructive);
+    background-color: var(--arch-color-sand);
+    border-color: transparent;
+}
+
+.button-destructive-inverse:active:not(.button-disabled) {
+    color: var(--arch-color-meteorite);
+    background-color: var(--arch-color-fog);
+    border-color: transparent;
+}
+
+.button-disabled {
+    background: var(--arch-color-fog);
+    border-color: var(--arch-color-fog);
+    box-shadow: 0 1px 0 var(--arch-color-fog);
+    color: var(--arch-color-granite);
+    cursor: not-allowed;
+    pointer-events: none;
+    outline: none;
+}
+
+.button-small {
+    font-size: var(--arch-font-size-sm);
+    padding: var(--arch-spacing-2) var(--arch-spacing-4);
+}
+
+.button-large {
+    font-size: var(--arch-font-size-md);
+    padding: var(--arch-spacing-3) var(--arch-spacing-5);
+}
+
+.button[data-icon-size] {
+    padding: 0;
+}
+
+.button[data-icon-size="small"] {
+    padding: calc(var(--arch-spacing-2) + 0.75px);
+}
+
+.button[data-icon-size="medium"] {
+    padding: calc(var(--arch-spacing-2) + 1px);
+}
+
+.button[data-icon-size="large"] {
+    padding: calc(var(--arch-spacing-2) + 2px);
+}
+
+.spinner {
+    margin-right: var(--arch-spacing-2);
+    margin-left: calc(var(--arch-spacing-1) * -1);
+    animation: rotation 2s infinite linear;
+}
+
+@keyframes rotation {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(359deg);
+    }
+}

package/src/modules/arch/card/card.css

@@ -0,0 +1,128 @@
+@import "arch/reset";
+@import "arch/cardBase";
+
+:host {
+    height: 100%;
+}
+
+a {
+    color: var(--arch-color-brand);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.card {
+    display: flex;
+}
+
+.content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    color: var(--arch-color-black);
+}
+
+.content-inner {
+    flex: 1;
+}
+
+.pretitle {
+    font-size: var(--arch-font-size-sm);
+    color: var(--arch-color-meteorite);
+    padding-bottom: var(--arch-spacing-1);
+}
+
+.title {
+    font-size: var(--arch-font-size-lg);
+    font-weight: bold;
+}
+
+.description {
+    margin-top: var(--arch-spacing-3);
+    line-height: var(--arch-line-height-normal);
+}
+
+.cta {
+    font-weight: bold;
+    margin-top: var(--arch-spacing-3);
+    display: block;
+}
+
+div.image {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+img.image {
+    max-width: 90%;
+    max-height: 100px;
+}
+
+.card[data-href] .image {
+    cursor: pointer;
+}
+
+.card:not([data-image]),
+.card[data-image=""] {
+    padding: var(--arch-spacing-6);
+}
+
+.card[data-image^="top"] {
+    flex-direction: column-reverse;
+}
+
+.card[data-image^="top"] .content {
+    padding: var(--arch-spacing-6);
+}
+
+.card[data-image="top-cover"] .image {
+    height: 0;
+    border-top-left-radius: var(--arch-radius-lg);
+    border-top-right-radius: var(--arch-radius-lg);
+}
+
+.card[data-image="top-small"] .image {
+    align-self: flex-start;
+    margin: var(--arch-spacing-6) var(--arch-spacing-6) 0 var(--arch-spacing-6);
+    max-height: 75px;
+}
+
+.card[data-image="right-cover"] {
+    align-items: stretch;
+    padding: var(--arch-spacing-6);
+}
+
+.card[data-image="right-cover"] .image {
+    flex: 1;
+    align-self: stretch;
+    border-radius: var(--arch-radius-lg);
+    margin-left: var(--arch-spacing-6);
+}
+
+.card[data-image="left-cover"] {
+    align-items: top;
+    flex-direction: row-reverse;
+    padding: var(--arch-spacing-6);
+}
+
+.card[data-image="left-cover"] .image {
+    align-self: stretch;
+    border-radius: var(--arch-radius-lg);
+    flex: 1;
+    margin-right: var(--arch-spacing-6);
+}
+
+.card[data-image="left-small"] {
+    align-items: flex-start;
+    flex-direction: row-reverse;
+    padding: var(--arch-spacing-6);
+}
+
+.card[data-image="left-small"] .image {
+    width: 50px;
+    margin-right: var(--arch-spacing-6);
+}

package/src/modules/arch/card/card.html

@@ -0,0 +1,85 @@
+<template>
+    <article
+        class="card card-base"
+        data-href={ctaHref}
+        data-image={imgVariantResponsive}
+        role="article"
+        aria-labelledby={cardTitleId}
+        tabindex="0"
+        onkeydown={handleCardKeydown}
+    >
+        <div class="content">
+            <div class="content-inner">
+                <template if:true={pretitle}>
+                    <p class="pretitle">{pretitle}</p>
+                </template>
+                <template if:true={pretitleHref}>
+                    <p><a href={pretitleHref}>{pretitleHrefText}</a></p>
+                </template>
+                <h3 class="title" id={cardTitleId}>{title}</h3>
+                <p if:true={description} class="description">{description}</p>
+            </div>
+            <a
+                if:true={ctaTitle}
+                class="cta"
+                name={ctaTitleId}
+                id={ctaTitleId}
+                href={ctaHref}
+                target={ctaTarget}
+                aria-label={assistiveText}
+                onclick={trackLinkClick}
+                rel={rel}
+            >
+                {ctaTitle}
+                <img
+                    if:true={isExternalHref}
+                    src="https://a.sfdcstatic.com/developer-website/images/architect/new_window.svg"
+                    style="display: inline; height: 1rem; margin: 0 0 0 5px"
+                    alt="Open link in new window"
+                    aria-label="Open link in new window"
+                />
+            </a>
+        </div>
+        <template if:true={imgSrc}>
+            <div
+                name={ctaHref}
+                id={imageDivId}
+                class="image"
+                if:false={imgTag}
+                onclick={onImageClick}
+                style={imgStyle}
+                data-href={ctaHref}
+            ></div>
+            <picture if:true={imgTagNoSvg}>
+                <template if:false={isRemoteImage}>
+                    <source srcset={imgSrcSetWebP} />
+                    <source srcset={imgSrcSetJpg} />
+                </template>
+                <img
+                    name={ctaHref}
+                    id={imageImgId}
+                    class="image"
+                    if:true={imgTag}
+                    onclick={onImageClick}
+                    style={imgStyle}
+                    src={imgSrc}
+                    alt={imageAltText}
+                    loading="lazy"
+                    decoding="async"
+                />
+            </picture>
+            <img
+                name={ctaHref}
+                id={imageSvgId}
+                class="image"
+                if:true={imgTagSvg}
+                onclick={onImageClick}
+                style={imgStyle}
+                src={imgSrc}
+                alt={description}
+                loading="lazy"
+                decoding="async"
+            />
+        </template>
+    </article>
+</template>

package/src/modules/arch/card/card.ts

@@ -0,0 +1,277 @@
+import { api, track, LightningElement } from "lwc";
+
+import { track as analyticsTrack } from "arch/instrumentation";
+import { sendInteractionEvent, InteractionEventTypes } from "arch/helpers";
+
+export type CardAttribute = string | null;
+
+export type CardImageVariant =
+    | "top-cover"
+    | "top-small"
+    | "left-small"
+    | "left-cover"
+    | "right-cover";
+
+export type Card = {
+    assistiveText: CardAttribute;
+    ctaHref: CardAttribute;
+    ctaTarget: CardAttribute;
+    ctaTitle: CardAttribute;
+    description: CardAttribute;
+    imgSrc: CardAttribute;
+    pretitle: CardAttribute;
+    pretitleHref: CardAttribute;
+    pretitleHrefText: CardAttribute;
+    title: CardAttribute;
+    productArea: CardAttribute;
+    date: CardAttribute;
+    level: CardAttribute;
+};
+
+const widths = [820, 640, 320, 75];
+
+const homepageCtaTitles = ["design", "deliver", "govern", "roadmap"];
+
+// arch-card-grid taks care of adjusting the grid to the correct number
+// of columns at smaller view ports
+export const mediaQuerySnapToTop = window.matchMedia(`(max-width: 500px)`);
+
+export default class extends LightningElement {
+    @api assistiveText: CardAttribute = null;
+    @api ctaHref: CardAttribute = null;
+    @api ctaTarget: CardAttribute = null;
+    @api ctaTitle: CardAttribute = null;
+    @api description: CardAttribute = null;
+    @api imgAspect: CardAttribute = null;
+    @api imgSrc: CardAttribute = null;
+    @api imgVariant: CardImageVariant = "top-cover";
+    @api pretitle: CardAttribute = null;
+    @api pretitleHref: CardAttribute = null;
+    @api pretitleHrefText: CardAttribute = null;
+    @api title: string = "";
+    @api productArea: string = "";
+    @api date: string = "";
+    @api level: string = "";
+
+    @track private snapToTop = mediaQuerySnapToTop.matches;
+    private cardId: string = "";
+
+    private get imgStyle() {
+        if (!this.imgSrc) {
+            return "";
+        }
+        const style: string[] = [];
+        const { imgVariantResponsive: variant, imgSrc } = this;
+
+        if (variant.includes("cover")) {
+            const image = imgSrc;
+
+            // Use the original image if it's a remote image or WebP
+            /* if (!this.isRemoteImage && !imgSrc.includes('webp')) {
+                const imgType = imgSrc.split('.').pop();
+                image = imgSrc.replace(`.${imgType}`, '-820w.webp');
+            } */
+
+            style.push(`background-image: url(${image})`);
+        }
+        if (variant === "top-cover") {
+            style.push(`padding-top: ${this.imgAspect || "40%"}`);
+        }
+        return style.join(";");
+    }
+
+    private get imgTag() {
+        return this.imgVariant.includes("small");
+    }
+
+    private get isRemoteImage() {
+        return /^(https?:\/\/|\/\/)/i.test(this.imgSrc);
+    }
+
+    private get imgSrcSetWebP() {
+        if (this.isRemoteImage) {
+            return this.imgSrc;
+        }
+        const imgType = this.imgSrc?.split(".").pop();
+        const imgName = this.imgSrc?.replace(`.${imgType}`, "");
+        const srcSet: string[] = [];
+        widths.forEach((width) => {
+            srcSet.push(`${imgName}-${width}w.webp ${width}w`);
+        });
+        return srcSet.join(",");
+    }
+
+    private get imgSrcSetJpg() {
+        if (this.isRemoteImage) {
+            return this.imgSrc;
+        }
+        const imgType = this.imgSrc?.split(".").pop();
+        const imgName = this.imgSrc?.replace(`.${imgType}`, "");
+        const srcSet: string[] = [];
+        widths.forEach((width) => {
+            srcSet.push(`${imgName}-${width}w.jpg ${width}w`);
+        });
+        return srcSet.join(",");
+    }
+
+    private get imgTagNoSvg() {
+        return this.imgTag && !this.imgSrc?.toLowerCase().endsWith("svg");
+    }
+
+    private get imgTagSvg() {
+        return this.imgTag && this.imgSrc?.toLowerCase().endsWith("svg");
+    }
+
+    private get rel() {
+        return this.ctaTarget === "_blank" ? "noopener" : "";
+    }
+
+    get isExternalHref() {
+        return this.ctaTarget === "_blank" && this.ctaTitle;
+    }
+
+    private get imgVariantResponsive() {
+        if (!this.snapToTop) {
+            return this.imgVariant;
+        }
+        return String(this.imgVariant).replace(/left|right/, "top");
+    }
+
+    // Accessibility getters
+    get cardTitleId() {
+        return `${this.cardId}-title`;
+    }
+
+    get ctaTitleId() {
+        return `${this.cardId}-cta`;
+    }
+
+    get imageDivId() {
+        return `${this.cardId}-image-div`;
+    }
+
+    get imageImgId() {
+        return `${this.cardId}-image-img`;
+    }
+
+    get imageSvgId() {
+        return `${this.cardId}-image-svg`;
+    }
+
+    get imageAriaLabel() {
+        const title = this.title || "Card";
+        const description = this.description || "";
+        return `View ${title}${description ? `: ${description}` : ""}`;
+    }
+
+    get imageAltText() {
+        return this.description || this.title || "Card image";
+    }
+
+    connectedCallback() {
+        mediaQuerySnapToTop.addListener(this.onMediaQuerySnapToTop);
+        // Generate unique ID for this card instance
+        const title = this.title || "Card";
+        this.cardId = `${title}-${Math.random().toString(36).substring(2, 11)}`;
+    }
+
+    disconnectedCallback() {
+        mediaQuerySnapToTop.removeListener(this.onMediaQuerySnapToTop);
+    }
+
+    private onImageClick(e: MouseEvent) {
+        const element = e.target as HTMLElement;
+        sendInteractionEvent(
+            "Card Image Click",
+            InteractionEventTypes.IMAGE_CLICK,
+            e,
+            element
+        );
+
+        const { ctaHref, ctaTarget } = this;
+        if (ctaHref) {
+            if (ctaTarget) {
+                window.open(ctaHref, ctaTarget);
+            } else {
+                window.location.href = ctaHref;
+            }
+        }
+        this.trackLinkClick(e, true);
+    }
+
+    private trackLinkClick(e: MouseEvent, imgClick: boolean) {
+        const element = e.currentTarget as HTMLAnchorElement;
+        const linkText = this.ctaTitle;
+        const title = typeof this.title === "string" ? this.title : "";
+        let event: string = "";
+        let payload: Record<string, string> = {};
+        if (!imgClick) {
+            sendInteractionEvent(
+                "Card Link Click",
+                InteractionEventTypes.CLICK,
+                e,
+                element
+            );
+        }
+
+        if (
+            window.location.pathname === "/" &&
+            homepageCtaTitles.includes(this.title.toLowerCase())
+        ) {
+            event = "homepage_cta";
+            payload = {
+                linkText: `home: ${linkText}`,
+                headingText: title,
+                itemLocation: "card"
+            };
+        } else {
+            event = "select_content";
+            payload = {
+                contentType: "card grid",
+                itemTitle: !title || title === "" ? undefined : title,
+                itemLocation: "card"
+            };
+        }
+        if (element.target) {
+            const parsedLink = new URL(element.href);
+            analyticsTrack(this.template.host, "custEv_outboundClick", {
+                clickText: title,
+                clickUrl: parsedLink.href
+            });
+        }
+        analyticsTrack(this.template.host, event, payload);
+    }
+
+    private onMediaQuerySnapToTop = (e: MediaQueryListEvent) => {
+        this.snapToTop = e.matches;
+    };
+
+    // Accessibility keyboard handlers
+    handleCardKeydown(e: KeyboardEvent) {
+        if (e.key === "Enter" || e.key === " ") {
+            this.trackLinkClick(e as unknown as MouseEvent, false);
+            e.preventDefault();
+            if (this.ctaHref) {
+                if (this.ctaTarget) {
+                    window.open(this.ctaHref, this.ctaTarget);
+                } else {
+                    window.location.href = this.ctaHref;
+                }
+            }
+        }
+    }
+}
+
+export function extractCardAttributes(element: Element) {
+    return {
+        ctaHref: element.getAttribute("cta-href")!,
+        ctaTarget: element.getAttribute("cta-target")!,
+        ctaTitle: element.getAttribute("cta-title")!,
+        description: element.getAttribute("description"),
+        imgSrc: element.getAttribute("img-src"),
+        pretitle: element.getAttribute("pretitle"),
+        pretitleHref: element.getAttribute("pretitle-href"),
+        pretitleHrefText: element.getAttribute("pretitle-href-text"),
+        title: element.getAttribute("title")
+    } as Card;
+}