Test mobile navigation

.jscpd.json

@@ -41,6 +41,7 @@
 		"packages/components/src/components/**/*.spec.tsx",
 		"packages/components/src/components/tag/tag.spec.tsx",
 		"**/**config.ts",
+		"**/navigation-items.ts",
 		"packages/foundations/assets/icons/functional/fonts/sources/*.json"
 	],
 	"absolute": true

build-power-apps/DBUI/DBUI.cdsproj

@@ -44,6 +44,10 @@
   </ItemGroup>
 
   <ItemGroup>
+<ProjectReference Include="..\sub-navigation\DBSubNavigation.pcfproj" />
+
+<ProjectReference Include="..\main-navigation\DBMainNavigation.pcfproj" />
+
     <ProjectReference Include="..\button\DBButton.pcfproj" />
     <ProjectReference Include="..\icon\DBIcon.pcfproj" />
     <ProjectReference Include="..\input\DBInput.pcfproj" />

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

@@ -0,0 +1 @@
+export { DBMainNavigation, DBMainNavigationModule } from './main-navigation';

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

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

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

@@ -0,0 +1 @@
+export { DBSubNavigation, DBSubNavigationModule } from './sub-navigation';

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

@@ -17,6 +17,14 @@
  * }]}
  */
 const getComponents = () => [
+	{
+		name: 'main-navigation'
+	},
+
+	{
+		name: 'navigation-item'
+	},
+
 	{
 		name: 'select'
 	},
@@ -29,12 +37,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 +50,6 @@ const getComponents = () => [
 
 	{
 		name: 'checkbox',
-		overwrites: {
-			vue: [
-				{
-					from: 'immediate: true,',
-					to: 'immediate: true,\nflush: "post"'
-				}
-			]
-		},
 		config: {
 			vue: {
 				vModel: [{ modelValue: 'checked', binding: ':checked' }]
@@ -68,14 +62,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/react.js

@@ -27,6 +27,14 @@ module.exports = (tmp) => {
 				{
 					from: `checked={props.checked}`,
 					to: `defaultChecked={props.checked}`
+				},
+				{
+					from: 'if (ref.current)',
+					to: 'if (ref?.current)'
+				},
+				{
+					from: '[ref.current]',
+					to: '[ref]'
 				}
 			];
 

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/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

@@ -1,6 +1,7 @@
 @use "@db-ui/foundations/build/scss/variables" as *;
 @use "@db-ui/foundations/build/scss/variables.global" as *;
 @use "@db-ui/foundations/build/scss/helpers/functions" as *;
+@use "@db-ui/foundations/build/scss/helpers/component" as *;
 @use "@db-ui/foundations/build/scss/tonality" as *;
 
 .db-header {
@@ -11,6 +12,8 @@
 	margin-bottom: $db-spacing-fixed-2xs;
 	position: relative;
 
+	min-height: $default-mobile-header-height;
+
 	.db-link {
 		display: inline-block;
 	}
@@ -24,6 +27,10 @@
 	gap: $db-spacing-fixed-xs;
 	width: 100%;
 	align-items: center;
+
+	@media screen and (min-width: $db-screens-m) {
+		padding: $db-spacing-fixed-md;
+	}
 }
 
 .db-header-meta-navigation {
@@ -37,7 +44,7 @@
 
 	padding: $db-spacing-fixed-md;
 
-	@media screen and (min-width: $db-screens-s) {
+	@media screen and (min-width: $db-screens-m) {
 		padding: $db-spacing-fixed-xs $db-spacing-fixed-md;
 		margin: 0;
 		flex-direction: row;
@@ -65,7 +72,7 @@
 }
 
 .db-header-action-container:has(> .db-header-action-bar:empty) {
-	@media screen and (min-width: $db-screens-s) {
+	@media screen and (min-width: $db-screens-m) {
 		display: none;
 	}
 }
@@ -82,7 +89,7 @@
 }
 
 .db-header-action-bar {
-	@media screen and (max-width: $db-screens-s) {
+	@media screen and (max-width: $db-screens-m) {
 		@include divider("top");
 		flex: 0 1 auto;
 		flex-grow: 0;
@@ -92,7 +99,7 @@
 }
 
 .db-header-drawer-navigation {
-	@media screen and (max-width: $db-screens-s) {
+	@media screen and (max-width: $db-screens-m) {
 		display: flex;
 		flex-direction: column;
 		flex: 1 1 auto;
@@ -112,7 +119,7 @@
 	gap: $db-spacing-fixed-sm;
 	padding-inline: $db-spacing-fixed-md;
 
-	@media screen and (min-width: $db-screens-s) {
+	@media screen and (min-width: $db-screens-m) {
 		gap: $db-spacing-fixed-xs;
 		padding: 0;
 	}
@@ -133,13 +140,13 @@
 }
 
 .db-header-hide-on-mobile {
-	@media screen and (max-width: $db-screens-s) {
+	@media screen and (max-width: $db-screens-m) {
 		display: none;
 	}
 }
 
 .db-header-hide-on-desktop {
-	@media screen and (min-width: $db-screens-s) {
+	@media screen and (min-width: $db-screens-m) {
 		display: none;
 	}
 }

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/main-navigation/docs/Angular.md

@@ -0,0 +1,24 @@
+## 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 { DBMainNavigationModule } from '@db-ui/ngx-components';
+
+@NgModule({
+  ...
+  imports: [..., DBMainNavigationModule],
+  ...
+})
+
+```
+
+### Use component
+
+```html app.component.html
+<!-- app.component.html -->
+<db-main-navigation>MainNavigation</db-main-navigation>
+```

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

@@ -0,0 +1,13 @@
+## 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>
+	<div class="db-main-navigation">MainNavigation</div>
+</body>
+```

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

@@ -0,0 +1,14 @@
+## 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 { DBMainNavigation } from "@db-ui/react-components";
+
+const App = () => <DBMainNavigation>MainNavigation</DBMainNavigation>;
+
+export default App;
+```

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

@@ -0,0 +1,16 @@
+## 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 { DBMainNavigation } from "@db-ui/v-components";
+</script>
+
+<template>
+	<DBMainNavigation>MainNavigation</DBMainNavigation>
+</template>
+```

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

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

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

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