@salesforcedevs/arch-components 1.20.17-alpha4 → 1.20.17-alpha5

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

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

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

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

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

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

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

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

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

@@ -1,66 +0,0 @@
-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,
-        });
-    }
-}