fix: add missing id for components to use them from DOM or e2e tests

packages/components/src/components/accordion/accordion.lite.tsx

@@ -124,7 +124,10 @@ export default function DBAccordion(props: DBAccordionProps) {
 	}, [state.openItems]);
 
 	return (
-		<div ref={ref} class={cls('db-accordion', props.className)}>
+		<div
+			ref={ref}
+			id={props.id}
+			class={cls('db-accordion', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>

packages/components/src/components/alert/alert.lite.tsx

@@ -58,6 +58,7 @@ export default function DBAlert(props: DBAlertProps) {
 	return (
 		<div
 			ref={component}
+			id={props.id}
 			class={cls('db-alert', props.className)}
 			aria-live={props.ariaLive}
 			data-variant={props.variant}

packages/components/src/components/badge/badge.lite.tsx

@@ -27,6 +27,7 @@ export default function DBBadge(props: DBBadgeProps) {
 	return (
 		<span
 			ref={component}
+			id={props.id}
 			class={cls('db-badge', props.className)}
 			data-variant={props.variant}
 			data-size={props.size}

packages/components/src/components/brand/brand.lite.tsx

@@ -66,7 +66,8 @@ export default function DBBrand(props: DBBrandProps) {
 	// jscpd:ignore-end
 
 	return (
-		<div ref={component} class={cls('db-brand', props.className)}>
+		<div ref={component}
+			 id={props.id} class={cls('db-brand', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>

packages/components/src/components/card/card.lite.tsx

@@ -50,6 +50,7 @@ export default function DBCard(props: DBCardProps) {
 	return (
 		<div
 			ref={component}
+			id={props.id}
 			class={cls('db-card', props.className)}
 			data-variant={props.variant}
 			data-color-variant={props.colorVariant}

packages/components/src/components/divider/divider.lite.tsx

@@ -48,6 +48,7 @@ export default function DBDivider(props: DBDividerProps) {
 	return (
 		<div
 			ref={component}
+			id={props.id}
 			data-margin={props.margin}
 			data-variant={props.variant}
 			data-emphasis={props.emphasis}

packages/components/src/components/icon/icon.lite.tsx

@@ -34,6 +34,7 @@ export default function DBIcon(props: DBIconProps) {
 	return (
 		<span
 			ref={component}
+			id={props.id}
 			class={cls('db-icon', props.className)}
 			data-icon={props.icon}
 			aria-hidden="true"

packages/components/src/components/infotext/infotext.lite.tsx

@@ -65,6 +65,7 @@ export default function DBInfotext(props: DBInfotextProps) {
 	return (
 		<span
 			ref={component}
+			id={props.id}
 			class={cls('db-infotext', props.className)}
 			title={props.title}
 			data-icon={props.icon}

packages/components/src/components/link/link.lite.tsx

@@ -61,6 +61,7 @@ export default function DBLink(props: DBLinkProps) {
 	return (
 		<a
 			ref={component}
+			id={props.id}
 			class={cls('db-link', props.className)}
 			href={props.href}
 			title={props.title}

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

@@ -26,7 +26,10 @@ export default function DBMainNavigation(props: DBMainNavigationProps) {
 	// jscpd:ignore-end
 
 	return (
-		<nav ref={component} class={cls('db-main-navigation', props.className)}>
+		<nav
+			ref={component}
+			id={props.id}
+			class={cls('db-main-navigation', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>

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

@@ -83,6 +83,7 @@ export default function DBNavigationItem(props: DBNavigationItemProps) {
 	return (
 		<li
 			ref={component}
+			id={props.id}
 			class={cls('db-navigation-item', props.className)}
 			data-width={props.width}
 			data-icon={props.icon}

packages/components/src/components/page/page.lite.tsx

@@ -44,6 +44,7 @@ export default function DBPage(props: DBPageProps) {
 	return (
 		<div
 			ref={component}
+			id={props.id}
 			class={cls('db-page', props.className, {
 				'fixed-header-footer': props.type === 'fixedHeaderFooter'
 			})}

packages/components/src/components/section/section.lite.tsx

@@ -27,6 +27,7 @@ export default function DBSection(props: DBSectionProps) {
 	return (
 		<section
 			ref={component}
+			id={props.id}
 			className={cls('db-section', props.className)}
 			data-size={props.size || 'medium'}>
 			<Show when={state.stylePath}>

packages/components/src/components/tab-bar/tab-bar.lite.tsx

@@ -50,6 +50,7 @@ export default function DBTabBar(props: DBTabBarProps) {
 	return (
 		<div
 			ref={component}
+			id={props.id}
 			class={cls('cmp-tab-bar', props.className)}
 			role="tablist">
 			<Show when={state.stylePath}>

packages/components/src/components/tab/tab.lite.tsx

@@ -52,7 +52,9 @@ export default function DBTab(props: DBTabProps) {
 	// jscpd:ignore-end
 
 	return (
-		<div ref={component} class={cls('db-tab', props.className)}>
+		<div ref={component}
+			 id={props.id}
+			 class={cls('db-tab', props.className)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />
 			</Show>

packages/components/src/components/tag/tag.lite.tsx

@@ -116,6 +116,7 @@ export default function DBTag(props: DBTagProps) {
 	return (
 		<div
 			ref={component}
+			id={props.id}
 			class={cls('db-tag', props.className)}
 			tabIndex={state.getTabIndex()}
 			data-interactive={state.isInteractive()}