@salesforcedevs/dx-components 0.26.1-alpha0.6 → 0.27.0

package/src/modules/dx/helmet/helmet.css

@@ -0,0 +1,83 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+span {
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-2xs);
+    color: var(--dx-c-breadcrumb-color);
+    margin-top: 0.5px;
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+nav > *:not(:last-child) {
+    margin-right: 6px;
+}
+
+nav a,
+nav span {
+    transition: var(--dx-g-transition-hue-1x);
+    display: flex;
+    align-items: center;
+}
+
+a:hover {
+    transition: var(--dx-g-transition-hue-1x);
+    color: var(--dx-c-breadcrumb-hover-color);
+}
+
+.home-link {
+    flex-shrink: 0;
+    margin-right: var(--dx-g-spacing-xs);
+}
+
+.home-link > .home-link-title {
+    color: var(--dx-c-home-link-color);
+    line-height: 18px;
+}
+
+.home-link > svg {
+    margin-right: 12px;
+    width: 18px;
+}
+
+.helmet {
+    height: var(--dx-g-spacing-xl);
+    position: relative;
+}
+
+.helmet.variant_clear {
+    background-color: white;
+
+    --dx-c-home-link-color: var(--dx-g-blue-natural-10);
+    --dx-c-breadcrumb-color: var(--dx-g-gray-50);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
+}
+
+.helmet.variant_dark {
+    background-color: var(--dx-g-blue-vibrant-40);
+
+    --dx-c-home-link-color: white;
+    --dx-c-breadcrumb-color: var(--dx-g-blue-vibrant-90);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-80);
+}
+
+.helmet.variant_light {
+    background-color: var(--dx-g-cloud-blue-vibrant-95);
+
+    --dx-c-home-link-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-breadcrumb-color: var(--dx-g-gray-30);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
+}
+
+.helmet.variant_neutral {
+    background-color: var(--dx-g-gray-95);
+
+    --dx-c-home-link-color: var(--dx-g-gray-30);
+    --dx-c-breadcrumb-color: var(--dx-g-gray-50);
+    --dx-c-breadcrumb-hover-color: var(--dx-g-cloud-blue-vibrant-40);
+}

package/src/modules/dx/helmet/helmet.html

@@ -0,0 +1,39 @@
+<template>
+    <div class={className} style={style}>
+        <nav role="navigation" class="helmet-title">
+            <a
+                href="https://developer.salesforce.com"
+                class="home-link"
+                alt={titleAlt}
+            >
+                <svg
+                    width="28px"
+                    height="20px"
+                    viewBox="0 0 28 20"
+                    version="1.1"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <title>{title}</title>
+                    <g
+                        id="Section-/-Nav-/-Footer-/-Architects"
+                        transform="translate(-148.000000, -447.000000)"
+                    >
+                        <path
+                            d="M163.003774,447.648649 C164.8,447.648649 166.384906,448.675676 167.230189,450.189189 C167.969811,449.864865 168.762264,449.648649 169.607547,449.648649 C172.883019,449.648649 175.524528,452.351351 175.524528,455.702703 C175.524528,459.054054 172.883019,461.756757 169.607547,461.756757 C169.184906,461.756757 168.815094,461.702703 168.445283,461.648649 C167.70566,463 166.279245,463.918919 164.641509,463.918919 C163.954717,463.918919 163.320755,463.756757 162.739623,463.486486 C162,465.27027 160.256604,466.513514 158.196226,466.513514 C156.083019,466.513514 154.233962,465.162162 153.54717,463.216216 C153.230189,463.27027 152.913208,463.324324 152.596226,463.324324 C150.060377,463.324324 148,461.216216 148,458.621622 C148,456.891892 148.898113,455.378378 150.271698,454.567568 C150.007547,453.918919 149.849057,453.162162 149.849057,452.405405 C149.849057,449.432432 152.226415,447 155.184906,447 C157.033962,447.054054 158.566038,447.864865 159.516981,449.162162 C160.415094,448.243243 161.630189,447.648649 163.003774,447.648649 Z"
+                            id="Path"
+                            fill="#00A1E0"
+                        ></path>
+                    </g>
+                </svg>
+                <span class="home-link-title">{title}</span>
+            </a>
+            <span>/</span>
+            <span if:true={currentPropertyHref}>
+                <a href={currentPropertyHref} alt={currentPropertyAlt}>
+                    {currentPropertyTitle}
+                </a>
+            </span>
+            <span if:false={currentPropertyHref}>{currentPropertyTitle}</span>
+        </nav>
+    </div>
+</template>

