migration boosted 4 to 5

Orange-OpenSource · Jul 9, 2021 · 0ebb478 · 0ebb478
1 parent c3995eb
commit 0ebb478
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 165 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -38,9 +38,11 @@
 
 <router-outlet></router-outlet>
 
-<a class="o-scroll-up" title="back to top" (click)="scroll()">
-  <span class="d-none d-sm-inline-block">Back to top</span>
-</a>
+<nav aria-label="Back to top" class="back-to-top">
+  <a href="#top" class="back-to-top-link btn btn-icon btn-secondary" data-o-label="Back to top">
+      <span class="visually-hidden">Back to top</span>
+  </a>
+</nav>
 
 <div role="contentinfo" class="o-footer mt-0">
   <h2 class="sr-only">Site map & informations</h2>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -10,7 +10,4 @@ export class AppComponent {
   title = 'Orange-Boosted-Angular';
   public isCollapsed = true;
   constructor(public globals: Globals) {}
-  scroll() {
-    window.scrollTo(0, 0);
-  }
 }
diff --git a/src/app/demos/scroll-up.component.html b/src/app/demos/scroll-up.component.html
@@ -1,3 +1,5 @@
-<a href="#" class="o-scroll-up" title="back to top">
-    <span class="d-none d-sm-inline-block">Back to top</span>
-</a>
+<nav aria-label="Back to top" class="back-to-top">
+    <a href="#top" class="back-to-top-link btn btn-icon btn-secondary" data-o-label="Back to top">
+        <span class="visually-hidden">Back to top</span>
+    </a>
+</nav>
diff --git a/src/app/demos/spinner.component.html b/src/app/demos/spinner.component.html
@@ -1,45 +1,23 @@
 <div class="spinner-border text-primary" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-border text-secondary" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-border text-success" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-border text-danger" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-border text-warning" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-border text-info" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-border text-light" role="status">
-    <span class="sr-only">Loading...</span>
+  <span class="visually-hidden">Loading...</span>
+</div>
+<div class="spinner-border text-secondary" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+<div class="spinner-border spinner-border-sm" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+<div class="spinner-border spinner-border-lg" role="status">
+  <span class="visually-hidden">Loading...</span>
 </div>
 
 <hr>
 
-<div class="spinner-grow text-primary" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-grow text-secondary" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-grow text-success" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-grow text-danger" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-grow text-warning" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-grow text-info" role="status">
-    <span class="sr-only">Loading...</span>
-  </div>
-  <div class="spinner-grow text-light" role="status">
-    <span class="sr-only">Loading...</span>
-</div>
+<button class="btn btn-primary" type="button" disabled>
+  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+  <span class="visually-hidden">Loading...</span>
+</button>
+<button class="btn btn-primary" type="button" disabled>
+  <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
+  Loading...
+</button>
diff --git a/src/app/demos/stepbar.component.html b/src/app/demos/stepbar.component.html
@@ -1,20 +1,20 @@
-<nav role="navigation" class="o-stepbar" aria-label="Checkout process">
+<nav class="stepped-process" aria-label="Checkout process">
     <p class="float-start mt-2 me-2 fw-bold d-sm-none">Step</p>
     <ol>
-        <li class="stepbar-item">
-            <a class="stepbar-link" href="#" title="1. Sign in">Sign in</a>
-        </li>
-        <li class="stepbar-item current">
-            <a class="stepbar-link" href="#" title="2. Review" aria-current="step">Review</a>
-        </li>
-        <li class="stepbar-item">
-            <a class="stepbar-link" href="#" title="3. Delivery">Delivery</a>
-        </li>
-        <li class="stepbar-item">
-            <a class="stepbar-link" href="#" title="4. Payment">Payment</a>
-        </li>
-        <li class="stepbar-item">
-            <a class="stepbar-link" href="#" title="5. Place order">Place order</a>
-        </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="1. Sign in">Sign in</a>
+      </li>
+      <li class="stepped-process-item active">
+        <a class="stepped-process-link" href="#" title="2. Review" aria-current="step">Review</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="3. Delivery">Delivery</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="4. Payment">Payment</a>
+      </li>
+      <li class="stepped-process-item">
+        <a class="stepped-process-link" href="#" title="5. Place order">Place order</a>
+      </li>
     </ol>
