@salesforcedevs/dx-components 0.19.3-alpha.4 → 0.20.1

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.19.3-alpha.4",
+    "version": "0.20.1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -28,5 +28,6 @@
         "@types/classnames": "^2.2.10",
         "@types/debounce": "^1.2.0",
         "@types/lodash.get": "^4.4.6"
-    }
+    },
+    "gitHead": "c7eab03d08445c1a6279f9480b7694d7e894e038"
 }

package/src/modules/dx/cardEvent/cardEvent.css

@@ -81,10 +81,6 @@ dx-button {
 }
 
 dx-type-badge {
-    --dx-c-type-badge-border-radius: var(--dx-g-spacing-smd);
-    --dx-c-type-badge-text-transform: capitalize;
-    --dx-c-type-badge-height: var(--dx-g-spacing-lg);
-
     margin-top: var(--dx-g-spacing-sm);
     margin-bottom: var(--dx-g-spacing-sm);
 }

package/src/modules/dx/cardEvent/cardEvent.html

@@ -44,8 +44,9 @@
                         {location}
                     </span>
                     <dx-type-badge
+                        color={brandType}
+                        type="content-type"
                         value={type}
-                        brand={brand}
                         if:true={type}
                     ></dx-type-badge>
                 </div>

package/src/modules/dx/cardEvent/cardEvent.stories.ts

