Merge pull request #535 from Budibase/Card-component

New card component

packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte

@@ -168,6 +168,9 @@
     max-width: 200px;
     text-overflow: ellipsis;
     border: 1px solid var(--grey-4);
+    overflow: hidden;
+    white-space: pre;
+    box-sizing: border-box;
   }
 
   tbody tr {
@@ -187,6 +190,7 @@
 
   .popovers {
     display: flex;
+    gap: var(--spacing-m);
   }
 
   .no-data {

packages/builder/src/components/userInterface/ComponentsHierarchy.svelte

@@ -94,10 +94,6 @@
     margin: 0 0 0 5px;
   }
 
-  :global(svg) {
-    transition: 0.2s;
-  }
-
   .rotate :global(svg) {
     transform: rotate(-90deg);
   }

packages/builder/src/components/userInterface/PageLayout.svelte

@@ -81,10 +81,6 @@
     color: var(--grey-7);
   }
 
-  :global(svg) {
-    transition: 0.2s;
-  }
-
   .rotate :global(svg) {
     transform: rotate(-90deg);
   }

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

@@ -70,6 +70,20 @@ export const layout = [
       { label: "no wrap", value: "noWrap" },
     ],
   },
+  {
+    label: "Gap",
+    key: "gap",
+    control: OptionSelect,
+    options: [
+      { label: "None", value: "0px" },
+      { label: "4px", value: "4px" },
+      { label: "8px", value: "8px" },
+      { label: "16px", value: "16px" },
+      { label: "20px", value: "20px" },
+      { label: "32px", value: "32px" },
+      { label: "64px", value: "64px" },
+    ],
+  },
 ]
 
 export const margin = [

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

@@ -311,6 +311,174 @@ export default {
             ],
           },
         },
+        {
+          name: "Card",
+          description: "Card components",
+          icon: "ri-layout-bottom-line",
+          commonProps: {},
+          children: [
+            {
+              _component: "@budibase/standard-components/card",
+              name: "Vertical",
+              description:
+                "A basic card component that can contain content and actions.",
+              icon: "ri-layout-column-line",
+              children: [],
+              properties: {
+                design: { ...all },
+                settings: [
+                  {
+                    label: "Image",
+                    key: "imageUrl",
+                    control: Input,
+                    placeholder: "Image",
+                  },
+                  {
+                    label: "Heading",
+                    key: "heading",
+                    control: Input,
+                    placeholder: "Heading",
+                  },
+                  {
+                    label: "Description",
+                    key: "description",
+                    control: Input,
+                    placeholder: "Description",
+                  },
+                  {
+                    label: "Link Text",
+                    key: "linkText",
+                    control: Input,
+                    placeholder: "Link Text",
+                  },
+                  {
+                    label: "Link Url",
+                    key: "linkUrl",
+                    control: Input,
+                    placeholder: "Link URL",
+                  },
+                  {
+                    label: "Link Color",
+                    key: "color",
+                    control: Input,
+                    placeholder: "Link Color",
+                  },
+                  {
+                    label: "Hover Color",
+                    key: "linkHoverColor",
+                    control: Input,
+                    placeholder: "Hover Color",
+                  },
+                  {
+                    label: "Image Height",
+                    key: "imageHeight",
+                    control: OptionSelect,
+                    options: ["12rem", "16rem", "20rem", "24rem"],
+                    placeholder: "Image Height",
+                  },
+                  {
+                    label: "Card Width",
+                    key: "cardWidth",
+                    control: OptionSelect,
+                    options: ["16rem", "20rem", "24rem"],
+                    placeholder: "Card Width",
+                  },
+                ],
+              },
+            },
+            {
+              _component: "@budibase/standard-components/cardhorizontal",
+              name: "Horizontal",
+              description:
+                "A basic card component that can contain content and actions.",
+              icon: "ri-layout-row-line",
+              children: [],
+              properties: {
+                design: { ...all },
+                settings: [
+                  {
+                    label: "Image",
+                    key: "imageUrl",
+                    control: Input,
+                    placeholder: "Image",
+                  },
+                  {
+                    label: "Heading",
+                    key: "heading",
+                    control: Input,
+                    placeholder: "Heading",
+                  },
+                  {
+                    label: "Description",
+                    key: "description",
+                    control: Input,
+                    placeholder: "Description",
+                  },
+                  {
+                    label: "Subtext",
+                    key: "subtext",
+                    control: Input,
+                    placeholder: "Subtext",
+                  },
+                  {
+                    label: "Link Text",
+                    key: "linkText",
+                    control: Input,
+                    placeholder: "Link Text",
+                  },
+                  {
+                    label: "Link Url",
+                    key: "linkUrl",
+                    control: Input,
+                    placeholder: "Link URL",
+                  },
+                  {
+                    label: "Link Color",
+                    key: "color",
+                    control: Input,
+                    placeholder: "Link Color",
+                  },
+                  {
+                    label: "Hover Color",
+                    key: "linkHoverColor",
+                    control: Input,
+                    placeholder: "Hover Color",
+                  },
+                  {
+                    label: "Card Width",
+                    key: "cardWidth",
+                    control: OptionSelect,
+                    options: [
+                      "24rem",
+                      "28rem",
+                      "32rem",
+                      "40rem",
+                      "48rem",
+                      "60rem",
+                      "100%",
+                    ],
+                    placeholder: "Card Height",
+                  },
+                  {
+                    label: "Image Width",
+                    key: "imageWidth",
+                    control: OptionSelect,
+                    options: ["8rem", "12rem", "16rem"],
+                    placeholder: "Image Width",
+                  },
+                  {
+                    label: "Image Height",
+                    key: "imageHeight",
+                    control: OptionSelect,
+                    options: ["8rem", "12rem", "16rem", "auto"],
+                    placeholder: "Image Height",
+                  },
+                ],
+              },
+            },
+          ],
+        },
+
         {
           _component: "@budibase/materialdesign-components/BasicCard",
           name: "Card",

packages/standard-components/components.json

@@ -268,6 +268,81 @@
 			"model": "models"
 		}
 	},
