Update application footer

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/housing/submission/SubmissionListNavigator.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 
 import { Spinner } from '@/components/layout';
@@ -53,6 +53,7 @@ const pagination: Ref<Pagination> = ref({
   field: 'submittedAt',
   page: 0
 });
+const rowsPerPageOptions: Ref<Array<number>> = ref([10, 20, 50]);
 
 // read from query params if tab is set to enquiry otherwise use default values
 if (!route.query.tab || route.query.tab === '0') {
@@ -127,7 +128,6 @@ function isFinanciallySupported(data: Submission) {
   }
 }
 
-// Actions
 function updateQueryParams() {
   router.replace({
     name: RouteName.HOUSING_SUBMISSIONS,
@@ -140,6 +140,12 @@ function updateQueryParams() {
     }
   });
 }
+
+onMounted(() => {
+  if (submissions?.length && submissions.length > rowsPerPageOptions.value[rowsPerPageOptions.value.length - 1]) {
+    rowsPerPageOptions.value.push(submissions.length);
+  }
+});
 </script>
 
 <template>
@@ -158,7 +164,7 @@ function updateQueryParams() {
     :sort-order="pagination.order"
     paginator-template="RowsPerPageDropdown CurrentPageReport PrevPageLink NextPageLink "
     current-page-report-template="{first}-{last} of {totalRecords}"
-    :rows-per-page-options="[10, 20, 50]"
+    :rows-per-page-options="rowsPerPageOptions"
     selection-mode="single"
     :first="pagination.page && pagination.rows ? pagination.page * pagination.rows : 0"
     @update:sort-field="

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,111 @@
 <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 pt-5">
+    <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;
+    // TODO: Reference a surface colour once PrimeVue 4 changes come in
+    background-color: #252423 !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

@@ -2,6 +2,22 @@
   "collectionDisclaimer": {
     "disclaimer": "This information is being collected under the legal authority of section 26 (c)(e) and 27 (1)(a)(i) of the Freedom of Information and Protection of Privacy Act (the Act) and is being used for the purpose of creating a client relationship between you or your organization and Government of British Columbia. It may also be shared when strictly necessary with partner agencies that are also subject to the provisions of the Act. Personal information may be used by the Permitting Solutions Branch for survey purposes. If you have any questions regarding the use of this personal information, please contact Housing Authorizations at"
   },
+  "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"
+  },
   "groupName": {
     "developer": "DEVELOPER",
     "proponent": "PROPONENT",

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/src/views/HomeView.vue

@@ -11,20 +11,22 @@ const toHousing = (): void => {
 </script>
 
 <template>
-  <div class="bg" />
-  <div class="poly" />
-  <div class="flex align-items-center justify-content-start h-full">
-    <div class="text-left text-white-alpha-90">
-      <h1 class="font-bold mb-0">Welcome to the</h1>
-      <h1 class="font-bold mt-0">Permit Connect Services</h1>
-      <h2 class="mb-3">Choose your project type</h2>
-      <Button @click="toHousing">
-        <font-awesome-icon
-          icon="fa-solid fa-house"
-          class="mr-1"
-        />
-        Housing
-      </Button>
+  <div class="h-screen">
+    <div class="bg" />
+    <div class="poly" />
+    <div class="flex align-items-center justify-content-start h-full">
+      <div class="text-left text-white-alpha-90">
+        <h1 class="font-bold mb-0">Welcome to the</h1>
+        <h1 class="font-bold mt-0">Permit Connect Services</h1>
+        <h2 class="mb-3">Choose your project type</h2>
+        <Button @click="toHousing">
+          <font-awesome-icon
+            icon="fa-solid fa-house"
+            class="mr-1"
+          />
+          Housing
+        </Button>
+      </div>
     </div>
   </div>
 </template>

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);
   });
 });