feat(input): add help/descriptor text (#516)

## Feature
* feat(input): add help/descriptor text

## Chore
* chore: increment version

Author: stubbo

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@karnama/vueish",
-    "version": "0.18.0",
+    "version": "0.19.0",
     "files": [
         "dist",
         "types"

package.json

@@ -42,3 +42,13 @@
         color: theme('colors.red.500') !important;
     }
 }
+
+.ui-error-text {
+    @extend .text-color-error;
+    @apply text-sm mt-1;
+}
+
+.ui-help-text {
+    @extend .text-color-muted;
+    @apply text-gray-400 text-sm mt-1;
+}

src/assets/styles/main.scss

@@ -175,6 +175,27 @@
                  type="number"
                  placeholder="Placeholder text."
                  label="Placeholder" />
+
+        <UIInput v-model="helpProp"
+                 :error="error"
+                 :small="small"
+                 :loading="loading"
+                 name="ui-text15"
+                 class="mt-10"
+                 help="Descriptive message..."
+                 label="Help (prop)" />
+
+        <UIInput v-model="helpSlot"
+                 :error="error"
+                 :small="small"
+                 :loading="loading"
+                 name="ui-text15"
+                 class="mt-10"
+                 label="Help (slot)">
+            <template #help>
+                <span class="underline ui-help-text">Descriptive message...</span>
+            </template>
+        </UIInput>
     </div>
 </template>
 
@@ -200,6 +221,8 @@ export default defineComponent({
         const suffixProp = ref('100');
         const suffixSlot = ref('Feather-weight');
         const placeholder = ref<number|null>(null);
+        const helpProp = ref('I\'m an input!');
+        const helpSlot = ref('I\'m an input!');
         const large = ref(false);
         const small = ref(false);
         const error = ref('');
@@ -224,6 +247,8 @@ export default defineComponent({
             suffixProp,
             suffixSlot,
             placeholder,
+            helpProp,
+            helpSlot,
             large,
             error,
             loading,

src/components/input/Demo.vue

@@ -320,4 +320,83 @@ describe('UIInput', () => {
             expect(wrapper.lastEventValue()).toBeUndefined();
         });
     });
+
+    it('should display the error text when passed as a slot', () => {
+        const error = 'error';
+        const errorContainer = `<span id="error">${error}</span>`;
+
+        const wrapper = mount(UIInput, {
+            props: {
+                modelValue: '',
+                name: 'input'
+            },
+            slots: {
+                error: errorContainer
+            }
+        });
+
+        expect(wrapper.get('#error').text()).toBe(error);
+    });
+
+    it('should display the error text when passed as a prop', () => {
+        const error = 'error';
+
+        const wrapper = mount(UIInput, {
+            props: {
+                modelValue: '',
+                name: 'input',
+                error
+            }
+        });
+
+        expect(wrapper.get('.ui-error-text').text()).toBe(error);
+    });
+
+    it('should display the help text when passed as a slot', () => {
+        const help = 'help';
+        const helpContainer = `<span id="help">${help}</span>`;
+
+        const wrapper = mount(UIInput, {
+            props: {
+                modelValue: '',
+                name: 'input'
+            },
+            slots: {
+                help: helpContainer
+            }
+        });
+
+        expect(wrapper.get('#help').text()).toBe(help);
+    });
+
+    it('should display the help text when passed as a prop', () => {
+        const help = 'help';
+
+        const wrapper = mount(UIInput, {
+            props: {
+                modelValue: '',
+                name: 'input',
+                help
+            }
+        });
+
+        expect(wrapper.get('.ui-help-text').text()).toBe(help);
+    });
+
+    it('should display the only error text when both help and error are passed as prop', () => {
+        const help = 'help';
+        const error = 'error';
+
+        const wrapper = mount(UIInput, {
+            props: {
+                modelValue: '',
+                name: 'input',
+                help,
+                error
+            }
+        });
+
+        expect(wrapper.find('.ui-help-text').exists()).toBe(false);
+        expect(wrapper.get('.ui-error-text').text()).toBe(error);
+    });
 });

src/components/input/UIInput.test.ts

@@ -119,10 +119,16 @@
 
         <UIExpandTransition>
             <slot v-if="error || $slots.error" name="error">
-                <p class="text-color-error text-sm">
+                <p class="ui-error-text">
                     {{ error }}
                 </p>
             </slot>
+
+            <slot v-else-if="(help || $slots.help)" name="help">
+                <p class="ui-help-text">
+                    {{ help }}
+                </p>
+            </slot>
         </UIExpandTransition>
     </div>
 </template>
@@ -226,6 +232,14 @@ export default defineComponent({
             type: [Number, String]
         },
 
+
+        /**
+         * Help message to show below the input.
+         */
+        help: {
+            type: String
+        },
+
         large,
         small,
         prefix,