@salesforcedevs/arch-components 1.20.17-alpha8 → 1.25.0

package/src/modules/arch/badge/badge.html

@@ -0,0 +1,5 @@
+<template>
+    <span class={className}>
+        <slot></slot>
+    </span>
+</template>

package/src/modules/arch/badge/badge.ts

@@ -0,0 +1,9 @@
+import { LightningElement, api } from 'lwc';
+
+export default class extends LightningElement {
+    @api color: string = 'fog';
+
+    get className() {
+        return `badge ${this.color}`;
+    }
+}

package/src/modules/arch/button/button.css

@@ -0,0 +1 @@
+@import 'arch/buttonStyles';

package/src/modules/arch/button/button.html

@@ -0,0 +1,20 @@
+<template>
+    <button
+        name="arch-button"
+        onclick={handleInteraction}
+        aria-label={ariaLabel}
+        aria-live={ariaLive}
+        aria-pressed={ariaPressed}
+        class={className}
+        disabled={disabled}
+        type={type}
+    >
+        <arch-icon
+            if:true={hasSpinner}
+            symbol="spinner"
+            class="spinner"
+            size="small"
+        ></arch-icon>
+        <slot></slot>
+    </button>
+</template>

package/src/modules/arch/button/button.ts

@@ -0,0 +1,67 @@
+import { api, LightningElement } from "lwc";
+import {
+    attrToBool,
+    sendInteractionEvent,
+    InteractionEventTypes
+} from "arch/helpers";
+
+export type Size = "small" | "medium" | "large";
+export type Variant =
+    | "neutral"
+    | "brand"
+    | "success"
+    | "destructive"
+    | "destructive-inverse"
+    | "bare"
+    | "border-filled";
+
+export default class extends LightningElement {
+    @api ariaLabel: string | null = null;
+    @api ariaLive: string | null = null;
+    @api ariaPressed: string | null = null;
+    @api disabled: boolean | null = null;
+    @api type: "submit" | null = null;
+    @api variant: Variant = "neutral";
+    @api size: Size = "medium";
+    @api spinner: boolean = false;
+
+    private get hasSpinner() {
+        return attrToBool(this.spinner);
+    }
+
+    get sizeClassName() {
+        return (["small", "large"] as Size[]).includes(this.size)
+            ? `button-${this.size}`
+            : "";
+    }
+
+    private get className() {
+        return [
+            "button",
+            createVariantClassName(this.variant),
+            this.sizeClassName,
+            attrToBool(this.disabled) ? "button-disabled" : false
+        ]
+            .filter(Boolean)
+            .join(" ");
+    }
+    handleInteraction(event) {
+        sendInteractionEvent(
+            "Button Click",
+            InteractionEventTypes.CLICK,
+            event
+        );
+    }
+}
+
+export function createVariantClassName(variant: Variant) {
+    const DENY_LIST = [
+        "neutral",
+        "destructive-inverse",
+        "bare",
+        "border-filled"
+    ];
+    return `button-${variant} ${
+        !DENY_LIST.includes(variant) ? "button-variant" : ""
+    }`;
+}

package/src/modules/arch/buttonLink/buttonLink.css

@@ -0,0 +1 @@
+@import 'arch/buttonStyles';

package/src/modules/arch/buttonLink/buttonLink.html

@@ -0,0 +1,19 @@
+<template>
+    <a
+        aria-label={ariaLabel}
+        aria-live={ariaLive}
+        class={className}
+        disabled={disabled}
+        href={href}
+        rel={rel}
+        target={target}
+    >
+        <arch-icon
+            if:true={hasSpinner}
+            symbol="spinner"
+            class="spinner"
+            size="small"
+        ></arch-icon>
+        <slot></slot>
+    </a>
+</template>

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

@@ -0,0 +1,34 @@
+import { html } from "lit-html";
+
+export default {
+    title: "arch/arch-button-link",
+    component: "sb-arch-button-link"
+};
+
+// prettier-ignore
+const createStyles = () => html `
+    <style>
+        sb-arch-button-link {
+            display: block;
+        }
+    </style>`;
+
+// prettier-ignore
+export const Base = () => html` ${createStyles()}
+    <sb-arch-button-link href="/">Link</sb-arch-button-link>
+`;
+
+// prettier-ignore
+export const Small = () => html` ${createStyles()}
+    <sb-arch-button-link size="small" href="/">Link</sb-arch-button-link>
+`;
+
+// prettier-ignore
+export const Large = () => html` ${createStyles()}
+    <sb-arch-button-link size="large" href="/">Link</sb-arch-button-link>
+`;
+
+// prettier-ignore
+export const Disabled = () => html` ${createStyles()}
+    <sb-arch-button-link href="/" disabled>Link</sb-arch-button-link>
+`;

