Merge pull request #6788 from Budibase/clickable-cards

Allow full spectrum cards to be clickable

packages/client/manifest.json

@@ -3509,17 +3509,18 @@
       },
       {
         "type": "boolean",
-        "label": "Show button",
+        "label": "Use button for click action",
         "key": "showButton"
       },
       {
         "type": "text",
         "key": "buttonText",
-        "label": "Button text"
+        "label": "Button text",
+        "dependsOn": "showButton"
       },
       {
         "type": "event",
-        "label": "Button action",
+        "label": "Click action",
         "key": "buttonOnClick"
       }
     ]
@@ -3841,18 +3842,19 @@
           },
           {
             "type": "boolean",
-            "label": "Show button",
+            "label": "Use button for click action",
             "key": "showCardButton"
           },
           {
             "type": "text",
             "key": "cardButtonText",
             "label": "Button text",
-            "nested": true
+            "nested": true,
+            "dependsOn": "showCardButton"
           },
           {
             "type": "event",
-            "label": "Button action",
+            "label": "Click action",
             "key": "cardButtonOnClick",
             "nested": true
           }

packages/client/src/components/app/SpectrumCard.svelte

@@ -19,9 +19,10 @@
 
   const handleLink = e => {
     if (!linkURL) {
-      return
+      return false
     }
     e.preventDefault()
+    e.stopPropagation()
     routeStore.actions.navigate(linkURL, linkPeek)
   }
 </script>
@@ -32,6 +33,8 @@
   tabindex="0"
   role="figure"
   class:horizontal
+  class:clickable={buttonOnClick && !showButton}
+  on:click={showButton ? null : buttonOnClick}
 >
   {#if imageURL}
     <div
@@ -67,7 +70,9 @@
     {/if}
     {#if showButton}
       <div class="spectrum-Card-footer button-container">
-        <Button on:click={buttonOnClick} secondary>{buttonText || ""}</Button>
+        <Button on:click={buttonOnClick} secondary>
+          {buttonText || "Click me"}
+        </Button>
       </div>
     {/if}
   </div>
@@ -81,6 +86,11 @@
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
+    transition: border-color 130ms ease-out;
+  }
+  .spectrum-Card.clickable:hover {
+    cursor: pointer;
+    border-color: var(--spectrum-global-color-gray-500) !important;
   }
   .spectrum-Card.horizontal {
     flex-direction: row;
@@ -90,7 +100,7 @@
     padding: var(--spectrum-global-dimension-size-50) 0;
   }
   .spectrum-Card-title.link {
-    transition: color 130ms ease-in-out;
+    transition: color 130ms ease-out;
   }
   .spectrum-Card-title.link:hover {
     cursor: pointer;