Add spectrum card component

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 {
+  .control {
-        flex: 1;
+    flex: 1;
-        position: relative;
+    position: relative;
-    }
+  }
 
-    .icon {
+  .icon {
-        right: 1px;
+    right: 31px;
-        bottom: 1px;
+    bottom: 1px;
-        position: absolute;
+    position: absolute;
-        justify-content: center;
+    justify-content: center;
-        align-items: center;
+    align-items: center;
-        display: flex;
+    display: flex;
-        flex-direction: row;
+    flex-direction: row;
-        box-sizing: border-box;
+    box-sizing: border-box;
-        border-left: 1px solid var(--spectrum-alias-border-color);
+    border-left: 1px solid var(--spectrum-alias-border-color);
-        border-top-right-radius: var(--spectrum-alias-border-radius-regular);
+    border-right: 1px solid var(--spectrum-alias-border-color);
-        border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
+    width: 31px;
-        width: 31px;
+    color: var(--spectrum-alias-text-color);
-        color: var(--spectrum-alias-text-color);
+    background-color: var(--spectrum-global-color-gray-75);
-        background-color: var(--spectrum-global-color-gray-75);
+    transition: background-color
-        transition: background-color
         var(--spectrum-global-animation-duration-100, 130ms),
-        box-shadow 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);
+      border-color var(--spectrum-global-animation-duration-100, 130ms);
-        height: calc(var(--spectrum-alias-item-height-m) - 2px);
+    height: calc(var(--spectrum-alias-item-height-m) - 2px);
-    }
+  }
 
-    .icon:hover {
+  .icon:hover {
-        cursor: pointer;
+    cursor: pointer;
-        color: var(--spectrum-alias-text-color-hover);
+    color: var(--spectrum-alias-text-color-hover);
-        background-color: var(--spectrum-global-color-gray-50);
+    background-color: var(--spectrum-global-color-gray-50);
-        border-color: var(--spectrum-alias-border-color-hover);
+    border-color: var(--spectrum-alias-border-color-hover);
-    }
+  }
 </style>

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",

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,

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">

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} />

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",
+        "key": "description",
-        "label": "Footer"
+        "label": "Description"
       },
       {
         "type": "text",
         "key": "imageURL",
         "label": "Image URL"
       },
+      {
+        "type": "url",
+        "key": "linkURL",
+        "label": "Link URL"
+      },
       {
         "type": "boolean",
-        "key": "quiet",
+        "key": "horizontal",
-        "label": "Quiet"
+        "label": "Horizontal"
       }
     ]
   }

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;
   }

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;

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-container">
-    <div class="spectrum-Card-header">
+    <div class="spectrum-Card-body">
-      <div
+      <div class="spectrum-Card-header">
-        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-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>