@salesforcedevs/arch-components 1.20.17-alpha9 → 1.25.0

package/src/modules/arch/cardNew/cardNew.css

@@ -0,0 +1,31 @@
+@import 'dxHelpers/text';
+@import 'dxHelpers/card';
+
+dx-card-title::part(title) {
+    margin-bottom: var(--arch-spacing-4);
+}
+
+.body {
+    display: flex;
+    flex-direction: column;
+}
+
+/* The bottom item gets arch-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(--arch-spacing-10);
+}
+
+.body.pill-top .pill,
+.body.pill-bottom .subtitle {
+    margin-bottom: var(--arch-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(--arch-spacing-4);
+}

package/src/modules/arch/cardNew/cardNew.html

@@ -0,0 +1,32 @@
+<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}>
+            <arch-badge class="pill" lwc:if={pill} color="blue">
+                {pill}
+            </arch-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/arch/cardNew/cardNew.ts

@@ -0,0 +1,66 @@
+import { api, LightningElement } from "lwc";
+import { track } from 'arch/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,
+        });
+    }
+}

package/src/modules/arch/children/children.html

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

package/src/modules/arch/children/children.ts

@@ -0,0 +1,31 @@
+import { track, LightningElement } from 'lwc';
+
+export abstract class ChildrenElement<T> extends LightningElement {
+    private observer!: MutationObserver;
+
+    @track items: T[] = [];
+    abstract extractor: (element: Element) => T;
+
+    connectedCallback() {
+        this.observer = new MutationObserver(() => {
+            this.setItems();
+        });
+        this.observer.observe(this.template.host, {
+            childList: true,
+            subtree: true
+        });
+        this.setItems();
+    }
+
+    disconnectedCallback() {
+        this.observer.disconnect();
+    }
+
+    setItems() {
+        this.items = Array.from(this.template.host.children).map(
+            this.extractor
+        );
+    }
+}
+
+export default ChildrenElement;

package/src/modules/arch/color/color.ts

@@ -0,0 +1,59 @@
+export function hexToRGB(h: string) {
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    if (h.length === 4) {
+        r = +('0x' + h[1] + h[1]);
+        g = +('0x' + h[2] + h[2]);
+        b = +('0x' + h[3] + h[3]);
+    } else if (h.length === 7) {
+        r = +('0x' + h[1] + h[2]);
+        g = +('0x' + h[3] + h[4]);
+        b = +('0x' + h[5] + h[6]);
+    }
+    return [r, g, b];
+}
+
+export function RGBToHSL(r: number, g: number, b: number) {
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    const cmin = Math.min(r, g, b);
+    const cmax = Math.max(r, g, b);
+    const delta = cmax - cmin;
+    let h = 0;
+    let s = 0;
+    let l = 0;
+    if (delta === 0) {
+        h = 0;
+    } else if (cmax === r) {
+        h = ((g - b) / delta) % 6;
+    } else if (cmax === g) {
+        h = (b - r) / delta + 2;
+    } else {
+        h = (r - g) / delta + 4;
+    }
+    h = Math.round(h * 60);
+    if (h < 0) {
+        h += 360;
+    }
+    l = (cmax + cmin) / 2;
+    s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+    s = +s.toFixed(1);
+    l = +l.toFixed(1);
+    return [h, s, l];
+}
+
+export function rgb(r: number, g: number, b: number) {
+    return `rgb(${r},${g},${b})`;
+}
+
+export function hsl(h: number, s: number, l: number) {
+    return `hsl(${h},${s * 100}%,${l * 100}%)`;
+}
+
+export function lightenHex(hex: string, by: number) {
+    const [r, g, b] = hexToRGB(hex);
+    const [h, s, l] = RGBToHSL(r, g, b);
+    return hsl(h, s, l + by);
+}