WIP CSR-1357 Add text area component.

src/layouts/customer-details/customer-details.vue

@@ -0,0 +1,18 @@
+<template>
+    <textareamultiline
+        labelText="Notes for your technician"
+        labelTextOptional="(Optional)"
+        textAreaFooterText="250/250 characters remaining"
+        footerText
+     />
+</template>
+
+<script>
+import textareamultiline from "@/ux-components/text-area/text-area-multi-line";
+export default {
+    name: "customer-details",
+    components: {
+        textareamultiline
+    }
+};
+</script>

src/router/index.js

@@ -31,8 +31,14 @@ import { applicationConfig } from "../constants/application-config";
 // Components
 import datePicker from "@/digital-components/date-picker/date-picker.vue";
 import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue";
+import customerDetails from "@/layouts/customer-details/customer-details.vue";
 
 const routes = [
+    {
+        path: "/customer-details", // This is a temporary route for testing.
+        name: "customer-details",
+        component: customerDetails,
+    },
     {
         path: "/demo-date-picker", // This is a temporary route for testing.
         name: "demo-date-picker",

src/ux-components/text-area/text-area-multi-line.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="text-area-multine">
+        <label for="textarea-comments" class="fw-bold mb-1">{{labelText}} <span class="fw-normal">{{labelTextOptional}}</span></label>
+        <textarea id="textarea-comments" class="p-4" maxlength="250" role="textbox" contenteditable="true" aria-multiline="true" aria-required="false"></textarea>
+        <p tabindex="0" v-show="footerText" class="caption mt-2 mb-0" id="charactersremaining">{{textAreaFooterText}}</p>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "textareamultiline",
+    props: {
+        labelText: String,
+        labelTextOptional: String,
+        textAreaFooterText: String,
+        footerText: Boolean
+    },
+    mounted: function() {
+        const my_textarea = document.getElementById('textarea-comments');
+        const remaining = document.getElementById('charactersremaining');
+        const remain = 250;
+
+        my_textarea.addEventListener('input',()=>{
+            const total = remain - my_textarea.value.length;
+            const color = total < remain * 0.1 ? 'red' : null; //Change text to red when the total remaining goes below 25;
+            remaining.innerHTML = `${total}/250 characters remaining`;
+            remaining.style.color =  color;
+        });
+    }
+};
+</script>
+
+<style lang="scss">
+.text-area-multine {
+    display: flex;
+    flex-direction: column;
+    label {
+        span {
+            color: $gray-500;
+        }
+    }
+    textarea {
+        border-radius: .5rem;
+        border: 1px solid $gray-550;
+        height: 88px;
+        &:hover {
+            box-shadow: 0 0 0 4px #9fcee6;
+        }
+        &:focus {
+            box-shadow: 0 0 0 2.5px $blue;
+            outline: none;
+        }
+    }
+    p {
+        color: $gray-500;
+    }
+}
+</style>