Merge pull request #59 from cesarParra/logos

Logos LWC component

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=04tDm0000011MfyIAE)
-[![Install Unlocked Package in Production](assets/btn-install-unlocked-package-production.png)](https://login.salesforce.com/packaging/installPackage.apexp?p0=04tDm0000011MfyIAE)
+[![Install Unlocked Package in a Sandbox](assets/btn-install-unlocked-package-sandbox.png)](https://test.salesforce.com/packaging/installPackage.apexp?p0=04tDm0000011Mg8IAE)
+[![Install Unlocked Package in Production](assets/btn-install-unlocked-package-production.png)](https://login.salesforce.com/packaging/installPackage.apexp?p0=04tDm0000011Mg8IAE)
 
 Install with SF CLI:
 
 ```shell
-sf package install --apex-compile package --wait 20 --package 04tDm0000011MfyIAE
+sf package install --apex-compile package --wait 20 --package 04tDm0000011Mg8IAE
 ```
 
 Install with SFDX CLI:
 
 ```shell
-sfdx force:package:install --apexcompile package --wait 20 --package 04tDm0000011MfyIAE
+sfdx force:package:install --apexcompile package --wait 20 --package 04tDm0000011Mg8IAE
 ```
 
 ## Components
@@ -1324,6 +1324,36 @@ in a community page.
 }
 ```
 
+### Logos
+
+The `Logos` component allows you to display a list of logos. It can be used
+to display a list of sponsors, partners, clients, etc.
+
+Supports being placed 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.
+- `logos` - List of logos to display. Each logo should be a map with the following format:
+  - `name` - The name of the logo.
+  - `src` - The URL of the image to display.
+
+```json
+{
+  "title": <<String value or expression>>,
+  "logos": [
+    {
+      "name": <<String value or expression>>,
+      "src": <<String value or expression>>
+    }
+  ]
+}
+```
+
 ## Contributing
 
 Contributions are welcome! Feel free to open an issue or submit a pull request.

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

@@ -0,0 +1,21 @@
+<template>
+  <div if:true={ready} class="relative isolate overflow-hidden bg-dxp-bg-root">
+    <div class="bg-dxp-bg-root py-24 sm:py-32">
+      <div class="mx-auto max-w-7xl px-6 lg:px-8">
+        <h2 class="text-center text-lg font-semibold leading-8 text-gray-900">{computed.title}</h2>
+        <div
+          class="mx-auto mt-10 grid max-w-lg auto-cols-max grid-flow-row place-content-center items-center gap-x-8
+          gap-y-10 sm:max-w-xl sm:gap-x-10 md:grid-flow-col md:auto-cols-auto lg:mx-0 lg:max-w-none">
+          <template for:each={computed.logos} for:item="logo">
+            <img key={logo.name} class="max-h-12 w-full object-contain"
+                 src={logo.src} alt={logo.name} width="158"
+                 height="48">
+          </template>
+        </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/logos/logos.js

@@ -0,0 +1,48 @@
+import TwElement from "c/twElement";
+import evaluate from '@salesforce/apex/FormulaEvaluatorUiController.evaluate';
+import { api, wire } from "lwc";
+
+export default class Logos 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;
+  }
+
+  _validate() {
+    if (!this.computed) {
+      return;
+    }
+    // Computed should contain a "title" property.
+    if (!("title" in this.computed)) {
+      this.error = 'Hero component requires a title.';
+    }
+
+    // Computed should contain a "logos" property.
+    if (!("logos" in this.computed)) {
+      this.error = 'Hero component requires a "logos" key.';
+    }
+  }
+}

expression-components/main/ui/lwc/logos/logos.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>Logos</description>
+    <isExposed>true</isExposed>
+    <masterLabel>Logos</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>

sfdx-project.json

@@ -10,8 +10,8 @@
     {
       "path": "expression-components",
       "package": "Expression Components",
-      "versionName": "Version 0.2",
-      "versionNumber": "0.2.0.NEXT",
+      "versionName": "Version 0.3",
+      "versionNumber": "0.3.0.NEXT",
       "default": false,
       "dependencies": [
         {
@@ -33,7 +33,7 @@
     "Expression (Unlocked)": "0HoDm000000XZKSKA4",
     "Expression Components": "0HoDm000000XZKhKAO",
     "Expression (Unlocked)@1.11.0-1": "04tDm0000011MfoIAE",
-    "Expression Components@0.1.0-2": "04tDm0000011MftIAE",
-    "Expression Components@0.2.0-1": "04tDm0000011MfyIAE"
+    "Expression Components@0.2.0-1": "04tDm0000011MfyIAE",
+    "Expression Components@0.3.0-1": "04tDm0000011Mg8IAE"
   }
 }