fix: last style fixes

bcgov · Aug 30, 2023 · e1a8d7f · e1a8d7f
1 parent 581e141
commit e1a8d7f
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 38 deletions.
diff --git a/frontend/src/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
@@ -25,6 +25,10 @@
   --light-theme-support-support-info: #00478f;
   --light-theme-notifications-support-info-border: rgba(0, 102, 204, 1);
   --light-theme-text-text-primary: #131315;
+  --border-subtle-02: #dfdfe1;
+  --light-theme-tag-blue-background: #c2e0ff;
+  --light-theme-tag-blue-text:#00478f;
+  --light-theme-focus: #0073e6;
   //Primary button
   --cds-interactive-01: #0073E6;
   --cds-active-primary: #0073E6;
@@ -64,6 +68,13 @@ a:hover {
 a:visited {
   color: var(--light-theme-link-link-visited, #7c1cdf);
 }
+hr {
+  display: block;
+  border: 0;
+  border-top: 1px solid var(--border-subtle-02,#dfdfe1);
+  margin: 1em 0;
+  padding: 0;
+}
 
 .bulleted-list {
   list-style: decimal;
@@ -90,12 +101,7 @@ a:visited {
 }
 
 .inner-spotlight-group-markup {
-  border-bottom: solid 1px #dfdfe1;
-}
-
-.bx-tag {
-  background-color: #00478f;
-  color: white;
+  border-bottom: solid 1px var(--border-subtle-02);
 }
 
 .wizard-head {
@@ -654,6 +660,14 @@ a:visited {
   gap: 0.125rem;
   flex: 1 0 0;
 }
+.grouping-09 {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding-top: 2rem;
+  padding-bottom: 1.5rem;
+}
 
 .bx--btn-reset {
   position: relative;
@@ -694,7 +708,25 @@ a:visited {
   display: flex;
   align-items: flex-start;
   border-radius: 62.5rem;
-  background: var(--dark-theme-tag-blue-background, #00478f);
+  background: var(--light-theme-tag-blue-background, #c2e0ff);
+  gap: 0.125rem;
+  padding: 0 !important;
+}
+.bx-tag span{
+  color: var(--light-theme-tag-blue-text,#00478f);
+  margin: 0.19rem 0.5rem 0.31rem 0.5rem !important;
+}
+.bx-tag svg {
+  color: var(--light-theme-tag-blue-text,#00478f);
+  margin: 0.25rem !important;
+  border-radius: 150%;
+}
+.bx-tag svg:hover {
+  background-color: var(--light-theme-tag-blue-hover, #99ccff);
+  cursor: pointer;
+}
+.bx-tag svg:focus {
+  outline: 2px solid var(--light-theme-focus, #99ccff);
 }
 
 .bx--modal-btn-divider {
@@ -711,7 +743,8 @@ a:visited {
 
 .display-block-icon-wrapper {
   display: flex;
-  padding-top: 14px;
+  padding-top: 1rem;
+  padding-left: 1rem;
   align-items: flex-start;
   align-self: stretch;
 }

diff --git a/frontend/src/components/forms/AutoCompleteInputComponent.vue b/frontend/src/components/forms/AutoCompleteInputComponent.vue
@@ -8,6 +8,7 @@ const props = defineProps<{
   id: string
   label: string
   tip?: string
+  placeholder?: string
   modelValue: string
   contents: Array<BusinessSearchResult>
   validations: Array<Function>
@@ -114,7 +115,7 @@ revalidateBus.on(() => validateInput(inputValue.value))
       :data-focus="id"
       :data-scroll="id"
       :data-id="'input-' + id"
-      :placeholder="'Start typing to search for your ' + label"
+      :placeholder="placeholder"
       :value="inputValue"
       :label-text="label"
       :helper-text="tip"

diff --git a/frontend/src/components/forms/MultiselectInputComponent.vue b/frontend/src/components/forms/MultiselectInputComponent.vue
@@ -125,15 +125,17 @@ revalidateBus.on(() => validateInput(selectedValue.value))
       </bx-dropdown>
       <div class="bx-tag-box">
         <bx-tag
+          filter="true"
           v-for="(tag, index) in items"
           title="Clear selection"
           class="bx-tag"
           :data-tag="'tag_' + id + '_' + index"
           :id="'tag_' + id + '_' + index"
           :key="index"
         >
-          {{ tag }}
+          <span>{{ tag }}</span>
           <CloseOutline16
+          tabindex="1"
             :id="'close_' + id + '_' + index"
             @click="removeFromSelection(tag)"
           />

diff --git a/frontend/src/components/grouping/AddressGroupComponent.vue b/frontend/src/components/grouping/AddressGroupComponent.vue
@@ -192,6 +192,7 @@ watch([autoCompleteResult], () => {
     watch([error], () => {
       // @ts-ignore
       generalErrorBus.emit(error.response?.data.message)
+      postalCodeShowHint.value = true
     })
 
     watch(

diff --git a/frontend/src/components/grouping/ContactGroupComponent.vue b/frontend/src/components/grouping/ContactGroupComponent.vue
@@ -131,7 +131,7 @@ onMounted(() =>{
   <text-input-component
     :id="'firstName_' + id"
     label="First name"
-    placeholder="First name"
+    placeholder=""
     v-model="selectedValue.firstName"
     :validations="[
       ...getValidations('location.contacts.*.firstName'),
@@ -145,7 +145,7 @@ onMounted(() =>{
   <text-input-component
     :id="'lastName_' + id"
     label="Last name"
-    placeholder="Last name"
+    placeholder=""
     v-model="selectedValue.lastName"
     :validations="[
       ...getValidations('location.contacts.*.lastName'),
@@ -159,7 +159,7 @@ onMounted(() =>{
   <text-input-component
     :id="'email_' + id"
     label="Email address"
-    placeholder="Email"
+    placeholder=""
     v-model="selectedValue.email"
     :validations="[
       ...getValidations('location.contacts.*.email'),

diff --git a/frontend/src/components/visuals/DisplayBlockComponent.vue b/frontend/src/components/visuals/DisplayBlockComponent.vue
@@ -55,8 +55,8 @@ const iconsForKinds: Record<string, any> = {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  padding: 15px;
-  gap: 16px;
+  padding: 0.25rem;
+  gap: 1rem;
 }
 
 .display-block-wrapper p span {
@@ -93,7 +93,7 @@ const iconsForKinds: Record<string, any> = {
 }
 
 .display-block-icon-info {
-  color: var(--light-theme-notifications-support-info-border, rgba(0, 102, 204, 0.40));
+  color: var(--light-theme-support-info, #00478F);
 }
 .display-block-icon-success {
   color: #198038;

diff --git a/frontend/src/helpers/validators/ExternalFormValidations.ts b/frontend/src/helpers/validators/ExternalFormValidations.ts
@@ -82,14 +82,14 @@ globalValidations['location.contacts.*.contactType.text'] = [
   isNotEmpty('You must select at least one contact type'),
 ]
 globalValidations['location.contacts.*.firstName'] = [
-  isMinSize('Name should be between 1 and 25 characters with no special character')(1),
-  isMaxSize('Name should be between 1 and 25 characters with no special character')(25),
-  isNoSpecialCharacters('Name should be between 1 and 25 characters with no special character'),
+  isMinSize('Enter a name')(1),
+  isMaxSize('Enter a name')(25),
+  isNoSpecialCharacters('Enter a name'),
 ]
 globalValidations['location.contacts.*.lastName'] = [
-  isMinSize('Name should be between 1 and 25 characters with no special character')(1),
-  isMaxSize('Name should be between 1 and 25 characters with no special character')(25),
-  isNoSpecialCharacters('Name should be between 1 and 25 characters with no special character'),
+  isMinSize('Enter a name')(1),
+  isMaxSize('Enter a name')(25),
+  isNoSpecialCharacters('Enter a name'),
 ]
 globalValidations['location.contacts.*.email'] = [
   isEmail('Please provide a valid email address'),

diff --git a/frontend/src/pages/ApplyClientNumberPage.vue b/frontend/src/pages/ApplyClientNumberPage.vue
@@ -305,7 +305,7 @@ generalErrorBus.on((event: string) => (globalErrorMessage.value = event))
     <div v-if="currentTab == 0" class="form-steps-01">
       <div class="form-steps-01-title">
         <span class="heading-04" data-scroll="scroll-0">Before you begin</span>
-        <ol type="1" class="bulleted-list body-02">
+        <ol type="1" class="bulleted-list body-compact-01">
           <li>
             A registered business must be in good standing with BC
             Registries

diff --git a/frontend/src/pages/applyform/AddressWizardStep.vue b/frontend/src/pages/applyform/AddressWizardStep.vue
@@ -118,15 +118,13 @@ onMounted(() => setFocusedComponent('addr_0',800))
     @valid="updateValidState(0, $event)"
   />
 
-<hr v-if="otherAddresses.length > 0"/>
-
-<div class="frame-01">
-  <div v-if="otherAddresses.length > 0" class="grouping-01">
-    <span class="heading-03">Additional address</span>
-  </div>
-
+<div class="frame-01" v-if="otherAddresses.length > 0">
+
   <div v-for="(address, index) in otherAddresses">
-    <hr v-if="index > 0"/>
+    <hr />
+    <div class="grouping-09">
+      <span class="heading-03">Additional address</span>
+    </div>
     <address-group-component
       :key="index + 1"
       :id="index + 1"

diff --git a/frontend/src/pages/applyform/ContactWizardStep.vue b/frontend/src/pages/applyform/ContactWizardStep.vue
@@ -126,14 +126,13 @@ onMounted(() => setFocusedComponent('addressname_0',800))
     @valid="updateValidState(0, $event)"
   />
 
-  <hr v-if="otherContacts.length > 0"/>
-
   <div class="frame-01" v-if="otherContacts.length > 0">
-    <div class="grouping-01">
+
+    <div  v-for="(contact, index) in otherContacts">
+      <hr />
+      <div class="grouping-09">
       <span class="heading-03">Additional contact</span>
     </div>
-    <div  v-for="(contact, index) in otherContacts">
-      <hr v-if="index > 0"/>
     <contact-group-component
       :key="index + 1"
       :id="index + 1"

diff --git a/frontend/stub/__files/response-address-search.json b/frontend/stub/__files/response-address-search.json
@@ -1,6 +1,10 @@
 [
   {
-    "code": "AA|AA|A|00000000",
+    "code": "AA",
     "name": "1234 Nowhere St Victoria, BC, V8V 8V8"
+  },
+  {
+    "code": "BB",
+    "name": "505 Fail St Victoria, BC, V8V 8V8"
   }
 ]
diff --git a/frontend/stub/mappings/backend.json b/frontend/stub/mappings/backend.json
@@ -166,7 +166,7 @@
     },
     {
       "request": {
-        "urlPattern": "/api/clients/addresses/(.*)",
+        "url": "/api/clients/addresses/AA",
         "method": "GET"
       },
       "response": {
@@ -175,6 +175,17 @@
         "transformers": ["response-template"],
         "fixedDelayMilliseconds": 2500
       }
+    },
+    {
+      "request": {
+        "url": "/api/clients/addresses/BB",
+        "method": "GET"
+      },
+      "response": {
+        "status": 404,
+        "transformers": ["response-template"],
+        "fixedDelayMilliseconds": 2500
+      }
     }
   ]
 }