Ward leader data spacing fixes and component for displaying ward leader website data (#323)

Added links-list component to render different kinds of websites/social media with a small component test

Author: vvi230714

cypress/component/links-list.cy.js

@@ -0,0 +1,23 @@
+import linksList from "../../src/components/links-list.vue";
+
+describe('Links List Component', () => {
+  it('renders correctly with props', () => {
+        const props = [
+                {
+                    title: 'Instagram - John Doe',
+                    url: 'https://www.example.com'
+                },
+                {
+                    title: 'LinkedIn - John Doe',
+                    url: 'https://www.linkedin.com'
+                }
+            ]
+        cy.mount(linksList, {props:{links:props}})
+        // Assert it has 2 <li> children
+        cy.get('li').should('have.length', 2)
+        // Check URL rendering
+        cy.get('li a').eq(0).should('have.attr', 'href', props[0].url)    
+        cy.get('li a').eq(1).should('have.attr', 'href', props[1].url)    
+    })
+
+})

src/components/links-list.vue

@@ -0,0 +1,33 @@
+<template>
+  <li v-for="(link, index) in links" :key="index">
+    <a
+      :href="link.url"
+      target="_blank"
+      rel="noopener noreferrer"
+      :title="link.title"
+      >{{ link.title }}</a
+    >
+  </li>
+</template>
+
+<script>
+export default {
+  name: "links-list",
+  props: {
+    links: {
+      type: Array,
+      required: true,
+      validator: (links) => {
+        return links.every((link) => "title" in link && "url" in link);
+      },
+    },
+  },
+};
+</script>
+
+<style scoped>
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+</style>

src/views/ward-leader.vue

@@ -167,6 +167,7 @@
                   <li v-if="leader.twitter">
                     <a :href="leader.twitter">Twitter</a>
                   </li>
+                  <links-list :links="leaderLinks"></links-list>
                 </ul>
                 <ask-detail
                   :thePage="feedbackPage"
@@ -252,6 +253,7 @@ import { mapState, mapGetters, mapActions } from "vuex";
 import StatsBar from "../components/stats-bar.vue";
 import CommitteePerson from "../components/committee-person.vue";
 import WardMap from "../components/ward-map.vue";
+import LinksList from "../components/links-list.vue";
 import AskDetail from "../components/ask-detail.vue";
 import { formatNumber, ordinalize } from "../util";
 import { TURNOUT_ELECTION } from "../config";
@@ -338,6 +340,31 @@ export default {
       return this.allCommitteePersons.filter((p) => p.fullName === "VACANT")
         .length;
     },
+    leaderLinks() {
+      let websites = this.leader.websites;
+      if (websites === undefined) {
+        return [];
+      }
+      let linkData = websites
+        .map((obj) =>
+          Object.fromEntries(
+            Object.entries(obj).filter(([key]) => key === "fields"),
+          ),
+        )
+        .sort((a, b) => {
+          const platformA = a.fields.platform.toUpperCase();
+          const platformB = b.fields.platform.toUpperCase();
+          return platformA.localeCompare(platformB);
+        });
+
+      linkData = linkData.map((item) => {
+        return {
+          title: `${item.fields.platform} - ${item.fields.title}`,
+          url: item.fields.url,
+        };
+      });
+      return linkData;
+    },
   },
   methods: {
     ...mapActions({
@@ -374,6 +401,7 @@ export default {
     "committee-person": CommitteePerson,
     "ward-map": WardMap,
     "ask-detail": AskDetail,
+    "links-list": LinksList,
   },
 };