adds divider component

packages/bbui/package.json

@@ -57,6 +57,7 @@
     "@spectrum-css/modal": "^3.0.1",
     "@spectrum-css/popover": "^3.0.1",
     "@spectrum-css/table": "^3.0.1",
+    "@spectrum-css/tabs": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",
     "@spectrum-css/typography": "^3.0.1",
     "@spectrum-css/underlay": "^2.0.9",

packages/bbui/src/Divider/Divider.svelte

@@ -0,0 +1,14 @@
+<script>
+    import "@spectrum-css/divider/dist/index-vars.css"
+    export let l = false
+    export let m = false
+    export let s = false
+    
+    export let vertical = false
+</script>
+
+<hr
+    class:spectrum-Divider--sizeL={l}
+    class:spectrum-Divider--sizeM={m}
+    class:spectrum-Divider--sizeS={s}
+    class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider">

packages/bbui/src/Modal/ModalContent.svelte

@@ -1,8 +1,8 @@
 <script>
-  import "@spectrum-css/divider/dist/index-vars.css"
-
   import { getContext } from "svelte"
   import Button from "../Button/Button.svelte"
+  import Heading from "../Typography/Heading.svelte"
+  import Divider from "../Divider/Divider.svelte"
   import Icon from "../Icons/Icon.svelte"
   import Context from "../context"
 
@@ -31,8 +31,8 @@
 
 <div class="spectrum-Dialog spectrum-Dialog--{size}" role="dialog" tabindex="-1" aria-modal="true">
   <div class="spectrum-Dialog-grid">
-    <h1 class="spectrum-Dialog-heading">{title}</h1>
+    <Heading m h2>{title}</Heading>
-    <hr class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--horizontal spectrum-Dialog-divider">
+    <Divider m />
     
     <!-- TODO: Remove content-grid class once Layout components are in bbui -->
     <section class="spectrum-Dialog-content content-grid">

packages/bbui/src/Tabs/Tabs.svelte

@@ -0,0 +1,20 @@
+<script>
+    import "@spectrum-css/tabs/dist/index-vars.css"
+
+    export let vertical = false
+</script>
+<div class="spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
+    <div class="spectrum-Tabs-item is-selected" tabindex="0">
+        <span class="spectrum-Tabs-itemLabel">Tab 1</span>
+    </div>
+    <div class="spectrum-Tabs-item" tabindex="0">
+        <span class="spectrum-Tabs-itemLabel">Tab 2</span>
+    </div>
+    <div class="spectrum-Tabs-item" tabindex="0">
+        <span class="spectrum-Tabs-itemLabel">Tab 3</span>
+    </div>
+    <div class="spectrum-Tabs-item" tabindex="0">
+        <span class="spectrum-Tabs-itemLabel">Tab 4</span>
+    </div>
+    <div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
+</div>

packages/bbui/src/index.js

@@ -37,6 +37,7 @@ export { default as Multiselect } from "./Form/Multiselect.svelte"
 export { default as Slider } from "./Form/Slider.svelte"
 export { default as Context } from "./context"
 export { default as Table } from "./Table/Table.svelte"
+export { default as Divider } from "./Divider/Divider.svelte"
 
 // Typography
 export { default as Body } from "./Typography/Body.svelte"

packages/bbui/yarn.lock

@@ -480,6 +480,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
   integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
 
+"@spectrum-css/tabs@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.1.tgz#81cebae7a0db0056834c2b8fdf0df3e71aaaa812"
+  integrity sha512-uyWGiSuv+rKY57RVnNkYe0+8fQxgXtQl09JAmqyqUnvlX5b9sHG/R5TP7ExZ8C7BgE8hzVjPVAMH3RMEQERGUQ==
+
 "@spectrum-css/toast@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"

packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte

@@ -46,12 +46,12 @@
 
 <div class="container">
   <div class="list">
