commit

src/common-components/textbox-question/textbox-question.vue

@@ -10,6 +10,7 @@
             class="input-wrapper"
             :class="[
                 includeSearchIcon ? 'has-search-icon' : '',
+                includeSelectIcon ? 'has-select-icon' : '',
             ]">
             <input
                 class="form-control"
@@ -38,6 +39,7 @@
                 :maxlength="maxLength ? maxLength : '999'"
                 @focus="$emit('focus', $event.target.value)" />
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
+            <button v-if="includeSelectIcon" type="submit" aria-label="Select button" />
         </div>
         <div v-show="errorMessage" class="row my-2 form-test-error">
             <span class="d-inline-flex mt-0" role="alert">{{ errorMessage }}</span>
@@ -76,6 +78,7 @@ export default {
         questionAlignment: String, // Left or center. Left is default.
         cornerStyle: String, // Rounded or square. Square is default.
         includeSearchIcon: Boolean,
+        includeSelectIcon: Boolean,
         min: String,
         max: String,
         disableAutoFill: Boolean
@@ -229,7 +232,23 @@ input[type="date"]::-webkit-calendar-picker-indicator {
                 display: flex;
             }
         }
-        
+        &.has-select-icon  {
+            button[type="submit"] {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                right: 1rem;
+                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8.89' xml:space='preserve'%3e%3cpath d='M8 8.89c-.24 0-.46-.09-.63-.26L.26 1.53a.901.901 0 0 1 0-1.27C.43.1.66 0 .9 0s.47.1.64.26L8 6.74 14.47.27c.17-.17.4-.27.64-.27s.47.1.63.27c.17.17.26.4.26.64s-.1.47-.27.63l-7.1 7.09a.86.86 0 0 1-.63.26z' fill='%231474a2'/%3e%3c/svg%3e");
+                background-repeat: no-repeat;
+                background-position: center;
+                background-color: transparent;
+                width: 1rem;
+                height: 100%;
+                border: 0px;
+                border-left: none;
+                display: flex;
+            }
+	    }
     }
     input {
         &.has-icon {

src/layouts/welcome-page/welcome-page.vue

@@ -3,9 +3,6 @@
     <div class="fade-on-route-transition">
         <siteHeader cmsWidgetName="Header"/>
         <siteSubHeader cmsWidgetName="SubHeader"/>
-        <p>Welcome Page Placeholder</p>
-        <br />
-
 		<div class="row mt-2">
 			<textboxQuestion
 				type="date"
@@ -18,6 +15,20 @@
                 :min="'1972-12-01'"
 			/>
 		</div>
+        <div class="row mt-2 mb-4">
+            <div class="col">
+                <textboxQuestion
+                    id="damageCauseField"
+                    cmsWidgetName="DamageCauseQuestion"
+                    v-model="damageCause"
+                    placeholderText="Select an option"
+                    includeSelectIcon
+                    disableAutoFill
+                    :data-bs-target="'#' + DamageCauseQuestion"
+                    validationRules="damage-cause-required" />
+            </div>
+        </div>
+        <buttonQuestionModal cmsWidgetName="DamageCauseQuestion" />
     </div>
 </div>
 </template>
@@ -31,11 +42,13 @@
     import { required } from "@/helpers/validation-rules";
     import { errorMessages } from "@/constants/error-messages";
 	import textboxQuestion from "@/common-components/textbox-question/textbox-question"
+    import buttonQuestionModal from "@/common-components/button-question-modal/button-question-modal"
 
     //define validation rules
     defineRule("loss-date-required", required(errorMessages.LOSS_DATE_REQUIRED));
+    defineRule("damage-cause-required", required(errorMessages.LOSS_CAUSE_REQUIRED));
 
-    export default ({
+    export default {
         name: "welcome-page",
         emits: ['update:modelValue'], // The component emits an event
 	    props: {
@@ -68,6 +81,12 @@
                 vm.setCmsContent(resultMap.cmsContent);
             });
         },
-    })
+        components: {
+            siteHeader,
+            siteSubHeader,
+            buttonQuestionModal,
+            textboxQuestion
+        },
+    }
 </script>