diff --git a/docs/getStarted.adoc b/docs/getStarted.adoc index 56e0df3ab6a..d3a2db6256b 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]. diff --git a/package-lock.json b/package-lock.json index 090bddb1b1e..00acb941efc 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 e58729260bd..5221916e667 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", diff --git a/source/_patterns/00-base/icons/_icons.scss b/source/_patterns/00-base/icons/_icons.scss index a37b64844d2..4311ea8bac8 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 1750a8b28de..90291fa650f 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"; diff --git a/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss b/source/_patterns/02-components/mainnavigation/_mainnavigation.variables.scss index ddc45442705..82e1065876e 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 83c92d3a46a..2fd6888d209 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 d730c9a1058..b887805fffa 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