Merge pull request #58 from cesarParra/hero

Hero

.gitignore

@@ -45,3 +45,4 @@ $RECYCLE.BIN/
 **/venv/
 /force-app/main/default/profiles/
 /IlluminatedCloud/Expression/OfflineSymbolTable.zip
+/src-pull/main

README.md

@@ -1183,19 +1183,19 @@ by the `Expression` language.
 
 ### Unlocked Package (`expression` namespace)
 
-[![Install Unlocked Package in a Sandbox](assets/btn-install-unlocked-package-sandbox.png)](https://test.salesforce.com/packaging/installPackage.apexp?p0=04tDm0000011MftIAE)
-[![Install Unlocked Package in Production](assets/btn-install-unlocked-package-production.png)](https://login.salesforce.com/packaging/installPackage.apexp?p0=04tDm0000011MftIAE)
+[![Install Unlocked Package in a Sandbox](assets/btn-install-unlocked-package-sandbox.png)](https://test.salesforce.com/packaging/installPackage.apexp?p0=04tDm0000011MfyIAE)
+[![Install Unlocked Package in Production](assets/btn-install-unlocked-package-production.png)](https://login.salesforce.com/packaging/installPackage.apexp?p0=04tDm0000011MfyIAE)
 
 Install with SF CLI:
 
 ```shell
-sf package install --apex-compile package --wait 20 --package 04tDm0000011MftIAE
+sf package install --apex-compile package --wait 20 --package 04tDm0000011MfyIAE
 ```
 
 Install with SFDX CLI:
 
 ```shell
-sfdx force:package:install --apexcompile package --wait 20 --package 04tDm0000011MftIAE
+sfdx force:package:install --apexcompile package --wait 20 --package 04tDm0000011MfyIAE
 ```
 
 ## Components
@@ -1287,6 +1287,43 @@ The following formula can be used to query for Navigation Menu Items and display
 }
 ```
 
+### Hero
+
+The `Hero` component allows you to display a hero image with a title and description. It can be used
+in a community page.
+
+#### Properties
+
+- `Formula Expression` - The expression to evaluate. This expression should evaluate to a map with the following format:
+
+##### Map Format
+
+- `title` - The title to display.
+- `description` Optional - The description to display.
+- `callToAction` Optional - The call to action to display. This should be a map with the following format:
+  - `label` - The label to display.
+  - `url` - The URL to navigate to when the call to action is clicked.
+- `secondaryAction` Optional - The secondary action to display. This should be a map with the following format:
+  - `label` - The label to display.
+  - `url` - The URL to navigate to when the secondary action is clicked.
+- `bannerImage` Optional - The URL of the image to display.
+
+```json
+{
+  "title": <<String value or expression>>,
+  "description": <<String value or expression>>,
+  "callToAction": {
+    "label": <<String value or expression>>,
+    "url": <<String value or expression>>
+  },
+  "secondaryAction": {
+    "label": <<String value or expression>>,
+    "url": <<String value or expression>>
+  },
+  "bannerImage": <<String value or expression>>
+}
+```
+
 ## Contributing
 
 Contributions are welcome! Feel free to open an issue or submit a pull request.

expression-components/main/ui/lwc/hero/hero.html

@@ -0,0 +1,30 @@
+<template>
+  <div if:true={ready} class="relative isolate overflow-hidden bg-dxp-bg-root">
+    <div class={containerClasses}>
+      <div class={mainClasses}>
+        <h1 class="mt-10 text-4xl font-bold tracking-tight text-dxp-text-contrast sm:text-6xl">{computed.title}</h1>
+        <p if:true={computed.description} class="mt-6 text-lg leading-8 text-dxp-text-contrast-2">{computed.description}</p>
+        <div class={buttonClasses}>
+          <a if:true={computed.callToAction} href={computed.callToAction.url} class="rounded-md bg-dxp-brand
+          px-3.5 py-2.5 text-sm font-semibold text-dxp-brand-foreground shadow-sm hover:bg-dxp-brand-2
+          focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2
+          focus-visible:outline-dxp-brand">
+            {computed.callToAction.label}
+          </a>
+          <a if:true={computed.secondaryAction} href={computed.secondaryAction.url} class="text-sm font-semibold
+          leading-6 text-dxp-text-contrast">Learn more <span aria-hidden="true">→</span></a>
+        </div>
+      </div>
+      <div if:true={computed.bannerImage} class="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32">
+        <div class="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
+          <div class="-m-2 rounded-xl bg-gray-900/5 p-2 ring-1 ring-inset ring-gray-900/10 lg:-m-4 lg:rounded-2xl lg:p-4">
+            <img src={computed.bannerImage} alt="Banner" width="2432" height="1442" class="w-[76rem] rounded-md shadow-2xl ring-1 ring-gray-900/10">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div if:true={error}>
+    <c-alert title="Error parsing expression" message={error}></c-alert>
+  </div>
+</template>

expression-components/main/ui/lwc/hero/hero.js

@@ -0,0 +1,70 @@
+import TwElement from "c/twElement";
+import evaluate from '@salesforce/apex/FormulaEvaluatorUiController.evaluate';
+import { api, wire } from "lwc";
+import { classNames } from 'c/utils';
+
+export default class Hero extends TwElement {
+  @api expr;
+
+  computed;
+  error;
+
+  @wire(evaluate, {recordId: '', formula: '$expr'})
+  evaluate({error, data}) {
+    if (error) {
+      console.error(error);
+      this.error = error.body.message;
+    } else {
+      this.computed = data;
+      this._validate();
+    }
+  }
+
+  get loading() {
+    return !this.computed && !this.error;
+  }
+
+  get hasError() {
+    return this.error;
+  }
+
+  get ready() {
+    return !this.loading && !this.hasError;
+  }
+
+  get containerClasses() {
+    return classNames(
+      'mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:px-8 lg:py-40',
+      {'lg:flex': this.hasImage}
+    );
+  }
+
+  get mainClasses() {
+    return classNames(
+      'mx-auto lg:mx-0 lg:flex-shrink-0 lg:pt-8',
+      {'max-w-2xl lg:max-w-xl': this.hasImage},
+      {'text-center': !this.hasImage}
+    );
+  }
+
+  get buttonClasses() {
+    return classNames(
+      'mt-10 flex items-center gap-x-6',
+      {'justify-center': !this.hasImage}
+    );
+  }
+
+  get hasImage() {
+    return this.computed && this.computed.bannerImage;
+  }
+
+  _validate() {
+    if (!this.computed) {
+      return;
+    }
+    // Computed should contain a "title" property.
+    if (!("title" in this.computed)) {
+      this.error = 'Hero component requires a title.';
+    }
+  }
+}

expression-components/main/ui/lwc/hero/hero.js-meta.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <apiVersion>58.0</apiVersion>
+    <description>Hero</description>
+    <isExposed>true</isExposed>
+    <masterLabel>Hero</masterLabel>
+    <targets>
+        <target>lightningCommunity__Default</target>
+        <target>lightningCommunity__Page</target>
+    </targets>
+    <targetConfigs>
+        <targetConfig targets="lightningCommunity__Default">
+            <property name="expr" type="String" placeholder="1 + 1" required="true" label="Formula Expression"
+                      description="Formula expression to be evaluated." default="" />
+        </targetConfig>
+    </targetConfigs>
+</LightningComponentBundle>

expression-components/main/ui/lwc/navBar/navBar.html

@@ -21,7 +21,11 @@
         </template>
       </div>
       <div if:true={computed.callToAction} class="hidden lg:flex lg:flex-1 lg:justify-end">
-        <button onclick={callToAction} type="button" class="rounded-md bg-dxp-brand px-3 py-2 text-sm font-semibold text-dxp-brand-foreground shadow-sm hover:bg-dxp-brand-1 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dxp-brand-1">{computed.callToAction.label}</button>
+        <button onclick={callToAction} type="button" class="rounded-md bg-dxp-brand px-3 py-2 text-sm
+        font-semibold text-dxp-brand-foreground shadow-sm hover:bg-dxp-brand-1 focus-visible:outline
+        focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dxp-brand-1">
+          {computed.callToAction.label}
+        </button>
       </div>
     </nav>
     <div if:true={isOpen} class="lg:hidden" role="dialog" aria-modal="true">

expression-components/main/ui/lwc/utils/classnames.js

@@ -0,0 +1,47 @@
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+
+const hasOwn = {}.hasOwnProperty;
+
+const classNames = (...args) => {
+  const classes = [];
+
+  for (let i = 0; i < args.length; i++) {
+    const arg = args[i];
+    if (!arg) continue;
+
+    const argType = typeof arg;
+
+    if (argType === "string" || argType === "number") {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      if (arg.length) {
+        const inner = classNames.apply(null, arg);
+        if (inner) {
+          classes.push(inner);
+        }
+      }
+    } else if (argType === "object") {
+      if (
+        arg.toString !== Object.prototype.toString &&
+        !arg.toString.toString().includes("[native code]")
+      ) {
+        classes.push(arg.toString());
+        continue;
+      }
+
+      for (const key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(" ");
+};
+
+export { classNames };

expression-components/main/ui/lwc/utils/utils.js

@@ -0,0 +1 @@
+export * from "./classnames.js";

expression-components/main/ui/lwc/utils/utils.js-meta.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+  <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+      <isExposed>false</isExposed>
+  </LightningComponentBundle>

sfdx-project.json

@@ -5,20 +5,24 @@
       "package": "Expression (Unlocked)",
       "versionName": "Version 1.11",
       "versionNumber": "1.11.0.NEXT",
-      "default": true
+      "default": false
     },
     {
       "path": "expression-components",
       "package": "Expression Components",
-      "versionName": "Version 0.1",
-      "versionNumber": "0.1.0.NEXT",
+      "versionName": "Version 0.2",
+      "versionNumber": "0.2.0.NEXT",
       "default": false,
       "dependencies": [
         {
           "package": "Expression (Unlocked)",
           "versionNumber": "1.11.0.LATEST"
         }
       ]
+    },
+    {
+      "path": "src-pull",
+      "default": true
     }
   ],
   "name": "Expression",
@@ -29,6 +33,7 @@
     "Expression (Unlocked)": "0HoDm000000XZKSKA4",
     "Expression Components": "0HoDm000000XZKhKAO",
     "Expression (Unlocked)@1.11.0-1": "04tDm0000011MfoIAE",
-    "Expression [email protected]": "04tDm0000011MftIAE"
+    "Expression [email protected]": "04tDm0000011MftIAE",
+    "Expression [email protected]": "04tDm0000011MfyIAE"
   }
-}
+}

tailwind.config.js

@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./expression-components/**/*.{html,js}"],
+  important: true,
   theme: {
     extend: {
       colors: {