feat(OnyxBottomBar): Implement screenshot tests (#2402)

<!-- Is your PR related to an issue? Then please link it via the
"Relates to #" below. Else, remove it. -->

Relates to #2290 

- Implement screenshot tests
- Add example in the demo app

## Checklist

- [x] If a new component is added, at least one [Playwright screenshot
test](https://github.com/SchwarzIT/onyx/actions/workflows/playwright-screenshots.yml)
is added

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: MajaZarkova

apps/demo-app/src/views/HomeView.vue

@@ -5,6 +5,7 @@ import {
   DENSITIES,
   OnyxAvatar,
   OnyxBadge,
+  OnyxBottomBar,
   OnyxButton,
   OnyxCheckboxGroup,
   OnyxDatePicker,
@@ -321,6 +322,14 @@ const selectedDate = ref<DateValue>();
         <!-- Add new components alphabetically. -->
       </div>
     </div>
+    <template #footer>
+      <OnyxBottomBar>
+        <template #right>
+          <OnyxButton label="Button" mode="plain" color="neutral"></OnyxButton>
+          <OnyxButton label="Button"></OnyxButton>
+        </template>
+      </OnyxBottomBar>
+    </template>
   </OnyxPageLayout>
 </template>
 

packages/sit-onyx/playwright/snapshots/components/OnyxBottomBar/Bottom-Bar-edge-linux.png

@@ -0,0 +1,47 @@
+import { test } from "../../playwright/a11y";
+import { executeMatrixScreenshotTest } from "../../playwright/screenshots";
+import OnyxButton from "../OnyxButton/OnyxButton.vue";
+import OnyxBottomBar from "./OnyxBottomBar.vue";
+
+test.describe("Screenshot tests", () => {
+  executeMatrixScreenshotTest({
+    name: "Bottom Bar",
+    columns: ["default", "hidden-border"],
+    rows: ["right", "left", "left-and-right"],
+    component: (column, row) =>
+      row === "left-and-right" ? (
+        <OnyxBottomBar hideBorder={column === "hidden-border"}>
+          <template v-slot:left>
+            <OnyxButton label="Button"></OnyxButton>
+          </template>
+          <template v-slot:right>
+            <OnyxButton label="Button" mode="plain" color="neutral"></OnyxButton>
+            <OnyxButton label="Button"></OnyxButton>
+          </template>
+        </OnyxBottomBar>
+      ) : row === "right" ? (
+        <OnyxBottomBar hideBorder={column === "hidden-border"}>
+          <template v-slot:right>
+            <OnyxButton label="Button" mode="plain" color="neutral"></OnyxButton>
+            <OnyxButton label="Button"></OnyxButton>
+          </template>
+        </OnyxBottomBar>
+      ) : (
+        <OnyxBottomBar hideBorder={column === "hidden-border"}>
+          <template v-slot:left>
+            <OnyxButton label="Button" mode="plain" color="neutral"></OnyxButton>
+            <OnyxButton label="Button"></OnyxButton>
+          </template>
+        </OnyxBottomBar>
+      ),
+    hooks: {
+      beforeEach: async (component, page) => {
+        await component.evaluate((element) => {
+          element.style.padding = "5rem 0";
+          element.style.paddingRight = "25rem";
+        });
+        await page.setViewportSize({ width: 400, height: 100 });
+      },
+    },
+  });
+});

packages/sit-onyx/playwright/snapshots/components/OnyxBottomBar/Bottom-Bar-firefox-linux.png

@@ -43,7 +43,7 @@ const { densityClass } = useDensity(props);
 
 .onyx-bottom-bar {
   @include layers.component() {
-    position: fixed;
+    position: sticky;
     bottom: 0;
     width: 100%;
     margin-inline: var(--onyx-grid-margin-inline);