convert all Heading instances to use new API

5 years ago · 71f20dd2ea
18 changed files with 79 additions and 64 deletions
--- a/packages/bbui/src/Drawer/Drawer.svelte
+++ b/packages/bbui/src/Drawer/Drawer.svelte
@ -37,7 +37,7 @@
    <section class="drawer" transition:slide>
      <header>
        <div class="text">
-          <Heading xs>{title}</Heading>
+          <Heading size="XS">{title}</Heading>
          <Body size="XXS"><slot name="description" /></Body>
        </div>
        <div class="buttons">
--- a/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
@ -54,12 +54,12 @@
  <div slot="sidebar" class="list">
    <Layout>
      <div class="section">
-        <Heading s h3>Available bindings</Heading>
+        <Heading size="S">Available bindings</Heading>
        <Input extraThin placeholder="Search" bind:value={search} />
      </div>
      <div class="section">
        {#each categories as [categoryName, bindings]}
-          <Heading xs h4>{categoryName}</Heading>
+          <Heading size="XS">{categoryName}</Heading>
          {#each bindableProperties.filter((binding) =>
            binding.label.match(searchRgx)
          ) as binding}
@ -75,7 +75,7 @@
        {/each}
      </div>
      <div class="section">
-        <Heading xs h3>Helpers</Heading>
+        <Heading size="XS">Helpers</Heading>
        {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
          <div class="binding" on:click={() => addToText(helper)}>
            <span class="binding__label">{helper.label}</span>
--- a/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
+++ b/packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
@ -47,25 +47,28 @@
 </script>
 <div class="title">
-  <Heading s>Setup</Heading>
+  <Heading size="S">Setup</Heading>
  <Icon
    l
    disabled={!automationLive}
    hoverable={automationLive}
    name="PauseCircle"
-    on:click={() => setAutomationLive(false)} />
+    on:click={() => setAutomationLive(false)}
  />
  <Icon
    l
    name="PlayCircle"
    disabled={automationLive}
    hoverable={!automationLive}
    data-cy="activate-automation"
-    on:click={() => setAutomationLive(true)} />
+    on:click={() => setAutomationLive(true)}
  />
 </div>
 {#if $automationStore.selectedBlock}
  <AutomationBlockSetup
    bind:block={$automationStore.selectedBlock}
-    {webhookModal} />
+    {webhookModal}
  />
 {:else if $automationStore.selectedAutomation}
  <div class="block-label">{automation.name}</div>
  <Button secondary on:click={testAutomation}>Test Automation</Button>
@ -74,7 +77,8 @@
  secondary
  wide
  data-cy="save-automation-setup"
-  on:click={saveAutomation}>
+  on:click={saveAutomation}
 >
  Save Automation
 </Button>
 <Modal bind:this={webhookModal} width="30%">
--- a/packages/builder/src/components/backend/DataTable/Table.svelte
+++ b/packages/builder/src/components/backend/DataTable/Table.svelte
@ -40,7 +40,7 @@
          component: RoleCell,
        },
      ]
