feat(logo): integrate sizes and related pulse as an option for headli…

…nes (#171)

* refactor: added headline pulse

* feat: added logo component

* refactor(logo): further optimizations

* chore: added another aspect

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

@@ -0,0 +1,7 @@
+---
+title: Headline
+---
+
+## Pulse
+
+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

@@ -0,0 +1,3 @@
+{{> elements-logo }}
+<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
+{{> elements-headline }}

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

@@ -0,0 +1,5 @@
+{
+	"type": "2",
+	"text": "Lorem ipsum dolores sint",
+	"pulse": true
+}

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

@@ -0,0 +1,2 @@
+<!-- [html-validate-disable-next heading-level -- we're doing some simple demonstration simplification here] -->
+<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 → source/_patterns/01-elements/headline/headline.json

@@ -1,4 +1,4 @@
 {
-	"type": "1",
+	"type": "2",
 	"text": "Lorem ipsum dolores sint"
 }

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

@@ -6,6 +6,23 @@
 
 	// * TODO: These declarations make sense for the moment, but should get aligned with overall definitions of spacing around elements
 	margin-top: to-rem($pxValue: 24);
+
+	&[data-pulse] {
+		&::after {
+			background: var(--db-pulse-background, #ec0016);
+			border-radius: calc(
+				var(--db-logo-height, #{$db-logo-default-height}) / 7 * 0.5
+			);
+			content: "";
+			display: block;
+			margin-bottom: var(--db-pulse-margin-bottom, 14px);
+			margin-top: calc(
+				var(--db-logo-height, #{$db-logo-default-height}) * 0.5
+			);
+			width: var(--db-logo-width, #{$db-logo-default-width});
+			height: calc(var(--db-logo-height, #{$db-logo-default-height}) / 7);
+		}
+	}
 }
 
 h1,

source/_patterns/01-elements/logo/_logo.demonstration.scss

@@ -0,0 +1,41 @@
+.DO-NOT-COPY-THIS-CLASS-example-logo-list {
+	list-style: none;
+
+	padding-left: 0;
+
+	color: $db-color-cool-gray-700;
+
+	li {
+		display: inline-block;
+		box-sizing: border-box;
+
+		margin: 4px;
+		padding: 80px;
+		border-radius: 4px;
+
+		color: $db-color-cool-gray-700;
+
+		&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-cool-gray {
+			background-color: $db-color-cool-gray-100;
+		}
+
+		&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-red {
+			--db-logo-color: #{$db-color-white};
+			background-color: $db-color-red-500;
+		}
+
+		&.DO-NOT-COPY-THIS-CLASS-example-bg-variants-image {
+			--db-logo-backgroundColor: #{$db-color-white};
+			background-image: url("https://marketingportal.extranet.deutschebahn.com/sites/default/files/2021-05-19/Gruppe%20maskieren%2024.png");
+			background-repeat: no-repeat;
+			background-size: cover;
+
+			display: block;
+
+			padding: 20px;
+
+			width: 555px;
+			height: 400px;
+		}
+	}
+}

source/_patterns/01-elements/logo/_logo.md

@@ -0,0 +1,24 @@
+---
+title: Deutsche Bahn Logo
+---
+
+Please find a lot of more information regarding our logo and how to use it within the [Marketingportal](https://marketingportal.extranet.deutschebahn.com/de/logo-3).
+
+## Adapt logos colors (background and fill)
+
+You could easily change the line-colors of the logo as well as the background color by defining different color values for both CSS variables:
+
+- `--db-logo-color`
+- `--db-logo-backgroundColor`
+
+The fallback for an undefined `--db-logo-color` is our DB Red (`#f01414`), and `--db-logo-backgroundColor` would fall back to `transparent`, which is the general background defined by brand.
+
+## Size
+
+### SCSS (recommended)
+
+Extend one of the size SCSS placeholders in case that you don't want the default (xlarge, 58px width, 40px height): `%logo-size-xsmall`, `%logo-size-small`, `%logo-size-medium`, `%logo-size-large` or `%logo-size-xlarge`
+
+### HTML attribute
+
+You could set the different button sizes via the `data-size` attribute, the default is `xlarge` and in that case is optional.

source/_patterns/01-elements/logo/_logo.variables.scss

@@ -0,0 +1 @@
+@import "../../../css/db-ui-core.variables";

source/_patterns/01-elements/logo/logo-on-backgrounds.hbs

@@ -0,0 +1,7 @@
+<ul class="DO-NOT-COPY-THIS-CLASS-example-logo-list">
+	{{#each example-bgs }}
+		<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ variant }}">
+			{{> elements-logo }}
+		</li>
+	{{/each }}
+</ul>

source/_patterns/01-elements/logo/logo-on-backgrounds.json

@@ -0,0 +1,16 @@
+{
+	"example-bgs": [
+		{
+			"variant": "regular"
+		},
+		{
+			"variant": "cool-gray"
+		},
+		{
+			"variant": "red"
+		},
+		{
+			"variant": "image"
+		}
+	]
+}

source/_patterns/01-elements/logo/logo-sizes.hbs

@@ -0,0 +1,7 @@
+<ul class="DO-NOT-COPY-THIS-CLASS-example-logo-list">
+	{{#each sizes }}
+		<li class="DO-NOT-COPY-THIS-CLASS-example-bg-variants-{{ size }}">
+			{{> elements-logo }}
+		</li>
+	{{/each }}
+</ul>

source/_patterns/01-elements/logo/logo-sizes.json

@@ -0,0 +1,19 @@
+{
+	"sizes": [
+		{
+			"size": "xsmall"
+		},
+		{
+			"size": "small"
+		},
+		{
+			"size": "medium"
+		},
+		{
+			"size": "large"
+		},
+		{
+			"size": "xlarge"
+		}
+	]
+}

source/_patterns/01-elements/logo/logo-with-following-headline.hbs

@@ -0,0 +1,2 @@
+{{> elements-logo }}
+{{> elements-headline pulse="true" text="Lorem ipsum dolores sint" type="1" }}

source/_patterns/01-elements/logo/logo.hbs

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+	aria-hidden="true"
+	class="elm-logo"
+	{{#if size }} data-size="{{ size }}"{{/if }}>
+	<use href="../../images/db_logo.svg#logo"></use>
+</svg>

source/_patterns/01-elements/logo/logo.scss

@@ -0,0 +1,71 @@
+@use "sass:map";
+@import "logo.variables";
+
+.elm-logo {
+	$logo-sizes: (
+		"xsmall": (
+			"width": 20px,
+			"height": 14px
+		),
+		"small": (
+			"width": 29px,
+			"height": 20px
+		),
+		"medium": (
+			"width": 34px,
+			"height": 24px
+		),
+		"large": (
+			"width": 40px,
+			"height": 28px
+		),
+		"xlarge": (
+			"width": 56px,
+			"height": 40px
+		)
+	);
+	// aspect-ratio: 10 / 7;
+
+	width: var(--db-logo-width, #{$db-logo-default-width});
+	height: var(--db-logo-height, #{$db-logo-default-height});
+	// Logo safe zone
+	// margin: calc(var(--db-logo-height, #{$db-logo-default-height}) * 0.5);
+
+	&[data-size="xsmall"] {
+		@extend %logo-size-xsmall;
+	}
+
+	&[data-size="small"] {
+		@extend %logo-size-small;
+	}
+
+	&[data-size="medium"] {
+		@extend %logo-size-medium;
+	}
+
+	&[data-size="large"] {
+		@extend %logo-size-large;
+	}
+
+	&[data-size="xlarge"] {
+		@extend %logo-size-xlarge;
+	}
+
+	@each $name, $dimensions in $logo-sizes {
+		&%logo-size-#{$name} {
+			--db-logo-width: #{map.get($dimensions, "width")};
+			--db-logo-height: #{map.get($dimensions, "height")};
+
+			body:has(&) .elm-headline[data-pulse] {
+				--db-logo-width: #{map.get($dimensions, "width")};
+				--db-logo-height: #{map.get($dimensions, "height")};
+			}
+
+			// Legacy browsers
+			& ~ .elm-headline[data-pulse] {
+				--db-logo-width: #{map.get($dimensions, "width")};
+				--db-logo-height: #{map.get($dimensions, "height")};
+			}
+		}
+	}
+}

source/css/_db-ui-core.variables.scss

@@ -13,6 +13,9 @@ $fonts-path: "../../fonts/" !default;
 $dbBaseFontSize: 16px;
 $dbBaseFontSizeSass: 0.0625 !default;
 
+$db-logo-default-width: 58px !default;
+$db-logo-default-height: 40px !default;
+
 $metanavigation-iconOnly--maxWidth: to-rem(656);
 
 // General box-shadow

source/css/enterprise/db-ui-core.demonstration.scss

@@ -12,6 +12,7 @@
 @import "../../_patterns/01-elements/checkbox/enterprise/checkbox.demonstration";
 @import "../../_patterns/01-elements/progress/enterprise/progress.demonstration";
 @import "../../_patterns/01-elements/input/input.demonstration";
+@import "../../_patterns/01-elements/logo/logo.demonstration";
 @import "../../_patterns/01-elements/textarea/textarea.demonstration";
 @import "../../_patterns/01-elements/radio/enterprise/radio.demonstration";
 @import "../../_patterns/01-elements/select/select.demonstration";

source/css/enterprise/db-ui-core.scss

@@ -32,6 +32,8 @@ $partial: false;
 @import "../../_patterns/01-elements/link/enterprise/link";
 /* image */
 @import "../../_patterns/01-elements/image/enterprise/image";
+/* logo */
+@import "../../_patterns/01-elements/logo/logo"; // /enterprise/logo
 
 /* checkbox */
 @import "../../_patterns/01-elements/checkbox/enterprise/checkbox";