@salesforcedevs/dx-components 0.10.1-alpha.9 → 0.10.1-alpha.93

package/src/modules/dx/spinner/spinner.html

@@ -0,0 +1,6 @@
+<template>
+    <div role="status" class={containerClass}>
+        <div class="spinner_dot-a"></div>
+        <div class="spinner_dot-b"></div>
+    </div>
+</template>

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

@@ -0,0 +1,69 @@
+import { html } from "lit-html";
+import { SpinnerSize, SpinnerVariant } from "typings/custom";
+
+type SpinnerStoryArgs = {
+    size: SpinnerSize;
+    variant: SpinnerVariant;
+};
+
+const sizeOptions: Array<SpinnerSize> = ["medium", "x-small", "small", "large"];
+const variantOptions: Array<SpinnerVariant> = ["base", "brand", "inverse"];
+const variantToBackgroundColor: { [key: string]: string } = {
+    inverse: "black"
+};
+
+export default {
+    title: "dx/dx-spinner",
+    component: "dx-spinner",
+    argTypes: {
+        size: {
+            control: {
+                type: "select",
+                options: sizeOptions
+            }
+        },
+        variant: {
+            control: {
+                type: "select",
+                options: variantOptions
+            }
+        }
+    }
+};
+
+const style = (variant: SpinnerVariant = "base") => html`
+    <style>
+        .spinner-wrapper {
+            position: relative;
+            height: 100vh;
+            background-color: ${variantToBackgroundColor[variant] || "white"};
+        }
+    </style>
+`;
+
+const [defaultSize] = sizeOptions;
+const [defaultVariant] = variantOptions;
+
+const Template = ({ size, variant }: SpinnerStoryArgs) => html`
+    ${style(variant)}
+    <div class="spinner-wrapper">
+        <dx-spinner
+            size="${size || defaultSize}"
+            variant="${variant || defaultVariant}"
+        ></dx-spinner>
+    </div>
+`;
+
+export const Base = Template;
+
+export const BrandLarge = (args: SpinnerStoryArgs) => Template(args);
+BrandLarge.args = {
+    size: "large",
+    variant: "brand"
+};
+
+export const InverseSmall = (args: SpinnerStoryArgs) => Template(args);
+InverseSmall.args = {
+    size: "small",
+    variant: "inverse"
+};

package/src/modules/dx/spinner/spinner.ts

@@ -0,0 +1,20 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import type { SpinnerSize, SpinnerVariant } from "typings/custom";
+
+export default class Spinner extends LightningElement {
+    @api size: SpinnerSize = "medium";
+    @api variant: SpinnerVariant = "base";
+
+    connectedCallback() {
+        this.classList.add("spinner_container");
+    }
+
+    get containerClass(): string {
+        return cx(
+            "spinner",
+            this.size && `spinner_${this.size}`,
+            this.variant && this.variant !== "base" && `spinner_${this.variant}`
+        );
+    }
+}

package/src/modules/helpers/table/table.css

@@ -1,5 +1,7 @@
 table {
     --table-border-radius: 4px;
+    --table-cell-text-base: var(--dx-g-text-sm);
+    --table-cell-line-height: var(--dx-g-text-lg);
 
     display: block;
     overflow-x: scroll;
@@ -16,13 +18,13 @@ table tr {
 th,
 td {
     padding: var(--dx-g-spacing-md);
-    font-size: var(--dx-g-text-sm);
-    line-height: var(--dx-g-text-lg);
+    font-size: var(--table-cell-text-base);
+    line-height: var(--table-cell-line-height);
 }
 
 th {
     background-color: var(--dx-g-indigo-vibrant-95);
-    font-weight: inherit;
+    font-weight: var(--dx-g-font-bold);
     border-bottom: 3px solid var(--dx-g-indigo-vibrant-30);
 }
 
@@ -40,10 +42,6 @@ table tbody tr td {
     border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
-th:first-of-type {
-    font-weight: var(--dx-g-font-bold);
-}
-
 tr th:first-of-type,
 td:first-of-type {
     min-width: 110px;
@@ -85,6 +83,24 @@ tr td[colspan]:not([colspan="1"]) {
     text-align: center;
 }
 
+/**
+ * Inside of a <td>, we want font size not to increase as it otherwise would
+ * for standard inline/"prose-level" elements (e.g., <p>, <li>). But we *do*
+ * want to leave font size increases in place for *other* elements inside <td>,
+ * like callouts, headings (<h1>, <h2>, etc.), and so on. In order not to
+ * "stomp" on too much -- and because we don't control the markup, so can't
+ * easily add new CSS classes, etc. -- we try to pick out the specific
+ * structures only here. (See https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE0000081MGTYA2/view)
+ */
+td :is(.li, p, .p, dd) {
+    font-size: var(--table-cell-text-base);
+}
+
+td doc-content-callout :is(.li, p, .p, dd) {
+    /* Override/reset for callouts -- see https://gus.lightning.force.com/lightning/r/ADM_Work__c/a07EE0000081MGTYA2/view */
+    font-size: var(--dx-g-text-base);
+}
+
 table :not(thead + tbody) tr:first-of-type td:first-of-type {
     border-top-left-radius: var(--table-border-radius);
 }

package/src/modules/utils/coveo/coveo.ts

@@ -20,3 +20,6 @@ export const buildSearchEngine = ({
         }
     });
 };
+
+export const getSidebarSearchParams = () =>
+    new URLSearchParams(window.location.search).get("q");

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

@@ -0,0 +1,31 @@
+import { createSearchRegExp } from "utils/regexps";
+
+const MARK_TAGS = /<\/?mark>/gi;
+
+export const highlightTerms = (
+    elements: Array<HTMLElement>,
+    searchTerm: string
+): void => {
+    searchTerm = searchTerm.trim();
+    const searchExp = createSearchRegExp(searchTerm);
+    elements.forEach((element) => {
+        if (
+            element?.innerHTML.includes("<dx-") ||
+            element?.innerHTML.includes("<doc-")
+        ) {
+            return;
+        }
+
+        let innerHtml = element.innerHTML.replace(
+            // Remove previously added mark tags
+            MARK_TAGS,
+            ""
+        );
+
+        if (searchTerm) {
+            innerHtml = innerHtml.replace(searchExp, "<mark>$&</mark>");
+        }
+
+        element.innerHTML = innerHtml;
+    });
+};

package/src/modules/utils/recentSearches/recentSearches.ts

@@ -14,11 +14,15 @@ export class RecentSearches {
     }
 
     add(item: string | undefined) {
-        if (!item || this._hasDuplicateRecentSearches(item)) {
+        if (!item) {
             return;
         }
-        this._prepend(item);
-        this._removeDuplicates(item);
+        const normalized = item.trim();
+        if (normalized === "") {
+            return
+        }
+        this._prepend(normalized);
+        this._removeDuplicates(normalized);
         this._cutOffExcess();
         this._addToStorage();
     }
@@ -51,7 +55,7 @@ export class RecentSearches {
         );
     }
 
-    _hasDuplicateRecentSearches(searchItem: string) {
+    _isDuplicate(searchItem: string) {
         return (
             this.items.filter(
                 (item: string) =>

package/src/modules/utils/regexps/regexps.ts

@@ -0,0 +1,5 @@
+const escapeRegExp = (text: string) =>
+    text.replace(/[-[\]{}()*+?.,\\^$|]/g, "\\$&");
+
+export const createSearchRegExp = (searchTerm: string): RegExp =>
+    new RegExp(`(?:${escapeRegExp(searchTerm)})(?![^<>]*>)`, "gi");