@budibase/bbui 1.0.81-alpha.3 → 1.0.81-alpha.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@budibase/bbui",
   "description": "A UI solution used in the different Budibase projects.",
-  "version": "1.0.81-alpha.3",
+  "version": "1.0.81-alpha.6",
   "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.0.81-alpha.3",
+    "@budibase/string-templates": "^1.0.81-alpha.6",
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
     "@spectrum-css/avatar": "^3.0.2",
@@ -84,5 +84,5 @@
     "svelte-flatpickr": "^3.2.3",
     "svelte-portal": "^1.0.0"
   },
-  "gitHead": "66996ee818a416d10f813a2dc9d1815580830172"
+  "gitHead": "86a54664fe53404c8b54d92266e9ef7f5e5a5a6c"
 }

package/src/Banner/Banner.svelte

@@ -57,3 +57,10 @@
     </div>
   </div>
 {/if}
+
+<style>
+  .spectrum-Toast {
+    pointer-events: all;
+    width: 100%;
+  }
+</style>

package/src/Banner/BannerDisplay.svelte

@@ -0,0 +1,31 @@
+<script>
+  import "@spectrum-css/toast/dist/index-vars.css"
+  import Portal from "svelte-portal"
+  import { banner } from "../Stores/banner"
+  import Banner from "./Banner.svelte"
+  import { fly } from "svelte/transition"
+</script>
+
+<Portal target=".banner-container">
+  <div class="banner">
+    {#if $banner.message}
+      <div transition:fly={{ y: -30 }}>
+        <Banner
+          type={$banner.type}
+          extraButtonText={$banner.extraButtonText}
+          extraButtonAction={$banner.extraButtonAction}
+          on:change={$banner.onChange}
+        >
+          {$banner.message}
+        </Banner>
+      </div>
+    {/if}
+  </div>
+</Portal>
+
+<style>
+  .banner {
+    pointer-events: none;
+    width: 100%;
+  }
+</style>

package/src/Stores/banner.js

@@ -0,0 +1,37 @@
+import { writable } from "svelte/store"
+
+export function createBannerStore() {
+  const DEFAULT_CONFIG = {}
+
+  const banner = writable(DEFAULT_CONFIG)
+
+  const show = async (
+    // eslint-disable-next-line
+    config = { message, type, extraButtonText, extraButtonAction, onChange }
+  ) => {
+    banner.update(store => {
+      return {
+        ...store,
+        ...config,
+      }
+    })
+  }
+
+  const showStatus = async () => {
+    const config = {
+      message: "Some systems are experiencing issues",
+      type: "negative",
+      extraButtonText: "View Status",
+      extraButtonAction: () => window.open("https://status.budibase.com/"),
+    }
+
+    await show(config)
+  }
+
+  return {
+    subscribe: banner.subscribe,
+    showStatus,
+  }
+}
+
+export const banner = createBannerStore()

package/src/index.js

@@ -60,6 +60,7 @@ export { default as StatusLight } from "./StatusLight/StatusLight.svelte"
 export { default as ColorPicker } from "./ColorPicker/ColorPicker.svelte"
 export { default as InlineAlert } from "./InlineAlert/InlineAlert.svelte"
 export { default as Banner } from "./Banner/Banner.svelte"
+export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
 export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
 export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
 export { default as RichTextField } from "./Form/RichTextField.svelte"
@@ -84,6 +85,7 @@ export { default as clickOutside } from "./Actions/click_outside"
 
 // Stores
 export { notifications, createNotificationStore } from "./Stores/notifications"
+export { banner } from "./Stores/banner"
 
 // Helpers
 export * as Helpers from "./helpers"