feat: add main-navigation

.jscpd.json

@@ -40,6 +40,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/sub-navigation/index.ts

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

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

@@ -16,6 +16,14 @@
  * }]}
  */
 const getComponents = () => [
+	{
+		name: 'sub-navigation'
+	},
+
+	{
+		name: 'main-navigation'
+	},
+
 	{
 		name: 'navigation-item'
 	},
@@ -33,12 +41,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' }]
 		}
 	},
@@ -52,14 +54,6 @@ const getComponents = () => [
 
 	{
 		name: 'checkbox',
-		overwrites: {
-			vue: [
-				{
-					from: 'immediate: true,',
-					to: 'immediate: true,\nflush: "post"'
-				}
-			]
-		},
 		config: {
 			vue: {
 				vModel: [{ modelValue: 'checked', binding: ':checked' }]
@@ -69,14 +63,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

@@ -44,7 +44,6 @@ const updateVModelBindings = (input, bindings) => {
 	return fileContent
 		.split('\n')
 		.map((line) => {
-
 			return line.replace('// VUE:', '');
 		})
 		.join('\n');
@@ -99,7 +98,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/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/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/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";

packages/components/src/components/main-navigation/main-navigation.lite.tsx

@@ -0,0 +1,62 @@
+import {
+	onMount,
+	onUpdate,
+	Show,
+	useMetadata,
+	useStore
+} from '@builder.io/mitosis';
+import { DBMainNavigationState, DBMainNavigationProps } from './model';
+import classNames from 'classnames';
+import { setMainMenuToFirstListElement, uuid } from '../../utils';
+
+useMetadata({
+	isAttachedToShadowDom: true,
+	component: {
+		// MS Power Apps
+		includeIcon: false,
+		properties: []
+	}
+});
+
+export default function DBMainNavigation(props: DBMainNavigationProps) {
+	// This is used as forwardRef
+	let component: any;
+	// jscpd:ignore-start
+	const state = useStore<DBMainNavigationState>({
+		initialized: false,
+		mainNavigationId: 'main-navigation-' + uuid(),
+		getClassNames: (...args: classNames.ArgumentArray) => {
+			return classNames(args);
+		}
+	});
+
+	onMount(() => {
+		state.initialized = true;
+		if (props.stylePath) {
+			state.stylePath = props.stylePath;
+		}
+	});
+
+	onUpdate(() => {
+		if (state.initialized && document && state.mainNavigationId) {
+			const menuElement = document?.getElementById(
+				state.mainNavigationId
+			) as HTMLMenuElement;
+			if (menuElement) {
+				setMainMenuToFirstListElement(menuElement);
+			}
+		}
+	}, [state.initialized]);
+	// jscpd:ignore-end
+
+	return (
+		<nav
+			ref={component}
+			class={state.getClassNames('db-main-navigation', props.className)}>
+			<Show when={state.stylePath}>
+				<link rel="stylesheet" href={state.stylePath} />
+			</Show>
+			<menu id={state.mainNavigationId}>{props.children}</menu>
+		</nav>
+	);
+}

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

@@ -0,0 +1,11 @@
+@use "@db-ui/foundations/build/scss/variables" as *;
+@use "@db-ui/foundations/build/scss/variables.global" as *;
+
+.db-main-navigation {
+	& > menu {
+		display: flex;
+		padding: 0;
+		margin: 0;
+		gap: $db-spacing-fixed-sm;
+	}
+}

packages/components/src/components/main-navigation/main-navigation.spec.tsx

@@ -0,0 +1,41 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import AxeBuilder from '@axe-core/playwright';
+
+import { DBMainNavigation } from './index';
+// @ts-ignore - vue can only find it with .ts as file ending
+import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
+import { DBNavigationItem } from '../navigation-item';
+
+const comp = (
+	<DBMainNavigation>
+		<DBNavigationItem>Test1</DBNavigationItem>
+		<DBNavigationItem>Test2</DBNavigationItem>
+		<DBNavigationItem>Test3</DBNavigationItem>
+	</DBMainNavigation>
+);
+
+const testComponent = () => {
+	test('should match screenshot', async ({ mount }) => {
+		const component = await mount(comp);
+		await expect(component).toHaveScreenshot();
+	});
+};
+
+test.describe('DBMainNavigation', () => {
+	test.use({ viewport: DEFAULT_VIEWPORT });
+	testComponent();
+});
+
+test.describe('DBMainNavigation component A11y', () => {
+	test('DBMainNavigation should not have any automatically detectable accessibility issues', async ({
+		page,
+		mount
+	}) => {
+		await mount(comp);
+		const accessibilityScanResults = await new AxeBuilder({ page })
+			.include('.db-main-navigation')
+			.analyze();
+
+		expect(accessibilityScanResults.violations).toEqual([]);
+	});
+});

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

@@ -0,0 +1,13 @@
+import { GlobalProps, GlobalState, InitializedState } from '../../shared/model';
+
+export interface DBMainNavigationDefaultProps {}
+
+export type DBMainNavigationProps = DBMainNavigationDefaultProps & GlobalProps;
+
+export interface DBMainNavigationDefaultState {
+	mainNavigationId: string;
+}
+
+export type DBMainNavigationState = DBMainNavigationDefaultState &
+	GlobalState &
+	InitializedState;