Skip to content

Commit b50c005

Browse files
nmergetgithub-actions[bot]mfranzke
authored
feat: align how to use a DBCard as button or anchor (#4506)
* feat: align how to use a DBCard as button or anchor * auto update snapshots (#4507) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: update interactive card * auto update snapshots (#4525) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update docs/migration/v2.x.x-to-v3.0.0.md Co-authored-by: Maximilian Franzke <[email protected]> * Update docs/migration/v2.x.x-to-v3.0.0.md Co-authored-by: Maximilian Franzke <[email protected]> * Update showcases/vue-showcase/src/components/card/Card.vue Co-authored-by: Maximilian Franzke <[email protected]> * Update showcases/react-showcase/src/components/card/index.tsx Co-authored-by: Maximilian Franzke <[email protected]> * Update showcases/angular-showcase/src/app/components/card/card.component.html Co-authored-by: Maximilian Franzke <[email protected]> * feat: add auto interactive mode when wrapping card in button or anchor * fix: linting issue * feat: added playground page (#4543) * Revert "feat: added playground page (#4543)" This reverts commit 9c5665e. * chore: run format * fix: linting issue * auto update snapshots (#4558) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Apply suggestions from code review * Update v2.x.x-to-v3.0.0.md * refactor: prettier * auto update snapshots (#4563) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix: issue with vue showcase * refactor: reformatting --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Maximilian Franzke <[email protected]> Co-authored-by: Maximilian Franzke <[email protected]>
1 parent 44b33c5 commit b50c005

File tree

6 files changed

+116
-59
lines changed

6 files changed

+116
-59
lines changed

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,30 @@ Please provide the correct `type` property in your code anyhow as a best practis
1616
We removed the `state` property from the `db-button`/`DBButton` component for now.
1717
It wasn't implemented in any framework causing some confusion, and we will reintroduce it in a future version.
1818

19+
20+
## db-card/DBCard
21+
22+
### `behavior='interactive'` change
23+
24+
We changed the `behavior='interactive'` property not applying `role='button'` and `tabIndex` anymore.
25+
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:
26+
27+
```html
28+
<!--Angular-->
29+
<button type="button">
30+
<db-card behavior="interactive">
31+
<!-- card content -->
32+
</db-card>
33+
</button>
34+
35+
<!--React/Vue-->
36+
<button type="button">
37+
<DBCard behavior="interactive">
38+
<!-- card content -->
39+
</DBCard>
40+
</button>
41+
```
42+
1943
## breakpoints
2044

2145
We updated some breakpoints to align with design:

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,6 @@ export default function DBCard(props: DBCardProps) {
3333
data-behavior={props.behavior}
3434
data-elevation-level={props.elevationLevel}
3535
data-spacing={props.spacing}
36-
role={props.behavior === 'interactive' ? 'button' : undefined}
37-
tabIndex={props.behavior === 'interactive' ? 0 : undefined}
3836
onClick={(event: ClickEvent<HTMLElement>) =>
3937
state.handleClick(event)
4038
}>

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

Lines changed: 37 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -3,54 +3,58 @@
33
@use "@db-ux/core-foundations/build/styles/helpers";
44
@use "../../styles/internal/component";
55

6+
:is(a, button) {
7+
&:has(.db-card) {
8+
all: unset;
9+
}
10+
11+
@include helpers.hover {
12+
> .db-card,
13+
> db-card > .db-card {
14+
background-color: var(--db-card-background-color-hovered);
15+
}
16+
}
17+
18+
@include helpers.active {
19+
> .db-card,
20+
> db-card > .db-card {
21+
background-color: var(--db-card-background-color-pressed);
22+
}
23+
}
24+
}
25+
626
.db-card {
27+
--db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-1-default};
28+
--db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-1-hovered};
29+
--db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-1-pressed};
30+
731
@extend %default-card;
832

933
@include component.get-data-spacing();
1034

1135
display: flex;
1236
flex-direction: column;
37+
background-color: var(--db-card-background-color-default);
1338

14-
&[data-elevation-level="1"],
15-
&:not([data-elevation-level]) {
16-
background-color: colors.$db-adaptive-bg-basic-level-1-default;
17-
18-
&[data-behavior="interactive"] {
19-
@include helpers.hover {
20-
background-color: colors.$db-adaptive-bg-basic-level-1-hovered;
21-
}
39+
&[data-behavior="interactive"] {
40+
@include helpers.hover {
41+
background-color: var(--db-card-background-color-hovered);
42+
}
2243

23-
@include helpers.active {
24-
background-color: colors.$db-adaptive-bg-basic-level-1-pressed;
25-
}
44+
@include helpers.active {
45+
background-color: var(--db-card-background-color-pressed);
2646
}
2747
}
2848

2949
&[data-elevation-level="2"] {
30-
background-color: colors.$db-adaptive-bg-basic-level-2-default;
31-
32-
&[data-behavior="interactive"] {
33-
@include helpers.hover {
34-
background-color: colors.$db-adaptive-bg-basic-level-2-hovered;
35-
}
36-
37-
@include helpers.active {
38-
background-color: colors.$db-adaptive-bg-basic-level-2-pressed;
39-
}
40-
}
50+
--db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-2-default};
51+
--db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-2-hovered};
52+
--db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-2-pressed};
4153
}
4254

