@kiva/kv-components 1.1.3 → 1.3.0

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.3.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.2.2...@kiva/kv-components@1.3.0) (2021-12-13)
+
+
+### Features
+
+* **KvTextInput:** adds a button which clears the search form ([bf4166e](https://github.com/kiva/kv-ui-elements/commit/bf4166e604bfd08ab1c128eda10c51fc81c359ec))
+
+
+
+
+
+## [1.2.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.2.1...@kiva/kv-components@1.2.2) (2021-11-24)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
+## [1.2.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.2.0...@kiva/kv-components@1.2.1) (2021-11-17)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
+# [1.2.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.1.3...@kiva/kv-components@1.2.0) (2021-11-12)
+
+
+### Features
+
+* **KvCheckbox:** add a prop and visual styling to tell a user the input is invalid ([b587ffd](https://github.com/kiva/kv-ui-elements/commit/b587ffdcb4834eb6dda25a880646cdcd4137a337))
+
+
+
+
+
 ## [1.1.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@1.1.2...@kiva/kv-components@1.1.3) (2021-11-10)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "1.1.3",
+  "version": "1.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -46,7 +46,7 @@
     "test": "jest"
   },
   "dependencies": {
-    "@kiva/kv-tokens": "^1.1.0",
+    "@kiva/kv-tokens": "^1.2.1",
     "@mdi/js": "^5.9.55",
     "aria-hidden": "^1.1.3",
     "embla-carousel": "^4.5.3",
@@ -54,5 +54,5 @@
     "vue": "^2.6.12",
     "vue-focus-lock": "^1.4.1"
   },
-  "gitHead": "3522b8d44dbf0b3efb661aab75e43c8cd84e4929"
+  "gitHead": "cdeaad065cea08eef88e8d64df53113993ac4019"
 }

package/tests/unit/specs/components/KvTextInput.spec.js

@@ -1,4 +1,4 @@
-import { render } from '@testing-library/vue';
+import { render, fireEvent } from '@testing-library/vue';
 import userEvent from '@testing-library/user-event';
 import { axe, toHaveNoViolations } from 'jest-axe';
 import KvTextInput from '../../../../vue/KvTextInput.vue';
@@ -53,4 +53,22 @@ describe('KvTextInput', () => {
 
 		expect(results).toHaveNoViolations();
 	});
+
+	it('clear button cleans the input value', async () => {
+		const { getByRole } = render(KvTextInput, {
+			props: {
+				canClear: true,
+				valid: true,
+				id: 'foo',
+			},
+		});
+		const textInputEl = getByRole('textbox');
+		expect(textInputEl.value).toEqual('');
+		await userEvent.type(textInputEl, 'abc 123');
+		expect(textInputEl.value).toEqual('abc 123');
+		const buttonInputEl = getByRole('button');
+		expect(buttonInputEl).toBeDefined();
+		await fireEvent.click(buttonInputEl);
+		expect(textInputEl.value).toEqual('');
+	});
 });

package/vue/KvCheckbox.vue

@@ -28,8 +28,11 @@
 					tw-transition-all tw-duration-100
 					peer-focus-visible:tw-ring-2 peer-focus-visible:tw-ring-action"
 				:class="{
-					'tw-bg-white tw-border-secondary' : !isChecked,
-					'tw-bg-action tw-border-action' : isChecked,
+					'tw-bg-white' : !isChecked,
+					'tw-bg-action' : isChecked,
+					'tw-border-secondary' : !isChecked && valid,
+					'tw-border-action' : isChecked && valid,
+					'tw-border-danger' : !valid,
 				}"
 			>
 				<!-- checkbox icon  -->
