@budibase/bbui 1.3.19-alpha.0 → 1.3.19-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.3.19-alpha.0",
+  "version": "1.3.19-alpha.2",
   "license": "MPL-2.0",
   "svelte": "src/index.js",
   "module": "dist/bbui.es.js",
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@adobe/spectrum-css-workflow-icons": "^1.2.1",
-    "@budibase/string-templates": "1.3.19-alpha.0",
+    "@budibase/string-templates": "1.3.19-alpha.2",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -85,5 +85,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "04749bf93a17516f8f71d44b49995b2d50b080bb"
+  "gitHead": "6c8550e2fb5c824819ee6f5b4fa432219efe45e4"
 }

package/src/Banner/BannerDisplay.svelte

@@ -4,22 +4,32 @@
   import { banner } from "../Stores/banner"
   import Banner from "./Banner.svelte"
   import { fly } from "svelte/transition"
+  import TooltipWrapper from "../Tooltip/TooltipWrapper.svelte"
 </script>
 
 <Portal target=".banner-container">
   <div class="banner">
-    {#if $banner.message}
+    {#each $banner.messages as message}
       <div transition:fly={{ y: -30 }}>
         <Banner
-          type={$banner.type}
-          extraButtonText={$banner.extraButtonText}
-          extraButtonAction={$banner.extraButtonAction}
-          on:change={$banner.onChange}
+          type={message.type}
+          extraButtonText={message.extraButtonText}
+          extraButtonAction={message.extraButtonAction}
+          on:change={() => {
+            if (message.onChange) {
+              message.onChange()
+            }
+          }}
+          showCloseButton={typeof message.showCloseButton === "boolean"
+            ? message.showCloseButton
+            : true}
         >
-          {$banner.message}
+          <TooltipWrapper tooltip={message.tooltip} disabled={false}>
+            {message.message}
+          </TooltipWrapper>
         </Banner>
       </div>
-    {/if}
+    {/each}
   </div>
 </Portal>
 

package/src/InlineAlert/InlineAlert.svelte

@@ -6,6 +6,7 @@
   export let header = ""
   export let message = ""
   export let onConfirm = undefined
+  export let buttonText = ""
 
   $: icon = selectIcon(type)
   // if newlines used, convert them to different elements
@@ -39,13 +40,16 @@
     <div class="spectrum-InLineAlert-content">{splitMsg}</div>
   {/each}
   {#if onConfirm}
-    <div class="spectrum-InLineAlert-footer">
-      <Button secondary on:click={onConfirm}>OK</Button>
+    <div class="spectrum-InLineAlert-footer button">
+      <Button secondary on:click={onConfirm}>{buttonText || "OK"}</Button>
     </div>
   {/if}
 </div>
 
 <style>
+  .button {
+    margin-top: 10px;
+  }
   .spectrum-InLineAlert {
     --spectrum-semantic-negative-border-color: #e34850;
     --spectrum-semantic-positive-border-color: #2d9d78;

package/src/ProgressBar/ProgressBar.svelte

@@ -8,6 +8,8 @@
   export let duration = 1000
   export let width = false
   export let sideLabel = false
+  export let hidePercentage = true
+  export let color // red, green, default = blue
 
   export let size = "M"
 
@@ -37,7 +39,7 @@
       <slot />
     </div>
   {/if}
-  {#if value || value === 0}
+  {#if !hidePercentage && (value || value === 0)}
     <div
       class="spectrum-FieldLabel spectrum-ProgressBar-percentage spectrum-FieldLabel--size{size}"
     >
@@ -47,8 +49,19 @@
   <div class="spectrum-ProgressBar-track">
     <div
       class="spectrum-ProgressBar-fill"
+      class:color-green={color === "green"}
+      class:color-red={color === "red"}
       style={value || value === 0 ? `width: ${$progress}%` : ""}
     />
   </div>
   <div class="spectrum-ProgressBar-label" hidden="" />
 </div>
+
+<style>
+  .color-green {
+    background: #009562;
+  }
+  .color-red {
+    background: #dd2019;
+  }
+</style>

package/src/SideNavigation/Item.svelte

@@ -1,6 +1,7 @@
 <script>
   import { getContext } from "svelte"
   const multilevel = getContext("sidenav-type")
+  import Badge from "../Badge/Badge.svelte"
   export let href = ""
   export let external = false
   export let heading = ""
@@ -8,6 +9,7 @@
   export let selected = false
   export let disabled = false
   export let dataCy
+  export let badge = ""
 </script>
 
 <li
@@ -38,10 +40,22 @@
       </svg>
     {/if}
     <slot />
+    {#if badge}
+      <div class="badge">
+        <Badge active size="S">{badge}</Badge>
+      </div>
+    {/if}
   </a>
+
   {#if multilevel && $$slots.subnav}
     <ul class="spectrum-SideNav">
       <slot name="subnav" />
     </ul>
   {/if}
 </li>
+
+<style>
+  .badge {
+    margin-left: 10px;
+  }
+</style>

package/src/Stores/banner.js

@@ -1,7 +1,14 @@
 import { writable } from "svelte/store"
 
+export const BANNER_TYPES = {
+  INFO: "info",
+  NEGATIVE: "negative",
+}
+
 export function createBannerStore() {
-  const DEFAULT_CONFIG = {}
+  const DEFAULT_CONFIG = {
+    messages: [],
+  }
 
   const banner = writable(DEFAULT_CONFIG)
 
@@ -20,17 +27,38 @@ export function createBannerStore() {
   const showStatus = async () => {
     const config = {
       message: "Some systems are experiencing issues",
-      type: "negative",
+      type: BANNER_TYPES.NEGATIVE,
       extraButtonText: "View Status",
       extraButtonAction: () => window.open("https://status.budibase.com/"),
     }
 
-    await show(config)
+    await queue([config])
+  }
+
+  const queue = async entries => {
+    const priority = {
+      [BANNER_TYPES.NEGATIVE]: 0,
+      [BANNER_TYPES.INFO]: 1,
+    }
+    banner.update(store => {
+      const sorted = [...store.messages, ...entries].sort((a, b) => {
+        if (priority[a.type] == priority[b.type]) {
+          return 0
+        }
+        return priority[a.type] < priority[b.type] ? -1 : 1
+      })
+      return {
+        ...store,
+        messages: sorted,
+      }
+    })
   }
 
   return {
     subscribe: banner.subscribe,
     showStatus,
+    show,
+    queue,
   }
 }
 

package/src/Tooltip/TooltipWrapper.svelte

@@ -4,6 +4,7 @@
 
   export let tooltip = ""
   export let size = "M"
+  export let disabled = true
 
   let showTooltip = false
 </script>
@@ -19,7 +20,7 @@
         on:mouseleave={() => (showTooltip = false)}
         on:focus
       >
-        <Icon name="InfoOutline" size="S" disabled={true} />
+        <Icon name="InfoOutline" size="S" {disabled} />
       </div>
       {#if showTooltip}
         <div class="tooltip">
@@ -54,7 +55,6 @@
     transform: scale(0.75);
   }
   .icon-small {
-    margin-top: -2px;
-    margin-bottom: -5px;
+    margin-bottom: -2px;
   }
 </style>

package/src/index.js

@@ -34,6 +34,7 @@ export { default as Layout } from "./Layout/Layout.svelte"
 export { default as Page } from "./Layout/Page.svelte"
 export { default as Link } from "./Link/Link.svelte"
 export { default as Tooltip } from "./Tooltip/Tooltip.svelte"
+export { default as TooltipWrapper } from "./Tooltip/TooltipWrapper.svelte"
 export { default as Menu } from "./Menu/Menu.svelte"
 export { default as MenuSection } from "./Menu/Section.svelte"
 export { default as MenuSeparator } from "./Menu/Separator.svelte"
@@ -94,7 +95,7 @@ export { default as clickOutside } from "./Actions/click_outside"
 
 // Stores
 export { notifications, createNotificationStore } from "./Stores/notifications"
-export { banner } from "./Stores/banner"
+export { banner, BANNER_TYPES } from "./Stores/banner"
 
 // Helpers
 export * as Helpers from "./helpers"