From 0b18b55433edd554c4f6558d7f66c509aa84a464 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Mon, 12 Apr 2021 16:26:26 +0200
Subject: [PATCH] Implements Menu component

---
 packages/bbui/src/Menu/Item.svelte            | 16 +++++++--
 packages/bbui/src/Menu/Menu.svelte            | 33 +------------------
 packages/bbui/src/Menu/Menu.svench            | 19 +++++++++++
 packages/bbui/src/Menu/Section.svelte         |  4 +--
 packages/bbui/src/Menu/Separator.svelte       |  1 +
 packages/bbui/src/index.js                    |  1 +
 .../builder/src/pages/builder/index.svelte    |  4 ---
 7 files changed, 38 insertions(+), 40 deletions(-)
 create mode 100644 packages/bbui/src/Menu/Menu.svench
 create mode 100644 packages/bbui/src/Menu/Separator.svelte

diff --git a/packages/bbui/src/Menu/Item.svelte b/packages/bbui/src/Menu/Item.svelte
index c7b73fea02..58b031fe78 100644
--- a/packages/bbui/src/Menu/Item.svelte
+++ b/packages/bbui/src/Menu/Item.svelte
@@ -1,3 +1,15 @@
-<li class="spectrum-Menu-item" role="menuitem" tabindex="0">
-    <span class="spectrum-Menu-itemLabel"><slot /></span>
+<script>
+    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>
\ No newline at end of file
diff --git a/packages/bbui/src/Menu/Menu.svelte b/packages/bbui/src/Menu/Menu.svelte
index 3f6cb74781..2fa1021732 100644
--- a/packages/bbui/src/Menu/Menu.svelte
+++ b/packages/bbui/src/Menu/Menu.svelte
@@ -3,36 +3,5 @@
 </script>
 
 <ul class="spectrum-Menu" role="menu">
-    <li role="presentation">
-      <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>
+    <slot />
 </ul>
\ No newline at end of file
diff --git a/packages/bbui/src/Menu/Menu.svench b/packages/bbui/src/Menu/Menu.svench
new file mode 100644
index 0000000000..1da76869ba
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/packages/bbui/src/Menu/Section.svelte b/packages/bbui/src/Menu/Section.svelte
index 58bfbdd7a4..54ae4123be 100644
--- a/packages/bbui/src/Menu/Section.svelte
+++ b/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>
-    <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1">
+<span class="spectrum-Menu-sectionHeading">{heading}</span>
+    <ul class="spectrum-Menu" role="group">
         <slot />
     </ul>
 </li>
\ No newline at end of file
diff --git a/packages/bbui/src/Menu/Separator.svelte b/packages/bbui/src/Menu/Separator.svelte
new file mode 100644
index 0000000000..187fab2347
--- /dev/null
+++ b/packages/bbui/src/Menu/Separator.svelte
@@ -0,0 +1 @@
+<li class="spectrum-Menu-divider" role="separator"></li>
\ No newline at end of file
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index a417d691f2..1f22e7e253 100644
--- a/packages/bbui/src/index.js
+++ b/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"
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index 0be57a1b53..21fdeb0128 100644
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/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}>