@salesforcedevs/dx-components 0.19.3 → 0.21.0

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

@@ -3,6 +3,8 @@ import SidebarSearch from "dx/sidebarSearch";
 import { createRenderComponent, renderLightningElement } from "utils/tests";
 import { coveoXMLDocsConfig } from "utils/coveo";
 import { mockQueryParameter, unmockQueryParameter } from "utils/jest";
+import { SESSION_KEY } from "dx/sidebarSearch";
+import mockPreloadedState from "./mockPreloadedState";
 
 const TAG = "dx-sidebar-search";
 const render = createRenderComponent(TAG, SidebarSearch);
@@ -11,8 +13,40 @@ const PROPS = coveoXMLDocsConfig;
 const QUERY = "test";
 
 describe(TAG, () => {
+    beforeEach(() => {
+        window.sessionStorage.clear();
+        jest.restoreAllMocks();
+    });
     afterEach(unmockQueryParameter);
 
+    it("correctly sets coveo advanced configuration", () => {
+        const element = render(PROPS);
+
+        element.coveoAdvancedQueryConfig = JSON.stringify(
+            coveoXMLDocsConfig.coveoAdvancedQueryConfig
+        );
+
+        expect(element.coveoAdvancedQueryConfig).toEqual(
+            coveoXMLDocsConfig.coveoAdvancedQueryConfig
+        );
+
+        return expect(element).toBeAccessible();
+    });
+
+    it("calls dispatchOnChangeEvent with empty query", () => {
+        const element = render(PROPS);
+
+        const mockOnChange = jest.fn();
+
+        element.addEventListener("change", mockOnChange);
+
+        element.setInputValue("reference");
+        element.setInputValue("");
+
+        expect(mockOnChange).toHaveBeenCalled();
+        return expect(element).toBeAccessible();
+    });
+
     it("renders with the correct initial empty query", () => {
         const element = render(PROPS);
 
@@ -90,24 +124,49 @@ describe(TAG, () => {
             );
         });
     });
-});
 
-// git("correctly consumes a valid session storage object", () => {
-//     mockQueryParameter(mockPreloadedState.query.q);
+    it("correctly consumes a valid session storage object", () => {
+        mockQueryParameter(mockPreloadedState.state.query.q);
 
-//     window.sessionStorage.setItem(
-//         SESSION_KEY,
-//         JSON.stringify(mockPreloadedState)
-//     );
+        window.sessionStorage.setItem(
+            SESSION_KEY,
+            JSON.stringify(mockPreloadedState)
+        );
 
-//     const mockOnChange = jest.fn();
+        const element = render(PROPS);
+
+        expect(window.sessionStorage.getItem(SESSION_KEY)).not.toBeNull();
+
+        expect(element).toBeAccessible();
+    });
+
+    it("ignores and deletes a session storage object if query and config don't match", () => {
+        mockQueryParameter("test");
+
+        window.sessionStorage.setItem(
+            SESSION_KEY,
+            JSON.stringify(mockPreloadedState)
+        );
+
+        const element = render(PROPS);
 
-//     const element = render(PROPS);
-//     element.addEventListener("change", mockOnChange);
+        expect(window.sessionStorage.getItem(SESSION_KEY)).toBeNull();
 
-//     return Promise.resolve().then(() => {
-//         expect(mockOnChange).toHaveBeenCalledTimes(1);
+        expect(element).toBeAccessible();
+    });
+
+    it("ignores and deletes a session storage object on incorrect config", () => {
+        mockQueryParameter(mockPreloadedState.state.query.q);
+
+        window.sessionStorage.setItem(
+            SESSION_KEY,
+            JSON.stringify({ state: { query: { q: "test" } } })
+        );
+
+        const element = render(PROPS);
+
+        expect(window.sessionStorage.getItem(SESSION_KEY)).toBeNull();
 
-//         expect(element).toBeAccessible();
-//     });
-// });
+        expect(element).toBeAccessible();
+    });
+});

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -125,6 +125,7 @@ export default class SidebarSearch extends LightningElement {
     renderedCallback() {
         // in prod some of the critical coveo configuration attributes seem to arrive later
         // so I needed to put this coveo startup flow here where we can wait for them to arrive
+
         if (this.hasCorrectCoveoConfig && !this.engine) {
             this.initializeUserSession();
             this.initializeCoveo();
@@ -151,12 +152,14 @@ export default class SidebarSearch extends LightningElement {
 
     private initializeUserSession() {
         const stringified = window.sessionStorage.getItem(SESSION_KEY);
+
         if (!stringified) {
             return;
         }
 
         try {
             const json = JSON.parse(stringified);
+
             const hasSameConfig = Object.entries(
                 json.coveoAdvancedQueryConfig
             ).every(
@@ -164,6 +167,7 @@ export default class SidebarSearch extends LightningElement {
                     this.coveoAdvancedQueryConfig[key] === value
             );
             const hasSameQuery = json?.state?.query?.q === this.value;
+
             if (hasSameConfig && hasSameQuery) {
                 this.preloadedState = json?.state;
             } else {

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