Merge branch 'main' of github.com:db-ui/mono into feat-color-palette

# Conflicts:
#	package-lock.json
#	showcases/patternhub/public/assets/images/db_logo.svg

output/angular/package.json

@@ -17,9 +17,9 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "17.3.3",
-    "@angular/common": "17.3.3",
+    "@angular/common": "17.3.4",
     "ng-packagr": "17.3.0",
-    "typescript": "^5.4.4"
+    "typescript": "^5.4.5"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

output/vue/package.json

@@ -44,9 +44,9 @@
     "@playwright/experimental-ct-vue": "1.42.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "sass": "^1.74.1",
-    "typescript": "^5.4.4",
+    "typescript": "^5.4.5",
     "vite": "^5.2.8",
-    "vue-tsc": "^2.0.11"
+    "vue-tsc": "^2.0.12"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",

package.json

@@ -72,7 +72,7 @@
     "stylelint-config-sass-guidelines": "9.0.1",
     "stylelint-use-logical": "^2.1.2",
     "tslib": "^2.6.2",
-    "typescript": "^5.4.4",
+    "typescript": "^5.4.5",
     "validate-branch-name": "^1.3.0",
     "xo": "^0.58.0"
   },

packages/components/src/components/accordion/docs/Angular.md

@@ -6,12 +6,12 @@ For general installation and configuration look at the [ngx-components](https://
 
 ```ts app.component.ts
 // app.component.ts
-import { DBAccordion } from '@db-ui/ngx-components';
+import { DBAccordion, DBAccordionItem } from '@db-ui/ngx-components';
 
 @Component({
   // ...
   standalone: true,
-  imports: [..., DBAccordion],
+  imports: [..., DBAccordion, DBAccordionItem],
   // ...
 })
 ```

packages/components/src/components/accordion/docs/React.md

@@ -6,7 +6,7 @@ For general installation and configuration look at the [react-components](https:
 
 ```tsx App.tsx
 // App.tsx
-import { DBAccordion } from "@db-ui/react-components";
+import { DBAccordion, DBAccordionItem } from "@db-ui/react-components";
 
 const App = () => (
 	<DBAccordion>

packages/components/src/components/accordion/docs/Vue.md

@@ -7,7 +7,7 @@ For general installation and configuration look at the [v-components](https://ww
 ```vue App.vue
 <!-- App.vue -->
 <script>
-import { DBAccordion } from "@db-ui/v-components";
+import { DBAccordion, DBAccordionItem } from "@db-ui/v-components";
 </script>
 
 <template>

packages/components/src/shared/model.ts

@@ -61,14 +61,14 @@ export type SemanticProps = {
 
 export type IconProps = {
 	/**
-	 * Define an icon by it's identifier (like e.g. _account_, compare to [Icons](https://db-ui.github.io/mono/review/main/foundations/icons) to get displayed in front of the elements content.
+	 * Define an icon by its identifier (like e.g. _account_, compare to [Icons](https://db-ui.github.io/mono/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
 	 */
 	icon?: IconTypes;
 };
 
 export type IconAfterProps = {
 	/**
-	 * Define an icon by it's identifier (like e.g. _account_, compare to [Icons](https://db-ui.github.io/mono/review/main/foundations/icons) to get displayed in front of the elements content.
+	 * Define an icon by its identifier (like e.g. _account_, compare to [Icons](https://db-ui.github.io/mono/review/main/foundations/icons/overview)) to get displayed in front of the elements content.
 	 */
 	iconAfter?: IconTypes;
 };

packages/components/src/styles/_popover-component.scss

@@ -50,7 +50,7 @@ $popover-gap-inset: calc(-1 * #{$popover-gap-size});
 	}
 
 	&:is(.db-tooltip) {
-		--db-popover-distance: #{variables.$db-spacing-fixed-xs};
+		--db-popover-distance: #{variables.$db-spacing-fixed-sm};
 	}
 
 	&[data-placement^="bottom"]:not([data-outside-vy]),

packages/foundations/README.md

@@ -9,9 +9,9 @@ A library containing all tokens (colors, icons, variables) of [DB UX Design Syst
 
 We currently support:
 
--   [CSS](#css)
--   [SCSS](#scss)
--   [Tailwind](#tailwind)
+-   [CSS](https://db-ui.github.io/mono/review/main/foundations/readme?current=css)
+-   [SCSS](https://db-ui.github.io/mono/review/main/foundations/readme?current=scss)
+-   [Tailwind](https://db-ui.github.io/mono/review/main/foundations/readme?current=tailwind)
 
 ## Install
 

showcases/angular-showcase/package.json

@@ -12,23 +12,23 @@
     "watch": "ng build --watch --configuration development"
   },
   "dependencies": {
-    "@angular/animations": "17.3.3",
-    "@angular/common": "17.3.3",
-    "@angular/compiler": "17.3.3",
-    "@angular/core": "17.3.3",
-    "@angular/forms": "17.3.3",
-    "@angular/platform-browser": "17.3.3",
-    "@angular/platform-browser-dynamic": "17.3.3",
-    "@angular/router": "17.3.3",
+    "@angular/animations": "17.3.4",
+    "@angular/common": "17.3.4",
+    "@angular/compiler": "17.3.4",
+    "@angular/core": "17.3.4",
+    "@angular/forms": "17.3.4",
+    "@angular/platform-browser": "17.3.4",
+    "@angular/platform-browser-dynamic": "17.3.4",
+    "@angular/router": "17.3.4",
     "rxjs": "~7.8.1",
     "tslib": "^2.6.2",
     "zone.js": "~0.14.4"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "17.3.3",
     "@angular/cli": "17.3.3",
-    "@angular/compiler-cli": "17.3.3",
+    "@angular/compiler-cli": "17.3.4",
     "ng-packagr": "17.3.0",
-    "typescript": "^5.4.4"
+    "typescript": "^5.4.5"
   }
 }

showcases/patternhub/components/default-page.tsx

@@ -21,6 +21,18 @@ const DefaultPage = ({ children }: any) => {
 	const router = useRouter();
 
 	useEffect(() => {
+		hljs.configure({
+			languages: [
+				'js',
+				'ts',
+				'jsx',
+				'tsx',
+				'css',
+				'scss',
+				'html',
+				'shell'
+			]
+		});
 		hljs.highlightAll();
 	}, []);
 

showcases/patternhub/components/index.tsx

@@ -1,8 +1,9 @@
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import type {
-	DefaultComponentProps,
-	DefaultComponentVariants
+import React, { useEffect, useState } from 'react';
+import {
+	type DefaultComponentProps,
+	type DefaultComponentVariants,
+	type PatternhubComponentProps
 } from '../../shared/default-component-data';
 import DefaultPage from './default-page';
 import { DBCard, DBDivider, DBLink } from './src';
@@ -44,7 +45,62 @@ const VariantList = ({ examples, slotCode }: DefaultComponentVariants) => {
 	);
 };
 
-const DefaultComponent = ({ title, variants }: DefaultComponentProps) => {
+const VariantsWrapper = ({
+	variants,
+	componentName
+}: {
+	variants: DefaultComponentVariants[];
+	componentName?: string;
+}) => {
+	const getHref = (
+		variant: DefaultComponentVariants,
+		componentName?: string
+	) => {
+		if (
+			typeof window === 'undefined' ||
+			!window.location.origin ||
+			!window.location.href
+		) {
+			return '';
+		}
+
+		const currentUrlWithoutQuery = window.location.href.split('?')[0];
+		const variantQuery = `?page=${variant.name.toLowerCase()}`;
+
+		if (componentName) {
+			return `${currentUrlWithoutQuery.split('components')[0]}/components/${componentName}${variantQuery}`;
+		}
+
+		return `${currentUrlWithoutQuery}${variantQuery}`;
+	};
+
+	return (
+		<>
+			{variants?.map((variant, index) => (
+				<div key={`${variant.name}-${index}`}>
+					<DBDivider></DBDivider>
+					<h2>
+						<DBLink
+							content="external"
+							target="_blank"
+							href={getHref(variant, componentName)}>
+							{variant.name}
+						</DBLink>
+					</h2>
+					<VariantList {...variant} />
+				</div>
+			))}
+		</>
+	);
+};
+
+const DefaultComponent = ({
+	title,
+	variants,
+	subComponent,
+	isSubComponent,
+	componentName
+}: DefaultComponentProps & PatternhubComponentProps) => {
 	const [foundVariant, setFoundVariant] =
 		useState<DefaultComponentVariants>();
 	const router = useRouter();
@@ -61,41 +117,34 @@ const DefaultComponent = ({ title, variants }: DefaultComponentProps) => {
 		}
 	}, [router]);
 
-	const getHref = (variant: DefaultComponentVariants) =>
-		typeof window !== 'undefined' &&
-		window.location.origin &&
-		window.location.href
-			? `${window.location.href.split('?')[0]}?page=${variant.name.toLowerCase()}`
-			: '';
-
 	return (
 		<>
 			{foundVariant && (
 				<div>
 					<VariantList {...foundVariant} />
 				</div>
 			)}
-			{!foundVariant && (
+			{!foundVariant && !isSubComponent && (
 				<DefaultPage>
 					<div className="default-container">
 						<h1>{title}</h1>
-						{variants?.map((variant, index) => (
-							<div key={`${variant.name}-${index}`}>
-								<DBDivider></DBDivider>
-								<h2>
-									<DBLink
-										content="external"
-										target="_blank"
-										href={getHref(variant)}>
-										{variant.name}
-									</DBLink>
-								</h2>
-								<VariantList {...variant} />
-							</div>
-						))}
+						<VariantsWrapper
+							variants={variants}
+							componentName={componentName}
+						/>
 					</div>
+					{subComponent}
 				</DefaultPage>
 			)}
+			{!foundVariant && isSubComponent && (
+				<div className="default-container">
+					<h2>{title}</h2>
+					<VariantsWrapper
+						variants={variants}
+						componentName={componentName}
+					/>
+				</div>
+			)}
 		</>
 	);
 };

showcases/patternhub/data/routes.ts

@@ -46,11 +46,13 @@ const componentChildren: NavigationItem[] = [
 			},
 			{
 				label: 'DBAccordion',
-				name: 'accordion'
-			},
-			{
-				label: 'DBAccordionItem',
-				name: 'accordion-item'
+				name: 'accordion',
+				subNavigation: [
+					{
+						label: 'DBAccordionItem Properties',
+						path: `/components/accordion-item/properties`
+					}
+				]
 			},
 			{
 				label: 'DBTabs',
@@ -255,7 +257,8 @@ export const ROUTES: NavigationItem[] = [
 						{
 							label: 'Migration',
 							path: `/components/${component.name}/migration`
-						}
+						},
+						...(component.subNavigation ?? [])
 					]
 				}))
 			}))

showcases/patternhub/package.json

@@ -44,6 +44,6 @@
     "iframe-resizer": "^4.3.9",
     "open-cli": "^8.0.0",
     "sass": "^1.74.1",
-    "typescript": "5.4.4"
+    "typescript": "5.4.5"
   }
 }

showcases/patternhub/scripts/get-code-files.js

@@ -174,7 +174,8 @@ const writeCodeFiles = async (componentPath, componentName) => {
 			.replace(
 				')}></DefaultComponent>',
 				`,[${tags}])}></DefaultComponent>`
-			);
+			)
+			.replaceAll('// Patternhub:', '');
 
 		return `${pre}\n${readFile}`;
 	}

showcases/patternhub/scripts/get-properties-file.js

@@ -60,14 +60,19 @@ const getPropertiesFile = ({ displayName, description, props }) => {
 			'No description'
 		} `;
 		propertyTable += `| ${property.tsType.type ?? property.tsType.name} `;
-		propertyTable += `| ${
-			options
-				? `<pre><code className="code-pre-wrap">${options.replaceAll(
-						'<T>',
-						''
-					)}</code></pre>`
-				: ''
-		} |\n`;
+
+		if (['icon', 'iconAfter', 'messageIcon'].includes(propertyKey)) {
+			propertyTable += `| [IconTypes](https://db-ui.github.io/mono/review/main/foundations/icons/overview) |\n`;
+		} else {
+			propertyTable += `| ${
+				options
+					? `<pre><code className="code-pre-wrap">${options.replaceAll(
+							'<T>',
+							''
+						)}</code></pre>`
+					: ''
+			} |\n`;
+		}
 	}
 
 	return `

showcases/patternhub/scripts/utils.js

@@ -10,7 +10,9 @@ export const getUnionElements = (options, elements) => {
 			options.push(
 				element.name === 'literal'
 					? element.value
-					: getUnionElements(options, element.elements)
+					: element.elements
+						? getUnionElements(options, element.elements)
+						: element.name
 			);
 		}
 	}

showcases/react-showcase/package.json

@@ -23,7 +23,7 @@
     "@types/react-dom": "^18.2.24",
     "@vitejs/plugin-react": "^4.2.1",
     "cross-env": "^7.0.3",
-    "typescript": "^5.4.4",
+    "typescript": "^5.4.5",
     "vite": "^5.2.8"
   }
 }