set up current directors accordion

src/components/bcros/AddressAccordion.vue

@@ -3,11 +3,31 @@
     <UAccordion
       :items="items"
     >
+      <template #default="{ item, open }">
+        <UButton
+          variant="ghost"
+          class="hover:bg-white text-sm font-bold text-gray-900 rounded p-4 pl-3"
+        >
+          <template #leading>
+            <div v-if="item.showAvatar" class="w-6 h-6 rounded-full flex items-center justify-center">
+              <UAvatar size="xs" class="bg-primary" :ui="{text: 'text-white'}" :text="item.label.substring(0,1)" />
+            </div>
+          </template>
+          <span class="text-left" :class="item.showAvatar ? 'pl-2' : ''">{{ item.label }}</span>
+          <template #trailing>
+            <UIcon
+              name="i-heroicons-chevron-down-20-solid"
+              class="w-5 h-5 ms-auto transform transition-transform duration-200 text-gray-700"
+              :class="[open && '-rotate-180']"
+            />
+          </template>
+        </UButton>
+      </template>
       <template #item="{ item }">
         <div v-if="item.address" class="flex flex-col pl-3">
           <div class="flex">
             <UIcon v-if="item.showAddressIcons" name="i-mdi-truck" class="mr-5 text-2xl bg-primary" />
-            <div class="flex flex-col w-3/4" :class="item.showAddressIcons ? '' : 'ml-6'">
+            <div class="flex flex-col w-3/4" :class="item.showAddressIcons ? '' : 'ml-10'">
               <div class="text-gray-900">
                 {{ $t('label.address.addressType.delivery') }}
               </div>
@@ -16,7 +36,7 @@
           </div>
           <div class="flex pt-3">
             <UIcon v-if="item.showAddressIcons" name="i-mdi-email-outline" class="mr-5 text-2xl bg-primary" />
-            <div class="flex flex-col w-3/4" :class="item.showAddressIcons ? '' : 'ml-6'">
+            <div class="flex flex-col w-3/4" :class="item.showAddressIcons ? '' : 'ml-10'">
               <div class="text-gray-900">
                 {{ $t('label.address.addressType.mailing') }}
               </div>

src/components/bcros/CurrentDirector.vue

@@ -0,0 +1,38 @@
+<template>
+  <BcrosAddressAccordion
+    :name="name"
+    :items="directors"
+  />
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: { type: String, required: true }
+})
+
+// TO-DO: this are just some placeholder data. Update it in ticket #21300
+const directors = computed(() => {
+  return [
+    {
+      label: 'SOME TEST NAME',
+      defaultOpen: false,
+      address: {
+        deliveryAddress: {},
+        mailingAddress: {}
+      },
+      showAddressIcons: false,
+      showAvatar: true
+    },
+    {
+      label: 'ANOTHER NAME',
+      defaultOpen: false,
+      address: {
+        deliveryAddress: {},
+        mailingAddress: {}
+      },
+      showAddressIcons: false,
+      showAvatar: true
+    }
+  ]
+})
+</script>

src/components/bcros/Footer.vue

@@ -16,16 +16,16 @@
             </a>
           </li>
         </ul>
-        <div class="flex flex-auto justify-end">
-          <span class="text-yellow-400 italic mt-[2px] mr-2">{{ $t('label.footer.version') }}</span>
+        <div class="flex flex-auto justify-end items-center">
+          <span class="text-yellow-400 italic mr-2">{{ $t('label.footer.version') }}</span>
           <UTooltip
             :text="aboutText"
             :popper="{
               placement: 'top',
               arrow: true
             }"
           >
-            <div class="icon-container" role="img" aria-label="information">
+            <div class="icon-container mt-1" role="img" aria-label="information">
               <UIcon class="text-2xl text-white" name="i-mdi-information-outline" />
             </div>
           </UTooltip>

src/components/bcros/OfficeAddress.vue

