@salesforcedevs/dx-components 0.26.1-alpha0.4 → 0.26.2

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

@@ -0,0 +1,192 @@
+@import "helpers/reset";
+@import "helpers/text";
+
+: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-empty-state {
+    --dx-c-empty-state-background: var(--sds-g-gray-2);
+    --dx-c-empty-state-image-width: 400px;
+
+    display: none;
+}
+
+dx-tree:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
+.header {
+    box-sizing: content-box;
+    display: flex;
+    line-height: var(--dx-g-spacing-xl);
+    margin-bottom: 12px;
+}
+
+.padding-horizontal {
+    padding-left: var(--dx-g-spacing-md);
+    padding-right: var(--dx-g-spacing-md);
+}
+
+.header-title {
+    line-height: inherit;
+}
+
+.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);
+}
+
+.header-toggle-icon {
+    margin: auto 0 auto auto;
+    color: var(--dx-g-blue-vibrant-30);
+}
+
+.header-toggle-icon dx-icon {
+    transition: var(--dx-g-transition-transform-2x);
+}
+
+.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: transparent;
+    --left-spacing: calc(
+        var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
+    );
+
+    box-shadow: 2px 0 0 0 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.container-border-active {
+    --border-color: var(--dx-c-sidebar-button-color);
+}
+
+.sidebar-content {
+    overflow-y: auto;
+    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.search {
+    padding-bottom: var(--dx-g-spacing-md);
+}
+
+.search-box {
+    --dx-c-input-width: 100%;
+}
+
+.truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.loading-skeleton {
+    margin-top: var(--dx-g-spacing-md);
+}
+
+.search-empty.container dx-empty-state {
+    display: block;
+}
+
+.user-searching.container .sidebar-content-tree {
+    display: none;
+}
+
+.show-tree.container .sidebar-content-search {
+    display: none;
+}
+
+.container.collapsed {
+    width: var(--dx-g-spacing-xl);
+}
+
+.container.collapsed .header-toggle-button {
+    transform: rotate(180deg);
+}
+
+.container.collapsed .sidebar-header,
+.container.collapsed .sidebar-content {
+    display: none;
+}
+
+.container:hover .header-toggle-button {
+    --dx-c-button-opacity: 1;
+}
+
+.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.container-mobile.collapsed .header-toggle-icon dx-icon {
+    transform: rotateZ(-90deg);
+}
+
+@media (max-width: 768px) {
+    :host {
+        width: 100%;
+    }
+
+    .loading-skeleton {
+        width: 100%;
+    }
+}

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

@@ -0,0 +1,94 @@
+<template>
+    <div class={containerClass} part="container">
+        <div
+            if:true={mobile}
+            class="header padding-horizontal"
+            onclick={onToggleClick}
+        >
+            <span class="header-title truncate">{headerMobile}</span>
+            <div class="header-toggle-icon">
+                <dx-icon
+                    aria-expanded={expanded}
+                    aria-label="icon"
+                    sprite="utility"
+                    symbol="chevrondown"
+                ></dx-icon>
+            </div>
+        </div>
+
+        <dx-button
+            if:false={mobile}
+            aria-expanded={expanded}
+            aria-label="icon"
+            class="header-toggle-button"
+            icon-symbol="close_panel"
+            variant="custom"
+            onclick={onToggleClick}
+            onmouseenter={onToggleMouseEnter}
+            onmouseleave={onToggleMouseLeave}
+        ></dx-button>
+        <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="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>
+            <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}
+            ></dx-tree>
+        </div>
+    </div>
+</template>

package/src/modules/dx/sidebar/sidebar.stories.ts

