Merge pull request #733 from db-ui/feat-added-missing-components-react

feat: added card to react showcase

Author: annsch

__snapshots__/card/card.spec.tsx-snapshots/DBCard-component-on-desktop-Variants-DBCard-should-match-screenshot-for-variant-full-width-1-chromium-linux.png

@@ -14,11 +14,6 @@ useMetadata({
 						key: 'Interactive',
 						name: 'Interactive',
 						value: 'interactive'
-					},
-					{
-						key: 'Full Width',
-						name: 'Full Width',
-						value: 'full-width'
 					}
 				]
 			}
@@ -49,8 +44,8 @@ export default function DBCard(props: DBCardProps) {
 			class={'db-card' + (props.className ? ' ' + props.className : '')}
 			data-variant={props.variant}
 			data-color-variant={props.colorVariant}
-			data-direction={props.direction}
 			data-elevation={props.elevation}
+			data-spacing={props.spacing}
 			onClick={(event) => state.handleClick(event)}>
 			<Show when={state.stylePath}>
 				<link rel="stylesheet" href={state.stylePath} />

__snapshots__/card/card.spec.tsx-snapshots/DBCard-component-on-desktop-Variants-DBCard-should-match-screenshot-for-variant-full-width-1-firefox-linux.png

@@ -18,31 +18,25 @@
 	display: flex;
 	flex-direction: column;
 
-	&[data-direction="row"] {
-		@media only screen and (min-width: #{$db-screens-s}) {
-			display: grid;
-			grid-template-columns: repeat(2, minmax(0, 1fr));
-			gap: $db-spacing-fixed-md;
-
-			& > .db-card-image {
-				height: 100%;
-			}
-		}
-	}
-
 	& > a {
 		text-decoration: none;
 	}
 
-	&[data-variant="full-width"] {
-		width: 100vw;
-		border-radius: 0;
+	&[data-spacing="medium"] {
+		padding: $db-spacing-fixed-lg;
+	}
+
+	&[data-spacing="small"] {
+		padding: $db-spacing-fixed-md;
 	}
 
 	&[data-variant="interactive"] {
+		// TODO use transition duration as variable
+		transition: box-shadow 0.15s $db-transition-functional-timing;
+
 		&:hover:not([data-elevation="none"]) {
 			cursor: pointer;
-			box-shadow: $db-elevation-4;
+			box-shadow: $db-elevation-8;
 		}
 
 		&:active:not([data-elevation="none"]) {

__snapshots__/card/card.spec.tsx-snapshots/DBCard-component-on-desktop-Variants-DBCard-should-match-screenshot-for-variant-full-width-1-webkit-linux.png

@@ -48,24 +48,6 @@ const testCardColorVariants = () => {
 	}
 };
 
-const testCardRow = () => {
-	for (const direction of directions) {
-		test(`DBCard should match screenshot for direction ${direction}`, async ({
-			mount
-		}) => {
-			const component = await mount(
-				<div>
-					<DBCard direction={direction}>
-						<span>Test 1</span>
-						<span>Test 2</span>
-					</DBCard>
-				</div>
-			);
-			await expect(component).toHaveScreenshot();
-		});
-	}
-};
-
 const testCardVariants = () => {
 	for (const variant of variants) {
 		test(`DBCard should match screenshot for variant ${variant}`, async ({
@@ -109,25 +91,11 @@ test.describe('DBCard component on mobile: Color Variants', () => {
 	testCardColorVariants();
 });
 
-test.describe('DBCard component on desktop: Row', () => {
-	// Old-school CRT monitor screensize
-	test.use({ viewport: { width: 1024, height: 768 } });
-
-	testCardRow();
-});
-
-test.describe('DBCard component on mobile: Row', () => {
-	// iPhone 13 / portrait screen size
-	test.use({ viewport: { width: 390, height: 884 } });
-
-	testCardRow();
-});
-
 test.describe('DBCard component on desktop: Variants', () => {
 	// Old-school CRT monitor screensize
 	test.use({ viewport: { width: 1024, height: 768 } });
 
-	testCardRow();
+	testCardVariants();
 });
 
 test.describe('DBCard component on mobile: Variants', () => {

__snapshots__/card/card.spec.tsx-snapshots/DBCard-component-on-desktop-Variants-DBCard-should-match-screenshot-for-variant-interactive-1-chromium-linux.png

@@ -9,8 +9,8 @@ import {
 
 export type DBCardDefaultProps = {
 	colorVariant?: string;
-	direction?: 'column' | 'row';
-	variant?: 'full-width' | 'interactive';
+	variant?: 'interactive';
+	spacing?: 'medium' | 'small';
 };
 
 export type DBCardProps = DBCardDefaultProps &