Merge branch 'main' into feat-auto-close-nav-item

db-ui · Apr 11, 2024 · 0859988 · 0859988
2 parents 1d42f2a + b9b180c
commit 0859988
Show file tree

Hide file tree

Showing 27 changed files with 217 additions and 133 deletions.
diff --git a/packages/components/scripts/post-build/react.js b/packages/components/scripts/post-build/react.js
@@ -48,15 +48,15 @@ module.exports = (tmp) => {
 				},
 				{
 					from: ` } from "react"`,
-					to: `, forwardRef, HTMLProps } from "react"`
+					to: `, forwardRef, HTMLAttributes } from "react"`
 				},
 				{
 					from: `function DB${upperComponentName}(props: DB${upperComponentName}Props) {`,
-					to: `function DB${upperComponentName}Fn(props: Omit<HTMLProps<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props, component: any) {`
+					to: `function DB${upperComponentName}Fn(props: Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props, component: any) {`
 				},
 				{
 					from: `export default DB${upperComponentName};`,
-					to: `const DB${upperComponentName} = forwardRef<${htmlElement}, Omit<HTMLProps<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props>(DB${upperComponentName}Fn);\nexport default DB${upperComponentName};`
+					to: `const DB${upperComponentName} = forwardRef<${htmlElement}, Omit<HTMLAttributes<${htmlElement}>, keyof DB${upperComponentName}Props> & DB${upperComponentName}Props>(DB${upperComponentName}Fn);\nexport default DB${upperComponentName};`
 				},
 				{
 					from: 'if (ref.current)',

diff --git a/packages/components/src/components/accordion-item/accordion-item.lite.tsx b/packages/components/src/components/accordion-item/accordion-item.lite.tsx
@@ -54,9 +54,9 @@ export default function DBAccordionItem(props: DBAccordionItemProps) {
 			open={state._open}
 			name={props.name}>
 			<summary onClick={(event) => state.toggle(event)}>
-				<Show when={props.title}>{props.title}</Show>
-				<Show when={!props.title}>
-					<Slot name="title" />
+				<Show when={props.headline}>{props.headline}</Show>
+				<Show when={!props.headline}>
+					<Slot name="headline" />
 				</Show>
 			</summary>
 			<div>

diff --git a/packages/components/src/components/accordion-item/accordion-item.spec.tsx b/packages/components/src/components/accordion-item/accordion-item.spec.tsx
@@ -5,7 +5,7 @@ import { DBAccordionItem } from './index';
 // @ts-ignore - vue can only find it with .ts as file ending
 import { DEFAULT_VIEWPORT } from '../../shared/constants.ts';
 
-const comp = <DBAccordionItem title="Test">Test</DBAccordionItem>;
+const comp = <DBAccordionItem headline="Test">Test</DBAccordionItem>;
 
 const testComponent = () => {
 	test('should contain text', async ({ mount }) => {

diff --git a/packages/components/src/components/accordion-item/model.ts b/packages/components/src/components/accordion-item/model.ts
@@ -21,11 +21,11 @@ export interface DBAccordionItemDefaultProps {
 	/**
 	 * For react only to pass any title element to the specific slot
 	 */
-	slotTitle?: any;
+	slotHeadline?: any;
 	/**
 	 * Alternative for passing only a string instead of a slot
 	 */
-	title?: string;
+	headline?: string;
 	/**
 	 * Set details name for exclusive accordions, see https://chromestatus.com/feature/6710427028815872
 	 */

diff --git a/packages/components/src/components/accordion/accordion.lite.tsx b/packages/components/src/components/accordion/accordion.lite.tsx
@@ -133,8 +133,8 @@ export default function DBAccordion(props: DBAccordionProps) {
 				<For each={state.convertItems(props.items)}>
 					{(item: DBAccordionItemInterface, index: number) => (
 						<DBAccordionItem
-							key={`accordion-item-${item.title}-${index}`}
-							title={item.title}
+							key={`accordion-item-${item.headline}-${index}`}
+							title={item.headline}
 							disabled={item.disabled}
 							content={item.content}
 						/>

diff --git a/packages/components/src/components/accordion/accordion.spec.tsx b/packages/components/src/components/accordion/accordion.spec.tsx
@@ -8,9 +8,9 @@ import { DBAccordionItem } from '../accordion-item';
 
 const comp = (
 	<DBAccordion>
-		<DBAccordionItem title="Test" content="Content 1" />
-		<DBAccordionItem title="Test 2" content="Content 2" />
-		<DBAccordionItem title="Test 3" content="Content 3" />
+		<DBAccordionItem headline="Test" content="Content 1" />
+		<DBAccordionItem headline="Test 2" content="Content 2" />
+		<DBAccordionItem headline="Test 3" content="Content 3" />
 	</DBAccordion>
 );
 

diff --git a/packages/components/src/components/button/button.lite.tsx b/packages/components/src/components/button/button.lite.tsx
@@ -28,7 +28,6 @@ export default function DBButton(props: DBButtonProps) {
 				'is-icon-text-replace': props.noText
 			})}
 			type={props.type}
-			title={props.title}
 			disabled={props.disabled}
 			aria-label={props.label}
 			data-icon={props.icon}

diff --git a/packages/components/src/components/icon/icon.lite.tsx b/packages/components/src/components/icon/icon.lite.tsx
@@ -21,8 +21,7 @@ export default function DBIcon(props: DBIconProps) {
 			data-icon={props.icon}
 			data-icon-weight={props.weight}
 			data-icon-variant={props.variant}
-			aria-hidden="true"
-			title={props.title}>
+			aria-hidden="true">
 			{props.children}
 		</span>
 	);

diff --git a/packages/components/src/components/infotext/infotext.lite.tsx b/packages/components/src/components/infotext/infotext.lite.tsx
@@ -18,7 +18,6 @@ export default function DBInfotext(props: DBInfotextProps) {
 			ref={ref}
 			id={props.id}
 			class={cls('db-infotext', props.className)}
-			title={props.title}
 			data-icon={props.icon}
 			data-variant={props.variant}
 			data-size={props.size}>

diff --git a/packages/components/src/components/link/link.lite.tsx b/packages/components/src/components/link/link.lite.tsx
@@ -28,7 +28,6 @@ export default function DBLink(props: DBLinkProps) {
 			id={props.id}
 			class={cls('db-link', props.className)}
 			href={props.href}
-			title={props.title}
 			target={props.target}
 			rel={props.rel}
 			role={props.role}

diff --git a/packages/components/src/shared/model.ts b/packages/components/src/shared/model.ts
@@ -25,16 +25,6 @@ export type GlobalProps = {
 	 * React specific for render process.
 	 */
 	key?: string;
-
-	/**
-	 * The default tabindex (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex?retiredLocale=de).
-	 */
-	tabIndex?: number;
-
-	/**
-	 * The [title attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title) specifies the tooltip of the component.
-	 */
-	title?: string;
 };
 
 export type GlobalState = {
@@ -58,14 +48,14 @@ export type DefaultVariantProps = {
 
 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;
 };

diff --git a/packages/components/src/utils/index.ts b/packages/components/src/utils/index.ts
@@ -1,4 +1,5 @@
 import { DefaultVariantType } from '../shared/model';
+import { AriaRole, CSSProperties } from 'react';
 
 export const uuid = () => {
 	if (typeof window !== 'undefined') {
@@ -60,6 +61,43 @@ export const getMessageIcon = (
 			: undefined;
 };
 
+const reactHtmlAttributes = [
+	'suppressHydrationWarning',
+	'suppressContentEditableWarning',
+	'translate',
+	'title',
+	'tabIndex',
+	'style',
+	'spellCheck',
+	'nonce',
+	'lang',
+	'hidden',
+	'draggable',
+	'dir',
+	'contextMenu',
+	'contentEditable',
+	'autoFocus',
+	'accessKey',
+	'is',
+	'inputMode',
+	'unselectable',
+	'security',
+	'results',
+	'vocab',
+	'typeof',
+	'rev',
+	'resource',
+	'rel',
+	'property',
+	'inlist',
+	'datatype',
+	'content',
+	'about',
+	'role',
+	'radioGroup',
+	'color'
+];
+
 export const filterPassingProps = (
 	props: any,
 	propsPassingFilter: string[]
@@ -71,7 +109,9 @@ export const filterPassingProps = (
 					key.startsWith('aria-') ||
 					key.startsWith('default') ||
 					key.startsWith('auto') ||
-					key.startsWith('on')) &&
+					key.startsWith('item') ||
+					key.startsWith('on') ||
+					reactHtmlAttributes.includes(key)) &&
 				!propsPassingFilter.includes(key)
 		)
 		.reduce((obj: any, key: string) => {

diff --git a/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.html b/showcases/angular-showcase/src/app/components/accordion-item/accordion-item.component.html
@@ -11,7 +11,7 @@
 		let-variantIndex="variantIndex"
 	>
 		<db-accordion-item
-			[title]="exampleProps.title"
+			[headline]="exampleProps.headline"
 			[disabled]="exampleProps.disabled"
 			[defaultOpen]="exampleProps.open"
 		>

diff --git a/showcases/angular-showcase/src/app/components/accordion/accordion.component.html b/showcases/angular-showcase/src/app/components/accordion/accordion.component.html
@@ -18,15 +18,15 @@
 				[variant]="exampleProps.variant"
 			>
 				<db-accordion-item
-					title="Item 1"
+					headline="Item 1"
 					content="Content 1"
 				></db-accordion-item>
 				<db-accordion-item
-					title="Item 2"
+					headline="Item 2"
 					content="Content 2"
 				></db-accordion-item>
 				<db-accordion-item
-					title="Item 3"
+					headline="Item 3"
 					content="Content 3"
 				></db-accordion-item>
 			</db-accordion>

diff --git a/showcases/patternhub/scripts/get-properties-file.js b/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 `

diff --git a/showcases/patternhub/scripts/utils.js b/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
 			);
 		}
 	}

diff --git a/showcases/react-showcase/src/components/accordion-item/index.tsx b/showcases/react-showcase/src/components/accordion-item/index.tsx
@@ -9,10 +9,13 @@ const getAccordionItem = ({
 	children,
 	disabled,
 	open,
-	title
+	headline
 }: DBAccordionItemProps & { open: boolean }) => {
 	return (
-		<DBAccordionItem title={title} disabled={disabled} defaultOpen={open}>
+		<DBAccordionItem
+			headline={headline}
+			disabled={disabled}
+			defaultOpen={open}>
 			{children}
 		</DBAccordionItem>
 	);

diff --git a/showcases/react-showcase/src/components/accordion/index.tsx b/showcases/react-showcase/src/components/accordion/index.tsx
@@ -15,9 +15,9 @@ const getAccordion = ({ behaviour, children, variant }: DBAccordionProps) => (
 			{children}
 		</DBInfotext>
 		<DBAccordion behaviour={behaviour} variant={variant}>
-			<DBAccordionItem title="Item 1" content="Content 1" />
-			<DBAccordionItem title="Item 2" content="Content 2" />
-			<DBAccordionItem title="Item 3" content="Content 3" />
+			<DBAccordionItem headline="Item 1" content="Content 1" />
+			<DBAccordionItem headline="Item 2" content="Content 2" />
+			<DBAccordionItem headline="Item 3" content="Content 3" />
 		</DBAccordion>
 	</>
 );

diff --git a/showcases/react-showcase/src/components/brand/index.tsx b/showcases/react-showcase/src/components/brand/index.tsx
@@ -18,9 +18,7 @@ const getBrand = ({
 	className,
 	describedbyid,
 	id,
-	key,
-	tabIndex,
-	title
+	key
 }: DBBrandProps) => (
 	<DBBrand
 		imgAlt={imgAlt}
@@ -35,9 +33,7 @@ const getBrand = ({
 		className={className}
 		describedbyid={describedbyid}
 		id={id}
-		key={key}
-		tabIndex={tabIndex}
-		title={title}>
+		key={key}>
 		{children}
 	</DBBrand>
 );

diff --git a/showcases/react-showcase/src/components/header/index.tsx b/showcases/react-showcase/src/components/header/index.tsx
@@ -20,8 +20,6 @@ const getHeader = ({
 	describedbyid,
 	id,
 	key,
-	tabIndex,
-	title,
 	onToggle
 }: DBHeaderProps) => (
 	<DBHeader
@@ -63,8 +61,6 @@ const getHeader = ({
 		describedbyid={describedbyid}
 		id={id}
 		key={key}
-		tabIndex={tabIndex}
-		title={title}
 		onToggle={onToggle}>
 		<DBMainNavigation>
 			<DBNavigationItem icon="account">

diff --git a/showcases/react-showcase/src/components/page/index.tsx b/showcases/react-showcase/src/components/page/index.tsx
@@ -19,9 +19,7 @@ const getPage = ({
 	className,
 	describedbyid,
 	id,
-	key,
-	tabIndex,
-	title
+	key
 }: DBPageProps) => (
 	<DBPage
 		type={type}
@@ -30,7 +28,6 @@ const getPage = ({
 		describedbyid={describedbyid}
 		id={id}
 		key={key}
-		tabIndex={tabIndex}
 		slotHeader={
 			<DBHeader
 				slotBrand={
@@ -63,8 +60,7 @@ const getPage = ({
 							Help
 						</DBButton>
 					</>
-				}
-				title={title}>
+				}>
 				<DBMainNavigation>
 					<DBNavigationItem icon="account">
 						<a href="#">{children}</a>