From f269407c4bba92a27629d05c7fb81243b6fb7db5 Mon Sep 17 00:00:00 2001 From: Anna Schoderer Date: Tue, 25 Oct 2022 10:45:06 +0200 Subject: [PATCH 1/4] docs: update docs for create-react-app (#111) * Update getStarted.adoc * Update migrationGuide.adoc * chore: added create react app example section * Update getStarted.adoc * Update getStarted.adoc * Update getStarted.adoc Co-authored-by: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> --- docs/getStarted.adoc | 20 +++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) diff --git a/docs/getStarted.adoc b/docs/getStarted.adoc index 56e0df3ab6..d3a2db6256 100644 --- a/docs/getStarted.adoc +++ b/docs/getStarted.adoc @@ -58,7 +58,7 @@ This should add a new entry to your `package.json` file: @import "@db-ui/core/sources/css/enterprise/db-ui-core"; ---- -### SCSS: `node_modules include path / load path +### SCSS: node_modules include path / load path Please keep in mind, that you would need to set your `include path` also known as `load path` depending on your setup for the sass compiler to find the correct `node_modules` folder, e.g. like the following (this is similar to how other frameworks and libraries like link:https://github.com/twbs/bootstrap-npm-starter/blob/main/package.json#L18[Bootstrap] are handling this): @@ -172,6 +172,24 @@ If you want to use the compiled CSS directly, you can refence the css files in y ---- +## Example 2: how to use DB UI Core in Create React app + +Create React App offers only limited access to the configuration of the production build. While it uses webpack under the hood, the webpack configuration is not exposed to the user. +To manage your CRA to work with SASS include Path you have to update or create your _.env_ file: + +---- +SASS_PATH=node_modules +---- + +In addition to get the asset paths working you have to load them separately. Further description is written above within the section _webpack based bundlers_. + +[source,scss] +---- +@import "@db-ui/core/sources/css/webpack.assets-paths"; +@import "@db-ui/core/sources/css/enterprise/db-ui-core"; +---- + + ## Documentation Please find our Architectural Decision Records within the link:adr/[adr subfolder]. From e734ee3a97a53b6bcf35636cf81093f24715c473 Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Tue, 25 Oct 2022 12:44:34 +0200 Subject: [PATCH 2/4] fix: icon rendering in DB UI Elements (#115) --- source/_patterns/00-base/icons/_icons.scss | 1 + source/_patterns/00-base/icons/enterprise/icons.scss | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) diff --git a/source/_patterns/00-base/icons/_icons.scss b/source/_patterns/00-base/icons/_icons.scss index a37b64844d..4311ea8bac 100644 --- a/source/_patterns/00-base/icons/_icons.scss +++ b/source/_patterns/00-base/icons/_icons.scss @@ -1,6 +1,7 @@ // @import "icons.variables"; @import "icons.variables"; +@import "icons.attributes-mappings"; @import "icons.helpers"; @import "icons.custom-properties"; @import "icons.font-faces"; diff --git a/source/_patterns/00-base/icons/enterprise/icons.scss b/source/_patterns/00-base/icons/enterprise/icons.scss index 1750a8b28d..90291fa650 100644 --- a/source/_patterns/00-base/icons/enterprise/icons.scss +++ b/source/_patterns/00-base/icons/enterprise/icons.scss @@ -1,6 +1,5 @@ @import "icons.variables"; -@import "../icons.attributes-mappings"; @import "icons.custom-properties"; @import "icons.font-faces"; @import "../icons"; From a2859b5ec3d784ae535af86189aa0e6fe52e872a Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Tue, 25 Oct 2022 12:50:01 +0200 Subject: [PATCH 3/4] chore: aligned header background-colors (#110) chore: aligned background-color by header area and mainnavigation component --- .../mainnavigation/_mainnavigation.variables.scss | 1 + .../02-components/mainnavigation/mainnavigation.scss | 4 ++-- source/_patterns/03-areas/00-header/_header.variables.scss | 2 -- 3 files changed, 3 insertions(+), 4 deletions(-) diff --git a/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss b/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss index ddc4544270..82e1065876 100644 --- a/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss +++ b/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss @@ -3,6 +3,7 @@ @import "../../00-base/icons/icons.helpers"; $header-big-link-paddingTop: 32 * 0.0625 !default; +$header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color // * reduced height // $header-big-link-paddingTop: 19*0.0625 !default; diff --git a/source/_patterns/02-components/mainnavigation/mainnavigation.scss b/source/_patterns/02-components/mainnavigation/mainnavigation.scss index 83c92d3a46..2fd6888d20 100644 --- a/source/_patterns/02-components/mainnavigation/mainnavigation.scss +++ b/source/_patterns/02-components/mainnavigation/mainnavigation.scss @@ -36,7 +36,7 @@ @include icon(glyph(menu), 24, "outline", $partial: $partial); @include icon(glyph(close), 24, "outline", "after", $partial: $partial); - background-color: #fdfdfd; // TODO: This would need to get replaced by the correct (semantic) color + background-color: $header---backgroundColor; // TODO: This would need to get replaced by the correct (semantic) color border-bottom: 1px solid $db-color-warm-gray-100; @@ -79,7 +79,7 @@ } ul { - background-color: #fff; + background-color: $header---backgroundColor; } // Multiple level navigation diff --git a/source/_patterns/03-areas/00-header/_header.variables.scss b/source/_patterns/03-areas/00-header/_header.variables.scss index d730c9a105..b887805fff 100644 --- a/source/_patterns/03-areas/00-header/_header.variables.scss +++ b/source/_patterns/03-areas/00-header/_header.variables.scss @@ -13,5 +13,3 @@ $header---borderBottom: #{to-rem( $header---marginBottom: to-rem( $pxValue: 16 ) !default; - -$header---backgroundColor: #fdfdfd !default; // TODO: This would need to get replaced by the correct (semantic) color From 7a8b71212736eacdd2d3d0ddcde51ce5e2e87518 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 25 Oct 2022 18:03:47 +0000 Subject: [PATCH 4/4] build(deps-dev): bump html-validate from 7.7.0 to 7.7.1 Bumps [html-validate](https://gitlab.com/html-validate/html-validate) from 7.7.0 to 7.7.1. - [Release notes](https://gitlab.com/html-validate/html-validate/tags) - [Changelog](https://gitlab.com/html-validate/html-validate/blob/master/CHANGELOG.md) - [Commits](https://gitlab.com/html-validate/html-validate/compare/v7.7.0...v7.7.1) --- updated-dependencies: - dependency-name: html-validate dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 090bddb1b1..00acb941ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,7 +30,7 @@ "dialog-polyfill": "^0.5.6", "dotenv": "^16.0.3", "find-versions-cli": "^4.0.0", - "html-validate": "^7.7.0", + "html-validate": "^7.7.1", "html5-boilerplate": "^8.0.0", "husky": "^8.0.1", "iframe-resizer": "^4.3.2", @@ -7988,9 +7988,9 @@ } }, "node_modules/html-validate": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/html-validate/-/html-validate-7.7.0.tgz", - "integrity": "sha512-8/abZs9ta2gkbNcBNh3ciSkUBop6kb4GNmnxsgHSS9VF2AN71h0JddufmsHeZHovgJwXhkEkaouK0NUG99He9w==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/html-validate/-/html-validate-7.7.1.tgz", + "integrity": "sha512-pCPbFHygd8YCKcQcyQnEwIWKVtA37f0snQP65EsS9ap4JrnG0HdIevJl90p8ZAhGjLsex5P0nI+n6v4pSov97Q==", "dev": true, "dependencies": { "@babel/code-frame": "^7.10.0", @@ -22673,9 +22673,9 @@ "dev": true }, "html-validate": { - "version": "7.7.0", - "resolved": "https://registry.npmjs.org/html-validate/-/html-validate-7.7.0.tgz", - "integrity": "sha512-8/abZs9ta2gkbNcBNh3ciSkUBop6kb4GNmnxsgHSS9VF2AN71h0JddufmsHeZHovgJwXhkEkaouK0NUG99He9w==", + "version": "7.7.1", + "resolved": "https://registry.npmjs.org/html-validate/-/html-validate-7.7.1.tgz", + "integrity": "sha512-pCPbFHygd8YCKcQcyQnEwIWKVtA37f0snQP65EsS9ap4JrnG0HdIevJl90p8ZAhGjLsex5P0nI+n6v4pSov97Q==", "dev": true, "requires": { "@babel/code-frame": "^7.10.0", diff --git a/package.json b/package.json index e58729260b..5221916e66 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,7 @@ "dialog-polyfill": "^0.5.6", "dotenv": "^16.0.3", "find-versions-cli": "^4.0.0", - "html-validate": "^7.7.0", + "html-validate": "^7.7.1", "html5-boilerplate": "^8.0.0", "husky": "^8.0.1", "iframe-resizer": "^4.3.2",