@salesforcedevs/docs-components 1.34.3-style-fix-alpha4 → 1.34.4-final-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.34.3-style-fix-alpha4",
+  "version": "1.34.4-final-alpha",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",

package/src/modules/doc/banner/banner.css

@@ -16,8 +16,6 @@
 }
 
 .icon {
-    --dx-c-icon-size: var(--dx-g-icon-size-lg);
-
     flex-shrink: 0;
     margin-top: var(--dx-g-spacing-smd);
     margin-right: var(--dx-g-spacing-sm);
@@ -73,6 +71,47 @@
     cursor: pointer;
 }
 
+/* Centered variant: the message is centered in the banner and the icon hangs
+   to its left. The close button is taken out of the flow so it doesn't offset
+   the centering. */
+.container_centered {
+    position: relative;
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    align-items: center;
+
+    /* Reserve the close button's width plus its right inset on both sides */
+    padding: 0
+        calc(
+            var(--dx-g-spacing-3xl) + var(--dx-g-spacing-xs) +
+                var(--doc-banner-padding-right)
+        );
+}
+
+.container_centered .icon {
+    grid-column: 1;
+    justify-self: end;
+    margin-top: 0;
+}
+
+.container_centered .main {
+    grid-column: 2;
+    align-items: center;
+    justify-content: center;
+}
+
+.container_centered .message {
+    text-align: center;
+}
+
+.container_centered .close {
+    position: absolute;
+    top: 50%;
+    right: var(--doc-banner-padding-right);
+    margin-left: 0;
+    transform: translateY(-50%);
+}
+
 @media (max-width: 1279px) {
     :host {
         --doc-banner-padding-left: var(--dx-g-spacing-xl);

package/src/modules/doc/banner/banner.html

@@ -1,16 +1,17 @@
 <template>
     <template lwc:if={showBanner}>
-        <div class="container" part="container">
+        <div class={containerClass} part="container">
             <dx-icon
                 class="icon"
-                symbol="info"
-                size="override"
-                color="gray-50"
+                sprite={iconSprite}
+                symbol={iconSymbol}
+                size={iconSize}
+                color={iconColor}
                 part="icon"
             ></dx-icon>
             <div class="main">
                 <div class="message" part="message" lwc:dom="manual"></div>
-                <div class="actions" part="actions">
+                <div lwc:if={hasActions} class="actions" part="actions">
                     <template lwc:if={hasPrimaryButton}>
                         <dx-button
                             href={buttonHref}

package/src/modules/doc/banner/banner.ts

@@ -1,4 +1,6 @@
 import { LightningElement, api } from "lwc";
+import { IconSize, IconSprite, IconSymbol } from "typings/custom";
+import { normalizeBoolean } from "dxUtils/normalizers";
 
 const BANNER_STORAGE_PREFIX = "doc-banner-";
 
@@ -13,6 +15,24 @@ export default class Banner extends LightningElement {
 
     @api dismissStorageKey = "";
 
+    @api
+    get centered(): boolean {
+        return this._centered;
+    }
+    set centered(value: boolean | string) {
+        this._centered = normalizeBoolean(value);
+    }
+
+    @api iconSprite: IconSprite = "utility";
+
+    @api iconSymbol: IconSymbol = "info";
+
+    @api iconColor = "gray-50";
+
+    @api iconSize: IconSize = "large";
+
+    private _centered = false;
+
     private _dismissed = false;
 
     connectedCallback() {
@@ -33,10 +53,18 @@ export default class Banner extends LightningElement {
         }
     }
 
+    get containerClass(): string {
+        return this._centered ? "container container_centered" : "container";
+    }
+
     get showBanner(): boolean {
         return !this._dismissed;
     }
 
+    get hasActions(): boolean {
+        return this.hasPrimaryButton || this.hasSecondaryAction;
+    }
+
     get hasPrimaryButton(): boolean {
         return !!(this.buttonLabel && this.buttonHref);
     }