@kiva/kv-components 3.10.2 → 3.11.1

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.11.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.11.0...@kiva/kv-components@3.11.1) (2023-01-20)
+
+**Note:** Version bump only for package @kiva/kv-components
+
+
+
+
+
+# [3.11.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.10.2...@kiva/kv-components@3.11.0) (2023-01-19)
+
+
+### Features
+
+* kiva logo type added to kv toast component including an svg icon ([#227](https://github.com/kiva/kv-ui-elements/issues/227)) ([c24ecc1](https://github.com/kiva/kv-ui-elements/commit/c24ecc1295e32b817bf057f0570de56224c85c3f))
+
+
+
+
+
 ## [3.10.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.10.1...@kiva/kv-components@3.10.2) (2022-12-07)
 
 **Note:** Version bump only for package @kiva/kv-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.10.2",
+  "version": "3.11.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -69,5 +69,5 @@
       "optional": true
     }
   },
-  "gitHead": "7b0db8590c0c04d727b98365ee306c0cb14ce17f"
+  "gitHead": "c9c8bbac3592a57f2b860511aea8d6f1fe38a954"
 }

package/vue/KvExpandableQuestion.vue

@@ -17,11 +17,13 @@
 			<div v-show="open">
 				<div class="tw-prose tw-pb-4 tw-pt-2">
 					<slot></slot>
+					<!-- eslint-disable vue/no-v-html -->
 					<div
 						v-if="content !== ''"
 						v-html="content"
 					>
 					</div>
+					<!--eslint-enable-->
 				</div>
 			</div>
 		</kv-expandable>

package/vue/KvToast.vue

@@ -35,13 +35,30 @@
 						"
 							:class="{
 								'tw-bg-brand tw-text-white' : (
-									messageType === '' || messageType === 'confirmation'
+									messageType === '' || messageType === 'confirmation' ||
+									messageType === 'kiva-logo'
 								),
 								'tw-bg-danger tw-text-primary-inverse' : messageType === 'error',
 								'tw-bg-caution tw-text-primary' : messageType === 'warning',
 							}"
 						>
+							<!-- Kiva Icon SVG -->
+							<!-- eslint-disable max-len -->
+							<svg
+								v-if="messageType === 'kiva-logo'"
+								width="16"
+								height="24"
+								viewBox="0 0 16 24"
+								fill="none"
+								xmlns="http://www.w3.org/2000/svg"
+							>
+								<path
+									d="M4.78202 0H0V23.141H4.78202V0ZM6.00533 14.6274C13.6788 14.6274 15.4582 8.05649 15.4582 6.91372H14.7909C7.11743 6.91372 5.33807 13.4846 5.33807 14.6274H6.00533ZM5.33807 15.1988C5.33807 16.3987 6.67259 23.0838 14.9021 23.0838H15.5694C15.5694 21.8839 14.2349 15.1988 6.00533 15.1988H5.33807Z"
+									fill="white"
+								/>
+							</svg>
 							<kv-material-icon
+								v-else
 								class="tw-w-2.5 tw-h-2.5"
 								:icon="icon"
 							/>
@@ -54,11 +71,18 @@
 							tw-flex
 						"
 						>
+							<slot
+								v-if="hasToastContentSlot"
+								name="toastContent"
+							></slot>
+							<!-- eslint-disable vue/no-v-html -->
 							<p
+								v-else
 								class="tw-inline-block tw-m-auto"
 								v-html="message"
 							>
 							</p>
+							<!--eslint-enable-->
 						</div>
 
 						<button
@@ -122,7 +146,7 @@ export default {
 	emits: [
 		'close',
 	],
-	setup(props, { emit }) {
+	setup(props, { emit, slots }) {
 		const isVisible = ref(false);
 		const message = ref('');
 		const messageType = ref('confirmation'); // 'error', 'info', 'confirmation'
@@ -152,6 +176,8 @@ export default {
 			return Math.max(characterMs, MINIMUM_MS);
 		});
 
+		const hasToastContentSlot = computed(() => !!slots?.toastContent ?? false);
+
 		const close = () => {
 			isVisible.value = false;
 			clearTimeout(timeout.value);
@@ -187,6 +213,7 @@ export default {
 			msToDisplayToast,
 			close,
 			show,
+			hasToastContentSlot,
 		};
 	},
 };

package/vue/stories/KvToast.stories.js

@@ -50,11 +50,9 @@ const Template = (args, {
 		</div>`,
 	methods: {
 		showToast(messageInput, type, persistInput) {
-			console.log(this.$refs.toastRef);
 			this.$refs.toastRef.show(messageInput, type, persistInput);
 		},
 		onClose() {
-			console.log('toast closed');
 		},
 	},
 });
@@ -73,3 +71,39 @@ withLongTextAndHtml.args = { message: 'This is a nice long content that could <b
 
 export const persist = Template.bind({});
 persist.args = { persist: true };
+
+const KivaLogoTemplate = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvToast,
+		KvButton,
+	},
+	template: `
+		<div>
+			<kv-button @click="showToast(message, type, persist)">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">
+				<div class="tw-fixed tw-left-0 tw-right-0 tw-top-2 tw-pointer-events-auto">
+					<kv-toast ref="toastRef" @close="onClose">
+						<template #toastContent>
+							<div>
+								Welcome to Lending home! We’re doing something new based on your feedback this year. <button class="tw-text-action">Read more here</button>
+							</div>
+						</template>
+					</kv-toast>
+				</div>
+			</div>
+		</div>`,
+	methods: {
+		showToast(messageInput, type, persistInput) {
+			this.$refs.toastRef.show(messageInput, type, persistInput);
+		},
+		onClose() {
+		},
+	},
+});
+export const typeKivaLogo = KivaLogoTemplate.bind({});
+typeKivaLogo.args = { type: 'kiva-logo', message: '' };