Alignment Updates and Exemption Review Unit Tests (#1586)

* Alignment Updates and Unit Tests * one more clean up of selected radio class * Minor Ux * helper function name update
bcgov · Oct 17, 2023 · 7643b9e · 7643b9e
1 parent cf73b1d
commit 7643b9e
Show file tree

Hide file tree

Showing 23 changed files with 143 additions and 60 deletions.
diff --git a/ppr-ui/src/assets/styles/base.scss b/ppr-ui/src/assets/styles/base.scss
@@ -937,4 +937,4 @@ tr.registration-row.draft-registration-row.added-reg-effect td.actions-cell,
   ::v-deep .theme--light.v-label:not(.v-label--is-disabled), .theme--light.v-messages {
     color: $gray9 !important;
   }
-}
+}
diff --git a/ppr-ui/src/assets/styles/layout.scss b/ppr-ui/src/assets/styles/layout.scss
@@ -86,7 +86,7 @@
 }
 
 .column-width-xl {
-  width: 27%;
+  width: 25%;
 }
 
 .column-width-lg {
@@ -106,7 +106,7 @@
 }
 
 .column-lg {
-  width: 15rem;
+  width: 15.5rem;
 }
 
 .column-md {

diff --git a/ppr-ui/src/components/common/Attention.vue b/ppr-ui/src/components/common/Attention.vue
@@ -20,8 +20,8 @@
           :initialValue="initialValue"
           :inputTitle="config.inputTitle"
           :inputLabel="config.inputLabel"
-          :inputColWidth="hasWiderInput ? 10 : undefined"
-          :labelColWidth="hasWiderInput ? 2 : undefined"
+          :inputColWidth="hasWiderInput ? 9 : undefined"
+          :labelColWidth="hasWiderInput ? 3 : undefined"
           :rules="maxLength(40)"
           :showErrors="setShowErrors"
           @updateValue="$emit('setStoreProperty', $event)"

diff --git a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeCivicAddress.vue
@@ -1,10 +1,10 @@
 <template>
   <v-card flat rounded id="mhr-home-civic-address" class="mt-8 px-8 pt-8 pb-2">
     <v-row no-gutters class="py-2">
-      <v-col cols="12" sm="2">
+      <v-col cols="12" sm="3">
         <label class="generic-label" :class="{'error-text': validate}">Civic Address</label>
       </v-col>
-      <v-col cols="12" sm="10" class="mt-n1">
+      <v-col cols="12" sm="9" class="mt-n1">
         <v-form ref="addressForm" name="address-form" v-model="isValidCivicAddress">
           <div class="form__row">
             <div class="form__row">

diff --git a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLandOwnership.vue
@@ -1,12 +1,12 @@
 <template>
-  <v-card flat rounded id="mhr-home-land-ownership" class=" mhr-home-land-ownership">
+  <v-card flat rounded id="mhr-home-land-ownership" class="mhr-home-land-ownership pa-8">
     <v-row no-gutters>
-      <v-col cols="12" sm="2">
+      <v-col cols="12" sm="3">
         <label class="generic-label" for="ownership">
           Land Lease or Ownership
         </label>
       </v-col>
-      <v-col cols="12" sm="10">
+      <v-col cols="12" sm="9">
         <v-checkbox
           id="ownership"
           label="The manufactured home is located on land that the homeowners own,
@@ -53,10 +53,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 @import '@/assets/styles/theme.scss';
 .mhr-home-land-ownership::v-deep {
-  padding: 40px 30px 32px;
 
   .ownership-checkbox {
-    margin-left: 70px;
     label {
       line-height: 24px;
     }

diff --git a/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationType.vue b/ppr-ui/src/components/mhrRegistration/HomeLocation/HomeLocationType.vue
@@ -1,10 +1,10 @@
 <template>
   <v-card flat rounded id="mhr-home-location-type" class="mt-8 pa-8">
     <v-row no-gutters class="pt-1">
-      <v-col cols="12" sm="2">
+      <v-col cols="12" sm="3">
         <label class="generic-label" :class="{'error-text': validate}">Location Type</label>
       </v-col>
-      <v-col cols="12" sm="10" class="mt-n1">
+      <v-col cols="12" sm="9" class="mt-n1">
         <v-radio-group
           id="location-type--radio-options"
           v-model="locationTypeOption"
@@ -19,7 +19,6 @@
                 id="lot-option"
                 class="home-type-radio"
                 label="Dealer's / Manufacturer's lot"
-                active-class="selected-radio"
                 :value="HomeLocationTypes.LOT"
               />
               <v-expand-transition>
@@ -47,7 +46,6 @@
                 id="home-park-option"
                 class="home-type-radio"
                 label="Manufactured home park (other than a strata park)"
-                active-class="selected-radio"
                 :value="HomeLocationTypes.HOME_PARK"
               />
               <v-expand-transition>
@@ -83,7 +81,6 @@
                 id="other-option"
                 class="home-type-radio"
                 label="Other land"
-                active-class="selected-radio"
                 :value="HomeLocationTypes.OTHER_LAND"
               />
               <v-expand-transition>
@@ -98,7 +95,6 @@
                     id="reserve-option"
                     class="home-type-radio"
                     label="Indian Reserve"
-                    active-class="selected-radio"
                     :value="HomeLocationTypes.OTHER_RESERVE"
                   />
                   <!-- Other Reserve  -->
@@ -123,7 +119,6 @@
                     id="strata-option"
                     class="home-type-radio"
                     label="Strata"
-                    active-class="selected-radio"
                     :value="HomeLocationTypes.OTHER_STRATA"
                   />
 
@@ -157,7 +152,6 @@
                     id="other-land-option"
                     class="home-type-radio"
                     label="Other"
-                    active-class="selected-radio"
                     :value="HomeLocationTypes.OTHER_TYPE"
                   />
 

diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerRoles.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnerRoles.vue
@@ -25,7 +25,6 @@
               v-on="on"
               :id="role.id"
               :class="role.class"
-              active-class="selected-radio"
               :disabled="isDisabledRadio(role.model)"
               v-model="role.model"
             >

diff --git a/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue b/ppr-ui/src/components/mhrRegistration/HomeOwners/HomeOwnersTable.vue
@@ -970,7 +970,7 @@ export default defineComponent({
     thead.simple {
 
       th {
-        padding: 0 12px;
+        padding: 0 16px;
       }
       th:first-child,
       td:first-child {
@@ -980,7 +980,7 @@ export default defineComponent({
 
     tbody > tr > td > div > tr > td,
     tbody > tr > td {
-      padding: 20px 12px;
+      padding: 20px 16px;
       // border-bottom: 1px solid red;
       border-radius: 0 !important;
     }
@@ -1032,7 +1032,7 @@ export default defineComponent({
 
   .v-data-table thead,
   .v-data-table-header th {
-    padding: 0 12px;
+    padding: 0 16px;
   }
 
   .font-light {

diff --git a/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue b/ppr-ui/src/components/mhrRegistration/ReviewConfirm/HomeLocationReview.vue
@@ -37,7 +37,7 @@
           <!-- Lot Type -->
           <template v-if="getMhrRegistrationLocation.locationType === HomeLocationTypes.LOT">
             <v-row no-gutters class="px-8 pt-1">
-              <v-col cols="3" class="pt-1 pr-2">
+              <v-col cols="3" class="pt-1 pr-3">
                 <h3>Dealer / Manufacturer Name</h3>
               </v-col>
               <v-col cols="9" class="pt-1">

diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/AddEditHomeSections.vue b/ppr-ui/src/components/mhrRegistration/YourHome/AddEditHomeSections.vue
@@ -7,15 +7,15 @@
     :class="{'border-error-left': validate && isNewHomeSection }">
     <v-form ref="addEditHomeSectionsForm" v-model="addEditValid">
       <v-row no-gutters>
-        <v-col cols="12" sm="2">
+        <v-col cols="12" sm="3">
           <label
             class="generic-label"
             :class="{ 'error-text': validate }"
           >
             {{ isNewHomeSection ? 'Add' : 'Edit' }} Section
           </label>
         </v-col>
-        <v-col cols="12" sm="10" class="pl-2">
+        <v-col cols="12" sm="9" class="pl-2">
           <!-- Add Edit Form -->
           <label class="generic-label">Serial Number</label>
           <v-text-field

diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue b/ppr-ui/src/components/mhrRegistration/YourHome/HomeCertification.vue
@@ -7,10 +7,10 @@
     :class="{ 'py-10': isMhrManufacturerRegistration }"
   >
     <v-row no-gutters>
-      <v-col cols="12" sm="2">
+      <v-col cols="12" sm="3">
         <label class="generic-label" :class="{ 'error-text': validate }">Certification</label>
       </v-col>
-      <v-col cols="12" sm="10" class="pl-1">
+      <v-col cols="12" sm="9" class="pl-1">
         <template v-if="!isMhrManufacturerRegistration">
           <v-radio-group
             id="certification-option-btns"

diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearInput.vue
@@ -1,6 +1,6 @@
 <template>
   <v-row id="mhr-home-manufacturer-year">
-    <v-col cols="2">
+    <v-col cols="3">
       <label
         class="generic-label"
         for="manufacturer-year"
@@ -22,7 +22,7 @@
         data-test-id="manufacture-year"
       />
     </v-col>
-    <v-col cols="6">
+    <v-col cols="5">
       <v-checkbox
       id="circa-year"
       label="This Year of Manufacture is approximate"

diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearSelect.vue b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturedYearSelect.vue
@@ -1,14 +1,14 @@
 <template>
   <v-row id="mhr-home-manufacturer-year">
-    <v-col cols="2">
+    <v-col cols="3">
       <label
         class="generic-label"
         :class="{ 'error-text': validate && hasError(yearRef) }"
       >
         Year of Manufacture
       </label>
     </v-col>
-    <v-col cols="5">
+    <v-col cols="4">
       <v-select
         :items="[currentYear + 1, currentYear, currentYear - 1]"
         id="manufacturer-year-select"

diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturerMakeModel.vue b/ppr-ui/src/components/mhrRegistration/YourHome/ManufacturerMakeModel.vue
@@ -3,7 +3,7 @@
     <v-card flat class="py-6 px-8 rounded">
       <v-form ref="makeModelComboForm" v-model="makeModelValid">
         <v-row id="mhr-home-manufacturer-name">
-          <v-col cols="2">
+          <v-col cols="3">
             <label
               class="generic-label"
               for="manufacturer-name"
@@ -12,7 +12,7 @@
               Manufacturer's Name
             </label>
           </v-col>
-          <v-col cols="10">
+          <v-col cols="9">
             <v-text-field
               id="manufacturer-name"
               ref="nameRef"
@@ -33,14 +33,14 @@
         <v-divider class="mt-2 mb-5 mx-0 w-100" />
 
         <v-row id="mhr-home-manufacturer-make">
-          <v-col cols="2">
+          <v-col cols="3">
             <label
               class="generic-label"
               for="manufacturer-make"
               :class="{ 'error-text': validate && hasError(makeRef) }"
             >Make</label>
           </v-col>
-          <v-col cols="10">
+          <v-col cols="9">
             <v-text-field
               id="manufacturer-make"
               ref="makeRef"
@@ -54,14 +54,14 @@
         </v-row>
 
         <v-row id="mhr-home-manufacturer-model">
-          <v-col cols="2">
+          <v-col cols="3">
             <label
               class="generic-label"
               for="manufacturer-model"
               :class="{ 'error-text': validate && hasError(modelRef) }"
             >Model</label>
           </v-col>
-          <v-col cols="10">
+          <v-col cols="9">
             <v-text-field
               id="manufacturer-model"
               ref="modelRef"

diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/OtherInformation.vue b/ppr-ui/src/components/mhrRegistration/YourHome/OtherInformation.vue
@@ -2,10 +2,10 @@
   <v-form ref="otherInformationForm" v-model="isOtherInfoValid">
     <v-card id="mhr-home-other-information" flat class="py-6 px-8 rounded">
       <v-row>
-        <v-col cols="2">
+        <v-col cols="3">
           <label class="generic-label" for="other-remarks" :class="{'error-text': validate}">Other</label>
         </v-col>
-        <v-col cols="10">
+        <v-col cols="9">
           <v-textarea
             id="other-remarks"
             v-model.trim="otherRemarks"
@@ -14,7 +14,7 @@
             name="name"
             counter="140"
             label="Other details about the home (Optional)"
-            class="other-info pl-1"
+            class="other-info"
             data-test-id="otherRemarks"
           ></v-textarea>
         </v-col>

diff --git a/ppr-ui/src/components/mhrRegistration/YourHome/RebuiltStatus.vue b/ppr-ui/src/components/mhrRegistration/YourHome/RebuiltStatus.vue
@@ -2,17 +2,16 @@
   <v-form ref="rebuiltStatus" v-model=isRebuiltStatusValid>
     <v-card id="mhr-rebuilt-status" flat class="py-6 px-8 rounded">
       <v-row>
-        <v-col cols="2" class="px-0">
+        <v-col cols="3" class="px-0">
           <label class="generic-label" for="rebuilt-status" :class="{'error-text': validate}">
             Rebuilt Description
           </label>
         </v-col>
-        <v-col cols="10">
+        <v-col cols="9">
           <v-textarea
             filled
             id="rebuilt-status-text"
             counter="280"
-            class="pl-1"
             v-model.trim="rebuiltRemarks"
             :rules="maxLength(280)"
             label="Description of the rebuilt status of the home (Optional)"

diff --git a/ppr-ui/src/components/mhrTransfers/ConfirmCompletion.vue b/ppr-ui/src/components/mhrTransfers/ConfirmCompletion.vue
@@ -114,7 +114,7 @@
             </slot>
           </v-col>
         </v-row>
-        <v-row no-gutters>
+        <v-row no-gutters class="mt-3">
           <v-col cols="3">
             <v-spacer></v-spacer>
           </v-col>

diff --git a/ppr-ui/src/components/mhrTransfers/SupportingDocuments.vue b/ppr-ui/src/components/mhrTransfers/SupportingDocuments.vue
@@ -14,14 +14,12 @@
       <v-radio
         id="supporting-doc-option-one"
         :label="docOptions.optionOne.text"
-        active-class="selected-radio"
         :value="docOptions.optionOne.value"
         data-test-id="supporting-doc-option-one"
       />
       <v-radio
         id="supporting-doc-option-two"
         :label="docOptions.optionTwo.text"
-        active-class="selected-radio"
         :class="{ 'invalid-selection': isSecondOptionError }"
         :value="docOptions.optionTwo.value"
         :disabled="isSecondOptionDisabled"
@@ -101,7 +99,7 @@ export default defineComponent({
     })
 
     const localState = reactive({
-      deletedOwnerState: props.deletedOwner,
+      deletedOwnerState: props.deletedOwner as MhrRegistrationHomeOwnerIF,
       showDocumentsSelectionError: computed(() => {
         return props.validate && !localState.deletedOwnerState.supportingDocument
       }),
-Original file line number
+Diff line change
@@ Expand Up @@
       ::v-deep .theme--light.v-label:not(.v-label--is-disabled), .theme--light.v-messages {
         color: $gray9 !important;
       }
-    }
+    }