Remove mt external link (#373)

* delete component files

* remove component references

* replace mt-external-link with mt-link for mt-empty-state

* style:add flex column

packages/component-library/src/components/assets/scss/global.scss

@@ -34,7 +34,7 @@ body {
 }
 
 /* style inline external links */
-a[target="_blank"]:not(.mt-external-link, .mt-internal-link, .mt-button) {
+a[target="_blank"]:not(.mt-internal-link, .mt-button) {
   display: inline-block;
   position: relative;
   color: $color-shopware-brand-500;

packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.vue

@@ -12,9 +12,15 @@
       {{ description }}
     </mt-text>
 
-    <mt-external-link v-if="linkHref && linkText" class="mt-empty-state__link" :href="linkHref">
+    <mt-link
+      v-if="linkHref && linkText"
+      :href="linkHref"
+      class="mt-empty-state__link"
+      type="external"
+      as="a"
+    >
       {{ linkText }}
-    </mt-external-link>
+    </mt-link>
 
     <mt-button
       v-if="buttonText"
@@ -30,10 +36,10 @@
 </template>
 
 <script setup lang="ts">
-import MtExternalLink from "@/components/form/mt-external-link/mt-external-link.vue";
 import MtButton from "@/components/form/mt-button/mt-button.vue";
 import MtIcon from "../../icons-media/mt-icon/mt-icon.vue";
 import MtText from "@/components/content/mt-text/mt-text.vue";
+import MtLink from "@/components/navigation/mt-link/mt-link.vue";
 
 defineProps<{
   headline: string;
@@ -48,24 +54,33 @@ defineEmits(["button-click"]);
 </script>
 
 <style scoped>
+.mt-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
 .mt-empty-state__icon {
   display: inline-block;
   padding: 0.75rem;
   border-radius: var(--border-radius-xs);
   background-color: var(--color-interaction-secondary-dark);
-  margin-block-end: 1.5rem;
 }
 
 .mt-empty-state__headline {
-  margin-block-end: 0.5rem;
+  margin-top: 1.5rem;
+  margin-bottom: 0;
+}
+
+.mt-empty-state__description {
+  margin-top: 0.5rem;
 }
 
 .mt-empty-state__link {
-  margin-block-start: 0.5rem;
-  display: block;
+  margin-top: 0.5rem;
 }
 
 .mt-empty-state__button {
-  margin-block-start: 1.5rem;
+  margin-top: 1.5rem;
 }
 </style>

packages/component-library/src/index.ts

@@ -6,7 +6,6 @@ import MtButton from "./components/form/mt-button/mt-button.vue";
 import MtCheckbox from "./components/form/mt-checkbox/mt-checkbox.vue";
 import MtColorpicker from "./components/form/mt-colorpicker/mt-colorpicker.vue";
 import MtEmailField from "./components/form/mt-email-field/mt-email-field.vue";
-import MtExternalLink from "./components/form/mt-external-link/mt-external-link.vue";
 import MtLink from "./components/navigation/mt-link/mt-link.vue";
 import MtNumberField from "./components/form/mt-number-field/mt-number-field.vue";
 import MtPasswordField from "./components/form/mt-password-field/mt-password-field.vue";
@@ -55,7 +54,6 @@ export {
   MtColorpicker,
   MtDatepicker,
   MtEmailField,
-  MtExternalLink,
   MtLink,
   MtNumberField,
   MtPasswordField,
@@ -103,8 +101,6 @@ export {
   // @deprecated
   MtEmailField as SwEmailField,
   // @deprecated
-  MtExternalLink as SwExternalLink,
-  // @deprecated
   MtNumberField as SwNumberField,
   // @deprecated
   MtPasswordField as SwPasswordField,