Merge pull request #520 from Budibase/stackedlist-component

Stacked list component added

packages/builder/src/components/userInterface/temporaryPanelStructure.js

@@ -246,6 +246,66 @@ export default {
       name: "Blocks",
       isCategory: true,
       children: [
+        {
+          name: "List",
+          _component: "@budibase/standard-components/list",
+          description: "Renders all children once per record, of a given table",
+          icon: "ri-file-list-line",
+          properties: {
+            design: { ...all },
+            settings: [{ label: "Table", key: "model", control: ModelSelect }],
+          },
+          children: [],
+        },
+        {
+          _component: "@budibase/standard-components/stackedlist",
+          name: "Stacked List",
+          description:
+            "A basic card component that can contain content and actions.",
+          icon: "ri-archive-drawer-line",
+          children: [],
+          properties: {
+            design: { ...all },
+            settings: [
+              {
+                label: "Image",
+                key: "imageUrl",
+                control: Input,
+                placeholder: "{{{context.Image}}}",
+              },
+              {
+                label: "Heading",
+                key: "heading",
+                control: Input,
+                placeholder: "{{context.Heading}}",
+              },
+              {
+                label: "Text 1",
+                key: "text1",
+                control: Input,
+                placeholder: "{{context.Text 1}}",
+              },
+              {
+                label: "Text 2",
+                key: "text2",
+                control: Input,
+                placeholder: "{{context.Text 2}}",
+              },
+              {
+                label: "Text 3",
+                key: "text3",
+                control: Input,
+                placeholder: "{{context.Text 3}}",
+              },
+              {
+                label: "destinationUrl",
+                key: "destinationUrl",
+                control: Input,
+                placeholder: "/table/_id",
+              },
+            ],
+          },
+        },
         {
           _component: "@budibase/materialdesign-components/BasicCard",
           name: "Card",
@@ -407,17 +467,6 @@ export default {
         //  },
         //  children: [],
         // },
-        {
-          name: "List",
-          _component: "@budibase/standard-components/list",
-          description: "Renders all children once per record, of a given table",
-          icon: "ri-file-list-line",
-          properties: {
-            design: { ...all },
-            settings: [{ label: "Table", key: "model", control: ModelSelect }],
-          },
-          children: [],
-        },
         {
           name: "Record Detail",
           _component: "@budibase/standard-components/recorddetail",

packages/standard-components/components.json

@@ -249,6 +249,18 @@
 			"model": "models"
 		}
 	},
+	"stackedlist": {
+		"name": "Stacked List",
+		"description": "A stacked list component for displaying information",
+		"props": {
+			"imageUrl": "string",
+			"heading": "string",
+			"text1": "string",
+			"text2": "string",
+			"text3": "string",
+			"destinationUrl": "string"
+		}
+	},
 	"recorddetail": {
 		"description": "Loads a record, using an ID in the url",
 		"data": true,

packages/standard-components/src/StackedList.svelte

@@ -0,0 +1,89 @@
+<script>
+  export let imageUrl = ""
+  export let heading = ""
+  export let text1 = ""
+  export let text2 = ""
+  export let text3 = ""
+  export let destinationUrl = ""
+
+  $: showImage = !!imageUrl
+</script>
+
+<div class="container">
+  <a href={destinationUrl}>
+    <div class="content">
+      {#if showImage}
+        <div class="image-block">
+          <img class="image" src={imageUrl} alt="" />
+        </div>
+      {/if}
+      <h2 class="heading">{heading}</h2>
+      <h4 class="text">{text1}</h4>
+      <h4 class="text">{text2}</h4>
+      <h4 class="text3">{text3}</h4>
+    </div>
+  </a>
+</div>
+
+<style>
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+  .container {
+    padding: 20px;
+  }
+
+  .content {
+    display: grid;
+    grid-template-columns: 120px 300px 1fr 1fr 1fr;
+    align-items: center;
+    gap: 20px;
+    min-height: 80px;
+  }
+
+  @media (max-width: 800px) {
+    .content {
+      display: grid;
+      grid-template-columns: 1fr;
+      gap: 20px;
+    }
+  }
+  .image-block {
+    width: 80px;
+    height: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .image {
+    padding: 2px;
+    max-width: 80px;
+    max-height: 80px;
+    margin-right: 20px;
+  }
+
+  .heading {
+    font-size: 24px;
+    margin: 0;
+    min-width: 200px;
+  }
+
+  .text {
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  .text3 {
+    text-align: end;
+    font-size: 16px;
+    font-weight: 400;
+  }
+
+  @media (max-width: 800px) {
+    .text3 {
+      text-align: start;
+    }
+  }
+</style>

packages/standard-components/src/index.js

@@ -23,4 +23,5 @@ export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
 export { default as datamap } from "./DataMap.svelte"
 export { default as embed } from "./Embed.svelte"
+export { default as stackedlist } from "./StackedList.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"