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

Author: mfranzke

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

@@ -23,9 +23,9 @@ Starting with `packages/components/src/components/my-awesome-component/my-awesom
 
 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.
 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;`.
-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).
+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).
 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.
-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.
+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.
 
 ### Component structure with HTML
 

package.json

@@ -65,7 +65,6 @@
     "rm:builds": "npm run rm:builds --workspace=scripts",
     "start": "npm run start --workspace=patternhub",
     "test": "npm run test --workspace=scripts",
-    "test:docs-file-references": "node scripts/check-docs.js",
     "test:react-core-components": "playwright test --config output/react/playwright.config.ts --ui",
     "test:vue-components": "playwright test --config output/vue/playwright.config.ts --ui",
     "update:dependency:playwright": "node scripts/github/update-playwright.js"

packages/components/README.md

@@ -70,20 +70,20 @@ If you only need some of the components or some features from [`@db-ux/core-foun
 In the case you want to include only some components, and you could do it like this:
 
 ```css
-/* The theme contains all prop required for components like spacings, colors, ... */
-@import "@db-ux/core-foundations/build/styles/default-theme.css";
+/* The theme contains all props required for components like spacings, colors, ... */
+@import "@db-ux/core-foundations/build/styles/defaults/default-theme.css";
 /* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
-@import "@db-ux/core-foundations/build/styles/fonts/include-rollup.css";
+@import "@db-ux/core-foundations/build/styles/fonts/rollup.css";
 /* The required styles will normalize css and add focus and default font to body */
-@import "@db-ux/core-foundations/build/styles/init/required.css";
-/* The default root adds a default color space (neutral) and a density (regular) */
-@import "@db-ux/core-foundations/build/styles/init/default-root.css";
+@import "@db-ux/core-foundations/build/styles/defaults/default-required.css";
+/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */
+@import "@db-ux/core-foundations/build/styles/defaults/default-root.css";
 
 /* Optional: Add animations / transitions for components */
 @import "@db-ux/core-components/build/styles/component-animations.css";
 
 /* Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components */
-@import "@db-ux/core-foundations/build/styles/icons/include-rollup.css";
+@import "@db-ux/core-foundations/build/styles/icons/rollup.css";
 
 /* Optional: Add components */
 @import "@db-ux/core-components/build/components/button/button.css";

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

@@ -1,16 +1,16 @@
 // The theme contains all prop required for components like spacings, colors, ...
-import '@db-ux/core-foundations/build/styles/default-theme.css';
+import '@db-ux/core-foundations/build/styles/defaults/default-theme.css';
 // The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup)
-import '@db-ux/core-foundations/build/styles/fonts/include-rollup.css';
-// The required styles will normalize css and add focus and default font to body
-import '@db-ux/core-foundations/build/styles/init/required.css';
-// The default root adds a default color space (neutral) and a density (regular)
-import '@db-ux/core-foundations/build/styles/init/default-root.css';
+import '@db-ux/core-foundations/build/styles/fonts/rollup.css';
+/* The required styles will normalize css and add focus and default font to body */
+import '@db-ux/core-foundations/build/styles/defaults/default-required.css';
+/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */
+import '@db-ux/core-foundations/build/styles/defaults/default-root.css';
 
 // Optional: Add animations / transitions for components
 import '@db-ux/core-components/build/styles/component-animations.css';
 // Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components
-import '@db-ux/core-foundations/build/styles/icons/include-rollup.css';
+import '@db-ux/core-foundations/build/styles/icons/rollup.css';
 
 // Optional: Add components
 import '@db-ux/core-components/build/components/button/button.css';

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

@@ -1,20 +1,20 @@
 /* The theme contains all prop required for components like spacings, colors, ... */
-@import url("@db-ux/core-foundations/build/styles/default-theme.css");
+@import url("@db-ux/core-foundations/build/styles/defaults/default-theme.css");
 
 /* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup) */
-@import url("@db-ux/core-foundations/build/styles/fonts/include-rollup.css");
+@import url("@db-ux/core-foundations/build/styles/fonts/rollup.css");
 
 /* The required styles will normalize css and add focus and default font to body */
-@import url("@db-ux/core-foundations/build/styles/init/required.css");
+@import url("@db-ux/core-foundations/build/styles/defaults/default-required.css");
 
-/* The default root adds a default color space (neutral) and a density (regular) */
-@import url("@db-ux/core-foundations/build/styles/init/default-root.css");
+/* The default setting for :root, adds a color space (neutral-bg-basic-level-1) and a density (regular). */
+@import url("@db-ux/core-foundations/build/styles/defaults/default-root.css");
 
 /* Optional: Add animations / transitions for components */
 @import url("@db-ux/core-components/build/styles/component-animations.css");
 
 /* Optional: Add data-icon/data-icon-trailing to global attributes to enable icons for components */
-@import url("@db-ux/core-foundations/build/styles/icons/include-rollup.css");
+@import url("@db-ux/core-foundations/build/styles/icons/rollup.css");
 
 /* Optional: Add components */
 @import url("@db-ux/core-components/build/components/button/button.css");

packages/foundations/README.md

@@ -298,7 +298,7 @@ If you want to optimize the size of the loaded styles, you might want to skip lo
 
 ```css
 /* The theme contains all prop required for components like spacings, colors, etc. You can replace it with your own theme. */
-@import "@db-ux/core-foundations/build/styles/default-theme.css";
+@import "@db-ux/core-foundations/build/styles/defaults/default-theme.css";
 /* The font include uses default font families based on your bundling paths (relative, absolute, webpack, rollup). You can replace it with your own fonts. */
 @import "@db-ux/core-foundations/build/styles/fonts/relative.css";
 /* 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

@@ -14,12 +14,12 @@
 
 ## How to include colors
 
-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.
-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";`.
+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.
+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";`.
 
 In case that you're either using a bundler (recommended) or importing the CSS within your JavaScript files, please adapt this `@import` syntax accordingly.
 
-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.
+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.
 Then you can use e.g. **informational** color by extending our SCSS placeholders like this: `@extend %db-informational-bg-1`.
 
 ## Dark- & Light-Mode

scripts/check-docs.js

@@ -10,8 +10,8 @@ const config = {
 	markdownExtensions: ['md', 'mdx'],
 	// NPM organization prefix to look for
 	orgPrefix: '@db-ux/',
-	// Root directory to search from
-	rootDir: process.cwd(),
+	// Root directory to search from – as this script is run from the scripts directory, we set it to one level up
+	rootDir: path.join(process.cwd(), '..'),
 	// Workspace packages directory (adjust if different)
 	packagesDir: 'packages',
 	// Debug mode - set to true to see all references found
@@ -21,7 +21,8 @@ const config = {
 		'node_modules/**',
 		'**/node_modules/**',
 		'.git/**',
-		'docs/migration/**'
+		'docs/migration/**',
+		'showcases/patternhub/public/docs/migration/**'
 	]
 };
 

scripts/package.json

@@ -65,6 +65,7 @@
     "start-showcase:vue": "npm run dev --workspace=vue-showcase",
     "start:foundations": "npm run start --workspace=@db-ux/core-foundations",
     "test": "npm-run-all --parallel test:*",
+    "test:docs-file-references": "node check-docs.js",
     "test:migration": "npm run test --workspace=@db-ux/core-migration",
     "test:scripts": "vitest run --config vitest.config.ts",
     "update:icon-fonts": "npm-run-all generate:icon-fonts generate:icon-types"