diff --git a/package.json b/package.json index 45d89a9..d4c2967 100644 --- a/package.json +++ b/package.json @@ -20,8 +20,8 @@ }, "dependencies": { "@babel/core": "^7.8.3", - "@storybook/addon-knobs": "^5.3.4", - "@storybook/vue": "^5.3.4", + "@storybook/addon-knobs": "5.3.21", + "@storybook/vue": "5.3.21", "@tournant/communard": "^2.2.0", "@vue/babel-preset-app": "^4.1.2", "@vue/cli-plugin-babel": "^4.1.2", @@ -32,6 +32,7 @@ "@vue/test-utils": "1.0.0-beta.29", "babel-eslint": "^10.0.1", "babel-jest": "^24.9.0", + "babel-loader": "^8.1.0", "babel-preset-vue": "^2.0.2", "codecov": "^3.5.0", "eslint": "^6.7.1", diff --git a/packages/input/README.md b/packages/input/README.md index 377a3e4..16880cc 100644 --- a/packages/input/README.md +++ b/packages/input/README.md @@ -46,6 +46,8 @@ This is just a quick overview. For an in-depth guide how to use the component ch - `label`: The label text of the input. Required. - `validation`: A vuelidate-like object, must contain properties named `$error` and `$dirty`. Required. - `description`: Descriptive text giving a user more context on what form their input has to have. Optional. +- `descriptionPosition`: Controls if the position should be displayed underneath the input or between label and input; defaults to `bottom`. +- `isTextarea`: Render a textarea instead of an input element. Default to `false`. ### Styles @@ -92,6 +94,32 @@ Ths will result in the following input: 💁‍ _Note:_ You do not need to pass in a `id`. A unique ID for every instance of the component is automatically generated. +### Textarea + +``s and ` +``` + ### Label Input elements [must have a linked label](https://www.w3.org/TR/WCAG20-TECHS/H44.html) to give the input an accessible name. @@ -157,7 +185,7 @@ No input without validation, right? You will have to take care of this yourself, though. The component can and should not know what value is expected inside of it. -Nonetheless, I tried to make it as easy as possible to use the component along existing solutions like [Vuelidate](https://vuelidate.netlify.com/). +Nonetheless, we tried to make it as easy as possible to use the component along existing solutions like [Vuelidate](https://vuelidate.netlify.com/). In fact, if you are already using Vuelidate, you are good to go. @@ -205,11 +233,6 @@ This attribute could also be used to add styles based on the validated state. .tournant-input__input[aria-invalid='true'] { border-color: red; } - -/** [data-untouched is set on the input while `validation.$dirty is `false``] and can be used to only apply validated styles to touched and validated inputs */ -.tournant-input__input[aria-invalid='false']:not([data-untouched]) { - border-color: green; -} ``` ### Feedback Messages diff --git a/packages/input/src/index.vue b/packages/input/src/index.vue index 0dd8083..66ffdff 100644 --- a/packages/input/src/index.vue +++ b/packages/input/src/index.vue @@ -1,20 +1,37 @@