@@ -0,0 +1,188 @@
+import { html } from "lit-html";
+import {
+    coveoXMLDocsConfig,
+    coveoSFDocsConfig
+} from "../../utils-internal/coveo/coveo";
+import { SAMPLE_TREES, SAMPLE_TREES_WITH_METHODS } from "./__tests__/mockProps";
+
+export default {
+    title: "dx/dx-sidebar",
+    component: "dx-sidebar",
+    argTypes: {
+        header: {
+            defaultValue: "Guides",
+            control: {
+                type: "text"
+            }
+        },
+        trees: {
+            defaultValue: SAMPLE_TREES,
+            control: {
+                type: "object"
+            }
+        },
+        value: {
+            defaultValue: "terminology",
+            control: {
+                type: "text"
+            }
+        }
+    }
+};
+
+const styles = (addStyles: string = "") => html`
+    <style>
+        dx-sidebar {
+            ${addStyles}
+        }
+
+        body.sb-main-padded.sb-show-main {
+            padding: 0;
+        }
+
+        #root-inner {
+            display: flex;
+            height: 100%;
+        }
+
+        doc-content {
+            padding: 20px;
+        }
+    </style>
+`;
+
+export const XMLDocs = (args: any) => html`
+    ${styles("--dx-c-sidebar-min-height: 100%;")}
+
+    <dx-sidebar
+        header="${args.header}"
+        trees="${JSON.stringify(args.trees)}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
+    ></dx-sidebar>
+`;
+
+export const SFDocs = (args: any) => html`
+    ${styles("--dx-c-sidebar-min-height: 100%;")}
+
+    <dx-sidebar
+        header="${args.header}"
+        trees="${JSON.stringify(args.trees)}"
+        coveo-organization-id="${coveoSFDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoSFDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoSFDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoSFDocsConfig.coveoAdvancedQueryConfig}"
+    ></dx-sidebar>
+`;
+
+export const WidthAndMinHeightVariables = (args: any) => html`
+    ${styles(`
+        min-height: 500px;
+        --dx-c-sidebar-width: 400px;
+        --dx-c-sidebar-min-height: 500px;
+    `)}
+
+    <dx-sidebar
+        header="${args.header}"
+        trees="${JSON.stringify(args.trees)}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
+    ></dx-sidebar>
+`;
+
+export const WidthDrivenByContainer = (args: any) => html`
+    ${styles(`
+        display: block;
+        --dx-c-sidebar-min-height: 500px;
+        --dx-c-sidebar-width: unset;
+    `)}
+
+    <style>
+        @media screen and (min-width: 768px) {
+            .container {
+                width: 40%;
+            }
+        }
+    </style>
+    <div class="container">
+        <dx-sidebar
+            header="${args.header}"
+            trees="${JSON.stringify(args.trees)}"
+            value="${args.value}"
+            coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+            coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+            coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+            coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
+        ></dx-sidebar>
+    </div>
+`;
+
+export const WithBadges = (args: any) => html`
+    ${styles("--dx-c-sidebar-min-height: 500px;")}
+
+    <div class="container">
+        <dx-sidebar
+            header="${args.header}"
+            trees="${JSON.stringify(SAMPLE_TREES_WITH_METHODS)}"
+            value="${args.value}"
+            coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+            coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+            coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+            coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
+        ></dx-sidebar>
+    </div>
+`;
+
+export const PositionSticky = ({ header, trees, value }: any) => html`
+    ${styles(`
+        display: block;
+        position: sticky;
+        height: 100vh;
+
+        --dx-c-sidebar-height: 100%;
+        --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-lg);
+    `)}
+    <dx-sidebar
+        header="${header}"
+        trees="${JSON.stringify(trees)}"
+        value="${value}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
+    ></dx-sidebar>
+`;
+
+export const UseSlot = ({ header, trees, value }: any) => html`
+    ${styles(`
+        display: block;
+        position: sticky;
+        height: 100vh;
+
+        --dx-c-sidebar-height: 100%;
+        --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-lg);
+        --dx-c-sidebar-width: 300px;
+    `)}
+
+    <style>
+        span {
+            margin-left: auto;
+        }
+    </style>
+
+    <dx-sidebar
+        header="${header}"
+        trees="${JSON.stringify(trees)}"
+        value="${value}"
+        coveo-organization-id="${coveoXMLDocsConfig.coveoOrganizationId}"
+        coveo-public-access-token="${coveoXMLDocsConfig.coveoPublicAccessToken}"
+        coveo-search-hub="${coveoXMLDocsConfig.coveoSearchHub}"
+        coveo-advanced-query-config="${coveoXMLDocsConfig.coveoAdvancedQueryConfig}"
+    >
+        <span slot="header">I'm in the sidebar</span>
+    </dx-sidebar>
+`;