@kiva/kv-components 3.11.2 → 3.13.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.13.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.12.0...@kiva/kv-components@3.13.0) (2023-03-01)
+
+
+### Features
+
+* danger, caution, and ghost variants for KvPrgoressBar ([8b7e43f](https://github.com/kiva/kv-ui-elements/commit/8b7e43fd55e02fd01e2bc5488c86dd3984a7a42d))
+
+
+
+
+
+# [3.12.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.11.2...@kiva/kv-components@3.12.0) (2023-02-10)
+
+
+### Features
+
+* hide delay param for toast ([d8620c0](https://github.com/kiva/kv-ui-elements/commit/d8620c06e2aa9b814bebdee7a5e1c150f06d77e9))
+
+
+
+
+
 ## [3.11.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.11.1...@kiva/kv-components@3.11.2) (2023-01-25)
 
 **Note:** Version bump only for package @kiva/kv-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.11.2",
+  "version": "3.13.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -69,5 +69,5 @@
       "optional": true
     }
   },
-  "gitHead": "a2f47274993deaa667495ee4ce9b74f4c6d0b2cc"
+  "gitHead": "ed1b307da3dda2636febbb5ddbf9230972a4e5e1"
 }

package/vue/KvProgressBar.vue

@@ -12,9 +12,10 @@
 	>
 		<div
 			class="
-				tw-h-1 tw-w-full tw-absolute tw--left-full tw-rounded-full tw-bg-brand
+				tw-h-1 tw-w-full tw-absolute tw--left-full tw-rounded-full
 				tw-transition-all tw-duration-1000 tw-origin-left tw-ease-out
 			"
+			:class="variantClass"
 			:style="{transform: loaded ? `translateX(${percent}%)` : 'translateX(0)' }"
 		>
 		</div>
@@ -65,12 +66,24 @@ export default {
 			default: 0,
 			required: true,
 		},
+		/**
+		 * Appearance of the progress bar
+		 * `primary (default), ghost, danger, caution
+		 * */
+		variant: {
+			type: String,
+			default: 'primary',
+			validator(value) {
+				return ['primary', 'ghost', 'danger', 'caution'].includes(value);
+			},
+		},
 	},
 	setup(props) {
 		const {
 			min,
 			max,
 			value,
+			variant,
 		} = toRefs(props);
 		const loaded = ref(false);
 
@@ -81,6 +94,19 @@ export default {
 			return clamped;
 		});
 
+		const variantClass = computed(() => {
+			switch (variant.value) {
+				case 'ghost':
+					return 'tw-bg-tertiary';
+				case 'danger':
+					return 'tw-bg-danger';
+				case 'caution':
+					return 'tw-bg-caution';
+				default:
+					return 'tw-bg-brand';
+			}
+		});
+
 		const animateProgressBar = () => {
 			loaded.value = true;
 		};
@@ -94,6 +120,7 @@ export default {
 			loaded,
 			percent,
 			animateProgressBar,
+			variantClass,
 		};
 	},
 };

package/vue/KvToast.vue

@@ -189,7 +189,7 @@ export default {
 			emit('close');
 		};
 
-		const show = (messageInput, type, persistInput) => {
+		const show = (messageInput, type, persistInput, hideDelay) => {
 			isVisible.value = true;
 			message.value = typeof messageInput === 'string' ? messageInput : '';
 			messageType.value = typeof type === 'string' ? type : '';
@@ -198,7 +198,7 @@ export default {
 			if (!persist.value) {
 				timeout.value = setTimeout(() => {
 					close();
-				}, msToDisplayToast.value);
+				}, hideDelay ?? msToDisplayToast.value);
 			}
 		};
 

package/vue/stories/KvProgressBar.stories.js

@@ -7,7 +7,8 @@ export default {
 		min: 0,
 		max: 100,
 		value: 50,
-		ariaLabel: '',
+		ariaLabel: 'Amount the loan has fundraised',
+		variant: 'primary',
 	},
 };
 
@@ -20,11 +21,26 @@ const Template = (args, { argTypes }) => ({
 			:min="min"
 			:max="max"
 			:value="value"
+			:variant="variant"
 
 		></kv-progress-bar>`,
 });
 
 export const Default = Template.bind({});
-Default.args = {
-	ariaLabel: 'Amount the loan has fundraised',
+Default.args = {};
+
+// Variants
+export const VariantCaution = Template.bind({});
+VariantCaution.args = {
+	variant: 'caution',
+};
+
+export const VariantDanger = Template.bind({});
+VariantDanger.args = {
+	variant: 'danger',
+};
+
+export const VariantGhost = Template.bind({});
+VariantGhost.args = {
+	variant: 'ghost',
 };

package/vue/stories/KvToast.stories.js

@@ -26,6 +26,11 @@ export default {
 				type: 'boolean',
 			},
 		},
+		hideDelay: {
+			control: {
+				type: 'number',
+			},
+		},
 	},
 };
 
@@ -39,7 +44,7 @@ const Template = (args, {
 	},
 	template: `
 		<div>
-			<kv-button @click="showToast(message, type, persist)">Show Toast</kv-button>
+			<kv-button @click="showToast(message, type, persist, hideDelay)">Show Toast</kv-button>
 
 			<!-- div below is a kludge for storybook docs -->
 			<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">
@@ -49,8 +54,8 @@ const Template = (args, {
 			</div>
 		</div>`,
 	methods: {
-		showToast(messageInput, type, persistInput) {
-			this.$refs.toastRef.show(messageInput, type, persistInput);
+		showToast(messageInput, type, persistInput, hideDelay) {
+			this.$refs.toastRef.show(messageInput, type, persistInput, hideDelay);
 		},
 		onClose() {
 		},
@@ -72,6 +77,9 @@ withLongTextAndHtml.args = { message: 'This is a nice long content that could <b
 export const persist = Template.bind({});
 persist.args = { persist: true };
 
+export const hideDelay = Template.bind({});
+hideDelay.args = { hideDelay: 10000 };
+
 const KivaLogoTemplate = (args, {
 	argTypes,
 }) => ({