diff --git a/e2e/cypress/integration/04-1-data-display/db-logo.spec.js b/e2e/cypress/integration/04-1-data-display/db-logo.spec.js new file mode 100644 index 000000000..167cbbf80 --- /dev/null +++ b/e2e/cypress/integration/04-1-data-display/db-logo.spec.js @@ -0,0 +1,16 @@ +context('db-logo', () => { + beforeEach(() => { + cy.visit('/iframe.html?id=04-data-display-logo-intro--page&viewMode=story'); + }); + + it('db-logo - snapshot', () => { + cy.snap('db-logo', 0.2); + }); + it('logos should have the right class and aria-hidden attribute', function () { + cy.get('db-logo svg') + .first() + .should('have.class', 'elm-logo') + .invoke('attr', 'aria-hidden') + .should('eq', 'true'); + }); +}); diff --git a/e2e/cypress/integration/99-1-showcases/showcases-other-elements.spec.js b/e2e/cypress/integration/99-1-showcases/showcases-other-elements.spec.js index 6a1c4a329..09b7c0787 100644 --- a/e2e/cypress/integration/99-1-showcases/showcases-other-elements.spec.js +++ b/e2e/cypress/integration/99-1-showcases/showcases-other-elements.spec.js @@ -47,6 +47,13 @@ context('showcase', () => { .eq(0) .contains('DB UI Elements components documentation'); + // 7. DbLogo + cy.get('main') + .find('db-logo > svg') + .eq(0) + .should('have.class', 'elm-logo') + .invoke('attr', 'aria-hidden') + .should('eq', 'true'); // }); }); diff --git a/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts b/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts index f1397abaa..841552b7a 100644 --- a/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts +++ b/packages/db-ui-elements-angular/projects/lib/src/db-ui-elements-module.ts @@ -17,6 +17,7 @@ import { DbInput, DbLink, DbLinklist, + DbLogo, DbMeta, DbMetanavigation, DbOverflowMenu, @@ -65,6 +66,7 @@ const DECLARATIONS = [ DbLanguageSwitcher, DbLink, DbLinklist, + DbLogo, DbMainnavigation, DbMeta, DbMetanavigation, diff --git a/packages/db-ui-elements-stencil/src/components/db-headline/db-headline.tsx b/packages/db-ui-elements-stencil/src/components/db-headline/db-headline.tsx index 78818854e..0af45fd5a 100644 --- a/packages/db-ui-elements-stencil/src/components/db-headline/db-headline.tsx +++ b/packages/db-ui-elements-stencil/src/components/db-headline/db-headline.tsx @@ -9,40 +9,44 @@ export class DbHeadline { * The variant attribute specifies the size of the headline. */ @Prop() variant: '1' | '2' | '3' | '4' | '5' | '6' = '3'; + /** + * The pulse attribute determines whether to add a visual DB Pulse to the headline. + */ + @Prop({ reflect: true }) pulse?: boolean = false; render() { switch (this.variant) { case '1': { return ( -

+

); } case '2': { return ( -

+

); } case '4': { return ( -

+

); } case '5': { return ( -
+
); } case '6': { return ( -
+
); @@ -50,7 +54,7 @@ export class DbHeadline { case '3': default: { return ( -

+

); diff --git a/packages/db-ui-elements-stencil/src/components/db-headline/readme.md b/packages/db-ui-elements-stencil/src/components/db-headline/readme.md index afdd1221a..146adc242 100644 --- a/packages/db-ui-elements-stencil/src/components/db-headline/readme.md +++ b/packages/db-ui-elements-stencil/src/components/db-headline/readme.md @@ -7,9 +7,10 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| --------- | --------- | --------------------------------------------------------- | ---------------------------------------- | ------- | -| `variant` | `variant` | The variant attribute specifies the size of the headline. | `"1" \| "2" \| "3" \| "4" \| "5" \| "6"` | `'3'` | +| Property | Attribute | Description | Type | Default | +| --------- | --------- | -------------------------------------------------------------------------------- | ---------------------------------------- | ------- | +| `pulse` | `pulse` | The pulse attribute determines whether to add a visual DB Pulse to the headline. | `boolean` | `false` | +| `variant` | `variant` | The variant attribute specifies the size of the headline. | `"1" \| "2" \| "3" \| "4" \| "5" \| "6"` | `'3'` | ## Dependencies diff --git a/packages/db-ui-elements-stencil/src/components/db-headline/stories/db-headline.intro.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-headline/stories/db-headline.intro.stories.mdx index c50c11f94..ba55c3d1d 100644 --- a/packages/db-ui-elements-stencil/src/components/db-headline/stories/db-headline.intro.stories.mdx +++ b/packages/db-ui-elements-stencil/src/components/db-headline/stories/db-headline.intro.stories.mdx @@ -14,4 +14,13 @@ import Readme from './../readme.md'; Headline 6 +With pulse + + + Headline 1 + Headline 2 + Headline 3 + Headline 4 + + diff --git a/packages/db-ui-elements-stencil/src/components/db-logo/db-logo.scss b/packages/db-ui-elements-stencil/src/components/db-logo/db-logo.scss new file mode 100644 index 000000000..af3bfb661 --- /dev/null +++ b/packages/db-ui-elements-stencil/src/components/db-logo/db-logo.scss @@ -0,0 +1,16 @@ +@import '../general'; +@import 'logo'; + +.elm-logo { + rect { + fill: transparent; + /* stylelint-disable custom-property-pattern */ + fill: var(--db-logo-backgroundColor, transparent); + /* stylelint-enable custom-property-pattern */ + } + + path { + fill: #f01414; + fill: var(--db-logo-color, #f01414); + } +} diff --git a/packages/db-ui-elements-stencil/src/components/db-logo/db-logo.tsx b/packages/db-ui-elements-stencil/src/components/db-logo/db-logo.tsx new file mode 100644 index 000000000..66caced64 --- /dev/null +++ b/packages/db-ui-elements-stencil/src/components/db-logo/db-logo.tsx @@ -0,0 +1,31 @@ +import { Component, h, Prop } from '@stencil/core'; + +@Component({ + tag: 'db-logo', + styleUrl: 'db-logo.scss' +}) +export class DbLogo { + /** + * The size attribute specifies the size of the logo. + */ + @Prop() size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' = 'xlarge'; + + render() { + return ( + + ); + } +} diff --git a/packages/db-ui-elements-stencil/src/components/db-logo/readme.md b/packages/db-ui-elements-stencil/src/components/db-logo/readme.md new file mode 100644 index 000000000..d360bb80e --- /dev/null +++ b/packages/db-ui-elements-stencil/src/components/db-logo/readme.md @@ -0,0 +1,17 @@ +# db-logo + + + + + + +## Properties + +| Property | Attribute | Description | Type | Default | +| -------- | --------- | -------------------------------------------------- | -------------------------------------------------------- | ---------- | +| `size` | `size` | The size attribute specifies the size of the logo. | `"large" \| "medium" \| "small" \| "xlarge" \| "xsmall"` | `'xlarge'` | + + +---------------------------------------------- + +*Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/db-ui-elements-stencil/src/components/db-logo/stories/db-logo.intro.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-logo/stories/db-logo.intro.stories.mdx new file mode 100644 index 000000000..e5e126654 --- /dev/null +++ b/packages/db-ui-elements-stencil/src/components/db-logo/stories/db-logo.intro.stories.mdx @@ -0,0 +1,16 @@ +import { Meta, Canvas } from '@storybook/addon-docs'; +import Readme from './../readme.md'; + + + +<db-logo> + + + + + + + + + + diff --git a/packages/db-ui-elements-stencil/stencil.config.ts b/packages/db-ui-elements-stencil/stencil.config.ts index f6286f791..5ad5e34b4 100644 --- a/packages/db-ui-elements-stencil/stencil.config.ts +++ b/packages/db-ui-elements-stencil/stencil.config.ts @@ -164,6 +164,7 @@ export const config: Config = { `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/image/${getTheme()}`, `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/input/${getTheme()}`, `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/link/${getTheme()}`, + `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/logo/${getTheme()}`, `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/progress/${getTheme()}`, `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/radio/${getTheme()}`, `${getSassPath()}/node_modules/@db-ui/core/sources/_patterns/01-elements/select/${getTheme()}`, diff --git a/showcase/angular-showcase/src/app/components/other-elements/other-elements.component.html b/showcase/angular-showcase/src/app/components/other-elements/other-elements.component.html index fb5f0b07b..dfe31dfaa 100644 --- a/showcase/angular-showcase/src/app/components/other-elements/other-elements.component.html +++ b/showcase/angular-showcase/src/app/components/other-elements/other-elements.component.html @@ -30,4 +30,6 @@ DB UI Elements components documentation +

DbLogo:

+ diff --git a/showcase/react-showcase/src/components/other-elements/index.js b/showcase/react-showcase/src/components/other-elements/index.js index 8bf97452b..a49a4aff9 100644 --- a/showcase/react-showcase/src/components/other-elements/index.js +++ b/showcase/react-showcase/src/components/other-elements/index.js @@ -2,6 +2,7 @@ import { DbIcon, DbImage, DbLink, + DbLogo, DbProgress, DbTag, DbChip @@ -17,6 +18,8 @@ function OtherElements() { default informative success +

DbLogo:

+

DbChip:

default diff --git a/showcase/vue-showcase/src/components/other-elements/OtherElements.vue b/showcase/vue-showcase/src/components/other-elements/OtherElements.vue index 4428d2f31..498a6e3f5 100644 --- a/showcase/vue-showcase/src/components/other-elements/OtherElements.vue +++ b/showcase/vue-showcase/src/components/other-elements/OtherElements.vue @@ -5,6 +5,7 @@ import { DbTag, DbImage, DbLink, + DbLogo, DbChip } from '@db-ui/v-elements-enterprise/dist/components'; @@ -15,6 +16,8 @@ import {

DbProgress:

+

DbLogo:

+

DbTag:

default informative