@kiva/kv-components 3.7.1 → 3.9.0

package/CHANGELOG.md

@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.9.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.8.0...@kiva/kv-components@3.9.0) (2022-10-07)
+
+
+### Bug Fixes
+
+* removed extra space on line 23 ([c8a3226](https://github.com/kiva/kv-ui-elements/commit/c8a32264ede0b628f578b98c4ac8256a539fd28d))
+
+
+### Features
+
+* fixed bugs in KvExpandableQuestion (arrow functionality and slot content rendering) ([4ab9f47](https://github.com/kiva/kv-ui-elements/commit/4ab9f477200d53b89ce6a4ae0328215268dd4019))
+
+
+
+
+
+# [3.8.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.7.1...@kiva/kv-components@3.8.0) (2022-10-04)
+
+
+### Features
+
+* created and implemented a reusable global component and story (KvExpandableQuestion)[VUE-1318] ([173ae50](https://github.com/kiva/kv-ui-elements/commit/173ae50e88dffa7dabb7392404ccdb813307ea31))
+* removed analyticsCategory prop, edited other code blocks ([2864261](https://github.com/kiva/kv-ui-elements/commit/2864261b55517bab8099b84b404d09aaae37b489))
+* removed line 84, and converted faq into a string ([8f5a3da](https://github.com/kiva/kv-ui-elements/commit/8f5a3dab81556997a6eb7dd0e5dffac2babff104))
+
+
+
+
+
 ## [3.7.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.7.0...@kiva/kv-components@3.7.1) (2022-09-27)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.7.1",
+  "version": "3.9.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -54,6 +54,7 @@
     "@mdi/js": "^5.9.55",
     "@vueuse/integrations": "^7.6.0",
     "aria-hidden": "^1.1.3",
+    "change-case": "^4.1.2",
     "embla-carousel": "^4.5.3",
     "focus-trap": "^6.7.2",
     "nanoid": "^3.1.23",
@@ -68,5 +69,5 @@
       "optional": true
     }
   },
-  "gitHead": "09a3c9d7cf4d42478c2f7362321fe624ae010383"
+  "gitHead": "327d1a08978aeb0d03b2764368f558599a379dec"
 }

package/vue/KvExpandableQuestion.vue

@@ -0,0 +1,119 @@
+<template>
+	<div>
+		<button
+			class="tw-w-full tw-py-2 tw-flex tw-justify-between"
+			@click="toggleFAQ"
+		>
+			<h3 class="tw-text-subhead tw-text-left">
+				{{ title }}
+			</h3>
+			<kv-material-icon
+				class="tw-w-4 tw-h-4"
+				:icon="open ? mdiChevronUp : mdiChevronDown"
+				@click="toggleFAQ"
+			/>
+		</button>
+		<kv-expandable easing="ease-in-out">
+			<div
+				v-show="open"
+				class="tw-prose tw-pb-4 tw-pt-2"
+			>
+				<slot></slot>
+				<div
+					v-if="content !== ''"
+					v-html="content"
+				>
+				</div>
+			</div>
+		</kv-expandable>
+	</div>
+</template>
+
+<script>
+import {
+	computed,
+	onMounted,
+	watch,
+	ref,
+	toRefs,
+} from 'vue-demi';
+import {
+	mdiChevronDown,
+	mdiChevronUp,
+} from '@mdi/js';
+import { paramCase } from 'change-case';
+
+import KvExpandable from './KvExpandable.vue';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	components: {
+		KvMaterialIcon,
+		KvExpandable,
+	},
+	props: {
+		/**
+		 * Question Title
+		* */
+		title: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Question Content - can accept raw html
+		* */
+		content: {
+			type: String,
+			default: '',
+		},
+		active: {
+			type: Boolean,
+			default: false,
+		},
+		routeHash: {
+			type: String,
+			default: '',
+		},
+		kvTrackFunction: {
+			type: Function,
+			default: () => {},
+		},
+	},
+	emits: [
+		'toggle',
+	],
+	setup(props, { emit }) {
+		const {
+			title,
+			active,
+		} = toRefs(props);
+		const open = ref(active.value || false);
+		const titleSlugified = computed(() => paramCase(title.value));
+
+		const toggleFAQ = () => {
+			props.kvTrackFunction('faq', 'toggle', titleSlugified, open.value ? 'expand' : 'collapse');
+			open.value = !open.value;
+			emit('toggle', { title: titleSlugified });
+		};
+
+		watch(active, (val) => {
+			open.value = val;
+		});
+
+		onMounted(() => {
+			/** Allows directly linking to the question via a hash equal to slugified title */
+			if (props.routeHash === `#${titleSlugified.value}`) {
+				open.value = true;
+			}
+		});
+
+		return {
+			open,
+			mdiChevronDown,
+			mdiChevronUp,
+			titleSlugified,
+			toggleFAQ,
+		};
+	},
+};
+</script>

package/vue/stories/KvExpandableQuestion.stories.js

@@ -0,0 +1,86 @@
+import KvExpandableQuestion from '../KvExpandableQuestion.vue';
+
+export default {
+	title: 'KvExpandableQuestion',
+	component: KvExpandableQuestion,
+};
+
+const DefaultTemplate = () => ({
+	components: { KvExpandableQuestion },
+	template: `
+		<div style="padding: 20px;">
+			<kv-expandable-question
+			id="expandable-question-test"
+			title="expandable-question-title"
+			content="<p> Hello, KvAccordion Contents! </p>"
+			/>
+		</div>
+	`,
+});
+
+export const Default = DefaultTemplate.bind({});
+
+const expandableQuestions = [
+	{
+		title: 'expandable question one',
+		content: '<p> Hello, KvAccordion Contents! </p>',
+		id: 'expandable-question-test-1',
+	},
+	{
+		title: 'expandable question two',
+		content: '<p> Hello, KvAccordion Contents! </p>',
+		id: 'expandable-question-test-2',
+	},
+	{
+		title: 'expandable question three',
+		content: '<p> Hello, KvAccordion Contents! </p>',
+		id: 'expandable-question-test-3',
+	},
+];
+
+const GroupTemplate = () => ({
+	components: { KvExpandableQuestion },
+	data: () => ({
+		questions: expandableQuestions,
+	}),
+	methods: {
+		kvTrackMock(
+			category,
+			action,
+			label,
+		) {
+			console.log(category, action, label);
+		},
+	},
+	template: `
+		<div style="padding: 20px;">
+			<kv-expandable-question
+				v-for="(question, index) in questions"
+				:key="index"
+				:id="question.id"
+				:title="question.title"
+				:content="question.content"
+				:active="question.id === 'expandable-question-test-2'"
+				:kv-track-function="kvTrackMock"
+			/>
+		</div>
+	`,
+});
+
+export const ExpandableSet = GroupTemplate.bind({});
+
+const SlotContentTemplate = () => ({
+	components: { KvExpandableQuestion },
+	template: `
+		<div style="padding: 20px;">
+			<kv-expandable-question
+			id="expandable-question-test"
+			title="expandable question with slot content"
+			>
+				<p> A created slot! </p>
+			</kv-expandable-question>
+		</div>
+	`,
+});
+
+export const SlotContent = SlotContentTemplate.bind({});