feat(docs): add v7 migration guide

.changeset/dirty-forks-shake.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Moved the style package changelog and migration guide to the "Getting Started" section of the documentation.

.changeset/happy-socks-leave.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added changelogs for all packages.

.changeset/tiny-hornets-pretend.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added migration guide for updating the @swisspost/design-system-styles from v.6 to v7.

packages/documentation/.storybook/preview.ts

@@ -25,7 +25,7 @@ const preview: Preview = {
 
           // Category - Getting Started
           'Getting Started',
-          ['Introduction', 'Angular', 'Compatibility', 'Packages'],
+          ['Introduction', 'Angular', 'Compatibility', 'Packages', 'Changelogs', 'Migration Guide'],
 
           // Category - Foundations
           'Foundations',

packages/documentation/src/stories/getting-started/changelogs/components-angular/changelog.docs.mdx

@@ -0,0 +1,8 @@
+import { Markdown, Meta } from '@storybook/blocks';
+import changelog from '../../../../../../components-angular/CHANGELOG.md?raw';
+import ChangelogStories from './changelog.stories';
+import { CodeOrSourceMdx } from '../../../../utils/codeOrSourceMdx';
+
+<Meta of={ChangelogStories}/>
+
+<Markdown options={{ overrides: { code: CodeOrSourceMdx } }}>{changelog}</Markdown>

packages/documentation/src/stories/misc/versions/versions.stories.ts → packages/documentation/src/stories/getting-started/changelogs/components-angular/changelog.stories.ts

@@ -1,12 +1,9 @@
 import { StoryObj } from '@storybook/web-components';
-import { MetaExtended } from '../../../../types';
+import { MetaExtended } from '../../../../../types';
 
 const meta: MetaExtended = {
-  id: '873b1271-a700-4b28-aefe-28bcc14fd85a',
-  title: 'Misc/Versions',
-  parameters: {
-    badges: [],
-  },
+  id: 'f4830acb-1bc7-4e93-a811-64d5956d72fb',
+  title: 'Getting Started/Changelogs/Components-Angular',
 };
 
 export default meta;

packages/documentation/src/stories/getting-started/changelogs/components/changelog.docs.mdx

@@ -0,0 +1,8 @@
+import { Markdown, Meta } from '@storybook/blocks';
+import changelog from '../../../../../../components/CHANGELOG.md?raw';
+import ChangelogStories from './changelog.stories';
+import { CodeOrSourceMdx } from '../../../../utils/codeOrSourceMdx';
+
+<Meta of={ChangelogStories}/>
+
+<Markdown options={{ overrides: { code: CodeOrSourceMdx } }}>{changelog}</Markdown>

packages/documentation/src/stories/getting-started/changelogs/components/changelog.stories.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
+
+const meta: MetaExtended = {
+  id: '4c81783f-166a-4c4d-be92-1bda91960f8e',
+  title: 'Getting Started/Changelogs/Components',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

packages/documentation/src/stories/misc/changelog/changelog.docs.mdx → packages/documentation/src/stories/getting-started/changelogs/icons/changelog.docs.mdx

@@ -1,7 +1,7 @@
 import { Markdown, Meta } from '@storybook/blocks';
-import changelog from '../../../../../styles/CHANGELOG.md?raw';
+import changelog from '../../../../../../icons/CHANGELOG.md?raw';
 import ChangelogStories from './changelog.stories';
-import { CodeOrSourceMdx } from '../../../utils/codeOrSourceMdx';
+import { CodeOrSourceMdx } from '../../../../utils/codeOrSourceMdx';
 
 <Meta of={ChangelogStories}/>
 

packages/documentation/src/stories/getting-started/changelogs/icons/changelog.stories.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
+
+const meta: MetaExtended = {
+  id: 'bc32a671-5a51-4047-af30-1ef094c95ac8',
+  title: 'Getting Started/Changelogs/Icons',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

packages/documentation/src/stories/getting-started/changelogs/internet-header/changelog.docs.mdx

@@ -0,0 +1,8 @@
+import { Markdown, Meta } from '@storybook/blocks';
+import changelog from '../../../../../../internet-header/CHANGELOG.md?raw';
+import ChangelogStories from './changelog.stories';
+import { CodeOrSourceMdx } from '../../../../utils/codeOrSourceMdx';
+
+<Meta of={ChangelogStories}/>
+
+<Markdown options={{ overrides: { code: CodeOrSourceMdx } }}>{changelog}</Markdown>

packages/documentation/src/stories/getting-started/changelogs/internet-header/changelog.stories.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
+
+const meta: MetaExtended = {
+  id: '611d1aa1-a721-40bc-b019-06f5fd9d065e',
+  title: 'Getting Started/Changelogs/Internet-Header',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

packages/documentation/src/stories/getting-started/changelogs/intranet-header/changelog.docs.mdx

@@ -0,0 +1,8 @@
+import { Markdown, Meta } from '@storybook/blocks';
+import changelog from '../../../../../../intranet-header-workspace/CHANGELOG.md?raw';
+import ChangelogStories from './changelog.stories';
+import { CodeOrSourceMdx } from '../../../../utils/codeOrSourceMdx';
+
+<Meta of={ChangelogStories}/>
+
+<Markdown options={{ overrides: { code: CodeOrSourceMdx } }}>{changelog}</Markdown>

packages/documentation/src/stories/getting-started/changelogs/intranet-header/changelog.stories.ts

@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
+
+const meta: MetaExtended = {
+  id: '9deed228-359c-4635-ba31-15d0cf85dad4',
+  title: 'Getting Started/Changelogs/Intranet-Header',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

packages/documentation/src/stories/getting-started/changelogs/styles/changelog.docs.mdx

@@ -0,0 +1,8 @@
+import { Markdown, Meta } from '@storybook/blocks';
+import changelog from '../../../../../../styles/CHANGELOG.md?raw';
+import ChangelogStories from './changelog.stories';
+import { CodeOrSourceMdx } from '../../../../utils/codeOrSourceMdx';
+
+<Meta of={ChangelogStories}/>
+
+<Markdown options={{ overrides: { code: CodeOrSourceMdx } }}>{changelog}</Markdown>

packages/documentation/src/stories/misc/changelog/changelog.stories.ts → packages/documentation/src/stories/getting-started/changelogs/styles/changelog.stories.ts

@@ -1,9 +1,9 @@
 import { StoryObj } from '@storybook/web-components';
-import { MetaExtended } from '../../../../types';
+import { MetaExtended } from '../../../../../types';
 
 const meta: MetaExtended = {
   id: 'a060be2f-7af4-46ba-b3a1-a14be624b3ee',
-  title: 'Misc/Changelog',
+  title: 'Getting Started/Changelogs/Styles',
 };
 
 export default meta;

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

@@ -6,6 +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',
     environment: 'intranet',
     angular: true,
   };
@@ -19,6 +20,7 @@ export class GlobalStateComponent extends LitElement {
 
   constructor() {
     super();
+    this.addEventListener('migration-state-version-changed', this._updateVersion);
     this.addEventListener('migration-state-environment-changed', this._updateEnvironment);
     this.addEventListener('migration-state-angular-changed', this._updateAngular);
     this._restorePersistedState();
@@ -44,6 +46,12 @@ export class GlobalStateComponent extends LitElement {
     }
   }
 
+  private _updateVersion(e: Event) {
+    this.state.version = (e as CustomEvent).detail.version;
+
+    this._update();
+  }
+
   private _updateEnvironment(e: Event) {
     this.state.environment = (e as CustomEvent).detail.environment;
 
@@ -71,10 +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, 'environment', this.state.environment);
     this._updateAttribute(setupElement, 'angular', this.state.angular);
 
     migrationVersionElements.forEach(versionElement => {
+      this._updateAttribute(versionElement, 'version', this.state.version);
       this._updateAttribute(versionElement, 'environment', this.state.environment);
       this._updateAttribute(versionElement, 'angular', this.state.angular);
     });

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

@@ -4,6 +4,7 @@ import './global-state.component';
 import './setup.component';
 import './migrationv4-5.component';
 import './migrationv5-6.component';
+import './migrationv6-7.component';
 
 <Meta of={MigrationGuideStories} />
 
@@ -15,12 +16,10 @@ import './migrationv5-6.component';
 
   <migration-setup></migration-setup>
 
-  ## Migration from v5 to v6
+  <migration-version-6-7></migration-version-6-7>
 
   <migration-version-5-6></migration-version-5-6>
 
-  ## Migration from v4 to v5
-
   <migration-version-4-5></migration-version-4-5>
 
 </migration-global-state>

packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts → packages/documentation/src/stories/getting-started/migration-guide/migration-guide.stories.ts

@@ -3,7 +3,7 @@ import { MetaExtended } from '../../../../types';
 
 const meta: MetaExtended = {
   id: 'c23b1d0b-76b3-4e38-aa76-b10c29bb873f',
-  title: 'Misc/Migration Guide',
+  title: 'Getting Started/Migration Guide',
   parameters: {
     badges: [],
   },

packages/documentation/src/stories/misc/migration-guide/migrationv4-5-manual-list.component.ts → packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5-manual-list.component.ts

@@ -5,7 +5,7 @@ import { _templateAutoIcon } from './util/template.util';
 
 @customElement('migration-version-4-5-manual-list')
 export class MigrationV45ManualListComponent extends LitElement {
-  @property({ type: Boolean }) angular: boolean = false;
+  @property({ type: Boolean }) angular?: boolean;
 
   @state()
   private state: TodoListChecks = {

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

@@ -4,8 +4,9 @@ import './migrationv4-5-manual-list.component';
 
 @customElement('migration-version-4-5')
 export class MigrationV45Component extends LitElement {
-  @property({ type: String }) environment: string = 'intranet';
-  @property({ type: Boolean }) angular: boolean = false;
+  @property({ type: String }) version?: string;
+  @property({ type: String }) environment?: string;
+  @property({ type: Boolean }) angular?: boolean;
 
   createRenderRoot() {
     /**
@@ -15,7 +16,19 @@ export class MigrationV45Component extends LitElement {
   }
 
   render() {
+    if (this.version !== 'v4-to-v5') return nothing;
+
     return html`
+      <h2 id="migration-from-v4-to-v5" class="docs-autolink">
+        Migration from v4 to v5
+        <a
+          aria-hidden="true"
+          tabindex="-1"
+          href="http://localhost:9000/?path=/docs/c23b1d0b-76b3-4e38-aa76-b10c29bb873f--docs#migration-from-v5-to-v6#migration-from-v4-to-v5"
+        >
+          <post-icon name="2037"></post-icon>
+        </a>
+      </h2>
       <section>
         <ol class="bubble-tea">
           <li>

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

@@ -4,8 +4,9 @@ import { _templateAutoIcon } from './util/template.util';
 
 @customElement('migration-version-5-6')
 export class MigrationV56Component extends LitElement {
-  @property({ type: String }) environment: string = 'intranet';
-  @property({ type: Boolean }) angular: boolean = false;
+  @property({ type: String }) version?: string;
+  @property({ type: String }) environment?: string;
+  @property({ type: Boolean }) angular?: boolean;
 
   createRenderRoot() {
     /**
@@ -15,18 +16,20 @@ export class MigrationV56Component extends LitElement {
   }
 
   render() {
+    if (this.version !== 'v5-to-v6') return nothing;
+
     return html`
+      <h2 id="migration-from-v5-to-v6" class="docs-autolink">
+        Migration from v5 to v6
+        <a
+          aria-hidden="true"
+          tabindex="-1"
+          href="http://localhost:9000/?path=/docs/c23b1d0b-76b3-4e38-aa76-b10c29bb873f--docs#migration-from-v5-to-v6"
+        >
+          <post-icon name="2037"></post-icon>
+        </a>
+      </h2>
       <section>
-        <post-alert type="info">
-          <p slot="heading">
-            Be sure to update your application one major Design System version at a time.
-          </p>
-          <p>
-            If your project is currently using the @******/common-web-frontend package, start by
-            <a href="#migration-from-v4-to-v5">migrating to version 5</a>.
-          </p>
-        </post-alert>
-
         <ol class="bubble-tea">
           <li>
             <h3>Package Update 🩺</h3>
@@ -80,8 +83,7 @@ export class MigrationV56Component extends LitElement {
                 <li>
                   <h3>Automatic Migration ⚙️</h3>
                   <p>
-                    If you are migrating an Angular application, you can take advantage of our
-                    migration schematics.
+                    For Angular application, you can take advantage of our migration schematics.
                   </p>
                   <ol>
                     <li>Commit all the changes you have made so far</li>