feat(OnyxNavItem): Implement OnyxNavItem

.changeset/little-clouds-share.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+Implement new OnyxNavItem component

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

@@ -1,7 +1,7 @@
 import type { Locator } from "@playwright/test";
 import { expect, test } from "../../playwright/a11y";
 import { executeMatrixScreenshotTest } from "../../playwright/screenshots";
-import OnyxListItem from "../OnyxListItem/OnyxListItem.vue";
+import OnyxNavItem from "../OnyxNavItem/future/OnyxNavItem.vue";
 import OnyxNavButton from "./OnyxNavButton.vue";
 
 test.describe("Screenshot tests", () => {
@@ -58,9 +58,9 @@ test.describe("Screenshot tests with nested children", () => {
     component: (column) => (
       <OnyxNavButton label="Item" href="#" active={column === "active"}>
         <template v-slot:children>
-          <OnyxListItem>Nested Item 1</OnyxListItem>
-          <OnyxListItem>Nested Item 2</OnyxListItem>
-          <OnyxListItem>Nested Item 3</OnyxListItem>
+          <OnyxNavItem>Nested Item 1</OnyxNavItem>
+          <OnyxNavItem>Nested Item 2</OnyxNavItem>
+          <OnyxNavItem>Nested Item 3</OnyxNavItem>
         </template>
       </OnyxNavButton>
     ),

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

@@ -2,7 +2,7 @@ import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import { h } from "vue";
 import OnyxNavButton from "./OnyxNavButton.vue";
-import OnyxListItem from "../OnyxListItem/OnyxListItem.vue";
+import OnyxNavItem from "../OnyxNavItem/future/OnyxNavItem.vue";
 import OnyxBadge from "../OnyxBadge/OnyxBadge.vue";
 
 /**
@@ -59,7 +59,10 @@ export const WithChildren: Story = {
   args: {
     ...Default.args,
     active: true,
-    children: () => nestedChildren.map(({ label }) => h(OnyxListItem, label)),
+    children: () =>
+      nestedChildren.map(({ label, active }) =>
+        h(OnyxNavItem, { "aria-selected": active }, [label]),
+      ),
   },
   decorators: [
     (story) => ({

packages/sit-onyx/src/components/OnyxNavItem/future/OnyxNavItem.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+const props = defineProps<{ active?: boolean }>();
+</script>
+<template>
+  <li
+    :class="{
+      'onyx-future-nav-item': true,
+      'onyx-future-nav-item--active': props.active,
+    }"
+  >
+    <slot></slot>
+  </li>
+</template>
+<style lang="scss">
+@use "../../../styles/mixins/layers";
+@use "../../../styles/mixins/density.scss";
+
+// TODO: Remove 'future' from className after officialy merging this component with current OnyxNavItem
+.onyx-future-nav-item {
+  @include density.compact {
+    --onyx-nav-item-padding: var(--onyx-spacing-4xs) var(--onyx-spacing-sm);
+  }
+  @include density.default {
+    --onyx-nav-item-padding: var(--onyx-spacing-2xs) var(--onyx-spacing-sm);
+  }
+  @include density.cozy {
+    --onyx-nav-item-padding: var(--onyx-spacing-sm) var(--onyx-spacing-sm);
+  }
+
+  @include layers.component() {
+    --onyx-nav-item-color: var(--onyx-color-text-icons-neutral-intense);
+    --onyx-nav-item-color-selected: var(--onyx-color-text-icons-primary-bold);
+    --onyx-nav-item-background-hover: var(--onyx-color-base-primary-100);
+    --onyx-nav-item-background-selected: var(--onyx-color-base-primary-200);
+
+    font-family: var(--onyx-font-family);
+    color: var(--onyx-nav-item-color);
+    padding: var(--onyx-nav-item-padding);
+    background-color: var(--onyx-color-base-background-blank);
+    font-weight: 400;
+    font-size: 1rem;
+    line-height: 1.5rem;
+
+    border: none;
+    width: 100%;
+    outline: none;
+
+    display: flex;
+    align-items: center;
+    gap: var(--onyx-spacing-sm);
+
+    &:not([aria-disabled="true"]) {
+      cursor: pointer;
+
+      &:hover,
+      &.onyx-future-nav-item--active {
+        background-color: var(--onyx-nav-item-background-hover);
+      }
+
+      &[aria-selected="true"] {
+        background-color: var(--onyx-nav-item-background-selected);
+
+        &:hover,
+        &.onyx-future-nav-item--active {
+          color: var(--onyx-nav-item-color-selected);
+        }
+      }
+    }
+
+    &[aria-disabled="true"] {
+      color: var(--onyx-color-text-icons-neutral-soft);
+    }
+  }
+}
+</style>