From a554eb2cffacbb56a9762e829765ccb159276fab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliz=C3=A9=20Debray?= Date: Wed, 3 Apr 2024 17:57:23 +0200 Subject: [PATCH 1/3] feat(docs): add v7 migration guide --- .changeset/dirty-forks-shake.md | 5 + .changeset/happy-socks-leave.md | 5 + .changeset/tiny-hornets-pretend.md | 5 + packages/documentation/.storybook/preview.ts | 2 +- .../components-angular/changelog.docs.mdx | 8 + .../components-angular/changelog.stories.ts} | 9 +- .../changelogs/components/changelog.docs.mdx | 8 + .../components/changelog.stories.ts | 13 ++ .../changelogs/icons}/changelog.docs.mdx | 4 +- .../changelogs/icons/changelog.stories.ts | 13 ++ .../internet-header/changelog.docs.mdx | 8 + .../internet-header/changelog.stories.ts | 13 ++ .../intranet-header/changelog.docs.mdx | 8 + .../intranet-header/changelog.stories.ts | 13 ++ .../changelogs/styles/changelog.docs.mdx | 8 + .../changelogs/styles}/changelog.stories.ts | 4 +- .../migration-guide/global-state.component.ts | 10 ++ .../migration-guide/migration-guide.docs.mdx | 5 +- .../migration-guide.stories.ts | 2 +- .../migrationv4-5-manual-list.component.ts | 2 +- .../migrationv4-5.component.ts | 17 +- .../migrationv5-6.component.ts | 30 ++-- .../migrationv6-7.component.ts | 153 ++++++++++++++++++ .../migration-guide/setup.component.ts | 60 +++++-- .../migration-guide/shared.component.scss | 2 +- .../migration-guide/types.ts | 0 .../migration-guide/util/persist.util.ts | 0 .../migration-guide/util/template.util.ts | 0 .../components-angular.stories.ts | 2 +- .../stories/misc/versions/versions.blocks.tsx | 73 --------- .../stories/misc/versions/versions.docs.mdx | 17 -- 31 files changed, 366 insertions(+), 133 deletions(-) create mode 100644 .changeset/dirty-forks-shake.md create mode 100644 .changeset/happy-socks-leave.md create mode 100644 .changeset/tiny-hornets-pretend.md create mode 100644 packages/documentation/src/stories/getting-started/changelogs/components-angular/changelog.docs.mdx rename packages/documentation/src/stories/{misc/versions/versions.stories.ts => getting-started/changelogs/components-angular/changelog.stories.ts} (51%) create mode 100644 packages/documentation/src/stories/getting-started/changelogs/components/changelog.docs.mdx create mode 100644 packages/documentation/src/stories/getting-started/changelogs/components/changelog.stories.ts rename packages/documentation/src/stories/{misc/changelog => getting-started/changelogs/icons}/changelog.docs.mdx (62%) create mode 100644 packages/documentation/src/stories/getting-started/changelogs/icons/changelog.stories.ts create mode 100644 packages/documentation/src/stories/getting-started/changelogs/internet-header/changelog.docs.mdx create mode 100644 packages/documentation/src/stories/getting-started/changelogs/internet-header/changelog.stories.ts create mode 100644 packages/documentation/src/stories/getting-started/changelogs/intranet-header/changelog.docs.mdx create mode 100644 packages/documentation/src/stories/getting-started/changelogs/intranet-header/changelog.stories.ts create mode 100644 packages/documentation/src/stories/getting-started/changelogs/styles/changelog.docs.mdx rename packages/documentation/src/stories/{misc/changelog => getting-started/changelogs/styles}/changelog.stories.ts (68%) rename packages/documentation/src/stories/{misc => getting-started}/migration-guide/global-state.component.ts (87%) rename packages/documentation/src/stories/{misc => getting-started}/migration-guide/migration-guide.docs.mdx (86%) rename packages/documentation/src/stories/{misc => getting-started}/migration-guide/migration-guide.stories.ts (87%) rename packages/documentation/src/stories/{misc => getting-started}/migration-guide/migrationv4-5-manual-list.component.ts (99%) rename packages/documentation/src/stories/{misc => getting-started}/migration-guide/migrationv4-5.component.ts (91%) rename packages/documentation/src/stories/{misc => getting-started}/migration-guide/migrationv5-6.component.ts (90%) create mode 100644 packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts rename packages/documentation/src/stories/{misc => getting-started}/migration-guide/setup.component.ts (63%) rename packages/documentation/src/stories/{misc => getting-started}/migration-guide/shared.component.scss (99%) rename packages/documentation/src/stories/{misc => getting-started}/migration-guide/types.ts (100%) rename packages/documentation/src/stories/{misc => getting-started}/migration-guide/util/persist.util.ts (100%) rename packages/documentation/src/stories/{misc => getting-started}/migration-guide/util/template.util.ts (100%) delete mode 100644 packages/documentation/src/stories/misc/versions/versions.blocks.tsx delete mode 100644 packages/documentation/src/stories/misc/versions/versions.docs.mdx diff --git a/.changeset/dirty-forks-shake.md b/.changeset/dirty-forks-shake.md new file mode 100644 index 0000000000..72f06fd297 --- /dev/null +++ b/.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. diff --git a/.changeset/happy-socks-leave.md b/.changeset/happy-socks-leave.md new file mode 100644 index 0000000000..93950aa738 --- /dev/null +++ b/.changeset/happy-socks-leave.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Added changelogs for all packages. diff --git a/.changeset/tiny-hornets-pretend.md b/.changeset/tiny-hornets-pretend.md new file mode 100644 index 0000000000..07f6528aff --- /dev/null +++ b/.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. diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts index 065d375f71..dd3f9fe735 100644 --- a/packages/documentation/.storybook/preview.ts +++ b/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', diff --git a/packages/documentation/src/stories/getting-started/changelogs/components-angular/changelog.docs.mdx b/packages/documentation/src/stories/getting-started/changelogs/components-angular/changelog.docs.mdx new file mode 100644 index 0000000000..e49fe5746d --- /dev/null +++ b/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'; + + + +{changelog} diff --git a/packages/documentation/src/stories/misc/versions/versions.stories.ts b/packages/documentation/src/stories/getting-started/changelogs/components-angular/changelog.stories.ts similarity index 51% rename from packages/documentation/src/stories/misc/versions/versions.stories.ts rename to packages/documentation/src/stories/getting-started/changelogs/components-angular/changelog.stories.ts index 9330914d74..0efb5930a2 100644 --- a/packages/documentation/src/stories/misc/versions/versions.stories.ts +++ b/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; diff --git a/packages/documentation/src/stories/getting-started/changelogs/components/changelog.docs.mdx b/packages/documentation/src/stories/getting-started/changelogs/components/changelog.docs.mdx new file mode 100644 index 0000000000..b6354eedc9 --- /dev/null +++ b/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'; + + + +{changelog} diff --git a/packages/documentation/src/stories/getting-started/changelogs/components/changelog.stories.ts b/packages/documentation/src/stories/getting-started/changelogs/components/changelog.stories.ts new file mode 100644 index 0000000000..52223e5aa8 --- /dev/null +++ b/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 = {}; diff --git a/packages/documentation/src/stories/misc/changelog/changelog.docs.mdx b/packages/documentation/src/stories/getting-started/changelogs/icons/changelog.docs.mdx similarity index 62% rename from packages/documentation/src/stories/misc/changelog/changelog.docs.mdx rename to packages/documentation/src/stories/getting-started/changelogs/icons/changelog.docs.mdx index 0c30f44676..b2004afd72 100644 --- a/packages/documentation/src/stories/misc/changelog/changelog.docs.mdx +++ b/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'; diff --git a/packages/documentation/src/stories/getting-started/changelogs/icons/changelog.stories.ts b/packages/documentation/src/stories/getting-started/changelogs/icons/changelog.stories.ts new file mode 100644 index 0000000000..312004cf17 --- /dev/null +++ b/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 = {}; diff --git a/packages/documentation/src/stories/getting-started/changelogs/internet-header/changelog.docs.mdx b/packages/documentation/src/stories/getting-started/changelogs/internet-header/changelog.docs.mdx new file mode 100644 index 0000000000..ed035e82cc --- /dev/null +++ b/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'; + + + +{changelog} diff --git a/packages/documentation/src/stories/getting-started/changelogs/internet-header/changelog.stories.ts b/packages/documentation/src/stories/getting-started/changelogs/internet-header/changelog.stories.ts new file mode 100644 index 0000000000..3e43dc7518 --- /dev/null +++ b/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 = {}; diff --git a/packages/documentation/src/stories/getting-started/changelogs/intranet-header/changelog.docs.mdx b/packages/documentation/src/stories/getting-started/changelogs/intranet-header/changelog.docs.mdx new file mode 100644 index 0000000000..afb16ab99e --- /dev/null +++ b/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'; + + + +{changelog} diff --git a/packages/documentation/src/stories/getting-started/changelogs/intranet-header/changelog.stories.ts b/packages/documentation/src/stories/getting-started/changelogs/intranet-header/changelog.stories.ts new file mode 100644 index 0000000000..6a30248b94 --- /dev/null +++ b/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 = {}; diff --git a/packages/documentation/src/stories/getting-started/changelogs/styles/changelog.docs.mdx b/packages/documentation/src/stories/getting-started/changelogs/styles/changelog.docs.mdx new file mode 100644 index 0000000000..627ad2603e --- /dev/null +++ b/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'; + + + +{changelog} diff --git a/packages/documentation/src/stories/misc/changelog/changelog.stories.ts b/packages/documentation/src/stories/getting-started/changelogs/styles/changelog.stories.ts similarity index 68% rename from packages/documentation/src/stories/misc/changelog/changelog.stories.ts rename to packages/documentation/src/stories/getting-started/changelogs/styles/changelog.stories.ts index ea0dea670f..0998a2a9c5 100644 --- a/packages/documentation/src/stories/misc/changelog/changelog.stories.ts +++ b/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; diff --git a/packages/documentation/src/stories/misc/migration-guide/global-state.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/global-state.component.ts similarity index 87% rename from packages/documentation/src/stories/misc/migration-guide/global-state.component.ts rename to packages/documentation/src/stories/getting-started/migration-guide/global-state.component.ts index 6932c3da54..a57de68af4 100644 --- a/packages/documentation/src/stories/misc/migration-guide/global-state.component.ts +++ b/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); }); diff --git a/packages/documentation/src/stories/misc/migration-guide/migration-guide.docs.mdx b/packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx similarity index 86% rename from packages/documentation/src/stories/misc/migration-guide/migration-guide.docs.mdx rename to packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx index 6cb4e52fea..f38f68486e 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migration-guide.docs.mdx +++ b/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'; @@ -15,12 +16,10 @@ import './migrationv5-6.component'; - ## Migration from v5 to v6 + - ## Migration from v4 to v5 - diff --git a/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts b/packages/documentation/src/stories/getting-started/migration-guide/migration-guide.stories.ts similarity index 87% rename from packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts rename to packages/documentation/src/stories/getting-started/migration-guide/migration-guide.stories.ts index 3db96cf337..317184dcd7 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts +++ b/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: [], }, diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv4-5-manual-list.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5-manual-list.component.ts similarity index 99% rename from packages/documentation/src/stories/misc/migration-guide/migrationv4-5-manual-list.component.ts rename to packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5-manual-list.component.ts index 4789f14336..710f84afd0 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migrationv4-5-manual-list.component.ts +++ b/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 = { diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv4-5.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5.component.ts similarity index 91% rename from packages/documentation/src/stories/misc/migration-guide/migrationv4-5.component.ts rename to packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5.component.ts index e080a28129..dece6ec4da 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migrationv4-5.component.ts +++ b/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` +
  1. diff --git a/packages/documentation/src/stories/misc/migration-guide/migrationv5-6.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv5-6.component.ts similarity index 90% rename from packages/documentation/src/stories/misc/migration-guide/migrationv5-6.component.ts rename to packages/documentation/src/stories/getting-started/migration-guide/migrationv5-6.component.ts index 5748da96af..5a085ded9c 100644 --- a/packages/documentation/src/stories/misc/migration-guide/migrationv5-6.component.ts +++ b/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` +
    - -

    - Be sure to update your application one major Design System version at a time. -

    -

    - If your project is currently using the @******/common-web-frontend package, start by - migrating to version 5. -

    -     -

    1. Package Update 🩺

      @@ -80,8 +83,7 @@ export class MigrationV56Component extends LitElement {

    2. Automatic Migration ⚙️

      - 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.

      1. Commit all the changes you have made so far
        2. diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts new file mode 100644 index 0000000000..7c187f9c9c --- /dev/null +++ b/packages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts @@ -0,0 +1,153 @@ +import { html, LitElement, nothing } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import { _templateAutoIcon } from './util/template.util'; + +@customElement('migration-version-6-7') +export class MigrationV56Component extends LitElement { + @property({ type: String }) version?: string; + @property({ type: String }) environment?: string; + @property({ type: Boolean }) angular?: boolean; + + createRenderRoot() { + /** + * Render template without shadow DOM. + */ + return this; + } + + render() { + if (this.version !== 'v6-to-v7') return nothing; + + return html` + +
        +
          +
        1. +

          Package Update 🩺

          +
            + ${this.angular + ? html` +
          1. +

            + Use + + https://update.angular.io/ + + to update Angular to version 17 +

            +
            2. + ` + : nothing} + ${this.angular + ? html` +
          2. +

            + Update ng-bootstrap to version + + 16.x.x + + : + + npm install @ng-bootstrap/ng-bootstrap@16 + +

            +
            3. + ` + : nothing} + +
          3. +

            + Update Design System style package to version 7: + npm install @swisspost/design-system-styles@7 +

            +
            4. +
          +
          2. + ${this.angular + ? html` +
        2. +

          Automatic Migration ⚙️

          +

          + For Angular application, you can take advantage of our migration schematics. +

          +
            +
          1. Commit all the changes you have made so far
            2. +
          2. Make sure you are running on a node version >= 16
            3. +
          3. + You should now be able to run the following command to apply all automatic + migrations to your application: + + npm install @swisspost/design-system-migrations
            + npx ng update @swisspost/design-system-migrations --from=6 --to=7 + --migrate-only --allow-dirty
            + npm uninstall @swisspost/design-system-migrations +             +
            4. +
          +
          3. + ` + : nothing} +
        3. +

          Component Migration 🤓

          + ${this.angular + ? html` +

          + Changes flagged with the ⚙️ symbol should be automatically migrated with our + migration tool. +

          + ` + : nothing} + +
          4. +
        +
        + `; + } + + private _templateAutoIconAngular() { + return html` ${this.angular ? _templateAutoIcon() : nothing} `; + } +} diff --git a/packages/documentation/src/stories/misc/migration-guide/setup.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts similarity index 63% rename from packages/documentation/src/stories/misc/migration-guide/setup.component.ts rename to packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts index 687b30c88d..473c735756 100644 --- a/packages/documentation/src/stories/misc/migration-guide/setup.component.ts +++ b/packages/documentation/src/stories/getting-started/migration-guide/setup.component.ts @@ -3,8 +3,9 @@ import { customElement, property } from 'lit/decorators.js'; @customElement('migration-setup') export class SetupComponent 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() { /** @@ -16,13 +17,37 @@ export class SetupComponent extends LitElement { render() { return html`
        -
        -
        +
        +
        + + +
        + This information can be found in the package.json file in the root of + your application. +
        +
        +
        What environment is your application for? -
        +
        -
        +
        -
        +
        What technology is your application built with? -
        +
        -
        +
        { - const dependencies = Object.entries({ - ...packageJson.dependencies, - ...packageJson.devDependencies, - }); - const interestingFullMatch = [ - 'react', - 'bootstrap', - '@angular/core', - '@ng-bootstrap/ng-bootstrap', - ]; - const interestingDesignSystem = '@swisspost/'; - - return [ - ...dependencies.filter(([key]) => key.includes(interestingDesignSystem)), - ...dependencies.filter(([key]) => interestingFullMatch.includes(key)), - ]; -}; - -export const DocumentationVersion = () => ( - Design System Documentation v{documentationVersions.version} -); - -export const PackageVersions = (props: { dependencies?: [string, string][] }) => { - const deps = props.dependencies ?? getInterestingDependencies(documentationVersions); - return ( -
        - - - - - - - - - {deps.map(([key, value]) => ( - - - - - ))} - -
        PackageVersion
        {key}{value.replace('workspace:', '')}
        -
        - ); -}; - -export const PackageDependencies = () => - dependencies.map(dependency => ( -
        -

        {dependency.name}

        - -
        - )); diff --git a/packages/documentation/src/stories/misc/versions/versions.docs.mdx b/packages/documentation/src/stories/misc/versions/versions.docs.mdx deleted file mode 100644 index c6e3d56d72..0000000000 --- a/packages/documentation/src/stories/misc/versions/versions.docs.mdx +++ /dev/null @@ -1,17 +0,0 @@ -import { Meta } from '@storybook/blocks'; -import { PackageVersions, PackageDependencies, DocumentationVersion } from './versions.blocks'; -import * as VersionStories from './versions.stories'; - - - -# Versions - -
        - -
        - -This is an overview of package versions used for this build of the documentation. - - - - From e43cc4a6d683b1aeed5832ab65e23aff3899cf97 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliz=C3=A9=20Debray?= Date: Thu, 4 Apr 2024 09:41:05 +0200 Subject: [PATCH 2/3] Rename "Components-Angular" to "Components for Angular"" --- .../changelogs/components-angular/changelog.stories.ts | 2 +- .../getting-started/compatibility/compatibility.docs.mdx | 2 +- .../packages/components-angular/components-angular.stories.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/documentation/src/stories/getting-started/changelogs/components-angular/changelog.stories.ts b/packages/documentation/src/stories/getting-started/changelogs/components-angular/changelog.stories.ts index 0efb5930a2..5696a33966 100644 --- a/packages/documentation/src/stories/getting-started/changelogs/components-angular/changelog.stories.ts +++ b/packages/documentation/src/stories/getting-started/changelogs/components-angular/changelog.stories.ts @@ -3,7 +3,7 @@ import { MetaExtended } from '../../../../../types'; const meta: MetaExtended = { id: 'f4830acb-1bc7-4e93-a811-64d5956d72fb', - title: 'Getting Started/Changelogs/Components-Angular', + title: 'Getting Started/Changelogs/Components for Angular', }; export default meta; diff --git a/packages/documentation/src/stories/getting-started/compatibility/compatibility.docs.mdx b/packages/documentation/src/stories/getting-started/compatibility/compatibility.docs.mdx index cc727e2dcc..b7c9970236 100644 --- a/packages/documentation/src/stories/getting-started/compatibility/compatibility.docs.mdx +++ b/packages/documentation/src/stories/getting-started/compatibility/compatibility.docs.mdx @@ -7,7 +7,7 @@ import * as GettingStartedStories from './compatibility.stories';

        List of compatible version numbers with external dependencies.

        -## Components-Angular +## Components for Angular
        diff --git a/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.stories.ts b/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.stories.ts index 3620e94534..784d0b74a4 100644 --- a/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.stories.ts +++ b/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.stories.ts @@ -3,7 +3,7 @@ import { MetaExtended } from '../../../../../types'; const meta: MetaExtended = { id: '833ef689-a573-40f5-a6a6-30a999b94733', - title: 'Getting Started/Packages/Components-Angular', + title: 'Getting Started/Packages/Components for Angular', parameters: { badges: [], }, From 0ab248a5332cd309f07dd4749c08e2489206b500 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliz=C3=A9=20Debray?= Date: Thu, 4 Apr 2024 09:58:33 +0200 Subject: [PATCH 3/3] Update version selector logic --- .../migration-guide/global-state.component.ts | 14 ++++++------- .../migration-guide/migration-guide.docs.mdx | 4 ++-- .../migrationv4-5.component.ts | 4 ++-- .../migrationv5-6.component.ts | 4 ++-- .../migrationv6-7.component.ts | 4 ++-- .../migration-guide/setup.component.ts | 20 +++++++++---------- 6 files changed, 25 insertions(+), 25 deletions(-) diff --git a/packages/documentation/src/stories/getting-started/migration-guide/global-state.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/global-state.component.ts index a57de68af4..a44bad7e8d 100644 --- a/packages/documentation/src/stories/getting-started/migration-guide/global-state.component.ts +++ b/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)); } } diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx b/packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx index f38f68486e..c3c36978e9 100644 --- a/packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx +++ b/packages/documentation/src/stories/getting-started/migration-guide/migration-guide.docs.mdx @@ -16,10 +16,10 @@ import './migrationv6-7.component'; - + - + diff --git a/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5.component.ts b/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5.component.ts index dece6ec4da..f81d1b5eb2 100644 --- a/packages/documentation/src/stories/getting-started/migration-guide/migrationv4-5.component.ts +++ b/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`