4355
&[data-elevation-level="3"] {
44-
background-color: colors.$db-adaptive-bg-basic-level-3-default;
45-
46-
&[data-behavior="interactive"] {
47-
@include helpers.hover {
48-
background-color: colors.$db-adaptive-bg-basic-level-3-hovered;
49-
}
50-
51-
@include helpers.active {
52-
background-color: colors.$db-adaptive-bg-basic-level-3-pressed;
53-
}
54-
}
56+
--db-card-background-color-default: #{colors.$db-adaptive-bg-basic-level-3-default};
57+
--db-card-background-color-hovered: #{colors.$db-adaptive-bg-basic-level-3-hovered};
58+
--db-card-background-color-pressed: #{colors.$db-adaptive-bg-basic-level-3-pressed};
5559
}
5660
}

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

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,24 @@
1010
let-exampleIndex="exampleIndex"
1111
let-variantIndex="variantIndex"
1212
>
13-
<db-card
14-
[behavior]="exampleProps?.behavior"
15-
[elevationLevel]="exampleProps?.elevationLevel"
16-
[spacing]="exampleProps?.spacing"
17-
>
18-
<strong>{{ exampleName }}</strong>
19-
</db-card>
13+
@if (exampleProps?.behavior === "interactive") {
14+
<button type="button">
15+
<db-card
16+
[behavior]="exampleProps?.behavior"
17+
[elevationLevel]="exampleProps?.elevationLevel"
18+
[spacing]="exampleProps?.spacing"
19+
>
20+
<strong>{{ exampleName }}</strong>
21+
</db-card>
22+
</button>
23+
} @else {
24+
<db-card
25+
[behavior]="exampleProps?.behavior"
26+
[elevationLevel]="exampleProps?.elevationLevel"
27+
[spacing]="exampleProps?.spacing"
28+
>
29+
<strong>{{ exampleName }}</strong>
30+
</db-card>
31+
}
2032
</ng-template>
2133
</app-default-component>

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

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,31 @@ const getCard = ({
1010
children,
1111
spacing,
1212
elevationLevel
13-
}: DBCardProps) => (
14-
<DBCard
15-
behavior={behavior}
16-
spacing={spacing}
17-
elevationLevel={elevationLevel}>
18-
<strong>{children}</strong>
19-
</DBCard>
20-
);
13+
}: DBCardProps) => {
14+
const card = (
15+
<DBCard
16+
behavior={behavior}
17+
spacing={spacing}
18+
elevationLevel={elevationLevel}>
19+
<strong>{children}</strong>
20+
</DBCard>
21+
);
2122

22-
const CardComponent = (props: BaseComponentProps) => {
23-
return (
24-
<DefaultComponent
25-
title={'DBCard'}
26-
variants={getVariants(
27-
defaultComponentVariants,
28-
getCard,
29-
props.slotCode
30-
)}></DefaultComponent>
23+
return behavior === 'interactive' ? (
24+
<button type="button">{card}</button>
25+
) : (
26+
card
3127
);
3228
};
3329

30+
const CardComponent = (properties: BaseComponentProps) => (
31+
<DefaultComponent
32+
title={'DBCard'}
33+
variants={getVariants(
34+
defaultComponentVariants,
35+
getCard,
36+
properties.slotCode
37+
)}></DefaultComponent>
38+
);
39+
3440
export default CardComponent;

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,20 @@ import DefaultComponent from "../DefaultComponent.vue";
99
<template
1010
#example="{ exampleIndex, variantIndex, exampleName, exampleProps }"
1111
>
12+
<button
13+
type="button"
14+
v-if="exampleProps?.behavior === 'interactive'"
15+
>
16+
<DBCard
17+
:behavior="exampleProps?.behavior"
18+
:elevationLevel="exampleProps?.elevationLevel"
19+
:spacing="exampleProps?.spacing"
20+
>
21+
<strong>{{ exampleName }}</strong>
22+
</DBCard>
23+
</button>
1224
<DBCard
25+
v-if="exampleProps?.behavior !== 'interactive'"
1326
:behavior="exampleProps?.behavior"
1427
:elevationLevel="exampleProps?.elevationLevel"
1528
:spacing="exampleProps?.spacing"

0 commit comments

Comments
 (0)