@kiva/kv-components 3.0.5 → 3.2.0

package/CHANGELOG.md

@@ -3,6 +3,43 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.2.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.1.0...@kiva/kv-components@3.2.0) (2022-08-04)
+
+
+### Bug Fixes
+
+* event name in emits ([06813fd](https://github.com/kiva/kv-ui-elements/commit/06813fda75cf9a169b9e5afd33549b9eb77b33a1))
+* remove unused event ([345cd90](https://github.com/kiva/kv-ui-elements/commit/345cd903ab5d6725de34d2085a2c8e65cba6933f))
+
+
+### Features
+
+* add payload to track closing events ([275c81d](https://github.com/kiva/kv-ui-elements/commit/275c81da659fa586500b9d21607ba5c69c4e5839))
+* add tailored emit event for MARS-199 experiment in kvLightbox ([8499206](https://github.com/kiva/kv-ui-elements/commit/8499206381c9e5bf1ac0ae4ab913b91b07ba906e))
+
+
+
+
+
+# [3.1.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.6...@kiva/kv-components@3.1.0) (2022-07-19)
+
+
+### Features
+
+* add new caution variant to buttons ([#191](https://github.com/kiva/kv-ui-elements/issues/191)) ([14f3eb6](https://github.com/kiva/kv-ui-elements/commit/14f3eb6548bfc925cc2cb656966829f127a8864e))
+
+
+
+
+
+## [3.0.6](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.5...@kiva/kv-components@3.0.6) (2022-06-23)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
 ## [3.0.5](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.4...@kiva/kv-components@3.0.5) (2022-05-27)
 
 **Note:** Version bump only for package @kiva/kv-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.0.5",
+  "version": "3.2.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -50,7 +50,7 @@
     "test": "npm run lint"
   },
   "dependencies": {
-    "@kiva/kv-tokens": "^2.0.1",
+    "@kiva/kv-tokens": "^2.2.0",
     "@mdi/js": "^5.9.55",
     "@vueuse/integrations": "^7.6.0",
     "aria-hidden": "^1.1.3",
@@ -68,5 +68,5 @@
       "optional": true
     }
   },
-  "gitHead": "755f33ac5b3f1dc771a42881da3a449feff69df2"
+  "gitHead": "d5530b779a1ae57e21fb31a23d0098deec908502"
 }

package/vue/KvButton.vue

@@ -84,7 +84,7 @@ export default {
 			type: String,
 			default: 'primary',
 			validator(value) {
-				return ['primary', 'secondary', 'link', 'ghost', 'danger'].includes(value);
+				return ['primary', 'secondary', 'link', 'ghost', 'danger', 'caution'].includes(value);
 			},
 		},
 		/**
@@ -114,6 +114,7 @@ export default {
 		const loadingColor = computed(() => {
 			switch (variant.value) {
 				case 'secondary':
+				case 'caution':
 					return 'black';
 				case 'ghost':
 					return 'brand';
@@ -166,6 +167,14 @@ export default {
 						classes = `${classes} tw-bg-primary hover:tw-bg-secondary`;
 					}
 					break;
+				case 'caution':
+					classes = 'tw-text-primary tw-border-transparent';
+					if (state.value === 'active') {
+						classes = `${classes} tw-bg-caution-highlight`;
+					} else {
+						classes = `${classes} tw-bg-caution hover:tw-bg-caution-highlight`;
+					}
+					break;
 			}
 			return classes;
 		});

package/vue/KvLightbox.vue

@@ -79,7 +79,7 @@
 									tw-w-6 tw-h-6 tw--m-2
 									hover:tw-text-action-highlight
 								"
-								@click.stop="hide"
+								@click.stop="hide('close-x')"
 							>
 								<kv-material-icon
 									class="tw-w-3 tw-h-3"
@@ -233,7 +233,7 @@ export default {
 			return 'dialog';
 		});
 
-		const hide = () => {
+		const hide = (closedBy = '') => {
 			// scroll any content inside the lightbox back to top
 			if (kvLightbox.value && kvLightboxBody.value) {
 				deactivateFocusTrap();
@@ -252,7 +252,7 @@ export default {
 			 * @event lightbox-closed
 			 * @type {Event}
 			*/
-			emit('lightbox-closed');
+			emit('lightbox-closed', { type: closedBy });
 		};
 
 		onKeyUp = (e) => {
@@ -263,7 +263,7 @@ export default {
 
 		const onScreenClick = () => {
 			if (!preventClose.value) {
-				hide();
+				hide('background-click');
 			}
 		};
 

package/vue/stories/KvButton.stories.js

@@ -7,7 +7,7 @@ export default {
 		variant: {
 			control: {
 				type: 'select',
-				options: ['primary', 'secondary', 'link', 'danger', 'ghost'],
+				options: ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution'],
 			},
 		},
 		state: {
@@ -44,7 +44,7 @@ const VariantTemplate = (args, { argTypes }) => ({
 	template: `
 		<ul>
 			<li
-				v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost']"
+				v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution']"
 				:key="variant"
 				class="tw-mb-2"
 			>
@@ -89,6 +89,11 @@ VariantGhost.args = {
 	variant: 'ghost',
 };
 
+export const VariantCaution = Template.bind({});
+VariantCaution.args = {
+	variant: 'caution',
+};
+
 // States
 export const StateLoading = VariantTemplate.bind({});
 StateLoading.args = {
@@ -117,7 +122,7 @@ export const FullWidth = (args, { argTypes }) => ({
 	template: `
 	<ul>
 		<li
-			v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost']"
+			v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution']"
 			:key="variant"
 			class="tw-mb-2"
 		>