Update version selector logic

packages/documentation/src/stories/getting-started/migration-guide/global-state.component.ts

@@ -6,7 +6,7 @@ import { getLocaleStorage, MIGRATION_TYPE, setLocaleStorage } from './util/persi
 @customElement('migration-global-state')
 export class GlobalStateComponent extends LitElement {
   @state() private state = {
-    version: 'v6-to-v7',
+    currentVersion: 6,
     environment: 'intranet',
     angular: true,
   };
@@ -20,7 +20,7 @@ export class GlobalStateComponent extends LitElement {
 
   constructor() {
     super();
-    this.addEventListener('migration-state-version-changed', this._updateVersion);
+    this.addEventListener('migration-state-current-version-changed', this._updateVersion);
     this.addEventListener('migration-state-environment-changed', this._updateEnvironment);
     this.addEventListener('migration-state-angular-changed', this._updateAngular);
     this._restorePersistedState();
@@ -47,7 +47,7 @@ export class GlobalStateComponent extends LitElement {
   }
 
   private _updateVersion(e: Event) {
-    this.state.version = (e as CustomEvent).detail.version;
+    this.state.currentVersion = (e as CustomEvent).detail.currentVersion;
 
     this._update();
   }
@@ -79,12 +79,12 @@ export class GlobalStateComponent extends LitElement {
       Array.from(this.children).filter(child => child.tagName.startsWith('MIGRATION-VERSION')) ??
       [];
 
-    this._updateAttribute(setupElement, 'version', this.state.version);
+    this._updateAttribute(setupElement, 'currentVersion', this.state.currentVersion);
     this._updateAttribute(setupElement, 'environment', this.state.environment);
     this._updateAttribute(setupElement, 'angular', this.state.angular);
 
     migrationVersionElements.forEach(versionElement => {
-      this._updateAttribute(versionElement, 'version', this.state.version);
+      this._updateAttribute(versionElement, 'currentVersion', this.state.currentVersion);
       this._updateAttribute(versionElement, 'environment', this.state.environment);
       this._updateAttribute(versionElement, 'angular', this.state.angular);
     });
@@ -93,7 +93,7 @@ export class GlobalStateComponent extends LitElement {
   private _updateAttribute(
     element: Element | null,
     attributeName: string,
-    value: string | boolean,
+    value: string | number | boolean,
   ) {
     if (typeof value === 'boolean') {
       if (value) {
@@ -105,6 +105,6 @@ export class GlobalStateComponent extends LitElement {
       return;
     }
 
-    element?.setAttribute(attributeName, value);
+    element?.setAttribute(attributeName, String(value));
   }
 }

packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx

@@ -16,10 +16,10 @@ import './migrationv6-7.component';
 
   <migration-setup></migration-setup>
 
-  <migration-version-6-7></migration-version-6-7>
+  <migration-version-4-5></migration-version-4-5>
 
   <migration-version-5-6></migration-version-5-6>
 
-  <migration-version-4-5></migration-version-4-5>
+  <migration-version-6-7></migration-version-6-7>
 
 </migration-global-state>

packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5.component.ts

@@ -4,7 +4,7 @@ import './migrationv4-5-manual-list.component';
 
 @customElement('migration-version-4-5')
 export class MigrationV45Component extends LitElement {
-  @property({ type: String }) version?: string;
+  @property({ type: Number }) currentVersion?: number;
   @property({ type: String }) environment?: string;
   @property({ type: Boolean }) angular?: boolean;
 
@@ -16,7 +16,7 @@ export class MigrationV45Component extends LitElement {
   }
 
   render() {
-    if (this.version !== 'v4-to-v5') return nothing;
+    if (!this.currentVersion || this.currentVersion > 4) return nothing;
 
     return html`
       <h2 id="migration-from-v4-to-v5" class="docs-autolink">

packages/documentation/src/stories/getting-started/migration-guide/migrationv5-6.component.ts

@@ -4,7 +4,7 @@ import { _templateAutoIcon } from './util/template.util';
 
 @customElement('migration-version-5-6')
 export class MigrationV56Component extends LitElement {
-  @property({ type: String }) version?: string;
+  @property({ type: Number }) currentVersion?: number;
   @property({ type: String }) environment?: string;
   @property({ type: Boolean }) angular?: boolean;
 
@@ -16,7 +16,7 @@ export class MigrationV56Component extends LitElement {
   }
 
   render() {
-    if (this.version !== 'v5-to-v6') return nothing;
+    if (!this.currentVersion || this.currentVersion > 5) return nothing;
 
     return html`
       <h2 id="migration-from-v5-to-v6" class="docs-autolink">

packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts

@@ -4,7 +4,7 @@ import { _templateAutoIcon } from './util/template.util';
 
 @customElement('migration-version-6-7')
 export class MigrationV56Component extends LitElement {
-  @property({ type: String }) version?: string;
+  @property({ type: Number }) currentVersion?: number;
   @property({ type: String }) environment?: string;
   @property({ type: Boolean }) angular?: boolean;
 
@@ -16,7 +16,7 @@ export class MigrationV56Component extends LitElement {
   }
 
   render() {
-    if (this.version !== 'v6-to-v7') return nothing;
+    if (!this.currentVersion || this.currentVersion > 6) return nothing;
 
     return html`
       <h2 id="migration-from-v6-to-v7" class="docs-autolink">

packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts

@@ -3,7 +3,7 @@ import { customElement, property } from 'lit/decorators.js';
 
 @customElement('migration-setup')
 export class SetupComponent extends LitElement {
-  @property({ type: String }) version?: string;
+  @property({ type: Number }) currentVersion?: number;
   @property({ type: String }) environment?: string;
   @property({ type: Boolean }) angular?: boolean;
 
@@ -20,20 +20,20 @@ export class SetupComponent extends LitElement {
         <div class="row gap-large migration-options">
           <div class="col-auto">
             <label class="form-label font-curve-small bold" for="docs_Default_ExampleSelect">
-              What version of the Design System is your application currently using?
+              What currentVersion of the Design System is your application currently using?
             </label>
             <select
-              @change="${this._onVersionChange}"
+              @change="${this._onCurrentVersionChange}"
               id="docs_Default_ExampleSelect"
               class="form-select form-select-lg"
             >
-              <option value="v6-to-v7" ?selected="${this.version === 'v6-to-v7'}">
+              <option value="6" ?selected="${this.currentVersion === 6}">
                 @swisspost/design-system-styles 6.x.x
               </option>
-              <option value="v5-to-v6" ?selected="${this.version === 'v5-to-v6'}">
+              <option value="5" ?selected="${this.currentVersion === 5}">
                 @swisspost/design-system-styles 5.x.x
               </option>
-              <option value="v4-to-v5" ?selected="${this.version === 'v4-to-v5'}">
+              <option value="4" ?selected="${this.currentVersion === 4}">
                 @.../common-web-frontend 4.x.x or lower
               </option>
             </select>
@@ -111,18 +111,18 @@ export class SetupComponent extends LitElement {
     `;
   }
 
-  private _onVersionChange(
+  private _onCurrentVersionChange(
     event: Event & {
       target: HTMLInputElement;
     },
   ) {
-    this.version = event.target.value;
+    this.currentVersion = parseInt(event.target.value);
     this.dispatchEvent(
-      new CustomEvent('migration-state-version-changed', {
+      new CustomEvent('migration-state-current-version-changed', {
         bubbles: true,
         composed: true,
         detail: {
-          version: this.version,
+          currentVersion: this.currentVersion,
         },
       }),
     );