@kiva/kv-components 3.0.6 → 3.3.0

package/CHANGELOG.md

@@ -3,6 +3,52 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.3.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.2.0...@kiva/kv-components@3.3.0) (2022-08-10)
+
+
+### Bug Fixes
+
+* added class to placeholder story to show support ([ed4e6c9](https://github.com/kiva/kv-ui-elements/commit/ed4e6c984b6a52b238862004266ada10c9cb0c95))
+* added non-static class and style to placeholder as example ([4fd5e98](https://github.com/kiva/kv-ui-elements/commit/4fd5e98d41c900f69b56614980c688ebd43f6176))
+
+
+### Features
+
+* placeholder component ([b29facc](https://github.com/kiva/kv-ui-elements/commit/b29facc8c8fcdb9761cc9e58e2530ea1e3b4a2f8))
+
+
+
+
+
+# [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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.0.6",
+  "version": "3.3.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -50,7 +50,7 @@
     "test": "npm run lint"
   },
   "dependencies": {
-    "@kiva/kv-tokens": "^2.1.0",
+    "@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": "5c86f86ecd7a78899659fe0e13749e81ad22926d"
+  "gitHead": "a2d53f16ab9b5f1eeb174d372a7ac50bc9c9f691"
 }

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/KvLoadingPlaceholder.vue

@@ -0,0 +1,38 @@
+<template>
+	<div
+		class="
+			loading-placeholder
+			tw-w-full tw-h-full
+			tw-relative
+			tw-overflow-hidden
+			tw-bg-tertiary
+			tw-rounded-sm
+		"
+	>
+	</div>
+</template>
+
+<style scoped>
+.loading-placeholder::before {
+	content: '';
+	display: block;
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	transform: translateX(100%);
+	background:
+		linear-gradient(to right, transparent 0%, rgb(var(--bg-secondary)) 50%, transparent 100%);
+	animation: loading-placeholder 1.5s infinite cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+@keyframes loading-placeholder {
+	from {
+		transform: translateX(-100%);
+	}
+
+	to {
+		transform: translateX(100%);
+	}
+}
+</style>

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"
 		>

package/vue/stories/KvLoadingPlaceholder.stories.js

@@ -0,0 +1,17 @@
+import KvLoadingPlaceholder from '../KvLoadingPlaceholder.vue';
+
+export default {
+	title: 'KvLoadingPlaceholder',
+	component: KvLoadingPlaceholder,
+};
+
+const DefaultTemplate = () => ({
+	components: { KvLoadingPlaceholder },
+	template: `
+		<div style="padding: 20px;">
+			<kv-loading-placeholder class="tw-py-1" :class="{ 'tw-px-1': true }" style="height: 50px;" :style="{ width: '400px' }" />
+		</div>
+	`,
+});
+
+export const Default = DefaultTemplate.bind({});