-    <Heading small>Available bindings</Heading>
+    <Heading s h3>Available bindings</Heading>
     <Spacer medium />
     <Input extraThin placeholder="Search" bind:value={search} />
     <Spacer medium />
     {#each categories as [categoryName, bindings]}
-      <Heading extraSmall>{categoryName}</Heading>
+      <Heading xs h4>{categoryName}</Heading>
       <Spacer extraSmall />
       {#each bindableProperties.filter(binding =>
         binding.label.match(searchRgx)
@@ -64,7 +64,7 @@
         </div>
       {/each}
     {/each}
-    <Heading extraSmall>Helpers</Heading>
+    <Heading xs h3>Helpers</Heading>
     <Spacer extraSmall />
     {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
       <div class="binding" on:click={() => addToText(helper)}>

packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte

@@ -63,7 +63,7 @@
       <Input extraThin placeholder="Search" bind:value={search} />
       <Spacer medium />
       {#if context}
-        <Heading extraSmall>Columns</Heading>
+        <Heading xs h3>Columns</Heading>
         <Spacer small />
         <ul>
           {#each context.filter(context =>
@@ -77,7 +77,7 @@
       {/if}
       <Spacer small />
       {#if instance}
-        <Heading extraSmall>Components</Heading>
+        <Heading xs h3>Components</Heading>
         <Spacer small />
         <ul>
           {#each instance.filter(instance =>
@@ -90,7 +90,7 @@
         </ul>
       {/if}
       <Spacer small />
-      <Heading extraSmall>Helpers</Heading>
+      <Heading xs h3>Helpers</Heading>
       <Spacer small />
       <ul>
         {#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -137,7 +137,7 @@
 <DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
   <div class="dropdown">
     <div class="title">
-      <Heading extraSmall>Tables</Heading>
+      <Heading xs h3>Tables</Heading>
     </div>
     <ul>
       {#each tables as table}
@@ -150,7 +150,7 @@
     </ul>
     <hr />
     <div class="title">
-      <Heading extraSmall>Views</Heading>
+      <Heading xs h3>Views</Heading>
     </div>
     <ul>
       {#each views as view}

packages/builder/src/components/start/AppCard.svelte

@@ -26,7 +26,7 @@
 </script>
 
 <div class="apps-card">
-  <Heading small black>{name}</Heading>
+  <Heading s h3>{name}</Heading>
   <Spacer medium />
   <div class="card-footer" data-cy={`app-${name}`}>
     <ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>

packages/builder/src/components/start/AppList.svelte

@@ -1,6 +1,6 @@
 <script>
   import AppCard from "./AppCard.svelte"
-  import { Heading } from "@budibase/bbui"
+  import { Heading, Divider } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import { get } from "builderStore/api"
 
@@ -19,22 +19,17 @@
 </script>
 
 <div class="root">
-  <Heading lh medium black>Your Apps</Heading>
+  <Heading m h2>Your Apps</Heading>
+  <Divider s />
   {#await promise}
     <div class="spinner-container">
       <Spinner size="30" />
     </div>
   {:then apps}
-    <div class="inner">
+    <div class="apps">
-      <div>
+      {#each apps as app}
-        <div>
+        <AppCard {...app} />
-          <div class="apps">
+      {/each}
-            {#each apps as app}
-              <AppCard {...app} />
-            {/each}
-          </div>
-        </div>
-      </div>
     </div>
   {:catch err}
     <h1 style="color:red">{err}</h1>
@@ -43,6 +38,7 @@
 
 <style>
   .apps {
+    margin-top: var(--spectrum-global-dimension-static-size-150);
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
     grid-gap: var(--layout-m);

packages/builder/src/pages/builder/index.svelte

@@ -57,7 +57,7 @@
 
 <div class="container">
   <div class="header">
-    <Heading medium black>Welcome to the Budibase Beta</Heading>
+    <Heading m h1>Welcome to the Budibase Beta</Heading>
     <div class="button-group">
       <Button secondary on:click={initiateAppImport}>Import Web App</Button>
       <Spacer medium />