@salesforcedevs/arch-components 1.20.17-alpha1

package/src/modules/tm/card/card.ts

@@ -0,0 +1,269 @@
+import { api, track, LightningElement } from 'lwc';
+
+import { track as analyticsTrack } from 'tds/instrumentation';
+import { sendInteractionEvent, InteractionEventTypes } from 'shared/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'];
+
+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 '';
+        let style: string[] = [];
+        const { imgVariantResponsive: variant, imgSrc } = this;
+
+        if (variant.includes('cover')) {
+            let 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;
+        } else {
+            const imgType = this.imgSrc?.split('.').pop();
+            const imgName = this.imgSrc?.replace(`.${imgType}`, '');
+            let 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;
+        } else {
+            const imgType = this.imgSrc?.split('.').pop();
+            const imgName = this.imgSrc?.replace(`.${imgType}`, '');
+            let 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
+        );
+
+        let { 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'
+            } as any;
+        }
+        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;
+}
+
+// tm-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)`);

package/src/modules/tm/cardBase/cardBase.css

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

package/src/modules/tm/cardGridA/cardGridA.css

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

package/src/modules/tm/cardGridA/cardGridA.html

@@ -0,0 +1,21 @@
+<template>
+    <ul>
+        <template for:each={items} for:item="item">
+            <li key={item.ctaHref}>
+                <tm-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}
+                ></tm-card>
+            </li>
+        </template>
+    </ul>
+</template>

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

@@ -0,0 +1,107 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-card-grid-a',
+    parameters: {
+        chromatic: {
+            viewports: [450, 800, 1199]
+        },
+        modules: ['/modules/tm-card-grid-a.js']
+    }
+};
+
+export const Base = () => html`
+    <tm-card-grid-a img-aspect="60%">
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+    </tm-card-grid-a>
+`;
+
+export const ImageFull = () => html`
+    <tm-card-grid-a img-aspect="60%" img-type="full">
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+    </tm-card-grid-a>
+`;
+
+export const ImageLeft = () => html`
+    <tm-card-grid-a img-aspect="60%" img-type="left">
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+    </tm-card-grid-a>
+`;

package/src/modules/tm/cardGridA/cardGridA.ts

@@ -0,0 +1,24 @@
+import { api } from 'lwc';
+
+import { Card, extractCardAttributes } from 'tm/card';
+
+import { ChildrenElement } from 'shared/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/tm/cardGridB/cardGridB.css

@@ -0,0 +1,88 @@
+@import 'tds/reset';
+
+div {
+    --spacing: var(--tds-spacing-6);
+    display: grid;
+    grid-column-gap: var(--spacing);
+    grid-row-gap: var(--spacing);
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(3, auto);
+    max-width: 1280px;
+}
+
+.card:nth-child(1) {
+    grid-column: 1 / span 3;
+    grid-row: 1;
+}
+
+.card:nth-child(2) {
+    grid-column: 4 / span 3;
+    grid-row: 1;
+}
+
+.card:nth-child(3) {
+    grid-column: 1 / span 2;
+    grid-row: 2;
+}
+
+.card:nth-child(4) {
+    grid-column: 1 / span 2;
+    grid-row: 3;
+}
+
+.card:nth-child(5) {
+    grid-column: 3 / span 4;
+    grid-row: 2 / span 2;
+}
+
+@media screen and (max-width: 1100px) {
+    ul {
+        grid-template-rows: repeat(5, auto);
+    }
+
+    .card:nth-child(3) {
+        grid-column: 1 / span 3;
+        grid-row: 4;
+    }
+
+    .card:nth-child(4) {
+        grid-column: 4 / span 3;
+        grid-row: 4;
+    }
+
+    .card:nth-child(5) {
+        grid-column: 1 / span 6;
+        grid-row: 2 / span 2;
+    }
+}
+
+@media screen and (max-width: 850px) {
+    ul {
+        grid-template-rows: repeat(6, auto);
+    }
+
+    .card:nth-child(1) {
+        grid-column: 1 / span 6;
+        grid-row: 1;
+    }
+
+    .card:nth-child(2) {
+        grid-column: 1 / span 6;
+        grid-row: 2;
+    }
+
+    .card:nth-child(3) {
+        grid-column: 1 / span 6;
+        grid-row: 5;
+    }
+
+    .card:nth-child(4) {
+        grid-column: 1 / span 6;
+        grid-row: 6;
+    }
+
+    .card:nth-child(5) {
+        grid-column: 1 / span 6;
+        grid-row: 3 / span 2;
+    }
+}

