Merge branch 'main' into feat-1941/filter-action-button-gap

Author: ChristianBusshoff

.changeset/pre.json

@@ -268,6 +268,7 @@
     "poor-pillows-fail",
     "poor-tigers-camp",
     "popular-garlics-accept",
+    "pretty-schools-behave",
     "proud-bugs-compare",
     "proud-pianos-explode",
     "purple-goats-camp",

.changeset/pretty-schools-behave.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat: add new `OnyxNotificationDot` component

apps/demo-app/CHANGELOG.md

@@ -1,5 +1,12 @@
 # demo-app
 
+## 1.0.0-beta.171
+
+### Patch Changes
+
+- Updated dependencies [18bd03a]
+  - [email protected]
+
 ## 1.0.0-beta.170
 
 ### Patch Changes

apps/demo-app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "demo-app",
   "private": true,
-  "version": "1.0.0-beta.170",
+  "version": "1.0.0-beta.171",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -13,7 +13,7 @@
     "@vueuse/core": "^12.8.2",
     "pinia": "^3.0.1",
     "sit-onyx": "workspace:^",
-    "vue-i18n": "^11.1.1",
+    "vue-i18n": "^11.1.2",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {

apps/playground/CHANGELOG.md

@@ -1,5 +1,12 @@
 # playground
 
+## 1.0.0-beta.171
+
+### Patch Changes
+
+- Updated dependencies [18bd03a]
+  - [email protected]
+
 ## 1.0.0-beta.170
 
 ### Patch Changes

apps/playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "playground",
-  "version": "1.0.0-beta.170",
+  "version": "1.0.0-beta.171",
   "description": "Playground for the onyx Vue components",
   "type": "module",
   "author": "Schwarz IT KG",

package.json

@@ -22,9 +22,9 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.28.1",
-    "@eslint-community/eslint-utils": "^4.4.1",
+    "@eslint-community/eslint-utils": "^4.5.0",
     "@eslint/compat": "^1.2.7",
-    "@eslint/js": "^9.21.0",
+    "@eslint/js": "^9.22.0",
     "@fontsource-variable/source-code-pro": "^5.2.5",
     "@fontsource-variable/source-sans-3": "^5.2.5",
     "@microsoft/eslint-formatter-sarif": "^3.1.0",
@@ -37,14 +37,14 @@
     "@tsconfig/node22": "^22.0.0",
     "@types/eslint": "^9.6.1",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.13.9",
+    "@types/node": "^22.13.10",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vitest/coverage-v8": "^3.0.8",
-    "@vitest/eslint-plugin": "^1.1.36",
+    "@vitest/eslint-plugin": "^1.1.37",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/tsconfig": "~0.7.0",
-    "eslint": "^9.21.0",
+    "eslint": "^9.22.0",
     "eslint-plugin-compat": "^6.0.2",
     "eslint-plugin-playwright": "^2.2.0",
     "eslint-plugin-vue": "^10.0.0",
@@ -54,15 +54,15 @@
     "lint-staged": "^15.4.3",
     "prettier": "^3.5.3",
     "prettier-plugin-organize-imports": "^4.1.0",
-    "publint": "^0.3.8",
+    "publint": "^0.3.9",
     "rimraf": "^6.0.1",
     "simple-git-hooks": "^2.11.1",
     "storybook": "^8.6.4",
     "stylelint": "^16.15.0",
     "stylelint-no-unsupported-browser-features": "^8.0.4",
     "turbo": "^2.4.4",
     "typescript": "catalog:",
-    "typescript-eslint": "^8.26.0",
+    "typescript-eslint": "^8.26.1",
     "vite": "catalog:",
     "vitest": "^3.0.8",
     "vue-tsc": "^2.2.8"

packages/chartjs-plugin/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @sit-onyx/chartjs-plugin
 
+## 1.0.0-beta.171
+
+### Patch Changes
+
+- Updated dependencies [18bd03a]
+  - [email protected]
+
 ## 1.0.0-beta.170
 
 ### Patch Changes

packages/chartjs-plugin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/chartjs-plugin",
   "description": "A Chart.js plugin for the onyx design system created by Schwarz IT",
-  "version": "1.0.0-beta.170",
+  "version": "1.0.0-beta.171",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

packages/nuxt/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @sit-onyx/nuxt
 
+## 1.0.0-beta.172
+
+### Patch Changes
+
+- Updated dependencies [18bd03a]
+  - [email protected]
+
 ## 1.0.0-beta.171
 
 ### Patch Changes

packages/nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sit-onyx/nuxt",
-  "version": "1.0.0-beta.171",
+  "version": "1.0.0-beta.172",
   "description": "A Nuxt module to easily integrate onyx into Nuxt projects",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -34,19 +34,17 @@
     "test": "vitest",
     "test:coverage": "vitest run --coverage"
   },
