From 4220cb86bb22d88a21ffd9d1d1eb199efb2ddef1 Mon Sep 17 00:00:00 2001
From: Conor_Mack <cmckeown101@gmail.com>
Date: Wed, 22 Apr 2020 11:52:55 +0100
Subject: [PATCH] Basic Card and Component Tidyup

---
 .../ComponentSelectionList.svelte             |  2 +-
 .../userInterface/ComponentTab/Tab.svelte     |  1 +
 .../userInterface/temporaryPanelStructure.js  | 51 +++-----------
 .../materialdesign-components/components.json | 15 +++++
 .../src/Card/BasicCard.svelte                 | 67 +++++++++++++++++++
 .../src/Card/index.js                         |  1 +
 .../materialdesign-components/src/index.js    |  2 +-
 packages/standard-components/components.json  |  1 +
 .../standard-components/src/Heading.svelte    | 16 ++---
 9 files changed, 104 insertions(+), 52 deletions(-)
 create mode 100644 packages/materialdesign-components/src/Card/BasicCard.svelte

diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
index 12159f675c..e966ca48f9 100644
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/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>
 
diff --git a/packages/builder/src/components/userInterface/ComponentTab/Tab.svelte b/packages/builder/src/components/userInterface/ComponentTab/Tab.svelte
index 3c4c7b7242..c7586d6a05 100644
--- a/packages/builder/src/components/userInterface/ComponentTab/Tab.svelte
+++ b/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
 
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
index 51e95049b5..d2568a4488 100644
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/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',
diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json
index f2a6db42a6..f0750e6446 100644
--- a/packages/materialdesign-components/components.json
+++ b/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",
diff --git a/packages/materialdesign-components/src/Card/BasicCard.svelte b/packages/materialdesign-components/src/Card/BasicCard.svelte
new file mode 100644
index 0000000000..cb377b7737
--- /dev/null
+++ b/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>
diff --git a/packages/materialdesign-components/src/Card/index.js b/packages/materialdesign-components/src/Card/index.js
index ff089d6797..cc918b935f 100644
--- a/packages/materialdesign-components/src/Card/index.js
+++ b/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"
diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js
index aa6632c48c..6f234a217d 100644
--- a/packages/materialdesign-components/src/index.js
+++ b/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"
diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json
index 706aee95ec..f69041fc0f 100644
--- a/packages/standard-components/components.json
+++ b/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",
diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte
index 859784eb99..e3919b7f64 100644
--- a/packages/standard-components/src/Heading.svelte
+++ b/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}