@@ -49,6 +49,7 @@ export const Base = () => html`
         img-alt="Scenic view of a mountain."
         img-src="https://i.imgur.com/FUsyxR5.jpg"
         short-description="Dev Talkies is back in June! Kris Lande, SVP Trailhead Marketing and Trailblazer Relations at Salesforce, is joining us to inspire you and give you an exclusive peek into TrailheaDX."
+        type="Live Event"
     ></dx-card-event>
 
     <dx-card-event

package/src/modules/dx/cardEvent/cardEvent.ts

@@ -36,7 +36,7 @@ export default class CardEvent extends LightningElement {
         this.isLinkHovered = false;
     }
 
-    private get brand() {
-        return this.type === "Webinar" ? "sales" : "service";
+    private get brandType() {
+        return this.type === "Webinar" ? "green" : "red";
     }
 }

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

@@ -122,6 +122,7 @@ input::placeholder {
 }
 
 .shortcut {
+    align-items: center;
     display: flex;
     flex-shrink: 0;
     flex-direction: row;

package/src/modules/dx/treeTile/treeTile.html

@@ -19,7 +19,7 @@
             <dx-type-badge
                 if:true={showMethod}
                 class={badgeClass}
-                size="xs"
+                size="small"
                 value={methodText}
             ></dx-type-badge>
         </div>

package/src/modules/dx/typeBadge/__tests__/typeBadge.test.ts

@@ -1,63 +1,77 @@
 import TypeBadge from "dx/typeBadge";
 import { createRenderComponent } from "utils/tests";
+import { TypeBadgeSize, BadgeType } from "typings/custom";
 
 const TAG = "dx-type-badge";
 const render = createRenderComponent(TAG, TypeBadge);
 
 const value = "banana";
 
+const assertContainerClasses = (
+    container: HTMLElement,
+    type: BadgeType = "metadata",
+    size: TypeBadgeSize = "default"
+) => {
+    expect(container).not.toBeNull();
+    expect(container.classList).toHaveLength(3);
+    expect(container.classList).toContain("typebadge");
+    expect(container.classList).toContain(`typebadge_${type}`);
+    expect(container.classList).toContain(`size-${size}`);
+};
+
 describe(TAG, () => {
     it("renders", () => {
         const element = render({ value });
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el).not.toBeNull();
+        const el: HTMLElement = element.shadowRoot.querySelector(".typebadge");
+        assertContainerClasses(el);
         expect(el.getAttribute("style")).toBe(null);
-        return expect(element).toBeAccessible();
-    });
 
-    it("renders the correct value", () => {
-        const element = render({ value });
-        const span = element.shadowRoot.querySelector("div");
-        expect(span.textContent).toEqual(value);
-        expect(element.getAttribute("style")).toBe(null);
+        const spanLabel = el.querySelector("span");
+        expect(spanLabel?.textContent).toBe(value);
+
         return expect(element).toBeAccessible();
     });
 
-    it("renders medium class by default", () => {
-        const element = render({ value });
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el.className).toContain("size-medium");
+    it("renders a content-type badge and size small", () => {
+        const element = render({ value, type: "content-type", size: "small" });
+        const el: HTMLElement = element.shadowRoot.querySelector(".typebadge");
+        assertContainerClasses(el, "content-type", "small");
         expect(el.getAttribute("style")).toBe(null);
+
         return expect(element).toBeAccessible();
     });
 
-    it("can render small class", () => {
-        const element = render({ size: "small", value });
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el.className).toContain("size-small");
-        expect(el.getAttribute("style")).toBe(null);
-        return expect(element).toBeAccessible();
+    it("renders as default type in case type is falsy", () => {
+        const element = render({ value, type: null });
+        const container = element.shadowRoot.querySelector(".typebadge");
+        assertContainerClasses(container);
+        expect(container.getAttribute("style")).toBe(null);
     });
 
-    it("can render branded badges", () => {
-        const element = render({ size: "small", brand: "industries", value });
+    it("renders with an specific color", () => {
+        const element = render({ value, color: "blue" });
+        const el: HTMLElement = element.shadowRoot.querySelector(".typebadge");
 
-        const el = element.shadowRoot.querySelector(".typebadge");
-        expect(el.className).toContain("size-small");
         expect(el.getAttribute("style")).toContain(
-            `--dx-c-type-badge-color: var(--dx-g-brand-industries-color)`
+            "--background: var(--dx-g-blue-vibrant-95)"
         );
         expect(el.getAttribute("style")).toContain(
-            `--dx-c-type-badge-background: var(--dx-g-brand-industries-color-background);`
+            "--color: var(--dx-g-blue-vibrant-40)"
         );
+
         return expect(element).toBeAccessible();
     });
 
-    it("can render xs class", () => {
-        const element = render({ size: "xs", value });
+    it("can pass a brand as color", () => {
+        const element = render({ color: "industries", value });
+
         const el = element.shadowRoot.querySelector(".typebadge");
-        expect(element.getAttribute("style")).toBe(null);
-        expect(el.className).toContain("size-xs");
+        expect(el.getAttribute("style")).toContain(
+            `--color: var(--dx-g-brand-industries-color)`
+        );
+        expect(el.getAttribute("style")).toContain(
+            `--background: var(--dx-g-brand-industries-color-background)`
+        );
         return expect(element).toBeAccessible();
     });
 });

package/src/modules/dx/typeBadge/typeBadge.css

@@ -1,52 +1,67 @@
 @import "helpers/reset";
 
-:host {
-    --dx-c-type-badge-color: var(--dx-g-blue-vibrant-20);
-    --dx-c-type-badge-background: var(--dx-g-cloud-blue-natural-90);
-    --dx-c-type-badge-text-width: unset;
-    --dx-c-type-badge-border-radius: var(--dx-g-spacing-xs);
-    --dx-c-type-badge-text-transform: uppercase;
-    --dx-c-type-badge-height: var(--dx-g-spacing-xl);
-}
-
 .typebadge {
-    display: flex;
     align-items: center;
+    background: var(--dx-c-type-badge-background, var(--background));
+    border-radius: var(--dx-c-type-badge-border-radius, var(--border-radius));
+    color: var(--dx-c-type-badge-color, var(--color));
+    display: flex;
     justify-content: center;
+    height: var(--dx-c-type-badge-height, var(--height));
+    text-align: center;
+    white-space: nowrap;
     width: min-content;
-    height: var(--dx-c-type-badge-height);
-    padding: 0 var(--dx-g-spacing-md);
-    border-radius: var(--dx-c-type-badge-border-radius);
-    background: var(--dx-c-type-badge-background);
-    color: var(--dx-c-type-badge-color);
-    text-transform: var(--dx-c-type-badge-text-transform);
-    font-size: var(--dx-g-text-xs);
+}
+
+.typebadge.typebadge_metadata {
+    --background: var(--dx-g-cloud-blue-natural-90);
+    --border-radius: var(--dx-g-spacing-xs);
+    --color: var(--dx-g-blue-vibrant-20);
+    --height: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(--dx-g-spacing-sm);
+
     font-family: var(--dx-g-font-display);
-    letter-spacing: 0.7px;
-    white-space: nowrap;
+    font-size: 10px;
+    letter-spacing: 0.6px;
+    text-transform: var(--dx-c-type-badge-text-transform, uppercase);
+    padding: 0 var(--horizontal-spacing);
 }
 
-.typebadge div {
-    text-align: center;
-    transform: translateY(2px);
-    width: var(--dx-c-type-badge-text-width);
+.typebadge.typebadge_content-type {
+    --background: var(--sds-g-gray-3);
+    --border-radius: var(--dx-g-spacing-smd);
+    --color: var(--sds-g-gray-10);
+    --height: var(--dx-g-spacing-lg);
+    --horizontal-spacing: var(--dx-g-spacing-smd);
+    --vertical-spacing: var(--dx-g-spacing-xs);
+
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-xs);
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--vertical-spacing) var(--horizontal-spacing);
 }
 
-.typebadge.size-small {
-    height: var(--dx-g-spacing-md);
-    padding: 0 var(--dx-g-spacing-sm);
+.typebadge.typebadge_content-type.size-small {
+    --height: var(--dx-g-spacing-mlg);
+    --horizontal-spacing: var(--dx-g-spacing-sm);
+
     font-size: 10px;
-    letter-spacing: 0.6px;
 }
 
-.typebadge.size-xs {
-    height: var(--dx-g-spacing-md);
-    padding: 0 var(--dx-g-spacing-xs);
+.typebadge.typebadge_metadata.size-small {
+    --height: var(--dx-g-spacing-md);
+    --horizontal-spacing: var(--dx-g-spacing-xs);
+
     font-size: 8px;
     letter-spacing: 0.5px;
 }
 
-.typebadge.size-xs div {
+.typebadge.typebadge_metadata span {
+    transform: translateY(2px);
+    width: var(--dx-c-type-badge-text-width, unset);
+}
+
+.typebadge.typebadge_metadata.size-small span {
     transform: translateY(1px);
 }
 

package/src/modules/dx/typeBadge/typeBadge.html

@@ -1,5 +1,5 @@
 <template>
     <div class={className} style={style}>
-        <div>{value}</div>
+        <span>{value}</span>
     </div>
 </template>

package/src/modules/dx/typeBadge/typeBadge.stories.ts

@@ -1,15 +1,59 @@
 import { html } from "lit-html";
+import { TypeBadgeColor, TypeBadgeSize, BadgeType } from "typings/custom";
+
+const BADGE_COLOR_OPTIONS: Array<TypeBadgeColor> = [
+    "default",
+    "hot-orange",
+    "orange",
+    "yellow",
+    "green",
+    "teal",
+    "cloud-blue",
+    "blue",
+    "indigo",
+    "purple",
+    "violet",
+    "pink",
+    "red",
+    "analytics",
+    "employees",
+    "marketing",
+    "partners",
+    "commerce",
+    "sales",
+    "success",
+    "integration",
+    "platform",
+    "industries",
+    "learning",
+    "service"
+];
+const SIZE_OPTIONS: Array<TypeBadgeSize> = ["default", "small"];
+const BADGE_TYPE_OPTIONS: Array<BadgeType> = ["metadata", "content-type"];
 
 export default {
     title: "dx/dx-type-badge",
     component: "dx-type-badge",
     argTypes: {
-        value: {
+        color: {
             control: {
-                type: "text"
-            }
+                type: "select"
+            },
+            options: BADGE_COLOR_OPTIONS
+        },
+        type: {
+            control: {
+                type: "select"
+            },
+            options: BADGE_TYPE_OPTIONS
+        },
+        size: {
+            control: {
+                type: "select"
+            },
+            options: SIZE_OPTIONS
         },
-        brand: {
+        value: {
             control: {
                 type: "text"
             }
@@ -19,43 +63,26 @@ export default {
 
 export const Base = (args: any) => html`
     <dx-type-badge
