feat(styles-migration): create migrations with the new cheerio util (#…

…687)

This PR adds new schematic utilities, to write easy jQuery-like migrations for almost all necessary DOM migrations.
And replaces all former existing with new migrations based on the new utilities.

Under the hood we use angular schematics built-in template visitor and cheerio to access the html in a jQuery-like context. Updates are formatted with prettier and commited directly on the tree files.

We added an example migration to show how to write new migrations.

To learn how to execute the schematic migrations, visit https://design-system.post.ch.

.changeset/calm-mails-cheat.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for bootstrap close-button component.

.changeset/chatty-ads-speak.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for bg-opacity classes.

.changeset/curly-emus-hide.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Updated migration documentation for post topic-teaser component.

.changeset/famous-onions-carry.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for button component btn-icon class.

.changeset/fifty-crabs-listen.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for general rtl properties.

.changeset/forty-chefs-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Update migration documentation for bootstrap button component btn-icon class.

.changeset/gold-pumas-act.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Updated migration documentation for bootstrap blockquote component.

.changeset/happy-geese-greet.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for bootstrap button component.

.changeset/happy-paws-peel.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for bootstrap form-switch component.

.changeset/honest-shirts-sleep.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for text-auto class.

.changeset/large-candles-move.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Updated migration documentation for bootstrap blockquote component.

.changeset/light-tomatoes-ring.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Added migration documentation jquery accordion component.

.changeset/long-zoos-complain.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Updated the migration documentation for close-button.

.changeset/modern-candles-grab.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Updated migration documentation for post custom-select component.

.changeset/modern-knives-cheer.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for required form-label class.

.changeset/nervous-dodos-own.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Removed alert-fixed-bottom class requirement from bootstrap alert component.

.changeset/nervous-houses-provide.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for bootstrap blockquote component with footer.

.changeset/nice-steaks-listen.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Updated migration documentation for bootstrap form-select component.

.changeset/orange-zebras-pretend.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for form-checkbox component.

.changeset/perfect-spoons-taste.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for post custom-select component.

.changeset/plenty-jobs-tap.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Updated migration documentation rtl helper classes.

.changeset/pretty-actors-pull.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Updated migration documentation for bootstrap form-switch component.

.changeset/purple-bees-whisper.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for forms elements.

.changeset/purple-dryers-double.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added floating-labels migration for bootstrap form-control, form-select and textarea components.

.changeset/quiet-buttons-jog.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Moved form-label class requirement form controls to forms migration documentation.

.changeset/rare-mirrors-tap.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for bootstrap badge component.

.changeset/rare-students-complain.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Fixed and updated general classes bg-opacity migration documentation.

.changeset/silly-donkeys-shake.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Updated migration documentation for ngbootstrap buttons component.

.changeset/spicy-boats-judge.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Upated migration documentation for bootstrap `form-control`, `form-select` and `textarea` components.

.changeset/swift-moles-deliver.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for sr-only and sr-only-focusable classes.

.changeset/swift-tigers-accept.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for bootstrap blockquote component.

.changeset/tender-candles-promise.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for post subnavigation component.

.changeset/tough-paws-cross.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Updated migration documentation post accordion component.

.changeset/twenty-roses-mix.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for bootstrap form-radio component.

.changeset/wet-poems-love.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-demo': patch
+---
+
+Added migration documentation for general classes sr-only and sr-only-focusable.

.changeset/wild-beds-reflect.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for post topic-teaser component.

.changeset/witty-laws-rush.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added automatic migration for ngbootstrap buttons component.

packages/demo/src/app/app.component.html

@@ -9,6 +9,8 @@
         Bootstrap
       </button>
       <div aria-labelledby="id01" ngbDropdownMenu>
+        <a ngbDropdownItem [ngClass]="{ active: router.url.indexOf('/bootstrap-samples/accordion') > -1 }"
+          [routerLink]="'bootstrap-samples/accordion'">Accordion</a>
         <a ngbDropdownItem [ngClass]="{active: router.url.indexOf('/bootstrap-samples/alert') > -1}"
           [routerLink]="'bootstrap-samples/alert'">Alert / Notification</a>
         <a ngbDropdownItem [ngClass]="{active: router.url.indexOf('/bootstrap-samples/badge') > -1}"
