refactor(docs): remove example-styles project

ix.code-workspace

@@ -52,10 +52,6 @@
       "name": "eslint-config",
       "path": "./packages/eslint-config-ix"
     },
-    {
-      "name": "example-styles",
-      "path": "./packages/example-styles"
-    },
     {
       "name": "figma-plugin",
       "path": "./packages/figma-plugin"

packages/angular-test-app/package.json

@@ -29,7 +29,7 @@
     "ag-grid-community": "^30.2.0",
     "echarts": "^5.5.1",
     "echarts-gl": "^2.0.9",
-    "example-styles": "workspace:*",
+    "html-test-app": "workspace:*",
     "ngx-echarts": "~14.0.0",
     "rxjs": "~7.5.0",
     "tslib": "^2.3.0",

packages/angular-test-app/scripts/copy-preview.mjs

@@ -6,10 +6,33 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { copyPreviewStyles } from 'example-styles';
 import path from 'path';
-
+import fs from 'fs';
+import fsp from 'fs/promises';
 const __dirname = path.resolve();
 
-const stylesPath = path.resolve(__dirname, 'src', 'preview-examples', 'styles');
-copyPreviewStyles(stylesPath);
+const previewPath = path.join(
+  __dirname,
+  'node_modules',
+  'html-test-app',
+  'src',
+  'preview-examples'
+);
+
+(async () => {
+  console.log('Copying preview styles to html-test-app...');
+  const cssFiles = fs
+    .readdirSync(previewPath)
+    .filter((f) => f.endsWith('.css'));
+
+  await Promise.all(
+    cssFiles.map((cssFile) =>
+      fsp.copyFile(
+        path.join(previewPath, cssFile),
+        path.join(__dirname, 'src', 'preview-examples', cssFile)
+      )
+    )
+  );
+
+  console.log('Done');
+})();

packages/angular-test-app/src/preview-examples/about-and-legal.css

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-application {
+  width: 100vw;
+  height: 100vh;
+}

packages/angular-test-app/src/preview-examples/about-and-legal.ts

@@ -12,7 +12,7 @@ import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './about-and-legal.html',
-  styleUrls: ['./styles/application.css'],
+  styleUrls: ['./about-and-legal.css'],
 })
 export default class AboutAndLegal implements AfterViewInit {
   @ViewChild('menu', { read: ElementRef })

packages/angular-test-app/src/preview-examples/application-app-switch.css

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-application {
+  width: 100vw;
+  height: 100vh;
+}

packages/angular-test-app/src/preview-examples/application-app-switch.ts

@@ -13,7 +13,7 @@ import { AppSwitchConfiguration } from '@siemens/ix';
 @Component({
   selector: 'app-example',
   templateUrl: './application-app-switch.html',
-  styleUrls: ['./styles/application.css'],
+  styleUrls: ['./application-app-switch.css'],
 })
 export default class ApplicationAppSwitchExample {
   appSwitchConfig: AppSwitchConfiguration = {

packages/angular-test-app/src/preview-examples/application-breakpoints.css

@@ -0,0 +1,17 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-application {
+  width: 100vw;
+  height: 100vh;
+}

packages/angular-test-app/src/preview-examples/application-breakpoints.ts

@@ -11,7 +11,7 @@ import { Breakpoint } from '@siemens/ix';
 
 @Component({
   selector: 'app-example',
-  styleUrls: ['./styles/application.css'],
+  styleUrls: ['./application-breakpoints.css'],
   templateUrl: './application-breakpoints.html',
 })
 export default class ApplicationBreakpointExample {

packages/example-styles/css/application.css → packages/angular-test-app/src/preview-examples/application.css

@@ -6,6 +6,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
 
 ix-application {
   width: 100vw;

packages/angular-test-app/src/preview-examples/application.ts

@@ -12,6 +12,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './application.html',
-  styleUrls: ['./styles/application.css'],
+  styleUrls: ['./application.css'],
 })
 export default class ApplicationExample {}

packages/example-styles/css/basic-navigation.css → packages/angular-test-app/src/preview-examples/basic-navigation.css

@@ -6,6 +6,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
 
 ix-basic-navigation {
   width: 100vw;

packages/angular-test-app/src/preview-examples/basic-navigation.ts

@@ -20,6 +20,6 @@ import { Component } from '@angular/core';
       </ix-menu>
     </ix-basic-navigation>
   `,
-  styleUrls: ['./styles/basic-navigation.css'],
+  styleUrls: ['./basic-navigation.css'],
 })
 export default class BasicNavigation {}

packages/angular-test-app/src/preview-examples/blind-header-actions.css

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-blind {
+  margin: 0.5rem 0;
+}

packages/angular-test-app/src/preview-examples/blind-header-actions.ts

@@ -32,6 +32,6 @@ import { Component } from '@angular/core';
       sit amet.
     </ix-blind>
   `,
-  styleUrls: ['./styles/blind.css'],
+  styleUrls: ['./blind-header-actions.css'],
 })
 export default class Blind {}

packages/angular-test-app/src/preview-examples/blind-variants.css

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+ix-blind {
+  margin: 0.5rem 0;
+}

packages/angular-test-app/src/preview-examples/blind-variants.ts

@@ -12,6 +12,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './blind-variants.html',
-  styleUrls: ['./styles/blind.css'],
+  styleUrls: ['./blind-variants.css'],
 })
 export default class Blind {}

