refactor: align how to use a DBCard as button or link

docs/migration/v2.x.x-to-v3.0.0.md

@@ -16,6 +16,30 @@ Please provide the correct `type` property in your code anyhow as a best practis
 We removed the `state` property from the `db-button`/`DBButton` component for now.
 It wasn't implemented in any framework causing some confusion, and we will reintroduce it in a future version.
 
+
+## db-card/DBCard
+
+### `behavior='interactive'` change
+
+We changed the `behavior='interactive'` property not applying `role='button'` and `tabIndex` anymore.
+If you want to use an interactive card, you should wrap the card with the correct HTML element, like a `button` or an `a` HTML tag:
+
+```html
+<!--Angular-->
+<button type="button">
+	<db-card behavior="interactive">
+		<!-- card content -->
+	</db-card>
+</button>
+
+<!--React/Vue-->
+<button type="button">
+	<DBCard behavior="interactive">
+		<!-- card content -->
+	</DBCard>
+</button>
+```
+
 ## breakpoints
 
 We updated some breakpoints to align with design:

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

@@ -33,8 +33,6 @@ export default function DBCard(props: DBCardProps) {
 			data-behavior={props.behavior}
 			data-elevation-level={props.elevationLevel}
 			data-spacing={props.spacing}
-			role={props.behavior === 'interactive' ? 'button' : undefined}
-			tabIndex={props.behavior === 'interactive' ? 0 : undefined}
 			onClick={(event: ClickEvent<HTMLElement>) =>
 				state.handleClick(event)
 			}>

packages/components/src/components/card/card.scss

@@ -3,54 +3,58 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/component";
 
+:is(a, button) {
+	&:has(.db-card) {
+		all: unset;
+	}
+
+	@include helpers.hover {
+		> .db-card,
+		> db-card > .db-card {
+			background-color: var(--db-card-background-color-hovered);
+		}
+	}
+
+	@include helpers.active {
+		> .db-card,
+		> db-card > .db-card {
+			background-color: var(--db-card-background-color-pressed);
+		}
+	}
+}
+
 .db-card {
+	--db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-1-default};
+	--db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-1-hovered};
+	--db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-1-pressed};
+
 	@extend %default-card;
 
 	@include component.get-data-spacing();
 
 	display: flex;
 	flex-direction: column;
+	background-color: var(--db-card-background-color-default);
 
-	&[data-elevation-level="1"],
-	&:not([data-elevation-level]) {
-		background-color: colors.$db-adaptive-bg-basic-level-1-default;
-
-		&[data-behavior="interactive"] {
-			@include helpers.hover {
-				background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
-			}
+	&[data-behavior="interactive"] {
+		@include helpers.hover {
+			background-color: var(--db-card-background-color-hovered);
+		}
 
-			@include helpers.active {
-				background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
-			}
+		@include helpers.active {
+			background-color: var(--db-card-background-color-pressed);
 		}
 	}
 
 	&[data-elevation-level="2"] {
-		background-color: colors.$db-adaptive-bg-basic-level-2-default;
-
-		&[data-behavior="interactive"] {
-			@include helpers.hover {
-				background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
-			}
-
-			@include helpers.active {
-				background-color: colors.$db-adaptive-bg-basic-level-2-pressed;
-			}
-		}
+		--db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-2-default};
+		--db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-2-hovered};
+		--db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-2-pressed};
 	}
 
 	&[data-elevation-level="3"] {
-		background-color: colors.$db-adaptive-bg-basic-level-3-default;
-
-		&[data-behavior="interactive"] {
-			@include helpers.hover {
-				background-color: colors.$db-adaptive-bg-basic-level-3-hovered;
-			}
-
-			@include helpers.active {
-				background-color: colors.$db-adaptive-bg-basic-level-3-pressed;
-			}
-		}
+		--db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-3-default};
+		--db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-3-hovered};
+		--db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-3-pressed};
 	}
 }

showcases/angular-showcase/src/app/components/card/card.component.html

@@ -10,12 +10,24 @@
 		let-exampleIndex="exampleIndex"
 		let-variantIndex="variantIndex"
 	>
-		<db-card
-			[behavior]="exampleProps?.behavior"
-			[elevationLevel]="exampleProps?.elevationLevel"
-			[spacing]="exampleProps?.spacing"
-		>
-			<strong>{{ exampleName }}</strong>
-		</db-card>
+		@if (exampleProps?.behavior === "interactive") {
+			<button type="button">
+				<db-card
+					[behavior]="exampleProps?.behavior"
+					[elevationLevel]="exampleProps?.elevationLevel"
+					[spacing]="exampleProps?.spacing"
+				>
+					<strong>{{ exampleName }}</strong>
+				</db-card>
+			</button>
+		} @else {
+			<db-card
+				[behavior]="exampleProps?.behavior"
+				[elevationLevel]="exampleProps?.elevationLevel"
+				[spacing]="exampleProps?.spacing"
+			>
+				<strong>{{ exampleName }}</strong>
+			</db-card>
+		}
 	</ng-template>
 </app-default-component>

showcases/react-showcase/src/components/card/index.tsx

@@ -10,25 +10,31 @@ const getCard = ({
 	children,
 	spacing,
 	elevationLevel
-}: DBCardProps) => (
-	<DBCard
-		behavior={behavior}
-		spacing={spacing}
-		elevationLevel={elevationLevel}>
-		<strong>{children}</strong>
-	</DBCard>
-);
+}: DBCardProps) => {
+	const card = (
+		<DBCard
+			behavior={behavior}
+			spacing={spacing}
+			elevationLevel={elevationLevel}>
+			<strong>{children}</strong>
+		</DBCard>
+	);
 
-const CardComponent = (props: BaseComponentProps) => {
-	return (
-		<DefaultComponent
-			title={'DBCard'}
-			variants={getVariants(
-				defaultComponentVariants,
-				getCard,
-				props.slotCode
-			)}></DefaultComponent>
+	return behavior === 'interactive' ? (
+		<button type="button">{card}</button>
+	) : (
+		card
 	);
 };
 
+const CardComponent = (properties: BaseComponentProps) => (
+	<DefaultComponent
+		title={'DBCard'}
+		variants={getVariants(
+			defaultComponentVariants,
+			getCard,
+			properties.slotCode
+		)}></DefaultComponent>
+);
+
 export default CardComponent;

showcases/vue-showcase/src/components/card/Card.vue

@@ -9,7 +9,20 @@ import DefaultComponent from "../DefaultComponent.vue";
 		<template
 			#example="{ exampleIndex, variantIndex, exampleName, exampleProps }"
 		>
+			<button
+				type="button"
+				v-if="exampleProps?.behavior === 'interactive'"
+			>
+				<DBCard
+					:behavior="exampleProps?.behavior"
+					:elevationLevel="exampleProps?.elevationLevel"
+					:spacing="exampleProps?.spacing"
+				>
+					<strong>{{ exampleName }}</strong>
+				</DBCard>
+			</button>
 			<DBCard
+				v-if="exampleProps?.behavior !== 'interactive'"
 				:behavior="exampleProps?.behavior"
 				:elevationLevel="exampleProps?.elevationLevel"
 				:spacing="exampleProps?.spacing"