Merge branch 'main' into platform-review-step

strr-api/.dockerignore

@@ -9,3 +9,4 @@
 Dockerfile
 sample_data
 tests
+.coveragerc

strr-pm-web/app/app.config.ts

@@ -21,6 +21,9 @@ export default defineAppConfig({
         }
       }
     },
+    radioGroup: {
+      wrapper: 'max-w-bcGovInput'
+    },
     select: {
       color: {
         red: {
@@ -39,6 +42,21 @@ export default defineAppConfig({
         empty: 'text-gray-700'
       }
     },
+    textarea: {
+      base: 'bg-gray-100 hover:bg-gray-200 border-b text-gray-900 focus:border-b-2 h-20 hover:bg-gray-200',
+      rounded: 'rounded-none rounded-t',
+      color: {
+        gray: {
+          outline: 'border-gray-900 placeholder-gray-700 ring-0 focus:ring-0 focus:placeholder-primary-500'
+        },
+        primary: {
+          outline: 'bg-primary-50 border-primary-500 text-gray-900 ring-0 focus:ring-0'
+        },
+        red: {
+          outline: 'bg-red-50 border-red-600 placeholder-red-600 ring-0 focus:ring-0'
+        }
+      }
+    },
     tooltip: {
       container: 'z-20 group min-h-fit opacity-100'
     }

strr-pm-web/app/components/connect/Section.vue

@@ -1,31 +1,29 @@
 <script setup lang="ts">
-const { title, optional, divider, className } = defineProps<{
+defineProps<{
   title?: string
   optional?: boolean
-  divider?: boolean
   className?: string
+  error?: boolean
 }>()
-
-const { t } = useI18n()
 </script>
 <template>
   <div
     data-testid="form-section"
-    :class="`${className} mt-[40px] mobile:mt-[20px] ml-[40px] mr-[20px] mobile:mx-[8px]`"
+    class="px-4 md:px-10"
+    :class="[className, error ? 'border-l-2 border-red-600' : '']"
   >
     <div class="flex flex-col sm:flex-row">
       <div v-if="title" class="w-[200px]">
-        <p class="mb-[8px] sm:mb-0 sm:font-bold">
+        <p class="mb-2 sm:mb-0 sm:font-bold" :class="error ? 'text-red-600' : ''">
           {{ title }}
         </p>
         <p v-if="optional">
-          {{ t('general.optional') }}
+          {{ $t('general.optional') }}
         </p>
       </div>
       <div class="w-full sm:pl-5">
         <slot />
       </div>
     </div>
-    <div v-if="divider" class="hidden h-px w-full bg-bcGovGray-300 sm:block" />
   </div>
 </template>

strr-pm-web/app/components/connect/address/Index.vue

@@ -130,12 +130,12 @@ const addressComplete = () => {
         />
       </UFormGroup>
     </div>
-    <UFormGroup v-slot="{ error }" :name="schemaPrefix + 'locationDescription'">
+    <UFormGroup :name="schemaPrefix + 'locationDescription'">
       <UTextarea
         v-model="locationDescription"
         :placeholder="$t('label.locationDescription')"
+        :color="locationDescription ? 'primary' : 'gray'"
         class="w-full"
-        :variant="error ? 'error' : 'bcGov'"
         data-testid="address-location-description"
       />
     </UFormGroup>

strr-pm-web/app/components/connect/fee/ExtraFee.vue

@@ -2,7 +2,7 @@
 defineProps<{ description: string, fee: number, showFeeValue: boolean }>()
 </script>
 <template>
-  <div class="flex justify-between border-b border-bcGovGray-300 py-[10px] pl-4">
+  <div class="flex justify-between border-b border-bcGovGray-300 py-3 pl-4">
     <p class="font-bold">
       {{ description }}
     </p>

strr-pm-web/app/components/connect/fee/Widget.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useWindowSize } from '@vueuse/core'
 
 const { t } = useI18n()
 
@@ -30,13 +31,12 @@ const feeItems = computed<ConnectFeeItem[]>(() => {
 // folding stuff
 const folded = ref(false)
 
-const { width } = useScreenSize()
-const isFoldable = computed(() => {
-  const threshold = width.value < 1024
-  if (!threshold) {
+const { width } = useWindowSize()
+const isFoldable = computed(() => width.value < 1024)
+watch(isFoldable, (val) => {
+  if (!val) {
     folded.value = false
   }
-  return threshold
 })
 
 const toggleFolded = () => {
@@ -51,31 +51,33 @@ const toggleFolded = () => {
     data-testid="fee-widget"
     class="z-10 mr-5 w-full rounded bg-white shadow-md lg:mr-0 lg:w-[320px]"
   >
-    <div
-      :class="`
-        ${folded ? 'rounded' : 'rounded-t'}
-        px-[15px] py-[10px] pt-[10px] bg-midnightBlue-900 flex flex-row justify-between
-        cursor-pointer lg:cursor-auto
-        `
-      "
+    <UButton
+      :tabindex="isFoldable ? 0 : -1"
+      :role="isFoldable ? 'button' : 'title'"
+      class="flex w-full bg-midnightBlue-900 py-2 pl-4 text-lg font-bold transition-all"
+      :class="[folded ? 'rounded' : 'rounded-b-none rounded-t', isFoldable ? '' : 'pointer-events-none']"
+      :aria-label="$t('feeSummary.title')"
+      :label="$t('feeSummary.title')"
       @click="toggleFolded"
     >
-      <p class="font-bold text-white">
-        {{ t("feeSummary.title") }}
-      </p>
-      <div class="flex lg:hidden">
-        <img
-          src="/icons/caret.svg"
-          alt="Toggle fee widget shown"
-          :class="`cursor-pointer transition-all ${folded ? 'rotate-180': ''}`"
-        >
-      </div>
-    </div>
-    <div :class="`transition-all ${folded ? 'h-[0px] overflow-hidden p-[0px]': 'px-[15px] pb-[10px] '}`">
+      <template #trailing>
+        <div class="flex grow justify-end pr-1">
+          <UIcon
+            v-if="isFoldable"
+            class="size-7"
+            :name="folded ? 'i-mdi-chevron-down' : 'i-mdi-chevron-up'"
+          />
+        </div>
+      </template>
+    </UButton>
+    <div
+      class="text-sm transition-all"
+      :class="folded ? 'h-[0px] overflow-hidden': 'px-4 pt-1'"
+    >
       <div
         v-for="feeItem in feeItems"
         :key="feeItem.filingTypeCode"
-        class="flex flex-row justify-between border-b border-bcGovGray-300 py-[10px]"
+        class="flex flex-row justify-between border-b border-bcGovGray-300 py-3"
       >
         <p class="font-bold">
           {{ t(`feeSummary.itemLabels.${feeItem.filingTypeCode}`) }}
@@ -123,7 +125,7 @@ const toggleFolded = () => {
         :fee="totalGst"
         :show-fee-value="isPlaceholderActive"
       />
-      <div class="flex flex-row items-end justify-between py-[10px] text-sm" aria-label="null">
+      <div class="flex flex-row items-end justify-between py-3" aria-label="null">
         <p class="mb-1 font-bold">
           {{ t("feeSummary.total") }}
         </p>

strr-pm-web/app/components/connect/field/Group.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type UseEventBusReturn } from '@vueuse/core'
+
+const formBus = inject<UseEventBusReturn<any, string> | undefined>('form-events', undefined)
+
+const model = defineModel({ type: String, default: '' })
+watch(model, () => {
+  formBus?.emit({ type: 'blur', path: props.name })
+  formBus?.emit({ type: 'change', path: props.name })
+}, { deep: true })
+
+const props = defineProps({
+  name: { type: String, default: 'name.fullName' },
+  help: { type: String, default: '' },
+  id: { type: String, required: true },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  isDisabled: { type: Boolean, default: false },
+  size: { type: String, default: 'lg' }
+})
+</script>
+
+<template>
+  <UFormGroup :label="label" :name="name" :help="help">
+    <ConnectField
+      :id="id"
+      v-model="model"
+      :placeholder="placeholder"
+      :disabled="isDisabled"
+      size="lg"
+    />
+  </UFormGroup>
+</template>

strr-pm-web/app/components/connect/field/Index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { normalizeInput } from '~/utils/connect-validation'
+
+const model = defineModel({ type: String, default: '' })
+
+defineProps({
+  id: { type: String, required: true },
+  isDisabled: { type: Boolean, default: false },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  size: { type: String, default: 'lg' }
+})
+
+const normalize = () => {
+  model.value = normalizeInput(model.value)
+}
+</script>
+
+<template>
+  <UInput
+    :id="id"
+    v-model="model"
+    v-bind="$attrs"
+    type="text"
+    class="max-w-bcGovInput"
+    :color="model ? 'primary' : 'gray'"
+    :placeholder="placeholder"
+    :disabled="isDisabled"
+    :size="size"
+    @blur="normalize"
+  />
+</template>