docs(examples): refactor

package.json

@@ -31,6 +31,7 @@
     "prepare": "pnpm git-hooks && pnpm disable-telemetry",
     "disable-telemetry": "turbo telemetry disable",
     "git-hooks": "husky install",
+    "compare-examples": "node ./scripts/compare-preview-examples-across-test-apps.js",
     "ci:version": "pnpm changeset version && pnpm i --lockfile-only",
     "ci:publish": "pnpm changeset publish",
     "ts-run": "tsx"

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

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

packages/angular-test-app/src/preview-examples/aggrid.html

@@ -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.
+-->
+
+<ag-grid-angular
+  style="height: 12rem; width: 100%"
+  class="ag-theme-alpine-dark ag-theme-ix"
+  [gridOptions]="gridOptions"
+>
+</ag-grid-angular>

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

@@ -8,57 +8,52 @@
  */
 
 import { Component } from '@angular/core';
-import { ColDef } from 'ag-grid-community';
+import { GridOptions } from 'ag-grid-community';
 
 @Component({
   selector: 'app-example',
-  template: `
-    <ag-grid-angular
-      style="height: 12rem; width: 100%"
-      class="ag-theme-alpine-dark ag-theme-ix"
-      [columnDefs]="columnDefs"
-      [rowData]="rowData"
-      rowSelection="multiple"
-      suppressCellFocus
-      checkboxSelection
-    ></ag-grid-angular>
-  `,
+  templateUrl: './aggrid.html',
 })
 export default class AGGrid {
-  columnDefs: ColDef[] = [
-    {
-      field: 'type',
-      headerName: 'Type',
-      resizable: true,
-      checkboxSelection: true,
-    },
-    {
-      field: 'status',
-      headerName: 'Status',
-      resizable: true,
-      sortable: true,
-      filter: true,
-    },
-    { field: 'hwVersion', headerName: 'HW version', resizable: true },
-  ];
-  rowData = [
-    {
-      type: 'Equipment',
-      status: 'Normal',
-      hwVersion: '2.0',
-      checked: false,
-    },
-    {
-      type: 'Positioner',
-      status: 'Maintenance',
-      hwVersion: '1.0',
-      checked: true,
-    },
-    {
-      type: 'Pressure sensor',
-      status: 'Unknown',
-      hwVersion: 'N/A',
-      checked: false,
-    },
-  ];
+  gridOptions = {
+    columnDefs: [
+      {
+        field: 'type',
+        headerName: 'Type',
+        resizable: true,
+        checkboxSelection: true,
+      },
+      {
+        field: 'status',
+        headerName: 'Status',
+        resizable: true,
+        sortable: true,
+        filter: true,
+      },
+      { field: 'hwVersion', headerName: 'HW version', resizable: true },
+    ],
+    rowData: [
+      {
+        type: 'Equipment',
+        status: 'Normal',
+        hwVersion: '2.0',
+        checked: false,
+      },
+      {
+        type: 'Positioner',
+        status: 'Maintenance',
+        hwVersion: '1.0',
+        checked: true,
+      },
+      {
+        type: 'Pressure sensor',
+        status: 'Unknown',
+        hwVersion: 'N/A',
+        checked: false,
+      },
+    ],
+    rowSelection: 'multiple',
+    suppressCellFocus: true,
+    checkboxSelection: true,
+  } as GridOptions;
 }

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

@@ -1,3 +1,12 @@
+<!--
+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.
+-->
+
 <ix-application [appSwitchConfig]="appSwitchConfig">
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
@@ -8,10 +17,7 @@
   </ix-menu>
 
   <ix-content>
-    <ix-content-header
-      slot="header"
-      header-title="My Content Page"
-    >
+    <ix-content-header slot="header" header-title="My Content Page">
     </ix-content-header>
   </ix-content>
 </ix-application>

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

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

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

@@ -1,3 +1,12 @@
+<!--
+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.
+-->
+
 <ix-application application-name="Application name" [breakpoints]="breakpoints">
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
@@ -20,19 +29,35 @@
     <ix-menu-item>Item 2</ix-menu-item>
   </ix-menu>
   <ix-content>
-    <ix-content-header
-      slot="header"
-      header-title="Choose breakpoint"
-    >
+    <ix-content-header slot="header" header-title="Choose breakpoint">
     </ix-content-header>
 
-    <input id="small" type="radio" name="layout" value="sm" (change)="onCheckedChange('sm')" />
+    <input
+      id="small"
+      type="radio"
+      name="layout"
+      value="sm"
+      (change)="onCheckedChange('sm')"
+    />
     <label for="small">Small</label>
 
-    <input id="medium" type="radio" name="layout" value="md" (change)="onCheckedChange('md')" checked />
+    <input
+      id="medium"
+      type="radio"
+      name="layout"
+      value="md"
+      (change)="onCheckedChange('md')"
+      checked
+    />
     <label for="medium">Medium</label>
 
-    <input id="large" type="radio" name="layout" value="lg" (change)="onCheckedChange('lg')" />
+    <input
+      id="large"
+      type="radio"
+      name="layout"
+      value="lg"
+      (change)="onCheckedChange('lg')"
+    />
     <label for="large">Large</label>
   </ix-content>
 </ix-application>

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

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

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

@@ -1,3 +1,12 @@
+<!--
+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.
+-->
+
 <ix-application>
   <ix-application-header name="My Application">
     <div class="placeholder-logo" slot="logo"></div>
@@ -8,10 +17,7 @@
   </ix-menu>
 
   <ix-content>
-    <ix-content-header
-      slot="header"
-      header-title="My Content Page"
-    >
+    <ix-content-header slot="header" header-title="My Content Page">
     </ix-content-header>
   </ix-content>
 </ix-application>

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

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

packages/angular-test-app/src/preview-examples/avatar-image.ts

@@ -12,7 +12,9 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: `
-    <ix-avatar image="https://www.gravatar.com/avatar/00000000000000000000000000000000"></ix-avatar>
+    <ix-avatar
+      image="https://www.gravatar.com/avatar/00000000000000000000000000000000"
+    ></ix-avatar>
   `,
 })
 export default class AvatarImage {}

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

@@ -12,13 +12,18 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: `
-    <ix-basic-navigation>
+    <ix-basic-navigation applicationName="Application name">
       <div class="placeholder-logo" slot="logo"></div>
       <ix-menu>
         <ix-menu-item>Item 1</ix-menu-item>
         <ix-menu-item>Item 2</ix-menu-item>
       </ix-menu>
     </ix-basic-navigation>
   `,
+  styles: [
+    `
+      @import 'example-styles/dist/basic-navigation.css';
+    `,
+  ],
 })
 export default class BasicNavigation {}

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

@@ -12,12 +12,13 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: `
-    <ix-blind label="Example" icon="info" sublabel="Sublabel">
+    <ix-blind label="Example" icon="info">
       <ix-icon-button
         id="context-menu"
         slot="header-actions"
         ghost
         icon="context-menu"
+        icon-color="color-primary"
       ></ix-icon-button>
       <ix-dropdown trigger="context-menu">test</ix-dropdown>
       Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
@@ -31,5 +32,10 @@ import { Component } from '@angular/core';
       sit amet.
     </ix-blind>
   `,
+  styles: [
+    `
+      @import 'example-styles/dist/blind.css';
+    `,
+  ],
 })
 export default class Blind {}

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

@@ -6,6 +6,7 @@
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 -->
+
 <ix-blind icon="bulb" label="Insight" sublabel="sublabel">
   <div>Insight content</div>
 </ix-blind>

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

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