package/src/modules/dx/helmet/helmet.ts

@@ -0,0 +1,27 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { HelmetVariant } from "typings/custom";
+
+export default class Helmet extends LightningElement {
+    @api title: string = "Salesforce";
+    @api currentPropertyTitle: string = "Heroku";
+    @api currentPropertyHref?: string;
+    @api variant: HelmetVariant = "neutral";
+    @api horizontalPadding: string = "20px";
+
+    private get style() {
+        return `padding: 0 ${this.horizontalPadding};`;
+    }
+
+    private get titleAlt() {
+        return `Link to ${this.title}`;
+    }
+
+    private get currentPropertyAlt() {
+        return `Link to ${this.currentPropertyTitle}`;
+    }
+
+    private get className() {
+        return cx("helmet", `variant_${this.variant}`);
+    }
+}

package/src/modules/dx/hr/hr.css

@@ -0,0 +1,55 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+:host {
+    --dx-c-hr-padding-horizontal: var(--dx-g-page-padding-horizontal);
+}
+
+p,
+h2 {
+    display: flex;
+    flex-direction: row;
+    padding: 0 var(--dx-c-hr-padding-horizontal);
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-sm);
+    color: var(--dx-g-blue-vibrant-20);
+    letter-spacing: 0;
+    line-height: 18px;
+}
+
+p::before,
+h2::before,
+p::after,
+h2::after {
+    transform: translateY(-2px); /* offset for display font ghost padding */
+    content: "";
+    flex: 1 1;
+    border-bottom: 2px solid var(--dx-g-gray-95);
+    margin: auto;
+    margin-right: 0;
+    margin-left: 0;
+}
+
+h2::before {
+    margin-right: var(--dx-g-spacing-md);
+}
+
+h2::after {
+    margin-left: var(--dx-g-spacing-md);
+}
+
+dx-button {
+    display: flex;
+    width: 100%;
+    text-transform: uppercase;
+    padding: 0 var(--dx-c-hr-padding-horizontal);
+}
+
+dx-button::before {
+    content: "";
+    border-bottom: 2px solid var(--dx-g-gray-95);
+    flex: 1 1;
+    transform: translateY(-2px); /* offset for display font ghost padding */
+    margin: auto;
+    margin-right: var(--dx-g-spacing-md);
+}

package/src/modules/dx/hr/hr.html

@@ -0,0 +1,23 @@
+<template>
+    <p if:true={isSeparator} part="hr" role="separator" style={style}></p>
+    <h2 if:true={isHeading} part="hr" style={style}>{text}</h2>
+    <dx-button
+        if:true={isLink}
+        href={href}
+        icon-symbol="forward"
+        style={style}
+        target={target}
+        variant="inline"
+    >
+        {text}
+    </dx-button>
+    <dx-button
+        if:true={isLoadMore}
+        icon-symbol="arrowdown"
+        onclick={handleClick}
+        style={style}
+        variant="inline"
+    >
+        {text}
+    </dx-button>
+</template>

package/src/modules/dx/hr/hr.ts

@@ -0,0 +1,45 @@
+import { LightningElement, api } from "lwc";
+
+import { HrVariant } from "typings/custom";
+
+export default class Hr extends LightningElement {
+    @api text: string | null = null;
+    @api href?: string | null;
+    @api target: string | null = "_top";
+    @api spacing: string | null = "2xl";
+    @api variant: HrVariant | null = null;
+
+    private get ariaRole() {
+        return this.isHeading ? "heading" : "separator";
+    }
+
+    private get style() {
+        return this.spacing
+            ? `margin: var(--dx-g-spacing-${this.spacing}) 0;`
+            : "";
+    }
+
+    private get isButtonVariant() {
+        return this.variant === "link" || this.variant === "load-more";
+    }
+
+    private get isLink() {
+        return this.variant === "link";
+    }
+
+    private get isLoadMore() {
+        return this.variant === "load-more";
+    }
+
+    private get isHeading() {
+        return !this.isButtonVariant && this.text;
+    }
+
+    private get isSeparator() {
+        return !this.isButtonVariant && !this.text;
+    }
+
+    handleClick() {
+        this.dispatchEvent(new CustomEvent("loadmore"));
+    }
+}

