@salesforcedevs/dx-components 0.10.1-alpha.13 → 0.10.1-alpha.133

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -7,10 +7,20 @@ a {
     flex-direction: column;
 }
 
+.sidebar-item {
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-md);
+}
+
 .search-text {
     font-size: var(--dx-g-text-xs);
     font-family: var(--dx-g-font-sans);
     line-height: 18px;
+    overflow-wrap: break-word;
+}
+
+.description {
+    -webkit-line-clamp: 3;
+    overflow-wrap: break-word;
 }
 
 .title {
@@ -18,9 +28,9 @@ a {
 }
 
 .bold {
-    font-weight: bold;
+    font-weight: 700;
 }
 
 a > *:not(:last-child) {
-    margin-bottom: 6px;
+    margin-bottom: 2px;
 }

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html

@@ -1,5 +1,5 @@
 <template>
-    <a class="sidebar-item" href={href}>
+    <a class={className} href={href}>
         <span class="title search-text">
             <template for:each={titleChunks} for:item="chunk">
                 <span class={chunk.class} key={chunk.id}>{chunk.value}</span>

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.ts

@@ -1,4 +1,5 @@
 import { LightningElement, api } from "lwc";
+import cx from "classnames";
 import { CoveoHighlights } from "typings/custom";
 
 const toChunks = (value: string, highlights: CoveoHighlights) => {
@@ -34,11 +35,12 @@ const toChunks = (value: string, highlights: CoveoHighlights) => {
 };
 
 export default class SidebarSearchResult extends LightningElement {
-    @api title!: string;
-    @api titleHighlights!: CoveoHighlights;
     @api description!: string;
     @api descriptionHighlights!: CoveoHighlights;
     @api href!: string;
+    @api selected!: boolean;
+    @api title!: string;
+    @api titleHighlights!: CoveoHighlights;
 
     private get titleChunks() {
         return toChunks(this.title, this.titleHighlights);
@@ -47,4 +49,8 @@ export default class SidebarSearchResult extends LightningElement {
     private get descriptionChunks() {
         return toChunks(this.description, this.descriptionHighlights);
     }
+
+    private get className(): string {
+        return cx("sidebar-item", this.selected && "sidebar-item-selected");
+    }
 }

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

@@ -0,0 +1,37 @@
+import Spinner from "dx/spinner";
+import { createRenderComponent } from "utils/tests";
+
+const TAG = "dx-spinner";
+const render = createRenderComponent(TAG, Spinner);
+
+describe(TAG, () => {
+    it("renders", () => {
+        const component: HTMLElement = render();
+
+        expect(component.classList).toHaveLength(1);
+        expect(component.classList).toContain("spinner_container");
+        const container = component.shadowRoot!.querySelector(".spinner");
+
+        expect(container).not.toBeNull();
+        expect(container?.classList).toHaveLength(2);
+        expect(container?.classList).toContain(`spinner_medium`);
+
+        return expect(component).toBeAccessible();
+    });
+
+    it("renders with size and variant", () => {
+        const size = "large";
+        const variant = "inverse";
+        const component: HTMLElement = render({
+            size,
+            variant
+        });
+
+        const container = component.shadowRoot?.querySelector(".spinner");
+        expect(container?.classList).toHaveLength(3);
+        expect(container?.classList).toContain(`spinner_${size}`);
+        expect(container?.classList).toContain(`spinner_${variant}`);
+
+        return expect(component).toBeAccessible();
+    });
+});