From 0c56e789778d28831f70a18fe837735743e8372b Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 17 Nov 2022 16:35:58 +0100 Subject: [PATCH 1/9] refactor: added pulse property --- .../src/components/db-headline/db-headline.tsx | 16 ++++++++++------ .../src/components/db-headline/readme.md | 7 ++++--- .../stories/db-headline.intro.stories.mdx | 9 +++++++++ 3 files changed, 23 insertions(+), 9 deletions(-) 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 + + From c85e8f6237a63a74dd5e96bd5e059512ee0ac8ba Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 17 Nov 2022 16:37:35 +0100 Subject: [PATCH 2/9] chore: regenerated package-lock.json --- showcase/angular-showcase/package-lock.json | 69 +++++++++++---------- 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/showcase/angular-showcase/package-lock.json b/showcase/angular-showcase/package-lock.json index 105be8f55..56648f910 100644 --- a/showcase/angular-showcase/package-lock.json +++ b/showcase/angular-showcase/package-lock.json @@ -38,48 +38,52 @@ } }, "../../node_modules/@db-ui/core": { - "version": "0.0.1", + "version": "2.3.0", + "license": "Apache-2.0", "dependencies": { - "@babel/cli": "^7.19.3", - "@babel/preset-env": "^7.19.3", - "@commitlint/cli": "^17.1.2", - "@commitlint/config-conventional": "^17.1.0", "@csstools/normalize.css": "^12.0.0", - "@db-ui/base": "^0.17.0", + "@db-ui/base": "^0.19.1" + }, + "devDependencies": { + "@babel/cli": "^7.19.3", + "@babel/preset-env": "^7.20.2", + "@commitlint/cli": "^17.2.0", + "@commitlint/config-conventional": "^17.2.0", "@mfranzke/plugin-node-uiextension": "^1.0.0", "@pattern-lab/cli": "^5.17.0", "@pattern-lab/core": "^5.17.0", "@pattern-lab/engine-handlebars": "^5.16.4", "@pattern-lab/starterkit-handlebars-demo": "^5.16.4", "@pattern-lab/uikit-workshop": "^5.17.0", - "@wemake-services/stylelint-config-scss": "^1.0.0", - "autoprefixer": "^10.4.12", - "backstopjs": "^6.1.3", + "autoprefixer": "^10.4.13", + "backstopjs": "^6.1.4", "cpr": "^3.0.1", "details-element-polyfill": "^2.4.0", "dialog-polyfill": "^0.5.6", "dotenv": "^16.0.3", "find-versions-cli": "^4.0.0", - "html-validate": "^7.5.0", + "html-validate": "^7.9.0", "html5-boilerplate": "^8.0.0", - "husky": "^8.0.1", + "husky": "^8.0.2", "iframe-resizer": "^4.3.2", + "markdownlint-cli": "^0.32.2", "nodemon": "^2.0.20", "npm-run-all": "^4.1.5", "pa11y-ci": "^3.0.1", - "postcss": "^8.4.17", + "postcss": "^8.4.19", "postcss-cli": "^10.0.0", "postcss-focus": "^5.0.1", "postcss-list-style-safari-fix": "^1.0.0", "prettier": "^2.5.1", "pretty-quick": "^3.1.3", "rimraf": "^3.0.2", - "sass": "^1.55.0", - "stylelint": "^14.13.0", - "stylelint-config-prettier": "^9.0.3", + "sass": "^1.56.1", + "start-server-and-test": "^1.14.0", + "stylelint": "^14.15.0", + "stylelint-config-prettier": "^9.0.4", "stylelint-config-sass-guidelines": "^9.0.1", - "stylelint-config-standard-scss": "^3.0.0", - "xo": "^0.52.4" + "validate-branch-name": "^1.3.0", + "xo": "^0.53.0" } }, "../../packages/db-ui-elements-angular": { @@ -22577,45 +22581,46 @@ "version": "file:../../node_modules/@db-ui/core", "requires": { "@babel/cli": "^7.19.3", - "@babel/preset-env": "^7.19.3", - "@commitlint/cli": "^17.1.2", - "@commitlint/config-conventional": "^17.1.0", + "@babel/preset-env": "^7.20.2", + "@commitlint/cli": "^17.2.0", + "@commitlint/config-conventional": "^17.2.0", "@csstools/normalize.css": "^12.0.0", - "@db-ui/base": "^0.17.0", + "@db-ui/base": "^0.19.1", "@mfranzke/plugin-node-uiextension": "^1.0.0", "@pattern-lab/cli": "^5.17.0", "@pattern-lab/core": "^5.17.0", "@pattern-lab/engine-handlebars": "^5.16.4", "@pattern-lab/starterkit-handlebars-demo": "^5.16.4", "@pattern-lab/uikit-workshop": "^5.17.0", - "@wemake-services/stylelint-config-scss": "^1.0.0", - "autoprefixer": "^10.4.12", - "backstopjs": "^6.1.3", + "autoprefixer": "^10.4.13", + "backstopjs": "^6.1.4", "cpr": "^3.0.1", "details-element-polyfill": "^2.4.0", "dialog-polyfill": "^0.5.6", "dotenv": "^16.0.3", "find-versions-cli": "^4.0.0", - "html-validate": "^7.5.0", + "html-validate": "^7.9.0", "html5-boilerplate": "^8.0.0", - "husky": "^8.0.1", + "husky": "^8.0.2", "iframe-resizer": "^4.3.2", + "markdownlint-cli": "^0.32.2", "nodemon": "^2.0.20", "npm-run-all": "^4.1.5", "pa11y-ci": "^3.0.1", - "postcss": "^8.4.17", + "postcss": "^8.4.19", "postcss-cli": "^10.0.0", "postcss-focus": "^5.0.1", "postcss-list-style-safari-fix": "^1.0.0", "prettier": "^2.5.1", "pretty-quick": "^3.1.3", "rimraf": "^3.0.2", - "sass": "^1.55.0", - "stylelint": "^14.13.0", - "stylelint-config-prettier": "^9.0.3", + "sass": "^1.56.1", + "start-server-and-test": "^1.14.0", + "stylelint": "^14.15.0", + "stylelint-config-prettier": "^9.0.4", "stylelint-config-sass-guidelines": "^9.0.1", - "stylelint-config-standard-scss": "^3.0.0", - "xo": "^0.52.4" + "validate-branch-name": "^1.3.0", + "xo": "^0.53.0" } }, "@db-ui/ngx-elements-enterprise": { From 9618173297f0c425cfb386d2b0a4f1dcc4462702 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Thu, 17 Nov 2022 17:45:46 +0100 Subject: [PATCH 3/9] feat: added logo element --- .../04-1-data-display/db-logo.spec.js | 16 ++++++++++ .../projects/lib/src/db-ui-elements-module.ts | 2 ++ .../src/components/db-logo/db-logo.scss | 16 ++++++++++ .../src/components/db-logo/db-logo.tsx | 29 +++++++++++++++++++ .../src/components/db-logo/readme.md | 17 +++++++++++ .../db-logo/stories/db-logo.intro.stories.mdx | 16 ++++++++++ .../db-ui-elements-stencil/stencil.config.ts | 1 + .../src/components/other-elements/index.js | 2 ++ .../other-elements/OtherElements.vue | 2 ++ 9 files changed, 101 insertions(+) create mode 100644 e2e/cypress/integration/04-1-data-display/db-logo.spec.js create mode 100644 packages/db-ui-elements-stencil/src/components/db-logo/db-logo.scss create mode 100644 packages/db-ui-elements-stencil/src/components/db-logo/db-logo.tsx create mode 100644 packages/db-ui-elements-stencil/src/components/db-logo/readme.md create mode 100644 packages/db-ui-elements-stencil/src/components/db-logo/stories/db-logo.intro.stories.mdx 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..cb491c40f --- /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 > figure > img') + .first() + .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-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..2bade91b5 --- /dev/null +++ b/packages/db-ui-elements-stencil/src/components/db-logo/db-logo.tsx @@ -0,0 +1,29 @@ +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() { + ; + } +} 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/react-showcase/src/components/other-elements/index.js b/showcase/react-showcase/src/components/other-elements/index.js index 8bf97452b..eb0b16ae3 100644 --- a/showcase/react-showcase/src/components/other-elements/index.js +++ b/showcase/react-showcase/src/components/other-elements/index.js @@ -17,6 +17,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..6a35a1b32 100644 --- a/showcase/vue-showcase/src/components/other-elements/OtherElements.vue +++ b/showcase/vue-showcase/src/components/other-elements/OtherElements.vue @@ -17,6 +17,8 @@ import {

DbTag:

default +

DbLogo:

+ informative success

DbChip:

From 81f1e9d51a2c2fb097874a64a7bfdac8d5720100 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 7 Feb 2023 14:49:30 +0100 Subject: [PATCH 4/9] fix: we obviously even also need to import those components --- showcase/react-showcase/src/components/other-elements/index.js | 1 + .../vue-showcase/src/components/other-elements/OtherElements.vue | 1 + 2 files changed, 2 insertions(+) diff --git a/showcase/react-showcase/src/components/other-elements/index.js b/showcase/react-showcase/src/components/other-elements/index.js index eb0b16ae3..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 diff --git a/showcase/vue-showcase/src/components/other-elements/OtherElements.vue b/showcase/vue-showcase/src/components/other-elements/OtherElements.vue index 6a35a1b32..7803c6eda 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'; From cabf7e46f878a18564c4b9a79f279708adbc6bac Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 7 Feb 2023 15:27:53 +0100 Subject: [PATCH 5/9] fix: adapted testcase --- e2e/cypress/integration/04-1-data-display/db-logo.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index cb491c40f..167cbbf80 100644 --- a/e2e/cypress/integration/04-1-data-display/db-logo.spec.js +++ b/e2e/cypress/integration/04-1-data-display/db-logo.spec.js @@ -7,7 +7,7 @@ context('db-logo', () => { cy.snap('db-logo', 0.2); }); it('logos should have the right class and aria-hidden attribute', function () { - cy.get('db-logo > figure > img') + cy.get('db-logo svg') .first() .should('have.class', 'elm-logo') .invoke('attr', 'aria-hidden') From ed9302f03fe31d0bfbd265d418e3820aba933ce9 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 7 Feb 2023 15:33:03 +0100 Subject: [PATCH 6/9] fix: missing return --- .../src/components/db-logo/db-logo.tsx | 30 ++++++++++--------- 1 file changed, 16 insertions(+), 14 deletions(-) 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 index 2bade91b5..66caced64 100644 --- 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 @@ -11,19 +11,21 @@ export class DbLogo { @Prop() size: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' = 'xlarge'; render() { - ; + return ( + + ); } } From 47ac3fe22588f11479e214e7c9b8ace77cdb7a76 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 7 Feb 2023 16:27:37 +0100 Subject: [PATCH 7/9] test: added cypress test --- .../99-1-showcases/showcases-other-elements.spec.js | 7 +++++++ 1 file changed, 7 insertions(+) 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'); // }); }); From b44d75be08e712a827b5baa6f137329f72e81289 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke Date: Tue, 7 Feb 2023 16:28:20 +0100 Subject: [PATCH 8/9] docs: added logo to Angular showcase --- .../app/components/other-elements/other-elements.component.html | 2 ++ 1 file changed, 2 insertions(+) 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:

+ From 61aff55d49cc35db6644f42feb2e60e0ff81e005 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Wed, 8 Feb 2023 07:57:13 +0100 Subject: [PATCH 9/9] Update OtherElements.vue --- .../src/components/other-elements/OtherElements.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/showcase/vue-showcase/src/components/other-elements/OtherElements.vue b/showcase/vue-showcase/src/components/other-elements/OtherElements.vue index 7803c6eda..498a6e3f5 100644 --- a/showcase/vue-showcase/src/components/other-elements/OtherElements.vue +++ b/showcase/vue-showcase/src/components/other-elements/OtherElements.vue @@ -16,10 +16,10 @@ import {

DbProgress:

-

DbTag:

- default

DbLogo:

+

DbTag:

+ default informative success

DbChip: