From 5eaae47ec024d5eb672d89630e2e04a2fa79ca8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Wed, 21 Apr 2021 15:34:46 +0200
Subject: [PATCH] Move DetailSummary and update to use Spectrum Icon

---
 .../Items => DetailSummary}/DetailSummary.svelte   |  8 ++++----
 packages/bbui/src/index.js                         |  2 +-
 packages/builder/src/pages/builder/index.svelte    | 14 ++++++--------
 3 files changed, 11 insertions(+), 13 deletions(-)
 rename packages/bbui/src/{List/Items => DetailSummary}/DetailSummary.svelte (88%)

diff --git a/packages/bbui/src/List/Items/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte
similarity index 88%
rename from packages/bbui/src/List/Items/DetailSummary.svelte
rename to packages/bbui/src/DetailSummary/DetailSummary.svelte
index 8e3a08276a..84a4d9613a 100644
--- a/packages/bbui/src/List/Items/DetailSummary.svelte
+++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte
@@ -1,4 +1,5 @@
 <script>
+  import Icon from '../Icon/Icon.svelte'
   import { createEventDispatcher } from "svelte"
 
   const dispatch = createEventDispatcher()
@@ -7,8 +8,6 @@
   export let name,
     show = false
 
-  const capitalize = name => name[0].toUpperCase() + name.slice(1)
-
   const onHeaderClick = () => {
     show = !show
     if (show) {
@@ -19,9 +18,9 @@
 
 <div class="property-group-container" class:thin>
   <div class="property-group-name" on:click={onHeaderClick}>
-    <div class:thin class="name">{capitalize(name)}</div>
+    <div class:thin class="name">{name}</div>
     <div class="icon">
-      <i class={show ? 'ri-arrow-down-s-fill' : 'ri-arrow-left-s-fill'} />
+      <Icon s name={show ? 'Remove' : 'Add'} />
     </div>
   </div>
   <div class="property-panel" class:show>
@@ -57,6 +56,7 @@
     flex: 1 1 auto;
     overflow: hidden;
     text-overflow: ellipsis;
+    text-transform: capitalize;
     white-space: nowrap;
   }
   .name.thin {
diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js
index bce2008f95..fdd02d4242 100644
--- a/packages/bbui/src/index.js
+++ b/packages/bbui/src/index.js
@@ -22,7 +22,7 @@ export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as RadioGroup } from "./Form/RadioGroup.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
 export { default as Home } from "./Links/Home.svelte"
-export { default as DetailSummary } from "./List/Items/DetailSummary.svelte"
+export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
 export { default as DropdownMenu } from "./DropdownMenu/DropdownMenu.svelte"
 export { default as Popover } from "./Popover/Popover.svelte"
 export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte
index b7d534cd68..b0c9bcdc2f 100644
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@@ -3,7 +3,7 @@
   import AppList from "components/start/AppList.svelte"
   import { get } from "builderStore/api"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
-  import { Button, Heading, Modal, Spacer, Tags, Tag } from "@budibase/bbui"
+  import { Button, Heading, Modal, Spacer, ButtonGroup } from "@budibase/bbui"
   import TemplateList from "components/start/TemplateList.svelte"
   import analytics from "analytics"
   import Banner from "/assets/orange-landscape.png"
@@ -75,15 +75,13 @@
   <!-- <TemplateList onSelect={selectTemplate} /> -->
 
   <AppList />
-
-  <Tags>
-    <Tag>Test</Tag>
-    <Tag>Avatar</Tag>
-    <Tag>Error</Tag>
-    <Tag>Disabled</Tag>
-  </Tags>
 </div>
 
+<ButtonGroup>
+  <Button secondary>Test</Button>
+  <Button cta>Test</Button>
+</ButtonGroup>
+
 <Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>
   <CreateAppModal {hasKey} {template} />
 </Modal>