package/src/modules/tm/cardGridB/cardGridB.html

@@ -0,0 +1,20 @@
+<template>
+    <div>
+        <template for:each={grid} for:item="item">
+            <tm-card
+                class="card"
+                cta-href={item.ctaHref}
+                cta-target={item.ctaTarget}
+                cta-title={item.ctaTitle}
+                description={item.description}
+                img-src={item.imgSrc}
+                img-variant={item.imgVariant}
+                key={item.title}
+                pretitle={item.pretitle}
+                pretitle-href={item.pretitleHref}
+                pretitle-href-text={item.pretitleHrefText}
+                title={item.title}
+            ></tm-card>
+        </template>
+    </div>
+</template>

package/src/modules/tm/cardGridB/cardGridB.stories.js

@@ -0,0 +1,58 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-card-grid-b',
+    parameters: {
+        chromatic: {
+            viewports: [450, 800, 1000, 1199]
+        },
+        modules: ['/modules/tm-card-grid-b.js']
+    }
+};
+
+export const Base = () => html`
+    <tm-card-grid-b>
+        <tm-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."
+            img-src="/images/card-a.png"
+            title="Hello A"
+            pretitle="Type of Content"
+        ></tm-card>
+        <tm-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."
+            img-src="/images/card-a.png"
+            title="Hello B"
+            pretitle="Blog by"
+            pretitle-href="/user/sharon"
+            pretitle-href-text="Sharon Tate"
+        ></tm-card>
+        <tm-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."
+            img-src="/images/card-a.png"
+            title="Hello C"
+            pretitle="Type of Content"
+        ></tm-card>
+        <tm-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."
+            img-src="/images/card-a.png"
+            title="Hello D"
+            pretitle="Type of Content"
+        ></tm-card>
+        <tm-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."
+            img-src="/images/card-a.png"
+            title="Hello E"
+            pretitle="Type of Content"
+        ></tm-card>
+    </tm-card-grid-b>
+`;

package/src/modules/tm/cardGridB/cardGridB.ts

@@ -0,0 +1,19 @@
+import { Card, CardImageVariant, extractCardAttributes } from 'tm/card';
+
+import { ChildrenElement } from 'shared/children';
+
+type GridCard = Card & { imgVariant: CardImageVariant };
+
+export default class extends ChildrenElement<Card> {
+    extractor = extractCardAttributes;
+
+    get grid(): GridCard[] {
+        return [
+            { ...this.items[0], imgVariant: 'right--cover' },
+            { ...this.items[1], imgVariant: 'right--cover' },
+            { ...this.items[2], imgVariant: 'left--small' },
+            { ...this.items[3], imgVariant: 'left--small' },
+            { ...this.items[4], imgVariant: 'left--cover' }
+        ];
+    }
+}

package/src/modules/tm/cardGridC/cardGridC.css

@@ -0,0 +1,24 @@
+@import 'tds/reset';
+
+ul {
+    --spacing: var(--tds-spacing-6);
+    justify-content: center;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
+    grid-column-gap: var(--spacing);
+    grid-row-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/tm/cardGridC/cardGridC.html

@@ -0,0 +1,22 @@
+<template>
+    <ul>
+        <template for:each={items} for:item="item">
+            <li key={item.title}>
+                <tm-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}
+                ></tm-card>
+            </li>
+        </template>
+    </ul>
+</template>