@salesforcedevs/dx-components 1.3.13 → 1.3.15

package/lwc.config.json

@@ -4,6 +4,7 @@
         { "npm": "@salesforcedevs/dw-components" }
     ],
     "expose": [
+        "dx/banner",
         "dx/brandThemeProvider",
         "dx/breadcrumbs",
         "dx/button",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.13",
+    "version": "1.3.15",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {
@@ -36,5 +36,5 @@
         "@types/vimeo__player": "^2.16.2",
         "eventsourcemock": "^2.0.0"
     },
-    "gitHead": "94b6a0ecb51f4bc853ec3083419de8256db2bd6a"
+    "gitHead": "4f666690d99a33edd60c92c55d84732b7feadb07"
 }

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

@@ -0,0 +1,46 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+.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;
+}
+
+.container a {
+    text-decoration: underline;
+    transition: var(--dx-g-transition-hue-1x);
+    margin-right: 4px;
+}
+
+.container a:hover {
+    opacity: 0.8;
+}
+
+.container dx-icon {
+    margin-right: var(--dx-g-spacing-sm);
+    margin-top: var(--dx-g-spacing-2xs);
+}

package/src/modules/dx/banner/banner.html

@@ -0,0 +1,13 @@
+<template>
+    <div class="container">
+        <div class="container_inner dx-text-body-4">
+            <dx-icon symbol="announcement"></dx-icon>
+            <!--
+                NOTE: Here we are rendering mark up using lwc:dom & innerHTML
+                option instead of slots because the html markup will come as a
+                property to the component from a configuration
+            -->
+            <div lwc:dom="manual" class="info-container"></div>
+        </div>
+    </div>
+</template>

package/src/modules/dx/banner/banner.ts

@@ -0,0 +1,12 @@
+import { LightningElement, api } from "lwc";
+import { setContainerInnerHtml } from "dxUtils/lwc";
+
+export default class Banner extends LightningElement {
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/TdSyKFPHXoBx7seM9" target="blank">Share your feedback</a>about our new site.</span>';
+
+    renderedCallback() {
+        const container = this.template.querySelector(".info-container");
+        setContainerInnerHtml(container, this.bannerMarkup);
+    }
+}

package/src/modules/dx/header/header.html

@@ -2,6 +2,10 @@
     <dx-brand-theme-provider brand={brand}>
         <header class={className}>
             <dx-skip-nav-link></dx-skip-nav-link>
+            <dx-banner
+                if:true={showBanner}
+                banner-markup={bannerMarkup}
+            ></dx-banner>
             <div class="header_l1">
                 <dx-logo label={title}></dx-logo>
                 <div class="header-cta-container">

package/src/modules/dx/hr/hr.css

@@ -49,7 +49,6 @@ dx-button::before {
     content: "";
     border-bottom: 2px solid var(--dx-g-gray-95);
     flex: 1 1;
-    transform: translateY(-2px); /* offset for display font ghost padding */
     margin: auto;
     margin-right: var(--dx-g-spacing-md);
 }

package/src/modules/dxBaseElements/headerBase/headerBase.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { Brand, OptionWithLink, OptionWithNested } from "typings/custom";
-import { toJson } from "dxUtils/normalizers";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 import { track } from "dxUtils/analytics";
 
 const VALID_BRANDS = [
@@ -41,6 +41,8 @@ export abstract class HeaderBase extends LightningElement {
     @api subtitle!: string;
     @api title: string = "Salesforce";
     @api version?: string | null = null;
+    @api bannerMarkup =
+        '<span><a href="https://forms.gle/oWYTbH9RvGyt9uxx7" target="blank">Share your feedback</a>about our new site.</span>';
 
     @api
     get navItems() {
@@ -59,6 +61,15 @@ export abstract class HeaderBase extends LightningElement {
         this._versions = toJson(value);
     }
 
+    @api
+    get showBanner() {
+        return this._showBanner && this.bannerMarkup;
+    }
+
+    set showBanner(value) {
+        this._showBanner = normalizeBoolean(value);
+    }
+
     private _navItems!: OptionWithNested[];
     private _versions!: OptionWithLink[];
     private matchMedia!: MediaQueryList;
@@ -67,6 +78,7 @@ export abstract class HeaderBase extends LightningElement {
     private showMobileNavMenu: boolean = false;
     private showNavScrollShadow: boolean = false;
     protected isSearchOpen: boolean = false;
+    private _showBanner?: boolean = false;
 
     get url() {
         return this.href ? new URL(this.href!) : window.location;