+	"card": {
+		"name": "Card",
+		"props": {
+			"imageUrl": "string",
+			"heading": "string",
+			"description": "string",
+			"linkText": "string",
+			"linkUrl": "string",
+			"color": "string",
+			"linkHoverColor": "string",
+			"imageHeight": {
+				"type": "options",
+				"default": "20rem",
+				"options": [
+					"12rem",
+					"16rem",
+					"20rem",
+					"24rem"				
+				]
+			},
+			"cardWidth": {
+				"type": "options",
+				"default": "20rem",
+				"options": [
+					"16rem",
+					"20rem",
+					"24rem"				
+				]
+			}
+		}
+	},
+	"cardhorizontal": {
+		"name": "Horizontal Card",
+		"props": {
+			"imageUrl": "string",
+			"heading": "string",
+			"description": "string",
+			"subtext": "string",
+			"linkText": "string",
+			"linkUrl": "string",
+			"color": "string",
+			"linkHoverColor": "string",
+			"imageWidth": {
+				"type": "options",
+				"default": "8rem",
+				"options": [
+					"8rem",
+					"12rem",
+					"16rem"			
+				]
+			},
+			"cardWidth": {
+				"type": "options",
+				"default": "32rem",
+				"options": [
+					"24rem",
+					"28rem",
+					"32rem",
+					"40rem",
+					"48rem",
+					"60rem",
+					"100%"		
+				]
+			},
+			"imageHeight": {
+				"type": "options",
+				"default": "8rem",
+				"options": [
+					"8rem",
+					"12rem",
+					"16rem"			
+				]
+			}
+		}
+	},
 	"datamap": {
 		"description": "shiny chart",
 		"data": true,
@@ -525,7 +600,7 @@
 	"bullet": {
 		"description": "Bullet chart",
 		"data": true,
-		"props": {
+		"props": { 
 			"model": "string",
 			"color": "string",
 			"customSubtitle": "string",

packages/standard-components/src/Card.svelte

@@ -0,0 +1,80 @@
+<script>
+  import { cssVars, createClasses } from "./cssVars"
+
+  export const className = ""
+  export let imageUrl = ""
+  export let heading = ""
+  export let description = ""
+  export let linkText = ""
+  export let linkUrl
+  export let color
+  export let linkHoverColor
+  export let imageHeight
+  export let cardWidth
+
+  $: cssVariables = {
+    color,
+    linkHoverColor,
+    imageHeight,
+    cardWidth,
+  }
+
+  $: showImage = !!imageUrl
+</script>
+
+<div use:cssVars={cssVariables} class="container">
+  {#if showImage}
+    <img class="image" src={imageUrl} alt="" />
+  {/if}
+  <div class="content">
+    <h2 class="heading">{heading}</h2>
+    <h4 class="text">{description}</h4>
+    <a href={linkUrl}>{linkText}</a>
+  </div>
+</div>
+
+<style>
+  .container {
+    width: var(--cardWidth);
+    overflow: hidden !important;
+    height: auto;
+  }
+
+  .image {
+    width: 100% !important;
+    max-width: 100%;
+    height: var(--imageHeight);
+    vertical-align: middle;
+  }
+
+  .content {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .heading {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  .text {
+    font-size: 1rem;
+    margin: 0;
+    font-weight: 400;
+    line-height: 1.5rem;
+  }
+
+  a {
+    margin: 0.5rem 0;
+    text-decoration: none;
+    color: var(--color);
+    font-weight: 600;
+  }
+
+  a:hover {
+    color: var(--linkHoverColor);
+  }
+</style>

packages/standard-components/src/CardHorizontal.svelte

@@ -0,0 +1,104 @@
+<script>
+  import { cssVars, createClasses } from "./cssVars"
+
+  export const className = ""
+  export let imageUrl = ""
+  export let heading = ""
+  export let description = ""
+  export let subtext = ""
+  export let linkText = ""
+  export let linkUrl
+  export let color
+  export let linkHoverColor
+  export let cardWidth
+  export let imageWidth
+  export let imageHeight
+
+  $: cssVariables = {
+    color,
+    linkHoverColor,
+    imageWidth,
+    cardWidth,
+    imageHeight,
+  }
+
+  $: showImage = !!imageUrl
+</script>
+
+<div use:cssVars={cssVariables} class="container">
+  {#if showImage}
+    <img class="image" src={imageUrl} alt="" />
+  {/if}
+  <div class="content">
+    <main>
+      <h2 class="heading">{heading}</h2>
+      <p class="text">{description}</p>
+    </main>
+    <footer>
+      <p class="subtext">{subtext}</p>
+      <a href={linkUrl}>{linkText}</a>
+    </footer>
+  </div>
+</div>
+
+<style>
+  .container {
+    height: 100%;
+    max-width: var(--cardWidth);
+    display: flex !important;
+    text-align: left;
+  }
+
+  .image {
+    width: var(--imageWidth);
+    height: var(--imageHeight);
+    vertical-align: middle;
+  }
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.85rem 1.5rem;
+  }
+
+  .heading {
+    font-size: 1rem;
+    font-weight: 700;
+    margin: 0;
+  }
+
+  .text {
+    font-size: 0.85rem;
+    margin: 0.5rem 0 0 0;
+    font-weight: 400;
+    line-height: 1.25rem;
+  }
+
+  footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+
+  .subtext {
+    font-size: 0.85rem;
+    margin: 0;
+    font-weight: 400;
+    color: #757575;
+  }
+
+  a {
+    margin: 0.5rem 0 0 0;
+    text-decoration: none;
+    color: var(--color);
+    font-weight: 600;
+    font-size: 0.85rem;
+    margin: 0;
+  }
+
+  a:hover {
+    color: var(--linkHoverColor);
+  }
+</style>

packages/standard-components/src/index.js

@@ -23,5 +23,7 @@ export { default as list } from "./List.svelte"
 export { default as datasearch } from "./DataSearch.svelte"
 export { default as embed } from "./Embed.svelte"
 export { default as stackedlist } from "./StackedList.svelte"
+export { default as card } from "./Card.svelte"
+export { default as cardhorizontal } from "./CardHorizontal.svelte"
 export { default as recorddetail } from "./RecordDetail.svelte"
 export * from "./Chart"