Implements Menu component

packages/bbui/src/Menu/Item.svelte

@@ -1,3 +1,15 @@
-<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
+<script>
-    <span class="spectrum-Menu-itemLabel"><slot /></span>
+    export let icon = undefined;
+    export let disabled = undefined;
+</script>
+
+<li on:click class="spectrum-Menu-item" class:is-disabled={disabled} role="menuitem" tabindex="0">
+    <span class="spectrum-Menu-itemLabel">
+        {#if icon}
+            <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label={icon}>
+                <use xlink:href="#spectrum-icon-18-{icon}"></use>
+            </svg>
+        {/if}
+        <span class="spectrum-Menu-itemLabel"><slot /></span>
+    </span>
 </li>

packages/bbui/src/Menu/Menu.svelte

@@ -3,36 +3,5 @@
 </script>
 
 <ul class="spectrum-Menu" role="menu">
-    <li role="presentation">
+    <slot />
-      <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1"  aria-hidden="true">Section 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>
-      </ul>
-    </li>
-    <li class="spectrum-Menu-divider" role="separator"></li>
-    <li role="presentation">
-      <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-2"  aria-hidden="true">Section Heading</span>
-      <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1" aria-disabled="true">
-        <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
-          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="SaveFloppy">
-            <use xlink:href="#spectrum-icon-18-SaveFloppy"></use>
-          </svg>
-          <span class="spectrum-Menu-itemLabel">Save</span>
-        </li>
-        <li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
-          <svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="DataDownload">
-            <use xlink:href="#spectrum-icon-18-DataDownload"></use>
-          </svg>
-          <span class="spectrum-Menu-itemLabel">Download</span>
-        </li>
-      </ul>
-    </li>
 </ul>

packages/bbui/src/Menu/Menu.svench

@@ -0,0 +1,19 @@
+<script>
+    import Menu from './Menu.svelte'
+    import Separator from './Separator.svelte'
+    import Section from './Section.svelte'
+    import Item from './Item.svelte'
+</script>
+
+<Menu>
+    <Section heading="Section heading">
+        <Item>Some Item 1</Item>
+        <Item>Some Item 2</Item>
+        <Item>Some Item 3</Item>
+    </Section>
+    <Separator />
+    <Section heading="Section heading">
+        <Item icon="SaveFloppy">Save</Item>
+        <Item disabled icon="DataDownload">Download</Item>
+    </Section>
+</Menu>

packages/bbui/src/Menu/Section.svelte

@@ -2,8 +2,8 @@
     export let heading
 </script>
 <li role="presentation">
-<span class="spectrum-Menu-sectionHeading" id="menu-heading-category-1"  aria-hidden="true">{heading}</span>
+<span class="spectrum-Menu-sectionHeading">{heading}</span>
-    <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
+    <ul class="spectrum-Menu" role="group">
         <slot />
     </ul>
 </li>

packages/bbui/src/Menu/Separator.svelte

@@ -0,0 +1 @@
+<li class="spectrum-Menu-divider" role="separator"></li>

packages/bbui/src/index.js

@@ -28,6 +28,7 @@ export { default as Link } from "./Link/Link.svelte"
 export { default as Close } from "./Button/Close.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
+export { default as MenuSeparator } from "./Menu/Separator.svelte"
 export { default as MenuItem } from "./Menu/Item.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent } from "./Modal/ModalContent.svelte"

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

@@ -75,10 +75,6 @@
   <!-- <TemplateList onSelect={selectTemplate} /> -->
 
   <AppList />
-
-  <div class="just-a-menu-test">
-    <Menu />
-  </div>
 </div>
 
 <Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>