WIP Don't merge.

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

@@ -0,0 +1,95 @@
+import { shallowMount } from "@vue/test-utils";
+import textboxQuestion from "./textbox-question";
+import { nextTick } from "vue";
+
+describe("textboxQuestion.vue", () => {
+
+  it("Should return aria-disabled state", async () => {
+    // Act
+    const wrapper = shallowMount(textboxQuestion, {
+      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(textboxQuestion, {
+      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(textboxQuestion, {
+      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(textboxQuestion, {
+      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(textboxQuestion, {
+      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(textboxQuestion, {
+      propsData: {
+        placeholderText: "placeholder text",
+      },
+    });
+
+    // Assert
+    const placeholder = wrapper.find("input");
+
+    expect(placeholder.text()).toEqual("placeholder text");
+  });
+
+});

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

@@ -0,0 +1,53 @@
+<template>
+  <div class="textbox-question">
+    <label :for="inputId" class="form-label">{{labelText}}</label>
+    <input type="text" class="form-control" :id="inputId" :placeholder="placeholderText" :aria-disabled="isDisabled" :disabled="isDisabled" :aria-required="isRequired">
+    <p class="mt-1 mb-0">There has been an error!</p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "textboxQuestion",
+  props: {
+    isEnabled: Boolean,
+    isDisabled: Boolean,
+    modelValue: String,
+    labelText: String,
+    placeholderText: String,
+    inputId: String,
+    isRequired: Boolean,
+  }
+};
+</script>
+
+<style lang="scss">
+.textbox-question {
+  .form-label {
+    margin-bottom: .25rem;
+  }
+  .form-control {
+    border: 1px solid $gray-500;
+    border-radius: .5rem;
+    min-height: 3rem;
+    &::placeholder {
+      color: $gray-500;
+    }
+    &:focus {
+      box-shadow: 0 0 0 2px $blue;
+    }
+    &:disabled,
+    &.disabled {
+      background-color: $gray-100;
+      &: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/layouts/component-test/component-test.vue

@@ -1,5 +1,41 @@
   <template>
     <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>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <textboxQuestion
+            labelText="Text Input"
+            placeholderText="Placeholder"
+            inputID="test-text-input"
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">Disabled</h6>
+          <textboxQuestion
+            labelText="Text Input"
+            placeholderText="Disabled"
+            inputID="test-text-input"
+            isDisabled
+          />
+        </div>
+      </div>
+      <div class="row">
+        <div class="col">
+          <h6 class="my-4">With Error (class="has-error"):</h6>
+          <textboxQuestion
+            labelText="Text Input"
+            placeholderText="Placeholder"
+            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>
@@ -1040,6 +1076,7 @@
   import checkbox from "@/ux-components/checkbox/checkbox";
   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";
   export default {
     name: "App",
     components: {
@@ -1051,7 +1088,8 @@
       listButtonHorizontal,
       checkbox,
       radio,
-      textLink
+      textLink,
+      textboxQuestion,
     },
     data() {
       return {

src/styles/common-error-styles.scss

@@ -32,6 +32,17 @@
       border: 1px solid $blue;
     }
   }
+  &.textbox-question {
+    p {
+      color: $red;
+    }
+    input {
+      border: 1px solid $red;
+      &:focus {
+        border: 1px solid transparent;
+      }
+    }
+  }
 }
 
 .form-test-error {