@salesforcedevs/arch-components 1.20.17-alpha13 → 1.20.17-alpha15

package/src/modules/arch/cardBase/cardBase.css

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

package/src/modules/arch/cardBase/cardBase.html

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

package/src/modules/arch/cardGridA/cardGridA.css

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

package/src/modules/arch/cardGridA/cardGridA.html

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

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

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

package/src/modules/arch/cardGridA/cardGridA.ts

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

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

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

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

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

package/src/modules/arch/cardGridC/cardGridC.ts

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

package/src/modules/arch/cardGridD/cardGridD.css

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

package/src/modules/arch/cardGridD/cardGridD.html

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

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

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

package/src/modules/arch/cardGridD/cardGridD.ts

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

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);
+}