wip: tree component

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",

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;

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>

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>

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

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"