From 2adab35df7e9888db9a44a387b91ffc6db5f9dd9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= <niels.lyngso@gmail.com>
Date: Tue, 26 Nov 2024 21:21:14 +0100
Subject: [PATCH] media card selectable solution

---
 packages/uui-base/lib/mixins/SelectableMixin.ts    |  4 +++-
 .../uui-card-media/lib/uui-card-media.element.ts   |  7 +++++--
 .../uui-card-media/lib/uui-card-media.story.ts     | 14 ++++++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/uui-base/lib/mixins/SelectableMixin.ts b/packages/uui-base/lib/mixins/SelectableMixin.ts
index 9cb583ecc..777c8aa99 100644
--- a/packages/uui-base/lib/mixins/SelectableMixin.ts
+++ b/packages/uui-base/lib/mixins/SelectableMixin.ts
@@ -104,7 +104,9 @@ export const SelectableMixin = <T extends Constructor<LitElement>>(
 
     readonly #onKeydown = (e: KeyboardEvent) => {
       if (e.code !== 'Space' && e.code !== 'Enter') return;
-      this.#onClick(e);
+      if (e.composedPath().indexOf(this.#selectableTarget) === 0) {
+        this.#onClick(e);
+      }
     };
 
     readonly #onClick = (e: Event) => {
diff --git a/packages/uui-card-media/lib/uui-card-media.element.ts b/packages/uui-card-media/lib/uui-card-media.element.ts
index b35a035ef..5ce0dc6ff 100644
--- a/packages/uui-card-media/lib/uui-card-media.element.ts
+++ b/packages/uui-card-media/lib/uui-card-media.element.ts
@@ -94,7 +94,8 @@ export class UUICardMediaElement extends UUICardElement {
             ifDefined(
               this.target === '_blank' ? 'noopener noreferrer' : undefined,
             ),
-        )}>
+        )}
+        @click=${(e: MouseEvent) => e.stopPropagation()}>
         ${this.#renderContent()}
       </a>
     `;
@@ -120,7 +121,9 @@ export class UUICardMediaElement extends UUICardElement {
       <div id="select-border"></div>
 
       <slot name="tag"></slot>
-      <slot name="actions"></slot>`;
+      <slot
+        name="actions"
+        @click=${(e: MouseEvent) => e.stopPropagation()}></slot>`;
   }
 
   static styles = [
diff --git a/packages/uui-card-media/lib/uui-card-media.story.ts b/packages/uui-card-media/lib/uui-card-media.story.ts
index b4b3b4160..6da715196 100644
--- a/packages/uui-card-media/lib/uui-card-media.story.ts
+++ b/packages/uui-card-media/lib/uui-card-media.story.ts
@@ -64,6 +64,20 @@ export const Actions: Story = {
   },
 };
 
+export const Href: Story = {
+  args: {
+    'actions slot': html`<uui-button
+      slot="actions"
+      look="secondary"
+      label="Remove"
+      >Remove</uui-button
+    >`,
+    selectable: true,
+    href: 'https://umbraco.com',
+    target: '_blank',
+  },
+};
+
 export const Image: Story = {
   args: {
     slot: html`<img src="https://placedog.net/1447/?random" alt="" />`,