wip menu component

packages/bbui/src/Menu/Item.svelte

@@ -0,0 +1,3 @@
+<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+    <span class="spectrum-Menu-itemLabel"><slot /></span>
+</li>

packages/bbui/src/Menu/Section.svelte

@@ -1,15 +1,9 @@
-<span class="spectrum-Menu-sectionHeading"><slot /></span>
+<script>
+    export let heading
+</script>
 <li role="presentation">
-<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1"  aria-hidden="true">Section Heading</span>
+<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1"  aria-hidden="true">{heading}</span>
     <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
-        <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
-            <span class="spectrum-Menu-itemLabel">Action 1</span>
-        </li>
-        <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
-            <span class="spectrum-Menu-itemLabel">Action 2</span>
-        </li>
-        <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
-            <span class="spectrum-Menu-itemLabel">Action 3</span>
-        </li>
+        <slot />
     </ul>
 </li>

packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte

@@ -1,7 +1,7 @@
 <script>
   import { sortBy } from "lodash/fp"
   import { automationStore } from "builderStore"
-  import { Button, DropdownMenu, Modal } from "@budibase/bbui"
+  import { ActionButton, DropdownMenu, Modal } from "@budibase/bbui"
   import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
   import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
 
@@ -64,14 +64,14 @@
 <div class="tab-container">
   {#each tabs as tab, idx}
   <div bind:this={anchors[idx]}>
-    <Button
+    <ActionButton
       size="S"
       quiet
       icon={tab.icon}
       disabled={tab.disabled}
       on:click={tab.disabled ? null : () => onChangeTab(idx)}>
         {tab.label}
-      </Button>
+      </ActionButton>
     </div>
   {/each}
 </div>

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

@@ -61,7 +61,7 @@
     <div class="button-group">
       <Button secondary on:click={initiateAppImport}>Import Web App</Button>
       <Spacer medium />
-      <Button primary on:click={modal.show}>Create New Web App</Button>
+      <Button cta on:click={modal.show}>Create New Web App</Button>
     </div>
   </div>