feat: add navigation-item component

.gitignore

@@ -48,3 +48,5 @@ output/power-apps
 showcases/patternhub/public/iframe-resizer/*
 
 /showcases/**/test-results/
+
+/__snapshots__/**/*-win32.png

packages/components/overrides/angular/src/components/navigation-item/index.ts

@@ -0,0 +1 @@
+export { DBNavigationItem, DBNavigationItemModule } from './navigation-item';

packages/components/scripts/post-build/components.js

@@ -16,6 +16,10 @@
  * }]}
  */
 const getComponents = () => [
+	{
+		name: 'navigation-item'
+	},
+
 	{
 		name: 'select'
 	},
@@ -29,12 +33,6 @@ const getComponents = () => [
 					to: 'const dialogRef = useRef<HTMLDialogElement>(component);'
 				}
 			],
-			vue: [
-				{
-					from: 'immediate: true,',
-					to: 'immediate: true,\nflush: "post"'
-				}
-			],
 			webComponents: [{ from: '__prev.find', to: '!!__prev.find' }]
 		}
 	},
@@ -48,14 +46,6 @@ const getComponents = () => [
 
 	{
 		name: 'checkbox',
-		overwrites: {
-			vue: [
-				{
-					from: 'immediate: true,',
-					to: 'immediate: true,\nflush: "post"'
-				}
-			]
-		},
 		config: {
 			vue: {
 				vModel: [{ modelValue: 'checked', binding: ':checked' }]
@@ -68,14 +58,6 @@ const getComponents = () => [
 
 	{
 		name: 'radio',
-		overwrites: {
-			vue: [
-				{
-					from: 'immediate: true,',
-					to: 'immediate: true,\nflush: "post"'
-				}
-			]
-		},
 		config: {
 			vue: {
 				vModel: [{ modelValue: 'checked', binding: ':checked' }]

packages/components/scripts/post-build/vue.js

@@ -93,7 +93,17 @@ module.exports = (tmp) => {
 				});
 			}
 
-			runReplacements([], component, 'vue', vueFile);
+			runReplacements(
+				[
+					{
+						from: 'immediate: true,',
+						to: 'immediate: true,\nflush: "post"'
+					}
+				],
+				component,
+				'vue',
+				vueFile
+			);
 		} catch (error) {
 			console.error('Error occurred:', error);
 		}

packages/components/src/components/brand/brand.scss

@@ -19,6 +19,7 @@
 }
 
 .db-logo {
+	max-width: none;
 	height: $db-sizing-sm;
 	@media screen and (min-width: $db-screens-m) {
 		height: $db-sizing-md;

packages/components/src/components/button/model.ts

@@ -4,7 +4,8 @@ import {
 	GlobalProps,
 	GlobalState,
 	IconProps,
-	IconState
+	IconState,
+	WidthProps
 } from '../../shared/model';
 
 // TODO: 👇 Find a way to make react-docgen work without duplicating the types below
@@ -68,11 +69,6 @@ export type DBButtonDefaultProps = {
 	 */
 	size?: 'small';
 
-	/**
-	 * Width of the button. Auto width based on text size, full width based on parent elements width.
-	 */
-	width?: 'full' | 'auto';
-
 	/**
 	 * Variant of the button. Use only 1 primary button on a page as CTA otherwise use one of the adaptive buttons.
 	 */
@@ -82,7 +78,8 @@ export type DBButtonDefaultProps = {
 export type DBButtonProps = DBButtonDefaultProps &
 	GlobalProps &
 	ClickEventProps &
-	IconProps;
+	IconProps &
+	WidthProps;
 
 export type DBButtonDefaultState = {};
 

packages/components/src/components/checkbox/model.ts

@@ -10,7 +10,7 @@ import {
 	FormProps,
 	FormState,
 	FormCheckProps,
-	FormCheckState
+	InitializedState
 } from '../../shared/model';
 
 export interface DBCheckboxDefaultProps {
@@ -35,12 +35,12 @@ export type DBCheckboxProps = DBCheckboxDefaultProps &
 	FormCheckProps;
 
 export type DBCheckboxDefaultState = {
-	_indeterminate: boolean;
+	_indeterminate?: boolean;
 };
 
 export type DBCheckboxState = DBCheckboxDefaultState &
 	GlobalState &
 	ChangeEventState &
 	FocusEventState &
 	FormState &
-	FormCheckState;
+	InitializedState;

packages/components/src/components/drawer/model.ts

@@ -3,7 +3,8 @@ import {
 	CloseEventState,
 	GlobalProps,
 	GlobalState,
-	InnerCloseButtonProps
+	InnerCloseButtonProps,
+	WidthProps
 } from '../../shared/model';
 
 export interface DBDrawerDefaultProps {
@@ -34,11 +35,7 @@ export interface DBDrawerDefaultProps {
 	 * React specific to change the header of the drawer.
 	 */
 	slotDrawerHeader?: any;
-	/**
-	 * The width attribute disables the max-width of the drawer and overlays over the entire screen.
-	 * Default max-width is: calc(100% - $db-spacing-fixed-xl), but you can overwrite it with --db-drawer-max-width.
-	 */
-	width?: 'full';
+
 	/**
 	 * The withCloseButton attribute shows/hides the default close button.
 	 */
@@ -48,7 +45,8 @@ export interface DBDrawerDefaultProps {
 export type DBDrawerProps = DBDrawerDefaultProps &
 	GlobalProps &
 	CloseEventProps &
-	InnerCloseButtonProps;
+	InnerCloseButtonProps &
+	WidthProps;
 
 export interface DBDrawerDefaultState {
 	handleDialogOpen: () => void;

packages/components/src/components/header/header.scss

@@ -13,8 +13,8 @@
 	/* Mobile header should always be 56px */
 	min-height: to-rem(56);
 
-	padding-left: $db-spacing-fixed-md;
-	padding-right: $db-spacing-fixed-md;
+	gap: $db-spacing-fixed-md;
+	padding-inline: $db-spacing-fixed-md;
 
 	.db-link {
 		display: inline-block;
@@ -39,10 +39,6 @@
 
 		.desktop-navigation {
 			display: inherit;
-			position: absolute;
-			top: 50%;
-			left: 50%;
-			transform: translate(-50%, -50%);
 		}
 	}
 }

packages/components/src/components/input/model.ts

@@ -13,14 +13,14 @@ import {
 	IconProps,
 	IconState,
 	DefaultVariantProps,
-	KeyValueType
+	KeyValueType,
+	IconAfterProps
 } from '../../shared/model';
 
 export type DBInputDefaultProps = {
 	dataList?: KeyValueType[];
 	dataListId?: string;
 	description?: string;
-	iconAfter?: string;
 	type?:
 		| 'text'
 		| 'search'
@@ -45,6 +45,7 @@ export type DBInputProps = DBInputDefaultProps &
 	ValidEventProps &
 	FormProps &
 	IconProps &
+	IconAfterProps &
 	DefaultVariantProps;
 
 export type DBInputDefaultState = {

packages/components/src/components/navigation-item/docs/Angular.md

@@ -0,0 +1,26 @@
+## Angular
+
+For general installation and configuration look at the [ngx-components](https://www.npmjs.com/package/@db-ui/ngx-components) package.
+
+### Load component
+
+```ts app.module.ts
+//app.module.ts
+import { DBNavigationItemModule } from '@db-ui/ngx-components';
+
+@NgModule({
+  ...
+  imports: [..., DBNavigationItemModule],
+  ...
+})
+
+```
+
+### Use component
+
+```html app.component.html
+<!-- app.component.html -->
+<a routerLink="mypath">
+	<db-navigation-item>NavigationItem</db-navigation-item>
+</a>
+```

packages/components/src/components/navigation-item/docs/HTML.md

@@ -0,0 +1,20 @@
+## HTML
+
+For general installation and configuration look at the [components](https://www.npmjs.com/package/@db-ui/components) package.
+
+### Use component
+
+```html index.html
+<!-- index.html -->
+...
+<body>
+	<a href="mypath">
+		<li aria-haspopup="false" class="db-navigation-item">
+			NavigationItem
+
+			<!-- If you want to use it as main-naivgation with pulse-->
+			<div class="active-indicator" />
+		</li>
+	</a>
+</body>
+```

packages/components/src/components/navigation-item/docs/Migration.md

@@ -0,0 +1,8 @@
+## General
+
+> **Note**
+> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ui/components).
+
+## DB UI Core ➡ DB UI Components
+
+New Component 🥳

packages/components/src/components/navigation-item/docs/React.md

@@ -0,0 +1,19 @@
+## React
+
+For general installation and configuration look at the [react-components](https://www.npmjs.com/package/@db-ui/react-components) package.
+
+### Use component
+
+```tsx App.tsx
+// App.tsx
+import { Link } from "react-router-dom";
+import { DBNavigationItem } from "@db-ui/react-components";
+
+const App = () => (
+	<Link to="mypath">
+		<DBNavigationItem>NavigationItem</DBNavigationItem>
+	</Link>
+);
+
+export default App;
+```

packages/components/src/components/navigation-item/docs/Vue.md

@@ -0,0 +1,18 @@
+## Vue
+
+For general installation and configuration look at the [v-components](https://www.npmjs.com/package/@db-ui/v-components) package.
+
+### Use component
+
+```vue App.vue
+<!-- App.vue -->
+<script>
+import { DBNavigationItem } from "@db-ui/v-components";
+</script>
+
+<template>
+	<router-link to="mypath">
+		<DBNavigationItem>NavigationItem</DBNavigationItem>
+	</router-link>
+</template>
+```

packages/components/src/components/navigation-item/index.ts

@@ -0,0 +1 @@
+export { default as DBNavigationItem } from './navigation-item';

packages/components/src/components/navigation-item/model.ts

@@ -0,0 +1,48 @@
+import {
+	ClickEventProps,
+	ClickEventState,
+	GlobalProps,
+	GlobalState,
+	IconAfterProps,
+	IconProps,
+	IconState,
+	InitializedState,
+	WidthProps
+} from '../../shared/model';
+
+export interface DBNavigationItemDefaultProps {
+	/**
+	 * Indicator for active navigation item (bold font).
+	 */
+	active?: boolean;
+
+	/**
+	 * The disabled attribute can be set to [keep a user from clicking on the item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled).
+	 */
+	disabled?: boolean;
+
+	/**
+	 * React-specific property to pass in a slot for sub-navigation
+	 */
+
+	slotSubNavigation?: any;
+}
+
+export type DBNavigationItemProps = DBNavigationItemDefaultProps &
+	GlobalProps &
+	ClickEventProps &
+	IconProps &
+	IconAfterProps &
+	WidthProps;
+
+export interface DBNavigationItemDefaultState {
+	hasAreaPopup: boolean;
+	subNavigationId: string;
+	hideSubNavigation?: boolean;
+}
+
+export type DBNavigationItemState = DBNavigationItemDefaultState &
+	ClickEventState &
+	GlobalState &
+	IconState &
+	InitializedState;

packages/components/src/components/navigation-item/navigation-item-web-component.scss

@@ -0,0 +1 @@
+@forward "navigation-item";