-      UNEDITABLE_USER_FIELDS.forEach(field => {
+      UNEDITABLE_USER_FIELDS.forEach((field) => {
        if (schema[field]) {
          schema[field].editable = false
        }
@ -68,19 +68,19 @@
      rows: selectedRows,
      type: "delete",
    })
-    data = data.filter(row => !selectedRows.includes(row))
+    data = data.filter((row) => !selectedRows.includes(row))
    notifications.success(`Successfully deleted ${selectedRows.length} rows`)
    selectedRows = []
  }
-  const editRow = row => {
+  const editRow = (row) => {
    editableRow = row
    if (row) {
      editRowModal.show()
    }
  }
-  const editColumn = field => {
+  const editColumn = (field) => {
    editableColumn = schema?.[field]
    if (editableColumn) {
      editColumnModal.show()
@ -91,7 +91,7 @@
 <div>
  <div class="table-title">
    {#if title}
-      <Heading s>{title}</Heading>
+      <Heading size="S">{title}</Heading>
    {/if}
    {#if loading}
      <div transition:fade>
@ -118,9 +118,10 @@
    allowEditRows={allowEditing}
    allowEditColumns={allowEditing}
    showAutoColumns={!hideAutocolumns}
-    on:editcolumn={e => editColumn(e.detail)}
+    on:editcolumn={(e) => editColumn(e.detail)}
-    on:editrow={e => editRow(e.detail)}
+    on:editrow={(e) => editRow(e.detail)}
-    on:clickrelationship={e => selectRelationship(e.detail)} />
+    on:clickrelationship={(e) => selectRelationship(e.detail)}
  />
 {/key}
 <Modal bind:this={editRowModal}>
--- a/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
@ -63,7 +63,7 @@
    <Search placeholder="Search" bind:value={search} />
    {#if context}
      <section>
-        <Heading xs h3>Columns</Heading>
+        <Heading size="XS">Columns</Heading>
        <ul>
          {#each context.filter((context) =>
            context.readableBinding.match(searchRgx)
@ -77,7 +77,7 @@
    {/if}
    {#if instance}
      <section>
-        <Heading xs h3>Components</Heading>
+        <Heading size="XS">Components</Heading>
        <ul>
          {#each instance.filter((instance) =>
            instance.readableBinding.match(searchRgx)
@ -90,7 +90,7 @@
      </section>
    {/if}
    <section>
-      <Heading xs h3>Helpers</Heading>
+      <Heading size="XS">Helpers</Heading>
      <ul>
        {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
          <li on:click={() => addToText(helper.text)}>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
@ -143,7 +143,7 @@
 <Popover bind:this={dropdownRight} anchor={anchorRight}>
  <div class="dropdown">
    <div class="title">
-      <Heading xs h3>Tables</Heading>
+      <Heading size="XS">Tables</Heading>
    </div>
    <ul>
      {#each tables as table}
@ -157,7 +157,7 @@
    </ul>
    <Divider size="S" />
    <div class="title">
-      <Heading xs h3>Views</Heading>
+      <Heading size="XS">Views</Heading>
    </div>
    <ul>
      {#each views as view}
@ -171,7 +171,7 @@
    </ul>
    <Divider size="S" />
    <div class="title">
-      <Heading xs h3>Relationships</Heading>
+      <Heading size="XS">Relationships</Heading>
    </div>
    <ul>
      {#each links as link}
@ -185,7 +185,7 @@
    </ul>
    <Divider size="S" />
    <div class="title">
-      <Heading xs h3>Queries</Heading>
+      <Heading size="XS">Queries</Heading>
    </div>
    <ul>
      {#each queries as query}
@ -201,7 +201,7 @@
    {#if otherSources?.length}
      <Divider size="S" />
      <div class="title">
-        <Heading extraSmall>Other</Heading>
+        <Heading size="XS">Other</Heading>
      </div>
      <ul>
        {#each otherSources as source}
--- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte
+++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte
@ -31,7 +31,7 @@
 <Layout paddingX="none" gap="S">
  <div class="controls">
-    <Heading s>Parameters</Heading>
+    <Heading size="XS">Parameters</Heading>
    {#if !bindable}
      <Button secondary on:click={newQueryParameter}>Add Param</Button>
    {/if}
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -112,9 +112,9 @@
 </script>
 <Layout gap="S" noPadding>
-  <Heading m>Query {integrationInfo?.friendlyName}</Heading>
+  <Heading size="M">Query {integrationInfo?.friendlyName}</Heading>
  <Divider />
-  <Heading s>Config</Heading>
+  <Heading size="S">Config</Heading>
  <div class="config">
    <div class="config-field">
      <Label>Query Name</Label>
@ -136,7 +136,7 @@
  {#if shouldShowQueryConfig}
    <Divider />
    <div class="config">
-      <Heading s>Fields</Heading>
+      <Heading size="S">Fields</Heading>
      <Body size="S">Fill in the fields specific to this query.</Body>
      <IntegrationQueryEditor
        {datasource}
@ -148,7 +148,7 @@
      <Divider />
    </div>
    <div class="viewer-controls">
-      <Heading s>Results</Heading>
+      <Heading size="S">Results</Heading>
      <ButtonGroup>
        <Button
          cta
--- a/packages/builder/src/components/start/AppCard.svelte
+++ b/packages/builder/src/components/start/AppCard.svelte
@ -26,7 +26,7 @@
 </script>
 <div class="apps-card">
-  <Heading s>{name}</Heading>
+  <Heading size="S">{name}</Heading>
  <div class="card-footer" data-cy={`app-${name}`}>
    <ActionButton on:click={() => $goto(`/builder/${_id}`)}>
      Open
--- a/packages/builder/src/components/start/AppList.svelte
+++ b/packages/builder/src/components/start/AppList.svelte
@ -19,7 +19,7 @@
 </script>
 <div class="root">
-  <Heading m>Your Apps</Heading>
+  <Heading size="M">Your Apps</Heading>
  <Divider size="M" />
  {#await promise}
    <div class="spinner-container">
--- a/packages/builder/src/components/start/BuilderSettingsModal.svelte
+++ b/packages/builder/src/components/start/BuilderSettingsModal.svelte
@ -59,10 +59,10 @@
 </script>
 <ModalContent title="Builder settings" confirmText="Save" onConfirm={save}>
-  <Heading xs>Theme</Heading>
+  <Heading size="XS">Theme</Heading>
  <ThemeEditor />
  <Divider noMargin noGrid />
-  <Heading xs>Hosting</Heading>
+  <Heading size="XS">Hosting</Heading>
  <Body size="S">
    This section contains settings that relate to the deployment and hosting of
    apps made in this builder.
@ -78,7 +78,7 @@
    <Toggle text="HTTPS" bind:value={hostingInfo.useHttps} />
  {/if}
  <Divider noMargin noGrid />
-  <Heading xs>Analytics</Heading>
+  <Heading size="XS">Analytics</Heading>
  <Body size="S">
    If you would like to send analytics that help us make budibase better,
    please let us know below.
--- a/packages/builder/src/components/start/CreateAppModal.svelte
+++ b/packages/builder/src/components/start/CreateAppModal.svelte
@ -47,9 +47,9 @@
        .test(
          "non-existing-app-name",
          "App with same name already exists. Please try another app name.",
-          value =>
+          (value) =>
            !existingAppNames.some(
-              appName => appName.toLowerCase() === value.toLowerCase()
+              (appName) => appName.toLowerCase() === value.toLowerCase()
            )
        )
    }
@ -57,11 +57,11 @@
  const checkValidity = async (values, validator) => {
    const obj = object().shape(validator)
-    Object.keys(validator).forEach(key => ($errors[key] = null))
+    Object.keys(validator).forEach((key) => ($errors[key] = null))
    try {
      await obj.validate(values, { abortEarly: false })
    } catch (validationErrors) {
-      validationErrors.inner.forEach(error => {
+      validationErrors.inner.forEach((error) => {
        $errors[error.path] = capitalise(error.message)
      })
    }
@ -129,13 +129,14 @@
        <Indicator
          active={$currentStep === i}
          done={i < $currentStep}
-          step={i + 1} />
+          step={i + 1}
        />
      {/each}
    </div>
  </div>
  <div class="body">
    <div class="heading">
-      <Heading h2 l>Get started with Budibase</Heading>
+      <Heading size="L">Get started with Budibase</Heading>
    </div>
    <div class="step">
      {#each steps as component, i (i)}
@ -145,7 +146,8 @@
            {template}
            {values}
            {errors}
-            {touched} />
+            {touched}
          />
        </div>
      {/each}
    </div>
@ -163,8 +165,9 @@
          medium
          cta
          on:click={createNewApp}
-          disabled={!valid || submitting}>
+          disabled={!valid || submitting}
-          {submitting ? 'Loading...' : 'Submit'}
+        >
          {submitting ? "Loading..." : "Submit"}
        </Button>
      {/if}
    </div>
--- a/packages/builder/src/components/start/Steps/Info.svelte
+++ b/packages/builder/src/components/start/Steps/Info.svelte
@ -14,10 +14,11 @@
  function handleFile(evt) {
    const fileArray = Array.from(evt.target.files)
-    if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
+    if (fileArray.some((file) => file.size >= FILE_SIZE_LIMIT)) {
      notifications.error(
-        `Files cannot exceed ${FILE_SIZE_LIMIT /
+        `Files cannot exceed ${
-          BYTES_IN_MB}MB. Please try again with smaller files.`
+          FILE_SIZE_LIMIT / BYTES_IN_MB
        }MB. Please try again with smaller files.`
      )
      return
    }
@ -28,9 +29,9 @@
 <div class="container">
  {#if template?.fromFile}
-    <Heading l h2>Import your Web App</Heading>
+    <Heading size="L">Import your Web App</Heading>
  {:else}
-    <Heading l h2>Create your Web App</Heading>
+    <Heading size="L">Create your Web App</Heading>
  {/if}
  {#if template?.fromFile}
    <div class="template">
@ -40,7 +41,8 @@
          id="file-upload"
          accept=".txt"
          type="file"
-          on:change={handleFile} />
+          on:change={handleFile}
        />
        <label for="file-upload" class:uploaded={file}>
          {#if file}{file.name}{:else}Import{/if}
        </label>
@ -49,7 +51,7 @@
  {:else if template}
    <div class="template">
      <Label extraSmall grey>Selected Template</Label>
-      <Heading small>{template.name}</Heading>
+      <Heading size="S">{template.name}</Heading>
    </div>
  {/if}
  <Input
@ -57,7 +59,8 @@
    bind:value={$values.applicationName}
    label="Web App Name"
    placeholder="Enter name of your web application"
-    error={$touched.applicationName && $errors.applicationName} />
+    error={$touched.applicationName && $errors.applicationName}
  />
 </div>
 <style>
--- a/packages/builder/src/components/start/Steps/User.svelte
+++ b/packages/builder/src/components/start/Steps/User.svelte
@ -7,14 +7,18 @@
 </script>
 <div class="container">
-  <Heading l h2>What's your role for this app?</Heading>
+  <Heading size="L">What's your role for this app?</Heading>
  <Select
    bind:value={$values.roleId}
    label="Role"
-    options={[{ label: 'Admin', value: 'ADMIN' }, { label: 'Power User', value: 'POWER_USER' }]}
+    options={[
-    getOptionLabel={option => option.label}
+      { label: "Admin", value: "ADMIN" },
-    getOptionValue={option => option.value}
+      { label: "Power User", value: "POWER_USER" },
-    error={$errors.roleId} />
+    ]}
    getOptionLabel={(option) => option.label}
    getOptionValue={(option) => option.value}
    error={$errors.roleId}
  />
 </div>
 <style>
--- a/packages/builder/src/components/start/TemplateList.svelte
+++ b/packages/builder/src/components/start/TemplateList.svelte
@ -15,7 +15,7 @@
 </script>
 <div class="root">
-  <Heading lh medium black>Start With a Template</Heading>
+  <Heading size="M">Start With a Template</Heading>
  {#await templatesPromise}
    <div class="spinner-container">
      <Spinner size="30" />
@ -24,7 +24,7 @@
    <div class="templates">
      {#each templates as template}
        <div class="templates-card">
-          <Heading black small>{template.name}</Heading>
+          <Heading size="S">{template.name}</Heading>
          <Body size="M" grey>{template.category}</Body>
          <Body size="S" black>{template.description}</Body>
          <div><img src={template.image} width="100%" /></div>
--- a/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -50,13 +50,13 @@
          height="26"
          width="26"
        />
-        <Heading m>{datasource.name}</Heading>
+        <Heading size="M">{datasource.name}</Heading>
      </header>
      <Body size="S" grey lh>{integration.description}</Body>
      <Divider />
      <div class="container">
        <div class="config-header">
-          <Heading s>Configuration</Heading>
+          <Heading size="S">Configuration</Heading>
          <Button secondary on:click={saveDatasource}>Save</Button>
        </div>
        <Body size="S"
@ -70,7 +70,7 @@
      </div>
      <Divider />
      <div class="query-header">
-        <Heading s>Queries</Heading>
+        <Heading size="S">Queries</Heading>
        <Button secondary on:click={() => $goto("./new")}>Add Query</Button>
      </div>
      <div class="query-list">
--- a/packages/builder/src/pages/builder/[application]/deploy/index.svelte
+++ b/packages/builder/src/pages/builder/[application]/deploy/index.svelte
@ -59,7 +59,7 @@
 <section>
  <img src={Rocket} alt="Rocket flying through sky" />
  <div>
-    <Heading m>It's time to shine!</Heading>
+    <Heading size="M">It's time to shine!</Heading>
    <Button size="XL" cta medium on:click={deployApp}>Deploy App</Button>
  </div>
 </section>
--- a/packages/builder/src/pages/builder/index.svelte
+++ b/packages/builder/src/pages/builder/index.svelte
@ -57,7 +57,7 @@
 <div class="container">
  <div class="header">
-    <Heading m h1>Welcome to the Budibase Beta</Heading>
+    <Heading size="M">Welcome to the Budibase Beta</Heading>
    <ButtonGroup>
      <Button secondary on:click={initiateAppImport}>Import Web App</Button>
      <Button cta on:click={modal.show}>Create New Web App</Button>