Update application footer

Aligning to new style guide

frontend/src/assets/main.scss

@@ -99,35 +99,6 @@ label {
 
 /* -------- layout ----------*/
 
-.gov-footer {
-  background-color: #003366 !important;
-  border-top: 2px solid #fcba19;
-  a {
-    display: inline-block;
-    padding: 0.5rem 1rem;
-    color: #ffffff;
-    font-size: 1rem;
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-    &:focus {
-      outline: none;
-    }
-    &:visited {
-      color: #ffffff;
-    }
-  }
-
-  & > div:last-child {
-    order: 1;
-  }
-  .version {
-    color: #ffffff;
-    float: right;
-  }
-}
-
 .app-primary-color {
   color: $app-primary !important;
 }

frontend/src/components/layout/AppLayout.vue

@@ -34,4 +34,3 @@ const authzStore = useAuthZStore();
     </footer>
   </div>
 </template>
-@/store/authnStore

frontend/src/components/layout/Footer.vue

@@ -1,63 +1,110 @@
 <script setup lang="ts">
-import { storeToRefs } from 'pinia';
+import { useI18n } from 'vue-i18n';
 
-import { useConfigStore } from '@/store';
-
-// Store
-const { getConfig } = storeToRefs(useConfigStore());
+// Actions
+const { t } = useI18n();
 </script>
 
 <template>
-  <div class="gov-footer flex justify-content-between">
-    <div>
-      <a
-        href="https://www.gov.bc.ca/"
-        target="_blank"
-      >
-        Home
-      </a>
-      <a
-        href="https://www2.gov.bc.ca/gov/content/about-gov-bc-ca"
-        target="_blank"
-      >
-        About gov.bc.ca
-      </a>
-      <a
-        href="http://gov.bc.ca/disclaimer"
-        target="_blank"
-      >
-        Disclaimer
-      </a>
-      <a
-        href="http://gov.bc.ca/privacy"
-        target="_blank"
-      >
-        Privacy
-      </a>
-      <a
-        href="http://gov.bc.ca/webaccessibility"
-        target="_blank"
-      >
-        Accessibility
-      </a>
-      <a
-        href="http://gov.bc.ca/copyright"
-        target="_blank"
-      >
-        Copyright
-      </a>
-      <a
-        href="https://www2.gov.bc.ca/gov/content/home/contact-us"
-        target="_blank"
-      >
-        Contact Us
-      </a>
+  <div class="gov-footer flex flex-column">
+    <div class="acknowledgement px-8 py-5">
+      {{ t('footer.acknowledgement') }}
     </div>
-    <div
-      v-if="getConfig"
-      class="version px-3 py-2"
-    >
-      v{{ getConfig.version }}{{ getConfig.gitRev ? '-' + getConfig.gitRev.substring(0, 8) : '' }}
+    <div class="container px-8 py-5">
+      <div class="content pb-5">
+        <div class="flex justify-content-between">
+          <div class="flex flex-column">
+            <div class="logo">
+              <img
+                src="@/assets/images/BCID_H_rgb_pos.png"
+                class="bc-logo"
+                alt="B.C. Government Logo"
+              />
+            </div>
+            <div class="contact">
+              <!-- prettier-ignore -->
+              <p>
+                {{ t('footer.contact1') }}
+                <a href="https://www2.gov.bc.ca/gov/content?id=6A77C17D0CCB48F897F8598CCC019111">{{ t('footer.contact2') }}</a>{{ t('footer.contact3') }}
+                <a href="https://www2.gov.bc.ca/gov/content?id=FBC4210F6BC047A5884198F543C97D53">{{ t('footer.contact4') }}</a>
+              </p>
+            </div>
+          </div>
+          <div class="links pr-8">
+            <p class="font-bold">{{ t('footer.moreInfo') }}</p>
+            <div class="flex">
+              <div class="flex flex-column pr-8">
+                <a href="https://www2.gov.bc.ca/gov/content/home">{{ t('footer.home') }}</a>
+                <a href="https://www2.gov.bc.ca/gov/content?id=3C4F47288DFB454987435AB5EFEFBB7F">
+                  {{ t('footer.about') }}
+                </a>
+                <a href="https://www2.gov.bc.ca/gov/content?id=79F93E018712422FBC8E674A67A70535">
+                  {{ t('footer.disclaimer') }}
+                </a>
+                <a href="https://www2.gov.bc.ca/gov/content?id=9E890E16955E4FF4BF3B0E07B4722932">
+                  {{ t('footer.privacy') }}
+                </a>
+              </div>
+              <div class="flex flex-column">
+                <a href="https://www2.gov.bc.ca/gov/content?id=E08E79740F9C41B9B0C484685CC5E412">
+                  {{ t('footer.accessibility') }}
+                </a>
+                <a href="https://www2.gov.bc.ca/gov/content?id=1AAACC9C65754E4D89A118B875E0FBDA">
+                  {{ t('footer.copyright') }}
+                </a>
+                <a href="https://www2.gov.bc.ca/gov/content?id=6A77C17D0CCB48F897F8598CCC019111">
+                  {{ t('footer.contactUs') }}
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="copyright pt-5">© {{ new Date().getUTCFullYear() }} {{ t('footer.gov') }}.</div>
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.bc-logo {
+  max-height: 60px;
+  height: 60px;
+}
+
+.gov-footer {
+  .acknowledgement {
+    border-top: 3px solid #fcba19;
+    border-bottom: 3px solid #fcba19;
+    background-color: #003366 !important;
+    color: #ffffff;
+  }
+
+  .container {
+    background-color: #ffffff !important;
+  }
+  .contact {
+    max-width: 400px;
+  }
+
+  .copyright {
+    border-top: 1px solid var(--text-color);
+  }
+
+  .links {
+    a {
+      padding: 0.5rem 1rem 0.5rem 0;
+      color: var(--text-color);
+      text-decoration: none;
+      &:hover {
+        text-decoration: underline;
+      }
+      &:focus {
+        outline: none;
+      }
+      &:visited {
+        color: var(--text-color);
+      }
+    }
+  }
+}
+</style>

frontend/src/locales/en-CA.json

@@ -10,6 +10,22 @@
     "supervisor": "SUPERVISOR",
     "admin": "ADMIN"
   },
