feat: New TextInput component

Author: jackdomleo7

src/components/NumberInput/NumberInput.mdx

@@ -0,0 +1,174 @@
+import { Meta, Title, Story, Source } from '@storybook/blocks';
+import * as NumberInputStories from './NumberInput.stories';
+
+<Meta title="Components/NumberInput" of={NumberInputStories} />
+
+<Title>NumberInput</Title>
+
+```ts
+import NumberInput from '@jackdomleo7/vue3-library/components/NumberInput/NumberInput.vue';
+```
+
+<Story of={NumberInputStories.Default} />
+<br/>
+
+## `v-model`
+
+You can bind any number value to the `v-model` prop. This is a two-way binding, so any changes to the input will update the bound value, and vice versa.
+
+```ts
+import { ref } from 'vue';
+
+const value = ref<number>(7);
+```
+
+```html
+<NumberInput v-model="value" />
+```
+
+## Props
+
+### Root Class
+
+- Prop: `rootClass`
+- Type: `string`
+- Default: `undefined`
+
+Classes to add directly to the root element's `class` attribute.
+
+### Root Style
+
+- Prop: `rootStyle`
+- Type: `string`
+- Default: `undefined`
+
+Styles to add directly to the root element's `style` attribute.
+
+### ID
+
+- Prop: `id`
+- Type: `string`
+- Required: `true`
+
+The `id` of the `<input/>` and the `for` of the `<label/>` element. This may also be used in various ARIA attributes.
+
+### Status
+
+- Prop: `status`
+- Type: `"error"|"success"`
+- Default: `undefined`
+
+The validation status of the input.
+
+<Story of={NumberInputStories.StatusSuccess} />
+<br/>
+<Story of={NumberInputStories.StatusError} />
+
+### Hidden Label
+
+- Prop: `hiddenLabel`
+- Type: `boolean`
+- Default: `false`
+
+If you want to hide the label, you will still need to set a label (for accessibility), but you can then set this prop to `true` to hide the label visually.
+
+Only to be used where the context of its use is clear.
+
+<Story of={NumberInputStories.HiddenLabel} />
+
+### Fallthrough Attributes
+
+Any non-prop attributes and any event listeners will fallthrough to the `<input/>` element. This means you can use any native HTML attributes that are valid for an `<input/>` element with the `type` specified. Below are just some examples.
+
+#### Disabled
+
+```html
+<NumberInput disabled />
+```
+
+<Story of={NumberInputStories.Disabled} />
+<br/>
+
+#### Readonly
+
+```html
+<NumberInput readonly />
+```
+
+<Story of={NumberInputStories.Readonly} />
+<br/>
+
+#### Required
+
+```html
+<NumberInput required />
+```
+
+<Story of={NumberInputStories.Required} />
+<br/>
+
+#### Minlength
+
+```html
+<NumberInput min="5" />
+```
+
+<Story of={NumberInputStories.Min} />
+<br/>
+
+#### Maxlength
+
+```html
+<NumberInput max="5" />
+```
+
+<Story of={NumberInputStories.Max} />
+
+## Slots
+
+### Error
+
+- Slot: `error`
+
+Recommended to use with `status="error"`.
+
+Single error.
+
+<Story of={NumberInputStories.SingleError} />
+<br/>
+
+Multiple errors.
+
+<Story of={NumberInputStories.MultipleErrors} />
+
+### Description
+
+- Slot: `description`
+
+<Story of={NumberInputStories.WithDescription} />
+
+## Customisation
+
+You can customise the component using the `rootClass` and `rootStyle` props to apply top-level styles. You can also use the provided CSS variables to alter deep styles.
+
+- `--j-numberinput-height` | **Type:** [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) | **Default:** `2.5rem` | The height of the input element.
+
+<Story of={NumberInputStories.Custom} />
+
+## Behaviour
+
+### Width
+
+This component will take up the full width of the parent component by default. You can use the `rootClass` or `rootStyle` props to set a custom width.
+
+The minimum width is 1.5&times; the `--j-numberinput-height` variable.
+
+## Accessibility
+
+This component uses native HTML behaviour for `<input type="number" />`. This means that it will be keyboard navigable and screen reader friendly out of the box.
+
+`aria-invalid` is added to the `<input />` element when the `status` prop is set. This will be set to `true` when `status="error"` and `false` when `status="success"`.
+
+`aria-describedby` is added to the `<input />` element when the `description` slot is used to associate this content with the input.
+
+`aria-errormessage` is added to the `<input />` element when the `error` slot is used to associate this content with the input.

src/components/NumberInput/NumberInput.spec.ts

