@salesforcedevs/dx-components 1.3.66-alpha-032 → 1.3.66-alpha001-a

package/lwc.config.json

@@ -98,7 +98,6 @@
         "dxUtils/analytics",
         "dxUtils/async",
         "dxUtils/constants",
-        "dxUtils/contentTypes",
         "dxUtils/coveo",
         "dxUtils/dates",
         "dxUtils/highlight",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.66-alpha-032",
+    "version": "1.3.66-alpha001-a",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/searchResults/searchResults.css

@@ -1,5 +1,4 @@
 @import "dxHelpers/reset";
-@import "dxHelpers/typeBadge";
 @import "./coveo.css";
 
 /* stylelint-disable selector-class-pattern */
@@ -386,8 +385,3 @@ a.CoveoResultLink,
     margin: 0 auto;
     width: fit-content;
 }
-
-.dx-badge {
-    display: block;
-    margin-bottom: var(--dx-g-spacing-smd);
-}

package/src/modules/dx/searchResults/searchResults.ts

@@ -1,8 +1,6 @@
 import { LightningElement, api, track } from "lwc";
 import type * as CoveoSDK from "coveo-search-ui";
 import { track as trackGTM } from "dxUtils/analytics";
-import { CONTENT_TYPE_LABELS } from "dxConstants/contentTypes";
-import { getContentTypeColorVariables } from "dxUtils/contentTypes";
 
 interface CoveoSearch {
     state: typeof CoveoSDK.state;
@@ -40,7 +38,6 @@ const resultsTemplatesInnerHtml = `
         data-field-publicurl=""
     >
         <div class="dx-result">
-            <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
             <p class="dx-result-title">
                 <a
                     class="CoveoResultLink"
@@ -56,7 +53,6 @@ const resultsTemplatesInnerHtml = `
         type="text/html"
     >
             <div class="dx-result">
-                <span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
                 <p class="dx-result-title">
                     <a class="CoveoResultLink"></a>
                 </p>
@@ -175,15 +171,6 @@ export default class SearchResults extends LightningElement {
 
         this.attachListeners(this.root);
 
-        Coveo.TemplateHelpers.registerTemplateHelper(
-            "badge",
-            (value: string) => {
-                const style = getContentTypeColorVariables(value);
-                const label = CONTENT_TYPE_LABELS[value];
-                return `<div style="${style}" class="dx-badge"><span>${label}</span></div>`;
-            }
-        );
-
         Coveo.init(this.root);
     }
 

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

@@ -26,7 +26,7 @@ import {
 export const SESSION_KEY = "dx-sidebar-search-state";
 
 const DEFAULT_RESULT_COUNT = 20;
-const SEARCH_DEBOUNCE_DELAY = 780;
+const SEARCH_DEBOUNCE_DELAY = 1200;
 
 const UserRecentSearches = new RecentSearches();
 
@@ -403,6 +403,7 @@ export default class SidebarSearch extends LightningElement {
 
     private submitSearch = debounce((isSyncingSearchValue = false) => {
         if (this.searchBox) {
+            console.log('SEARCHIN')
             UserRecentSearches.add(this.value);
             this.updateRecentSearches();
 

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

@@ -1,2 +1,33 @@
 @import "dxHelpers/reset";
-@import "dxHelpers/typeBadge";
+
+.badge {
+    --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);
+
+    color: var(--dx-c-type-badge-color, var(--color));
+    background: var(--dx-c-type-badge-background, var(--background));
+    border-radius: var(--border-radius);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--height);
+    width: min-content;
+    text-align: center;
+    white-space: nowrap;
+    font-family: var(--dx-g-font-sans);
+    font-size: 10px;
+    font-weight: var(--dx-g-font-bold);
+    padding: var(--vertical-spacing) var(--horizontal-spacing);
+}
+
+.badge.size-small {
+    --height: var(--dx-g-spacing-mlg);
+}
+
+dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
+}

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

@@ -5,20 +5,65 @@ import {
     Color,
     ContentType,
     IconSprite,
-    IconData,
     IconSymbol,
     TypeBadgeSize
 } from "typings/custom";
 import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
-import {
-    isContentType,
-    getContentTypeColorScope,
-    getContentTypeColorVariables
-} from "dxUtils/contentTypes";
-import {
-    CONTENT_TYPE_LABELS,
-    CONTENT_TYPE_ICONS
-} from "dxConstants/contentTypes";
+import { BRANDS } from "dxConstants/brands";
+import { CONTENT_TYPES } from "dxConstants/contentTypes";
+
+const contentTypeLabels = {
+    documentation: "Documentation",
+    trailhead: "Trailhead",
+    blog: "Blog",
+    forum: "Forum",
+    api: "API",
+    event: "Event",
+    website: "Website",
+    podcast: "Podcast"
+};
+
+type IconData = {
+    iconSymbol: IconSymbol;
+    iconSprite: IconSprite;
+};
+
+const contentTypeIcons: {
+    [K in ContentType]: IconData;
+} = {
+    documentation: {
+        iconSprite: "utility",
+        iconSymbol: "knowledge_base"
+    },
+    trailhead: {
+        iconSprite: "salesforcebrand",
+        iconSymbol: "learning"
+    },
+    blog: {
+        iconSprite: "utility",
+        iconSymbol: "comments"
+    },
+    forum: {
+        iconSprite: "general",
+        iconSymbol: "question-circle"
+    },
+    api: {
+        iconSprite: "utility",
+        iconSymbol: "settings"
+    },
+    event: {
+        iconSprite: "utility",
+        iconSymbol: "event"
+    },
+    website: {
+        iconSprite: "utility",
+        iconSymbol: "home"
+    },
+    podcast: {
+        iconSprite: "utility",
+        iconSymbol: "unmuted"
+    }
+};
 
 export default class TypeBadge extends LightningElement {
     @api size: TypeBadgeSize = "default";
@@ -66,29 +111,39 @@ export default class TypeBadge extends LightningElement {
     private _iconSymbol?: IconSymbol;
 
     private get variantIconData(): IconData | null {
-        if (this.variant && this.variant in CONTENT_TYPE_ICONS) {
-            return CONTENT_TYPE_ICONS[this.variant as ContentType];
+        if (this.variant && this.variant in contentTypeIcons) {
+            return contentTypeIcons[this.variant as ContentType];
         }
         return null;
     }
 
     private get variantLabel(): string | null {
         if (this.isContentType) {
-            return CONTENT_TYPE_LABELS[this.variant as ContentType];
+            return contentTypeLabels[this.variant as ContentType];
         }
         return null;
     }
 
     private get variantColorScope(): string | null {
-        return getContentTypeColorScope(this.variant);
+        if (this.isContentType) {
+            return "content-type";
+        }
+        if (this.isBrand) {
+            return "brand";
+        }
+        return null;
     }
 
     private get isContentType(): boolean {
-        return isContentType(this.variant);
+        return CONTENT_TYPES.includes(this.variant as ContentType);
+    }
+
+    private get isBrand(): boolean {
+        return BRANDS.includes(this.variant as ContentType);
     }
 
     private get className(): string {
-        return cx("dx-badge", `size-${this.size}`);
+        return cx("badge", `size-${this.size}`);
     }
 
     private get style(): string {
@@ -99,7 +154,10 @@ export default class TypeBadge extends LightningElement {
             });
         }
         if (this.variantColorScope) {
-            return getContentTypeColorVariables(this.variant);
+            return buildStyleColorVariables({
+                background: `--dx-g-${this.variantColorScope}-${this.variant}-color-background`,
+                color: `--dx-g-${this.variantColorScope}-${this.variant}-color`
+            });
         }
         if (this.color) {
             const variables = colorToDxColors(this.color as Color);

package/src/modules/dxConstants/contentTypes/contentTypes.ts

@@ -1,54 +1,3 @@
-import { ContentType, IconData } from "typings/custom";
-
-export const CONTENT_TYPE_LABELS = {
-  documentation: "Documentation",
-  trailhead: "Trailhead",
-  blog: "Blog",
-  forum: "Forum",
-  api: "API",
-  event: "Event",
-  website: "Website",
-  podcast: "Podcast"
-};
-
-export const CONTENT_TYPE_ICONS: {
-    [K in ContentType]: IconData;
-} = {
-    documentation: {
-        iconSprite: "utility",
-        iconSymbol: "knowledge_base"
-    },
-    trailhead: {
-        iconSprite: "salesforcebrand",
-        iconSymbol: "learning"
-    },
-    blog: {
-        iconSprite: "utility",
-        iconSymbol: "comments"
-    },
-    forum: {
-        iconSprite: "general",
-        iconSymbol: "question-circle"
-    },
-    api: {
-        iconSprite: "utility",
-        iconSymbol: "settings"
-    },
-    event: {
-        iconSprite: "utility",
-        iconSymbol: "event"
-    },
-    website: {
-        iconSprite: "utility",
-        iconSymbol: "home"
-    },
-    podcast: {
-        iconSprite: "utility",
-        iconSymbol: "unmuted"
-    }
-};
-
-
 export const CONTENT_TYPES = [
     "documentation",
     "trailhead",

package/src/modules/dxHelpers/typeBadge/typeBadge.css

@@ -1,31 +0,0 @@
-.dx-badge {
-  --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);
-
-  color: var(--dx-c-type-badge-color, var(--color));
-  background: var(--dx-c-type-badge-background, var(--background));
-  border-radius: var(--border-radius);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--height);
-  width: min-content;
-  text-align: center;
-  white-space: nowrap;
-  font-family: var(--dx-g-font-sans);
-  font-size: 10px;
-  font-weight: var(--dx-g-font-bold);
-  padding: var(--vertical-spacing) var(--horizontal-spacing);
-}
-
-.dx-badge.size-small {
-  --height: var(--dx-g-spacing-mlg);
-}
-
-dx-icon {
-  margin-right: var(--dx-g-spacing-sm);
-}

package/src/modules/dxUtils/contentTypes/contentTypes.ts

@@ -1,30 +0,0 @@
-import { CONTENT_TYPES } from "dxConstants/contentTypes";
-import { BRANDS } from "dxConstants/brands";
-import { ContentType } from "typings/custom";
-import { buildStyleColorVariables } from "dxUtils/css";
-
-export const isBrand = (id: string): boolean => {
-    return BRANDS.includes(id as ContentType);
-};
-
-export const isContentType = (id: string): boolean => {
-    return CONTENT_TYPES.includes(id as ContentType);
-};
-
-export const getContentTypeColorScope = (id: string): string | null => {
-    if (isContentType(id)) {
-        return "content-type";
-    }
-    if (isBrand(id)) {
-        return "brand";
-    }
-    return null;
-};
-
-export const getContentTypeColorVariables = (id: string): string => {
-  const scope = getContentTypeColorScope(id);
-  return buildStyleColorVariables({
-    background: `--dx-g-${scope}-${id}-color-background`,
-    color: `--dx-g-${scope}-${id}-color`
-});
-}