@@ -93,6 +96,14 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * When set to false, visually indicates to the user that the contents of the input need
+		 * to be changed
+		 * */
+		valid: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	data() {
 		return {

package/vue/KvSwitch.vue

@@ -12,7 +12,6 @@
 				class="tw-sr-only tw-peer"
 				type="checkbox"
 				role="switch"
-				:value="value"
 				:disabled="disabled"
 				v-on="inputListeners"
 				@change.prevent="onChange"

package/vue/KvTextInput.vue

@@ -28,9 +28,9 @@
 					'tw-pl-6' : icon,
 				}"
 				:placeholder="placeholder"
-				:value="value"
 				:disabled="disabled"
 				v-bind="$attrs"
+				:value="valueInput"
 				@input="onInput"
 				v-on="inputListeners"
 			>
@@ -45,6 +45,17 @@
 				:icon="mdiAlertCircleOutline"
 				class="tw-absolute tw-top-1.5 tw-right-1.5 tw-pointer-events-none tw-text-danger"
 			/>
+			<button
+				v-if="canClear && valid && !!valueInput"
+				type="button"
+				class="tw-absolute tw-top-1.5 tw-right-1.5"
+				@click="clearInput"
+			>
+				<span class="tw-sr-only">clear input</span>
+				<kv-material-icon
+					:icon="mdiClose"
+				/>
+			</button>
 			<div
 				v-if="$slots.error"
 				class="tw-text-danger tw-text-small tw-font-medium tw-mt-1"
@@ -57,7 +68,7 @@
 </template>
 
 <script>
-import { mdiAlertCircleOutline } from '@mdi/js';
+import { mdiAlertCircleOutline, mdiClose } from '@mdi/js';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 
 /* eslint-disable max-len */
@@ -152,10 +163,19 @@ export default {
 			type: String,
 			default: 'text',
 		},
+		/** canClear prop
+		 * When set to true, adds a button positioned to the right edge of the input containing an “X”
+		 * */
+		canClear: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
 			mdiAlertCircleOutline,
+			mdiClose,
+			valueInput: this.value,
 		};
 	},
 	computed: {
@@ -168,6 +188,7 @@ export default {
 				input: () => {},
 			};
 		},
+
 	},
 	methods: {
 		onInput(event) {
@@ -176,6 +197,7 @@ export default {
 			* @event input
 			* @type {Event}
 			*/
+			this.valueInput = event.target.value;
 			this.$emit('input', event.target.value);
 		},
 		focus() {
@@ -184,6 +206,10 @@ export default {
 		blur() {
 			this.$refs.textInputRef.blur();
 		},
+		clearInput() {
+			this.valueInput = '';
+			this.$emit('input', '');
+		},
 	},
 };
 </script>

package/vue/stories/Forms.stories.js

@@ -19,6 +19,8 @@ export default {
 		valid: true,
 		icon: null,
 		type: 'text',
+		canClear: false,
+		value: '',
 	},
 };
 

package/vue/stories/KvCheckbox.stories.js

@@ -6,6 +6,7 @@ export default {
 	args: {
 		checked: false,
 		disabled: false,
+		valid: true,
 	},
 };
 
@@ -23,6 +24,7 @@ const Template = (args, {
 		<div>
 			<kv-checkbox
 				:disabled="disabled"
+				:valid="valid"
 				v-model="checkboxExampleModel"
 				@change="onChange"
 				@focus="onFocus"
@@ -47,6 +49,11 @@ Disabled.args = {
 	disabled: true,
 };
 
+export const Invalid = Template.bind({});
+Invalid.args = {
+	valid: false,
+};
+
 export const WithoutVModel = (args, {
 	argTypes,
 }) => ({

package/vue/stories/KvTextInput.stories.js

@@ -32,6 +32,7 @@ const DefaultTemplate = (args, {
 				:placeholder="placeholder"
 				:valid="valid"
 				:icon="icon"
+				:canClear="canClear"
 				v-model="textInputModel"
 				@input="onInput"
 				style="width: 25rem;"
@@ -164,6 +165,11 @@ Icon.args = {
 	icon: mdiMagnify,
 };
 
+export const canClear = DefaultTemplate.bind({});
+canClear.args = {
+	canClear: true,
+};
+
 export const PlaceholderText = (args, {
 	argTypes,
 }) => ({