@salesforcedevs/dx-components 0.16.3 → 0.17.1-review-diff1

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

@@ -0,0 +1,67 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/commonTreeItem";
+
+a {
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-item {
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
+        var(--dx-g-spacing-smd) var(--dx-g-global-header-padding-horizontal);
+}
+
+.sidebar-item:not(.sidebar-item-selected):focus-visible {
+    padding: var(--dx-g-spacing-smd) 0;
+    margin: 0 var(--dx-g-spacing-lg) 0
+        var(--dx-g-global-header-padding-horizontal);
+    outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
+    border-radius: var(--dx-g-spacing-2xs);
+}
+
+.sidebar-item-selected:focus-visible {
+    padding: 0 var(--dx-g-spacing-lg) 0
+        var(--dx-g-global-header-padding-horizontal);
+    outline: none;
+
+    .search-result {
+        outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
+        border-radius: var(--dx-g-spacing-2xs);
+        padding: var(--dx-g-spacing-smd) 0;
+    }
+}
+
+.search-text {
+    font-size: var(--dx-g-text-sm);
+    font-family: var(--dx-g-font-sans);
+    line-height: var(--dx-g-text-lg);
+    font-weight: var(--dx-g-font-bold);
+    overflow-wrap: break-word;
+}
+
+.description {
+    -webkit-line-clamp: 3;
+    overflow-wrap: break-word;
+
+    --dx-g-text-body-color: var(--dx-g-blue-vibrant-20);
+
+    font-weight: var(--dx-g-font-normal);
+    display: block;
+}
+
+.title {
+    color: var(--dx-g-text-heading-color);
+}
+
+.title:hover {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.bold {
+    font-weight: 700;
+}
+
+a > *:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-xs);
+}

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

@@ -0,0 +1,20 @@
+<template>
+    <a class={className} href={href} onclick={onClick}>
+        <div class="search-result">
+            <span class="title search-text">
+                <template for:each={titleChunks} for:item="chunk">
+                    <span class={chunk.class} key={chunk.id}>
+                        {chunk.value}
+                    </span>
+                </template>
+            </span>
+            <span class="description dx-text-body-3 sidebar-item-truncate-text">
+                <template for:each={descriptionChunks} for:item="chunk">
+                    <span class={chunk.class} key={chunk.id}>
+                        {chunk.value}
+                    </span>
+                </template>
+            </span>
+        </div>
+    </a>
+</template>

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

@@ -0,0 +1,78 @@
+import { LightningElement, api } from "lwc";
+import cx from "classnames";
+import { CoveoHighlights } from "typings/custom";
+
+const toChunks = (value: string, highlights: CoveoHighlights) => {
+    if (!highlights || highlights.length < 1) {
+        return [
+            {
+                value,
+                id: 0
+            }
+        ];
+    }
+
+    let endIndex = 0;
+    // @ts-ignore Dark Magic (TM)
+    return highlights.reduce((acc, { length, offset }, i) => {
+        const plainValue = value.slice(endIndex, offset);
+        const plainChunk = {
+            value: plainValue,
+            id: endIndex
+        };
+
+        endIndex = offset + length;
+        const boldValue = value.slice(offset, endIndex);
+        const boldChunk = {
+            value: boldValue,
+            class: "bold",
+            id: offset
+        };
+
+        let chunks =
+            plainValue.length > 0
+                ? [...acc, plainChunk, boldChunk]
+                : [...acc, boldChunk];
+
+        const remaining = value.slice(endIndex);
+        if (remaining.length > 0 && highlights.length - 1 === i) {
+            chunks = [
+                ...chunks,
+                {
+                    value: remaining,
+                    id: value.length
+                }
+            ];
+        }
+
+        return chunks;
+    }, []);
+};
+
+export default class SidebarSearchResult extends LightningElement {
+    @api description!: string;
+    @api descriptionHighlights!: CoveoHighlights;
+    @api href!: string;
+    @api selected!: boolean;
+    @api header!: string;
+    @api titleHighlights!: CoveoHighlights;
+    @api select!: Function;
+
+    private get titleChunks() {
+        return toChunks(this.header, this.titleHighlights);
+    }
+
+    private get descriptionChunks() {
+        return toChunks(this.description, this.descriptionHighlights);
+    }
+
+    private get className(): string {
+        return cx("sidebar-item", this.selected && "sidebar-item-selected");
+    }
+
+    private onClick(e: PointerEvent) {
+        e.preventDefault();
+        this.select();
+        window.location.href = this.href;
+    }
+}

package/src/modules/dx/skipNavLink/skipNavLink.css

@@ -0,0 +1,21 @@
+@import "dxHelpers/text";
+
+a {
+    left: 0;
+    top: 0;
+    position: absolute;
+    padding: 0 var(--dx-g-spacing-mlg);
+    height: var(--dx-g-spacing-3xl);
+    transform: translateY(-1000%);
+    background: var(--dx-g-indigo-natural-20);
+    border-radius: 0 5px 5px 0;
+    z-index: 100000000;
+    text-decoration: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+a:focus {
+    transform: translateY(var(--dx-g-spacing-xl));
+}

package/src/modules/dx/skipNavLink/skipNavLink.html

@@ -0,0 +1,3 @@
+<template>
+    <a class="dx-text-button-light" href="#maincontent">Skip Navigation</a>
+</template>

package/src/modules/dx/skipNavLink/skipNavLink.ts

@@ -0,0 +1,3 @@
+import { LightningElement } from "lwc";
+
+export default class SkipNavLink extends LightningElement {}

package/src/modules/dx/socials/socials.css

@@ -3,7 +3,7 @@
 }
 
 .details-section {
-    color: var(--dx-g-gray-30);
+    color: var(--dx-g-text-label-color);
     font-family: var(--dx-g-font-display);
     font-size: var(--dx-g-text-xs);
     letter-spacing: 0.7px;
@@ -25,11 +25,12 @@
 }
 
 dx-icon-badge {
-    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-icon-badge-background-color: var(--dx-g-social-svg-background-color);
+    --dx-c-icon-badge-color: var(--dx-g-social-svg-icon-color);
     --dx-c-icon-badge-size: 34px;
     --dx-c-icon-badge-icon-size: 18px;
 }
 
 dx-icon-badge:hover {
-    --dx-c-icon-badge-background-color: var(--dx-g-blue-vibrant-40);
+    --dx-c-icon-badge-background-color: var(--dx-g-social-svg-hover-color);
 }

package/src/modules/dx/socials/socials.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { normalizeToArray } from "utils/normalizers";
+import { normalizeToArray } from "dxUtils/normalizers";
 
 type Icon = { name: string; symbol: string; baseShareUrl: string };
 
@@ -7,11 +7,6 @@ const URL_TOKEN = "{url}";
 const TEXT_TOKEN = "{text}";
 
 const SOCIAL_ICONS: Array<Icon> = [
-    {
-        name: "Facebook",
-        symbol: "facebook-f",
-        baseShareUrl: `https://www.facebook.com/sharer/sharer.php?u=${URL_TOKEN}`
-    },
     {
         name: "Twitter",
         symbol: "twitter",