From 10140959d314ddb167a9cb16fe83f54b8fac911a Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Wed, 29 Jan 2025 11:14:57 +0100
Subject: [PATCH] refactor(ui): enable interactive elements inside linked card

---
 front/src/components/ui/Card.vue      |  9 ++++-
 front/src/components/ui/Link.vue      |  2 +-
 front/src/style/colors.scss           |  2 +-
 front/ui-docs/components/ui/button.md |  5 ++-
 front/ui-docs/components/ui/card.md   | 58 ++++++++++++++++++++++++++-
 5 files changed, 68 insertions(+), 8 deletions(-)

diff --git a/front/src/components/ui/Card.vue b/front/src/components/ui/Card.vue
index fd39935db..a681e4507 100644
--- a/front/src/components/ui/Card.vue
+++ b/front/src/components/ui/Card.vue
@@ -138,10 +138,10 @@ const attributes = computed(() =>
     position: absolute;
     inset: 0;
 
-    &~:is(.title, .content) {
+    &~:is(.title, .content:not(:has(:is(button, input, a, select)))) {
       pointer-events:none;
     }
-    &:hover~:is(.content) {
+    &:hover~:is(.content:not(:has(:is(button, input, a, select)))) {
       text-decoration: underline
     }
   }
@@ -174,6 +174,11 @@ const attributes = computed(() =>
     font-size: 1rem;
 
     pointer-events: none;
+
+    &:global(.large) {
+      font-size: 32px;
+      margin: -8px;
+    }
   }
   &:has(>.image)>.icon {
     top: var(--fw-card-padding);
diff --git a/front/src/components/ui/Link.vue b/front/src/components/ui/Link.vue
index 14fbfa6d5..0dac794fb 100644
--- a/front/src/components/ui/Link.vue
+++ b/front/src/components/ui/Link.vue
@@ -23,7 +23,7 @@ const props = defineProps<{
   & AlignmentProps>()
 
 const isExternalLink = computed(() =>
-  typeof props.to === 'string' && props.to.startsWith('http')
+  typeof props.to === 'string' && (props.to.startsWith('http') || props.to.startsWith('./'))
 )
 
 const [fontWeight, activeFontWeight] = props.thickWhenActive ? [600, 900] : [400, 400]
diff --git a/front/src/style/colors.scss b/front/src/style/colors.scss
index 07b805557..443c9eb1a 100644
--- a/front/src/style/colors.scss
+++ b/front/src/style/colors.scss
@@ -535,7 +535,7 @@
     background-color:var(--background-color);
     border: 1px solid var(--background-color);
 
-    &.interactive {
+    &.interactive:not(:has(.interactive:hover)) {
       &:hover {
         color:var(--hover-color);
         background-color:var(--hover-background-color);
diff --git a/front/ui-docs/components/ui/button.md b/front/ui-docs/components/ui/button.md
index 784c0a6c8..675522bac 100644
--- a/front/ui-docs/components/ui/button.md
+++ b/front/ui-docs/components/ui/button.md
@@ -402,13 +402,14 @@ You can use [Bootstrap Icons](https://icons.getbootstrap.com/) in your button co
 
 - Icon buttons shrink down to the icon size if you don't pass any content. If you want to keep the button at full width with just an icon, add `button-width` as a prop.
 - When combining icons with other content, prefix the icon prop with `right ` to place it after the content.
+- To make icons large, add ` large` to the icon prop.
 
 :::
 
 ```vue-html
 <Button icon="bi-three-dots-vertical" />
 <Button round icon="bi-x large" />
-<Button primary icon="bi-save" buttonWidth/>
+<Button primary icon="bi-save" button-width/>
 <Button destructive icon="bi-trash">
   Delete
 </Button>
@@ -420,7 +421,7 @@ You can use [Bootstrap Icons](https://icons.getbootstrap.com/) in your button co
 <Layout flex>
 <Button icon="bi-three-dots-vertical" />
 <Button round secondary icon="bi-x large" />
-<Button primary icon="bi-save" buttonWidth/>
+<Button primary icon="bi-save" button-width/>
 <Button destructive icon="bi-trash">
   Delete
 </Button>
diff --git a/front/ui-docs/components/ui/card.md b/front/ui-docs/components/ui/card.md
index 752bc6211..8b32c45d4 100644
--- a/front/ui-docs/components/ui/card.md
+++ b/front/ui-docs/components/ui/card.md
@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import Button from '~/components/ui/Button.vue'
+  import Link from '~/components/ui/Link.vue'
   import Card from '~/components/ui/Card.vue'
   import Layout from '~/components/ui/Layout.vue'
   import OptionsButton from '~/components/ui/button/Options.vue'
@@ -79,6 +80,9 @@ Add a `:to` prop, either containing an external link (`"https://..."`) or a Vue
 />
 </Layout>
 
+If you add interactive elements, only the surrounding surfaces will be linked.
+For details, see the section on [interactive elements on top of a linked card](#interactive-elements-on-top-of-a-linked-card)
+
 ## Card as a Category header
 
 Category cards are basic cards that contain only a title. To create a category card, pass a `category` prop.
@@ -337,14 +341,64 @@ title="For music lovers"
 Access your personal music collection from anywhere. Funkwhale gives you access to publication and sharing tools that you can use to promote your content across the web.
 </Card></div>
 
-### Add color (optional)
+## Interactive elements on top of a linked card
+
+Avoid adding buttons and links on top of a [linked card](#card-as-a-link). This is an uncommon pattern and will confuse users.
+
+```vue-html
+<Card full title="Linked card with interactive elements"
+  to="./card.md"
+  :tags="['rock', 'folk', 'punk']"
+  icon="bi-exclamation large"
+>
+  <Button primary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
+  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+</Card>
+```
+
+<Card full title="Linked card with interactive elements"
+  to="./card.md"
+  :tags="['rock', 'folk', 'punk']"
+  icon="bi-exclamation large"
+>
+  <Button primary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
+  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+</Card>
+
+Instead, use the [action area](#add-an-action) to offer the primary link:
+
+```vue-html
+<Card full title="Card with interactive elements"
+  :tags="['rock', 'folk', 'punk']"
+  icon="bi-check-lg large"
+>
+  <Button secondary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
+  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+  <template #action>
+    <Link solid full primary to="./card.md" align-text="center">Details</Link>
+  </template>
+</Card>
+```
+
+<Card full title="Card with interactive elements"
+  :tags="['rock', 'folk', 'punk']"
+  icon="bi-check-lg large"
+>
+  <Button secondary low-height :onClick="()=>alert('Button clicked')">Click me!</Button>
+  <Link secondary to="./card.md" align-text="right">Open this file in a new window</Link>
+  <template #action>
+    <Link solid full primary to="./card.md" align-text="center">Details</Link>
+  </template>
+</Card>
+
+## Add color
 
 - Choose a color: `default`, `primary`, `secondary`, `destructive`, or a Pastel (red, yellow, purple, green or blue)
 - Choose a variant: `raised`, `solid`, `outline`,...
 
 Read more: [Using Color](/using-color)
 
-### Set size (optional)
+## Set size
 
 `large` (304px), `medium` (208px), `auto`, `small`, ...