WIP don't merge.

src/common-components/dropdown-question/dropdown-question.spec.js

@@ -0,0 +1,95 @@
+import { shallowMount } from "@vue/test-utils";
+import textboxQuestion from "./textbox-question";
+import { nextTick } from "vue";
+
+describe("dropdownQuestion.vue", () => {
+
+  it("Should return aria-disabled state", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        isDisabled: true,
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes()["aria-disabled"]).toEqual("true");
+  });
+
+  it("Should render a text input", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        name: "test",
+        label: "unit test label",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    expect(input.exists()).toBe(true);
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+  });
+
+  it("Should return label text", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        labelText: "label text",
+      },
+    });
+
+    // Assert
+    const label = wrapper.find("label");
+
+    expect(label.text()).toEqual("label text");
+  });
+
+  it("Should return input id", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        inputId: "input ID",
+      },
+    });
+
+    // Assert
+    const input = wrapper.find("input");
+
+    // Expect
+    expect(input.attributes().id).toEqual("input ID");
+  });
+
+  it("Should return placeholder text", async () => {
+    // Act
+    const wrapper = shallowMount(dropdownQuestion, {
+      propsData: {
+        placeholderText: "placeholder text",
+      },
+    });
+
+    // Assert
+    const placeholder = wrapper.find("input");
+
+    expect(placeholder.text()).toEqual("placeholder text");
+  });
+
+});

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

@@ -0,0 +1,60 @@
+<template>
+  <div class="dropdown-question">
+    <label :for="inputId" class="form-label">{{labelText}}</label>
+    <select class="form-select" aria-label="Default select example" :id="inputId" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
+      <option selected>Open this select menu</option>
+      <option value="1">One</option>
+      <option value="2">Two</option>
+      <option value="3">Three</option>
+    </select>
+    <p class="mt-1 mb-0">There has been an error!</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "dropdownQuestion",
+  props: {
+    isDisabled: Boolean,
+    modelValue: String,
+    labelText: String,
+    inputId: String,
+    isRequired: Boolean,
+  }
+};
+</script>
+
+<style lang="scss">
+.dropdown-question {
+  .form-label {
+    margin-bottom: .25rem;
+  }
+  .form-select {
+    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");
+    border: 1px solid $gray-500;
+    border-radius: .5rem;
+    min-height: 3rem;
+    option[selected] {
+      color: $gray-500;
+      background-color: red;
+    }
+    &:focus {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:disabled,
+    &.disabled {
+      background-color: $gray-100;
+      filter: grayscale(100%);
+      opacity: .65;
+      &:hover {
+        box-shadow: 0 0 0 4px transparent;
+        border: 1px solid $gray-500;
+      }
+    }
+    &:hover {
+      border: 1px solid transparent;
+      box-shadow: 0 0 0 4px $blue-300;
+    }
+  }
+}
+</style>

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

@@ -10,7 +10,6 @@
 export default {
   name: "textboxQuestion",
   props: {
-    isEnabled: Boolean,
     isDisabled: Boolean,
     modelValue: String,
     labelText: String,

src/layouts/component-test/component-test.vue

@@ -2,7 +2,7 @@
     <div class="container-fluid container-shadow p-2 rounded-3">
       <div class="row my-4">
         <div class="col">
-          <h4 class="m-0 p-2 bg-light rounded">Textbox Input</h4>
+          <h4 class="m-0 p-2 bg-light rounded">Text Input</h4>
         </div>
       </div>
       <div class="row">
@@ -36,6 +36,39 @@
           />
         </div>
       </div>
+      <div class="row my-4">
+        <div class="col">
+          <h4 class="m-0 p-2 bg-light rounded">Dropdown Input (select)</h4>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <dropdownQuestion
+            labelText="Text Input"
+            inputID="test-text-input"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">Disabled</h6>
+          <dropdownQuestion
+            labelText="Text Input"
+            inputID="test-text-input"
+            isDisabled
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">With Error (class="has-error"):</h6>
+          <dropdownQuestion
+            labelText="Text Input"
+            inputID="test-text-input"
+            class="has-error"
+          />
+        </div>
+      </div>
       <div class="row my-4">
         <div class="col">
           <h4 class="m-0 p-2 bg-light rounded">Checkbox</h4>
@@ -1077,6 +1110,7 @@
   import radio from "@/ux-components/radio/radio";
   import textLink from "@/ux-components/text-link/text-link";
   import textboxQuestion from "@/common-components/textbox-question/textbox-question";
+  import dropdownQuestion from "@/common-components/dropdown-question/dropdown-question";
   export default {
     name: "App",
     components: {
@@ -1090,6 +1124,7 @@
       radio,
       textLink,
       textboxQuestion,
+      dropdownQuestion,
     },
     data() {
       return {

src/styles/common-error-styles.scss

@@ -32,11 +32,13 @@
       border: 1px solid $blue;
     }
   }
-  &.textbox-question {
+  &.textbox-question,
+  &.dropdown-question {
     p {
       color: $red;
     }
-    input {
+    input,
+    select {
       border: 1px solid $red;
       &:focus {
         border: 1px solid transparent;