Skip to content

Commit d1bab9b

Browse files
mfranzkemfranzke
committed
Merge branch 'main' into dbux-3
2 parents c966448 + 08b2078 commit d1bab9b

25 files changed

+339
-12
lines changed

‎docs/migrationGuide.adoc‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,18 @@ We've remove the deprecated previous HTML implementation of the label by an `out
2525
- The `id`-attributes value on that `label` element needs to match the following attributes values that needs to get added onto the `progress` HTML tag itself:
2626
`aria-describedby="{{ id }}-label"`
2727

28+
== DB UI Core 2.2.0 Migration Guide
29+
30+
=== progress element
31+
32+
We've replaced the previous HTML implementation of the label / an actual `label` element by an `output` element. Necessary changes:
33+
34+
- replaced `output` element by `label` element
35+
- especially for screenreader optimization added the following two attributes to this `label` element:
36+
`id="{{ id }}-label" aria-hidden="true"`
37+
- The `id`-attributes value on that `label` element needs to match the following attributes values that needs to get added onto the `progress` HTML tag itself:
38+
`aria-describedby="{{ id }}-label"`
39+
2840
== DB UI Core 2.0.0 Migration Guide
2941

3042
=== Using SCSS/SASS sources

‎package-lock.json‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
"dialog-polyfill": "^0.5.6",
7979
"dotenv": "^16.0.3",
8080
"find-versions-cli": "^4.0.0",
81-
"html-validate": "^7.9.0",
81+
"html-validate": "^7.10.0",
8282
"html5-boilerplate": "^8.0.0",
8383
"husky": "^8.0.2",
8484
"iframe-resizer": "^4.3.2",

‎source/_patterns/01-elements/headline/_headline.hbs‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎source/_patterns/01-elements/headline/_headline.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: Headline
3+
---
4+
5+
## Pulse
6+
7+
You could add the DB Pulse to the headline element by adding the `data-pulse` attribute – we're taking care of sizing it accordingly to the DB logo if this one is also present on the same page, as defined by the rules on the Marketingportal regarding the [logo](https://marketingportal.extranet.deutschebahn.com/de/brandguide/logo-3) and the [pulse](https://marketingportal.extranet.deutschebahn.com/en/pulse).

‎source/_patterns/01-elements/headline/headline-pulse.hbs‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{{> elements-logo }}
2+
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
3+
{{> elements-headline }}

‎source/_patterns/01-elements/headline/headline-pulse.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"type": "2",
3+
"text": "Lorem ipsum dolores sint",
4+
"pulse": true
5+
}

‎source/_patterns/01-elements/headline/headline.hbs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
2+
<h{{ type }} class="elm-headline {{ styleModifier }}"{{#if id}} id="{{id}}"{{/if }}{{#if pulse}} data-pulse{{/if }}>{{ text }}</h{{ type }}>

‎source/_patterns/01-elements/headline/_headline.json‎ renamed to ‎source/_patterns/01-elements/headline/headline.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
2-
"type": "1",
2+
"type": "2",
33
"text": "Lorem ipsum dolores sint"
44
}

‎source/_patterns/01-elements/headline/headline.scss‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
@use "sass:math";
2+
@import "headline.variables";
3+
4+
.elm-headline {
5+
margin-bottom: to-rem($pxValue: 16);
6+
7+
// * TODO: These declarations make sense for the moment, but should get aligned with overall definitions of spacing around elements
8+
margin-top: to-rem($pxValue: 24);
9+
10+
&[data-pulse] {
11+
&::after {
12+
background: var(--db-pulse-background, #ec0016);
13+
border-radius: calc(
14+
var(--db-logo-height, #{$db-logo-default-height}) / 7 * 0.5
15+
);
16+
content: "";
17+
display: block;
18+
margin-bottom: var(--db-pulse-margin-bottom, 14px);
19+
margin-top: calc(
20+
var(--db-logo-height, #{$db-logo-default-height}) * 0.5
21+
);
22+
width: var(--db-logo-width, #{$db-logo-default-width});
23+
height: calc(var(--db-logo-height, #{$db-logo-default-height}) / 7);
24+
}
25+
}
26+
}
27+
28+
h1,
29+
h2,
30+
h3 {
31+
&.elm-headline {
32+
font-family: $db-font-family-headline;
33+
font-weight: 900;
34+
}
35+
}
36+
37+
h1 {
38+
&.elm-headline {
39+
font-size: to-rem(
40+
$pxValue: $rea-main-h1-font-size
41+
); // * TODO: possibly rework variable naming
42+
line-height: math.div(40, $rea-main-h1-font-size);
43+
@media screen and (max-width: 767px) {
44+
font-size: to-rem(
45+
$pxValue: $rea-main-h1-font-size-small
46+
); // * TODO: possibly rework variable naming
47+
line-height: 1.14;
48+
}
49+
}
50+
}
51+
52+
h2 {
53+
&.elm-headline {
54+
font-size: to-rem(
55+
$pxValue: $rea-main-h2-font-size
56+
); // * TODO: possibly rework variable naming
57+
line-height: math.div(28, $rea-main-h2-font-size);
58+
@media screen and (max-width: 767px) {
59+
font-size: to-rem(
60+
$pxValue: $rea-main-h2-font-size-small
61+
); // * TODO: possibly rework variable naming
62+
line-height: 1.2;
63+
}
64+
}
65+
}
66+
67+
h3 {
68+
&.elm-headline {
69+
font-size: to-rem(
70+
$pxValue: $rea-main-h3-font-size
71+
); // * TODO: possibly rework variable naming
72+
line-height: math.div(24, $rea-main-h3-font-size);
73+
@media screen and (max-width: 767px) {
74+
font-size: to-rem(
75+
$pxValue: $rea-main-h3-font-size-small
76+
); // * TODO: possibly rework variable naming
77+
line-height: 1.33;
78+
}
79+
}
80+
}
81+
82+
h4 {
83+
&.elm-headline {
84+
font-size: to-rem(
85+
$pxValue: $rea-main-h4-font-size
86+
); // * TODO: possibly rework variable naming
87+
font-weight: 400;
88+
line-height: math.div(24, $rea-main-h4-font-size);
89+
@media screen and (max-width: 767px) {
90+
font-size: to-rem(
91+
$pxValue: $rea-main-h4-font-size-small
92+
); // * TODO: possibly rework variable naming
93+
line-height: 1.25;
94+
}
95+
}
96+
}

0 commit comments

Comments
 (0)