@salesforcedevs/arch-components 1.20.17-alpha8 → 1.25.0

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;
+}

package/src/modules/arch/cardBase/cardBase.css

@@ -0,0 +1,11 @@
+.card-base {
+    background-color: var(--arch-color-white);
+    border-radius: var(--arch-radius-lg);
+    box-shadow: var(--arch-shadow-xs);
+    height: 100%;
+    transition: all 250ms ease-in-out;
+}
+
+.card-base:hover {
+    box-shadow: var(--arch-shadow-md);
+}

package/src/modules/arch/cardBase/cardBase.html

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

package/src/modules/arch/cardGridA/cardGridA.css

@@ -0,0 +1,11 @@
+@import "arch/reset";
+
+ul {
+    --spacing: var(--arch-spacing-6);
+
+    justify-content: center;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 280px));
+    grid-gap: var(--spacing);
+    max-width: 1280px;
+}

package/src/modules/arch/cardGridA/cardGridA.html

@@ -0,0 +1,21 @@
+<template>
+    <ul>
+        <template for:each={items} for:item="item">
+            <li key={item.ctaHref}>
+                <arch-card
+                    cta-href={item.ctaHref}
+                    cta-target={item.ctaTarget}
+                    cta-title={item.ctaTitle}
+                    img-aspect={imgAspect}
+                    img-src={item.imgSrc}
+                    img-variant={imgVariant}
+                    description={item.description}
+                    title={item.title}
+                    pretitle={item.pretitle}
+                    pretitle-href={item.pretitleHref}
+                    pretitle-href-text={item.pretitleHrefText}
+                ></arch-card>
+            </li>
+        </template>
+    </ul>
+</template>

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

