feat: Ppr page (#183)

* update readme, contributing and code of conduct * update vaults env and pkg josn * start ppr page * fix some styles * add french md files for ppr
bcgov · Sep 22, 2024 · f233cad · f233cad
1 parent fbc6514
commit f233cad
Show file tree

Hide file tree

Showing 33 changed files with 731 additions and 38 deletions.
diff --git a/app/app.config.ts b/app/app.config.ts
@@ -29,6 +29,7 @@ export default defineAppConfig({
       }
     },
     button: {
+      rounded: 'rounded',
       size: {
         bcGov: 'text-sm'
       },
@@ -73,6 +74,11 @@ export default defineAppConfig({
       border: 'border-gray-500',
       label: 'text-base text-bcGovColor-midGray font-normal'
     },
+    container: {
+      base: 'mx-auto',
+      padding: 'px-4 sm:px-6 lg:px-8',
+      constrained: 'max-w-bcGovLg'
+    },
     divider: {
       border: {
         base: 'flex border-bcGovGray-500 dark:border-gray-300/50'

diff --git a/app/components/BCReg/HeroBanner.vue b/app/components/BCReg/HeroBanner.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white bg-no-repeat lg:h-[30rem] lg:bg-homebanner lg:bg-[length:845px] lg:bg-right-bottom xl:bg-[length:955px] 2xl:h-[35rem] 2xl:bg-[length:1145px]">
+  <header class="bg-white bg-no-repeat lg:h-[30rem] lg:bg-homebanner lg:bg-[length:845px] lg:bg-right-bottom xl:bg-[length:955px] 2xl:h-[35rem] 2xl:bg-[length:1145px]">
     <div class="mx-auto flex w-full max-w-bcGovLg items-center px-2 py-4 lg:h-[30rem] lg:py-0 xl:h-[35rem]">
       <div class="prose prose-bcGov max-w-full lg:max-w-md xl:max-w-xl 2xl:max-w-[50%]">
         <h1>Access and manage your BC Registries and Online Services</h1>
@@ -13,10 +13,10 @@
           updates on ways to manage registration information.
         </p>
         <p>
-          For up-to-date data analytics on our products and services, <a class="text-blue-600 underline" href="https://www.analytics.bcregistry.gov.bc.ca/">visit our BC Registries
+          For up-to-date data analytics on our products and services, <a class="font-semibold text-[#1a5a96] underline" href="https://www.analytics.bcregistry.gov.bc.ca/">visit our BC Registries
             Statistics and Insights page</a>.
         </p>
       </div>
     </div>
-  </div>
+  </header>
 </template>
diff --git a/app/components/PPR/ContactInfo.vue b/app/components/PPR/ContactInfo.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+const PPR_HREF = 'https://www2.gov.bc.ca/gov/content/employment-business/business/managing-a-business/' +
+    'bc-registry-services-personal-property-registry'
+
+const MAILTO_HREF = 'mailto:[email protected]?subject=Personal%20Property%20Registry%20Support%20Request'
+</script>
+<template>
+  <div class="w-full bg-bcGovColor-footer p-4 text-white sm:py-9">
+    <div class="mx-auto flex max-w-bcGovLg flex-col gap-4 md:flex-row">
+      <div class="flex-1">
+        <h3 class="border-b border-blue-300 py-2 text-center text-xl font-semibold sm:text-left">
+          Need more information?
+        </h3>
+        <p class="py-6">
+          To learn more about Personal Property Registration in British Columbia, please
+          <a
+            :href="PPR_HREF"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <span class="underline">visit the Personal Property Information page.</span>
+          </a>
+          <UIcon name="i-mdi-open-in-new" class="ml-1 size-5 align-middle" />
+        </p>
+      </div>
+      <div class="flex-1 md:max-w-md lg:max-w-lg">
+        <h3 class="border-b border-blue-300 py-2 text-center text-xl font-semibold sm:text-left">
+          Contact Us
+        </h3>
+        <div class="space-y-7 py-6 pb-0 sm:pb-6">
+          <p>
+            For support or questions about this application, contact us at:
+          </p>
+          <ul class="space-y-1">
+            <li>
+              <span>Toll Free: <a class="underline" href="tel:+1-877-526-1526">1-877-526-1526</a></span>
+            </li>
+            <li>
+              <span>Email: <a class="underline" :href="MAILTO_HREF">[email protected]</a></span>
+            </li>
+          </ul>
+
+          <p>
+            <strong>Hours of Operation:</strong>
+            <br>
+            Monday to Friday, 8:30am - 4:30pm Pacific time
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/PPR/FeatureCard.vue b/app/components/PPR/FeatureCard.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineProps<{
+  src: string
+  title: string
+  description: string
+}>()
+</script>
+<template>
+  <li class="list-none space-y-4 text-center">
+    <img class="mx-auto pr-1" :src aria-hidden="true">
+    <h4 class="font-semibold text-bcGovColor-darkGray">
+      {{ title }}
+    </h4>
+    <p class="text-bcGovColor-midGray">
+      {{ description }}
+    </p>
+  </li>
+</template>
diff --git a/app/components/PPR/HeroBanner.vue b/app/components/PPR/HeroBanner.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const keycloak = reactive(useKeycloak())
+const isSmallScreen = useMediaQuery('(max-width: 640px)')
+</script>
+<template>
+  <header class="bg-white bg-no-repeat lg:h-[30rem] lg:bg-ppr-homebanner lg:bg-[length:836px] lg:bg-right-bottom xl:bg-[length:1010px] 2xl:h-[35rem] 2xl:bg-[length:1130px]">
+    <div class="mx-auto flex w-full max-w-bcGovLg items-center px-2 py-4 lg:h-[30rem] xl:h-[35rem]">
+      <div class="prose prose-bcGov max-w-full lg:max-w-md xl:max-w-xl 2xl:max-w-[50%]">
+        <h1>Register or search for legal claims on personal property</h1>
+        <p>
+          The Personal Property Registry records security interests and
+          liens against personal property belonging to British Columbia businesses
+          and individuals.
+        </p>
+        <SbcAuthMenu v-if="!keycloak.isAuthenticated" :block="isSmallScreen" />
+        <div v-if="!keycloak.isAuthenticated" class="pt-6">
+          <span>
+            New to BC Registries?
+            <a
+              href="https://dev.account.bcregistry.gov.bc.ca/choose-authentication-method"
+            >
+              <span class="font-semibold text-[#1a5a96] underline">Create a BC Registries Account</span>
+            </a>
+          </span>
+        </div>
+
+        <UButton
+          v-else
+          size="bcGov"
+          class="bg-bcGovColor-header font-semibold no-underline"
+          label="Go to BC Registries Dashboard"
+          :block="isSmallScreen"
+          to="https://www.bcregistry.gov.bc.ca/dashboard"
+        />
+      </div>
+    </div>
+  </header>
+</template>
diff --git a/app/components/PPR/LinkCard.vue b/app/components/PPR/LinkCard.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  title: string
+  src: string
+  description: string
+  link: {
+    label: string
+    target: string
+    href: string
+  }
+}>()
+
+function goToItem () {
+  return navigateTo(props.link.href, {
+    open: {
+      target: props.link.target
+    }
+  })
+}
+</script>
+<template>
+  <li
+    data-testid="ppr-link-card"
+    class="flex cursor-pointer flex-col items-center justify-center gap-6 rounded bg-white px-5 py-8 text-center shadow-md transition-transform focus-within:-translate-y-1 focus-within:ring-2 focus-within:ring-bcGovGray-500 hover:-translate-y-1 hover:shadow-lg hover:ring-2 hover:ring-bcGovGray-500 md:size-[300px] dark:border dark:border-gray-300/50 dark:bg-bcGovColor-darkGray dark:focus-within:ring-1 dark:focus-within:ring-bcGovGray-100 dark:hover:ring-1 dark:hover:ring-bcGovGray-100"
+    @click="goToItem"
+  >
+    <a
+      :href="link.href"
+      class="text-lg font-semibold text-bcGovColor-darkGray no-underline focus:outline-none"
+      :target="link.target"
+    >
+      {{ title }}
+    </a>
+    <img class="mx-auto" :src aria-hidden="true">
+    <p>{{ description }}</p>
+    <div class="px-4 pb-4 text-left sm:px-6">
+      <span class="flex flex-wrap items-center whitespace-nowrap font-semibold tracking-wide text-[#1a5a96] underline dark:text-white">
+        <span>
+          {{ link.label }}
+          <span class="inline-flex align-middle">
+            <UIcon
+              name="i-mdi-open-in-new"
+              class="ml-1 size-5"
+            />
+          </span>
+        </span>
+      </span>
+    </div>
+  </li>
+</template>
diff --git a/app/components/PPR/Section.vue b/app/components/PPR/Section.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ParsedContent } from '@nuxt/content'
+defineProps<{
+  content: ParsedContent | undefined
+  alternate: boolean
+}>()
+</script>
+<template>
+  <section
+    :class="[
+      'flex lg:h-[450px]',
+      alternate ? 'flex-col-reverse lg:flex-row-reverse' : 'flex-col lg:flex-row'
+    ]"
+  >
+    <div
+      class="min-h-[340px] flex-1 bg-contain bg-center bg-no-repeat"
+      :class="content?.bgImage"
+    />
+    <article class="prose prose-bcGov prose-li:list-[square] prose-li:m-0 prose-ul:pl-4 prose-h3:text-2xl prose-h3:mt-0 my-auto min-w-full flex-1 grow px-4 py-8 text-left marker:text-bcGovGray-500 sm:px-6 lg:min-w-[50%]">
+      <ContentRenderer :value="content" />
+    </article>
+  </section>
+</template>
diff --git a/app/components/Sbc/AuthMenu.vue b/app/components/Sbc/AuthMenu.vue
@@ -1,15 +1,14 @@
 <script setup lang="ts">
-import type { DropdownItem } from '#ui/types'
+const connectNav = reactive(useConnectNav())
 
 defineProps<{
   block: boolean
-  items: DropdownItem[][]
 }>()
 </script>
 <template>
   <UDropdown
     id="logged-out-options-dropdown"
-    :items
+    :items="connectNav.loggedOutUserOptions"
     :ui="{
       item: {
         base: 'group flex items-center gap-4 w-full',
@@ -24,7 +23,8 @@ defineProps<{
   >
     <!-- login button on large screens -->
     <UButton
-      class="rounded-md bg-bcGovColor-header px-6 py-3 font-semibold"
+      class="bg-bcGovColor-header font-semibold"
+      size="bcGov"
       label="Log in to my BC Registries Account"
       :block
       :aria-label="$t('label.selectLoginMethod')"

diff --git a/app/components/Sbc/ProductCard.vue b/app/components/Sbc/ProductCard.vue
@@ -42,7 +42,7 @@ const hasLinkStyle = 'cursor-pointer transition-transform focus-within:-translat
       <ContentRenderer :value="content" />
     </div>
     <div v-if="content?.link" class="px-4 sm:px-6 pb-4 text-left">
-      <span class="flex flex-wrap items-center font-semibold tracking-wide text-blue-500 underline dark:text-white">
+      <span class="flex flex-wrap items-center font-semibold tracking-wide text-[#1a5a96] underline dark:text-white">
         <span>
           {{ content?.link?.label }}
           <span class="inline-flex align-middle">

diff --git a/app/components/content/BcRegAccountButtons.vue b/app/components/content/BcRegAccountButtons.vue
@@ -38,15 +38,17 @@ const items = computed<DropdownItem[][]>(() => [
       <SbcAuthMenu :items :block="isSmallScreen" />
       <UButton
         :block="isSmallScreen"
-        class="rounded-md px-6 py-3 font-semibold text-bcGovColor-header no-underline"
+        size="bcGov"
+        class="font-semibold text-bcGovColor-footer no-underline"
         label="Create a BC Registries Account"
         variant="outline"
         to="https://www.account.bcregistry.gov.bc.ca"
       />
     </div>
     <UButton
       v-else
-      class="rounded-md bg-bcGovColor-header px-6 py-3 font-semibold no-underline"
+      size="bcGov"
+      class="bg-bcGovColor-header font-semibold no-underline"
       label="Go to BC Registries Dashboard"
       :block="isSmallScreen"
       to="https://www.bcregistry.gov.bc.ca/dashboard"

diff --git a/app/components/content/LandingSection.vue b/app/components/content/LandingSection.vue
@@ -14,7 +14,7 @@ const { data: cards } = await useAsyncData(`${props.path}-cards-${locale.value}`
     <div class="px-2">
       <slot name="header" />
     </div>
-    <ul class="m-0 mx-auto flex list-none flex-wrap justify-center gap-8 px-2 py-4">
+    <ul class="m-0 mx-auto flex list-none flex-wrap justify-center gap-8 px-2 pb-10 pt-6">
       <SbcProductCard
         v-for="card in cards"
         :key="card._path"

diff --git a/app/components/content/ProseA.vue b/app/components/content/ProseA.vue
@@ -29,11 +29,11 @@ function resolvePath () {
 
 <template>
   <span>
-    <a class="text-blue-500 underline" :target :download :href="resolvePath()">
+    <a class="text-[#1a5a96] underline" :target :download :href="resolvePath()">
       <slot />
     </a>
     <span v-if="target === '_blank'" class="ml-1 inline-flex pb-1 align-middle">
-      <UIcon name="i-mdi-open-in-new" class="size-4 shrink-0 text-blue-500" />
+      <UIcon name="i-mdi-open-in-new" class="size-4 shrink-0 text-[#1a5a96]" />
     </span>
   </span>
 </template>
diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -38,7 +38,7 @@ const homeItems = [
         :ui="{
           strategy: 'override',
           active: '',
-          label: 'font-semibold text-blue-500 underline text-base truncate relative',
+          label: 'font-semibold text-[#1a5a96] underline text-base truncate relative',
           inner: 'min-w-0 py-1 px-4 py-1 sm:px-6 md:px-10 lg:px-16',
           container: 'flex flex-wrap items-center min-w-0 divide-x divide-gray-300',
           base: 'group relative w-full flex items-center gap-1.5 rounded-md font-medium text-sm focus:outline-none focus-visible:outline-none dark:focus-visible:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 disabled:cursor-not-allowed disabled:opacity-75'