MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

adds Link component to bbui

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-09 14:44:48 +02:00
parent fe991c683e
commit 9e2cf66173
15 changed files with 38 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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"
}
}

0
packages/bbui/src/Button/ActionButton.svelte → packages/bbui/src/ActionButton/ActionButton.svelte
View File

0
packages/bbui/src/Button/ActionGroup.svelte → packages/bbui/src/ActionGroup/ActionGroup.svelte
View File

128
packages/bbui/src/Button/TextButton.svelte
View File

@ -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>

69
packages/bbui/src/Button/TextButton.svench
View File

@ -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>

2
packages/bbui/src/Drawer/Drawer.svelte
View File

@ -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

17
packages/bbui/src/Link/Link.svelte Normal file
View File

@ -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>

0
packages/bbui/src/Menu/ActionMenu.svelte Normal file
View File

0
packages/bbui/src/Menu/Menu.svelte Normal file
View File

4
packages/bbui/src/index.js
View File

@ -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"

6
packages/builder/src/components/settings/tabs/APIKeys.svelte
View File

@ -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>

2
packages/builder/src/components/settings/tabs/DangerZone.svelte
View File

@ -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 = ""

12
packages/builder/src/components/start/AppCard.svelte
View File

@ -1,8 +1,6 @@
<script>
import { TextButton } from "@budibase/bbui"
import { Heading } from "@budibase/bbui"
import { Spacer } from "@budibase/bbui"
import api from "builderStore/api"
<script>
import { goto } from "@roxi/routify"
import { ActionButton, Heading, Spacer } from "@budibase/bbui"
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}

4
packages/builder/src/components/start/BuilderSettingsButton.svelte
View File

@ -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>

5
yarn.lock
View File

@ -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"