@salesforcedevs/dx-components 0.3.12 → 0.3.14-banner-alpha1

package/src/modules/dx/select/select.ts

@@ -0,0 +1,141 @@
+import cx from "classnames";
+import { LightningElement, api } from "lwc";
+import { SelectOption } from "typings/custom";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
+
+export const DEFAULT_MISSING_MESSAGE = "This field is required";
+
+export default class Select extends LightningElement {
+    @api accessKey!: string;
+    @api autocomplete?: string;
+    @api label?: string;
+    @api messageWhenValueMissing: string = DEFAULT_MISSING_MESSAGE;
+    @api name?: string;
+    @api placeholder?: string;
+    @api size?: string;
+
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+
+    set disabled(value) {
+        this._disabled = normalizeBoolean(value);
+    }
+
+    @api
+    get options() {
+        return this._options;
+    }
+
+    set options(value) {
+        this._options = toJson(value);
+    }
+
+    @api
+    get required() {
+        return this._required;
+    }
+
+    set required(value) {
+        this._required = normalizeBoolean(value);
+    }
+
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+        this.updateSelectValue();
+    }
+
+    _disabled = false;
+    _size = "";
+    _required = false;
+    _options: Array<SelectOption> = [];
+    _value: string = "";
+    _selectElement: HTMLSelectElement | null = null;
+    helpMessage?: string = "";
+
+    renderedCallback(): void {
+        this.updateSelectValue();
+    }
+
+    get containerClass() {
+        return cx("form-element", this.hasError && "has-error");
+    }
+
+    get hasError(): boolean {
+        return !!this.helpMessage;
+    }
+
+    get selectClass() {
+        return cx("select-element", {
+            "select-element_placeholder": this.placeholder && !this.value
+        });
+    }
+
+    get selectElement() {
+        if (!this._selectElement) {
+            this._selectElement =
+                this.template.querySelector<HTMLSelectElement>("select");
+        }
+        return this._selectElement;
+    }
+
+    @api
+    blur(): void {
+        if (this.selectElement) {
+            this.selectElement.blur();
+        }
+    }
+
+    @api
+    focus(): void {
+        if (this.selectElement) {
+            this.selectElement.focus();
+        }
+    }
+
+    @api
+    reportValidity(): boolean {
+        const isInvalid = this._required && !this._value;
+        this.helpMessage = isInvalid
+            ? this.messageWhenValueMissing || DEFAULT_MISSING_MESSAGE
+            : "";
+        return !isInvalid;
+    }
+
+    handleBlur(): void {
+        this.reportValidity();
+        this.dispatchEvent(new CustomEvent("blur"));
+    }
+
+    handleChange(event: Event & { target: HTMLSelectElement }): void {
+        const { value } = event.target;
+        this._value = value;
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: { value }
+            })
+        );
+    }
+
+    handleFocus(): void {
+        this.helpMessage = "";
+        this.dispatchEvent(new CustomEvent("focus"));
+    }
+
+    // We have to do it programmatically because value binding doesn't work apparently.
+    updateSelectValue(): void {
+        if (!this._value && !this.placeholder) {
+            return;
+        }
+
+        if (this.selectElement) {
+            this.selectElement.value = this._value;
+        }
+    }
+}

package/src/modules/dx/sidebar/sidebar.css

@@ -1,165 +1,48 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/commonSidebar";
 
