feat: align how to use a DBCard as button or anchor

Author: nmerget

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

@@ -3,6 +3,10 @@
 @use "@db-ux/core-foundations/build/styles/helpers";
 @use "../../styles/internal/component";
 
+:is(a, button):has(.db-card) {
+	all: unset;
+}
+
 .db-card {
 	@extend %default-card;
 

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>
+				<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,14 +10,18 @@ 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>
+	);
+
+	return behavior === 'interactive' ? <button>{card}</button> : card;
+};
 
 const CardComponent = (props: BaseComponentProps) => {
 	return (

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

@@ -9,7 +9,17 @@ import DefaultComponent from "../DefaultComponent.vue";
 		<template
 			#example="{ exampleIndex, variantIndex, exampleName, exampleProps }"
 		>
+			<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"