package/src/modules/arch/buttonLink/buttonLink.ts

@@ -0,0 +1,8 @@
+import { api } from 'lwc';
+import Button from 'arch/button';
+
+export default class extends Button {
+    @api href: string | null = null;
+    @api rel: string | null = null;
+    @api target: '_self' | '_blank' | '_parent' | '_top' | null = null;
+}

package/src/modules/arch/buttonStyles/buttonStyles.css

@@ -0,0 +1,220 @@
+@import "arch/reset";
+
+:host {
+    display: inline-flex;
+
+    --dark-1: 5%;
+    --dark-2: 15%;
+
+    color: var(--arch-color-meteorite);
+}
+
+.button {
+    align-items: center;
+    appearance: none;
+    border: 1px solid transparent;
+    background-color: transparent;
+    border-radius: var(--arch-spacing-1);
+    color: inherit;
+    cursor: pointer;
+    display: flex;
+    width: 100%;
+    justify-content: center;
+    font-weight: bold;
+    line-height: 1.25;
+    font-size: var(--arch-font-size-sm);
+    padding: calc(var(--arch-spacing-3) * 0.8333) var(--arch-spacing-4);
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+}
+
+.button-variant {
+    background-color: hsl(
+        var(--color-bg-h) var(--color-bg-s) var(--color-bg-l)
+    );
+    border: 1px solid hsl(var(--color-bg-h) var(--color-bg-s) var(--color-bg-l));
+    box-shadow: 0 1px 0
+        hsl(
+            var(--color-bg-h) var(--color-bg-s)
+                calc(var(--color-bg-l) - var(--dark-2))
+        );
+    color: var(--color);
+}
+
+.button-variant:hover:not(.button-disabled),
+.button-variant:focus:not(.button-disabled),
+.button-variant:active:not(.button-disabled) {
+    color: var(--color);
+}
+
+.button-variant:hover:not(.button-disabled),
+.button-variant:focus:not(.button-disabled) {
+    background-color: hsl(
+        var(--color-bg-h) var(--color-bg-s)
+            calc(var(--color-bg-l) - var(--dark-1))
+    );
+    border-color: hsl(
+        var(--color-bg-h) var(--color-bg-s)
+            calc(var(--color-bg-l) - var(--dark-1))
+    );
+}
+
+.button-variant:active:not(.button-disabled) {
+    background-color: hsl(
+        var(--color-bg-h) var(--color-bg-s)
+            calc(var(--color-bg-l) - var(--dark-2))
+    );
+    border-color: hsl(
+        var(--color-bg-h) var(--color-bg-s)
+            calc(var(--color-bg-l) - var(--dark-2))
+    );
+    box-shadow: 0 1px 0
+            hsl(
+                var(--color-bg-h) var(--color-bg-s)
+                    calc(var(--color-bg-l) - var(--dark-2))
+            ),
+        0 0 4px hsl(var(--color-bg-h) var(--color-bg-s) var(--color-bg-l));
+}
+
+.button-neutral {
+    color: var(--arch-color-brand);
+    background-color: var(--arch-color-white);
+    box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 5%), 0 2px 0 hsl(0deg 0% 0% / 5%);
+}
+
+.button-neutral:hover:not(.button-disabled),
+.button-neutral:focus:not(.button-disabled) {
+    background-color: var(--arch-color-sand);
+}
+
+.button-neutral:active:not(.button-disabled) {
+    background-color: var(--arch-color-fog);
+    color: var(--arch-color-meteorite);
+}
+
+.button-bare:hover:not(.button-disabled),
+.button-bare:focus:not(.button-disabled) {
+    background-color: var(--arch-color-sand);
+    color: hsl(
+        var(--arch-color-meteorite-h) var(--arch-color-meteorite-s)
+            calc(var(--arch-color-meteorite-l) - var(--dark-1))
+    );
+}
+
+.button-border-filled {
+    background-color: var(--arch-color-white);
+    border-color: var(--arch-color-fog);
+    box-shadow: 0 1px 0 0 hsl(0deg 0% 0% / 10%);
+}
+
+.button-border-filled:hover:not(.button-disabled),
+.button-border-filled:focus:not(.button-disabled) {
+    background-color: var(--arch-color-sand);
+    color: hsl(
+        var(--arch-color-meteorite-h) var(--arch-color-meteorite-s)
+            calc(var(--arch-color-meteorite-l) - var(--dark-1))
+    );
+}
+
+.button-bare:active:not(.button-disabled),
+.button-border-filled:active:not(.button-disabled) {
+    background-color: var(--arch-color-fog);
+    color: hsl(
+        var(--arch-color-meteorite-h) var(--arch-color-meteorite-s)
+            calc(var(--arch-color-meteorite-l) - var(--dark-1))
+    );
+}
+
+.button-brand {
+    --color: var(--arch-color-white);
+    --color-bg-h: var(--arch-color-brand-h);
+    --color-bg-s: var(--arch-color-brand-s);
+    --color-bg-l: var(--arch-color-brand-l);
+}
+
+.button-success {
+    --color: var(--arch-color-white);
+    --color-bg-h: var(--arch-color-success-h);
+    --color-bg-s: var(--arch-color-success-s);
+    --color-bg-l: var(--arch-color-success-l);
+}
+
+.button-destructive {
+    --color: var(--arch-color-white);
+    --color-bg-h: var(--arch-color-destructive-h);
+    --color-bg-s: var(--arch-color-destructive-s);
+    --color-bg-l: var(--arch-color-destructive-l);
+}
+
+.button-destructive-inverse {
+    color: var(--arch-color-destructive);
+    background-color: var(--arch-color-white);
+    border-color: transparent;
+    box-shadow: 0 0 0 1px hsl(0deg 0% 0% / 5%), 0 2px 0 hsl(0deg 0% 0% / 5%);
+}
+
+.button-destructive-inverse:hover:not(.button-disabled),
+.button-destructive-inverse:focus:not(.button-disabled) {
+    color: var(--arch-color-destructive);
+    background-color: var(--arch-color-sand);
+    border-color: transparent;
+}
+
+.button-destructive-inverse:active:not(.button-disabled) {
+    color: var(--arch-color-meteorite);
+    background-color: var(--arch-color-fog);
+    border-color: transparent;
+}
+
+.button-disabled {
+    background: var(--arch-color-fog);
+    border-color: var(--arch-color-fog);
+    box-shadow: 0 1px 0 var(--arch-color-fog);
+    color: var(--arch-color-granite);
+    cursor: not-allowed;
+    pointer-events: none;
+    outline: none;
+}
+
+.button-small {
+    font-size: var(--arch-font-size-sm);
+    padding: var(--arch-spacing-2) var(--arch-spacing-4);
+}
+
+.button-large {
+    font-size: var(--arch-font-size-md);
+    padding: var(--arch-spacing-3) var(--arch-spacing-5);
+}
+
+.button[data-icon-size] {
+    padding: 0;
+}
+
+.button[data-icon-size="small"] {
+    padding: calc(var(--arch-spacing-2) + 0.75px);
+}
+
+.button[data-icon-size="medium"] {
+    padding: calc(var(--arch-spacing-2) + 1px);
+}
+
+.button[data-icon-size="large"] {
+    padding: calc(var(--arch-spacing-2) + 2px);
+}
+
+.spinner {
+    margin-right: var(--arch-spacing-2);
+    margin-left: calc(var(--arch-spacing-1) * -1);
+    animation: rotation 2s infinite linear;
+}
+
+@keyframes rotation {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(359deg);
+    }
+}

