Add spectrum card component

5 years ago · 45d235ca92
9 changed files with 157 additions and 63 deletions
--- a/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
+++ b/packages/builder/src/components/common/bindings/DrawerBindableCombobox.svelte
@ -14,6 +14,7 @@
  export let placeholder
  export let label
  export let disabled = false
+  export let options

  const dispatch = createEventDispatcher()
  let bindingDrawer
@ -31,12 +32,13 @@
 </script>

 <div class="control">
-  <Input
+  <Combobox
    {label}
    {disabled}
    value={readableValue}
    on:change={event => onChange(event.detail)}
    {placeholder}
+    {options}
  />
  {#if !disabled}
    <div class="icon" on:click={bindingDrawer.show}>
@ -60,37 +62,36 @@
 </Drawer>

 <style>
-    .control {
-        flex: 1;
-        position: relative;
-    }
+  .control {
+    flex: 1;
+    position: relative;
+  }

-    .icon {
-        right: 1px;
-        bottom: 1px;
-        position: absolute;
-        justify-content: center;
-        align-items: center;
-        display: flex;
-        flex-direction: row;
-        box-sizing: border-box;
-        border-left: 1px solid var(--spectrum-alias-border-color);
-        border-top-right-radius: var(--spectrum-alias-border-radius-regular);
-        border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
-        width: 31px;
-        color: var(--spectrum-alias-text-color);
-        background-color: var(--spectrum-global-color-gray-75);
-        transition: background-color
+  .icon {
+    right: 31px;
+    bottom: 1px;
+    position: absolute;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    border-left: 1px solid var(--spectrum-alias-border-color);
+    border-right: 1px solid var(--spectrum-alias-border-color);
+    width: 31px;
+    color: var(--spectrum-alias-text-color);
+    background-color: var(--spectrum-global-color-gray-75);
+    transition: background-color
        var(--spectrum-global-animation-duration-100, 130ms),
-        box-shadow var(--spectrum-global-animation-duration-100, 130ms),
-        border-color var(--spectrum-global-animation-duration-100, 130ms);
-        height: calc(var(--spectrum-alias-item-height-m) - 2px);
-    }
+      box-shadow var(--spectrum-global-animation-duration-100, 130ms),
+      border-color var(--spectrum-global-animation-duration-100, 130ms);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
+  }

-    .icon:hover {
-        cursor: pointer;
-        color: var(--spectrum-alias-text-color-hover);
-        background-color: var(--spectrum-global-color-gray-50);
-        border-color: var(--spectrum-alias-border-color-hover);
-    }
+  .icon:hover {
+    cursor: pointer;
+    color: var(--spectrum-alias-text-color-hover);
+    background-color: var(--spectrum-global-color-gray-50);
+    border-color: var(--spectrum-alias-border-color-hover);
+  }
 </style>
--- a/packages/builder/src/components/design/AppPreview/componentStructure.json
+++ b/packages/builder/src/components/design/AppPreview/componentStructure.json
@ -5,7 +5,6 @@
  "table",
  "repeater",
  "button",
-  "spectrumcard",
  {
    "name": "Form",
    "icon": "Form",
@ -24,6 +23,14 @@
      "daterangepicker"
    ]
  },
+  {
+    "name": "Card",
+    "icon": "Card",
+    "children": [
+      "spectrumcard",
+      "cardstat"
+    ]
+  },
  {
    "name": "Chart",
    "icon": "GraphBarVertical",
--- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
@ -26,6 +26,7 @@
  import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
  import ResetFieldsButton from "./PropertyControls/ResetFieldsButton.svelte"
  import ColorPicker from "./PropertyControls/ColorPicker.svelte"
+  import URLSelect from "./PropertyControls/URLSelect.svelte"

  export let componentDefinition
  export let componentInstance
@ -61,6 +62,7 @@
    section: SectionSelect,
    navigation: NavigationEditor,
    filter: FilterEditor,
+    url: URLSelect,
    "field/string": StringFieldSelect,
    "field/number": NumberFieldSelect,
    "field/options": OptionsFieldSelect,
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor/FilterEditor.svelte
@ -47,7 +47,7 @@
  }
 </script>

-<ActionButton on:click={drawer.show}>Define Filters</ActionButton>
+<ActionButton on:click={drawer.show}>Define filters</ActionButton>
 <Drawer bind:this={drawer} title="Filtering">
  <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
  <DrawerContent slot="body">
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte
@ -0,0 +1,12 @@
+<script>
+  import { store } from "builderStore"
+  import DrawerBindableCombobox from "components/common/bindings/DrawerBindableCombobox.svelte"
+
+  export let value
+
+  $: urlOptions = $store.screens
+    .map(screen => screen.routing?.route)
+    .filter(x => x != null)
+</script>
+
+<DrawerBindableCombobox {value} on:change options={urlOptions} />
--- a/packages/standard-components/manifest.json
+++ b/packages/standard-components/manifest.json
@ -878,7 +878,7 @@
        "key": "text"
      },
      {
-        "type": "text",
+        "type": "url",
        "label": "URL",
        "key": "url",
        "placeholder": "/screen"
@ -2085,7 +2085,7 @@
    ]
  },
  "spectrumcard": {
-    "name": "Card (Spectrum)",
+    "name": "Card",
    "icon": "Card",
    "styles": ["size"],
    "settings": [
@ -2101,18 +2101,23 @@
      },
      {
        "type": "text",
-        "key": "footer",
-        "label": "Footer"
+        "key": "description",
+        "label": "Description"
      },
      {
        "type": "text",
        "key": "imageURL",
        "label": "Image URL"
      },
+      {
+        "type": "url",
+        "key": "linkURL",
+        "label": "Link URL"
+      },
      {
        "type": "boolean",
-        "key": "quiet",
-        "label": "Quiet"
+        "key": "horizontal",
+        "label": "Horizontal"
      }
    ]
  }
