@salesforcedevs/dx-components 1.2.19-lightdom → 1.3.0

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -1,4 +1,6 @@
-header-mobile-nav-menu {
+@import "dxHelpers/reset";
+
+:host {
     --dx-c-color-background: var(--dx-g-brand-default-color-background);
     --dx-c-button-color-background-inactive: var(
         --dx-g-brand-default-button-color-background-inactive
@@ -14,3 +16,146 @@ header-mobile-nav-menu {
     );
     --dx-c-color-border-2: var(--dx-g-brand-default-color-border-2);
 }
+
+.nav-menu {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    max-height: 56vh;
+    overflow-y: auto;
+    padding: 0 var(--dx-g-spacing-sm) var(--dx-g-spacing-sm)
+        var(--dx-g-spacing-sm);
+    background: var(--dx-c-color-background);
+    box-shadow: 0 20px 28px 0 rgba(0, 20, 45, 0.08);
+    transform: translateY(0);
+    border-top: 1px solid transparent;
+    transition: var(--dx-g-transition-transform-2x),
+        var(--dx-g-transition-hue-1x);
+    z-index: 1000;
+}
+
+.nav-menu.has-scrollshadow {
+    border-color: var(--dx-c-color-border-2);
+}
+
+.nav-menu.state-closed {
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-16px);
+    pointer-events: none;
+}
+
+.nav-menu ul {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+
+.nav-menu_item {
+    display: flex;
+    flex-direction: column;
+}
+
+.nav-menu_item,
+.nav-menu_item_cta-main {
+    transition: var(--dx-g-transition-hue-1x);
+    border-radius: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item_cta-main {
+    justify-content: space-between;
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-base);
+    color: var(--dx-g-blue-vibrant-20);
+    line-height: 20px;
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.nav-menu ul > .nav-menu_item:not(:last-of-type) {
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item.state-open {
+    background: var(--dx-c-button-color-background-inactive);
+}
+
+.nav-menu_item_cta-main:not(.state-active):hover {
+    background: var(--dx-c-button-color-background-inactive);
+}
+
+.nav-menu_item.state-open .nav-menu_item_cta-main:hover {
+    background: var(--dx-c-button-color-background-inactive-hover);
+}
+
+.nav-menu_item.state-open .chevrondown {
+    transform: rotateX(180deg);
+}
+
+.nav-menu_item_cta-options {
+    position: relative;
+    display: none;
+    flex-direction: column;
+    width: 100%;
+}
+
+.nav-menu_item.state-open > .nav-menu_item_cta-options {
+    display: flex;
+}
+
+.nav-menu_item_cta {
+    height: var(--dx-g-spacing-3xl);
+}
+
+.nav-menu_item_cta-main.state-active {
+    background: var(--dx-c-button-color-background-active);
+    color: var(--dx-c-color);
+}
+
+.nav-menu_item_cta-main > span {
+    transform: translateY(3px); /* ghost padding */
+}
+
+.nav-menu_item_cta-sub {
+    --dx-c-button-secondary-color-hover: var(
+        --dx-c-button-color-background-inactive-hover
+    );
+
+    font-size: var(--dx-g-text-sm);
+    width: 100%;
+}
+
+.nav-menu_item_cta-sub::part(container) {
+    justify-content: flex-start;
+}
+
+.nav-menu_item_cta-sub.state-active {
+    text-decoration: underline;
+}
+
+.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type) {
+    padding-top: var(--dx-g-spacing-xs);
+    margin-top: var(--dx-g-spacing-xs);
+}
+
+.nav-menu_item > .nav-menu_item_cta-options:not(:first-of-type)::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: var(--dx-g-spacing-md);
+    width: calc(100% - var(--dx-g-spacing-xl));
+    height: 1px;
+    background: var(--dx-c-color-border-2);
+}
+
+.backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100vh;
+    width: 100vw;
+    z-index: -1;
+}

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode="light">
+<template>
     <nav
         aria-label="Navigation Menu"
         class={className}
@@ -6,10 +6,7 @@
         onscroll={onScroll}
     >
         <ul>
-            <template
-                for:each={navItems}
-                for:item="navItem"
-            >
+            <template for:each={navItems} for:item="navItem">
                 <li
                     class={navItem.liClassName}
                     key={navItem.id}
@@ -42,17 +39,12 @@
                         ></dx-icon>
                     </button>
                     <template if:true={navItem.options}>
-                        <template
-                            for:each={navItem.options}
-                            for:item="options"
-                        >
+                        <template for:each={navItem.options} for:item="options">
                             <div
                                 class="nav-menu_item_cta-options"
                                 key={options.id}
                             >
-                                <template
-                                    if:true={options.options}
-                                >
+                                <template if:true={options.options}>
                                     <template
                                         for:each={options.options}
                                         for:item="navSubItem"

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -4,8 +4,6 @@ import { OptionWithNested } from "typings/custom";
 import { deepmapOptions } from "dxUtils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
-    static renderMode = "light";
-
     @api open: boolean = false;
     @api value: string | null = null;
     @api pathname: string | null = null;
@@ -64,7 +62,7 @@ export default class HeaderMobileNavMenu extends LightningElement {
 
     renderedCallback() {
         if (!this.navElement) {
-            this.navElement = this.querySelector("nav");
+            this.navElement = this.template.querySelector("nav");
         }
         if (this.open && !this.wasOpen && this.value) {
             this.scrollToAccordianSection();
@@ -75,8 +73,10 @@ export default class HeaderMobileNavMenu extends LightningElement {
     }
 
     private scrollToAccordianSection() {
-        const element = this.querySelector(`li[data-id="${this.value}"]`);
-        const container = this.querySelector(".nav-menu");
+        const element = this.template.querySelector(
+            `li[data-id="${this.value}"]`
+        );
+        const container = this.template.querySelector(".nav-menu");
         if (element && container) {
             container.scrollTop = element.offsetTop - 8;
         }

package/src/modules/dx/headerNav/{headerNav.scoped.css → headerNav.css}

@@ -1,3 +1,5 @@
+@import "dxHelpers/reset";
+
 a {
     text-decoration: none;
 }

package/src/modules/dx/headerNav/headerNav.html

@@ -1,10 +1,7 @@
-<template lwc:render-mode="light">
+<template>
     <nav role="navigation" aria-label={ariaLabel}>
         <ul class="nav-list">
-            <template
-                for:each={navItems}
-                for:item="navItem"
-            >
+            <template for:each={navItems} for:item="navItem">
                 <li key={navItem.id}>
                     <dx-tab
                         if:false={navItem.options}

package/src/modules/dx/headerNav/headerNav.ts

@@ -1,8 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { TabVariant, OptionWithNested } from "typings/custom";
 export default class HeaderNav extends LightningElement {
-    static renderMode = "light";
-
     @api pathname: string | null = null;
     @api variant: TabVariant = "default";
     @api ariaLabel: string = "Primary Navigation";

package/src/modules/dx/headerSearch/headerSearch.css

@@ -1,3 +1,62 @@
-dx-header-search {
+@import "dxHelpers/reset";
+
+/* DESKTOP */
+
+:host {
     --toggle-width: var(--dx-g-spacing-5xl);
 }
+
+.desktop_search-container {
+    position: relative;
+    display: flex;
+    height: var(--dx-g-spacing-xl);
+    font-size: var(--dx-g-text-sm);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-gray-50);
+}
+
+.desktop_search-container dx-input {
+    --dx-c-input-width: calc(
+        var(--dx-c-header-search-width) - var(--toggle-width)
+    );
+}
+
+/* MOBILE */
+
+.mobile_search-button {
+    position: relative;
+    z-index: 3;
+}
+
+.mobile_search-dropdown {
+    --dx-c-popover-border-radius: 0;
+    --dx-c-popover-border: none;
+}
+
+.mobile_search-input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    transition: var(--dx-g-transition-hue-1x);
+    opacity: 0;
+    pointer-events: none;
+
+    --dx-c-input-border: none;
+    --dx-c-input-border-radius: 0;
+    --dx-c-input-border-active: none;
+    --dx-c-input-icon-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-input-padding: 0 var(--dx-g-spacing-4xl) 0 var(--dx-g-spacing-md);
+    --dx-c-input-background: var(--dx-g-brand-current-color-background-2);
+    --dx-c-input-background-active: var(
+        --dx-g-brand-current-color-background-2
+    );
+    --dx-c-input-height: 100% !important;
+    --dx-c-input-width: 100%;
+}
+
+.mobile_search-input.state-open {
+    opacity: 1;
+    pointer-events: auto;
+}

package/src/modules/dx/headerSearch/headerSearch.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode="light">
+<template>
     <div class={className} role="search" aria-label="Records Search">
         <!-- MOBILE -->
         <template if:true={mobile}>

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -12,8 +12,6 @@ import {
 const baseSearchHref = `/search`;
 
 export default class HeaderSearch extends LightningElement {
-    static renderMode = "light";
-
     @api mobile!: boolean;
     @api coveoOrganizationId!: string;
     @api coveoPublicAccessToken!: string;

package/src/modules/dx/icon/icon.css

@@ -1,10 +1,12 @@
-dx-icon {
+@import "dxHelpers/reset";
+
+:host {
     display: block;
 
     --dx-c-icon-color: currentColor;
 }
 
-dx-icon svg {
+svg {
     display: inherit;
     fill: var(--dx-c-icon-color);
     height: var(--dx-c-icon-size);

package/src/modules/dx/icon/icon.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode="light">
+<template>
     <svg
         aria-hidden="true"
         style={style}

package/src/modules/dx/icon/icon.ts

@@ -14,8 +14,6 @@ const sizeMap = {
 };
 
 export default class Icon extends LightningElement {
-    static renderMode = "light";
-
     @api sprite: IconSprite = "utility";
     @api size: IconSize = "small";
     @api symbol!: IconSymbol;

package/src/modules/dx/interactiveImage/interactiveImage.css

@@ -0,0 +1,59 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+article {
+    border: 1px solid var(--dx-g-gray-90);
+    border-radius: 0.3125rem;
+}
+
+header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    border-radius: 0.3125rem 0.3125rem 0 0;
+    background-color: var(--dx-g-gray-95);
+    font-family: var(--dx-g-font-sans);
+    color: var(--dx-g-gray-10);
+    padding: var(--dx-g-spacing-sm);
+}
+
+header span {
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-md);
+    font-size: var(--dx-g-text-sm);
+}
+
+footer {
+    border-radius: 0 0 0.3125rem 0.3125rem;
+}
+
+.body {
+    margin: var(--dx-g-spacing-md);
+    overflow-x: auto;
+}
+
+.body img {
+    min-width: 650px;
+}
+
+.controls {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+/* Breakpoints for mobile */
+
+@media screen and (max-width: 640px) {
+    header {
+        flex-direction: column;
+        align-items: flex-end;
+    }
+}
+
+@media screen and (max-width: 320px) {
+    .controls,
+    .controls dx-dropdown,
+    .controls dx-button {
+        width: 100%;
+    }
+}

package/src/modules/dx/interactiveImage/interactiveImage.html

@@ -0,0 +1,32 @@
+<template>
+    <article>
+        <header>
+            <span>{title}</span>
+            <div class="controls">
+                <template if:true={isSingleDownload}>
+                    <dx-button
+                        icon-symbol="download"
+                        href={singleDownloadHref}
+                        download={singleDownloadFilename}
+                    >
+                        {downloadButtonLabel}
+                    </dx-button>
+                </template>
+                <template if:false={isSingleDownload}>
+                    <dx-dropdown
+                        options={urls}
+                        onchange={handleDownloadOptionChange}
+                        placement="bottom-end"
+                    >
+                        <dx-button variant="primary" icon-symbol="chevrondown">
+                            {downloadButtonLabel}
+                        </dx-button>
+                    </dx-dropdown>
+                </template>
+            </div>
+        </header>
+        <div class="body">
+            <img src={featuredSrc} alt={title} />
+        </div>
+    </article>
+</template>

package/src/modules/dx/interactiveImage/interactiveImage.ts

@@ -0,0 +1,71 @@
+import { LightningElement, api } from "lwc";
+
+// Extracts filename and extension from a file URL
+const FILENAME_FROM_URL_REGEX = /(?=\w+\.\w{3,4}$).+/;
+const EXTENSION_FROM_URL_REGEX = /\.([^.]*)$/;
+
+export default class InteractiveImage extends LightningElement {
+    @api title!: string;
+    @api featuredSrc!: string;
+
+    @api
+    set downloadUrls(values: any) {
+        // Normalize input values
+        let urls;
+        if (typeof values === "string") {
+            if (values.startsWith("[")) {
+                urls = JSON.parse(values);
+            } else {
+                urls = [values];
+            }
+        } else {
+            urls = values;
+        }
+        // Ensure that we have some URLs
+        if (!urls || urls.length === 0) {
+            throw new Error(
+                `No download url found for interactive image with title "${this.title}"`
+            );
+        }
+        // Prepare download options with labels
+        this.urls = urls.map((url: string) => {
+            return {
+                label: this.getDownloadLabelFromUrl(url),
+                id: url
+            };
+        });
+    }
+    get downloadUrls() {
+        return this.urls;
+    }
+
+    private urls: { label: string; id: string }[] = [];
+
+    private get isSingleDownload() {
+        return this.urls.length === 1;
+    }
+
+    private get singleDownloadHref() {
+        return this.urls[0].id;
+    }
+
+    private get singleDownloadFilename() {
+        const pathParts = this.urls[0].id.match(FILENAME_FROM_URL_REGEX);
+        return pathParts ? pathParts[0] : "";
+    }
+
+    private get downloadButtonLabel() {
+        return this.isSingleDownload ? this.urls[0].label : "Download as...";
+    }
+
+    private handleDownloadOptionChange(event: CustomEvent) {
+        window.open(event.detail, "_blank");
+    }
+
+    private getDownloadLabelFromUrl(url: string): string {
+        const urlParts = url.match(EXTENSION_FROM_URL_REGEX);
+        return urlParts
+            ? `Download as ${urlParts[1].toUpperCase()}`
+            : "Download";
+    }
+}

package/src/modules/dx/logo/{logo.scoped.css → logo.css}

@@ -1,3 +1,6 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
 :host {
     --dx-c-logo-label-color: var(--dx-g-blue-vibrant-20);
 

package/src/modules/dx/logo/logo.html

@@ -1,4 +1,4 @@
-<template lwc:render-mode="light">
+<template>
     <a href={href} class="logo-link">
         <img src={imgSrc} alt={imgAlt} />
         <span class="dx-text-heading-7">{label}</span>

package/src/modules/dx/logo/logo.ts

@@ -1,8 +1,6 @@
 import { LightningElement, api } from "lwc";
 
 export default class Logo extends LightningElement {
-    static renderMode = "light";
-
     @api href: string = "/";
     @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
     @api imgAlt: string = "Salesforce log";

package/src/modules/dx/relativeDateTime/relativeDateTime.html

@@ -1,3 +1,3 @@
-<template lwc:render-mode="light">
+<template>
     <time title={original}>{value}</time>
 </template>

package/src/modules/dx/relativeDateTime/relativeDateTime.ts

@@ -1,7 +1,6 @@
 import { LightningElement, api } from "lwc";
 
 export default class RelativeDateTime extends LightningElement {
-    static renderMode = "light";
     @api messageWhenHoursPast: String = "";
     @api messageWhenDaysPast: String = "";
     @api messageWhenWeeksPast: String = "";

package/src/modules/dx/skipNavLink/{skipNavLink.scoped.css → skipNavLink.css}

@@ -1,3 +1,5 @@
+@import "dxHelpers/text";
+
 a {
     left: 0;
     top: 0;

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

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

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

@@ -1,5 +1,3 @@
 import { LightningElement } from "lwc";
 
-export default class SkipNavLink extends LightningElement {
-    static renderMode = "light";
-}
+export default class SkipNavLink extends LightningElement {}

package/src/modules/dxHelpers/card/card.css

@@ -12,16 +12,6 @@
     --dx-c-body-max-lines: 6;
 }
 
-.base-card {
-    display: block;
-
-    --dx-g-card-border: 1px solid var(--dx-g-gray-90);
-    --dx-g-card-border-radius: 16px;
-    --dx-g-card-item-spacing: 12px;
-    --dx-g-card-img-spacing: 20px;
-    --dx-c-body-max-lines: 6;
-}
-
 .dx-card-base {
     height: 100%;
 }

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -53,7 +53,7 @@ dx-tree:not(:last-child) {
     color: var(--dx-g-blue-vibrant-30);
 }
 
-.header-toggle-icon dx-icon svg {
+.header-toggle-icon dx-icon {
     transition: var(--dx-g-transition-transform-2x);
 }
 
@@ -122,7 +122,7 @@ dx-tree:not(:last-child) {
     margin-bottom: 0;
 }
 
-.container.container-mobile.collapsed .header-toggle-icon dx-icon svg {
+.container.container-mobile.collapsed .header-toggle-icon dx-icon {
     transform: rotateZ(-90deg);
 }
 

package/src/modules/dxHelpers/reset/reset.css

@@ -488,6 +488,7 @@ h4,
 h5,
 h6 {
     font-size: inherit;
+    font-weight: inherit;
 }
 
 /**

package/src/modules/dx/banner/banner.scoped.css

@@ -1,28 +0,0 @@
-.container {
-    --primary-color: var(--dx-g-cloud-blue-vibrant-50);
-    --secondary-color: var(--dx-g-cloud-blue-vibrant-40);
-
-    width: 100%;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    min-height: 24px;
-    padding: 0 var(--dx-g-page-padding-horizontal);
-    background: repeating-linear-gradient(
-        45deg,
-        var(--primary-color),
-        var(--primary-color) 20px,
-        var(--secondary-color) 20px,
-        var(--secondary-color) 40px
-    );
-}
-
-.container_inner {
-    height: 100%;
-    display: flex;
-    background: var(--primary-color);
-    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm);
-    color: white;
-    font-weight: bold;
-}