-  "dependencies": {
-    "@nuxt/kit": "^3.15.4"
-  },
   "devDependencies": {
     "@nuxt/devtools": "^2.2.1",
+    "@nuxt/kit": "^3.16.0",
     "@nuxt/module-builder": "~0.8.4",
-    "@nuxt/schema": "^3.15.4",
-    "@nuxt/test-utils": "^3.17.1",
-    "@nuxtjs/i18n": "^9.2.1",
-    "nuxt": "^3.15.4",
+    "@nuxt/schema": "^3.16.0",
+    "@nuxt/test-utils": "^3.17.2",
+    "@nuxtjs/i18n": "^9.3.1",
+    "nuxt": "^3.16.0",
     "sit-onyx": "workspace:^",
     "typescript": "catalog:",
-    "vue-i18n": "^11.1.1"
+    "vue-i18n": "^11.1.2"
   },
   "peerDependencies": {
     "sit-onyx": "workspace:^"

packages/sit-onyx/CHANGELOG.md

@@ -1,5 +1,11 @@
 # sit-onyx
 
+## 1.0.0-beta.171
+
+### Minor Changes
+
+- 18bd03a: feat: add new `OnyxNotificationDot` component
+
 ## 1.0.0-beta.170
 
 ### Patch Changes

packages/sit-onyx/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sit-onyx",
   "description": "A design system and Vue.js component library created by Schwarz IT",
-  "version": "1.0.0-beta.170",
+  "version": "1.0.0-beta.171",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -64,7 +64,7 @@
     "storybook-dark-mode": "^4.0.2",
     "vue": "catalog:",
     "vue-component-type-helpers": "^2.2.8",
-    "vue-i18n": "^11.1.1",
+    "vue-i18n": "^11.1.2",
     "vue-router": "^4.5.0"
   }
 }

packages/sit-onyx/playwright/snapshots/components/OnyxNotificationDot/Notification-dot-edge-linux.png

