From e16d0a6130ada2d99303d7d5784d6acc79d1f760 Mon Sep 17 00:00:00 2001
From: upsiflu <upsiflu@gmail.com>
Date: Thu, 6 Feb 2025 13:49:47 +0100
Subject: [PATCH] fix(ui): improve Heading component

---
 front/src/components/ui/Heading.vue    | 21 ++++++---
 front/ui-docs/components/ui/heading.md | 64 +++++++++++++++++++++++---
 2 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/front/src/components/ui/Heading.vue b/front/src/components/ui/Heading.vue
index 835d86fd9..7eadc6bd1 100644
--- a/front/src/components/ui/Heading.vue
+++ b/front/src/components/ui/Heading.vue
@@ -1,28 +1,35 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 const props = defineProps<{
   [H in `h${'1' | '2' | '3' | '4' | '5' | '6' | '7'}`]? : string
 } & {[S in 'page-heading' | 'section-heading' | 'subsection-heading' | 'caption' | 'title' | 'radio' | 'secondary' ]? : true}>()
 
 const [level, title] = Object.entries(props).find(([key, value]) => value && key.startsWith('h')) || ['h1', '']
-const size = Object.entries(props).find(([key, value]) => value && key!==level)?.[0] || 'section-heading'
+const size = computed(()=>(Object.entries(props).find(([key, value]) => value && key!==level)?.[0] || 'section-heading').replace('-', '').toLowerCase())
 </script>
 
 <template>
-  <component :is="level" :class="size" style="margin: 0; padding: 0; vertical-align: baseline;">
-    {{ title }}
+  <component :is="level" :class="[$style[size], $style.heading]">
+    <slot name="before" />
+      {{ title }}
     <slot />
+    <slot name="after" />
   </component>
 </template>
 
-<style scoped>
+<style module>
+  /* Any heading */
+  :is(h1, h2, h3, h4, h5, h6).heading { margin: 0; padding:0; vertical-align: baseline; align-self: baseline;}
+
   /* Page heading */
-  .pageHeading { font-size: 36px; font-weight: 900; letter-spacing: -1px; }
+  .pageheading { font-size: 36px; font-weight: 900; letter-spacing: -1px; }
 
   /* Section heading, Modal heading [DEFAULT] */
-  .sectionHeading { font-size: 20px; font-weight: 700; letter-spacing: -.5px; }
+  .sectionheading { font-size: 20px; font-weight: 700; letter-spacing: -.5px; }
 
   /* Form subsection */
-  .subsectionHeading {font-size: 16px; font-weight: 600; letter-spacing: 0; }
+  .subsectionheading {font-size: 16px; font-weight: 600; letter-spacing: 0; }
 
   /* input caption */
   .caption {font-size: 14px; font-weight: 600; letter-spacing: .25px; }
diff --git a/front/ui-docs/components/ui/heading.md b/front/ui-docs/components/ui/heading.md
index a81bd55d7..10d358009 100644
--- a/front/ui-docs/components/ui/heading.md
+++ b/front/ui-docs/components/ui/heading.md
@@ -24,19 +24,31 @@ Consult [the allyproject for a comprehensive guide on headings](https://www.a11y
 
 ---
 
-<Heading h1 page-heading>Page heading</Heading>
+```vue-html
+<Heading h1="Page heading" page-heading />
+```
+
+<Heading h1="Page heading" page-heading />
 
 Use this visual size on the main heading of the page.
 
 ---
 
-<Heading h3 section-heading>Section heading</Heading>
+```vue-html
+<Heading h3="Section heading" section-heading />
+```
+
+<Heading h3="Section heading" section-heading />
 
 Use section headings to subdivide the main content on the page. Also use for modal headings. This is the default visual size.
 
 ---
 
-<Heading h3 subsection-heading>Subsection heading</Heading>
+```vue-html
+<Heading h3="Subsection heading" subsection-heading />
+```
+
+<Heading h3="Subsection heading" subsection-heading />
 
 Use subsection headings to break long sections or forms with several groups into digestible subsections.
 
@@ -44,24 +56,62 @@ Use subsection headings to break long sections or forms with several groups into
 
 ---
 
-<Heading h4 caption>Caption</Heading>
+```vue-html
+<Heading h4="Caption" caption />
+```
+
+<Heading h4="Caption" caption />
 
 Caption-style headings are found only within forms.
 
 ---
 
-<Heading h3 title>Title</Heading>
+```vue-html
+<Heading h3="Title" title />
+```
+
+<Heading h3="Title" title />
 
 Use this visual size to title [Tabs](/components/ui/tabs), Channels, [Cards](/components/ui/card) and [Activities](/components/ui/activity).
 
 ---
 
-<Heading h3 radio>Radio</Heading>
+```vue-html
+<Heading h3="Radio" radio />
+```
+
+<Heading h3="Radio" radio />
 
 Radio cards have giant titles.
 
 ---
 
-<Heading h3 secondary>Secondary</Heading>
+```vue-html
+<Heading h3="Secondary" secondary />
+```
+
+<Heading h3="Secondary" secondary />
 
 A card may have a secondary title, [as exemplified in the designs](https://design.funkwhale.audio/#/workspace/a4e0101a-252c-80ef-8003-918b4c2c3927/e3a187f0-0f5e-11ed-adb9-fff9e854a67c?page-id=5e293790-52d3-11ed-9497-8deeaf0bfa97).
+
+## Add content to the left and to the right
+
+```vue-html
+<Heading h2="Heading" page-heading>
+  <template #before>
+    (Before)
+  </template>
+  <template #after>
+    (After)
+  </template>
+</Heading>
+```
+
+<Heading h2="Heading" page-heading>
+  <template #before>
+    (Before)
+  </template>
+  <template #after>
+    (After)
+  </template>
+</Heading>