@salesforcedevs/dx-components 0.0.0

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,56 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/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);
+    text-transform: uppercase;
+    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 "dxHelpers/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 "dxUtils/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,52 @@
+@import "dxHelpers/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);
+}
+
+.background-small {
+    --dx-c-icon-badge-size: var(--dx-g-spacing-lg);
+}
+
+.background-medium {
+    --dx-c-icon-badge-size: var(--dx-g-spacing-xl);
+}
+
+.background-large {
+    --dx-c-icon-badge-size: var(--dx-g-spacing-3xl);
+}

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

@@ -0,0 +1,5 @@
+<template>
+    <div class={className} style={style} part="badge">
+        <dx-icon symbol={symbol} sprite={sprite} size={iconSize}></dx-icon>
+    </div>
+</template>

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

@@ -0,0 +1,52 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { IconSprite, IconSymbol, IconBadgeShape } from "typings/custom";
+import { toDxColor } from "dxUtils/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;
+    @api backgroundSize?: string;
+    @api iconSize?: string = "override";
+
+    _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}`,
+            this.backgroundSize && `background-${this.backgroundSize}`
+        );
+    }
+
+    get style() {
+        const color = this.color
+            ? `--dx-c-icon-badge-color: ${toDxColor(this.color)};`
+            : "";
+        const backgroundColor = this.backgroundColor
+            ? `background-color: ${toDxColor(this.backgroundColor)};`
+            : "";
+
+        return `${color}${backgroundColor}`;
+    }
+}

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

@@ -0,0 +1,54 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/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}`;
+    }
+}

package/src/modules/dx/input/input.css

@@ -0,0 +1,181 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-input-background-active: white;
+    --dx-c-input-background: white;
+    --dx-c-input-border-active: 2px solid var(--dx-g-blue-vibrant-50);
+    --dx-c-input-border-radius: var(--dx-g-spacing-xs);
+    --dx-c-input-border: 1px solid var(--dx-g-gray-90);
+    --dx-c-input-boxshadow-active: none;
+    --dx-c-input-height: var(--dx-g-spacing-3xl);
+    --dx-c-input-icon-color: var(--dx-g-gray-50);
+    --dx-c-input-padding: none;
+    --dx-c-input-width: 376px;
+
+    max-width: 100%;
+}
+
+.input-group.size-small {
+    --dx-c-input-height: var(--dx-g-spacing-xl);
+}
+
+.input-group {
+    --error-color: var(--dx-g-red-vibrant-50);
+
+    height: var(--dx-c-input-height);
+    width: var(--dx-c-input-width);
+    max-width: inherit;
+    display: flex;
+    flex-direction: row;
+}
+
+.input-group > *:not(:last-child) {
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+.input-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    height: inherit;
+    font-size: var(--dx-g-text-sm);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-gray-50);
+    border: var(--dx-c-input-border);
+    border-radius: var(--dx-c-input-border-radius);
+    transition: var(--dx-g-transition-hue-1x),
+        var(--dx-g-transition-box-shadow-1x);
+    background: var(--dx-c-input-background);
+    padding: var(--dx-c-input-padding);
+    flex-grow: 1;
+}
+
+.input-container.has-floating-item {
+    padding-right: var(--dx-g-spacing-sm);
+}
+
+.input-container.state-focused {
+    background: var(--dx-c-input-background-active);
+    box-shadow: var(--dx-c-input-boxshadow-active);
+}
+
+.input-container.state-focused:not(.has-error) {
+    border: var(--dx-c-input-border-active);
+}
+
+.input-container > dx-icon {
+    color: var(--dx-c-input-icon-color);
+    margin-left: var(--dx-g-spacing-sm);
+}
+
+.input-container > dx-button {
+    margin: 0 var(--dx-g-spacing-sm);
+}
+
+input {
+    height: 100%;
+    width: 100%;
+    min-width: 0;
+    border: none;
+    padding: 0 var(--dx-g-spacing-md);
+    border-radius: var(--dx-g-spacing-xs);
+    font-size: inherit;
+    font-family: inherit;
+    color: var(--dx-g-gray-10);
+    caret-color: var(--dx-g-blue-vibrant-50);
+    text-overflow: ellipsis;
+    transition: var(--dx-g-transition-hue-1x);
+    outline: none;
+    background: none;
+}
+
+label {
+    color: var(--sds-g-gray-11);
+    display: inline-block;
+    font-size: var(--dx-g-text-xs);
+    hyphens: auto;
+    margin-bottom: var(--dx-g-spacing-2xs);
+    padding-right: var(--dx-g-spacing-sm);
+    padding-top: var(--dx-g-spacing-xs);
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-hyphens: auto;
+    -webkit-hyphens: auto;
+}
+
+.input-group.size-small input {
+    padding: 0 var(--dx-g-spacing-sm);
+}
+
+input::placeholder {
+    color: var(--dx-g-gray-30);
+}
+
+.input-container > img {
+    position: absolute;
+    z-index: 2;
+    height: var(--dx-g-spacing-sm);
+    top: calc(50% - var(--dx-g-spacing-xs));
+    right: var(--dx-g-spacing-sm);
+    pointer-events: none;
+}
+
+.shortcut {
+    align-items: center;
+    display: flex;
+    flex-shrink: 0;
+    flex-direction: row;
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    color: var(--dx-g-gray-50);
+    line-height: var(--dx-g-text-base);
+    text-transform: uppercase;
+}
+
+.description {
+    margin-top: var(--dx-g-spacing-xs);
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    line-height: 18px;
+    color: var(--dx-g-gray-50);
+}
+
+.description.hide {
+    display: none;
+}
+
+.description a {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.shortcut > img {
+    margin-right: var(--dx-g-spacing-2xs);
+}
+
+.has-error {
+    background-clip: padding-box;
+    border: 2px solid var(--error-color);
+}
+
+.has-error.state-focused {
+    box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
+    -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
+}
+
+.error-message-box {
+    margin-top: var(--dx-g-spacing-xs);
+    display: block;
+}
+
+.clear-button > dx-icon {
+    --dx-c-icon-color: var(--sds-g-gray-9);
+}
+
+.clear-button > dx-icon::part(svg) {
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+.clear-button:hover > dx-icon {
+    --dx-c-icon-color: var(--dx-g-blue-vibrant-30);
+}