@@ -19,19 +19,19 @@ defineProps({
 const addressItems = computed(() => {
   const items = [{
     label: t('label.address.officeType.registered'),
-    icon: '',
     defaultOpen: true, // To confirm: will the registered office address panel be expanded by default?
     address: currentBusinessAddresses.value.registeredOffice,
-    showAddressIcons: true
+    showAddressIcons: true,
+    showAvatar: false
   }]
 
   if (currentBusinessAddresses.value.recordsOffice) {
     items.push({
       label: t('label.address.officeType.records'),
-      icon: '',
       defaultOpen: false,
       address: currentBusinessAddresses.value.recordsOffice,
-      showAddressIcons: true
+      showAddressIcons: true,
+      showAvatar: false
     })
   }
 

src/components/bcros/Section.vue

@@ -3,7 +3,7 @@
     <div :data-cy="'header_' + name" class="font-bold text-lg py-2">
       <slot name="header" />
     </div>
-    <div :data-cy="'body_' + name" class="bg-white">
+    <div :data-cy="'body_' + name" class="bg-white rounded">
       <slot name="default" />
     </div>
   </div>

src/pages/dashboard.vue

@@ -49,7 +49,7 @@
             />
           </div>
         </template>
-        TBD
+        <BcrosCurrentDirector name="currentDirector" />
       </BcrosSection>
     </div>
   </div>

tests/components/bcros/BcrosAddressDisplay.spec.ts

@@ -40,10 +40,10 @@ describe('AddressDisplay tests', () => {
     expect(addressLines.at(1).text()).toBe(addressFilled.streetAdditional)
     expect(addressLines.at(2).text()).toBe('Vancouver BC V1L 4T7')
     expect(addressLines.at(3).text()).toBe(addressFilled.addressCountry)
-    // const locDesc = wrapper.find('[data-cy=location-description]')
-    // expect(locDesc.exists()).toBe(true)
-    // expect(locDesc.find('.title').text()).toBe('Location Description')
-    // expect(locDesc.find('[data-cy=content]').text()).toBe(addressFilled.locationDescription)
+    const locDesc = wrapper.find('[data-cy=location-description]')
+    expect(locDesc.exists()).toBe(true)
+    expect(locDesc.find('.title').text()).toBe('Location Description')
+    expect(locDesc.find('[data-cy=content]').text()).toBe(addressFilled.locationDescription)
 
     wrapper.unmount()
   })
@@ -71,10 +71,10 @@ describe('AddressDisplay tests', () => {
     const addressLines = wrapper.findAll('[data-cy=address-line]')
     expect(addressLines.length).toBe(1)
     expect(addressLines.at(0).text()).toBe(addressMissingParts.addressCountry)
-    // const locDesc = wrapper.find('[data-cy=location-description]')
-    // expect(locDesc.exists()).toBe(true)
-    // expect(locDesc.find('.title').text()).toBe('Location Description')
-    // expect(locDesc.find('[data-cy=content]').text()).toBe(addressMissingParts.locationDescription)
+    const locDesc = wrapper.find('[data-cy=location-description]')
+    expect(locDesc.exists()).toBe(true)
+    expect(locDesc.find('.title').text()).toBe('Location Description')
+    expect(locDesc.find('[data-cy=content]').text()).toBe(addressMissingParts.locationDescription)
 
     wrapper.unmount()
   })

tests/pages/dashboard.spec.ts

@@ -1,13 +1,14 @@
 import { beforeEach, describe, expect, it } from 'vitest'
 import { flushPromises, mount, VueWrapper } from '@vue/test-utils'
+import { mockedI18n } from '../test-utils/mockedi18n'
 
 import Dashboard from '../../src/pages/dashboard.vue'
 
 describe('dashboard page tests', () => {
   let wrapper: VueWrapper<any>
 
   beforeEach(async () => {
-    wrapper = mount(Dashboard)
+    wrapper = mount(Dashboard, { global: { plugins: [mockedI18n] } })
     // await api calls to resolve
     await flushPromises()
   })

tests/test-utils/mockedi18n.ts

@@ -0,0 +1,7 @@
+import { createI18n } from 'vue-i18n'
+import en from '~/lang/en.json'
+
+export const mockedI18n = createI18n({
+  locale: 'en',
+  messages: en
+})