fixed sonar

Author: alionazherdetska

packages/components-angular/projects/consumer-app/src/app/app.component.html

@@ -241,54 +241,14 @@ <h3>Title 4</h3>
 
   <post-list slot="socialmedia">
     <h3>Follow us</h3>
-    <post-list-item>
-      <a href="#facebook" class="btn btn-primary btn-icon">
-        <post-icon aria-hidden="true" name="8004"></post-icon>
-        <span class="visually-hidden">Facebook</span>
-      </a>
-    </post-list-item>
-    <post-list-item>
-      <a href="#instagram" class="btn btn-primary btn-icon">
-        <post-icon aria-hidden="true" name="8007"></post-icon>
-        <span class="visually-hidden">Instagram</span>
-      </a>
-    </post-list-item>
-    <post-list-item>
-      <a href="#youtube" class="btn btn-primary btn-icon">
-        <post-icon aria-hidden="true" name="8002"></post-icon>
-        <span class="visually-hidden">Youtube</span>
-      </a>
-    </post-list-item>
-    <post-list-item>
-      <a href="#snapchat" class="btn btn-primary btn-icon">
-        <post-icon aria-hidden="true" name="8017"></post-icon>
-        <span class="visually-hidden">Snapchat</span>
-      </a>
-    </post-list-item>
-    <post-list-item>
-      <a href="#twitter-x" class="btn btn-primary btn-icon">
-        <post-icon aria-hidden="true" name="8000"></post-icon>
-        <span class="visually-hidden">Titter X</span>
-      </a>
-    </post-list-item>
-    <post-list-item>
-      <a href="#linkedin" class="btn btn-primary btn-icon">
-        <post-icon aria-hidden="true" name="8005"></post-icon>
-        <span class="visually-hidden">Linkedin</span>
-      </a>
-    </post-list-item>
-    <post-list-item>
-      <a href="#xing" class="btn btn-primary btn-icon">
-        <post-icon aria-hidden="true" name="8001"></post-icon>
-        <span class="visually-hidden">Xing</span>
-      </a>
-    </post-list-item>
-    <post-list-item>
-      <a href="mailto:[email protected]" class="btn btn-primary btn-icon">
-        <post-icon aria-hidden="true" name="letter"></post-icon>
-        <span class="visually-hidden">E-Mail</span>
-      </a>
-    </post-list-item>
+    @for (social of socialMediaLinks; track social.name) {
+      <post-list-item>
+        <a [href]="social.url" class="btn btn-primary btn-icon">
+          <post-icon aria-hidden="true" [name]="social.icon"></post-icon>
+          <span class="visually-hidden">{{ social.name }}</span>
+        </a>
+      </post-list-item>
+    }
   </post-list>
 
   <post-list slot="app">
@@ -335,27 +295,14 @@ <h3>Die schweizerische Post AG</h3>
 
   <post-list slot="meta" title-hidden="">
     <h3>Meta</h3>
-    <post-list-item>
-      <a href="https://www.post.ch/en/pages/footer/accessibility-at-swiss-post">
-        Accessibility
-      </a>
-    </post-list-item>
-    <post-list-item>
-      <a href="https://www.post.ch/en/pages/footer/general-terms-and-conditions-gtc">
-        General Terms and Conditions
-      </a>
-    </post-list-item>
-    <post-list-item>
-      <a href="https://www.post.ch/en/pages/footer/data-protection-and-disclaimer">
-        Data protection and disclaimer
-      </a>
-    </post-list-item>
-    <post-list-item>
-      <a href="https://www.post.ch/en/pages/footer/publication-details">
-        Publication details
-      </a>
-    </post-list-item>
-    <post-list-item>
+    @for (meta of metaLinks; track meta.text) {
+      <post-list-item>
+        <a [href]="meta.url">
+          {{ meta.text }}
+        </a>
+      </post-list-item>
+    }
+   <post-list-item>
       <button
         class="btn btn-link"
         [style.minHeight]="0"

packages/components-angular/projects/consumer-app/src/app/app.component.ts

@@ -94,6 +94,26 @@ export class AppComponent implements OnInit {
     { text: 'Link 5', url: '#test' },
   ];
 
+  // Social media links
+  public socialMediaLinks = [
+    { name: 'Facebook', url: '#facebook', icon: '8004' },
+    { name: 'Instagram', url: '#instagram', icon: '8007' },
+    { name: 'Youtube', url: '#youtube', icon: '8002' },
+    { name: 'Snapchat', url: '#snapchat', icon: '8017' },
+    { name: 'Titter X', url: '#twitter-x', icon: '8000' },
+    { name: 'Linkedin', url: '#linkedin', icon: '8005' },
+    { name: 'Xing', url: '#xing', icon: '8001' },
+    { name: 'E-Mail', url: 'mailto:[email protected]', icon: 'letter' },
+  ];
+
+  // Meta links
+  public metaLinks = [
+    { text: 'Accessibility', url: 'https://www.post.ch/en/pages/footer/accessibility-at-swiss-post' },
+    { text: 'General Terms and Conditions', url: 'https://www.post.ch/en/pages/footer/general-terms-and-conditions-gtc' },
+    { text: 'Data protection and disclaimer', url: 'https://www.post.ch/en/pages/footer/data-protection-and-disclaimer' },
+    { text: 'Publication details', url: 'https://www.post.ch/en/pages/footer/publication-details' },
+  ];
+
   constructor(private router: Router) {}
 
   ngOnInit(): void {