chore(tooltip): support example

scania-digital-design-system · Oct 25, 2024 · 68652c4 · 68652c4
1 parent b0a738b
commit 68652c4
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 63 deletions.
diff --git a/src/app/pages/tabs-links-page/tabs-subpage/data.json b/src/app/pages/tabs-links-page/tabs-subpage/data.json
@@ -0,0 +1,52 @@
+[
+  {
+    "company": "Alfreds Futterkiste",
+    "contact": "Maria Anders",
+    "country": "Germany"
+  },
+  {
+    "company": "Christina",
+    "contact": "Christina Berglund",
+    "country": "Sweden"
+  },
+  {
+    "company": "Centro comercial Moctezuma",
+    "contact": "Francisco Chang",
+    "country": "Mexico"
+  },
+  {
+    "company": "Ernst Handel",
+    "contact": "Roland Mendel",
+    "country": "Austria"
+  },
+  {
+    "company": "Island Trading",
+    "contact": "Helen Bennett",
+    "country": "UK"
+  },
+  {
+    "company": "Königlich Essen",
+    "contact": "Philip Cramer",
+    "country": "Germany"
+  },
+  {
+    "company": "Laughing Bacchus Winecellars",
+    "contact": "Yoshi Tannamuri",
+    "country": "Canada"
+  },
+  {
+    "company": "Magazzini Alimentari Riuniti",
+    "contact": "Giovanni Rovelli",
+    "country": "Italy"
+  },
+  {
+    "company": "North/South",
+    "contact": "Simon Crowther",
+    "country": "UK"
+  },
+  {
+    "company": "Paris spécialités",
+    "contact": "Marie Bertrand",
+    "country": "France"
+  }
+]
diff --git a/src/app/pages/tabs-links-page/tabs-subpage/tabs-subpage.component.html b/src/app/pages/tabs-links-page/tabs-subpage/tabs-subpage.component.html
@@ -8,13 +8,13 @@ <h5>Tab {{ pathIndex }}</h5>
         <th>Contact</th>
         <th>Country</th>
       </tr>
-      <tr>
-        <td>
-          <span id="first-table-item">Element with tooltip & ID</span>
+      <tr *ngFor="let item of tableData; let i = index">
+        <td [id]="'cell-' + i">
+          <span>{{ item.company }}</span>
           <tds-tooltip
-            placement="bottom"
+            placement="left"
             text="Text inside Tooltip"
-            selector="#first-table-item"
+            [selector]="'#cell-' + i"
             offset-distance="8"
             offset-skidding="0"
             mouse-over-tooltip="false"
@@ -29,64 +29,8 @@ <h5>Tab {{ pathIndex }}</h5>
             </p>
           </tds-tooltip>
         </td>
-        <td>Maria Anders</td>
-        <td>Germany</td>
-      </tr>
-      <tr>
-        <td>
-          <span id="second-table-item">Element with tooltip & no selector</span>
-          <tds-tooltip placement="bottom" text="Text inside Tooltip">
-            <p class="tds-detail-05 tds-u-m0">
-              Paragraph tag inside Tooltip with
-              <b>bold</b>
-              and
-              <i>italic</i>
-              tags too.
-            </p>
-          </tds-tooltip>
-        </td>
-        <td>Christina Berglund</td>
-        <td>Sweden</td>
-      </tr>
-      <tr>
-        <td>Centro comercial Moctezuma</td>
-        <td>Francisco Chang</td>
-        <td>Mexico</td>
-      </tr>
-      <tr>
-        <td>Ernst Handel</td>
-        <td>Roland Mendel</td>
-        <td>Austria</td>
-      </tr>
-      <tr>
-        <td>Island Trading</td>
-        <td>Helen Bennett</td>
-        <td>UK</td>
-      </tr>
-      <tr>
-        <td>Königlich Essen</td>
-        <td>Philip Cramer</td>
-        <td>Germany</td>
-      </tr>
-      <tr>
-        <td>Laughing Bacchus Winecellars</td>
-        <td>Yoshi Tannamuri</td>
-        <td>Canada</td>
-      </tr>
-      <tr>
-        <td>Magazzini Alimentari Riuniti</td>
-        <td>Giovanni Rovelli</td>
-        <td>Italy</td>
-      </tr>
-      <tr>
-        <td>North/South</td>
-        <td>Simon Crowther</td>
-        <td>UK</td>
-      </tr>
-      <tr>
-        <td>Paris spécialités</td>
-        <td>Marie Bertrand</td>
-        <td>France</td>
+        <td>{{ item.contact }}</td>
+        <td>{{ item.country }}</td>
       </tr>
     </table>
   </section>

diff --git a/src/app/pages/tabs-links-page/tabs-subpage/tabs-subpage.component.ts b/src/app/pages/tabs-links-page/tabs-subpage/tabs-subpage.component.ts
@@ -1,6 +1,8 @@
 import { Component, Input } from "@angular/core";
 import { TegelModule } from "@scania/tegel-angular-17";
 import { CommonModule } from "@angular/common";
+import data from "./data.json";
+
 @Component({
   selector: "app-tabs-subpage",
   standalone: true,
@@ -39,4 +41,5 @@ import { CommonModule } from "@angular/common";
 })
 export default class TabsSubpageComponent {
   @Input() pathIndex: number;
+  tableData = data;
 }