--- a/packages/standard-components/src/CardStat.svelte
+++ b/packages/standard-components/src/CardStat.svelte
@ -20,14 +20,13 @@
  .container {
    min-width: 260px;
    width: max-content;
-    border: 1px solid var(--grey-3);
+    border: 1px solid var(--spectrum-global-color-gray-300);
    border-radius: 0.3rem;
-    color: var(--blue);
  }

  .title {
    font-size: 0.85rem;
-    color: #9e9e9e;
+    color: var(--spectrum-global-color-gray-600);
    font-weight: 600;
    margin: 1rem 1.5rem 0.5rem 1.5rem;
    white-space: pre-wrap;
@ -37,14 +36,14 @@
    font-size: 2rem;
    font-weight: 600;
    margin: 0 1.5rem 1.5rem 1.5rem;
-    color: inherit;
+    color: var(--spectrum-global-color-blue-600);
    white-space: pre-wrap;
  }

  .label {
    font-size: 0.85rem;
    font-weight: 400;
-    color: #9e9e9e;
+    color: var(--spectrum-global-color-gray-600);
    margin: 1rem 1.5rem;
    white-space: pre-wrap;
  }
--- a/packages/standard-components/src/Link.svelte
+++ b/packages/standard-components/src/Link.svelte
@ -67,6 +67,10 @@
    color: var(--spectrum-alias-text-color);
    display: inline-block;
    white-space: pre-wrap;
+    transition: color 130ms ease-in-out;
+  }
+  a:hover {
+    color: var(--spectrum-global-color-blue-600);
  }
  .placeholder {
    font-style: italic;
--- a/packages/standard-components/src/SpectrumCard.svelte
+++ b/packages/standard-components/src/SpectrumCard.svelte
@ -4,20 +4,23 @@

  export let title
  export let subtitle
-  export let footer
+  export let description
  export let imageURL
-  export let quiet
+  export let linkURL
+  export let horizontal

-  const { styleable } = getContext("sdk")
+  const { styleable, linkable } = getContext("sdk")
  const component = getContext("component")
+
+  $: external = linkURL && !linkURL.startsWith("/")
 </script>

 <div
  use:styleable={$component.styles}
  class="spectrum-Card"
-  class:spectrum-Card--quiet={quiet}
  tabindex="0"
  role="figure"
+  class:horizontal
 >
  {#if imageURL}
    <div
@ -25,30 +28,91 @@
      style="background-image: url({imageURL})"
    />
  {/if}
-  <div class="spectrum-Card-body">
-    <div class="spectrum-Card-header">
-      <div
-        class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS"
-      >
-        {title || "Card Title"}
-      </div>
-    </div>
-    {#if subtitle}
-      <div class="spectrum-Card-content">
+  <div class="spectrum-Card-container">
+    <div class="spectrum-Card-body">
+      <div class="spectrum-Card-header">
        <div
-          class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS"
+          class="spectrum-Card-title spectrum-Heading spectrum-Heading--sizeXS"
        >
-          {subtitle}
+          {#if linkURL}
+            {#if external}
+              <a href={linkURL}>{title || "Card Title"}</a>
+            {:else}
+              <a use:linkable href={linkURL}>{title || "Card Title"}</a>
+            {/if}
+          {:else}
+            {title || "Card Title"}
+          {/if}
        </div>
      </div>
+      {#if subtitle}
+        <div class="spectrum-Card-content">
+          <div
+            class="spectrum-Card-subtitle spectrum-Detail spectrum-Detail--sizeS"
+          >
+            {subtitle}
+          </div>
+        </div>
+      {/if}
+    </div>
+    {#if description}
+      <div class="spectrum-Card-footer">
+        {description}
+      </div>
    {/if}
  </div>
-  {#if footer}
-    <div class="spectrum-Card-footer">{footer}</div>
-  {/if}
 </div>

 <style>
  .spectrum-Card {
+    width: 240px;
+    border-color: var(--spectrum-global-color-gray-300) !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .spectrum-Card.horizontal {
+    flex-direction: row;
+    width: 420px;
+  }
+  .spectrum-Card-title :global(a) {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+  }
+  .spectrum-Card-subtitle {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+  .spectrum-Card-footer {
+    word-wrap: anywhere;
+  }
+  a {
+    transition: color 130ms ease-in-out;
+    color: var(--spectrum-alias-text-color);
+  }
+  a:hover {
+    color: var(--spectrum-global-color-blue-600);
+  }
+
+  .horizontal .spectrum-Card-coverPhoto {
+    flex: 0 0 160px;
+    height: auto;
+    border-bottom-left-radius: calc(
+      var(--spectrum-alias-border-radius-regular) - 1px
+    );
+    border-top-right-radius: 0;
+  }
+  .horizontal .spectrum-Card-container {
+    width: 0;
+    flex: 1 1 auto;
+  }
+  .spectrum-Card-footer {
+    border-top: none;
+    padding-top: 0;
+    margin-top: -8px;
  }
 </style>