@salesforcedevs/arch-components 1.20.17-alpha1

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

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

package/src/modules/tm/cardGridC/cardGridC.ts

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

package/src/modules/tm/cardGridD/cardGridD.css

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

package/src/modules/tm/cardGridD/cardGridD.html

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

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

@@ -0,0 +1,34 @@
+import { html } from 'lit-html';
+
+export default {
+    title: 'tm/tm-card-grid-d',
+    parameters: {
+        chromatic: {
+            viewports: [400, 800, 1199]
+        },
+        modules: ['/modules/tm-card-grid-d.js']
+    }
+};
+
+export const Base = () => html`
+    <tm-card-grid-d>
+        <tm-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"
+        ></tm-card>
+        <tm-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"
+        ></tm-card>
+    </tm-card-grid-d>
+`;

package/src/modules/tm/cardGridD/cardGridD.ts

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

package/src/modules/tm/cardNew/cardNew.css

@@ -0,0 +1,31 @@
+@import 'dxHelpers/text';
+@import 'dxHelpers/card';
+
+dx-card-title::part(title) {
+    margin-bottom: var(--tds-spacing-4);
+}
+
+.body {
+    display: flex;
+    flex-direction: column;
+}
+
+/* The bottom item gets tds-spacing-10 margin; if the pill is at the bottom, that's the pill; if the pill is at the top, that's the subtitle */
+.body.pill-bottom .pill,
+.body.pill-top .subtitle {
+    margin-bottom: var(--tds-spacing-10);
+}
+
+.body.pill-top .pill,
+.body.pill-bottom .subtitle {
+    margin-bottom: var(--tds-spacing-4);
+}
+
+.body.pill-bottom .pill {
+    order: 1; /* Setting an explicit order makes the pill appear last, since all other elements have default order 0 */
+}
+
+.cta {
+    position: absolute;
+    bottom: var(--tds-spacing-4);
+}

package/src/modules/tm/cardNew/cardNew.html

@@ -0,0 +1,29 @@
+<template>
+    <dx-card-content
+        borderless="false"
+        fix-orientation="true"
+        href={ctaHref}
+        href-click={handleImageClick}
+        img-link-aria-label={imgLinkAriaLabel}
+        img-src={imgSrc}
+    >
+        <div class={className} slot="body" title={header}>
+            <tds-badge class="pill" lwc:if={pill} color="blue">{pill}</tds-badge>
+            <div lwc:if={label} class="dx-text-label-3 card-label">{label}</div>
+            <dx-card-title
+                lwc:if={displayHeader}
+                header={header}
+                href={ctaHref}
+                onclick={handleLinkClick}
+            ></dx-card-title>
+            <div class="subtitle">{subtitle}</div>
+            <dx-button
+                class="cta"
+                variant="inline"
+                href={ctaHref}
+                onclick={handleLinkClick}
+                >{ctaTitle}</dx-button
+            >
+        </div>
+    </dx-card-content>
+</template>

package/src/modules/tm/cardNew/cardNew.ts

@@ -0,0 +1,66 @@
+import { api, LightningElement } from "lwc";
+import { track } from 'tds/instrumentation';
+
+export type PillPosition = 'top' | 'bottom';
+
+export default class extends LightningElement {
+    @api pill: string = '';
+    @api label: string = '';
+    @api header: string = '';
+    @api subtitle: string = '';
+    @api ctaHref: string = '';
+    @api ctaTitle: string = '';
+    @api imgSrc: string = '';
+    @api imgLinkAriaLabel: string = '';
+    @api noDisplayedHeader: boolean = false;
+
+    @api get pillPosition() {
+        return this._pillPosition;
+    }
+    set pillPosition(value: PillPosition) {
+        this._pillPosition = value || 'top';
+    }
+
+    private _pillPosition: PillPosition = 'top';
+
+    private get className() {
+        return `body pill-${this.pillPosition}`;
+    }
+
+    private get displayHeader() {
+        return this.header && !this.noDisplayedHeader;
+    }
+
+    private handleImageClick(e: MouseEvent) {
+        // FIXME? sendInteractionEventwon't work with custom elements/shadow DOM. Maybe investigate or get rid of this.
+        // sendInteractionEvent('Card Image Click', InteractionEventTypes.IMAGE_CLICK, e, e.currentTarget);
+        this.handleHrefClick(e, {
+            clickUrl: this.ctaHref,
+            clickImg: this.imgSrc,
+            label: this.label,
+            title: this.header,
+            subtitle: this.subtitle,
+        });
+    }
+
+    private handleLinkClick(e: MouseEvent) {
+        // FIXME? sendInteractionEvent won't work with custom elements/shadow DOM. Maybe investigate or get rid of this.
+        // sendInteractionEvent('Card Link Click', InteractionEventTypes.CLICK, e, e.currentTarget);
+        const currentTarget = e.currentTarget as HTMLElement;
+        const clickText = currentTarget.matches('dx-card-title') ? this.header : this.ctaTitle;
+        this.handleHrefClick(e, {
+            clickText,
+            clickUrl: this.ctaHref,
+            label: this.label,
+            title: this.header,
+            subtitle: this.subtitle,
+        });
+    }
+
+    private handleHrefClick(e: MouseEvent, payload: Record<string, string>) {
+        const target = e.currentTarget as HTMLElement;
+        track(target, 'card_clicked', {
+            ...payload,
+        });
+    }
+}