Skip to content

Commit cfc544c

Browse files
nmergetmfranzke
nmerget
and
mfranzke
authored
refactor: cards to match with dbux-3 (#193)
* refactor: cards to match with dbux-3 * fix: issue with dependency * chore: out of my dead cold hands … * fix: we can define custom attributes by data-* * chore(docs): optimized the code parts * Restore cards.hbs * refactor: let's leave the components contents for the moment * fix: change _init.global.scss for a tags * fix: removed sass:list from _color-variants.scss * refactor: the full width is actually a variant currently * chore: these variables need to get named a little bit more exclusive as they are all optional from now on * Update _init.global.scss * chore: prettier * chore: even variant is an optional attribute * refactor: an interactive element needs a link as well * chore: this file has been moved to DB UI Base * fix: corrected that path * chore: heavily simplifying these examples * test: let's deactivate this component for the moment Co-authored-by: Maximilian Franzke <[email protected]> Co-authored-by: Maximilian Franzke <[email protected]>
1 parent 5b52ea2 commit cfc544c

20 files changed

+214
-101
lines changed

‎.pa11yci

-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@
1818
"http://127.0.0.1:8080/patterns/elements-toggle/index.html",
1919
"http://127.0.0.1:8080/patterns/components-accordion/index.html",
2020
"http://127.0.0.1:8080/patterns/components-breadcrumb/index.html",
21-
"http://127.0.0.1:8080/patterns/components-cards/index.html",
2221
"http://127.0.0.1:8080/patterns/components-dialog/index.html",
2322
"http://127.0.0.1:8080/patterns/components-dropdown/index.html",
2423
"http://127.0.0.1:8080/patterns/components-form/index.html",

‎source/_meta/_head.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515

1616
<!-- If you're adapting the HTML out of this document, only include the following CSS file, as the other below are related to pattern lab styling and presenting our patterns in this context even only //-->
1717
<link rel="stylesheet" href="../../css/{{ domain }}/db-ui-core.css?{{ cacheBuster }}" media="all">
18+
<link rel="stylesheet" href="../../css/{{ domain }}/db-ui-core.classes.css?{{ cacheBuster }}" media="all">
1819

1920
<!-- Do not include the following CSS, as these are related to pattern lab styling and presenting our patterns in this context even only //-->
2021
<link rel="stylesheet" href="../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all">

‎source/_patterns/00-base/_init.global.scss

+2-5
Original file line numberDiff line numberDiff line change
@@ -50,15 +50,12 @@ body {
5050

5151
// Inline
5252
a {
53-
color: $db-colors-secondary-enabled;
53+
// TODO: Move to DB UI Base
54+
color: inherit;
5455

5556
strong {
5657
color: currentColor;
5758
}
58-
59-
&:hover {
60-
color: #5d616a; // TODO: Identify correct color variable
61-
}
6259
}
6360

6461
code {

‎source/_patterns/02-components/cards/_card.hbs

-19
This file was deleted.

‎source/_patterns/02-components/cards/_cards.variables.scss

-1
This file was deleted.

‎source/_patterns/02-components/cards/card.hbs

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
{{#unless list }}
2+
<div class="cmp-card"{{#if variant}} data-variant="{{ variant }}"{{/if }}>
3+
{{else}}
4+
<!-- [html-validate-disable-next element-permitted-content, element-permitted-parent -- we're only providing a partial here] -->
5+
<li class="cmp-card"{{#if variant}} data-variant="{{ variant }}"{{/if }}>
6+
{{/unless}}
7+
{{#if hyperlink }}<a href="#">{{/if }}
8+
{{#if figure }}<figure>
9+
{{#if_eq variant "banner" }}
10+
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" aria-hidden="true">
11+
<use href="../../icons/illustrative/{{ icon }}.svg#icon"></use>
12+
</svg>
13+
{{else}}
14+
{{> elements-image src="../../icons/functional/images/navigation/db_ic_list_20.svg" alt="" role="presentation" }}
15+
{{/if_eq }}
16+
<figcaption>{{/if }}
17+
{{#if headline}}
18+
<!-- [html-validate-disable-next heading-level] -->
19+
<h3 class="elm-headline">{{ headline }}</h3>
20+
{{/if }}
21+
{{#if text }}<p>{{{ text }}}</p>{{/if }}
22+
{{#if figure }}</figcaption>
23+
</figure>{{/if }}
24+
{{#if hyperlink }}</a>{{/if }}
25+
{{#unless list }}
26+
</div>
27+
{{else}}
28+
</li>
29+
{{/unless }}

‎source/_patterns/02-components/cards/card.scss

+31-5
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,49 @@
1+
@use "@db-ui/base/build/scss/init" as *;
12
@use "@db-ui/base/build/scss/variables" as *;
3+
@use "@db-ui/base/build/scss/variables.global" as *;
24
@use "@db-ui/base/build/scss/helpers/functions" as *;
3-
@import "cards.variables";
5+
@use "@db-ui/base/build/scss/color/color-variants" as *;
46

57
.cmp-card {
6-
background-color: #fff;
8+
@extend %focus-placeholder;
9+
@extend %color-variants;
10+
11+
background-color: var(
12+
--db-current-background-color,
13+
$db-colors-neutral-bg-0-enabled
14+
);
715

816
border-radius: 8px;
9-
box-shadow: $box-shadow-01, $box-shadow-02;
17+
box-shadow: $db-elevation-4;
18+
padding: $db-spacing-fixed-md;
1019

1120
& > a {
1221
text-decoration: none;
1322
}
1423

24+
&[data-variant="w-full"],
25+
&[data-variant="width-full"] {
26+
width: 100vw;
27+
border-radius: 0;
28+
}
29+
30+
&[data-variant="ia"] {
31+
&:hover {
32+
cursor: pointer;
33+
box-shadow: $db-elevation-8;
34+
}
35+
36+
&:active {
37+
box-shadow: $db-elevation-2;
38+
}
39+
}
40+
41+
// Cards contents are probably deprecated
42+
// TODO: probably remove after discussions and/or move to demonstration styles for the homepage
1543
figure {
1644
margin: $db-spacing-fixed-normal-m $db-spacing-fixed-normal-m
1745
$db-spacing-fixed-normal-m $db-spacing-fixed-normal-xs;
1846
}
19-
2047
// Banner variant
2148
&[data-variant="banner"] {
2249
figure {
@@ -49,7 +76,6 @@
4976
}
5077
}
5178
}
52-
5379
// Tile variant
5480
&[data-variant="tile"] {
5581
text-align: center;

‎source/_patterns/02-components/cards/cards-colors.hbs

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
<p>outer container db-bg-neutral-2</p>
2+
<div class="cmp-card db-bg-neutral-2">
3+
<ul class="cmp-cards">
4+
<li class="cmp-card">
5+
<strong>db-bg-neutral-2</strong>
6+
<br>
7+
<a href="#">Test</a>
8+
</li>
9+
<li class="cmp-card">
10+
<strong>db-bg-neutral-2</strong>
11+
<br>
12+
<a href="#">Test2</a>
13+
</li>
14+
<li class="cmp-card">
15+
<strong>db-bg-neutral-2</strong>
16+
<br>
17+
<a href="#">Test3</a>
18+
</li>
19+
</ul>
20+
</div>
21+
22+
<p>card with nested cards db-bg-information</p>
23+
<div class="cmp-card">
24+
<ul class="cmp-cards">
25+
<li class="cmp-card db-bg-information">
26+
<strong>db-bg-information</strong>
27+
<br>
28+
<a href="#">Test</a>
29+
</li>
30+
<li class="cmp-card db-bg-information">
31+
<strong>db-bg-information</strong>
32+
<br>
33+
<a href="#">Test2</a>
34+
</li>
35+
<li class="cmp-card db-bg-information">
36+
<strong>db-bg-information</strong>
37+
<br>
38+
<a href="#">Test3</a>
39+
</li>
40+
</ul>
41+
</div>
42+
43+
<p>cards with <code>data-color-variant=success-light</code></p>
44+
<ul class="cmp-cards">
45+
<li class="cmp-card" data-color-variant="success-light">
46+
<strong>db-bg-success-light</strong>
47+
<br>
48+
<a href="#">Test</a>
49+
</li>
50+
<li class="cmp-card" data-color-variant="success-light">
51+
<strong>db-bg-success-light</strong>
52+
<br>
53+
<a href="#">Test2</a>
54+
</li>
55+
<li class="cmp-card" data-color-variant="success-light">
56+
<strong>db-bg-success-light</strong>
57+
<br>
58+
<a href="#">Test3</a>
59+
</li>
60+
</ul>
61+
62+
<p>cards with <code>data-color-variant=success-light</code> and <code>data-variant="ia"</code></p>
63+
64+
<ul class="cmp-cards">
65+
<li class="cmp-card" data-color-variant="success-light" data-variant="ia">
66+
<strong>db-bg-success-light</strong>
67+
<br>
68+
<span>Test</span>
69+
</li>
70+
<li class="cmp-card" data-color-variant="success-light" data-variant="ia">
71+
<strong>db-bg-success-light</strong>
72+
<br>
73+
<span>Test2</span>
74+
</li>
75+
<li class="cmp-card" data-color-variant="success-light" data-variant="ia">
76+
<strong>db-bg-success-light</strong>
77+
<br>
78+
<span>Test3</span>
79+
</li>
80+
</ul>

‎source/_patterns/02-components/cards/cards.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<ul class="cmp-cards">
22
{{#each cards }}
3-
{{> components-card variant=../variant }}
3+
{{> components-card variant=../variant list=true }}
44
{{/each }}
55
</ul>

‎source/_patterns/02-components/cards/cards.json

-28
This file was deleted.

‎source/_patterns/02-components/cards/cards~banner.json

-25
This file was deleted.

‎source/_patterns/02-components/cards/cards~default.json

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"cards": [
3+
{
4+
"headline": "Headline 01",
5+
"text": "Lorem ipsum dolores sint."
6+
},
7+
{
8+
"headline": "Headline 02",
9+
"text": "Lorem ipsum dolores sint."
10+
},
11+
{
12+
"headline": "Headline 03",
13+
"text": "Lorem ipsum dolores sint."
14+
},
15+
{
16+
"headline": "Headline 04",
17+
"text": "Lorem ipsum dolores sint."
18+
}
19+
]
20+
}

‎source/_patterns/02-components/cards/cards~interactive.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"variant": "ia",
3+
"cards": [
4+
{
5+
"headline": "Interactive 01",
6+
"text": "Lorem ipsum dolores sint.",
7+
"hyperlink": true
8+
},
9+
{
10+
"headline": "Interactive 02",
11+
"text": "Lorem ipsum dolores sint.",
12+
"hyperlink": true
13+
},
14+
{
15+
"headline": "Interactive 03",
16+
"text": "Lorem ipsum dolores sint.",
17+
"hyperlink": true
18+
},
19+
{
20+
"headline": "Interactive 04",
21+
"text": "Lorem ipsum dolores sint.",
22+
"hyperlink": true
23+
}
24+
]
25+
}

‎source/_patterns/02-components/cards/card~full-width.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"headline": "Test",
3+
"text": "Test 123",
4+
"variant": "width-full"
5+
}

‎source/_patterns/02-components/cards/enterprise/_cards.variables.scss

-1
This file was deleted.

‎source/_patterns/02-components/cards/enterprise/card.scss

-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
@import "cards.variables";
21
@import "../card";

‎source/_patterns/02-components/cards/enterprise/cards.scss

-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,2 @@
1-
@import "cards.variables";
21
@import "../cards";
32
@import "../card";

‎source/_patterns/04-pages/intro.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<section>
2929
{{> elements-headline type='2' text='Core principals' }}
3030

31-
{{> components-cards variant="banner" }}
31+
{{> components-cards variant="banner" figure=true }}
3232
</section>
3333

3434
<section>

0 commit comments

Comments
 (0)