Basic Card and Component Tidyup

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

@@ -86,7 +86,7 @@
     {/each}
   </ul>
   <div class="panel">
-    <Tab list={selectedCategory} {onTemplateChosen} />
+    <Tab list={selectedCategory} {onTemplateChosen} {toggleTab} />
   </div>
 </div>
 

packages/builder/src/components/userInterface/ComponentTab/Tab.svelte

@@ -2,6 +2,7 @@
   import Item from "./Item.svelte"
   import { store } from "builderStore"
   export let list
+  export let toggleTab
   export let onTemplateChosen
   let category = list
 

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

@@ -5,6 +5,7 @@ export default {
       isCategory: true,
       type: [
         {
+          _component: "@budibase/standard-components/container",
           name: 'Container',
           description: 'This component contains things within itself',
           icon: 'ri-layout-row-fill',
@@ -23,14 +24,12 @@ export default {
               icon: 'headline',
               props: {
                 type: {
-                  type: 'options',
-                  options: [
-                    'h1',
-                    'h2'
-                  ],
-                  'default': 'h1'
-                }
-              }
+                  type: "options",
+                  options: ["h1", "h2", "h3", "h4", "h5", "h6"],
+                  default: "h1",
+                },
+                text: "string",
+              },
             },
             {
               _component: '@budibase/standard-components/text',
@@ -41,40 +40,7 @@ export default {
           ]
         },
         {
-          name: 'Button',
-          description: 'A basic html button that is ready for styling',
-          icon: 'ri-radio-button-fill',
-          commonProps: {},
-          type: []
-        },
-        {
-          name: 'Icon',
-          description: 'A basic component for displaying icons',
-          icon: 'ri-sun-fill',
-          commonProps: {},
-          type: []
-        },
-        {
-          name: 'Avatar',
-          description: 'A basic component for rendering an avatar',
-          icon: 'ri-user-smile-fill',
-          commonProps: {},
-          type: []
-        },
-        {
-          name: 'Link',
-          description: 'A basic link component for internal and external links',
-          icon: 'ri-link',
-          commonProps: {},
-          type: []
-        }
-      ]
-    },
-    {
-      name: 'Form',
-      isCategory: true,
-      type: [
-        {
+          _component: "@budibase/standard-components/button",
           name: 'Button',
           description: 'A basic html button that is ready for styling',
           icon: 'ri-radio-button-fill',
@@ -109,6 +75,7 @@ export default {
       isCategory: true,
       type: [
         {
+          _component: "@budibase/materialdesign-components/BasicCard",
           name: 'Card',
           description: 'A basic card component that can contain content and actions.',
           icon: 'ri-layout-bottom-line',

packages/materialdesign-components/components.json

@@ -115,6 +115,21 @@
     }, 
     "tags": []
   },
+  "BasicCard": {
+    "name": "BasicCard",
+    "description": "This is a basic card",
+    "props": {
+      "heading": "string",
+      "subheading": "string",
+      "content": "string",
+      "imageUrl": "string",
+      "button1Text": "string",
+      "button2Text": "string",
+      "cardClick": "event",
+      "button1Click": "event",
+      "button2Click": "event"      
+    }
+  },
   "Card": {
     "name": "Card",
     "description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children",

packages/materialdesign-components/src/Card/BasicCard.svelte

@@ -0,0 +1,67 @@
+<script>
+  export let heading = ""
+  export let subheading = ""
+  export let content = ""
+  export let imageUrl = ""
+  export let button1Text = ""
+  export let button2Text = ""
+  export let cardClick = () => {}
+  export let button1Click = () => {}
+  export let button2Click = () => {}
+
+  $: showImage = !!imageUrl
+  $: showButton1 = !!button1Text
+  $: showButton2 = !!button2Text
+  $: showButtons = !!showButton1 && !!showButton2
+</script>
+
+<div class="mdc-card" on:click={cardClick}>
+  <div class="mdc-card__primary-action demo-card__primary-action" tabindex="0">
+    {#if showImage}
+      <div
+        class="mdc-card__media mdc-card__media--16-9 demo-card__media"
+        style="background-image: url(&quot;{imageUrl}&quot;);" />
+    {/if}
+    <div class="pad">
+      <div class="demo-card__primary">
+        <h2 class="demo-card__title mdc-typography mdc-typography--headline6">
+          {heading}
+        </h2>
+        <h3
+          class="demo-card__subtitle mdc-typography mdc-typography--subtitle2">
+          {subheading}
+        </h3>
+      </div>
+      <div class="demo-card__secondary mdc-typography mdc-typography--body2">
+        {content}
+      </div>
+
+    </div>
+  </div>
+  {#if showButtons}
+    <div class="mdc-card__actions">
+      <div class="mdc-card__action-buttons">
+        {#if showButton1}
+          <button class="mdc-button mdc-card__action mdc-card__action--button">
+            <span class="mdc-button__ripple" on:click={button1Click} />
+            {button1Text}
+          </button>
+        {/if}
+        {#if showButton2}
+          <button
+            class="mdc-button mdc-card__action mdc-card__action--button"
+            on:click={button2Click}>
+            <span class="mdc-button__ripple" />
+            {button2Text}
+          </button>
+        {/if}
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .pad {
+    padding: 10px;
+  }
+</style>

packages/materialdesign-components/src/Card/index.js

@@ -1,5 +1,6 @@
 import "./_styles.scss"
 export { default as Card } from "./Card.svelte"
+export { default as BasicCard } from "./BasicCard.svelte"
 export { default as CardBody } from "./CardBody.svelte"
 export { default as CardFooter } from "./CardFooter.svelte"
 export { default as CardHeader } from "./CardHeader.svelte"

packages/materialdesign-components/src/index.js

@@ -22,7 +22,7 @@ export { Menu } from "./Menu"
 export { Select } from "./Select"
 export { DatePicker } from "./DatePicker"
 export { IconButton } from "./IconButton"
-export { Card, CardHeader, CardImage, CardBody, CardFooter } from "./Card"
+export { Card, CardHeader, CardImage, CardBody, CardFooter, BasicCard } from "./Card"
 export { Dialog, DialogHeader, DialogContent, DialogActions } from "./Dialog"
 export { Switch } from "./Switch"
 export { Slider } from "./Slider"

packages/standard-components/components.json

@@ -214,6 +214,7 @@
 		"description": "An HTML H1 - H6 tag",
 		"props" : {
 			"className":"string",
+			"text": "string",
 			"type": {
 				"type": "options",
 				"default": "h1",

packages/standard-components/src/Heading.svelte

@@ -2,22 +2,22 @@
   export let className = ""
   export let type
   export let _bb
-
+  export let text = ""
   let containerElement
 
-  $: containerElement && _bb.attachChildren(containerElement)
+  $: containerElement && !text && _bb.attachChildren(containerElement)
 </script>
 
 {#if type === 'h1'}
-  <h1 class={className} bind:this={containerElement} />
+  <h1 class={className} bind:this={containerElement}>{text}</h1>
 {:else if type === 'h2'}
-  <h2 class={className} bind:this={containerElement} />
+  <h2 class={className} bind:this={containerElement}>{text}</h2>
 {:else if type === 'h3'}
-  <h3 class={className} bind:this={containerElement} />
+  <h3 class={className} bind:this={containerElement}>{text}</h3>
 {:else if type === 'h4'}
-  <h4 class={className} bind:this={containerElement} />
+  <h4 class={className} bind:this={containerElement}>{text}</h4>
 {:else if type === 'h5'}
-  <h5 class={className} bind:this={containerElement} />
+  <h5 class={className} bind:this={containerElement}>{text}</h5>
 {:else if type === 'h6'}
-  <h6 class={className} bind:this={containerElement} />
+  <h6 class={className} bind:this={containerElement}>{text}</h6>
 {/if}