@@ -0,0 +1,180 @@
+import { describe } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import JNumberInput from './NumberInput.vue';
+
+describe('NumberInput', () => {
+  it('renders a root class', () => {
+    // Arrange
+    const wrapper = shallowMount(JNumberInput, {
+      props: {
+        id: 'test-id',
+        rootClass: 'test-class'
+      }
+    });
+
+    // Assert
+    expect(wrapper.classes()).toContain('test-class');
+  });
+
+  it('renders a root style', () => {
+    // Arrange
+    const wrapper = shallowMount(JNumberInput, {
+      props: {
+        id: 'test-id',
+        rootStyle: 'width: 50%;'
+      }
+    });
+
+    // Assert
+    expect(wrapper.attributes('style')).toContain('width: 50%');
+  });
+
+  it('renders an id', () => {
+    // Arrange
+    const wrapper = shallowMount(JNumberInput, {
+      props: {
+        id: 'test-id'
+      }
+    });
+
+    // Assert
+    expect(wrapper.find('label').attributes('for')).toBe('test-id');
+    expect(wrapper.find('input').attributes('id')).toBe('test-id');
+  });
+
+  it('renders a number input', () => {
+    // Arrange
+    const wrapper = shallowMount(JNumberInput, {
+      props: {
+        id: 'test-id'
+      }
+    });
+
+    // Assert
+    expect(wrapper.find('input').attributes('type')).toBe('number');
+  });
+
+  describe('status', () => {
+    it('renders a default status', () => {
+      // Arrange
+      const wrapper = shallowMount(JNumberInput, {
+        props: {
+          id: 'test-id'
+        }
+      });
+
+      // Assert
+      expect(wrapper.find('input').attributes('aria-invalid')).toBeUndefined();
+      expect(wrapper.find('.j-numberinput__validation-icon').exists()).toBe(false);
+    });
+
+    it('renders an error status', () => {
+      // Arrange
+      const wrapper = shallowMount(JNumberInput, {
+        props: {
+          id: 'test-id',
+          status: 'error'
+        }
+      });
+
+      // Assert
+      expect(wrapper.find('input').attributes('aria-invalid')).toBe('true');
+      expect(wrapper.find('.j-numberinput__validation-icon').text()).toBe('✘');
+    });
+
+    it('renders a success status', () => {
+      // Arrange
+      const wrapper = shallowMount(JNumberInput, {
+        props: {
+          id: 'test-id',
+          status: 'success'
+        }
+      });
+
+      // Assert
+      expect(wrapper.find('input').attributes('aria-invalid')).toBe('false');
+      expect(wrapper.find('.j-numberinput__validation-icon').text()).toBe('✔');
+    });
+  });
+
+  it('hides label when prompted', () => {
+    // Arrange
+    const wrapper = shallowMount(JNumberInput, {
+      props: {
+        id: 'test-id',
+        hiddenLabel: true
+      },
+      slots: {
+        label: 'Label'
+      }
+    });
+
+    // Assert
+    expect(wrapper.find('label').classes()).toContain('sr-only');
+  });
+
+  it('renders a required input', () => {
+    // Arrange
+    const wrapper = shallowMount(JNumberInput, {
+      props: {
+        id: 'test-id',
+      },
+      attrs: {
+        required: 'true'
+      }
+    });
+
+    // Assert
+    expect(wrapper.find('label').text()).toContain('* (required)');
+  });
+
+  it('renders an error message', () => {
+    // Arrange
+    const wrapper = shallowMount(JNumberInput, {
+      props: {
+        id: 'test-id'
+      },
+      slots: {
+        error: '<p>This is an error message</p>'
+      }
+    });
+
+    // Assert
+    expect(wrapper.find('.j-numberinput__error').exists()).toBe(true);
+    expect(wrapper.find('.j-numberinput__error').html()).toContain('This is an error message');
+    expect(wrapper.find('input').attributes('aria-errormessage')).toContain('test-id-error');
+  });
+
+  it('renders a description message', () => {
+    // Arrange
+    const wrapper = shallowMount(JNumberInput, {
+      props: {
+        id: 'test-id'
+      },
+      slots: {
+        description: '<p>This is a description message</p>'
+      }
+    });
+
+    // Assert
+    expect(wrapper.find('.j-numberinput__description').exists()).toBe(true);
+    expect(wrapper.find('.j-numberinput__description').html()).toContain('This is a description message');
+    expect(wrapper.find('input').attributes('aria-describedby')).toContain('test-id-description');
+  });
+  
+  it('emits @update:modelValue on input', async () => {
+    // Arrange
+    const wrapper = shallowMount(JNumberInput, {
+      props: {
+        id: 'test-id',
+        modelValue: 5
+      }
+    });
+
+    // Act
+    await wrapper.find('input').setValue('7');
+
+    // Assert
+    expect(wrapper.emitted()['update:modelValue'][0]).toEqual([7]);
+  });
+});