@@ -95,8 +97,6 @@
         Post
       </button>
       <div aria-labelledby="id01" ngbDropdownMenu>
-        <a ngbDropdownItem [ngClass]="{active: router.url.indexOf('/post-samples/accordion') > -1}"
-          [routerLink]="'post-samples/accordion'">Accordion</a>
         <a ngbDropdownItem [ngClass]="{active: router.url.indexOf('/post-samples/custom-select') > -1}"
           [routerLink]="'post-samples/custom-select'">Custom select</a>
         <a ngbDropdownItem [ngClass]="{active: router.url.indexOf('/post-samples/datatable') > -1}"

packages/demo/src/app/bootstrap/components/accordion/accordion-demo-page/accordion-demo-page.component.html

@@ -19,20 +19,13 @@ <h3>Using JavaScript</h3>
       into your component.
     </p>
   </div>
-  <div class="alert alert-info my-large">
-    <p>
-      The detail summary styles have been removed due to <a href="https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html">accessibility issues with the &lt;summary&gt; element</a>.
-      <br />
-      We recommend to use one of the accordion components instead.
-    </p>
-  </div>
-
-  <app-accordion-demo></app-accordion-demo>
   <code
-    class="block mt-5"
-    [highlight]="codeController"
-    [languages]="['typescript', 'javascript']"
+    class="block my-big p-3"
+    highlight="import 'bootstrap/js/dist/collapse';"
+    [languages]="['javascript']"
   ></code>
+
+  <app-accordion-demo></app-accordion-demo>
   <code
     class="block mt-big"
     [highlight]="codeTemplate"

packages/demo/src/app/bootstrap/components/buttons/buttons-demo/icon-buttons/icon-buttons.component.html

@@ -1,32 +1,32 @@
 <button type="button" class="btn btn-secondary btn-icon btn-sm">
   <i aria-hidden="true" class="pi pi-3193"></i>
-  <span>Label for screenreaders</span>
+  <span class="visually-hidden">Label for screenreaders</span>
 </button>
 <button type="button" class="btn btn-secondary btn-icon btn-rg">
   <i aria-hidden="true" class="pi pi-3193"></i>
-  <span>Label for screenreaders</span>
+  <span class="visually-hidden">Label for screenreaders</span>
 </button>
 <button type="button" class="btn btn-secondary btn-icon btn-md">
   <i aria-hidden="true" class="pi pi-3193"></i>
-  <span>Label for screenreaders</span>
+  <span class="visually-hidden">Label for screenreaders</span>
 </button>
 <button type="button" class="btn btn-secondary btn-icon btn-lg">
   <i aria-hidden="true" class="pi pi-3193"></i>
-  <span>Label for screenreaders</span>
+  <span class="visually-hidden">Label for screenreaders</span>
 </button>
 <button type="button" class="btn btn-primary btn-icon btn-sm">
   <i aria-hidden="true" class="pi pi-3193"></i>
-  <span>Label for screenreaders</span>
+  <span class="visually-hidden">Label for screenreaders</span>
 </button>
 <button type="button" class="btn btn-primary btn-icon btn-rg">
   <i aria-hidden="true" class="pi pi-3193"></i>
-  <span>Label for screenreaders</span>
+  <span class="visually-hidden">Label for screenreaders</span>
 </button>
 <button type="button" class="btn btn-primary btn-icon btn-md">
   <i aria-hidden="true" class="pi pi-3193"></i>
-  <span>Label for screenreaders</span>
+  <span class="visually-hidden">Label for screenreaders</span>
 </button>
 <button type="button" class="btn btn-primary btn-icon btn-lg">
   <i aria-hidden="true" class="pi pi-3193"></i>
-  <span>Label for screenreaders</span>
+  <span class="visually-hidden">Label for screenreaders</span>
 </button>