db-ux-design-system · nmerget · Jul 6, 2023 · Jun 20, 2023 · Jun 20, 2023 · Jun 21, 2023
diff --git a/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png b/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png
diff --git a/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png b/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png
diff --git a/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png b/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png
diff --git a/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png b/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png
diff --git a/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png b/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png
diff --git a/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png b/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png
diff --git a/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png b/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png
diff --git a/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png b/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png
diff --git a/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png b/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png
diff --git a/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png b/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png
diff --git a/...pec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-chromium-linux.png b/...pec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-chromium-linux.png
diff --git a/...sx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-chrome-linux.png b/...sx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-chrome-linux.png
diff --git a/...sx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-safari-linux.png b/...sx-snapshots/DBNavigationItem-should-match-screenshot-1-mobile-safari-linux.png
diff --git a/....spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-webkit-linux.png b/....spec.tsx-snapshots/DBNavigationItem-should-match-screenshot-1-webkit-linux.png
diff --git a/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png b/...-match-screenshot-for-tonality-regular-and-color-neutral-0-1-chromium-linux.png
diff --git a/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png b/...ld-match-screenshot-for-tonality-regular-and-color-neutral-0-1-webkit-linux.png
diff --git a/packages/components/overrides/angular/src/components/navigation-item/index.ts b/packages/components/overrides/angular/src/components/navigation-item/index.ts
@@ -0,0 +1 @@
+export { DBNavigationItem, DBNavigationItemModule } from './navigation-item';
diff --git a/packages/components/scripts/post-build/components.js b/packages/components/scripts/post-build/components.js
@@ -16,6 +16,10 @@
  * }]}
  */
 const getComponents = () => [
+	{
+		name: 'navigation-item'
+	},
+
 	{
 		name: 'select'
 	},

diff --git a/packages/components/src/components/button/model.ts b/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 = {};
 

diff --git a/packages/components/src/components/drawer/model.ts b/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;

diff --git a/packages/components/src/components/input/model.ts b/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 = {

diff --git a/packages/components/src/components/navigation-item/docs/Angular.md b/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>
+```
diff --git a/packages/components/src/components/navigation-item/docs/HTML.md b/packages/components/src/components/navigation-item/docs/HTML.md
@@ -0,0 +1,17 @@
+## 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">
+		<div class="db-navigation-item">
+			<button class="db-navigation-item-button">NavigationItem</button>
+		</div>
+	</a>
+</body>
+```
diff --git a/packages/components/src/components/navigation-item/docs/Migration.md b/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 🥳
diff --git a/packages/components/src/components/navigation-item/docs/React.md b/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;
+```
diff --git a/packages/components/src/components/navigation-item/docs/Vue.md b/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>
+```
diff --git a/packages/components/src/components/navigation-item/index.ts b/packages/components/src/components/navigation-item/index.ts
@@ -0,0 +1 @@
+export { default as DBNavigationItem } from './navigation-item';
diff --git a/packages/components/src/components/navigation-item/model.ts b/packages/components/src/components/navigation-item/model.ts
@@ -0,0 +1,47 @@
+import {
+	ClickEventProps,
+	ClickEventState,
+	GlobalProps,
+	GlobalState,
+	IconAfterProps,
+	IconProps,
+	IconState,
+	WidthProps
+} from '../../shared/model';
+
+export interface DBNavigationItemActionProps {
+	text?: string;
+}
+
+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;
+
+	/**
+	 * Use an icon button here for additional actions.
+	 */
+	action?: DBNavigationItemActionProps & IconProps & ClickEventProps;
+}
+
+export type DBNavigationItemProps = DBNavigationItemDefaultProps &
+	GlobalProps &
+	ClickEventProps &
+	IconProps &
+	IconAfterProps &
+	WidthProps;
+
+export interface DBNavigationItemDefaultState {
+	handleActionClick: (event: any) => void;
+}
+
+export type DBNavigationItemState = DBNavigationItemDefaultState &
+	ClickEventState &
+	GlobalState &
+	IconState;
diff --git a/packages/components/src/components/navigation-item/navigation-item-web-component.scss b/packages/components/src/components/navigation-item/navigation-item-web-component.scss
@@ -0,0 +1 @@
+@forward "navigation-item";
diff --git a/packages/components/src/components/navigation-item/navigation-item.lite.tsx b/packages/components/src/components/navigation-item/navigation-item.lite.tsx
@@ -0,0 +1,83 @@
+import { onMount, Show, useMetadata, useStore } from '@builder.io/mitosis';
+import { DBNavigationItemState, DBNavigationItemProps } from './model';
+import classNames from 'classnames';
+import { DBButton } from '../button';
+
+useMetadata({
+	isAttachedToShadowDom: true,
+	component: {
+		// MS Power Apps
+		includeIcon: false,
+		properties: []
+	}
+});
+
+export default function DBNavigationItem(props: DBNavigationItemProps) {
+	// This is used as forwardRef
+	let component: any;
+	// jscpd:ignore-start
+	const state = useStore<DBNavigationItemState>({
+		handleClick: (event: any) => {
+			if (props.onClick) {
+				props.onClick(event);
+			}
+		},
+		handleActionClick: (event: any) => {
+			event.stopPropagation();
+			if (props.action?.onClick) {
+				props.action.onClick(event);
+			}
+			event.preventDefault();
+		},
+		iconVisible: (icon?: string) => {
+			return Boolean(icon && icon !== '_' && icon !== 'none');
+		},
+		getClassNames: (...args: classNames.ArgumentArray) => {
+			return classNames(args);
+		}
+	});
+
+	onMount(() => {
+		if (props.stylePath) {
+			state.stylePath = props.stylePath;
+		}
+	});
+	// jscpd:ignore-end
+
+	return (
+		<div
+			class={state.getClassNames('db-navigation-item', props.className)}
+			data-width={props.width}>
+			<button
+				class="db-navigation-item-button"
+				ref={component}
+				data-icon={
+					state.iconVisible(props.icon) ? props.icon : undefined
+				}
+				data-icon-after={
+					state.iconVisible(props.iconAfter)
+						? props.iconAfter
+						: undefined
+				}
+				data-active={props.active}
+				data-width={props.width}
+				disabled={props.disabled}
+				onClick={(event) => state.handleClick(event)}>
+				<Show when={state.stylePath}>
+					<link rel="stylesheet" href={state.stylePath} />
+				</Show>
+				{props.children}
+			</button>
+			<Show when={props.action}>
+				<DBButton
+					noText
+					variant="text"
+					icon={props.action.icon}
+					title={props.action.text || props.action.icon}
+					onClick={(event) => state.handleActionClick(event)}>
+					{props.action.text || props.action.icon}
+				</DBButton>
+			</Show>
+		</div>
+	);
+}
diff --git a/packages/components/src/components/navigation-item/navigation-item.scss b/packages/components/src/components/navigation-item/navigation-item.scss
@@ -0,0 +1,51 @@
+@use "@db-ui/foundations/build/scss/variables" as *;
+@use "@db-ui/foundations/build/scss/variables.global" as *;
+@use "@db-ui/foundations/build/scss/helpers/component" as *;
+@use "@db-ui/foundations/build/scss/color/color-variants" as *;
+
+.db-navigation-item {
+	display: inline-flex;
+
+	&[data-width="full"] {
+		width: 100%;
+	}
+}
+
+.db-navigation-item-button {
+	@extend %default-interactive-component;
+	@extend %default-background-transition;
+	@extend %bg-transparent-interactive;
+	@extend %transparent-border;
+
+	border-radius: $default-card-border-radius;
+	padding: $db-spacing-fixed-xs $db-spacing-fixed-sm;
+	white-space: nowrap; // we don't want to break
+	display: inline-flex;
+	justify-content: center;
+	text-align: center;
+	align-items: center; // Centering the content vertically and horizontally
+
+	&::before {
+		margin-inline-end: $db-spacing-fixed-sm;
+	}
+
+	&::after {
+		margin-inline-start: $db-spacing-fixed-sm;
+	}
+
+	&[data-active="true"] {
+		font-weight: 700;
+	}
+
+	&[data-width="full"] {
+		width: 100%;
+
+		&::after {
+			margin-inline-start: auto;
+		}
+	}
+
+	&:disabled {
+		opacity: $default-opacity;
+	}
+}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { DBNavigationItem, DBNavigationItemModule } from './navigation-item';
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,10 @@ @@
      * }]}
      */
     const getComponents = () => [
+    	{
+    		name: 'navigation-item'
+    	},
     	{
     		name: 'select'
     	},
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as DBNavigationItem } from './navigation-item';