move banner over to composition api

shopware · Sep 27, 2024 · 6ac1552 · 6ac1552
1 parent 6416457
commit 6ac1552
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 107 deletions.
diff --git a/...nent-library/src/components/feedback-indicator/mt-banner/mt-banner.interactive.stories.ts b/...nent-library/src/components/feedback-indicator/mt-banner/mt-banner.interactive.stories.ts
@@ -66,6 +66,6 @@ export const VisualTestCloseBannerBox: MtBannerStory = {
 
     await userEvent.click(canvas.getByRole("button"));
 
-    expect(args.close).toHaveBeenCalledWith(null);
+    expect(args.close).toHaveBeenCalledOnce();
   },
 };
diff --git a/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue b/packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-banner" :class="bannerClasses" role="banner">
+  <div class="mt-banner" :class="classes" role="banner">
     <slot name="customIcon">
       <mt-icon
         v-if="!hideIcon"
@@ -10,7 +10,7 @@
       />
     </slot>
 
-    <div class="mt-banner__body" :class="bannerBodyClasses">
+    <div class="mt-banner__body" :class="bodyClasses">
       <mt-text v-if="title" as="h3" weight="bold" size="xs" class="mt-banner__title">
         {{ title }}
       </mt-text>
@@ -32,119 +32,54 @@
   </div>
 </template>
 
-<script lang="ts">
-import type { PropType } from "vue";
-
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
 
-type CssClasses = (string | Record<string, boolean>)[] | Record<string, boolean>;
-type BannerType = "neutral" | "info" | "attention" | "critical" | "positive" | "inherited";
-
-export default defineComponent({
-  name: "MtBanner",
-
-  components: {
-    MtIcon,
-    MtText,
-  },
-
-  props: {
-    /**
-     * Change the variant of the banner
-     * @values neutral, info, attention, critical, positive, inherited
-     */
-    variant: {
-      type: String as PropType<BannerType>,
-      required: false,
-      default: "neutral",
-      validator(value: string): boolean {
-        return ["neutral", "info", "attention", "critical", "positive", "inherited"].includes(
-          value,
-        );
-      },
-    },
-    /**
-     * The general title of the banner
-     */
-    title: {
-      type: String,
-      required: false,
-      default: "",
-    },
-    /**
-     * Hide the icon if needed
-     */
-    hideIcon: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * If set to true then you can close the banner directly
-     */
-    closable: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * This index will get emitted when a user closes the banner.
-     * It is needed for removing the correct banner
-     */
-    bannerIndex: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    /**
-     * Change the default icon for the banner
-     */
-    icon: {
-      type: String,
-      required: false,
-      default: null,
-    },
+const props = withDefaults(
+  defineProps<{
+    variant?: "neutral" | "info" | "attention" | "critical" | "positive" | "inherited";
+    title?: string;
+    hideIcon?: boolean;
+    closable?: boolean;
+    bannerIndex?: string;
+    icon?: string;
+  }>(),
+  {
+    variant: "neutral",
+    hideIcon: false,
+    closable: false,
   },
+);
 
-  computed: {
-    bannerIcon(): string {
-      if (this.icon) {
-        return this.icon;
-      }
+const bannerIcon = computed(() => {
+  if (props.icon) return props.icon;
 
-      const iconConfig: Record<string, string> = {
-        neutral: "solid-info-circle",
-        info: "solid-info-circle",
-        attention: "solid-exclamation-triangle",
-        critical: "solid-exclamation-circle",
-        positive: "solid-check-circle",
-        inherited: "solid-link",
-      };
+  const iconConfig = {
+    neutral: "solid-info-circle",
+    info: "solid-info-circle",
+    attention: "solid-exclamation-triangle",
+    critical: "solid-exclamation-circle",
+    positive: "solid-check-circle",
+    inherited: "solid-link",
+  };
 
-      return iconConfig[this.variant] || "solid-info-circle";
-    },
-
-    bannerClasses(): CssClasses {
-      return [
-        `mt-banner--${this.variant}`,
-        {
-          "mt-banner--icon": !this.hideIcon,
-          "mt-banner--no-icon": this.hideIcon,
-          "mt-banner--closable": this.closable,
-        },
-      ];
-    },
+  return iconConfig[props.variant] || "solid-info-circle";
+});
 
-    bannerBodyClasses(): CssClasses {
-      return {
-        "mt-banner__body--icon": !this.hideIcon,
-        "mt-banner__body--closable": this.closable,
-      };
-    },
+const classes = computed(() => [
+  `mt-banner--${props.variant}`,
+  {
+    "mt-banner--icon": !props.hideIcon,
+    "mt-banner--closable": props.closable,
   },
-});
+]);
+
+const bodyClasses = computed(() => ({
+  "mt-banner__body--icon": !props.hideIcon,
+  "mt-banner__body--closable": props.closable,
+}));
 </script>
 
 <style scoped>