@salesforcedevs/dx-components 0.66.2 → 0.70.0

package/lwc.config.json

@@ -53,6 +53,7 @@
         "dx/popover",
         "dx/radioGroup",
         "dx/relativeDateTime",
+        "dx/searchResults",
         "dx/section",
         "dx/sectionSignup",
         "dx/sectionSmall",
@@ -86,6 +87,7 @@
         "dxUtils/dates",
         "dxUtils/highlight",
         "dxUtils/language",
+        "dxUtils/lwc",
         "dxUtils/normalizers",
         "dxUtils/queryCoordinator",
         "dxUtils/recentSearches",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.66.2",
+    "version": "0.70.0",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -15,6 +15,7 @@
         "@sfdocs-internal/wires": "^0.6.3",
         "@vimeo/player": "^2.16.4",
         "classnames": "^2.2.6",
+        "coveo-search-ui": "^2.10082.5",
         "debounce": "^1.2.0",
         "lodash.get": "^4.4.2",
         "microtip": "0.2.2"
@@ -25,5 +26,5 @@
         "@types/lodash.get": "^4.4.6",
         "@types/vimeo__player": "^2.16.2"
     },
-    "gitHead": "ee77de106c79b53c55a283e47cc9ef44ed7b3c7e"
+    "gitHead": "d32440fddef6bfd9f99abb0fe905d2c9cb8ee74e"
 }

package/src/modules/dx/banner/banner.ts

@@ -1,14 +1,12 @@
 import { LightningElement, api } from "lwc";
+import { setContainerInnerHtml } from "dxUtils/lwc";
 
 export default class Banner extends LightningElement {
     @api bannerMarkup =
         '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
 
-    renderedCallback(){
+    renderedCallback() {
         const container = this.template.querySelector(".info-container");
-        if(container){
-            // eslint-disable-next-line @lwc/lwc/no-inner-html
-            container.innerHTML = this.bannerMarkup
-        }
+        setContainerInnerHtml(container, this.bannerMarkup);
     }
 }

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

@@ -1,10 +1,5 @@
 <template>
-    <div class={className} style={style}>
-        <dx-icon
-            color={color}
-            symbol={symbol}
-            sprite={sprite}
-            size={iconSize}
-        ></dx-icon>
+    <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

@@ -40,9 +40,13 @@ export default class IconBadge extends LightningElement {
     }
 
     get style() {
-        return (
-            this.backgroundColor &&
-            `background-color: ${toDxColor(this.backgroundColor)}`
-        );
+        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/input/input.css

@@ -133,6 +133,22 @@ input::placeholder {
     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);
 }
@@ -148,7 +164,7 @@ input::placeholder {
 }
 
 .error-message-box {
-    margin-top: var(--dx-g-spacing-2xs);
+    margin-top: var(--dx-g-spacing-xs);
     display: block;
 }
 

package/src/modules/dx/input/input.html

@@ -1,5 +1,5 @@
 <template>
-    <label if:true={label} for="input">
+    <label if:true={label} id="label" for="input" tabindex="-1">
         {label}
         <abbr if:true={required}>*</abbr>
     </label>
@@ -24,6 +24,7 @@
                 placeholder={placeholder}
                 type={type}
                 value={value}
+                aria-labelledby="label description"
             />
             <button
                 class="clear-button"
@@ -48,6 +49,9 @@
             {submitLabel}
         </dx-button>
     </div>
+    <div id="description" class={descriptionClassName} tabindex="-1">
+        {description}
+    </div>
     <div
         if:true={errorMessage}
         aria-live="assertive"

package/src/modules/dx/input/input.ts

@@ -2,6 +2,7 @@ import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSize, IconSymbol } from "typings/custom";
 import { isMac } from "dxUtils/devices";
+import { setContainerInnerHtml } from "dxUtils/lwc";
 import { isValidEmail } from "./validators";
 
 type ValidatorMap = {
@@ -25,6 +26,7 @@ export default class Input extends LightningElement {
     @api iconSize: IconSize = "medium";
     @api iconSymbol: IconSymbol | null = null;
     @api label?: string;
+    @api descriptionMarkup?: string;
     @api loading: boolean = false;
     @api missingErrorMessage: string = "Complete this field";
     @api formatErrorMessage?: string;
@@ -118,6 +120,10 @@ export default class Input extends LightningElement {
         return cx("input-group", `size-${this.size}`);
     }
 
+    private get descriptionClassName() {
+        return cx("description", !this.descriptionMarkup && "hide");
+    }
+
     private get inputContainerClassName() {
         return cx(
             "input-container",
@@ -160,6 +166,8 @@ export default class Input extends LightningElement {
         if (!this.input) {
             this.input = <HTMLInputElement>this.template.querySelector("input");
         }
+        const container = this.template.querySelector(".description");
+        setContainerInnerHtml(container, this.descriptionMarkup);
     }
 
     onClick() {