package/src/modules/dx/icon/icon.css

@@ -0,0 +1,14 @@
+@import "helpers/reset";
+
+:host {
+    display: block;
+
+    --dx-c-icon-color: currentColor;
+}
+
+svg {
+    display: inherit;
+    fill: var(--dx-c-icon-color);
+    height: var(--dx-c-icon-size);
+    width: var(--dx-c-icon-size);
+}

package/src/modules/dx/icon/icon.html

@@ -0,0 +1,11 @@
+<template>
+    <svg
+        aria-hidden="true"
+        style={style}
+        xmlns="http://www.w3.org/2000/svg"
+        if:true={symbol}
+        part="svg"
+    >
+        <use xlink:href={href}></use>
+    </svg>
+</template>

package/src/modules/dx/icon/icon.ts

@@ -0,0 +1,85 @@
+import { LightningElement, api } from "lwc";
+import { IconSprite, IconSize, IconSymbol } from "typings/custom";
+import { toDxColor } from "utils/css";
+
+const fetches = new Map<string, Promise<any>>();
+
+const sizeMap = {
+    xsmall: "xs",
+    small: "sm",
+    medium: "md",
+    large: "lg",
+    xlarge: "xl",
+    "2xlarge": "2xl"
+};
+
+export default class Icon extends LightningElement {
+    @api sprite: IconSprite = "utility";
+    @api size: IconSize = "small";
+    @api symbol!: IconSymbol;
+    @api color?: string;
+
+    private node: SVGSymbolElement | undefined;
+
+    private get style() {
+        let stylestr = "";
+        if (this.size !== "override" && this.size in sizeMap) {
+            stylestr = `--dx-c-icon-size: var(--dx-g-icon-size-${
+                sizeMap[this.size]
+            });`;
+        }
+        if (this.color) {
+            stylestr = `${stylestr} fill: ${toDxColor(this.color)};`;
+        }
+        return stylestr;
+    }
+
+    private get assetUrl() {
+        return `/assets/icons/${this.sprite}-sprite/svg/symbols.svg`;
+    }
+
+    private get href() {
+        return `${this.assetUrl}#${this.symbol}`;
+    }
+
+    private get symbolId() {
+        return `dx__${this.sprite}__${this.symbol}`;
+    }
+
+    private async appendNodes() {
+        if (this.node && this.node.id === this.symbolId) {
+            return;
+        }
+        await this.fetchSprite(this.sprite);
+        const svg = this.template.querySelector("svg")!;
+        // TODO: Validate a better way
+        // eslint-disable-next-line @lwc/lwc/no-document-query
+        const node = document
+            .getElementById(this.symbolId)!
+            .cloneNode(true) as SVGSymbolElement;
+        while (svg.firstChild) {
+            svg.removeChild(svg.firstChild);
+        }
+        for (const n of Array.from(node.childNodes)) {
+            svg.appendChild(n);
+        }
+        svg.setAttribute("viewBox", node.getAttribute("viewBox")!);
+    }
+
+    private async fetchSprite(sprite: IconSprite) {
+        if (fetches.has(sprite)) {
+            return fetches.get(sprite);
+        }
+        const promise = fetch(this.assetUrl)
+            .then((res) => res.text())
+            .then((svg) => svg.replace(/id="/g, `id="dx__${sprite}__`))
+            .then((svg) => {
+                const node = document.createElement("div");
+                // eslint-disable-next-line @lwc/lwc/no-inner-html
+                node.innerHTML = svg;
+                document.body.appendChild(node);
+            });
+        fetches.set(sprite, promise);
+        return promise;
+    }
+}

package/src/modules/dx/iconBadge/iconBadge.css

@@ -0,0 +1,40 @@
+@import "helpers/reset";
+
+:host {
+    display: block;
+
+    --dx-c-icon-badge-background-color: var(--dx-g-indigo-vibrant-50);
+    --dx-c-icon-badge-box-shadow: none;
+    --dx-c-icon-badge-color: white;
+    --dx-c-icon-badge-icon-size: var(--dx-g-spacing-lg);
+    --dx-c-icon-badge-icon-transform: none;
+    --dx-c-icon-badge-size: var(--dx-g-spacing-3xl);
+    --dx-c-icon-badge-transition: none;
+}
+
+.icon-badge {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--dx-c-icon-badge-size);
+    width: var(--dx-c-icon-badge-size);
+    flex-shrink: 0;
+    background-color: var(--dx-c-icon-badge-background-color);
+    box-shadow: var(--dx-c-icon-badge-box-shadow);
+    transition: var(--dx-c-icon-badge-transition);
+}
+
+dx-icon {
+    --dx-c-icon-size: var(--dx-c-icon-badge-icon-size);
+    --dx-c-icon-color: var(--dx-c-icon-badge-color);
+
+    transform: var(--dx-c-icon-badge-icon-transform);
+}
+
+.shape-circle {
+    border-radius: 50%;
+}
+
+.shape-square {
+    border-radius: var(--dx-g-spacing-sm);
+}

package/src/modules/dx/iconBadge/iconBadge.html

@@ -0,0 +1,10 @@
+<template>
+    <div class={className} style={style}>
+        <dx-icon
+            color={color}
+            symbol={symbol}
+            sprite={sprite}
+            size="override"
+        ></dx-icon>
+    </div>
+</template>

package/src/modules/dx/iconBadge/iconBadge.ts

@@ -0,0 +1,42 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { IconSprite, IconSymbol, IconBadgeShape } from "typings/custom";
+import { toDxColor } from "utils/css";
+
+const validShapes = ["square", "circle"];
+
+export default class IconBadge extends LightningElement {
+    @api sprite: IconSprite = "utility";
+    @api symbol!: IconSymbol;
+    @api color?: string | null = null;
+    @api backgroundColor?: string;
+
+    _shape: IconBadgeShape = "circle";
+    @api
+    get shape() {
+        return this._shape;
+    }
+    set shape(value) {
+        if (!validShapes.includes(value)) {
+            console.error(
+                `[dx-icon-badge] Invalid shape provided "${value}". Shape must be type of: ${validShapes.join(
+                    ", "
+                )}`
+            );
+            this._shape = "circle";
+            return;
+        }
+        this._shape = value;
+    }
+
+    get className() {
+        return cx("icon-badge", `shape-${this.shape}`);
+    }
+
+    get style() {
+        return (
+            this.backgroundColor &&
+            `background-color: ${toDxColor(this.backgroundColor)}`
+        );
+    }
+}

package/src/modules/dx/imageAndLabel/imageAndLabel.css

@@ -0,0 +1,54 @@
+@import "helpers/reset";
+@import "helpers/text";
+@import "helpers/button";
+
+:host {
+    --dx-c-image-and-label-text-color: var(--dx-g-text-label-color);
+}
+
+.container {
+    display: flex;
+    align-items: center;
+}
+
+img {
+    border-radius: 9999px;
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+span {
+    margin-top: 3px;
+    white-space: nowrap;
+}
+
+a img {
+    transition: var(--dx-g-transition-filter-2x);
+}
+
+a span {
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+a:hover img {
+    filter: brightness(90%);
+}
+
+a:hover span {
+    color: var(--dx-g-button-heading-color-hover);
+}
+
+img.size-small {
+    width: var(--dx-g-spacing-lg);
+}
+
+img.size-medium {
+    width: 42px;
+}
+
+img.size-large {
+    width: 52px;
+}
+
+.dx-text-label-1-dark {
+    color: var(--dx-c-image-and-label-text-color);
+}

package/src/modules/dx/imageAndLabel/imageAndLabel.html

@@ -0,0 +1,22 @@
+<template>
+    <div if:false={href} class="container">
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+        />
+        <span class="dx-text-label-1-dark" part="label">{label}</span>
+    </div>
+    <a if:true={href} href={href} class="container">
+        <img
+            if:true={imgSrc}
+            class={imgClass}
+            src={imgSrc}
+            alt={imgAlt}
+            part="image"
+        />
+        <span class="dx-text-label-1-dark" part="label">{label}</span>
+    </a>
+</template>

package/src/modules/dx/imageAndLabel/imageAndLabel.ts

@@ -0,0 +1,16 @@
+import { LightningElement, api } from "lwc";
+
+export default class ImageAndLabel extends LightningElement {
+    @api imgSrc!: string;
+    @api imgSize: "small" | "medium" | "large" = "small";
+    @api label!: string;
+    @api href?: string | null = null;
+
+    private get imgAlt() {
+        return `Avatar for ${this.label}`;
+    }
+
+    private get imgClass() {
+        return `size-${this.imgSize}`;
+    }
+}