Skip to content

Commit 0b90481

Browse files
mfranzkemfranzke
authored
fix(docs): filenames (#4702)
* fix(docs): corrected several paths * fix(docs): corrected several paths * fix: corrected path * refactor(test): making the path check part of the pipeline * refactor: we need to ignore some migration documents * refactor: updated further path * refactor: we'd have to run build previous to checking the docs path Elsewhere we couldn't determine whether the files exist that are mentioned in the docs
1 parent b6c4408 commit 0b90481

File tree

9 files changed

+31
-30
lines changed

9 files changed

+31
-30
lines changed

‎docs/how-to-develop-a-component.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,9 @@ Starting with `packages/components/src/components/my-awesome-component/my-awesom
2323

2424
1. The most important dependency are the `variables` included via `@use "@db-ux/core-foundations/build/styles/variables";`. They enable you to use e.g. `$db-spacing-fixed-md` for paddings, margins etc.
2525
2. A lot of times you have to force another `font-size` / `line-height`, you can do it with `@use "@db-ux/core-foundations/build/styles/density/font;` and the corresponding placeholder extend: `@extend %db-overwrite-font-size-sm;`.
26-
3. Some components have an 'adaptive' styling. We exclude it in an own file `@use "@db-ux/core-components/build/scss/styles/component";` so you might use this dependency. As a reference look at another component e.g. [`packages/components/src/components/button/button.scss`](../packages/components/src/components/button/button.scss).
26+
3. Some components have an 'adaptive' styling. We exclude it in an own file `@use "@db-ux/core-components/build/styles/internal/component";` so you might use this dependency. As a reference look at another component e.g. [`packages/components/src/components/button/button.scss`](../packages/components/src/components/button/button.scss).
2727
4. If you have to set a specific color (informational, warning, etc.) directly you can use `@use "@db-ux/core-foundations/build/styles/colors";`. You can take a look at the `notification` component for an example `packages/components/src/components/notification/notification.scss` you might use the `@each` to reduce the amount of code for color-variants.
28-
5. To set a fixed icon you might use `@use "@db-ux/core-foundations/build/styles/icon/icons.helpers" as icons;` as dependency and e.g. `@include icons.icon("arrow_forward"), "after");`. For a dynamic icon you could prefer integrating it in HTML code with the `data-icon` attribute.
28+
5. To set a fixed icon you might use `@use "@db-ux/core-foundations/build/styles/icons/icon-helpers" as icons;` as dependency and e.g. `@include icons.icon("arrow_forward", "after");`. For a dynamic icon you could prefer integrating it in HTML code with the `data-icon` attribute.
2929

3030
### Component structure with HTML
3131

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,6 @@
6565
"rm:builds": "npm run rm:builds --workspace=scripts",
6666
"start": "npm run start --workspace=patternhub",
6767
"test": "npm run test --workspace=scripts",
68-
"test:docs-file-references": "node scripts/check-docs.js",
6968
"test:react-core-components": "playwright test --config output/react/playwright.config.ts --ui",
7069
"test:vue-components": "playwright test --config output/vue/playwright.config.ts --ui",
7170
"update:dependency:playwright": "node scripts/github/update-playwright.js"

‎packages/components/README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -70,20 +70,20 @@ If you only need some of the components or some features from [`@db-ux/core-foun
7070
In the case you want to include only some components, and you could do it like this:
7171

7272
```css
73-
/* The theme contains all prop required for components like spacings, colors, ... */
74-
@import "@db-ux/core-foundations/build/styles/default-theme.css";
73+
/* The theme contains all props required for components like spacings, colors, ... */
74+
@import "@db-ux/core-foundations/build/styles/defaults/default-theme.css";
7575
/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
76-
@import "@db-ux/core-foundations/build/styles/fonts/include-rollup.css";
76+
@import "@db-ux/core-foundations/build/styles/fonts/rollup.css";
7777
/* The required styles will normalize css and add focus and default font to body */
78-
@import "@db-ux/core-foundations/build/styles/init/required.css";
79-
/* The default root adds a default color space (neutral) and a density (regular) */
80-
@import "@db-ux/core-foundations/build/styles/init/default-root.css";
78+
@import "@db-ux/core-foundations/build/styles/defaults/default-required.css";
79+
/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */
80+
@import "@db-ux/core-foundations/build/styles/defaults/default-root.css";
8181

8282
/* Optional: Add animations / transitions for components */
8383
@import "@db-ux/core-components/build/styles/component-animations.css";
8484

8585
/* Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components */
86-
@import "@db-ux/core-foundations/build/styles/icons/include-rollup.css";
86+
@import "@db-ux/core-foundations/build/styles/icons/rollup.css";
8787

8888
/* Optional: Add components */
8989
@import "@db-ux/core-components/build/components/button/button.css";

‎packages/components/test/import-styles/simple-button/main.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
// The theme contains all prop required for components like spacings, colors, ...
2-
import '@db-ux/core-foundations/build/styles/default-theme.css';
2+
import '@db-ux/core-foundations/build/styles/defaults/default-theme.css';
33
// The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup)
4-
import '@db-ux/core-foundations/build/styles/fonts/include-rollup.css';
5-
// The required styles will normalize css and add focus and default font to body
6-
import '@db-ux/core-foundations/build/styles/init/required.css';
7-
// The default root adds a default color space (neutral) and a density (regular)
8-
import '@db-ux/core-foundations/build/styles/init/default-root.css';
4+
import '@db-ux/core-foundations/build/styles/fonts/rollup.css';
5+
/* The required styles will normalize css and add focus and default font to body */
6+
import '@db-ux/core-foundations/build/styles/defaults/default-required.css';
7+
/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */
8+
import '@db-ux/core-foundations/build/styles/defaults/default-root.css';
99

1010
// Optional: Add animations / transitions for components
1111
import '@db-ux/core-components/build/styles/component-animations.css';
1212
// Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components
13-
import '@db-ux/core-foundations/build/styles/icons/include-rollup.css';
13+
import '@db-ux/core-foundations/build/styles/icons/rollup.css';
1414

1515
// Optional: Add components
1616
import '@db-ux/core-components/build/components/button/button.css';

‎packages/components/test/import-styles/simple-button/test.css

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
11
/* The theme contains all prop required for components like spacings, colors, ... */
2-
@import url("@db-ux/core-foundations/build/styles/default-theme.css");
2+
@import url("@db-ux/core-foundations/build/styles/defaults/default-theme.css");
33

44
/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
5-
@import url("@db-ux/core-foundations/build/styles/fonts/include-rollup.css");
5+
@import url("@db-ux/core-foundations/build/styles/fonts/rollup.css");
66

77
/* The required styles will normalize css and add focus and default font to body */
8-
@import url("@db-ux/core-foundations/build/styles/init/required.css");
8+
@import url("@db-ux/core-foundations/build/styles/defaults/default-required.css");
99

10-
/* The default root adds a default color space (neutral) and a density (regular) */
11-
@import url("@db-ux/core-foundations/build/styles/init/default-root.css");
10+
/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */
11+
@import url("@db-ux/core-foundations/build/styles/defaults/default-root.css");
1212

1313
/* Optional: Add animations / transitions for components */
1414
@import url("@db-ux/core-components/build/styles/component-animations.css");
1515

1616
/* Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components */
17-
@import url("@db-ux/core-foundations/build/styles/icons/include-rollup.css");
17+
@import url("@db-ux/core-foundations/build/styles/icons/rollup.css");
1818

1919
/* Optional: Add components */
2020
@import url("@db-ux/core-components/build/components/button/button.css");

‎packages/foundations/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -298,7 +298,7 @@ If you want to optimize the size of the loaded styles, you might want to skip lo
298298

299299
```css
300300
/* The theme contains all prop required for components like spacings, colors, etc. You can replace it with your own theme. */
301-
@import "@db-ux/core-foundations/build/styles/default-theme.css";
301+
@import "@db-ux/core-foundations/build/styles/defaults/default-theme.css";
302302
/* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own fonts. */
303303
@import "@db-ux/core-foundations/build/styles/fonts/relative.css";
304304
/* The icon include uses default icons based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own icons. */

‎packages/foundations/docs/Colors.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@
1414

1515
## How to include colors
1616

17-
For **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/color/classes/all.css";` in your root `.css` file.
18-
Or if you only want a single variant e.g. **informational** you can import `@import "@db-ux/core-foundations/build/styles/color/classes/informational.css";`.
17+
For **CSS** and **Tailwind** you need to use the import `@import "@db-ux/core-foundations/build/styles/colors/classes/all.css";` in your root `.css` file.
18+
Or if you only want a single variant e.g. **informational** you can import `@import "@db-ux/core-foundations/build/styles/colors/classes/informational.css";`.
1919

2020
In case that you're either using a bundler (recommended) or importing the CSS within your JavaScript files, please adapt this `@import` syntax accordingly.
2121

22-
For **SCSS** you need to use the import `@use "@db-ux/core-foundations/build/styles/color/placeholder"` in your `.scss` file, where you need to reference the specific variable.
22+
For **SCSS** you need to use the import `@use "@db-ux/core-foundations/build/styles/colors/placeholder"` in your `.scss` file, where you need to reference the specific variable.
2323
Then you can use e.g. **informational** color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`.
2424

2525
## Dark- & Light-Mode

‎scripts/check-docs.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ const config = {
1010
markdownExtensions: ['md', 'mdx'],
1111
// NPM organization prefix to look for
1212
orgPrefix: '@db-ux/',
13-
// Root directory to search from
14-
rootDir: process.cwd(),
13+
// Root directory to search from – as this script is run from the scripts directory, we set it to one level up
14+
rootDir: path.join(process.cwd(), '..'),
1515
// Workspace packages directory (adjust if different)
1616
packagesDir: 'packages',
1717
// Debug mode - set to true to see all references found
@@ -21,7 +21,8 @@ const config = {
2121
'node_modules/**',
2222
'**/node_modules/**',
2323
'.git/**',
24-
'docs/migration/**'
24+
'docs/migration/**',
25+
'showcases/patternhub/public/docs/migration/**'
2526
]
2627
};
2728

‎scripts/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@
6565
"start-showcase:vue": "npm run dev --workspace=vue-showcase",
6666
"start:foundations": "npm run start --workspace=@db-ux/core-foundations",
6767
"test": "npm-run-all --parallel test:*",
68+
"test:docs-file-references": "node check-docs.js",
6869
"test:migration": "npm run test --workspace=@db-ux/core-migration",
6970
"test:scripts": "vitest run --config vitest.config.ts",
7071
"update:icon-fonts": "npm-run-all generate:icon-fonts generate:icon-types"

0 commit comments

Comments
 (0)