👌 review feedback

Author: lehju

src/components/Accordion/MucAccordion.vue

@@ -3,7 +3,10 @@
     <div class="container">
       <div class="m-component__grid">
         <div class="m-component__column">
-          <div class="m-component__head">
+          <div
+            v-if="header"
+            class="m-component__head"
+          >
             <h2 class="m-component__heading">{{ header }}</h2>
             <p class="m-component__summary"></p>
           </div>
@@ -41,7 +44,7 @@ const {
   /**
    * Heading of accordion
    */
-  header: string;
+  header?: string;
   /**
    * Multiple MucAccordionItems can be active at the same time
    */

src/components/Accordion/MucAccordionItem.vue

@@ -13,20 +13,15 @@
         :aria-controls="'content-' + id"
       >
         {{ header }}
-        <svg
-          aria-hidden="true"
-          focusable="false"
-          class="icon"
-        >
-          <use
-            v-if="collapsed"
-            xlink:href="#icon-chevron-down"
-          ></use>
-          <use
-            v-else
-            xlink:href="#icon-chevron-up"
-          ></use>
-        </svg>
+
+        <muc-icon
+          v-if="collapsed"
+          icon="chevron-down"
+        />
+        <muc-icon
+          v-else
+          icon="chevron-up"
+        />
       </button>
     </h3>
     <section
@@ -52,6 +47,8 @@
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
+import { MucIcon } from "../Icon";
+
 const { id, activeItems = [] } = defineProps<{
   /**
    * Id of accordion item.
@@ -107,7 +104,8 @@ watch(
   () => {
     if (!activeItems.includes(id) && !collapsed.value && section.value) {
       collapsed.value = true;
-      section.value.style.height = section.value.scrollHeight + "px";
+      section.value.style.height =
+        section.value.scrollHeight + calculateMargin() + "px";
       collapsing.value = true;
       setTimeout(() => {
         if (section.value) {
@@ -125,7 +123,8 @@ const toggleCollapsable = () => {
   if (section.value) {
     collapsed.value = !collapsed.value;
     if (collapsed.value) {
-      section.value.style.height = section.value.scrollHeight + "px";
+      section.value.style.height =
+        section.value.scrollHeight + calculateMargin() + "px";
       collapsing.value = true;
       emit("close", id);
       setTimeout(() => {
@@ -146,6 +145,19 @@ const toggleCollapsable = () => {
   }
 };
 
+/**
+ * Calculation of the margin of 1.5em to improve the animation
+ */
+const calculateMargin = () => {
+  if (section.value) {
+    const computedStyle = window.getComputedStyle(section.value);
+    const fontSize = parseFloat(computedStyle.fontSize);
+    return 1.5 * fontSize;
+  } else {
+    return 0;
+  }
+};
+
 /**
  * Handles the end of the collapsing transition.
  */