package/src/modules/arch/card/card.css

@@ -0,0 +1,128 @@
+@import "arch/reset";
+@import "arch/cardBase";
+
+:host {
+    height: 100%;
+}
+
+a {
+    color: var(--arch-color-brand);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+.card {
+    display: flex;
+}
+
+.content {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    color: var(--arch-color-black);
+}
+
+.content-inner {
+    flex: 1;
+}
+
+.pretitle {
+    font-size: var(--arch-font-size-sm);
+    color: var(--arch-color-meteorite);
+    padding-bottom: var(--arch-spacing-1);
+}
+
+.title {
+    font-size: var(--arch-font-size-lg);
+    font-weight: bold;
+}
+
+.description {
+    margin-top: var(--arch-spacing-3);
+    line-height: var(--arch-line-height-normal);
+}
+
+.cta {
+    font-weight: bold;
+    margin-top: var(--arch-spacing-3);
+    display: block;
+}
+
+div.image {
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+}
+
+img.image {
+    max-width: 90%;
+    max-height: 100px;
+}
+
+.card[data-href] .image {
+    cursor: pointer;
+}
+
+.card:not([data-image]),
+.card[data-image=""] {
+    padding: var(--arch-spacing-6);
+}
+
+.card[data-image^="top"] {
+    flex-direction: column-reverse;
+}
+
+.card[data-image^="top"] .content {
+    padding: var(--arch-spacing-6);
+}
+
+.card[data-image="top-cover"] .image {
+    height: 0;
+    border-top-left-radius: var(--arch-radius-lg);
+    border-top-right-radius: var(--arch-radius-lg);
+}
+
+.card[data-image="top-small"] .image {
+    align-self: flex-start;
+    margin: var(--arch-spacing-6) var(--arch-spacing-6) 0 var(--arch-spacing-6);
+    max-height: 75px;
+}
+
+.card[data-image="right-cover"] {
+    align-items: stretch;
+    padding: var(--arch-spacing-6);
+}
+
+.card[data-image="right-cover"] .image {
+    flex: 1;
+    align-self: stretch;
+    border-radius: var(--arch-radius-lg);
+    margin-left: var(--arch-spacing-6);
+}
+
+.card[data-image="left-cover"] {
+    align-items: top;
+    flex-direction: row-reverse;
+    padding: var(--arch-spacing-6);
+}
+
+.card[data-image="left-cover"] .image {
+    align-self: stretch;
+    border-radius: var(--arch-radius-lg);
+    flex: 1;
+    margin-right: var(--arch-spacing-6);
+}
+
+.card[data-image="left-small"] {
+    align-items: flex-start;
+    flex-direction: row-reverse;
+    padding: var(--arch-spacing-6);
+}
+
+.card[data-image="left-small"] .image {
+    width: 50px;
+    margin-right: var(--arch-spacing-6);
+}

package/src/modules/arch/card/card.html

@@ -0,0 +1,85 @@
+<template>
+    <article
+        class="card card-base"
+        data-href={ctaHref}
+        data-image={imgVariantResponsive}
+        role="article"
+        aria-labelledby={cardTitleId}
+        tabindex="0"
+        onkeydown={handleCardKeydown}
+    >
+        <div class="content">
+            <div class="content-inner">
+                <template if:true={pretitle}>
+                    <p class="pretitle">{pretitle}</p>
+                </template>
+                <template if:true={pretitleHref}>
+                    <p><a href={pretitleHref}>{pretitleHrefText}</a></p>
+                </template>
+                <h3 class="title" id={cardTitleId}>{title}</h3>
+                <p if:true={description} class="description">{description}</p>
+            </div>
+            <a
+                if:true={ctaTitle}
+                class="cta"
+                name={ctaTitleId}
+                id={ctaTitleId}
+                href={ctaHref}
+                target={ctaTarget}
+                aria-label={assistiveText}
+                onclick={trackLinkClick}
+                rel={rel}
+            >
+                {ctaTitle}
+                <img
+                    if:true={isExternalHref}
+                    src="https://a.sfdcstatic.com/developer-website/images/architect/new_window.svg"
+                    style="display: inline; height: 1rem; margin: 0 0 0 5px"
+                    alt="Open link in new window"
+                    aria-label="Open link in new window"
+                />
+            </a>
+        </div>
+        <template if:true={imgSrc}>
+            <div
+                name={ctaHref}
+                id={imageDivId}
+                class="image"
+                if:false={imgTag}
+                onclick={onImageClick}
+                style={imgStyle}
+                data-href={ctaHref}
+            ></div>
+            <picture if:true={imgTagNoSvg}>
+                <template if:false={isRemoteImage}>
+                    <source srcset={imgSrcSetWebP} />
+                    <source srcset={imgSrcSetJpg} />
+                </template>
+                <img
+                    name={ctaHref}
+                    id={imageImgId}
+                    class="image"
+                    if:true={imgTag}
+                    onclick={onImageClick}
+                    style={imgStyle}
+                    src={imgSrc}
+                    alt={imageAltText}
+                    loading="lazy"
+                    decoding="async"
+                />
+            </picture>
+            <img
+                name={ctaHref}
+                id={imageSvgId}
+                class="image"
+                if:true={imgTagSvg}
+                onclick={onImageClick}
+                style={imgStyle}
+                src={imgSrc}
+                alt={description}
+                loading="lazy"
+                decoding="async"
+            />
+        </template>
+    </article>
+</template>