FSADT1-861: BC Service Card form to Apply for a Client Number

frontend/src/assets/styles/global.scss

@@ -229,6 +229,9 @@ hr {
 
 .cds--inline-notification-content {
   width: 100%;
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 400;
 }
 
 div#app {
@@ -635,6 +638,21 @@ div#app {
   row-gap: 1.5rem;
 }
 
+.card {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--light-theme-border-border-subtle-00, #dfdfe1);
+  background: #fff;
+  max-width: 50.4375rem;
+}
+
+.divider {
+  margin: 1.5rem 0 1.5rem 0;
+}
+
 .grouping-01 {
   align-self: stretch;
   display: flex;
@@ -707,16 +725,6 @@ div#app {
   background: #fff;
 }
 
-.grouping-tbd {
-  align-self: stretch;
-  display: flex;
-  flex-direction: column;
-  padding: 1.5rem 0 1.5rem 0;
-  border-radius: 0.5rem;
-  border: 1px solid var(--light-theme-border-border-subtle-00, #dfdfe1);
-  background: #fff;
-}
-
 .grouping-06 {
   display: flex;
   flex-direction: column;
@@ -889,6 +897,21 @@ div#app {
   align-self: stretch;
 }
 
+.cds-text-input-label {
+  color: var(--light-theme-text-text-primary, #131315);
+  font-family: BC Sans;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 1rem;
+  letter-spacing: 0.02rem;
+  padding-bottom: 0.5rem;
+}
+
+.cds-text-input-required-label {
+  color: var(--light-theme-text-text-error, #B32001);
+}
+
 cds-modal::part(dialog) {
   border-radius: 0.5rem;
 }
@@ -1551,4 +1574,4 @@ cds-accordion-item.grouping-05-internal:not([open]) {
     padding: 2.5rem 2.5rem 2.5rem 18.5rem;
     max-width: calc(100vw - 21rem);
   }
-}
+}

frontend/src/components/MainHeaderComponent.vue

@@ -175,23 +175,19 @@ const logoutModalActive = ref(false);
     <cds-modal-body><p></p></cds-modal-body>
 
     <cds-modal-footer>
-        <cds-modal-footer-button 
-          kind="secondary"
-          data-modal-close
-          class="cds--modal-close-btn">
-          Cancel
-        </cds-modal-footer-button>
-
-        <cds-modal-footer-button 
-          kind="danger"
-          class="cds--modal-submit-btn"
-          v-on:click="$session?.logOut"
-        >
-          Logout
-          <Logout16 slot="icon" />
-        </cds-modal-footer-button>
-
-      </cds-modal-footer>
+      <cds-modal-footer-button 
+        kind="secondary" 
+        data-modal-close class="cds--modal-close-btn">
+        Cancel
+      </cds-modal-footer-button>
+      <cds-modal-footer-button 
+        kind="danger" 
+        class="cds--modal-submit-btn" 
+        v-on:click="$session?.logOut">
+        Logout
+        <Logout16 slot="icon" />
+      </cds-modal-footer-button>
+    </cds-modal-footer>
   </cds-modal>
 
 </template>

frontend/src/components/forms/DropdownInputComponent.vue

@@ -18,6 +18,7 @@ const props = defineProps<{
   initialValue: string;
   validations: Array<Function>;
   errorMessage?: string;
+  requiredLabel?: boolean;
 }>();
 
 //Events we emit during component lifecycle
@@ -144,30 +145,40 @@ revalidateBus.on(() => validateInput(selectedValue.value));
 
 <template>
   <div class="grouping-03">
-    <cds-combo-box
-      v-for="time in comboBoxMountTime"
-      :key="time"
-      :id="id"
-      filterable
-      :helper-text="tip"
-      :label="placeholder"
-      :title-text="label"
-      :value="selectedValue"
-      :invalid="error ? true : false"
-      :invalidText="error"
-      @cds-combo-box-selected="selectItem"
-      :data-focus="id"
-      :data-scroll="id"
-      v-shadow="3"
-    >
-      <cds-combo-box-item 
-        v-for="option in inputList"
-        :key="option.code"
-        :value="option.name"
-        :data-id="option.code"
-        :data-value="option.name">
-        {{ option.name }}
-      </cds-combo-box-item>
-    </cds-combo-box>
+    <div class="input-group">
+      <div class="cds--text-input__label-wrapper">
+        <label :for="id" class="cds-text-input-label">
+          {{ label }}
+          <span v-if="requiredLabel"
+                class="cds-text-input-required-label">
+                 (required)
+          </span>
+        </label>
+      </div>
+      <cds-combo-box
+        v-for="time in comboBoxMountTime"
+        :key="time"
+        :id="id"
+        filterable
+        :helper-text="tip"
+        :label="placeholder"
+        :value="selectedValue"
+        :invalid="error ? true : false"
+        :invalidText="error"
+        @cds-combo-box-selected="selectItem"
+        :data-focus="id"
+        :data-scroll="id"
+        v-shadow="3"
+      >
+        <cds-combo-box-item 
+          v-for="option in inputList"
+          :key="option.code"
+          :value="option.name"
+          :data-id="option.code"
+          :data-value="option.name">
+          {{ option.name }}
+        </cds-combo-box-item>
+      </cds-combo-box>
+    </div>
   </div>
 </template>

frontend/src/components/forms/MultiselectInputComponent.vue

@@ -18,6 +18,7 @@ const props = defineProps<{
   initialValue: string;
   validations: Array<Function>;
   errorMessage?: string;
+  requiredLabel?: boolean;
 }>();
 
 //Events we emit during component lifecycle
@@ -114,28 +115,38 @@ revalidateBus.on(() => validateInput(selectedValue.value));
 <template>
   <div class="grouping-03">
     <div class="frame-02">
-      <cds-multi-select
-        :id="id"
-        :value="selectedValue"
-        :label="selectedValue"
-        :title-text="label"
-        :helper-text="tip"
-        :invalid="error ? true : false"
-        :invalid-text="error"
-        filterable
-        @cds-multi-select-selected="selectItems"
-        :data-focus="id"
-        :data-scroll="id"
-      >
-        <cds-multi-select-item
-          v-for="option in inputList"
-          :key="option.code"
-          :value="option.name"
-          :data-id="option.code"
-          :data-value="option.name">
-          {{ option.name }}
-        </cds-multi-select-item>
-      </cds-multi-select>
+      <div class="input-group">
+        <div class="cds--text-input__label-wrapper">
+          <label :for="id" class="cds-text-input-label">
+            {{ label }}
+            <span v-if="requiredLabel"
+                  class="cds-text-input-required-label">
+                  (required)
+            </span>
+          </label>
+        </div>
+        <cds-multi-select
+          :id="id"
+          :value="selectedValue"
+          :label="selectedValue"
+          :helper-text="tip"
+          :invalid="error ? true : false"
+          :invalid-text="error"
+          filterable
+          @cds-multi-select-selected="selectItems"
+          :data-focus="id"
+          :data-scroll="id"
+        >
+          <cds-multi-select-item
+            v-for="option in inputList"
+            :key="option.code"
+            :value="option.name"
+            :data-id="option.code"
+            :data-value="option.name">
+            {{ option.name }}
+          </cds-multi-select-item>
+        </cds-multi-select>
+      </div>
     </div>
   </div>
 </template>

frontend/src/components/forms/TextInputComponent.vue

@@ -18,6 +18,7 @@ const props = defineProps<{
   validations: Array<Function>;
   errorMessage?: string;
   mask?: string;
+  requiredLabel?: boolean;
 }>();
 
 //Events we emit during component lifecycle
@@ -103,7 +104,7 @@ watch(
 );
 
 // Tells whether the current change was done manually by the user.
-const isUserEvent = ref(false)
+const isUserEvent = ref(false);
 
 const selectValue = (event: any) => {
   selectedValue.value = event.target.value;
@@ -113,27 +114,39 @@ const selectValue = (event: any) => {
 
 <template>
   <div class="grouping-02" v-if="enabled">
-    <cds-text-input
-      v-if="enabled"
-      :id="id"
-      :placeholder="placeholder"
-      :value="selectedValue"
-      :label="enabled ? label : null"
-      :helper-text="tip"
-      :disabled="!enabled"
-      :invalid="error ? true : false"
-      :invalid-text="error"
-      v-masked="mask"
-      @blur="(event:any) => validateInput(event.target.value)"
-      @input="selectValue"
-      :data-focus="id"
-      :data-scroll="id"
-      :data-id="'input-' + id"
-    />
+    <div class="input-group">
+      <div class="cds--text-input__label-wrapper">
+        <label :for="id" class="cds-text-input-label">
+          {{ enabled ? label : null }}
+          <span v-if="requiredLabel"
+                class="cds-text-input-required-label">
+                 (required)
+          </span>
+        </label>
+      </div>
+      <cds-text-input
+        v-if="enabled"
+        :id="id"
+        :placeholder="placeholder"
+        :value="selectedValue"
+        :helper-text="tip"
+        :disabled="!enabled"
+        :invalid="error ? true : false"
+        :invalid-text="error"
+        v-masked="mask"
+        @blur="(event:any) => validateInput(event.target.value)"
+        @input="selectValue"
+        :data-focus="id"
+        :data-scroll="id"
+        :data-id="'input-' + id" 
+      />
+    </div>
   </div>
 
   <div v-if="!enabled" class="grouping-04">
-    <div :data-scroll="id" class="grouping-04-label"><span :for="id" class="label-01">{{ label }}</span></div>
+    <div :data-scroll="id" class="grouping-04-label">
+      <span :for="id" class="label-01">{{ label }}</span>
+    </div>
     <span class="text-01">{{ modelValue }}</span>
   </div>
 

frontend/src/components/grouping/AddressGroupComponent.vue

@@ -218,7 +218,6 @@ watch([autoCompleteResult], () => {
 
 watch([detailsData], () => {
   if (detailsData.value) {
-    console.log(JSON.stringify(detailsData.value));
     selectedValue.streetAddress = detailsData.value.streetAddress.trim();
     selectedValue.city = detailsData.value.city;
     selectedValue.province = detailsData.value.province;