AR-335: Updating export tabs (#366)

bcgov · Aug 22, 2024 · c811d77 · c811d77
1 parent ee70aa5
commit c811d77
Showing 1 changed file with 21 additions and 13 deletions.
diff --git a/src/app/export-reports/export-reports.component.html b/src/app/export-reports/export-reports.component.html
@@ -2,13 +2,22 @@
   <div class="card">
     <div class="card-body m-3">
       <h1>Export Report</h1>
-      <ngds-tab-row
-        defaultActiveTabId="standard"
-        tabRowClass="mb-4"
-        (tabChange)="changeActiveTab($event)">
-        <ngds-tab
-          id="standard"
-          title="Standard">
+
+      <ul class="nav nav-tabs my-4" id="myTab" role="tablist">
+        <li class="nav-item" role="presentation">
+          <button class="nav-link active" id="standard-tab" data-bs-toggle="tab" data-bs-target="#standard"
+            type="button"
+            role="tab" aria-controls="standard" aria-selected="true"
+            onclick="changeActiveTab('standard')">Standard</button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link" id="variance-tab" data-bs-toggle="tab" data-bs-target="#variance" type="button"
+            role="tab" aria-controls="variance" aria-selected="false"
+            onclick="changeActiveTab('variance')">Variance</button>
+        </li>
+      </ul>
+      <div class="tab-content" id="myTabContent">
+        <div class="tab-pane fade show active" id="standard" role="tabpanel" aria-labelledby="standard-tab">
           <div>
             <h3 class="card-title">Export all</h3>
             <p class="card-text text-muted">
@@ -17,10 +26,8 @@ <h3 class="card-title">Export all</h3>
           </div>
 
           <hr />
-        </ngds-tab>
-        <ngds-tab
-          id="variance"
-          title="Variance">
+        </div>
+        <div class="tab-pane fade" id="variance" role="tabpanel" aria-labelledby="variance-tab">
           <div>
             <h3 class="card-title">Export variance data</h3>
             <p class="card-text text-muted">
@@ -51,8 +58,9 @@ <h3 class="card-title">Export variance data</h3>
             </div>
 
           </div>
-        </ngds-tab>
-      </ngds-tab-row>
+        </div>
+      </div>
+
       <div class="mt-5 pb-2">
         <div class="card-text fw-bold">Exporter status:</div>
         <div>{{ status }}</div>