@salesforcedevs/arch-components 1.20.17-alpha1 → 1.20.17-alpha10

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

@@ -1,269 +0,0 @@
-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

@@ -1,11 +0,0 @@
-.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

@@ -1,11 +0,0 @@
-@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

@@ -1,21 +0,0 @@
-<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

@@ -1,107 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,88 +0,0 @@
-@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

@@ -1,20 +0,0 @@
-<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

@@ -1,58 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,24 +0,0 @@
-@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

@@ -1,22 +0,0 @@
-<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>