@budibase/bbui 0.0.1

package/src/Tabs/Tab.svelte

@@ -0,0 +1,88 @@
+<script>
+  import { getContext, onMount, createEventDispatcher } from "svelte"
+  import Portal from "svelte-portal"
+  export let title
+  export let icon = ""
+  export let id
+
+  const dispatch = createEventDispatcher()
+  let selected = getContext("tab")
+  let tab_internal
+  let tabInfo
+
+  const setTabInfo = () => {
+    // If the tabs are being rendered inside a component which uses
+    // a svelte transition to enter, then this initial getBoundingClientRect
+    // will return an incorrect position.
+    // We just need to get this off the main thread to fix this, by using
+    // a 0ms timeout.
+    setTimeout(() => {
+      tabInfo = tab_internal?.getBoundingClientRect()
+      if (tabInfo && $selected.title === title) {
+        $selected.info = tabInfo
+      }
+    }, 0)
+  }
+
+  onMount(() => {
+    setTabInfo()
+  })
+
+  //Ensure that the underline is in the correct location
+  $: {
+    if ($selected.title === title && tab_internal) {
+      if ($selected.info?.left !== tab_internal.getBoundingClientRect().left) {
+        setTabInfo()
+      }
+    }
+  }
+
+  const onClick = () => {
+    $selected = {
+      ...$selected,
+      title,
+      info: tab_internal.getBoundingClientRect(),
+    }
+    dispatch("click")
+  }
+</script>
+
+<div
+  {id}
+  bind:this={tab_internal}
+  on:click={onClick}
+  class:is-selected={$selected.title === title}
+  class="spectrum-Tabs-item"
+  class:emphasized={$selected.title === title && $selected.emphasized}
+  tabindex="0"
+>
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeM"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="Folder"
+    >
+      <use xlink:href="#spectrum-icon-18-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Tabs-itemLabel">{title}</span>
+</div>
+{#if $selected.title === title}
+  <Portal target=".spectrum-Tabs-content-{$selected.id}">
+    <slot />
+  </Portal>
+{/if}
+
+<style>
+  .emphasized {
+    color: var(--spectrum-global-color-blue-600);
+  }
+  .spectrum-Tabs-item {
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .spectrum-Tabs-item.is-selected,
+  .spectrum-Tabs-item:hover {
+    color: var(--spectrum-global-color-gray-900);
+  }
+</style>

package/src/Tabs/Tabs.svelte

@@ -0,0 +1,130 @@
+<script>
+  import "@spectrum-css/tabs/dist/index-vars.css"
+  import { writable } from "svelte/store"
+  import { onMount, setContext, createEventDispatcher } from "svelte"
+
+  export let selected
+  export let vertical = false
+  export let noPadding = false
+  // added as a separate option as noPadding is used for vertical padding
+  export let noHorizPadding = false
+  export let quiet = false
+  export let emphasized = false
+  export let onTop = false
+  export let size = "M"
+
+  let thisSelected = undefined
+
+  let _id = id()
+  const tab = writable({ title: selected, id: _id, emphasized })
+  setContext("tab", tab)
+
+  let container
+
+  const dispatch = createEventDispatcher()
+
+  $: {
+    if (thisSelected !== selected) {
+      thisSelected = selected
+      dispatch("select", thisSelected)
+    } else if ($tab.title !== thisSelected) {
+      thisSelected = $tab.title
+      selected = $tab.title
+      dispatch("select", thisSelected)
+    }
+    if ($tab.title !== thisSelected) {
+      tab.update(state => {
+        state.title = thisSelected
+        return state
+      })
+    }
+  }
+
+  let top, left, width, height
+  $: calculateIndicatorLength($tab)
+  $: calculateIndicatorOffset($tab)
+
+  function calculateIndicatorLength() {
+    if (!vertical) {
+      width = $tab.info?.width + "px"
+      height = $tab.info?.height
+    } else {
+      height = $tab.info?.height + 4 + "px"
+      width = $tab.info?.width
+    }
+  }
+
+  function calculateIndicatorOffset() {
+    if (!vertical) {
+      left = $tab.info?.left - container?.getBoundingClientRect().left + "px"
+    } else {
+      top = $tab.info?.top - container?.getBoundingClientRect().top + "px"
+    }
+  }
+
+  onMount(() => {
+    calculateIndicatorLength()
+    calculateIndicatorOffset()
+  })
+
+  function id() {
+    return "_" + Math.random().toString(36).slice(2, 9)
+  }
+</script>
+
+<div
+  bind:this={container}
+  class:spectrum-Tabs--quiet={quiet}
+  class:noHorizPadding
+  class:onTop
+  class:spectrum-Tabs--vertical={vertical}
+  class:spectrum-Tabs--horizontal={!vertical}
+  class="spectrum-Tabs spectrum-Tabs--size{size}"
+>
+  <slot />
+  {#if $tab.info}
+    <div
+      class="spectrum-Tabs-selectionIndicator"
+      class:emphasized
+      style="width: {width}; height: {height}; left: {left}; top: {top};"
+    />
+  {/if}
+</div>
+
+<div
+  class="spectrum-Tabs-content spectrum-Tabs-content-{_id}"
+  class:noPadding
+/>
+
+<style>
+  .spectrum-Tabs--quiet {
+    border-bottom: none !important;
+  }
+  .spectrum-Tabs {
+    padding-left: var(--spacing-xl);
+    padding-right: var(--spacing-xl);
+    position: relative;
+    border-bottom-color: var(--spectrum-global-color-gray-200);
+  }
+  .spectrum-Tabs-content {
+    margin-top: var(--spectrum-global-dimension-static-size-150);
+  }
+  .spectrum-Tabs-selectionIndicator {
+    transition: all 200ms;
+    background-color: var(--spectrum-global-color-gray-900);
+  }
+  .spectrum-Tabs-selectionIndicator.emphasized {
+    background-color: var(--spectrum-global-color-blue-400);
+  }
+  .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
+  }
+  .noHorizPadding {
+    padding: 0;
+  }
+  .noPadding {
+    margin: 0;
+  }
+  .onTop {
+    z-index: 100;
+  }
+</style>

package/src/Tags/Tag.svelte

@@ -0,0 +1,43 @@
+<script>
+  import "@spectrum-css/tags/dist/index-vars.css"
+  import Avatar from "../Avatar/Avatar.svelte"
+  import ClearButton from "../ClearButton/ClearButton.svelte"
+
+  export let icon = ""
+  export let avatar = ""
+  export let invalid = false
+  export let disabled = false
+  export let closable = false
+</script>
+
+<div
+  class:is-invalid={invalid}
+  class:is-disabled={disabled}
+  class="spectrum-Tags-item"
+  role="listitem"
+>
+  {#if avatar}
+    <Avatar url={avatar} />
+  {/if}
+  {#if icon}
+    <svg
+      class="spectrum-Icon spectrum-Icon--sizeS"
+      focusable="false"
+      aria-hidden="true"
+      aria-label="Tag"
+    >
+      <use xlink:href="#spectrum-icon-24-{icon}" />
+    </svg>
+  {/if}
+  <span class="spectrum-Tags-itemLabel"><slot /></span>
+  {#if closable}
+    <ClearButton on:click />
+  {/if}
+</div>
+
+<style>
+  .spectrum-Tags-item {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+</style>

package/src/Tags/Tags.svelte

@@ -0,0 +1,17 @@
+<script>
+  import "@spectrum-css/tags/dist/index-vars.css"
+</script>
+
+<div class="spectrum-Tags" role="list" aria-label="list">
+  <slot />
+</div>
+
+<style>
+  .spectrum-Tags {
+    margin-top: -8px;
+    margin-left: -4px;
+  }
+  .spectrum-Tags :global(.spectrum-Tags-item) {
+    margin: 8px 0 0 4px !important;
+  }
+</style>

package/src/Tooltip/Tooltip.svelte

@@ -0,0 +1,34 @@
+<script>
+  import "@spectrum-css/tooltip/dist/index-vars.css"
+
+  export let direction = "top"
+  export let text = ""
+  export let textWrapping = false
+</script>
+
+<!-- Showing / Hiding a text wrapped tooltip should be handled outside the component -->
+{#if textWrapping}
+  <span class="spectrum-Tooltip spectrum-Tooltip--{direction} is-open tooltip">
+    <span class="spectrum-Tooltip-label">{text}</span>
+    <span class="spectrum-Tooltip-tip" />
+  </span>
+{:else}
+  <!-- The default show on hover tooltip does not support text wrapping -->
+  <span class="u-tooltip-showOnHover tooltip">
+    <slot />
+    <div class={`spectrum-Tooltip spectrum-Tooltip--${direction}`}>
+      <span class="spectrum-Tooltip-label">{text}</span>
+      <span class="spectrum-Tooltip-tip" />
+    </div>
+  </span>
+{/if}
+
+<style>
+  .tooltip {
+    pointer-events: none;
+    background: var(--spectrum-global-color-gray-500);
+  }
+  .spectrum-Tooltip-tip {
+    border-top-color: var(--spectrum-global-color-gray-500);
+  }
+</style>

package/src/Tooltip/TooltipWrapper.svelte

@@ -0,0 +1,60 @@
+<script>
+  import Tooltip from "./Tooltip.svelte"
+  import Icon from "../Icon/Icon.svelte"
+
+  export let tooltip = ""
+  export let size = "M"
+  export let disabled = true
+
+  let showTooltip = false
+</script>
+
+<div class:container={!!tooltip}>
+  <slot />
+  {#if tooltip}
+    <div class="icon-container">
+      <div
+        class="icon"
+        class:icon-small={size === "M" || size === "S"}
+        on:mouseover={() => (showTooltip = true)}
+        on:mouseleave={() => (showTooltip = false)}
+        on:focus
+      >
+        <Icon name="InfoOutline" size="S" {disabled} />
+      </div>
+      {#if showTooltip}
+        <div class="tooltip">
+          <Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
+        </div>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    display: flex;
+    align-items: center;
+  }
+  .icon-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+  .tooltip {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    top: 15px;
+    z-index: 200;
+    width: 160px;
+  }
+  .icon {
+    transform: scale(0.75);
+  }
+  .icon-small {
+    margin-bottom: -2px;
+  }
+</style>

package/src/TreeView/Item.svelte

@@ -0,0 +1,41 @@
+<script>
+  export let selected = false
+  export let open = false
+  export let href = false
+  export let title
+  export let icon
+</script>
+
+<li
+  class:is-selected={selected}
+  class:is-open={open}
+  class="spectrum-TreeView-item"
+>
+  <a on:click class="spectrum-TreeView-itemLink" {href}>
+    {#if $$slots.default}
+      <svg
+        class="spectrum-Icon spectrum-UIIcon-ChevronRight100 spectrum-TreeView-itemIndicator"
+        focusable="false"
+        aria-hidden="true"
+      >
+        <use xlink:href="#spectrum-css-icon-Chevron100" />
+      </svg>
+    {/if}
+    {#if icon}
+      <svg
+        class="spectrum-TreeView-itemIcon spectrum-Icon spectrum-Icon--sizeM"
+        focusable="false"
+        aria-hidden="true"
+        aria-label="Layers"
+      >
+        <use xlink:href="#spectrum-icon-18-{icon}" />
+      </svg>
+    {/if}
+    <span class="spectrum-TreeView-itemLabel">{title}</span>
+  </a>
+  {#if $$slots.default}
+    <ul class="spectrum-TreeView">
+      <slot />
+    </ul>
+  {/if}
+</li>

package/src/TreeView/Tree.svelte

@@ -0,0 +1,16 @@
+<script>
+  import "@spectrum-css/treeview/dist/index-vars.css"
+
+  export let quiet = false
+  export let standalone = true
+  export let width = "250px"
+</script>
+
+<ul
+  class:spectrum-TreeView--standalone={standalone}
+  class:spectrum-TreeView--quiet={quiet}
+  class="spectrum-TreeView"
+  style="width: {width}"
+>
+  <slot />
+</ul>

package/src/Typography/Body.svelte

@@ -0,0 +1,22 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  export let size = "M"
+  export let serif = false
+  export let weight = null
+  export let textAlign = null
+  export let color = null
+</script>
+
+<p
+  data-testid="typography-body"
+  style={`
+    ${weight ? `font-weight:${weight};` : ""}
+    ${textAlign ? `text-align:${textAlign};` : ""}
+    ${color ? `color:${color};` : ""}
+  `}
+  class="spectrum-Body spectrum-Body--size{size}"
+  class:spectrum-Body--serif={serif}
+>
+  <slot />
+</p>

package/src/Typography/Code.svelte

@@ -0,0 +1,10 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  // Sizes
+  export let size = "M"
+</script>
+
+<code class="spectrum-Code spectrum-Code--size{size}">
+  <slot />
+</code>

package/src/Typography/Detail.svelte

@@ -0,0 +1,19 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  export let size = "M"
+  export let serif = false
+</script>
+
+<p
+  class="spectrum-Detail spectrum-Detail--size{size}"
+  class:spectrum-Detail--serif={serif}
+>
+  <slot />
+</p>
+
+<style>
+  p {
+    font-weight: 600;
+  }
+</style>

package/src/Typography/Heading.svelte

@@ -0,0 +1,24 @@
+<script>
+  import "@spectrum-css/typography/dist/index-vars.css"
+
+  // Sizes
+  export let size = "M"
+  export let textAlign
+  export let noPadding = false
+  export let weight = "default" // light, heavy, default
+</script>
+
+<h1
+  data-testid="typography-heading"
+  style={textAlign ? `text-align:${textAlign}` : ``}
+  class:noPadding
+  class="spectrum-Heading spectrum-Heading--size{size} spectrum-Heading--{weight}"
+>
+  <slot />
+</h1>
+
+<style>
+  h1 {
+    font-family: var(--font-accent);
+  }
+</style>

package/src/bbui.css

@@ -0,0 +1,118 @@
+:root {
+  --background: #ffffff;
+  --ink: #000000;
+
+  --grey-1: #fafafa;
+  --grey-2: #f5f5f5;
+  --grey-3: #eeeeee;
+  --grey-4: #e0e0e0;
+  --grey-5: #bdbdbd;
+  --grey-6: #9e9e9e;
+  --grey-7: #757575;
+  --grey-8: #616161;
+  --grey-9: #424242;
+
+  --blue-light: #f1f4fc;
+  --blue: #4285f4;
+  --blue-dark: #2f4c9b;
+
+  --red-light: #ffe6e6;
+  --red: #e26d69;
+  --red-dark: #800400;
+
+  --yellow-light: #fff7e6;
+  --yellow: #ffd26a;
+  --yellow-dark: #805900;
+
+  --orange-light: #fff0e6;
+  --orange: #f0955a;
+  --orange-dark: #803300;
+
+  --green-light: #e6ffeb;
+  --green: #84c991;
+  --green-dark: #008017;
+
+  --purple-light: #e9e6ff;
+  --purple: #806fde;
+  --purple-dark: #130080;
+
+  --rounded-small: 4px;
+  --rounded-medium: 8px;
+  --rounded-large: 16px;
+
+  --font-sans: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-accent: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
+    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
+  --font-serif: "Georgia", Cambria, Times New Roman, Times, serif;
+  --font-mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
+  --spectrum-alias-body-text-font-family: var(--font-sans);
+
+  font-size: 16px;
+  --font-size-xs: 0.75rem;
+  --font-size-s: 0.875rem;
+  --font-size-m: 1rem;
+  --font-size-l: 1.15rem;
+  --font-size-xl: 1.3rem;
+
+  --heading-font-size-xs: 0.875rem;
+  --heading-font-size-s: 1.12rem;
+  --heading-font-size-m: 1.5rem;
+  --heading-font-size-l: 2.6rem;
+  --heading-font-size-xl: 3rem;
+
+  --font-render: optimizeLegibility;
+  --font-smooth: antialiased;
+
+  --spacing-xs: 0.25rem;
+  --spacing-s: 0.5rem;
+  --spacing-m: 0.75rem;
+  --spacing-l: 1rem;
+  --spacing-xl: 1.25rem;
+
+  --layout-xs: 1.25rem;
+  --layout-s: 1.5rem;
+  --layout-m: 2rem;
+  --layout-l: 3rem;
+  --layout-xl: 4rem;
+
+  --border-radius-xs: 0.125rem;
+  --border-radius-s: 0.35rem;
+  --border-radius-m: 0.5rem;
+  --border-radius-l: 1rem;
+  --border-radius-xl: 100rem;
+
+  --border-black: 2px var(--ink) solid;
+  --border-dark: 2px var(--grey-7) solid;
+  --border-grey: 1px var(--grey-4) solid;
+  --border-grey-2: 2px var(--grey-4) solid;
+  --border-light: 1px var(--grey-3) solid;
+  --border-light-2: 2px var(--grey-3) solid;
+  --border-blue: 2px var(--blue) solid;
+  --border-transparent: 2px transparent solid;
+
+  --spectrum-alias-text-color-disabled: var(--spectrum-global-color-gray-600);
+}
+
+a {
+  text-decoration: none;
+}
+
+/* Custom theme additions */
+.spectrum--darkest {
+  --drop-shadow: rgba(0, 0, 0, 0.6);
+  --spectrum-global-color-blue-100: rgb(28, 33, 43);
+}
+.spectrum--dark {
+  --drop-shadow: rgba(0, 0, 0, 0.3);
+  --spectrum-global-color-blue-100: rgb(42, 47, 57);
+}
+.spectrum--light {
+  --drop-shadow: rgba(0, 0, 0, 0.075);
+  --spectrum-global-color-blue-100: rgb(240, 245, 255);
+}
+.spectrum--lightest {
+  --drop-shadow: rgba(0, 0, 0, 0.05);
+  --spectrum-global-color-blue-100: rgb(240, 244, 255);
+}

package/src/context.js

@@ -0,0 +1,4 @@
+export default {
+  Modal: "bbui-modal",
+  PopoverRoot: "bbui-popover-root",
+}