feat: Add Contextual Help Drawer for Banner in Space Settings - MEED-…

…7441 - Meeds-io/MIPs#147 (#4017)

webapp/portlet/src/main/resources/locale/portlet/Portlets_en.properties

@@ -359,7 +359,10 @@ SpaceSettings.roles=Roles
 SpaceSettings.accessAndVisibility=Access & Visibility
 SpaceSettings.backToMain=Back to main
 SpaceSettings.label.avatar=Avatar
-SpaceSettings.label.banner=Banner
+SpaceSettings.label.banner={0}Banner{1}
+SpaceSettings.label.bannerTooltip=Why using a banner?
+SpaceSettings.label.bannerHelp1=The space banner is used to feature the space in the spaces directory page and while searching a space
+SpaceSettings.label.bannerHelp2=The best for your banner is to used an image of 1280 & 160
 SpaceSettings.applications=Applications
 SpaceSettings.label.ok=OK
 SpaceSettings.label.cancel=Cancel

webapp/portlet/src/main/webapp/vue-apps/space-settings/components/form/SpaceSettingBanner.vue

@@ -21,7 +21,19 @@
 <template>
   <div class="full-width border-box-sizing pe-0 pe-sm-8">
     <div class="text-header d-flex position-relative my-4">
-      <div class="flex-grow-0">{{ $t('SpaceSettings.label.banner') }}</div>
+      <help-label
+        label="SpaceSettings.label.banner"
+        label-class="text-header"
+        tooltip="SpaceSettings.label.bannerTooltip">
+        <template #helpContent>
+          <p>
+            {{ $t('SpaceSettings.label.bannerHelp1') }}
+          </p>
+          <p>
+            {{ $t('SpaceSettings.label.bannerHelp2') }}
+          </p>
+        </template>
+      </help-label>
       <div class="flex-grow-1 ms-2 position-relative">
         <div class="absolute-vertical-center">
           <v-btn