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

---
 packages/bbui/package.json             |  1 +
 packages/bbui/src/Icon/Icon.svelte     |  2 +-
 packages/bbui/src/TreeView/Item.svelte | 32 ++++++++++++++++++++++++++
 packages/bbui/src/TreeView/Tree.svelte | 10 ++++++++
 packages/bbui/src/index.js             |  2 ++
 packages/bbui/yarn.lock                |  5 ++++
 6 files changed, 51 insertions(+), 1 deletion(-)
 create mode 100644 packages/bbui/src/TreeView/Item.svelte
 create mode 100644 packages/bbui/src/TreeView/Tree.svelte

diff --git a/packages/bbui/package.json b/packages/bbui/package.json
index f0f67d8b3c..0d14187b9b 100644
--- a/packages/bbui/package.json
+++ b/packages/bbui/package.json
@@ -61,6 +61,7 @@
     "@spectrum-css/table": "^3.0.1",
     "@spectrum-css/tabs": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",
+    "@spectrum-css/treeview": "^3.0.2",
     "@spectrum-css/typography": "^3.0.1",
     "@spectrum-css/underlay": "^2.0.9",
     "@spectrum-css/vars": "^3.0.1",
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index ad5faf5ae8..c637b73096 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -5,7 +5,7 @@
 <script>
     export let direction = "n"
     export let name = "Add"
-    export let hidden = false
+    export let hidden = true
     export let s = false
     export let m = false;
     export let l = false;
diff --git a/packages/bbui/src/TreeView/Item.svelte b/packages/bbui/src/TreeView/Item.svelte
new file mode 100644
index 0000000000..bc378ecb22
--- /dev/null
+++ b/packages/bbui/src/TreeView/Item.svelte
@@ -0,0 +1,32 @@
+<script>
+    export let selected = false;
+    export let open = false;
+    export let title;
+    export let icon;
+</script>
+
+<li class:is-selected={selected} class:is-open={open} class="spectrum-TreeView-item">
+    <a class="spectrum-TreeView-itemLink" href="#">
+        {#if $$slots.default}
+            <svg class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator" focusable="false" aria-hidden="true">
+                <use xlink:href="#spectrum-css-icon-Chevron100" />
+            </svg>
+            {#if icon}
+                <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
+                    <use xlink:href="#spectrum-icon-18-{icon}" />
+                </svg>
+            {/if}
+            <span class="spectrum-TreeView-itemLabel">{title}</span>
+            <ul class="spectrum-TreeView">
+                <slot />
+            </ul>
+        {:else}
+            {#if icon}
+                <svg class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM" focusable="false" aria-hidden="true" aria-label="Layers">
+                    <use xlink:href="#spectrum-icon-18-{icon}" />
+                </svg>
+            {/if}
+            <span class="spectrum-TreeView-itemLabel">{title}</span>
+        {/if}
+    </a>
+</li>
\ No newline at end of file
diff --git a/packages/bbui/src/TreeView/Tree.svelte b/packages/bbui/src/TreeView/Tree.svelte
new file mode 100644
index 0000000000..124ffb46bd
--- /dev/null
+++ b/packages/bbui/src/TreeView/Tree.svelte
@@ -0,0 +1,10 @@
+<script>
+    import "@spectrum-css/treeview/dist/index-vars.css"
+
+    export let quiet = false
+    export let width;
+</script>
+
+<ul class:spectrum-TreeView--quiet={quiet} class="spectrum-TreeView" style="width: {width}">
+    <slot />
+</ul>
\ No newline at end of file
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index a84c2b1ad5..328bb812ff 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -41,6 +41,8 @@ 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 TreeView } from "./TreeView/Tree.svelte"
+export { default as TreeItem } from "./TreeView/Item.svelte"
 export { default as Divider } from "./Divider/Divider.svelte"
 
 // Typography
diff --git a/packages/bbui/yarn.lock b/packages/bbui/yarn.lock
index 93ee6ebdd7..47d40a8e35 100644
--- a/packages/bbui/yarn.lock
+++ b/packages/bbui/yarn.lock
@@ -500,6 +500,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
   integrity sha512-jov++S358BrN2tmMfaoYk1N6u9HojgeuQk61keXrK2m3VE5/n94x7Lg3kIPeSWO0odyDfBlMqT9jacbRey3QTg==
 
+"@spectrum-css/treeview@^3.0.2":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.2.tgz#d54d8f17290babb1c885f5d9355e225421beb0d2"
+  integrity sha512-foO7UBJv1JMFaKgDPVt8jBghZSVbqhXR8TaGaxHSnMubv7ygmKkc1AITrWC2STILCn84ju2vchOohMZfW6sYwg==
+
 "@spectrum-css/typography@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.1.tgz#957dafd9b18c314fa37a88b549042ba2175f5b3f"