@@ -12,10 +12,15 @@ const meta: Meta<typeof OnyxMiniSearch> = {
 export default meta;
 type Story = StoryObj<typeof OnyxMiniSearch>;
 
-export const Default = { args: {} } satisfies Story;
+export const Default = {
+  args: {
+    label: "Search",
+  },
+} satisfies Story;
 
 export const WithValue = {
   args: {
+    ...Default.args,
     modelValue: "Test value",
   },
 } satisfies Story;

packages/sit-onyx/playwright/snapshots/components/OnyxNotificationDot/Notification-dot-firefox-linux.png

@@ -0,0 +1,35 @@
+import { test } from "../../playwright/a11y";
+import { executeMatrixScreenshotTest, mockPlaywrightIcon } from "../../playwright/screenshots";
+import { ONYX_COLORS } from "../../types";
+import OnyxIconButton from "../OnyxIconButton/OnyxIconButton.vue";
+import OnyxNotificationDot from "./OnyxNotificationDot.vue";
+
+test.describe("Screenshot tests", () => {
+  executeMatrixScreenshotTest({
+    name: "Notification dot",
+    columns: ["default", "icon-button", "hidden"],
+    rows: ONYX_COLORS,
+    component: (column, row) => (
+      <OnyxNotificationDot color={row} hidden={column === "hidden"}>
+        {column === "icon-button" ? (
+          <OnyxIconButton icon={mockPlaywrightIcon} label="Label" color="neutral" />
+        ) : (
+          <div
+            style={{
+              height: "1.5rem",
+              width: "1.5rem",
+              border: "1px solid var(--onyx-color-component-border-neutral)",
+            }}
+          ></div>
+        )}
+      </OnyxNotificationDot>
+    ),
+    hooks: {
+      beforeEach: async (component, page, column) => {
+        if (column === "icon-button") {
+          await component.getByRole("button", { name: "Label" }).hover();
+        }
+      },
+    },
+  });
+});

packages/sit-onyx/playwright/snapshots/components/OnyxNotificationDot/Notification-dot-webkit-linux.png

@@ -0,0 +1,25 @@
+import bell from "@sit-onyx/icons/bell.svg?raw";
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { h } from "vue";
+import { textColorDecorator } from "../../utils/storybook";
+import OnyxIconButton from "../OnyxIconButton/OnyxIconButton.vue";
+import OnyxNotificationDot from "./OnyxNotificationDot.vue";
+
+const meta: Meta<typeof OnyxNotificationDot> = {
+  title: "Support/NotificationDot",
+  component: OnyxNotificationDot,
+  tags: ["new:component"],
+  argTypes: {
+    default: { control: { disable: true } },
+  },
+  decorators: [textColorDecorator],
+};
+
+export default meta;
+type Story = StoryObj<typeof OnyxNotificationDot>;
+
+export const Default = {
+  args: {
+    default: () => h(OnyxIconButton, { icon: bell, label: "Notifications", color: "neutral" }),
+  },
+} satisfies Story;

packages/sit-onyx/src/components/OnyxMiniSearch/OnyxMiniSearch.stories.ts

@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import OnyxBadge from "../OnyxBadge/OnyxBadge.vue";
+import type { OnyxNotificationDotProps } from "./types";
+
+const props = withDefaults(defineProps<OnyxNotificationDotProps>(), {
+  color: "warning",
+  hidden: false,
+});
+
+defineSlots<{
+  /**
+   * Main content where the dot will be positioned in relation to.
+   */
+  default(): unknown;
+}>();
+</script>
+
+<template>
+  <div class="onyx-component onyx-notification-dot">
+    <slot></slot>
+    <OnyxBadge v-if="!props.hidden" class="onyx-notification-dot__badge" :color="props.color" dot />
+  </div>
+</template>
+
+<style lang="scss">
+@use "../../styles/mixins/layers.scss";
+
+.onyx-notification-dot {
+  @include layers.component() {
+    --onyx-notification-dot-position: calc(
+      var(--onyx-notification-dot-offset, 0rem) - var(--onyx-density-3xs)
+    );
+    position: relative;
+    width: max-content;
+    max-width: 100%;
+
+    &__badge {
+      position: absolute;
+      top: var(--onyx-notification-dot-position);
+      right: var(--onyx-notification-dot-position);
+    }
+
+    &:has(> .onyx-icon-button) {
+      // density-xs = icon button padding
+      --onyx-notification-dot-offset: var(--onyx-density-xs);
+    }
+  }
+}
+</style>

packages/sit-onyx/src/components/OnyxNotificationDot/OnyxNotificationDot.ct.tsx

@@ -0,0 +1,12 @@
+import type { OnyxBadgeProps } from "../OnyxBadge/types";
+
+export type OnyxNotificationDotProps = {
+  /**
+   * If `true`, the dot will be hidden.
+   */
+  hidden?: boolean;
+  /**
+   * Dot color.
+   */
+  color?: OnyxBadgeProps["color"];
+};

packages/sit-onyx/src/components/OnyxNotificationDot/OnyxNotificationDot.stories.ts

@@ -104,6 +104,9 @@ export * from "./components/OnyxNavBar/modules";
 export { default as OnyxNavBar } from "./components/OnyxNavBar/OnyxNavBar.vue";
 export * from "./components/OnyxNavBar/types";
 
+export { default as OnyxNotificationDot } from "./components/OnyxNotificationDot/OnyxNotificationDot.vue";
+export * from "./components/OnyxNotificationDot/types";
+
 export { default as OnyxPageLayout } from "./components/OnyxPageLayout/OnyxPageLayout.vue";
 export * from "./components/OnyxPageLayout/types";
 

packages/sit-onyx/src/components/OnyxNotificationDot/OnyxNotificationDot.vue

@@ -1,5 +1,12 @@
 # @sit-onyx/vitepress-theme
 
+## 1.0.0-beta.172
+
+### Patch Changes
+
+- Updated dependencies [18bd03a]
+  - [email protected]
+
 ## 1.0.0-beta.171
 
 ### Patch Changes

packages/sit-onyx/src/components/OnyxNotificationDot/types.ts

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/vitepress-theme",
   "description": "VitePress theme that uses the onyx design system",
-  "version": "1.0.0-beta.171",
+  "version": "1.0.0-beta.172",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",