CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-05 06:20:55 +12:00
Code Issues Projects Releases Wiki Activity

Use spectrum heading in standard components

Browse source
This commit is contained in:
Andrew Kingston 2021-06-30 20:09:26 +01:00
parent d0c6f64b22
commit 3325cc1eb5
3 changed files with 9 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/standard-components/package.json
View file

@ -37,6 +37,7 @@
"@spectrum-css/card": "^3.0.3", "@spectrum-css/card": "^3.0.3",
"@spectrum-css/link": "^3.1.3", "@spectrum-css/link": "^3.1.3",
"@spectrum-css/page": "^3.0.1", "@spectrum-css/page": "^3.0.1",
"@spectrum-css/typography": "^3.0.2",
"@spectrum-css/vars": "^3.0.1", "@spectrum-css/vars": "^3.0.1",
"apexcharts": "^3.22.1", "apexcharts": "^3.22.1",
"dayjs": "^1.10.5", "dayjs": "^1.10.5",

23
packages/standard-components/src/Heading.svelte
View file

@ -1,5 +1,6 @@
<script> <script>
import { getContext } from "svelte" import { getContext } from "svelte"
import "@spectrum-css/typography/dist/index-vars.css"
const { styleable, builderStore } = getContext("sdk") const { styleable, builderStore } = getContext("sdk")
const component = getContext("component") const component = getContext("component")
@ -16,6 +17,8 @@
$: componentText = $builderStore.inBuilder $: componentText = $builderStore.inBuilder
? text || $component.name || "Placeholder text" ? text || $component.name || "Placeholder text"
: text || "" : text || ""
$: sizeClass = `spectrum-Heading--size${size || "M"}`
$: alignClass = `align--${align || "left"}`
// Add color styles to main styles object, otherwise the styleable helper // Add color styles to main styles object, otherwise the styleable helper
// overrides the color when it's passed as inline style. // overrides the color when it's passed as inline style.
@ -34,21 +37,15 @@
class:bold class:bold
class:italic class:italic
class:underline class:underline
class="align--{align || 'left'} size--{size || 'M'}" class="spectrum-Heading {sizeClass} {alignClass}"
> >
{#if bold} {componentText}
<strong>{componentText}</strong>
{:else}
{componentText}
{/if}
</h1> </h1>
<style> <style>
h1 { h1 {
display: inline-block;
white-space: pre-wrap; white-space: pre-wrap;
font-weight: 600; font-weight: 600;
margin: 0;
} }
.placeholder { .placeholder {
font-style: italic; font-style: italic;
@ -63,15 +60,7 @@
.underline { .underline {
text-decoration: underline; text-decoration: underline;
} }
.size--S {
font-size: 18px;
}
.size--M {
font-size: 22px;
}
.size--L {
font-size: 28px;
}
.align--left { .align--left {
text-align: left; text-align: left;
} }

4
packages/standard-components/yarn.lock
View file

@ -7,7 +7,7 @@
resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.2.1.tgz#7e2cb3fcfb5c8b12d7275afafbb6ec44913551b4" resolved "https://registry.yarnpkg.com/@adobe/spectrum-css-workflow-icons/-/spectrum-css-workflow-icons-1.2.1.tgz#7e2cb3fcfb5c8b12d7275afafbb6ec44913551b4"
integrity sha512-uVgekyBXnOVkxp+CUssjN/gefARtudZC8duEn1vm0lBQFwGRZFlDEzU1QC+aIRWCrD1Z8OgRpmBYlSZ7QS003w== integrity sha512-uVgekyBXnOVkxp+CUssjN/gefARtudZC8duEn1vm0lBQFwGRZFlDEzU1QC+aIRWCrD1Z8OgRpmBYlSZ7QS003w==
"@budibase/bbui@^0.9.65": "@budibase/bbui@^0.9.67":
version "0.9.67" version "0.9.67"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-0.9.67.tgz#9e242cbf25c04d9843d64cd676f5c293f531f18f" resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-0.9.67.tgz#9e242cbf25c04d9843d64cd676f5c293f531f18f"
integrity sha512-XwwwPuOG4y/bV9psjOjYBvAqVaVJ56nklKOm2snaSS0P9WlQ17TWVcixQo5Ol9ecvzl9iVD2Wi2rWTX6y6sYaA== integrity sha512-XwwwPuOG4y/bV9psjOjYBvAqVaVJ56nklKOm2snaSS0P9WlQ17TWVcixQo5Ol9ecvzl9iVD2Wi2rWTX6y6sYaA==
@ -252,7 +252,7 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.3.tgz#aeda5175158b9f8d7529cb2b394428eb2a428046" resolved "https://registry.yarnpkg.com/@spectrum-css/treeview/-/treeview-3.0.3.tgz#aeda5175158b9f8d7529cb2b394428eb2a428046"
integrity sha512-D5gGzZC/KtRArdx86Mesc9+99W9nTbUOeyYGqoJoAfJSOttoT6Tk5CrDvlCmAqjKf5rajemAkGri1ChqvUIwkw== integrity sha512-D5gGzZC/KtRArdx86Mesc9+99W9nTbUOeyYGqoJoAfJSOttoT6Tk5CrDvlCmAqjKf5rajemAkGri1ChqvUIwkw==
"@spectrum-css/typography@^3.0.1": "@spectrum-css/typography@^3.0.1", "@spectrum-css/typography@^3.0.2":
version "3.0.2" version "3.0.2"
resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.2.tgz#ea3ca0a60e18064527819d48c8c4364cab4fcd38" resolved "https://registry.yarnpkg.com/@spectrum-css/typography/-/typography-3.0.2.tgz#ea3ca0a60e18064527819d48c8c4364cab4fcd38"
integrity sha512-5ZOLmQe0edzsDMyhghUd4hBb5uxGsFrxzf+WasfcUw9klSfTsRZ09n1BsaaWbgrLjlMQ+EEHS46v5VNo0Ms2CA== integrity sha512-5ZOLmQe0edzsDMyhghUd4hBb5uxGsFrxzf+WasfcUw9klSfTsRZ09n1BsaaWbgrLjlMQ+EEHS46v5VNo0Ms2CA==