-</nav>
+  </nav>
diff --git a/src/app/demos/tabs.component.html b/src/app/demos/tabs.component.html
@@ -24,70 +24,54 @@
 
 <h6>Base nav</h6>
 
-<ul class="nav">
-  <li class="nav-item">
-    <a class="nav-link active" href="#" aria-current="page">Active</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-  </li>
-</ul>
+<nav class="nav">
+  <a class="nav-link active" aria-current="page" href="#">Active</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+</nav>
 
 <hr>
 
 <h6>Vertical nav</h6>
 
-<ul class="nav flex-column">
-  <li class="nav-item">
-    <a class="nav-link active" href="#" aria-current="page">Active</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#">Link</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-  </li>
-</ul>
+<nav class="nav flex-column">
+  <a class="nav-link active" aria-current="page" href="#">Active</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link" href="#">Link</a>
+  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+</nav>
 
 <hr>
 
 <h6>Tabs</h6>
 
 <ul class="nav nav-tabs" id="myTab" role="tablist">
   <li class="nav-item" role="presentation">
-    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
+    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
+    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
   </li>
   <li class="nav-item" role="presentation">
-    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
+    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
   </li>
 </ul>
 <div class="tab-content" id="myTabContent">
   <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
-    <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
+      Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
       master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
       dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
-      iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
+      iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
   </div>
   <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
-    <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit,
+    Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit,
     blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress,
     commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic,
-    assumenda labore aesthetic magna delectus mollit.</p>
+    assumenda labore aesthetic magna delectus mollit.
   </div>
   <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
-    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque. </p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In iaculis volutpat quam, non suscipit arcu accumsan at. Aliquam pellentesque. 
   </div>
 </div>
 
diff --git a/src/app/docs/code-box.component.ts b/src/app/docs/code-box.component.ts
@@ -16,55 +16,42 @@ import { Component, Input } from '@angular/core';
         }
     `],
     template: `
