Merge branch 'main' into feature/868

.changeset/sweet-trains-talk.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Add focus state to banner close button

.changeset/wise-squids-brush.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Announce mt-search as a real search input

.changeset/yellow-melons-boil.md

@@ -0,0 +1,5 @@
+---
+"@shopware-ag/meteor-component-library": patch
+---
+
+Remove link role from mt-link when using custom component

.github/workflows/tests.yml

@@ -23,6 +23,11 @@ jobs:
         uses: actions/checkout@v4
         with:
           ref: ${{ github.head_ref }}
+        if: ${{ github.event.pull_request.head.repo.full_name == 'shopware/meteor' }}
+
+      - name: Checkout
+        uses: actions/checkout@v4
+        if: ${{ github.event.pull_request.head.repo.full_name != 'shopware/meteor' }}
 
       - uses: pnpm/action-setup@v3
         with:
@@ -54,7 +59,7 @@ jobs:
         run: pnpx turbo run lint:types
 
       - name: Commit changes
-        if: always()
+        if: always() && ${{ github.event.pull_request.head.repo.full_name == 'shopware/meteor' }}
         uses: stefanzweifel/git-auto-commit-action@v5
         with:
           commit_message: "Apply code formatting and fixable ESLint issues"
@@ -160,12 +165,6 @@ jobs:
           name: nuxt-app--playwright-test-results
           path: examples/nuxt-app/test-results/
 
-      - uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: meteor-admin-sdk--playwright-test-results
-          path: packages/admin-sdk/playwright-report/
-
   tested-versions:
     name: tested-versions
     runs-on: ubuntu-latest

.github/workflows/visual-tests.yml

@@ -55,14 +55,14 @@ jobs:
         run: |
           npx concurrently --kill-others --success first --names "SB,TEST"  --hide "SB" --prefix-colors "magenta,blue" \
           "http-server ./packages/component-library/storybook-static -a 127.0.0.1 --port 6006" \
-          "wait-on http://127.0.0.1:6006 && pnpx turbo run test:storybook --filter=@shopware-ag/meteor-component-library"
+          "wait-on http://127.0.0.1:6006 && pnpx turbo run test:storybook --force --filter=@shopware-ag/meteor-component-library"
 
       - name: Run tests and update snapshots
         if: ${{ github.event_name == 'workflow_dispatch' }}
         run: |
           npx concurrently --kill-others --success first --names "SB,TEST"  --hide "SB" --prefix-colors "magenta,blue" \
           "http-server ./packages/component-library/storybook-static -a 127.0.0.1 --port 6006" \
-          "wait-on http://127.0.0.1:6006 && pnpx turbo run test:storybook --filter=@shopware-ag/meteor-component-library -- -u"
+          "wait-on http://127.0.0.1:6006 && pnpx turbo run test:storybook --force --filter=@shopware-ag/meteor-component-library -- -u"
 
       - name: Archive visual test diffs
         uses: actions/upload-artifact@v4

packages/component-library/.storybook/test-runner.ts

@@ -1,3 +1,5 @@
+import type { TestRunnerConfig } from "@storybook/test-runner";
+
 const path = require("path");
 const { toMatchImageSnapshot } = require("jest-image-snapshot");
 
@@ -51,4 +53,4 @@ module.exports = {
       customReceivedDir: customReceivedDir,
     });
   },
-};
+} satisfies TestRunnerConfig;

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

@@ -0,0 +1,42 @@
+import { render, screen } from "@testing-library/vue";
+import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
+import MtBanner from "./mt-banner.vue";
+
+describe("mt-banner", () => {
+  it("emits a close event when clicking on the close button", async () => {
+    // ARRANGE
+    const closeHandler = vi.fn();
+
+    render(MtBanner, {
+      props: { onClose: closeHandler, closable: true },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole("button", { name: /close/i }));
+
+    // ASSERT
+    expect(closeHandler).toHaveBeenCalledOnce();
+    expect(closeHandler).toHaveBeenCalledWith(undefined);
+  });
+
+  it("emits a close event with the bannerIndex when clicking on the close button", async () => {
+    // ARRANGE
+    const closeHandler = vi.fn();
+
+    render(MtBanner, {
+      props: {
+        onClose: closeHandler,
+        closable: true,
+        bannerIndex: "some-banner-index",
+      },
+    });
+
+    // ACT
+    await userEvent.click(screen.getByRole("button", { name: /close/i }));
+
+    // ASSERT
+    expect(closeHandler).toHaveBeenCalledOnce();
+    expect(closeHandler).toHaveBeenCalledWith("some-banner-index");
+  });
+});

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

@@ -3,7 +3,7 @@
     <slot name="customIcon">
       <mt-icon
         v-if="!hideIcon"
-        size="1.25rem"
+        size="var(--scale-size-20)"
         class="mt-banner__icon"
         :name="bannerIcon"
         decorative
@@ -65,6 +65,10 @@ const props = withDefaults(
   },
 );
 
