adds divider component
This commit is contained in:
parent
697c3d33df
commit
3056d4316a
12 changed files with 63 additions and 26 deletions
|
@ -57,6 +57,7 @@
|
||||||
"@spectrum-css/modal": "^3.0.1",
|
"@spectrum-css/modal": "^3.0.1",
|
||||||
"@spectrum-css/popover": "^3.0.1",
|
"@spectrum-css/popover": "^3.0.1",
|
||||||
"@spectrum-css/table": "^3.0.1",
|
"@spectrum-css/table": "^3.0.1",
|
||||||
|
"@spectrum-css/tabs": "^3.0.1",
|
||||||
"@spectrum-css/toast": "^3.0.1",
|
"@spectrum-css/toast": "^3.0.1",
|
||||||
"@spectrum-css/typography": "^3.0.1",
|
"@spectrum-css/typography": "^3.0.1",
|
||||||
"@spectrum-css/underlay": "^2.0.9",
|
"@spectrum-css/underlay": "^2.0.9",
|
||||||
|
|
14
packages/bbui/src/Divider/Divider.svelte
Normal file
14
packages/bbui/src/Divider/Divider.svelte
Normal file
|
@ -0,0 +1,14 @@
|
||||||
|
<script>
|
||||||
|
import "@spectrum-css/divider/dist/index-vars.css"
|
||||||
|
export let l = false
|
||||||
|
export let m = false
|
||||||
|
export let s = false
|
||||||
|
|
||||||
|
export let vertical = false
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<hr
|
||||||
|
class:spectrum-Divider--sizeL={l}
|
||||||
|
class:spectrum-Divider--sizeM={m}
|
||||||
|
class:spectrum-Divider--sizeS={s}
|
||||||
|
class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider">
|
|
@ -1,8 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import "@spectrum-css/divider/dist/index-vars.css"
|
|
||||||
|
|
||||||
import { getContext } from "svelte"
|
import { getContext } from "svelte"
|
||||||
import Button from "../Button/Button.svelte"
|
import Button from "../Button/Button.svelte"
|
||||||
|
import Heading from "../Typography/Heading.svelte"
|
||||||
|
import Divider from "../Divider/Divider.svelte"
|
||||||
import Icon from "../Icons/Icon.svelte"
|
import Icon from "../Icons/Icon.svelte"
|
||||||
import Context from "../context"
|
import Context from "../context"
|
||||||
|
|
||||||
|
@ -31,8 +31,8 @@
|
||||||
|
|
||||||
<div class="spectrum-Dialog spectrum-Dialog--{size}" role="dialog" tabindex="-1" aria-modal="true">
|
<div class="spectrum-Dialog spectrum-Dialog--{size}" role="dialog" tabindex="-1" aria-modal="true">
|
||||||
<div class="spectrum-Dialog-grid">
|
<div class="spectrum-Dialog-grid">
|
||||||
<h1 class="spectrum-Dialog-heading">{title}</h1>
|
<Heading m h2>{title}</Heading>
|
||||||
<hr class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--horizontal spectrum-Dialog-divider">
|
<Divider m />
|
||||||
|
|
||||||
<!-- TODO: Remove content-grid class once Layout components are in bbui -->
|
<!-- TODO: Remove content-grid class once Layout components are in bbui -->
|
||||||
<section class="spectrum-Dialog-content content-grid">
|
<section class="spectrum-Dialog-content content-grid">
|
||||||
|
|
20
packages/bbui/src/Tabs/Tabs.svelte
Normal file
20
packages/bbui/src/Tabs/Tabs.svelte
Normal file
|
@ -0,0 +1,20 @@
|
||||||
|
<script>
|
||||||
|
import "@spectrum-css/tabs/dist/index-vars.css"
|
||||||
|
|
||||||
|
export let vertical = false
|
||||||
|
</script>
|
||||||
|
<div class="spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
|
||||||
|
<div class="spectrum-Tabs-item is-selected" tabindex="0">
|
||||||
|
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
|
||||||
|
</div>
|
||||||
|
<div class="spectrum-Tabs-item" tabindex="0">
|
||||||
|
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
|
||||||
|
</div>
|
||||||
|
<div class="spectrum-Tabs-item" tabindex="0">
|
||||||
|
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
|
||||||
|
</div>
|
||||||
|
<div class="spectrum-Tabs-item" tabindex="0">
|
||||||
|
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
|
||||||
|
</div>
|
||||||
|
<div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
|
||||||
|
</div>
|
|
@ -37,6 +37,7 @@ export { default as Multiselect } from "./Form/Multiselect.svelte"
|
||||||
export { default as Slider } from "./Form/Slider.svelte"
|
export { default as Slider } from "./Form/Slider.svelte"
|
||||||
export { default as Context } from "./context"
|
export { default as Context } from "./context"
|
||||||
export { default as Table } from "./Table/Table.svelte"
|
export { default as Table } from "./Table/Table.svelte"
|
||||||
|
export { default as Divider } from "./Divider/Divider.svelte"
|
||||||
|
|
||||||
// Typography
|
// Typography
|
||||||
export { default as Body } from "./Typography/Body.svelte"
|
export { default as Body } from "./Typography/Body.svelte"
|
||||||
|
|
|
@ -480,6 +480,11 @@
|
||||||
resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
|
resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
|
||||||
integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
|
integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
|
||||||
|
|
||||||
|
"@spectrum-css/tabs@^3.0.1":
|
||||||
|
version "3.0.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.1.tgz#81cebae7a0db0056834c2b8fdf0df3e71aaaa812"
|
||||||
|
integrity sha512-uyWGiSuv+rKY57RVnNkYe0+8fQxgXtQl09JAmqyqUnvlX5b9sHG/R5TP7ExZ8C7BgE8hzVjPVAMH3RMEQERGUQ==
|
||||||
|
|
||||||
"@spectrum-css/toast@^3.0.1":
|
"@spectrum-css/toast@^3.0.1":
|
||||||
version "3.0.1"
|
version "3.0.1"
|
||||||
resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
|
resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"
|
||||||
|
|
|
@ -46,12 +46,12 @@
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<Heading small>Available bindings</Heading>
|
<Heading s h3>Available bindings</Heading>
|
||||||
<Spacer medium />
|
<Spacer medium />
|
||||||
<Input extraThin placeholder="Search" bind:value={search} />
|
<Input extraThin placeholder="Search" bind:value={search} />
|
||||||
<Spacer medium />
|
<Spacer medium />
|
||||||
{#each categories as [categoryName, bindings]}
|
{#each categories as [categoryName, bindings]}
|
||||||
<Heading extraSmall>{categoryName}</Heading>
|
<Heading xs h4>{categoryName}</Heading>
|
||||||
<Spacer extraSmall />
|
<Spacer extraSmall />
|
||||||
{#each bindableProperties.filter(binding =>
|
{#each bindableProperties.filter(binding =>
|
||||||
binding.label.match(searchRgx)
|
binding.label.match(searchRgx)
|
||||||
|
@ -64,7 +64,7 @@
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
{/each}
|
{/each}
|
||||||
<Heading extraSmall>Helpers</Heading>
|
<Heading xs h3>Helpers</Heading>
|
||||||
<Spacer extraSmall />
|
<Spacer extraSmall />
|
||||||
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
||||||
<div class="binding" on:click={() => addToText(helper)}>
|
<div class="binding" on:click={() => addToText(helper)}>
|
||||||
|
|
|
@ -63,7 +63,7 @@
|
||||||
<Input extraThin placeholder="Search" bind:value={search} />
|
<Input extraThin placeholder="Search" bind:value={search} />
|
||||||
<Spacer medium />
|
<Spacer medium />
|
||||||
{#if context}
|
{#if context}
|
||||||
<Heading extraSmall>Columns</Heading>
|
<Heading xs h3>Columns</Heading>
|
||||||
<Spacer small />
|
<Spacer small />
|
||||||
<ul>
|
<ul>
|
||||||
{#each context.filter(context =>
|
{#each context.filter(context =>
|
||||||
|
@ -77,7 +77,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
<Spacer small />
|
<Spacer small />
|
||||||
{#if instance}
|
{#if instance}
|
||||||
<Heading extraSmall>Components</Heading>
|
<Heading xs h3>Components</Heading>
|
||||||
<Spacer small />
|
<Spacer small />
|
||||||
<ul>
|
<ul>
|
||||||
{#each instance.filter(instance =>
|
{#each instance.filter(instance =>
|
||||||
|
@ -90,7 +90,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
{/if}
|
{/if}
|
||||||
<Spacer small />
|
<Spacer small />
|
||||||
<Heading extraSmall>Helpers</Heading>
|
<Heading xs h3>Helpers</Heading>
|
||||||
<Spacer small />
|
<Spacer small />
|
||||||
<ul>
|
<ul>
|
||||||
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
||||||
|
|
|
@ -137,7 +137,7 @@
|
||||||
<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
|
<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
|
||||||
<div class="dropdown">
|
<div class="dropdown">
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading extraSmall>Tables</Heading>
|
<Heading xs h3>Tables</Heading>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
{#each tables as table}
|
{#each tables as table}
|
||||||
|
@ -150,7 +150,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
<hr />
|
<hr />
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading extraSmall>Views</Heading>
|
<Heading xs h3>Views</Heading>
|
||||||
</div>
|
</div>
|
||||||
<ul>
|
<ul>
|
||||||
{#each views as view}
|
{#each views as view}
|
||||||
|
|
|
@ -26,7 +26,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="apps-card">
|
<div class="apps-card">
|
||||||
<Heading small black>{name}</Heading>
|
<Heading s h3>{name}</Heading>
|
||||||
<Spacer medium />
|
<Spacer medium />
|
||||||
<div class="card-footer" data-cy={`app-${name}`}>
|
<div class="card-footer" data-cy={`app-${name}`}>
|
||||||
<ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
|
<ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import AppCard from "./AppCard.svelte"
|
import AppCard from "./AppCard.svelte"
|
||||||
import { Heading } from "@budibase/bbui"
|
import { Heading, Divider } from "@budibase/bbui"
|
||||||
import Spinner from "components/common/Spinner.svelte"
|
import Spinner from "components/common/Spinner.svelte"
|
||||||
import { get } from "builderStore/api"
|
import { get } from "builderStore/api"
|
||||||
|
|
||||||
|
@ -19,23 +19,18 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
<Heading lh medium black>Your Apps</Heading>
|
<Heading m h2>Your Apps</Heading>
|
||||||
|
<Divider s />
|
||||||
{#await promise}
|
{#await promise}
|
||||||
<div class="spinner-container">
|
<div class="spinner-container">
|
||||||
<Spinner size="30" />
|
<Spinner size="30" />
|
||||||
</div>
|
</div>
|
||||||
{:then apps}
|
{:then apps}
|
||||||
<div class="inner">
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div class="apps">
|
<div class="apps">
|
||||||
{#each apps as app}
|
{#each apps as app}
|
||||||
<AppCard {...app} />
|
<AppCard {...app} />
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{:catch err}
|
{:catch err}
|
||||||
<h1 style="color:red">{err}</h1>
|
<h1 style="color:red">{err}</h1>
|
||||||
{/await}
|
{/await}
|
||||||
|
@ -43,6 +38,7 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.apps {
|
.apps {
|
||||||
|
margin-top: var(--spectrum-global-dimension-static-size-150);
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||||
grid-gap: var(--layout-m);
|
grid-gap: var(--layout-m);
|
||||||
|
|
|
@ -57,7 +57,7 @@
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<Heading medium black>Welcome to the Budibase Beta</Heading>
|
<Heading m h1>Welcome to the Budibase Beta</Heading>
|
||||||
<div class="button-group">
|
<div class="button-group">
|
||||||
<Button secondary on:click={initiateAppImport}>Import Web App</Button>
|
<Button secondary on:click={initiateAppImport}>Import Web App</Button>
|
||||||
<Spacer medium />
|
<Spacer medium />
|
||||||
|
|
Loading…
Reference in a new issue