Skip to content

Commit 9b388bb

Browse files
mfranzkemfranzke
authored
feat(logo): integrate sizes and related pulse as an option for headlines (#570)
* refactor: added pulse property * chore: regenerated package-lock.json * feat: added logo element
1 parent 2ca4687 commit 9b388bb

File tree

14 files changed

+137
-9
lines changed

14 files changed

+137
-9
lines changed

‎e2e/cypress/integration/04-1-data-display/db-logo.spec.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
context('db-logo', () => {
2+
beforeEach(() => {
3+
cy.visit('/iframe.html?id=04-data-display-logo-intro--page&viewMode=story');
4+
});
5+
6+
it('db-logo - snapshot', () => {
7+
cy.snap('db-logo', 0.2);
8+
});
9+
it('logos should have the right class and aria-hidden attribute', function () {
10+
cy.get('db-logo svg')
11+
.first()
12+
.should('have.class', 'elm-logo')
13+
.invoke('attr', 'aria-hidden')
14+
.should('eq', 'true');
15+
});
16+
});

‎e2e/cypress/integration/99-1-showcases/showcases-other-elements.spec.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,13 @@ context('showcase', () => {
4747
.eq(0)
4848
.contains('DB UI Elements components documentation');
4949

50+
// 7. DbLogo
51+
cy.get('main')
52+
.find('db-logo > svg')
53+
.eq(0)
54+
.should('have.class', 'elm-logo')
55+
.invoke('attr', 'aria-hidden')
56+
.should('eq', 'true');
5057
//
5158
});
5259
});