+defineEmits<{
+  close: [bannerIndex?: string];
+}>();
+
 const bannerIcon = computed(() => {
   if (props.icon) return props.icon;
 
@@ -100,16 +104,19 @@ const bodyClasses = computed(() => ({
 
 <style scoped>
 .mt-banner {
-  --mt-banner-close-button-size: 2.5rem;
+  --mt-banner-close-button-size: var(--scale-size-40);
 
   border-width: 1px;
+  padding: var(--scale-size-24);
   border-style: solid;
   border-radius: var(--border-radius-xs);
-  position: relative;
-  margin: 0 auto 1.25rem;
+  margin: 0 auto var(--scale-size-20);
+  display: flex;
+  flex-direction: row;
+  gap: var(--scale-size-16);
 
   & ul {
-    padding: 0.5rem 0 0.5rem 1.25rem;
+    padding: var(--scale-size-8) 0 var(--scale-size-8) var(--scale-size-20);
   }
 }
 
@@ -122,48 +129,31 @@ const bodyClasses = computed(() => ({
 }
 
 .mt-banner__body {
-  padding: 1.5rem 3.75rem 1.5rem 1.5rem;
   font-family: var(--font-family-body);
   font-size: var(--font-size-xs);
   line-height: var(--font-line-height-xs);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: 0.25rem;
-}
-
-.mt-banner__body--icon {
-  padding: 1.5rem 3.75rem;
-}
-
-.mt-banner__body--closable {
-  padding-right: var(--mt-banner-close-button-size);
+  flex: 1;
+  gap: var(--scale-size-4);
 }
 
 .mt-banner__icon {
-  position: absolute;
-  display: block;
-  left: 1.625rem;
-  top: 1.75rem;
-  width: 1.25rem;
-  height: 1.25rem;
+  width: var(--scale-size-20);
+  height: var(--scale-size-20);
 }
 
 .mt-banner__close {
   width: var(--mt-banner-close-button-size);
   height: var(--mt-banner-close-button-size);
-  line-height: var(--mt-banner-close-button-size);
-  position: absolute;
-  display: block;
-  top: 0.75rem;
-  right: 0.75rem;
-  padding: 0;
-  margin: 0;
-  text-align: center;
-  background: none;
-  border: 0 none;
-  outline: none;
-  cursor: pointer;
+  border-radius: var(--border-radius-xs);
+  margin-top: calc(var(--scale-size-8) * -1);
+  margin-right: calc(var(--scale-size-8) * -1);
+
+  &:focus-visible {
+    outline: 2px solid var(--color-border-brand-selected);
+  }
 }
 
 .mt-banner--info {

packages/component-library/src/components/form/_internal/mt-base-field/mt-base-field.vue

@@ -25,7 +25,12 @@
         <slot name="label" />
       </label>
 
-      <mt-help-text v-if="helpText" class="mt-field__help-text" :text="helpText" />
+      <mt-help-text
+        v-if="helpText"
+        class="mt-field__help-text"
+        :text="helpText"
+        placement="right"
+      />
     </div>
 
     <div class="mt-block-field__block">

packages/component-library/src/components/form/mt-checkbox/mt-checkbox.interactive.stories.ts

@@ -94,12 +94,12 @@ export const VisualTestInherited: MtCheckboxStory = {
     inheritedValue: false,
     isInherited: true,
   },
-  play: async ({ canvasElement, args }) => {
-    const canvas = within(canvasElement);
+  play: async ({ args }) => {
+    const canvas = within(document.body);
 
     await userEvent.click(canvas.getByTestId("mt-inheritance-switch-icon"));
 
-    await waitUntil(() => document.querySelector(".mt-tooltip"));
+    waitUntil(() => document.querySelector(".tooltip"));
 
     await expect(args.inheritanceRemove).toHaveBeenCalledWith(undefined);
   },
@@ -144,15 +144,12 @@ export const VisualTestHelpText: MtCheckboxStory = {
     label: "Help text label",
     helpText: "Help text message",
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    expect((canvas.getByRole("checkbox") as HTMLInputElement).checked).toBe(false);
-    expect(canvas.getByTestId("mt-help-text__icon")).toBeDefined();
-
-    await userEvent.click(canvas.getByTestId("mt-help-text__icon"));
+  play: async () => {
+    const canvas = within(document.body);
+    await userEvent.tab();
+    await userEvent.tab();
 
-    await waitUntil(() => document.querySelector(".mt-tooltip"));
+    expect(canvas.getByRole("tooltip")).toBeInTheDocument();
   },
 };
 

packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue

@@ -285,6 +285,10 @@ export default defineComponent({
     & .mt-field__label {
       margin-bottom: 0;
       margin-left: var(--scale-size-4);
+
+      & .mt-help-text {
+        margin-left: var(--scale-size-8);
+      }
     }
 
     & .mt-field__checkbox {

packages/component-library/src/components/form/mt-colorpicker/mt-colorpicker.interactive.stories.ts

@@ -600,45 +600,10 @@ export const VisualTestColorpickerWithHelpText: MtColorpickerStory = {
   args: {
     helpText: "Text for helping you",
   },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const tooltip = canvas.getByRole("tooltip");
-
-    await userEvent.hover(tooltip);
-
-    // wait until tooltip gets rendered
-    await (() => {
-      return new Promise((resolve, reject) => {
-        const waitUntilElementLoad = (retryTime = 0) => {
-          // do not wait longer than 2.5 seconds
-          if (retryTime > 100) {
-            reject();
-          }
-
-          // check for tooltip
-          const result = document.querySelector('[aria-label="currently-opened-tooltip"]');
-
-          // retry selection when not found otherwise resolve it
-          if (!result) {
-            window.setTimeout(() => waitUntilElementLoad(retryTime + 1), 25);
-          } else {
-            resolve(true);
-          }
-        };
-
-        waitUntilElementLoad();
-      });
-    })();
-
-    const tooltipElement = within(
-      document.querySelector('[aria-label="currently-opened-tooltip"]')
-        ?.parentElement as HTMLElement,
-    );
-
-    const openedTooltip = tooltipElement.getByLabelText("currently-opened-tooltip");
+  play: async () => {
+    const canvas = within(document.body);
+    await userEvent.tab();
 
-    expect(openedTooltip).not.toEqual(null);
-    expect(openedTooltip.innerText).toEqual("Text for helping you");
+    expect(canvas.getByRole("tooltip")).toBeInTheDocument();
   },
 };

packages/component-library/src/components/form/mt-help-text/mt-help-text.spec.ts

@@ -0,0 +1,51 @@
+import userEvent from "@testing-library/user-event";
+import { render, screen } from "@testing-library/vue";
+import MtHelpText from "./mt-help-text.vue";
+import { flushPromises } from "@vue/test-utils";
+
+describe("mt-help-text", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useFakeTimers();
+  });
+
+  it("opens a tooltip when focusing the help text", async () => {
+    // ARRANGE
+    render(MtHelpText, {
+      props: { text: "Some text" },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.tab();
+
+    // ASSERT
+    expect(screen.getByRole("tooltip")).toBeVisible();
+  });
+
+  it("opens a tooltip when hovering the help text", async () => {
+    // ARRANGE
+    render(MtHelpText, {
+      props: { text: "Some text" },
+    });
+
+    const user = userEvent.setup({
+      advanceTimers: vi.advanceTimersByTime,
+    });
+
+    // ACT
+    await user.hover(screen.getByRole("button"));
+
+    vi.advanceTimersByTime(550);
+    await flushPromises();
+
+    // ASSERT
+    expect(screen.getByRole("tooltip")).toBeVisible();
+  });
+});