-        value="${args.value || "Developer Experience"}"
-        brand="${args.brand}"
+        value="${args.value}"
+        color="${args.color}"
+        size="${args.size}"
+        type="${args.type}"
     ></dx-type-badge>
 `;
-
-export const Branded = () => html`
-    <dx-type-badge value="industries brand" brand="industries"></dx-type-badge>
-
-    <br />
-
-    <dx-type-badge value="sales brand" brand="sales"></dx-type-badge>
-
-    <br />
-
-    <dx-type-badge value="partners brand" brand="partners"></dx-type-badge>
-
-    <br />
-
-    <dx-type-badge value="invalid brand" brand="invalid"></dx-type-badge>
-`;
-
-export const Small = (args: any) => html`
-    <dx-type-badge
-        size="small"
-        value="${args.value || "Analytics"}"
-    ></dx-type-badge>
-`;
-
-export const XsWithCustomColorAndFixedWidth = (args: any) => html`
-    <dx-type-badge size="xs" value="${args.value || "POST"}"></dx-type-badge>
-`;
+Base.args = {
+    color: BADGE_COLOR_OPTIONS[0],
+    type: BADGE_TYPE_OPTIONS[0],
+    size: SIZE_OPTIONS[0],
+    value: "Developer Experience"
+};
 
 export const CSSHooked = () => html`
     <style>
         .hooks {
             --dx-c-type-badge-color: var(--dx-g-green-vibrant-40);
             --dx-c-type-badge-background: var(--dx-g-green-vibrant-90);
+            --dx-c-type-badge-border-radius: var(--dx-g-spacing-xl);
+            --dx-c-type-badge-height: var(--dx-g-spacing-xl);
         }
         .hookinfo {
             color: gray;
@@ -70,6 +97,14 @@ export const CSSHooked = () => html`
         <b>--dx-c-type-badge-background:</b>
         <i>var(--dx-g-green-vibrant-90);</i>
     </p>
+    <p class="hookinfo">
+        <b>--dx-c-type-badge-border-radius:</b>
+        <i>var(--dx-g-spacing-xl);</i>
+    </p>
+    <p class="hookinfo">
+        <b>--dx-c-type-badge-height:</b>
+        <i>var(--dx-g-spacing-xl);</i>
+    </p>
     <br />
 
     <dx-type-badge

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -1,21 +1,65 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { TypeBadgeSize } from "typings/custom";
-import { Brand } from "typings/custom";
+import {
+    TypeBadgeColor,
+    Color,
+    TypeBadgeSize,
+    BadgeType,
+    Brand
+} from "typings/custom";
+import { colorToDxColors } from "utils/css";
+
+const DEFAULT_TYPE = "typebadge_metadata";
+const VALID_BRANDS: Array<Brand> = [
+    "employees",
+    "marketing",
+    "partners",
+    "commerce",
+    "sales",
+    "success",
+    "integration",
+    "platform",
+    "industries",
+    "learning",
+    "service",
+    "analytics"
+];
 
 export default class TypeBadge extends LightningElement {
-    @api size: TypeBadgeSize = "medium";
+    @api size: TypeBadgeSize = "default";
     @api value: string = "";
-    @api brand?: Brand;
+    @api color?: TypeBadgeColor = "default";
+    @api type?: BadgeType = "metadata";
 
     private get className(): string {
-        return cx("typebadge", `size-${this.size}`);
+        return cx(
+            "typebadge",
+            `size-${this.size}`,
+            (this.type && `typebadge_${this.type}`) || DEFAULT_TYPE
+        );
     }
 
     private get style(): string {
-        if (this.brand) {
-            return `--dx-c-type-badge-color: var(--dx-g-brand-${this.brand}-color); --dx-c-type-badge-background: var(--dx-g-brand-${this.brand}-color-background);`;
+        if (VALID_BRANDS.includes(this.color as Brand)) {
+            return this.buildStyleString({
+                background: `--dx-g-brand-${this.color}-color-background`,
+                color: `--dx-g-brand-${this.color}-color`
+            });
+        }
+        const variables = colorToDxColors(this.color as Color);
+        if (variables) {
+            return this.buildStyleString(variables);
         }
         return "";
     }
+
+    private buildStyleString({
+        background,
+        color
+    }: {
+        background: string;
+        color: string;
+    }): string {
+        return `--color: var(${color}); --background: var(${background})`;
+    }
 }

package/src/modules/utils/css/css.ts

@@ -1,2 +1,43 @@
+import { Color } from "typings/custom";
+
+const LABEL_TO_DX_VAR: { [key: string]: string } = {
+    blue: "blue-vibrant",
+    "cloud-blue": "cloud-blue-vibrant",
+    green: "green-vibrant",
+    "hot-orange": "hot-orange-vibrant",
+    indigo: "indigo-vibrant",
+    orange: "orange-vibrant",
+    pink: "pink-vibrant",
+    purple: "purple-vibrant",
+    red: "red-vibrant",
+    teal: "teal-natural",
+    violet: "violet-vibrant",
+    yellow: "yellow-natural"
+};
+
+const DEFAULT_BACKGROUND_LEVEL = 95;
+const DEFAULT_COLOR_LEVEL = 40;
+
+export const colorToDxColors = (
+    color?: Color
+): {
+    background: string;
+    color: string;
+} | null => {
+    if (!color) {
+        return null;
+    }
+
+    const dxVarColor = LABEL_TO_DX_VAR[color];
+    if (!dxVarColor) {
+        return null;
+    }
+
+    return {
+        background: `--dx-g-${dxVarColor}-${DEFAULT_BACKGROUND_LEVEL}`,
+        color: `--dx-g-${dxVarColor}-${DEFAULT_COLOR_LEVEL}`
+    };
+};
+
 export const toDxColor = (color: string) =>
     ["white", "transparent"].includes(color) ? color : `var(--dx-g-${color})`;

package/src/modules/utils/highlight/highlight.ts

@@ -29,8 +29,4 @@ export const highlightTerms = (
 
         element.innerHTML = innerHtml;
     });
-    if (elements.length > 0) {
-        console.log(elements[0], 'scrolling')
-        elements[0].scrollIntoView(true);
-    }
 };