Adding onComponentChosen fn for new components

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

@@ -2,6 +2,7 @@
   // This should be fetched from somewhere in the future, rather than be hardcoded.
   import components from "./temporaryPanelStructure.js"
   import Tab from "./ComponentTab/Tab.svelte"
+  import { store } from "builderStore"
 
   const categories = components.categories
   let selectedCategory = categories[0]

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

@@ -1,13 +1,24 @@
 <script>
   import Item from "./Item.svelte"
+  import { store } from "builderStore"
   export let list
   let category = list
 
+  const onComponentChosen = component => {
+    // if (component.template) {
+    //   onTemplateChosen(component.template)
+    // } else {
+    store.addChildComponent(component._component)
+    // toggleTab()
+    // }
+  }
+
   const handleClick = component => {
     if (component.type && component.type.length > 0) {
       list = component
     } else {
-      console.log("Here be dragons that add the component! 🐉")
+      //console.log("Here be dragons that add the component! 🐉")
+      onComponentChosen(component)
     }
   }
 
@@ -27,7 +38,6 @@
 <style>
   .back-button {
     font-size: 16px;
-
     width: 100%;
     text-align: center;
     height: 40px;

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

@@ -18,7 +18,7 @@ export default {
           commonProps: {},
           type: [
             {
-              _component: '@budibase/standard-components/header',
+              _component: '@budibase/standard-components/heading',
               name: 'Headline',
               icon: 'headline',
               props: {
@@ -140,6 +140,7 @@ export default {
           description: 'A component that generates a table from your data.',
           icon: 'ri-archive-drawer-fill',
           commonProps: {},
+          modelRequired: true,
           type: []
         },
         {
@@ -147,6 +148,7 @@ export default {
           description: 'A component that generates a form from your data.',
           icon: 'ri-file-edit-fill',
           commonProps: {},
+          modelRequired: true,
           type: []
         }
       ]