packages/example-styles/css/blind.css → packages/angular-test-app/src/preview-examples/blind.css

@@ -6,6 +6,10 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
 
 ix-blind {
   margin: 0.5rem 0;

packages/angular-test-app/src/preview-examples/blind.ts

@@ -12,6 +12,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './blind.html',
-  styleUrls: ['./styles/blind.css'],
+  styleUrls: ['./blind.css'],
 })
 export default class Blind {}

packages/angular-test-app/src/preview-examples/button-danger-ghost.css

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+body {
+  display: flex;
+}
+
+ix-button {
+  margin: 0.25rem;
+}

packages/angular-test-app/src/preview-examples/button-danger-outline.css

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+body {
+  display: flex;
+}
+
+ix-button {
+  margin: 0.25rem;
+}

packages/angular-test-app/src/preview-examples/button-danger-outline.ts

@@ -12,6 +12,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './button-danger-outline.html',
-  styleUrls: ['./styles/buttons.css'],
+  styleUrls: ['./button-danger-outline.css'],
 })
 export default class Buttons {}

packages/angular-test-app/src/preview-examples/button-danger.css

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+body {
+  display: flex;
+}
+
+ix-button {
+  margin: 0.25rem;
+}

packages/angular-test-app/src/preview-examples/button-danger.ts

@@ -12,6 +12,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './button-danger.html',
-  styleUrls: ['./styles/buttons.css'],
+  styleUrls: ['./button-danger.css'],
 })
 export default class Buttons {}

packages/angular-test-app/src/preview-examples/button-ghost.css

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+body {
+  display: flex;
+}
+
+ix-button {
+  margin: 0.25rem;
+}

packages/angular-test-app/src/preview-examples/button-ghost.ts

@@ -15,6 +15,6 @@ import { Component } from '@angular/core';
     <ix-button ghost> Button </ix-button>
     <ix-button disabled ghost> Button </ix-button>
   `,
-  styleUrls: ['./styles/buttons.css'],
+  styleUrls: ['./button-ghost.css'],
 })
 export default class Buttons {}

packages/angular-test-app/src/preview-examples/button-grey-ghost.css

@@ -0,0 +1,20 @@
+/*
+ * SPDX-FileCopyrightText: 2024 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/*
+ * Styles get overwritten by html-test-app css files each build or dev task.
+ * If you want to modify the example styles do this only inside the html-test-app
+ */
+
+body {
+  display: flex;
+}
+
+ix-button {
+  margin: 0.25rem;
+}

packages/angular-test-app/src/preview-examples/button-grey-ghost.ts

@@ -12,7 +12,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: buttonGreyGhost(),
-  styleUrls: ['./styles/buttons.css'],
+  styleUrls: ['./button-grey-ghost.css'],
 })
 export default class Buttons {}