docs(preview-examples): show correct style imports (#1437)

packages/angular-test-app/.gitignore

@@ -40,3 +40,5 @@ testem.log
 # System files
 .DS_Store
 Thumbs.db
+
+src/preview-examples/styles

packages/angular-test-app/angular.json

@@ -98,7 +98,7 @@
             "karmaConfig": "karma.conf.js",
             "inlineStyleLanguage": "scss",
             "assets": ["src/favicon.ico", "src/assets"],
-            "styles": ["src/styles.scss"],
+            "styles": [],
             "scripts": []
           }
         }

packages/angular-test-app/package.json

@@ -4,8 +4,9 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build --preserve-symlinks -c production",
+    "copy-preview-styles": "node ./scripts/copy-preview.mjs",
+    "start": "pnpm copy-preview-styles && ng serve",
+    "build": "pnpm copy-preview-styles && ng build --preserve-symlinks -c production",
     "watch": "ng build --watch --configuration development",
     "test": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI"
   },

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

@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
+import { copyPreviewStyles } from 'example-styles';
+import path from 'path';
+
+const __dirname = path.resolve();
+
+const stylesPath = path.resolve(__dirname, 'src', 'preview-examples', 'styles');
+copyPreviewStyles(stylesPath);

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

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

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',
-  styles: [`@import 'example-styles/dist/application.css'`],
+  styleUrls: ['./styles/application.css'],
 })
 export default class ApplicationAppSwitchExample {
   appSwitchConfig: AppSwitchConfiguration = {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -12,11 +12,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: './button-loading.html',
-  styles: [
-    `
-      @import 'example-styles/dist/buttons.css';
-    `,
-  ],
+  styleUrls: ['./styles/buttons.css'],
 })
 export default class ButtonLoading {
   loading = false;

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

@@ -11,13 +11,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-example',
-  template: `
-    <ix-button outline>
-      Button
-    </ix-button>
-    <ix-button disabled outline>
-      Button
-    </ix-button>`,
-  styles: [`@import 'example-styles/dist/buttons.css';`],
+  template: ` <ix-button outline> Button </ix-button>
+    <ix-button disabled outline> Button </ix-button>`,
+  styleUrls: ['./styles/buttons.css'],
 })
 export default class Buttons {}

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

@@ -11,23 +11,12 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-example',
-  template: buttonTextIcon(),
-  styles: [`@import 'example-styles/dist/buttons.css';`],
+  template: `
+    <ix-button icon="star"> Button </ix-button>
+    <ix-button variant="secondary" icon="star"> Button </ix-button>
+    <ix-button outline icon="star"> Button </ix-button>
+    <ix-button ghost icon="star"> Button </ix-button>
+  `,
+  styleUrls: ['./styles/buttons.css'],
 })
 export default class Buttons {}
-function buttonTextIcon(): string | undefined {
-  return `
-      <ix-button icon="star">
-        Button
-      </ix-button>
-      <ix-button variant="secondary" icon="star">
-        Button
-      </ix-button>
-      <ix-button outline icon="star">
-        Button
-      </ix-button>
-      <ix-button ghost icon="star">
-        Button
-      </ix-button>
-  `;
-}

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

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

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

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

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

@@ -12,11 +12,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   templateUrl: './card.html',
-  styles: [
-    `
-      @import 'example-styles/dist/card.css';
-    `,
-  ],
+  styleUrls: ['./styles/card.css'],
 })
 export default class Card {
   onClick(event: Event) {

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

@@ -37,10 +37,6 @@ import { Component } from '@angular/core';
       </ix-chip>
     </div>
   `,
-  styles: [
-    `
-      @import 'example-styles/dist/chip.css';
-    `,
-  ],
+  styleUrls: ['./styles/chip.css'],
 })
 export default class Chip {}

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

@@ -11,11 +11,7 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-example',
-  styles: [
-    `
-      @import 'example-styles/dist/dropdown-button.css';
-    `,
-  ],
+  styleUrls: ['./styles/dropdown-button.css'],
   template: `
     <div class="dropdown-button">
       <ix-dropdown-button label="" icon="checkboxes">

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

@@ -29,10 +29,6 @@ import { Component } from '@angular/core';
       </ix-dropdown-button>
     </div>
   `,
-  styles: [
-    `
-      @import 'example-styles/dist/dropdown-button.css';
-    `,
-  ]
+  styleUrls: ['./styles/dropdown-button.css'],
 })
 export default class Dropdown {}

packages/angular-test-app/src/preview-examples/echarts-bar-horizontal-stacked.ts

@@ -16,7 +16,7 @@ import { BarSeriesOption, EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-bar-horizontal-stacked.html',
-  styleUrls: ["../../../example-styles/dist/charts.css"],
+  styleUrls: ['./styles/charts.css'],
 })
 export default class EchartsBarHorizontalStacked implements OnInit {
   theme = convertThemeName(themeSwitcher.getCurrentTheme());

packages/angular-test-app/src/preview-examples/echarts-bar-simple.ts

@@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-bar-simple.html',
-  styleUrls: ["../../../example-styles/dist/charts.css"],
+  styleUrls: ["./styles/charts.css"],
 })
 export default class EchartsBarSimple implements OnInit {
   theme = convertThemeName(themeSwitcher.getCurrentTheme());

packages/angular-test-app/src/preview-examples/echarts-circle.ts

@@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-circle.html',
-  styleUrls: ["../../../example-styles/dist/charts.css"],
+  styleUrls: ["./styles/charts.css"],
 })
 export default class EchartsCircle implements OnInit {
   theme = convertThemeName(themeSwitcher.getCurrentTheme());

packages/angular-test-app/src/preview-examples/echarts-empty-state.ts

@@ -16,7 +16,7 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-empty-state.html',
-  styleUrls: ["../../../example-styles/dist/charts.css"],
+  styleUrls: ["./styles/charts.css"],
 })
 export default class EchartsLineSimple implements OnInit {
   theme = convertThemeName(themeSwitcher.getCurrentTheme());

packages/angular-test-app/src/preview-examples/echarts-gauge.ts

@@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-gauge.html',
-  styleUrls: ["../../../example-styles/dist/charts.css"],
+  styleUrls: ["./styles/charts.css"],
 })
 export default class EchartsGauge implements OnInit {
   theme = convertThemeName(themeSwitcher.getCurrentTheme());

packages/angular-test-app/src/preview-examples/echarts-line-advanced.ts

@@ -20,7 +20,7 @@ import { EChartsOption } from 'echarts';
 @Component({
   selector: 'app-example',
   templateUrl: './echarts-line-advanced.html',
-  styleUrls: ["../../../example-styles/dist/charts.css"],
+  styleUrls: ["./styles/charts.css"],
 })
 export default class EchartsLineAdvanced implements OnInit {
   theme = convertThemeName(themeSwitcher.getCurrentTheme());