adds working tabs

packages/bbui/src/Tabs/Tab.svelte

@@ -0,0 +1,22 @@
+<script>
+    import { getContext } from 'svelte'
+    import Portal from "svelte-portal"
+    export let title
+    export let icon = '';
+    
+    const selected = getContext('tab')
+</script>
+
+<div on:click={() => $selected = title } class:is-selected={$selected === title} class="spectrum-Tabs-item" tabindex="0">
+    {#if icon}
+        <svg class="spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Folder">
+            <use xlink:href="#spectrum-icon-18-{icon}" />
+        </svg>
+    {/if}
+    <span class="spectrum-Tabs-itemLabel">{title}</span>
+</div>
+{#if $selected === title}
+    <Portal target=".spectrum-Tabs-content">
+        <slot />
+    </Portal>
+{/if}

packages/bbui/src/Tabs/Tabs.svelte

@@ -1,20 +1,23 @@
 <script>
     import "@spectrum-css/tabs/dist/index-vars.css"
+    import { writable } from 'svelte/store'
+    import { setContext } from 'svelte'
     
+    export let selected;
     export let vertical = false
+
+    const tab = writable(selected)
+    setContext('tab', tab)
+    $: selected = $tab
 </script>
 <div class="spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
-    <div class="spectrum-Tabs-item is-selected" tabindex="0">
+    <slot />
-        <span class="spectrum-Tabs-itemLabel">Tab 1</span>
-    </div>
-    <div class="spectrum-Tabs-item" tabindex="0">
-        <span class="spectrum-Tabs-itemLabel">Tab 2</span>
-    </div>
-    <div class="spectrum-Tabs-item" tabindex="0">
-        <span class="spectrum-Tabs-itemLabel">Tab 3</span>
-    </div>
-    <div class="spectrum-Tabs-item" tabindex="0">
-        <span class="spectrum-Tabs-itemLabel">Tab 4</span>
-    </div>
-    <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
 </div>
+
+<div class="spectrum-Tabs-content" />
+
+<style>
+    .spectrum-Tabs-content {
+        margin-top: var(--spectrum-global-dimension-static-size-150);
+    }
+</style>

packages/bbui/src/index.js

@@ -37,6 +37,8 @@ export { default as Multiselect } from "./Form/Multiselect.svelte"
 export { default as Slider } from "./Form/Slider.svelte"
 export { default as Context } from "./context"
 export { default as Table } from "./Table/Table.svelte"
+export { default as Tabs } from "./Tabs/Tabs.svelte"
+export { default as Tab } from "./Tabs/Tab.svelte"
 export { default as Divider } from "./Divider/Divider.svelte"
 
 // Typography

packages/builder/src/pages/builder/index.svelte

@@ -3,7 +3,7 @@
   import AppList from "components/start/AppList.svelte"
   import { get } from "builderStore/api"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading, Modal, Spacer, Menu, MenuSection, MenuItem } from "@budibase/bbui"
+  import { Button, Heading, Modal, Spacer, Tabs, Tab } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
   import Banner from "/assets/orange-landscape.png"