‎packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {
1717
DbInput,
1818
DbLink,
1919
DbLinklist,
20+
DbLogo,
2021
DbMeta,
2122
DbMetanavigation,
2223
DbOverflowMenu,
@@ -65,6 +66,7 @@ const DECLARATIONS = [
6566
DbLanguageSwitcher,
6667
DbLink,
6768
DbLinklist,
69+
DbLogo,
6870
DbMainnavigation,
6971
DbMeta,
7072
DbMetanavigation,

‎packages/db-ui-elements-stencil/src/components/db-headline/db-headline.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,48 +9,52 @@ export class DbHeadline {
99
* The variant attribute specifies the size of the headline.
1010
*/
1111
@Prop() variant: '1' | '2' | '3' | '4' | '5' | '6' = '3';
12+
/**
13+
* The pulse attribute determines whether to add a visual DB Pulse to the headline.
14+
*/
15+
@Prop({ reflect: true }) pulse?: boolean = false;
1216

1317
render() {
1418
switch (this.variant) {
1519
case '1': {
1620
return (
17-
<h1 class="elm-headline">
21+
<h1 class="elm-headline" data-pulse={this.pulse}>
1822
<slot />
1923
</h1>
2024
);
2125
}
2226
case '2': {
2327
return (
24-
<h2 class="elm-headline">
28+
<h2 class="elm-headline" data-pulse={this.pulse}>
2529
<slot />
2630
</h2>
2731
);
2832
}
2933
case '4': {
3034
return (
31-
<h4 class="elm-headline">
35+
<h4 class="elm-headline" data-pulse={this.pulse}>
3236
<slot />
3337
</h4>
3438
);
3539
}
3640
case '5': {
3741
return (
38-
<h5 class="elm-headline">
42+
<h5 class="elm-headline" data-pulse={this.pulse}>
3943
<slot />
4044
</h5>
4145
);
4246
}
4347
case '6': {
4448
return (
45-
<h6 class="elm-headline">
49+
<h6 class="elm-headline" data-pulse={this.pulse}>
4650
<slot />
4751
</h6>
4852
);
4953
}
5054
case '3':
5155
default: {
5256
return (
53-
<h3 class="elm-headline">
57+
<h3 class="elm-headline" data-pulse={this.pulse}>
5458
<slot />
5559
</h3>
5660
);

‎packages/db-ui-elements-stencil/src/components/db-headline/readme.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,10 @@
77

88
## Properties
99

10-
| Property | Attribute | Description | Type | Default |
11-
| --------- | --------- | --------------------------------------------------------- | ---------------------------------------- | ------- |
12-
| `variant` | `variant` | The variant attribute specifies the size of the headline. | `"1" \| "2" \| "3" \| "4" \| "5" \| "6"` | `'3'` |
10+
| Property | Attribute | Description | Type | Default |
11+
| --------- | --------- | -------------------------------------------------------------------------------- | ---------------------------------------- | ------- |
12+
| `pulse` | `pulse` | The pulse attribute determines whether to add a visual DB Pulse to the headline. | `boolean` | `false` |
13+
| `variant` | `variant` | The variant attribute specifies the size of the headline. | `"1" \| "2" \| "3" \| "4" \| "5" \| "6"` | `'3'` |
1314

1415

1516
## Dependencies

‎packages/db-ui-elements-stencil/src/components/db-headline/stories/db-headline.intro.stories.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,13 @@ import Readme from './../readme.md';
1414
<db-headline variant="6">Headline 6</db-headline>
1515
</Canvas>
1616

17+
<db-headline variant="2">With pulse</db-headline>
18+
19+
<Canvas>
20+
<db-headline variant="1" pulse>Headline 1</db-headline>
21+
<db-headline variant="2" pulse>Headline 2</db-headline>
22+
<db-headline pulse>Headline 3</db-headline>
23+
<db-headline variant="4" pulse>Headline 4</db-headline>
24+
</Canvas>
25+
1726
<Readme />

‎packages/db-ui-elements-stencil/src/components/db-logo/db-logo.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
@import '../general';
2+
@import 'logo';
3+
4+
.elm-logo {
5+
rect {
6+
fill: transparent;
7+
/* stylelint-disable custom-property-pattern */
8+
fill: var(--db-logo-backgroundColor, transparent);
9+
/* stylelint-enable custom-property-pattern */
10+
}
11+
12+
path {
13+
fill: #f01414;
14+
fill: var(--db-logo-color, #f01414);
15+
}
16+
}

‎packages/db-ui-elements-stencil/src/components/db-logo/db-logo.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { Component, h, Prop } from '@stencil/core';
2+
3+
@Component({
4+
tag: 'db-logo',
5+
styleUrl: 'db-logo.scss'
6+
})
7+
export class DbLogo {
8+
/**
9+
* The size attribute specifies the size of the logo.
10+
*/
11+
@Prop() size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' = 'xlarge';
12+
13+
render() {
14+
return (
15+
<svg
16+
xmlns="http://www.w3.org/2000/svg"
17+
viewBox="0 0 40 28"
18+
id="logo"
19+
aria-hidden="true"
20+
class="elm-logo"
21+
data-size={this.size}
22+
>
23+
<rect x="2" y="2" width="36" height="24" fill="transparent"></rect>
24+
<path
25+
d="M27.2 7.53h-1.43v4.54h1.83c1.53.03 2.47-1.04 2.47-2.27 0-1.63-.96-2.32-2.87-2.27zm.6 7.8h-2.04v4.84h1.84c.7.01 3.07 0 3.07-2.37 0-1.01-.62-2.5-2.87-2.47zm-17.1-7.7h-.83v12.54h1.53c2.58.06 3.77-2.05 3.77-5.97 0-3.6-.41-6.74-4.47-6.57zm18.4-2.76c5.13.02 5.23 4.03 5.23 4.43a4.33 4.33 0 01-3.15 4.13v.14c3.26.79 3.75 3.14 3.75 4.43 0 4.76-4.68 5.02-6.71 5.03h-6.68V4.87h7.56zm-16.9 0c4.7.02 7.23 3.01 7.23 9.03 0 5.29-1.68 9.1-7.23 9.13H5.54V4.87h6.66zm23.7-1.94H4c-.63 0-1.04.5-1.06 1.05l-.01.12v19.7c0 .57.35 1.22.95 1.26l.12.01h31.9c.63 0 1.13-.6 1.16-1.14l.01-.13V4.1a1.2 1.2 0 00-1.17-1.17zm0-2.86c2.1 0 3.97 1.56 4.03 3.63v20.2a4 4 0 01-3.83 4.03H4A3.91 3.91 0 01.07 24.1V3.9A3.8 3.8 0 013.8.07h32.1z"
26+
fill="#f01414"
27+
></path>
28+
</svg>
29+
);
30+
}
31+
}

‎packages/db-ui-elements-stencil/src/components/db-logo/readme.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# db-logo
2+
3+
4+
5+
<!-- Auto Generated Below -->
6+
7+
8+
## Properties
9+
10+
| Property | Attribute | Description | Type | Default |
11+
| -------- | --------- | -------------------------------------------------- | -------------------------------------------------------- | ---------- |
12+
| `size` | `size` | The size attribute specifies the size of the logo. | `"large" \| "medium" \| "small" \| "xlarge" \| "xsmall"` | `'xlarge'` |
13+
14+
15+
----------------------------------------------
16+
17+
*Built with [StencilJS](https://stenciljs.com/)*

‎packages/db-ui-elements-stencil/src/components/db-logo/stories/db-logo.intro.stories.mdx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Meta, Canvas } from '@storybook/addon-docs';
2+
import Readme from './../readme.md';
3+
4+
<Meta title="04-Data-Display/Logo/Intro" />
5+
6+
<db-headline variant="1">&lt;db-logo&gt;</db-headline>
7+
8+
<Canvas>
9+
<db-logo size="xsmall"></db-logo>
10+
<db-logo size="small"></db-logo>
11+
<db-logo size="medium"></db-logo>
12+
<db-logo size="large"></db-logo>
13+
<db-logo></db-logo>
14+
</Canvas>
15+
16+
<Readme />

0 commit comments

Comments
 (0)