@@ -0,0 +1,118 @@
+import { html } from "lit-html";
+
+export default {
+    title: "arch/arch-card-grid-a",
+    component: "sb-arch-card-grid-a",
+    parameters: {
+        chromatic: {
+            viewports: [450, 800, 1199]
+        }
+    }
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-card-grid-a {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+    <sb-arch-card-grid-a img-aspect="60%">
+        <sb-arch-card
+            cta-href="/"
+            cta-title="Read More"
+            cta-target="_blank"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            title="Hello A"
+        ></sb-arch-card>
+        <sb-arch-card
+            cta-href="/"
+            cta-title="Read More"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            title="Hello B"
+        ></sb-arch-card>
+        <sb-arch-card
+            cta-href="/"
+            cta-title="Read More"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            title="Hello C"
+        ></sb-arch-card>
+        <sb-arch-card
+            cta-href="/"
+            cta-title="Read More"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            title="Hello D"
+        ></sb-arch-card>
+        <sb-arch-card
+            cta-href="/"
+            cta-title="Read More"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            title="Hello E"
+        ></sb-arch-card>
+    </sb-arch-card-grid-a>
+`;
+
+// prettier-ignore
+export const ImageFull = () => html` ${createStyles()}
+    <sb-arch-card-grid-a img-aspect="60%" img-type="full">
+        <sb-arch-card
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            title="Hello A"
+        ></sb-arch-card>
+        <sb-arch-card
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            title="Hello B"
+        ></sb-arch-card>
+        <sb-arch-card
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            title="Hello C"
+        ></sb-arch-card>
+        <sb-arch-card
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            title="Hello D"
+        ></sb-arch-card>
+        <sb-arch-card
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            title="Hello E"
+        ></sb-arch-card>
+    </sb-arch-card-grid-a>
+`;
+
+// prettier-ignore
+export const ImageLeft = () => html` ${createStyles()}
+    <sb-arch-card-grid-a img-aspect="60%" img-type="left">
+        <sb-arch-card
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            title="Hello A"
+        ></sb-arch-card>
+        <sb-arch-card
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            title="Hello B"
+        ></sb-arch-card>
+        <sb-arch-card
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            title="Hello C"
+        ></sb-arch-card>
+        <sb-arch-card
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            title="Hello D"
+        ></sb-arch-card>
+        <sb-arch-card
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            title="Hello E"
+        ></sb-arch-card>
+    </sb-arch-card-grid-a>
+`;

package/src/modules/arch/cardGridA/cardGridA.ts

@@ -0,0 +1,24 @@
+import { api } from "lwc";
+
+import { Card, extractCardAttributes } from "arch/card";
+
+import { ChildrenElement } from "arch/children";
+
+export default class extends ChildrenElement<Card> {
+    @api items: Card[] = [];
+    @api imgAspect: string | null = null;
+    @api imgType: "full" | "left" | null = null;
+
+    private get imgVariant() {
+        switch (this.imgType) {
+            case "full":
+                return "top-cover";
+            case "left":
+                return "top-small";
+            default:
+                return "";
+        }
+    }
+
+    extractor = extractCardAttributes;
+}

package/src/modules/arch/cardGridC/cardGridC.css

@@ -0,0 +1,24 @@
+@import "arch/reset";
+
+ul {
+    --spacing: var(--arch-spacing-6);
+
+    justify-content: center;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+    grid-gap: var(--spacing);
+    max-width: 1280px;
+    margin: auto;
+}
+
+@media screen and (max-width: 800px) {
+    ul {
+        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    }
+}
+
+@media screen and (max-width: 400px) {
+    ul {
+        grid-template-columns: 1fr;
+    }
+}

package/src/modules/arch/cardGridC/cardGridC.html

@@ -0,0 +1,22 @@
+<template>
+    <ul>
+        <template for:each={items} for:item="item">
+            <li key={item.title}>
+                <arch-card
+                    class="card"
+                    cta-href={item.ctaHref}
+                    cta-target={item.ctaTarget}
+                    cta-title={item.ctaTitle}
+                    img-aspect={imgAspect}
+                    img-src={item.imgSrc}
+                    img-variant="top-cover"
+                    description={item.description}
+                    pretitle={item.pretitle}
+                    pretitle-href={item.pretitleHref}
+                    pretitle-href-text={item.pretitleHrefText}
+                    title={item.title}
+                ></arch-card>
+            </li>
+        </template>
+    </ul>
+</template>

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

@@ -0,0 +1,51 @@
+import { html } from "lit-html";
+
+export default {
+    title: "arch/arch-card-grid-c",
+    component: "sb-arch-card-grid-c",
+    parameters: {
+        chromatic: {
+            viewports: [380, 800, 1199]
+        }
+    }
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-card-grid-c {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+    <sb-arch-card-grid-c img-aspect="60%">
+        <sb-arch-card
+            cta-href="/posts/1"
+            cta-title="Read More"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            pretitle="Blog by"
+            pretitle-href="/user/amylee"
+            pretitle-href-text="Amy Lee"
+            title="Inspire Your Peers Careers by Sharing Your #AwesomeAdmin Advice"
+        ></sb-arch-card>
+        <sb-arch-card
+            cta-href="/posts/1"
+            cta-title="Read More"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            pretitle="Blog by Amy Lee"
+            title="Hello B"
+        ></sb-arch-card>
+        <sb-arch-card
+            cta-href="/posts/1"
+            cta-title="Read More"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            pretitle="Blog by Amy Lee"
+            title="Hello C"
+        ></sb-arch-card>
+    </sb-arch-card-grid-c>
+`;

package/src/modules/arch/cardGridC/cardGridC.ts

@@ -0,0 +1,11 @@
+import { api } from 'lwc';
+
+import { Card, extractCardAttributes } from 'arch/card';
+
+import { ChildrenElement } from 'arch/children';
+
+export default class extends ChildrenElement<Card> {
+    @api imgAspect: string | null = null;
+
+    extractor = extractCardAttributes;
+}

package/src/modules/arch/cardGridD/cardGridD.css

@@ -0,0 +1,17 @@
+@import "arch/reset";
+
+ul {
+    --spacing: var(--arch-spacing-6);
+
+    justify-content: center;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    grid-gap: var(--spacing);
+    max-width: 1280px;
+}
+
+@media screen and (max-width: 800px) {
+    ul {
+        grid-template-columns: 1fr;
+    }
+}

package/src/modules/arch/cardGridD/cardGridD.html

@@ -0,0 +1,20 @@
+<template>
+    <ul>
+        <template for:each={items} for:item="item">
+            <li key={item.title}>
+                <arch-card
+                    cta-href={item.ctaHref}
+                    cta-target={item.ctaTarget}
+                    cta-title={item.ctaTitle}
+                    img-src={item.imgSrc}
+                    img-variant="right-cover"
+                    description={item.description}
+                    pretitle={item.pretitle}
+                    pretitle-href={item.pretitleHref}
+                    pretitle-href-text={item.pretitleHrefText}
+                    title={item.title}
+                ></arch-card>
+            </li>
+        </template>
+    </ul>
+</template>

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

@@ -0,0 +1,43 @@
+import { html } from "lit-html";
+
+export default {
+    title: "arch/arch-card-grid-d",
+    component: "sb-arch-card-grid-d",
+    parameters: {
+        chromatic: {
+            viewports: [400, 800, 1199]
+        }
+    }
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-card-grid-d {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+    <sb-arch-card-grid-d>
+        <sb-arch-card
+            cta-href="/"
+            cta-title="Start"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean eget velit placerat, scelerisque libero sed, mattis orci."
+            img-src="/images/card-a.png"
+            pretitle="Learning with"
+            pretitle-href="/users/astro"
+            pretitle-href-text="Astro"
+            title="Hello A"
+        ></sb-arch-card>
+        <sb-arch-card
+            cta-href="/"
+            cta-title="Start"
+            description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+            img-src="/images/card-a.png"
+            pretitle="Hello"
+            title="Hello B"
+        ></sb-arch-card>
+    </sb-arch-card-grid-d>
+`;

package/src/modules/arch/cardGridD/cardGridD.ts

@@ -0,0 +1,7 @@
+import { Card, extractCardAttributes } from 'arch/card';
+
+import { ChildrenElement } from 'arch/children';
+
+export default class extends ChildrenElement<Card> {
+    extractor = extractCardAttributes;
+}