Move DetailSummary and update to use Spectrum Icon

packages/bbui/src/List/Items/DetailSummary.svelte → 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 {

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"

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>