Banner LWC component (#143)

README.md

@@ -123,6 +123,7 @@ System.debug(result); // (Acme Inc. Acme Subsidiary)
     - [Accordion](https://cesarparra.github.io/expression/docs/components/accordion)
     - [Alert](https://cesarparra.github.io/expression/docs/components/alert)
     - [Avatar](https://cesarparra.github.io/expression/docs/components/avatar)
+    - [Banner](https://cesarparra.github.io/expression/docs/components/banner)
     - [Button](https://cesarparra.github.io/expression/docs/components/button)
     - [Avatars (Stacked)](https://cesarparra.github.io/expression/docs/components/stacked-avatars)
     - [Features](https://cesarparra.github.io/expression/docs/components/features)

docs/src/app/docs/components/banner/page.md

@@ -0,0 +1,33 @@
+---
+title: Banner
+nextjs:
+  metadata:
+    title: Banner
+    description: Expression Banner Component
+---
+
+The `Banner` component can be used to show marketing messages, promotions, or other important information to users
+at the top or bottom of the page.
+
+## Targets
+
+{% badge text="Experience Builder Sites" color="indigo" /%}
+
+## Example
+
+![Banner](./../../assets/components/banner/banner.png)
+
+## Data Structure
+
+The `Banner` component expects an Expression that evaluates a string:
+
+```typescript
+string
+```
+
+The content can be any valid HTML content.
+
+## Properties
+
+* Sticky Variant: Whether the banner should be sticky or not and where. Options are `top`, `bottom`, or `none`.
+* Dismissable: Whether the banner can be dismissed by the user.

docs/src/lib/navigation.json

@@ -119,6 +119,10 @@
         "title": "Avatars (Stacked)",
         "href": "/docs/components/stacked-avatars"
       },
+      {
+        "title": "Banner",
+        "href": "/docs/components/banner"
+      },
       {
         "title": "Button",
         "href": "/docs/components/button"
@@ -186,4 +190,4 @@
       }
     ]
   }
-]
+]

docs/src/markdoc/config.js

@@ -8,7 +8,7 @@ const variables = {
   nodes,
   variables: {
     packageId: "04tRb000000zZVVIA2",
-    componentPackageId: "04tRb000000sGz3IAE",
+    componentPackageId: "04tRb0000011OhFIAU",
     urlPrefix: IS_PROD ? "/expression" : "",
   }
 }

expression-components/main/ui/components/base/lwc/bannerBase/bannerBase.html

@@ -0,0 +1,25 @@
+<template>
+    <div tabindex="-1"
+         class={bannerClasses}>
+        <div class="flex items-center mx-auto">
+            <p class="flex items-center text-sm font-normal text-dxp-text-contrast">
+                <span>
+                    <lightning-formatted-rich-text value={content}></lightning-formatted-rich-text>
+                </span>
+            </p>
+        </div>
+        <div lwc:if={dismissable} class="flex items-center">
+            <button type="button"
+                    onclick={hideBanner}
+                    class="flex-shrink-0 inline-flex justify-center w-7 h-7 items-center
+                    text-dxp-text-contrast hover:bg-gray-200 hover:text-dxp-text-contrast-3 rounded-lg text-sm p-1.5">
+                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
+                     viewBox="0 0 14 14">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+                </svg>
+                <span class="sr-only">Close banner</span>
+            </button>
+        </div>
+    </div>
+</template>

expression-components/main/ui/components/base/lwc/bannerBase/bannerBase.js

@@ -0,0 +1,39 @@
+import {api} from 'lwc';
+import {LightningElement} from 'lwc';
+import {classNames} from 'c/utils';
+
+export default class BannerBase extends LightningElement {
+  @api
+  content;
+
+  /**
+   * @type {"top" | "bottom" | "none"}
+   */
+  @api
+  stickyVariant = 'top';
+
+  @api
+  dismissable = false;
+
+  _isHidden = false;
+
+  get bannerClasses() {
+    if (this._isHidden) {
+      return 'hidden';
+    }
+
+    const shared = 'start-0 z-50 flex justify-between w-full p-4 border-gray-200 bg-gray-50';
+
+    return classNames(
+      shared,
+      {'fixed': this.stickyVariant !== 'none'},
+      {'top-0 border-b': this.stickyVariant === 'top'},
+      {'bottom-0 border-t': this.stickyVariant === 'bottom'},
+      {'border': this.stickyVariant === 'none'}
+    );
+  }
+
+  hideBanner() {
+    this._isHidden = true;
+  }
+}

expression-components/main/ui/components/base/lwc/bannerBase/bannerBase.js-meta.xml

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>60.0</apiVersion>
+    <description>Banner Base</description>
+    <isExposed>false</isExposed>
+    <masterLabel>Banner Base</masterLabel>
+</LightningComponentBundle>

expression-components/main/ui/components/exposed/lwc/banner/banner.html

@@ -0,0 +1,8 @@
+<template>
+    <c-expression-element-container cannot-show-preview={cannotShowPreview} error={error} loading={loading}>
+        <div if:true={ready}>
+            <c-banner-base content={computed} sticky-variant={stickyVariantLowered}
+                           dismissable={dismissable}></c-banner-base>
+        </div>
+    </c-expression-element-container>
+</template>

expression-components/main/ui/components/exposed/lwc/banner/banner.js

@@ -0,0 +1,33 @@
+import {api} from "lwc";
+import ExpressionSiteElement from "c/expressionSiteElement";
+import {z} from 'c/zod';
+
+export default class Banner extends ExpressionSiteElement {
+  @api contextUrlParam;
+  @api previewContextId;
+  @api expr;
+  @api respectSharing;
+  @api stickyVariant;
+  @api dismissable;
+
+  get stickyVariantLowered() {
+    return this.stickyVariant?.toLowerCase();
+  }
+
+  validate() {
+    if (!this.computed) {
+      return;
+    }
+
+    const bannerSchema = z.string();
+
+    const validationResult = bannerSchema.safeParse(this.computed);
+    if (!validationResult.success) {
+      this.error = {
+        message: 'Banner component requires a string.',
+        rawError: JSON.stringify(validationResult.error.format(), null, 2),
+      };
+      return;
+    }
+  }
+}

expression-components/main/ui/components/exposed/lwc/banner/banner.js-meta.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>60.0</apiVersion>
+    <description>Banner</description>
+    <isExposed>true</isExposed>
+    <masterLabel>Banner</masterLabel>
+    <targets>
+        <target>lightningCommunity__Default</target>
+        <target>lightningCommunity__Page</target>
+    </targets>
+    <targetConfigs>
+        <targetConfig targets="lightningCommunity__Default">
+            <property name="contextUrlParam" type="String" required="false" label="Context URL Parameter"
+                      description="Optional - The name of the URL parameter that contains the context ID."/>
+            <property name="previewContextId" type="String" required="false" label="Preview Context ID"
+                      description="Optional - The ID of the context record to use when previewing the component in the builder."/>
+            <property name="expr" type="String" placeholder="1 + 1" required="true" label="Formula Expression"
+                      description="Formula expression to be evaluated." default=""/>
+            <property name="respectSharing" type="Boolean" default="true" label="Respect Sharing"
+                      description="Whether to run the evaluation with or without sharing."/>
+            <property name="stickyVariant" label="Sticky Variant" type="String" datasource="Top,Bottom,None"
+                      description="Whether the banner should stick to the top or bottom of the page, or not at all."/>
+            <property name="dismissable" type="Boolean" default="true" label="Dismissable"
+                      description="Whether the banner can be dismissed by the user."/>
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>

sfdx-project.json

@@ -12,8 +12,8 @@
     {
       "path": "expression-components",
       "package": "Expression Components",
-      "versionName": "Version 1.4",
-      "versionNumber": "1.4.0.NEXT",
+      "versionName": "Version 1.5",
+      "versionNumber": "1.5.0.NEXT",
       "ancestorVersion": "HIGHEST",
       "default": false,
       "dependencies": [
@@ -38,6 +38,7 @@
     "Expression Components": "0HoHu000000TNMFKA4",
     "Expression [email protected]": "04tRb000000sGz3IAE",
     "[email protected]": "04tRb000000yvufIAA",
-    "[email protected]": "04tRb000000zZVVIA2"
+    "[email protected]": "04tRb000000zZVVIA2",
+    "Expression [email protected]": "04tRb0000011OhFIAU"
   }
 }