💥 add new required variable variant to MucBanner

Author: lehju

src/components/Banner/MucBanner.stories.ts

@@ -21,34 +21,47 @@ export default {
 export const Default = {
   args: {
     default: "Hi, I'm an Info-Banner!",
+    variant: "content",
     type: "info",
   },
 };
 
 export const Success = {
   args: {
     default: "Hi, I'm a Success-Banner!",
+    variant: "content",
     type: "success",
   },
 };
 
 export const Warning = {
   args: {
     default: "Hi, I'm a Warning-Banner!",
+    variant: "content",
     type: "warning",
   },
 };
 
 export const Emergency = {
   args: {
     default: "Hi, I'm an Emergency-Banner!",
+    variant: "content",
     type: "emergency",
   },
 };
 
+export const Header = {
+  args: {
+    default: "Hi, I'm an Info-Banner!",
+    variant: "header",
+    type: "info",
+  },
+};
+
 export const NoIcon = {
   args: {
-    default: "Hi, I'm an Emergency-Banner!",
+    default: "Hi, I'm a Warning-Banner!",
+    variant: "content",
     type: "warning",
     noIcon: true,
   },

src/components/Banner/MucBanner.vue

@@ -4,10 +4,20 @@ import { computed } from "vue";
 import { MucIcon } from "../Icon";
 
 type bannerType = "info" | "success" | "warning" | "emergency";
+type bannerVariant = "content" | "header";
 
-const { type = "info", noIcon = false } = defineProps<{
+const {
+  type = "info",
+  variant,
+  noIcon = false,
+} = defineProps<{
   /**
-   * Changes the style of the banner. Available types are `info`, `warning` and `emergency`.
+   * Changes the style of the banner. Available types are `content` and `header`. `content` is used in the content area. `header` is used directly below the header and has more padding.
+   */
+  variant: bannerVariant;
+
+  /**
+   * Changes the style of the banner. Available types are `info`, `success`, `warning` and `emergency`.
    */
   type?: bannerType;
 
@@ -89,13 +99,26 @@ const typeIcon = computed(() => {
         :role="typeRole"
         :aria-label="typeAriaLabel"
       >
-        <div>
+        <template v-if="variant === 'content'">
           <muc-icon
             v-if="!noIcon"
             :icon="typeIcon"
           />
-          <slot />
-        </div>
+          <p>
+            <slot />
+          </p>
+        </template>
+        <template v-else>
+          <div class="container-fluid">
+            <muc-icon
+              v-if="!noIcon"
+              :icon="typeIcon"
+            />
+            <p>
+              <slot />
+            </p>
+          </div>
+        </template>
       </div>
     </div>
   </div>