-        <h3 >Source</h3>
-        
-        <ul class="nav nav-tabs" id="myTab" role="tablist">
-            <li class="nav-item" role="presentation" *ngIf="snippets.markup">
-                <a class="nav-link active" id="HTML-tab" data-toggle="tab" href="#HTML" role="tab" aria-controls="HTML" aria-selected="true">HTML</a>
-            </li>
-
-            <li class="nav-item" role="presentation" *ngIf="snippets.typescript">
-                <a class="nav-link" id="TypeScript-tab" data-toggle="tab" href="#TypeScript" role="tab" aria-controls="TypeScript" aria-selected="false">TypeScript</a>
-            </li>
-
-            <li class="nav-item" role="presentation" *ngIf="snippets.css">
-                <a class="nav-link" id="CSS-tab" data-toggle="tab" href="#CSS" role="tab" aria-controls="CSS" aria-selected="false">CSS</a>
-            </li>
-
-            <li class="nav-item" role="presentation" *ngIf="snippets.service">
-                <a class="nav-link" id="Service-tab" data-toggle="tab" href="#Service" role="tab" aria-controls="Service" aria-selected="false">Service</a>
-            </li>
-
-            <li class="nav-item" role="presentation" *ngIf="snippets.container">
-                <a class="nav-link" id="Container-tab" data-toggle="tab" href="#Container" role="tab" aria-controls="Container" aria-selected="false">Container</a>
-            </li>
-
-        </ul>
-
-        <div class="tab-content" id="myTabContent">
-            <div class="tab-pane fade show active" id="HTML" role="tabpanel" aria-labelledby="HTML-tab">
-                <pre class="language-html"><code class="language-html" [innerHTML]="snippets.markup"></code></pre>
-            </div>
-
-            <div class="tab-pane fade" id="TypeScript" role="tabpanel" aria-labelledby="TypeScript-tab">
-                <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.typescript"></code></pre>
+        <h3 >Source</h3>     
+            <ul class="nav nav-tabs" id="myTab" role="tablist">
+                <li class="nav-item" role="presentation" *ngIf="snippets.markup">
+                    <button class="nav-link active" id="HTML-tab" data-bs-toggle="tab" data-bs-target="#HTML" type="button" role="tab" aria-controls="HTML" aria-selected="true">HTML</button>
+                </li>
+                <li class="nav-item" role="presentation" *ngIf="snippets.typescript">
+                    <button class="nav-link" id="TypeScript-tab" data-bs-toggle="tab" data-bs-target="#TypeScript" type="button" role="tab" aria-controls="TypeScript" aria-selected="true">TypeScript</button>
+                </li>
+                <li class="nav-item" role="presentation" *ngIf="snippets.css">
+                    <button class="nav-link" id="CSS-tab" data-bs-toggle="tab" data-bs-target="#CSS" type="button" role="tab" aria-controls="CSS" aria-selected="true">CSS</button>
+                </li>
+                <li class="nav-item" role="presentation" *ngIf="snippets.service">
+                    <button class="nav-link" id="Service-tab" data-bs-toggle="tab" data-bs-target="#Service" type="button" role="tab" aria-controls="Service" aria-selected="true">Service</button>
+                </li>
+                <li class="nav-item" role="presentation" *ngIf="snippets.container">
+                    <button class="nav-link" id="Container-tab" data-bs-toggle="tab" data-bs-target="#Container" type="button" role="tab" aria-controls="Container" aria-selected="true">Container</button>
+                </li>
+            </ul>
+
+            <div class="tab-content" id="myTabContent">
+                <div class="tab-pane fade show active" id="HTML" role="tabpanel" aria-labelledby="HTML-tab">
+                    <pre class="language-html"><code class="language-html" [innerHTML]="snippets.markup"></code></pre>
+                </div>
+                <div class="tab-pane fade" id="TypeScript" role="tabpanel" aria-labelledby="TypeScript-tab">
+                    <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.typescript"></code></pre>
+                </div>
+                <div class="tab-pane fade" id="CSS" role="tabpanel" aria-labelledby="CSS-tab">
+                    <pre class="language-css"><code class="language-css" [innerHTML]="snippets.css"></code></pre>
+                </div>
+                <div class="tab-pane fade" id="Service" role="tabpanel" aria-labelledby="Service-tab">
+                    <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.service"></code></pre>
+                </div>
+                <div class="tab-pane fade" id="Container" role="tabpanel" aria-labelledby="Container-tab">
+                    <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.container"></code></pre>
+                </div>
             </div>
-
-            <div class="tab-pane fade" id="CSS" role="tabpanel" aria-labelledby="CSS-tab">
-                <pre class="language-css"><code class="language-css" [innerHTML]="snippets.css"></code></pre>
-            </div>
-
-            <div class="tab-pane fade" id="Service" role="tabpanel" aria-labelledby="Service-tab">
-                <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.service"></code></pre>
-            </div>
-
-            <div class="tab-pane fade" id="Container" role="tabpanel" aria-labelledby="Container-tab">
-                <pre class="language-typescript"><code class="language-typescript" [innerHTML]="snippets.container"></code></pre>
-            </div>
-
-        </div>
-
-
     `
 })
 export class CodeBoxComponent {

diff --git a/src/app/docs/scroll-up.component.md b/src/app/docs/scroll-up.component.md
diff --git a/src/app/docs/scroll-up.component.ts b/src/app/docs/scroll-up.component.ts
@@ -11,15 +11,12 @@ import { Component } from '@angular/core';
     href="https://boosted.orange.com/docs/4.4/components/scroll-up/">boosted's original component documentation</a>.</p>
       <h3>Demo</h3>
       <p>Scroll down this page to see a nice example.</p>
-      <h3>Usage</h3>
-      <div [innerHtml]=docContent></div>
       <code-box [snippets]="demoSnippets"></code-box>
       <div class="fake-block"></div>
     </docs-wrapper>
   `
 })
 export class DocScrollUpComponent {
-  public docContent = require('html-loader!markdown-loader!./scroll-up.component.md');
   public demoSnippets = {
     markup: require('!!prismjs-loader?lang=html!../demos/scroll-up.component.html')
   };