From 5c8d3543662f2027875af77c52f61cb9731c5d10 Mon Sep 17 00:00:00 2001
From: Angel Fernando Quiroz Campos <1697880+AngelFQC@users.noreply.github.com>
Date: Tue, 16 Jul 2024 13:33:50 -0500
Subject: [PATCH] Display: Allow to set size for SectionHeader component

---
 assets/css/scss/organisms/_section_header.scss |  7 +++++--
 assets/vue/components/layout/SectionHeader.vue | 18 ++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/assets/css/scss/organisms/_section_header.scss b/assets/css/scss/organisms/_section_header.scss
index 904154ed81..a24f3489be 100644
--- a/assets/css/scss/organisms/_section_header.scss
+++ b/assets/css/scss/organisms/_section_header.scss
@@ -3,11 +3,14 @@
     md:flex-row sm:items-center;
 
   &--h2 {
-    @apply pb-6 ;
+    @apply pb-6 mb-6;
   }
 
+  &--h3,
+  &--h4,
+  &--h5,
   &--h6 {
-    @apply pb-4;
+    @apply pb-4 mb-4;
   }
 
   &__title {
diff --git a/assets/vue/components/layout/SectionHeader.vue b/assets/vue/components/layout/SectionHeader.vue
index 4858ddee72..b1e33a28e6 100644
--- a/assets/vue/components/layout/SectionHeader.vue
+++ b/assets/vue/components/layout/SectionHeader.vue
@@ -8,6 +8,11 @@ defineProps({
     type: String,
     required: true,
   },
+  size: {
+    type: String,
+    required: false,
+    default: "2",
+  },
 })
 
 const cidReqStore = useCidReqStore()
@@ -16,11 +21,16 @@ const { course } = storeToRefs(cidReqStore)
 </script>
 
 <template>
-  <div class="section-header section-header--h2">
-    <h2
+  <div
+    class="section-header"
+    :class="`section-header--h${size}`"
+  >
+    <component
+      :is="`h${size}`"
       class="section-header__title"
-      v-text="title"
-    />
+    >
+      {{ title }}
+    </component>
 
     <div class="section-header__actions">
       <StudentViewButton v-if="course" />