-:host {
-    --dx-c-sidebar-width: 275px;
-    --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-button-background: white;
-    --dx-c-sidebar-button-border: white;
-    --dx-c-sidebar-button-color-hover: white;
-    --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
-    --dx-c-sidebar-left-padding: var(--dx-g-page-padding-horizontal);
-    --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
-}
-
-dx-tree:not(:last-child) {
-    margin-bottom: var(--dx-g-spacing-sm);
-}
+dx-empty-state {
+    --dx-c-empty-state-background: var(--sds-g-gray-2);
+    --dx-c-empty-state-image-width: 400px;
 
-.header {
-    box-sizing: content-box;
-    display: flex;
-    line-height: var(--dx-g-spacing-xl);
-    margin-bottom: 12px;
+    display: none;
 }
 
-.padding-horizontal {
-    padding-left: var(--dx-g-spacing-md);
-    padding-right: var(--dx-g-spacing-md);
-}
-
-.header-title {
-    line-height: inherit;
+.sidebar-content {
+    overflow-y: auto;
+    padding-bottom: var(--dx-g-spacing-md);
 }
 
-.header-toggle-button {
-    position: absolute;
-    right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
-
-    --dx-c-button-opacity: 0;
-    --dx-c-button-custom-color: var(--dx-c-sidebar-button-color);
-    --dx-c-button-custom-background: var(--dx-c-sidebar-button-background);
-    --dx-c-button-custom-border: var(--dx-c-sidebar-button-border);
-    --dx-c-button-custom-color-hover: var(--dx-c-sidebar-button-color-hover);
-    --dx-c-button-custom-background-hover: var(
-        --dx-c-sidebar-button-background-hover
-    );
-    --dx-c-button-custom-border-hover: var(--dx-c-sidebar-button-border-hover);
+.loading-skeleton {
+    margin-top: var(--dx-g-spacing-md);
 }
 
-.header-toggle-icon {
-    margin: auto 0 auto auto;
-    color: var(--dx-g-blue-vibrant-30);
+.search-empty.container dx-empty-state {
+    display: block;
 }
 
-.header-toggle-icon dx-icon {
-    transition: var(--dx-g-transition-transform-2x);
+.user-searching.container .sidebar-content-tree {
+    display: none;
 }
 
-.container.collapsed {
-    width: var(--dx-g-spacing-xl);
+.show-tree.container .sidebar-content-search {
+    display: none;
 }
 
-.collapsed .header-toggle-button {
+.container.collapsed .header-toggle-button {
     transform: rotate(180deg);
 }
 
-.container {
-    background-color: var(--dx-g-gray-95);
-    display: flex;
-    flex-direction: column;
-    height: var(--dx-c-sidebar-height);
-    width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
-}
-
-.container:not(.container-mobile) {
-    --border-color: var(--dx-g-gray-95);
-    --left-spacing: calc(
-        var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
-    );
-
-    border-right: 2px solid var(--border-color);
-    min-height: var(--dx-c-sidebar-min-height);
-    padding: var(--dx-c-sidebar-vertical-padding) 0
-        var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
-    position: relative;
-}
-
-.collapsed.container:not(.container-mobile) {
-    background-color: transparent;
-}
-
-.collapsed.container:not(.container-border-active) {
-    --border-color: transparent;
-}
-
-.container:hover .header-toggle-button {
-    --dx-c-button-opacity: 1;
-}
-
-.container.container-border-active {
-    --border-color: var(--dx-c-sidebar-button-color);
-}
-
-.container.container-mobile {
-    width: 100%;
-}
-
-.container.container-mobile .header {
-    cursor: pointer;
-    line-height: var(--dx-g-spacing-2xl);
-}
-
-.container.container-mobile:not(.collapsed) .header {
-    background-color: #dddbda;
-}
-
-.container.container-mobile .header-title {
-    color: var(--dx-g-gray-10);
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-sm);
-}
-
-.container.container-mobile.collapsed {
-    height: unset;
-    padding-bottom: 0;
-}
-
-.container.container-mobile.collapsed .header {
-    margin-bottom: 0;
+.container.collapsed .sidebar-header,
+.container.collapsed .sidebar-content {
+    display: none;
 }
 
-.container.container-mobile.collapsed .header-toggle-icon dx-icon {
-    transform: rotateZ(-90deg);
-}
-
-.sidebar-content {
-    overflow-y: auto;
-}
-
-.search {
-    padding-bottom: var(--dx-g-spacing-md);
-}
-
-.search-box {
-    --dx-c-input-width: 100%;
-    --dx-c-input-border: none;
-    --dx-c-input-border-active: 1px solid var(--dx-g-gray-90);
-    --dx-c-input-boxshadow-active: 0 4px 28px 0 rgba(0, 20, 45, 0.08);
-}
-
-.no-result {
-    flex-grow: 1;
-    display: flex;
-}
-
-.no-result dx-empty-state {
-    margin: auto;
-}
+@media (max-width: 768px) {
+    :host {
+        width: 100%;
+    }
 
-.truncate {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    .loading-skeleton {
+        width: 100%;
+    }
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -1,5 +1,5 @@
 <template>
-    <div class={containerClass}>
+    <div class={containerClass} part="container">
         <div
             if:true={mobile}
             class="header padding-horizontal"
@@ -27,46 +27,69 @@
             onmouseenter={onToggleMouseEnter}
             onmouseleave={onToggleMouseLeave}
         ></dx-button>
-
-        <template if:true={expanded}>
-            <div class="padding-horizontal">
-                <div class="header" if:false={mobile}>
-                    <h1 class="dx-text-heading-4 header-title">{header}</h1>
-                    <slot name="header"></slot>
-                </div>
-                <div class="search">
-                    <dx-input
-                        class="search-box"
-                        type="search"
-                        placeholder="Search this list..."
-                        role="search"
-                        aria-label="Content Search"
-                        icon-symbol="search"
-                        size="small"
-                        value={searchText}
-                        onchange={onSearchChange}
-                        shortcut-key="j"
-                    ></dx-input>
-                </div>
-            </div>
-            <div class="sidebar-content" if:true={anyResultMatch}>
-                <dx-tree
-                    for:each={filteredTrees}
-                    for:item="tree"
-                    key={tree.key}
-                    tree-root={tree.tree}
-                    onselect={onSelect}
-                    value={value}
-                ></dx-tree>
+        <div class="sidebar-header padding-horizontal">
+            <div class="header" if:false={mobile}>
+                <h2 class="dx-text-heading-4 header-title">{header}</h2>
+                <slot name="header"></slot>
             </div>
-            <div class="no-result padding-horizontal" if:false={anyResultMatch}>
-                <dx-empty-state
-                    title="No matches"
-                    subtitle="Try searching for different words"
-                    img-src="/assets/svg/lake-mountain.svg"
-                    img-alt="No matches"
-                ></dx-empty-state>
+            <div class="search">
+                <dx-sidebar-search
+                    onchange={onSearchChange}
+                    onloading={onSearchLoading}
+                    coveo-organization-id={coveoOrganizationId}
+                    coveo-public-access-token={coveoPublicAccessToken}
+                    coveo-search-hub={coveoSearchHub}
+                    coveo-advanced-query-config={coveoAdvancedQueryConfig}
+                ></dx-sidebar-search>
             </div>
-        </template>
+            <h2
+                class="results-heading dx-text-heading-6"
+                if:true={showResultsHeading}
+            >
+                Results
+            </h2>
+        </div>
+        <div
+            class="sidebar-content sidebar-content-search"
+            onscroll={onSidebarSearchContentScroll}
+        >
+            <img
+                if:true={isSearchLoading}
+                class="loading-skeleton padding-horizontal"
+                src="/assets/svg/sidebar-loading.svg"
+                alt="loading"
+            />
+            <template
+                if:true={showSearchResults}
+                for:each={searchResults}
+                for:item="result"
+            >
+                <dx-sidebar-search-result
+                    description-highlights={result.excerptHighlights}
+                    description={result.excerpt}
+                    href={result.href}
+                    key={result.uniqueId}
+                    selected={result.selected}
+                    title-highlights={result.titleHighlights}
+                    title={result.title}
+                ></dx-sidebar-search-result>
+            </template>
+            <dx-empty-state
+                class="padding-horizontal"
+                title="No Results"
+                size="small"
+            ></dx-empty-state>
+        </div>
+        <div class="sidebar-content sidebar-content-tree">
+            <dx-tree
+                for:each={trees}
+                for:item="tree"
+                key={tree.key}
+                tree-root={tree.tree}
+                onselect={onSelect}
+                value={value}
+                onselecteditemrendered={onSelectedItemRendered}
+            ></dx-tree>
+        </div>
     </div>
 </template>