All latest changes coming from the builder testing

This commit is contained in:
Conor_Mack 2020-04-14 14:15:32 +01:00
parent aedb6ffe46
commit dc20e11fa4
19 changed files with 142 additions and 154 deletions

View File

@ -88,7 +88,7 @@ const css_map = {
} }
export const generate_rule = ([name, values]) => export const generate_rule = ([name, values]) =>
`${css_map[name].name}: ${css_map[name].generate(values)};` `${css_map[name].name}: ${css_map[name].generate(values)} !important;`
const handle_grid = (acc, [name, value]) => { const handle_grid = (acc, [name, value]) => {
let tmp = [] let tmp = []
@ -113,7 +113,9 @@ const object_to_css_string = [
export const generate_css = ({ layout, position }) => { export const generate_css = ({ layout, position }) => {
let _layout = pipe(layout, object_to_css_string) let _layout = pipe(layout, object_to_css_string)
if (_layout.length) { if (_layout.length) {
_layout += `\ndisplay: ${_layout.includes("flex") ? "flex" : "grid"};` _layout += `\ndisplay: ${
_layout.includes("flex") ? "flex" : "grid"
} !important;`
} }
return { return {
@ -134,7 +136,6 @@ export const generate_screen_css = component_array => {
styles += apply_class(_id, "pos", position) + "\n" styles += apply_class(_id, "pos", position) + "\n"
styles += apply_class(_id, "lay", layout) + "\n" styles += apply_class(_id, "lay", layout) + "\n"
if (_children && _children.length) { if (_children && _children.length) {
styles += generate_screen_css(_children) + "\n" styles += generate_screen_css(_children) + "\n"
} }

View File

@ -89,7 +89,7 @@
${styles || ''} ${styles || ''}
.pos-${selectedComponentId} { .pos-${selectedComponentId} {
border: 2px solid #0055ff; border: 2px solid #0055ff;
} }
body, html { body, html {

View File

@ -2,5 +2,5 @@
node_modules node_modules
yarn.lock yarn.lock
package-lock.json package-lock.json
dist/index.js dist/*
public/build public/build

View File

@ -14,9 +14,7 @@
"name": "Body1", "name": "Body1",
"description": "Sets the font properties as Roboto Body 1", "description": "Sets the font properties as Roboto Body 1",
"props": { "props": {
"text": "string", "text": "string"
"verticalMargin": "number",
"horizontalMargin": "number"
}, },
"tags": [] "tags": []
}, },
@ -58,6 +56,11 @@
"type": "options", "type": "options",
"options": ["one-line", "two-line"], "options": ["one-line", "two-line"],
"default": "one-line" "default": "one-line"
},
"inputElement": {
"type": "options",
"options": ["None", "Radiobutton", "Checkbox"],
"default": "None"
} }
} }
}, },
@ -69,10 +72,9 @@
"text": "string", "text": "string",
"secondaryText": "string", "secondaryText": "string",
"leadingIcon": "string", "leadingIcon": "string",
"trailingIcon": "string", "trailingIcon": "string",
"selected": "bool",
"disabled": "bool", "disabled": "bool",
"divideAfter": "bool" "dividerAfter": "bool"
} }
}, },
"Button": { "Button": {
@ -117,12 +119,12 @@
"name": "Card", "name": "Card",
"description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children", "description": "A Material Card container. Accepts CardHeader, CardBody and CardFooter as possible children",
"props": { "props": {
"width": "string", "width": {"type": "string", "default": "350px"},
"height": "string", "height": "string",
"variant": { "variant": {
"type": "options", "type": "options",
"options": ["standard", "outlined"], "options": ["standard", "outlined"],
"default": "standard" "default": "outlined"
} }
} }
}, },
@ -183,8 +185,7 @@
"type": "options", "type": "options",
"options": ["row", "column"], "options": ["row", "column"],
"default": "row" "default": "row"
}, },
"fullwidth": "bool",
"disabled": "bool", "disabled": "bool",
"alignEnd": "bool" "alignEnd": "bool"
} }
@ -276,14 +277,18 @@
"tags": [] "tags": []
}, },
"IconButton": { "IconButton": {
"onClick": "event", "name": "IconButton",
"disabled": "bool", "description": "An icon button component",
"href": "string", "props": {
"icon": "string", "onClick": "event",
"size": { "disabled": "bool",
"type":"options", "href": "string",
"options": ["small", "medium", "large"], "icon": "string",
"default": "medium" "size": {
"type":"options",
"options": ["small", "medium", "large"],
"default": "medium"
}
}, },
"tags": [] "tags": []
}, },
@ -291,6 +296,7 @@
"name": "Label", "name": "Label",
"description": "A simple label component that displays its text in the standard Roboto Material Design font", "description": "A simple label component that displays its text in the standard Roboto Material Design font",
"props": { "props": {
"text": "string",
"bold": "bool" "bold": "bool"
}, },
"tags": [] "tags": []
@ -322,8 +328,7 @@
"onClick": "event", "onClick": "event",
"id": "string", "id": "string",
"label": "string", "label": "string",
"name": "string", "name": "string",
"checked": "bool",
"disabled": "bool", "disabled": "bool",
"alignEnd": "bool" "alignEnd": "bool"
}, },
@ -334,6 +339,7 @@
"description": "A Material Design Radiobutton group. Supports row and column orientation.", "description": "A Material Design Radiobutton group. Supports row and column orientation.",
"props": { "props": {
"onChange": "event", "onChange": "event",
"label": "string",
"name": "string", "name": "string",
"orientation": { "orientation": {
"type": "options", "type": "options",
@ -394,14 +400,10 @@
"minLength": "number", "minLength": "number",
"maxLength": "number", "maxLength": "number",
"helperText": "string", "helperText": "string",
"errorText": "string",
"placeholder": "string", "placeholder": "string",
"icon": "string", "icon": "string",
"trailingIcon": "bool", "trailingIcon": "bool",
"textarea": "bool", "textarea": "bool",
"rows": "number",
"cols": "number",
"validation": "bool",
"persistent": "bool" "persistent": "bool"
}, },
"tags": [] "tags": []

View File

@ -26,7 +26,7 @@ export default {
file: "dist/index.js", file: "dist/index.js",
format: "esm", format: "esm",
name: "budibaseStandardComponents", name: "budibaseStandardComponents",
sourcemap: "inline", sourcemap: true,
}, },
], ],
plugins: [ plugins: [

View File

@ -55,11 +55,11 @@
{disabled} {disabled}
on:click={clicked}> on:click={clicked}>
{#if renderLeadingIcon} {#if renderLeadingIcon}
<Icon context="button" {icon} /> <Icon context="button__icon" {icon} />
{/if} {/if}
<span class={labelClass}>{text}</span> <span class={labelClass}>{text}</span>
{#if renderTrailingIcon} {#if renderTrailingIcon}
<Icon context="button" {icon} /> <Icon context="button__icon" {icon} />
{/if} {/if}
</button> </button>
{/if} {/if}

View File

@ -22,13 +22,18 @@
$: cardClass = cb.build({ props }) $: cardClass = cb.build({ props })
$: safeWidth = width !== "auto" && !/px$/.test(width) ? `${width}px` : width $: safeWidth = width !== "auto" && !/px$/.test(width) ? `${width}px` : width
$: safeHeight = $: safeHeight =
height !== "auto" && !/px$/.test(height) ? `${width}px` : height height !== "auto" && !/px$/.test(height) ? `${height}px` : height
$: card && _bb.attachChildren(card) $: card && _bb.attachChildren(card)
</script> </script>
<div <div bind:this={card} class={`bbmd-card ${cardClass}`} />
bind:this={card}
style={`width: ${safeWidth}; height: ${safeHeight}`} <style>
class={cardClass} /> .bbmd-card {
width: 350px;
height: auto;
}
</style>

View File

@ -94,27 +94,29 @@
<!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? --> <!-- TODO: Customizing Colour and Density - What level of customization for these things does Budibase need here? -->
{#if context !== 'list-item'} {#if context !== 'list-item'}
<Formfield {label} {_bb} {id} alignEnd={isAlignedEnd}> <div class="bbmd-checkbox">
<div bind:this={checkbox} class={blockClass}> <Formfield {label} {_bb} {id} alignEnd={isAlignedEnd}>
<input <div bind:this={checkbox} class={blockClass}>
type="checkbox" <input
class={cb.elem`native-control`} type="checkbox"
{id} class={cb.elem`native-control`}
disabled={isDisabled} {id}
{isChecked} disabled={isDisabled}
on:change={changed} /> checked={isChecked}
<div class={cb.elem`background`}> on:change={changed} />
<svg class={cb.elem`checkmark`} viewBox="0 0 24 24"> <div class={cb.elem`background`}>
<path <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
class={cb.elem`checkmark-path`} <path
fill="none" class={cb.elem`checkmark-path`}
d="M1.73,12.91 8.1,19.28 22.79,4.59" /> fill="none"
</svg> d="M1.73,12.91 8.1,19.28 22.79,4.59" />
<div class={cb.elem`mixedmark`} /> </svg>
<div class={cb.elem`mixedmark`} />
</div>
<div class={cb.elem`ripple`} />
</div> </div>
<div class={cb.elem`ripple`} /> </Formfield>
</div> </div>
</Formfield>
{:else} {:else}
<div bind:this={checkbox} class={blockClass}> <div bind:this={checkbox} class={blockClass}>
<input <input
@ -122,7 +124,7 @@
class={cb.elem`native-control`} class={cb.elem`native-control`}
{id} {id}
disabled={isDisabled} disabled={isDisabled}
{isChecked} checked={isChecked}
on:change={changed} /> on:change={changed} />
<div class={cb.elem`background`}> <div class={cb.elem`background`}>
<svg class={cb.elem`checkmark`} viewBox="0 0 24 24"> <svg class={cb.elem`checkmark`} viewBox="0 0 24 24">
@ -136,3 +138,9 @@
<div class={cb.elem`ripple`} /> <div class={cb.elem`ripple`} />
</div> </div>
{/if} {/if}
<style>
.bbmd-checkbox {
width: fit-content;
}
</style>

View File

@ -10,7 +10,6 @@
export let _bb export let _bb
export let label = "" export let label = ""
export let orientation = "row" export let orientation = "row"
export let fullwidth = false
export let onChange = selectedItems => {} export let onChange = selectedItems => {}
export let disabled = false export let disabled = false
@ -37,15 +36,14 @@
<div class="checkbox-group__label"> <div class="checkbox-group__label">
<Label text={label} bold /> <Label text={label} bold />
</div> </div>
<div class={`checkbox-group__boxes ${orientation}`}> <div bind:this={checkItems} class={`checkbox-group__boxes ${orientation}`} />
<div bind:this={checkItems} class:fullwidth />
</div>
</div> </div>
<style> <style>
.checkbox-group { .checkbox-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: fit-content;
} }
.checkbox-group__boxes.row > div:not(:first-child) { .checkbox-group__boxes.row > div:not(:first-child) {
@ -68,9 +66,4 @@
flex-flow: column wrap; flex-flow: column wrap;
align-items: flex-start; align-items: flex-start;
} }
.fullwidth {
flex: 1;
text-align: left;
}
</style> </style>

View File

@ -18,7 +18,7 @@
let formField = null let formField = null
$: modifiers = { alignEnd } $: modifiers = { alignEnd }
$: props = { modifiers } $: props = { modifiers, extras: ["bbmd-form-field"] }
$: blockClasses = cb.build({ props }) $: blockClasses = cb.build({ props })
@ -34,3 +34,9 @@
<slot /> <slot />
<label for={id}>{label}</label> <label for={id}>{label}</label>
</div> </div>
<style>
.bbmd-form-field {
width: fit-content;
}
</style>

View File

@ -2,7 +2,7 @@
export let icon = "" export let icon = ""
export let context = "" export let context = ""
let cls = !!context ? `material-icons mdc-${context}__icon` : "material-icons" let cls = !!context ? `material-icons mdc-${context}` : "material-icons"
</script> </script>
<i class={cls}>{icon}</i> <i class={cls}>{icon}</i>

View File

@ -23,6 +23,7 @@
let daysArr = [] let daysArr = []
let navDate = new Date() let navDate = new Date()
const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"] const weekdayMap = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
export let _bb export let _bb
@ -50,6 +51,7 @@
let year = getYear(navDate) let year = getYear(navDate)
date = new Date(year, month, dayOfMonth) date = new Date(year, month, dayOfMonth)
handleSelect(date) handleSelect(date)
openCalendar(false)
} }
function dateFieldChange(value) { function dateFieldChange(value) {
@ -77,12 +79,13 @@
instance.open = isOpen === undefined ? !instance.open : isOpen instance.open = isOpen === undefined ? !instance.open : isOpen
} }
$: safeDate = !!date ? date : new Date()
$: dateMonthEnds = endOfMonth(navDate).getDate() $: dateMonthEnds = endOfMonth(navDate).getDate()
$: dateMonthBegins = startOfMonth(navDate).getDay() $: dateMonthBegins = startOfMonth(navDate).getDay()
$: dayStart = dateMonthBegins + 1 //1 = sunday $: dayStart = dateMonthBegins + 1 //1 = sunday
$: monthAndYear = format(navDate, "MMMM y") $: monthAndYear = format(navDate, "MMMM y")
$: selectedDate = format(date, "dd/MM/yyyy") $: selectedDate = format(safeDate, "dd/MM/yyyy")
$: dayOfSelectedDate = getDate(date) $: dayOfSelectedDate = getDate(safeDate)
$: for (let d = 1; d <= dateMonthEnds; d++) { $: for (let d = 1; d <= dateMonthEnds; d++) {
if (d === 1) { if (d === 1) {
daysArr = [d] daysArr = [d]
@ -93,7 +96,8 @@
$: rowRepeater = $: rowRepeater =
dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5 dateMonthBegins > 5 && daysArr[daysArr.length - 1] > 30 ? 6 : 5
$: sameMonthAndYear = $: sameMonthAndYear =
getMonth(date) === getMonth(navDate) && getYear(date) === getYear(navDate) getMonth(safeDate) === getMonth(navDate) &&
getYear(safeDate) === getYear(navDate)
</script> </script>
<div class="mdc-menu-surface--anchor"> <div class="mdc-menu-surface--anchor">
@ -107,10 +111,7 @@
iconButtonClick={openCalendar} iconButtonClick={openCalendar}
icon="calendar_today" /> icon="calendar_today" />
<div <div bind:this={menu} class="mdc-menu mdc-menu-surface bbmd-menu">
bind:this={menu}
class="mdc-menu mdc-menu-surface bbmd-menu"
style={`margin-top: 70px`}>
<div class="calendar-container"> <div class="calendar-container">
<div class="month-picker"> <div class="month-picker">
<div> <div>
@ -155,6 +156,7 @@
width: 330px; width: 330px;
height: auto; height: auto;
padding: 5px; padding: 5px;
margin-top: 70px;
} }
.month-picker { .month-picker {

View File

@ -50,12 +50,13 @@
role = "menuitem" role = "menuitem"
} }
if (_addItem) { // TODO: Causing first element to be automatically selected. Commenting for now.
_addItem(itemData()) // if (_addItem) {
} // _addItem(itemData())
// }
}) })
function handleClick() { function handleChange() {
let item = itemData() let item = itemData()
if (!disabled) { if (!disabled) {
if ( if (
@ -79,7 +80,8 @@
} }
$: isSelected = $: isSelected =
$selectedItems && selectedItems.getItemIdx($selectedItems, _id) > -1 ($selectedItems && selectedItems.getItemIdx($selectedItems, _id) > -1) ||
selected
$: modifiers = { $: modifiers = {
selected: isSelected && (!listProps || !listProps.inputElement), selected: isSelected && (!listProps || !listProps.inputElement),
@ -90,14 +92,16 @@
$: useTwoLine = $: useTwoLine =
listProps && listProps.variant === "two-line" && !!secondaryText listProps && listProps.variant === "two-line" && !!secondaryText
$: hasInputElement = listProps && listProps.inputElement !== "None"
</script> </script>
<li <li
class={listItemClass} class={listItemClass}
role="option" role="option"
tabindex="0" tabindex="0"
on:click={handleClick} on:click={handleChange}
data-value={value} data-value={value || text}
aria-selected={isSelected}> aria-selected={isSelected}>
{#if leadingIcon} {#if leadingIcon}
<span class="mdc-list-item__graphic material-icons" aria-hidden="true"> <span class="mdc-list-item__graphic material-icons" aria-hidden="true">
@ -111,13 +115,13 @@
{:else}{text}{/if} {:else}{text}{/if}
</span> </span>
{#if listProps} {#if hasInputElement}
{#if listProps.inputElement === 'radiobutton'} {#if listProps.inputElement === 'Radiobutton'}
<Radiobutton checked={isSelected} {disabled} {_bb} /> <Radiobutton checked={isSelected} {disabled} {_bb} />
{:else if listProps.inputElement === 'checkbox'} {:else if listProps.inputElement === 'Checkbox'}
<Checkbox checked={isSelected} {disabled} {_bb} /> <Checkbox checked={isSelected} {disabled} {_bb} />
{/if} {/if}
{:else if trailingIcon} {:else if !!trailingIcon}
<Icon context="list-item__meta" icon={trailingIcon} /> <Icon context="list-item__meta" icon={trailingIcon} />
{/if} {/if}
</li> </li>

View File

@ -87,7 +87,7 @@
class={cb.elem`native-control`} class={cb.elem`native-control`}
type="radio" type="radio"
{name} {name}
{checked} checked={isChecked}
disabled={isDisabled} disabled={isDisabled}
on:click={handleOnClick} /> on:click={handleOnClick} />
<div class={cb.elem`background`}> <div class={cb.elem`background`}>
@ -104,7 +104,7 @@
class={cb.elem`native-control`} class={cb.elem`native-control`}
type="radio" type="radio"
{name} {name}
{checked} checked={isChecked}
disabled={isDisabled} disabled={isDisabled}
on:click={handleOnClick} /> on:click={handleOnClick} />
<div class={cb.elem`background`}> <div class={cb.elem`background`}>

View File

@ -17,7 +17,7 @@
let selectList let selectList
let instance let instance
let _helperId = "" let _helperId = ""
let listItems = [] // let listItems = []
export let _bb export let _bb
export let onSelect = items => {} export let onSelect = items => {}
@ -34,7 +34,9 @@
onMount(() => { onMount(() => {
_bb.setContext("BBMD:list:props", { singleSelection: true }) _bb.setContext("BBMD:list:props", { singleSelection: true })
_bb.setContext("BBMD:list:addItem", i => (listItems = [...listItems, i]))
//May not be necessary as state binds from value below. Commenting for now.
// _bb.setContext("BBMD:list:addItem", i => (listItems = [...listItems, i]))
selectedItemsStore = createItemsStore(() => { selectedItemsStore = createItemsStore(() => {
const v = const v =
@ -66,9 +68,9 @@
$: modifiers = { variant, disabled, required, noLabel: !label } $: modifiers = { variant, disabled, required, noLabel: !label }
$: props = { modifiers } $: props = { modifiers }
$: selectClass = cb.build({ props }) $: selectClass = cb.build({ props })
$: if (value !== undefined && instance && listItems.length > 0) { // $: if (value !== undefined && instance && listItems.length > 0) {
instance.selectedIndex = listItems.findIndex(i => i.value === value) // instance.selectedIndex = listItems.findIndex(i => i.value === value)
} // }
</script> </script>
<div bind:this={select} id={_helperId} class={selectClass}> <div bind:this={select} id={_helperId} class={selectClass}>

View File

@ -10,7 +10,7 @@
export let _bb export let _bb
export let onChange = value => {} export let onChange = value => {}
export let variant = "continuous" //or discrete export let variant = "continuous"
export let showTicks = false export let showTicks = false
export let min = 0 export let min = 0
export let max = 100 export let max = 100
@ -28,7 +28,7 @@
} }
onMount(() => { onMount(() => {
let s = MDCSlider.attachTo(slider) instance = new MDCSlider(slider)
return () => instance.destroy() return () => instance.destroy()
}) })
@ -48,17 +48,22 @@
<div <div
bind:this={slider} bind:this={slider}
class="mdc-slider mdc-slider--discrete" class={sliderCls}
tabindex="0" tabindex="0"
role="slider" role="slider"
aria-valuemin="0" data-step={step}
aria-valuemax="100" aria-valuemin={min}
aria-valuenow="0" aria-valuemax={max}
aria-label="Select Value" aria-valuenow={value}
aria-label={label}
aria-disabled={disabled}
on:MDCSlider:input={e => handleChange(e.detail.value)} on:MDCSlider:input={e => handleChange(e.detail.value)}
on:MDCSlider:change={e => handleChange(e.detail.value)}> on:MDCSlider:change={e => handleChange(e.detail.value)}>
<div class="mdc-slider__track-container"> <div class="mdc-slider__track-container">
<div class="mdc-slider__track" /> <div class="mdc-slider__track" />
{#if displayMarkers}
<div class="mdc-slider__track-marker-container" />
{/if}
</div> </div>
<div class="mdc-slider__thumb-container"> <div class="mdc-slider__thumb-container">
<div class="mdc-slider__pin"> <div class="mdc-slider__pin">

View File

@ -45,8 +45,6 @@
export let useIconButton = false export let useIconButton = false
export let iconButtonClick = () => {} export let iconButtonClick = () => {}
export let textarea = false export let textarea = false
export let rows = 4
export let cols = 40
export let validation = false export let validation = false
export let persistent = false export let persistent = false
export let value export let value
@ -88,8 +86,6 @@
const blockClasses = cb.build({ props }) const blockClasses = cb.build({ props })
const inputClasses = cb.elem("input") const inputClasses = cb.elem("input")
let renderMaxLength = !!maxLength ? `0 / ${maxLength}` : "0"
function focus(event) { function focus(event) {
tfInstance.focus() tfInstance.focus()
} }
@ -111,19 +107,21 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
<div class="textfield-container" class:fullwidth> <div class="textfield-container" class:fullwidth>
<div bind:this={tf} bind:clientHeight={tfHeight} class={blockClasses}> <div bind:this={tf} bind:clientHeight={tfHeight} class={blockClasses}>
{#if textarea} {#if textarea}
<CharacterCounter /> {#if maxLength}
<CharacterCounter />
{/if}
<textarea <textarea
{id} {id}
class={inputClasses} class={inputClasses}
class:fullwidth class:fullwidth
{disabled} {disabled}
{rows} rows="5"
{cols} cols="70"
{required} {required}
{placeholder} {placeholder}
{minLength}
maxLength={safeMaxLength}
{value} {value}
{minLength}
maxlength={safeMaxLength}
on:change={changed} /> on:change={changed} />
{:else} {:else}
{#if renderLeadingIcon} {#if renderLeadingIcon}
@ -134,7 +132,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
context="mdc-text-field__icon mdc-text-field__icon--leading" context="mdc-text-field__icon mdc-text-field__icon--leading"
onClick={iconButtonClick} /> onClick={iconButtonClick} />
{:else} {:else}
<Icon context="text-field" {icon} /> <Icon context="text-field__icon" {icon} />
{/if} {/if}
{/if} {/if}
<input <input
@ -143,9 +141,9 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
class={inputClasses} class={inputClasses}
{type} {type}
{required} {required}
placeholder={!!label && fullwidth ? label : placeholder}
{minLength} {minLength}
maxLength={safeMaxLength} maxLength={safeMaxLength}
placeholder={!!label && fullwidth ? label : placeholder}
{value} {value}
aria-label={`Textfield ${variant}`} aria-label={`Textfield ${variant}`}
on:focus={focus} on:focus={focus}
@ -158,7 +156,7 @@ TODO:Needs error handling - this will depend on how Budibase handles errors
context="mdc-text-field__icon mdc-text-field__icon--trailing" context="mdc-text-field__icon mdc-text-field__icon--trailing"
onClick={iconButtonClick} /> onClick={iconButtonClick} />
{:else} {:else}
<Icon context="text-field" {icon} /> <Icon context="text-field__icon" {icon} />
{/if} {/if}
{/if} {/if}
{#if variant !== 'outlined'} {#if variant !== 'outlined'}

View File

@ -5,7 +5,7 @@
</script> </script>
<span <span
style={`margin: ${verticalMargin}px ${horizontalMargin}px`} style={`margin: ${verticalMargin}px ${horizontalMargin}px;`}
class="mdc-typography--body1"> class="mdc-typography--body1">
{text} {text}
</span> </span>

View File

@ -1363,7 +1363,7 @@ caseless@~0.12.0:
resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc" resolved "https://registry.yarnpkg.com/caseless/-/caseless-0.12.0.tgz#1b681c21ff84033c826543090689420d187151dc"
integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw= integrity sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=
chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.1, chalk@^2.4.2: chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.1, chalk@^2.4.2:
version "2.4.2" version "2.4.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424" resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ== integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@ -3394,11 +3394,6 @@ mem@^4.0.0:
mimic-fn "^2.0.0" mimic-fn "^2.0.0"
p-is-promise "^2.0.0" p-is-promise "^2.0.0"
memorystream@^0.3.1:
version "0.3.1"
resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
meow@^3.3.0: meow@^3.3.0:
version "3.7.0" version "3.7.0"
resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb" resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@ -3778,21 +3773,6 @@ npm-registry-fetch@^4.0.0:
npm-package-arg "^6.1.0" npm-package-arg "^6.1.0"
safe-buffer "^5.2.0" safe-buffer "^5.2.0"
npm-run-all@^4.1.5:
version "4.1.5"
resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
dependencies:
ansi-styles "^3.2.1"
chalk "^2.4.1"
cross-spawn "^6.0.5"
memorystream "^0.3.1"
minimatch "^3.0.4"
pidtree "^0.3.0"
read-pkg "^3.0.0"
shell-quote "^1.6.1"
string.prototype.padend "^3.0.0"
npm-run-path@^2.0.0: npm-run-path@^2.0.0:
version "2.0.2" version "2.0.2"
resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f" resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@ -4194,11 +4174,6 @@ performance-now@^2.1.0:
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns= integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
pidtree@^0.3.0:
version "0.3.1"
resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.1.tgz#ef09ac2cc0533df1f3250ccf2c4d366b0d12114a"
integrity sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==
pify@^2.0.0, pify@^2.3.0: pify@^2.0.0, pify@^2.3.0:
version "2.3.0" version "2.3.0"
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@ -4713,11 +4688,6 @@ shebang-regex@^1.0.0:
resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3" resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-1.0.0.tgz#da42f49740c0b42db2ca9728571cb190c98efea3"
integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM= integrity sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=
shell-quote@^1.6.1:
version "1.7.2"
resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2"
integrity sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==
signal-exit@^3.0.0, signal-exit@^3.0.2: signal-exit@^3.0.0, signal-exit@^3.0.2:
version "3.0.2" version "3.0.2"
resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
@ -4961,14 +4931,6 @@ string-width@^4.1.0:
is-fullwidth-code-point "^3.0.0" is-fullwidth-code-point "^3.0.0"
strip-ansi "^6.0.0" strip-ansi "^6.0.0"
string.prototype.padend@^3.0.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz#dc08f57a8010dc5c153550318f67e13adbb72ac3"
integrity sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==
dependencies:
define-properties "^1.1.3"
es-abstract "^1.17.0-next.1"
string.prototype.trimleft@^2.1.1: string.prototype.trimleft@^2.1.1:
version "2.1.1" version "2.1.1"
resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74" resolved "https://registry.yarnpkg.com/string.prototype.trimleft/-/string.prototype.trimleft-2.1.1.tgz#9bdb8ac6abd6d602b17a4ed321870d2f8dcefc74"