Skip to content

Commit

Permalink
Merge branch 'main' into changeset-release/main
Browse files Browse the repository at this point in the history
  • Loading branch information
@alizedebray
alizedebray authored Apr 9, 2024
2 parents 38357c6 + 9787d76 commit 078aecf
Showing 1 changed file with 118 additions and 95 deletions.
213 changes: 118 additions & 95 deletions ...ages/documentation/src/stories/getting-started/migration-guide/migrationv6-7.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,38 +34,42 @@ export class MigrationV67Component extends LitElement {
<li>
<h3>Package Update 🩺</h3>
<ol>
${this.angular
? html`
<li>
<p>
Use
<a href="https://update.angular.io/" target="_blank">
https://update.angular.io/
</a>
to update Angular to version 17
</p>
</li>
`
: nothing}
${this.angular
? html`
<li>
<p>
Update ng-bootstrap to version
<a
href="https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CHANGELOG.md#1600-2023-11-22"
target="_blank"
>
16.x.x
</a>
:
<code languages="['bash']">
npm install @ng-bootstrap/ng-bootstrap@16
</code>
</p>
</li>
`
: nothing}
${
this.angular
? html`
<li>
<p>
Use
<a href="https://update.angular.io/" target="_blank">
https://update.angular.io/
</a>
to update Angular to version 17
</p>
</li>
`
: nothing
}
${
this.angular
? html`
<li>
<p>
Update ng-bootstrap to version
<a
href="https://github.com/ng-bootstrap/ng-bootstrap/blob/master/CHANGELOG.md#1600-2023-11-22"
target="_blank"
>
16.x.x
</a>
:
<code languages="['bash']">
npm install @ng-bootstrap/ng-bootstrap@16
</code>
</p>
</li>
`
: nothing
}
<li>
<p>
Expand All @@ -75,40 +79,44 @@ export class MigrationV67Component extends LitElement {
</li>
</ol>
</li>
${this.angular
? html`
<li>
<h3>Automatic Migration ⚙️</h3>
<p>
For Angular application, you can take advantage of our migration schematics.
</p>
<ol>
<li>Commit all the changes you have made so far</li>
<li>Make sure you are running on a node version >= 16</li>
<li>
You should now be able to run the following command to apply all automatic
migrations to your application:
<code languages="['bash']">
npm install @swisspost/design-system-migrations<br />
npx ng update @swisspost/design-system-migrations --from=6 --to=7
--migrate-only --allow-dirty<br />
npm uninstall @swisspost/design-system-migrations
</code>
</li>
</ol>
</li>
`
: nothing}
<li>
<h3>Component Migration 🤓</h3>
${this.angular
${
this.angular
? html`
<p class="info">
Changes flagged with the ⚙️ symbol should be automatically migrated with our
migration tool.
</p>
<li>
<h3>Automatic Migration ⚙️</h3>
<p>
For Angular application, you can take advantage of our migration schematics.
</p>
<ol>
<li>Commit all the changes you have made so far</li>
<li>Make sure you are running on a node version >= 16</li>
<li>
You should now be able to run the following command to apply all automatic
migrations to your application:
<code languages="['bash']">
npm install @swisspost/design-system-migrations<br />
npx ng update @swisspost/design-system-migrations --from=6 --to=7
--migrate-only --allow-dirty<br />
npm uninstall @swisspost/design-system-migrations
</code>
</li>
</ol>
</li>
`
: nothing}
: nothing
}
<li>
<h3>Component Migration 🤓</h3>
${
this.angular
? html`
<p class="info">
Changes flagged with the ⚙️ symbol should be automatically migrated with our
migration tool.
</p>
`
: nothing
}
<section>
<h4>Styles</h4>
Expand Down Expand Up @@ -167,11 +175,24 @@ export class MigrationV67Component extends LitElement {
<code>.bg-warning</code>.
</p>
</li>
<li class="mb-3">
<p>
Restricted the <em>badge</em> usage to showcasing counts exclusively ⚙️
<span class="tag tag-sm tag-danger">breaking</span>
<p class="info">
Use
<a href="/?path=/docs/1b1ea384-7421-4064-ad34-e3f48a36b39f--docs">tags</a>
to display states, properties, or other metadata. Opt for
<a href="/?path=/docs/12576d97-52c3-49ec-be7b-6d37728b75f5--docs">chips</a>
when presenting dismissible or selectable information.
</p>
</p>
</li>
</ul>
</section>
<section>
<h4>WebComponents</h4>
<h4>Web Components</h4>
<ul>
<li class="mb-3">
Expand Down Expand Up @@ -206,36 +227,38 @@ export class MigrationV67Component extends LitElement {
<h4>NgBootstrap</h4>
<ul>
${this.angular
? html`
<li class="mb-3">
<h5>
ngbAccordion
<span class="tag tag-sm tag-danger">breaking</span>
</h5>
<p>
The
<em>ngb-accordion</em>
and
<em>ngb-panel</em>
component have been removed from ng-bootstrap.
<br />
Use the <em>post-accordion</em> component from the
<a href="/?path=/docs/833ef689-a573-40f5-a6a6-30a999b94733--docs"
>@swisspost/design-system-components-angular</a
>
package as a replacement.
</p>
<p class="info">
See the
<a href="/?path=/docs/4d1b4185-e04d-494a-ab38-2b56c1778b0b--docs"
>accordion component documentation</a
>
for more detailed information.
</p>
</li>
`
: nothing}
${
this.angular
? html`
<li class="mb-3">
<h5>
ngbAccordion
<span class="tag tag-sm tag-danger">breaking</span>
</h5>
<p>
The
<em>ngb-accordion</em>
and
<em>ngb-panel</em>
component have been removed from ng-bootstrap.
<br />
Use the <em>post-accordion</em> component from the
<a href="/?path=/docs/833ef689-a573-40f5-a6a6-30a999b94733--docs"
>@swisspost/design-system-components-angular</a
>
package as a replacement.
</p>
<p class="info">
See the
<a href="/?path=/docs/4d1b4185-e04d-494a-ab38-2b56c1778b0b--docs"
>accordion component documentation</a
>
for more detailed information.
</p>
</li>
`
: nothing
}
</ul>
</section>
</li>
Expand Down

0 comments on commit 078aecf

Please sign in to comment.