+  "footer": {
+    "about": "About gov.bc.ca",
+    "accessibility": "Accessibility",
+    "acknowledgement": "The B.C. Public Service acknowledges the territories of First Nations around B.C. and is grateful to carry out our work on these lands. We acknowledge the rights, interests, priorities, and concerns of all Indigenous Peoples — First Nations, Métis, and Inuit — respecting and acknowledging their distinct cultures, histories, rights, laws, and governments.",
+    "contactUs": "Contact us",
+    "contact1": "We can help in over 220 languages and through other accessible options.",
+    "contact2": "Call, email or text us",
+    "contact3": ", or",
+    "contact4": "find a service centre.",
+    "copyright": "Copyright",
+    "disclaimer": "Disclaimer",
+    "gov": "Government of British Columbia",
+    "home": "Home",
+    "moreInfo": "MORE INFO",
+    "privacy": "Privacy"
+  },
   "header": {
     "name": "Permit Connect Services"
   },

frontend/src/views/DeveloperView.vue

@@ -20,6 +20,12 @@ const { t } = useI18n();
 
 <template>
   <h2>Developer</h2>
+  <div
+    v-if="getConfig"
+    class="version px-3 py-2"
+  >
+    v{{ getConfig.version }}{{ getConfig.gitRev ? '-' + getConfig.gitRev.substring(0, 8) : '' }}
+  </div>
   <div>
     <div class="px-2 py-1 flex align-items-center">
       <p class="m-0 mr-2">Begin viewing site as:</p>

frontend/tests/unit/components/layout/Footer.spec.ts

@@ -5,7 +5,13 @@ import { mount, shallowMount } from '@vue/test-utils';
 import Footer from '@/components/layout/Footer.vue';
 import { StorageKey } from '@/utils/enums/application';
 
-// Mock router calls
+// Mock dependencies
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: vi.fn()
+  })
+}));
+
 vi.mock('vue-router', () => ({
   useRouter: () => ({
     push: vi.fn()
@@ -40,13 +46,13 @@ describe('Footer.vue', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  it('contains 7 links', () => {
+  it('contains 9 links', () => {
     const wrapper = mount(Footer, {
       global: {
         plugins: [createTestingPinia(), PrimeVue]
       }
     });
     const links = wrapper.findAll('a');
-    expect(links).toHaveLength(7);
+    expect(links).toHaveLength(9);
   });
 });