Merge branch 'main' into next-37776/move-sdk-plugin-tests

.changeset/gentle-plants-flash.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Deprecated mt-external link component

.changeset/quiet-trains-impress.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+remove default margin of banner component, hidden by future flag

.changeset/rare-starfishes-compete.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": minor
+---
+
+Add external and internal variants for link component

packages/component-library/src/components/feedback-indicator/mt-banner/mt-banner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mt-banner" :class="classes" role="banner">
+  <div :class="classes" role="banner">
     <slot name="customIcon">
       <mt-icon
         v-if="!hideIcon"
@@ -36,6 +36,7 @@
 import { computed } from "vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
+import { useFutureFlags } from "@/composables/useFutureFlags";
 
 const props = withDefaults(
   defineProps<{
@@ -68,9 +69,13 @@ const bannerIcon = computed(() => {
   return iconConfig[props.variant] || "solid-info-circle";
 });
 
+const future = useFutureFlags();
+
 const classes = computed(() => [
+  "mt-banner",
   `mt-banner--${props.variant}`,
   {
+    "mt-banner--future-remove-default-margin": future.removeDefaultMargin,
     "mt-banner--icon": !props.hideIcon,
     "mt-banner--closable": props.closable,
   },
@@ -97,6 +102,10 @@ const bodyClasses = computed(() => ({
   }
 }
 
+.mt-banner--future-remove-default-margin {
+  margin-block-end: 0;
+}
+
 .mt-banner__title {
   margin-block-end: 0;
 }

packages/component-library/src/components/form/mt-external-link/mt-external-link.vue

@@ -31,6 +31,7 @@
 import { defineComponent } from "vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 
+/** @deprecated tag:4.0 -- use mt-link instead */
 export default defineComponent({
   name: "MtExternalLink",
 

packages/component-library/src/components/navigation/mt-link/mt-link.interactive.stories.ts

@@ -34,3 +34,17 @@ export const VisualTestRenderExternalLinkDisabled: MtLinkStory = {
     expect(args.click).not.toHaveBeenCalled();
   },
 };
+
+export const VisualTestRenderExternalLink: MtLinkStory = {
+  name: "Render external link",
+  args: {
+    type: "external",
+  },
+};
+
+export const VisualTestRenderInternalLink: MtLinkStory = {
+  name: "Render internal link",
+  args: {
+    type: "internal",
+  },
+};

packages/component-library/src/components/navigation/mt-link/mt-link.vue

@@ -15,16 +15,25 @@
     @click="disabled ? undefined : $emit('click', $event)"
   >
     <slot />
+
+    <mt-icon
+      v-if="type"
+      size="0.75rem"
+      :name="type === 'external' ? 'regular-external-link-s' : 'regular-long-arrow-right'"
+    />
   </component>
 </template>
 
 <script setup lang="ts">
+import MtIcon from "@/components/icons-media/mt-icon/mt-icon.vue";
+
 withDefaults(
   defineProps<{
     to?: string;
     as?: string;
     variant?: "primary" | "critical";
     disabled?: boolean;
+    type?: "external" | "internal";
   }>(),
   {
     as: "router-link",
@@ -40,14 +49,22 @@ defineEmits<{
 
 <style scoped>
 .mt-link {
-  display: inline-block;
+  display: inline-flex;
+  column-gap: 0.25rem;
+  align-items: center;
   cursor: pointer;
   margin: 0;
   font-family: var(--font-family-body);
   font-size: var(--font-size-xs);
   line-height: var(--font-line-height-xs);
   font-weight: var(--font-weight-medium);
   text-decoration: underline;
+
+  &:focus-visible {
+    outline-offset: 2px;
+    outline: 2px solid var(--color-border-brand-selected);
+    border-radius: var(--border-radius-xs);
+  }
 }
 
 .mt-link:is(:disabled, .mt-link--disabled) {