adds Link component to bbui

package.json

@@ -42,6 +42,7 @@
   "dependencies": {
     "@spectrum-css/actionbutton": "^1.0.1",
     "@spectrum-css/actiongroup": "^1.0.1",
+    "@spectrum-css/link": "^3.1.1",
     "@spectrum-css/toast": "^3.0.1"
   }
 }

packages/bbui/src/Button/TextButton.svelte

@@ -1,128 +0,0 @@
-<script>
-  export let active = false,
-    text = false,
-    small = false,
-    medium = false,
-    large = false,
-    blue = false,
-    green = false,
-    yellow = false,
-    purple = false,
-    red = false,
-    orange = false,
-    disabled = false,
-    href = false
-</script>
-
-{#if href}
-  <a
-    {href}
-    class:active
-    class:small
-    class:medium
-    class:large
-    class:text
-    class:blue
-    class:green
-    class:yellow
-    class:purple
-    class:red
-    class:orange><slot /></a>
-{:else}
-  <button
-    class:active
-    class:small
-    class:medium
-    class:large
-    class:text
-    class:blue
-    class:green
-    class:yellow
-    class:purple
-    class:red
-    class:orange
-    {disabled}
-    on:click|preventDefault>
-    <slot />
-  </button>
-{/if}
-
-<style>
-  button,
-  a {
-    font-family: var(--font-sans);
-    cursor: pointer;
-    font-weight: 600;
-    box-sizing: border-box;
-    overflow: hidden;
-    transition: all 0.08s ease 0s;
-    display: inline-flex;
-    align-items: center;
-    text-rendering: optimizeLegibility;
-    text-decoration: none;
-    outline: none;
-    -webkit-box-align: center;
-    user-select: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .text {
-    background-color: transparent;
-    color: var(--grey-7);
-    border: none;
-    font-weight: 500;
-  }
-  button.text:hover:not([disabled]) {
-    color: var(--ink);
-  }
-  button.text:active:not([disabled]) {
-    color: var(--blue);
-  }
-  button.text.active:not([disabled]) {
-    color: var(--blue);
-  }
-  button.text:disabled {
-    cursor: not-allowed;
-    color: var(--grey-4);
-  }
-
-  .blue {
-    color: var(--blue);
-  }
-
-  .green {
-    color: var(--green);
-  }
-
-  .red {
-    color: var(--red);
-  }
-
-  .purple {
-    color: var(--purple);
-  }
-
-  .yellow {
-    color: var(--yellow);
-  }
-
-  .orange {
-    color: var(--orange);
-  }
-
-  .small {
-    font-size: var(--font-size-xs);
-    margin: 0;
-  }
-
-  .medium {
-    font-size: var(--font-size-s);
-    margin: 0;
-  }
-
-  .large {
-    font-size: var(--font-size-m);
-    margin: 0;
-  }
-</style>

packages/bbui/src/Button/TextButton.svench

@@ -1,69 +0,0 @@
-<script>
-  import { View } from "svench";
-  import TextButton from "./TextButton.svelte";
-  import Icon from "../Icons/Icon.svelte";
-</script>
-
-<style>
-  div {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: var(--spacing-xl);
-  }
-</style>
-
-<View name="Text">
-  <div>
-    <TextButton text small on:click={() => alert('Clicked!')}>
-      <Icon name="view" />
-      Add View
-    </TextButton>
-    <TextButton text medium on:click={() => alert('Clicked!')}>
-      <Icon name="addcolumn" />
-      Add Column
-    </TextButton>
-    <TextButton text large on:click={() => alert('Clicked!')}>
-      <Icon name="addrow" />
-      Add Row
-    </TextButton>
-    <TextButton text disabled on:click={() => alert('Clicked!')}>
-      <Icon name="arrow" direction="w" />
-      Disabled Text Button
-    </TextButton>
-    <TextButton active text on:click={() => alert('Clicked!')}>
-      <Icon name="calculate" />
-      Active Calculation
-    </TextButton>
-  </div>
-</View>
-
-<View name="Colours">
-  <div>
-    <TextButton text medium yellow on:click={() => alert('Clicked!')}>
-      <Icon name="view" />
-      Add View
-    </TextButton>
-    <TextButton text medium blue on:click={() => alert('Clicked!')}>
-      <Icon name="addcolumn" />
-      Add Column
-    </TextButton>
-    <TextButton text medium purple on:click={() => alert('Clicked!')}>
-      <Icon name="addrow" />
-      Add Row
-    </TextButton>
-    <TextButton text medium red on:click={() => alert('Clicked!')}>
-      <Icon name="arrow" />
-      Delete
-    </TextButton>
-    <TextButton text medium green on:click={() => alert('Clicked!')}>
-      <Icon name="calculate" />
-      Calculate
-    </TextButton>
-  </div>
-</View>
-
-<View name="Usage as a link">
-  <div>
-    <TextButton green text href="https://google.com">This is a link</TextButton>
-  </div>
-</View>

packages/bbui/src/Drawer/Drawer.svelte

@@ -1,7 +1,7 @@
 <script>
   import { slide } from "svelte/transition"
   import Portal from "svelte-portal"
-  import ActionButton from '../Button/ActionButton.svelte'
+  import ActionButton from '../ActionButton/ActionButton.svelte'
 
   export let title
 

packages/bbui/src/Link/Link.svelte

@@ -0,0 +1,17 @@
+<script>
+    import "@spectrum-css/link/dist/index-vars.css"
+
+    export let href = "#"
+    export let size = "M"
+    export let quiet = false;
+    export let primary = false;
+    export let secondary = false;
+    export let overBackground = false
+</script>
+
+<a {href} class="spectrum-Link 
+    spectrum-Link--size{size}
+    {primary && 'spectrum-Link--primary'}
+    {secondary && 'spectrum-Link--secondary'}
+    {overBackground && 'spectrum-Link--overBackground'}
+    {quiet && 'spectrum-Link--quiet'}"><slot /></a>

packages/bbui/src/index.js

@@ -8,9 +8,10 @@ export { default as Select } from "./Form/Select.svelte"
 export { default as DataList } from "./Form/DataList.svelte"
 export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
 export { default as Drawer } from "./Drawer/Drawer.svelte"
+export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
+export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
 export { default as Button } from "./Button/Button.svelte"
 export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
-export { default as TextButton } from "./Button/TextButton.svelte"
 export { default as Toggle } from "./Form/Toggle.svelte"
 export { default as Radio } from "./Form/Radio.svelte"
 export { default as Checkbox } from "./Form/Checkbox.svelte"
@@ -22,6 +23,7 @@ export { default as Popover } from "./Popover/Popover.svelte"
 export { default as Body } from "./Styleguide/Body.svelte"
 export { default as Heading } from "./Styleguide/Heading.svelte"
 export { default as Label } from "./Styleguide/Label.svelte"
+export { default as Link } from "./Link/Link.svelte"
 export { default as Close } from "./Button/Close.svelte"
 export { default as Modal } from "./Modal/Modal.svelte"
 export { default as ModalContent } from "./Modal/ModalContent.svelte"

packages/builder/src/components/settings/tabs/APIKeys.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Input, Label, TextButton } from "@budibase/bbui"
+  import { Input, Label, Link } from "@budibase/bbui"
   import api from "builderStore/api"
   import { notifications } from "@budibase/bbui"
   import { database } from "stores/backend"
@@ -41,9 +41,9 @@
     edit
     value={keys.budibase}
     label="Budibase Cloud API Key" />
-  <TextButton text medium blue href="https://portal.budi.live">
+  <Link primary href="https://portal.budi.live">
     Log in to the Budibase Hosting Portal to get your API Key. →
-  </TextButton>
+  </Link>
   <div>
     <Label extraSmall grey>Instance ID (Webhooks)</Label>
     <span>{$database._id}</span>

packages/builder/src/components/settings/tabs/DangerZone.svelte

@@ -1,6 +1,6 @@
 <script>
   import { params, goto } from "@roxi/routify"
-  import { Input, TextArea, Button, Body } from "@budibase/bbui"
+  import { Input, Button, Body } from "@budibase/bbui"
   import { del } from "builderStore/api"
 
   let value = ""

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

@@ -1,8 +1,6 @@
-<script>
+<script>  
-  import { TextButton } from "@budibase/bbui"
+  import { goto } from "@roxi/routify"
-  import { Heading } from "@budibase/bbui"
+  import { ActionButton, Heading, Spacer } from "@budibase/bbui"
-  import { Spacer } from "@budibase/bbui"
-  import api from "builderStore/api"
   import { notifications } from "@budibase/bbui"
   import Spinner from "components/common/Spinner.svelte"
   import download from "downloadjs"
@@ -31,11 +29,11 @@
   <Heading small black>{name}</Heading>
   <Spacer medium />
   <div class="card-footer" data-cy={`app-${name}`}>
-    <TextButton text medium blue href="/builder/{_id}">
+    <ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
       Open
       {name}
       →
-    </TextButton>
+    </ActionButton>
     {#if appExportLoading}
       <Spinner size="10" />
     {:else}<i class="ri-folder-download-line" on:click={exportApp} />{/if}

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

@@ -1,12 +1,12 @@
 <script>
-  import { TextButton as Button, Modal } from "@budibase/bbui"
+  import { Button, Modal } from "@budibase/bbui"
   import BuilderSettingsModal from "./BuilderSettingsModal.svelte"
 
   let modal
 </script>
 
 <div>
-  <Button text on:click={modal.show}>
+  <Button icon="" text on:click={modal.show}>
     <i class="ri-settings-3-fill" />
     <p>Settings</p>
   </Button>

yarn.lock

@@ -834,6 +834,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.1.tgz#b95b86e7af229e90fe1e70399d8d4b547b4bd31c"
   integrity sha512-5Q6uMjzv5BFA2TwGASr/jAtJpTWl26fhWvgGY8kOA0RCSij35l+YJg/FPXf6Nnj2qCOl8DkNycjT9YXJ+bhyVA==
 
+"@spectrum-css/link@^3.1.1":
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.1.tgz#cb526a2e10b50ef5a7ae29cca7272e2610d597eb"
+  integrity sha512-Bi88lRhTY7g6nM/ryW1yY4Cji211ZYNtRxkxbV7n2lPvwMAAQtyx0qVD3ru4kTGj/FFVvmPR3XiOE10K13HSNA==
+
 "@spectrum-css/toast@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"