@kiva/kv-components 3.98.1 → 3.100.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.100.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.99.0...@kiva/kv-components@3.100.0) (2024-09-04)
+
+
+### Features
+
+* use kiva fork of treemap repo ([50cc510](https://github.com/kiva/kv-ui-elements/commit/50cc510199e37763512dfb3c8e244153835ab16d))
+
+
+
+
+
+# [3.99.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.98.1...@kiva/kv-components@3.99.0) (2024-09-04)
+
+
+### Features
+
+* desktop side sheet component added to library ([#454](https://github.com/kiva/kv-ui-elements/issues/454)) ([5f140cb](https://github.com/kiva/kv-ui-elements/commit/5f140cbf2a05833e2c08bdf9dadb7ce9cbdb7194))
+
+
+
+
+
 ## [3.98.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.98.0...@kiva/kv-components@3.98.1) (2024-09-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.98.1",
+  "version": "3.100.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -72,7 +72,7 @@
     "nanoid": "^3.1.23",
     "numeral": "^2.0.6",
     "popper.js": "^1.16.1",
-    "treemap-squarify": "^1.0.1",
+    "treemap-squarify": "github:kiva/treemap",
     "vue-demi": "^0.14.7"
   },
   "peerDependencies": {
@@ -84,5 +84,5 @@
       "optional": true
     }
   },
-  "gitHead": "b2fd2967b6606a846281d8dde50fae68cf9c0f01"
+  "gitHead": "2f3a38b4863d0ddbfd81dbafc12a19f5d602b53b"
 }

package/vue/KvSideSheet.vue

@@ -0,0 +1,134 @@
+<template>
+	<div
+		v-if="visible"
+		class="tw-hidden lg:tw-block tw-fixed tw-inset-0
+            tw-bg-black tw-transition-all tw-duration-150 tw-z-modal tw-mt-8"
+		:class="{
+			'tw-bg-opacity-0 tw-delay-300': !open,
+			'tw-bg-opacity-low': open,
+		}"
+		@click.self="closeSideSheet"
+	>
+		<div
+			class="tw-absolute tw-right-0 tw-h-full tw-transition-all tw-duration-300 tw-bg-white"
+			:class="{
+				'tw-w-0 tw-p-0 tw-delay-200': !open,
+				'tw-w-1/2 tw-p-2': open,
+			}"
+		>
+			<div class="tw-flex tw-justify-between">
+				<button
+					class="hover:tw-text-action-highlight"
+					@click="closeSideSheet"
+				>
+					<kv-material-icon
+						class="tw-w-3 tw-h-3"
+						:icon="mdiClose"
+					/>
+				</button>
+
+				<button
+					v-if="showGoToLink"
+					class="hover:tw-text-action-highlight"
+					@click="goToLink"
+				>
+					<kv-material-icon
+						class="tw-w-3 tw-h-3"
+						:icon="mdiLaunch"
+					/>
+				</button>
+			</div>
+			<div
+				class="tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200"
+				:class="{
+					'tw-opacity-0': !open,
+					'tw-opacity-full': open,
+				}"
+			>
+				<slot></slot>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { ref, toRefs, watch } from 'vue-demi';
+import { mdiClose, mdiLaunch } from '@mdi/js';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	components: {
+		KvMaterialIcon,
+	},
+	props: {
+		/**
+		 * Whether the side sheet is open or not
+		 * */
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Show the go to link button
+		 * */
+		showGoToLink: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Tracking event function
+		 * */
+		kvTrackFunction: {
+			type: Function,
+			default: () => ({}),
+		},
+		/**
+		 * Tracking event category
+		 * */
+		trackEventCategory: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: [
+		'side-sheet-closed',
+	],
+	setup(props, { emit }) {
+		const {
+			visible,
+			kvTrackFunction,
+			trackEventCategory,
+		} = toRefs(props);
+
+		const open = ref(false);
+
+		const closeSideSheet = () => {
+			open.value = false;
+			kvTrackFunction.value(trackEventCategory.value, 'click', 'side-sheet-closed');
+			setTimeout(() => {
+				emit('side-sheet-closed');
+			}, '700');
+		};
+
+		const goToLink = () => {
+			emit('go-to-link');
+		};
+
+		watch(visible, () => {
+			if (visible.value) {
+				setTimeout(() => {
+					open.value = true;
+				}, '300');
+			}
+		});
+
+		return {
+			mdiClose,
+			mdiLaunch,
+			open,
+			closeSideSheet,
+			goToLink,
+		};
+	},
+};
+</script>

package/vue/KvTreeMapChart.vue

@@ -43,7 +43,7 @@
 
 <script>
 import numeral from 'numeral';
-import treemap from 'treemap-squarify';
+import { getTreemap } from 'treemap-squarify';
 import kvTokensPrimitives from '@kiva/kv-tokens/primitives.json';
 import { throttle } from '../utils/throttle';
 import KvTooltip from './KvTooltip.vue';
@@ -100,7 +100,7 @@ export default {
 			}
 
 			// Calculate treemap blocks using canvas size 100x100 to easily translate to percentages
-			const blocks = treemap.getTreemap({
+			const blocks = getTreemap({
 				data: this.values,
 				width: 100,
 				height: 100,

package/vue/stories/KvSideSheet.stories.js

@@ -0,0 +1,50 @@
+import KvSideSheet from '../KvSideSheet.vue';
+import KvButton from '../KvButton.vue';
+
+export default {
+	title: 'KvSideSheet',
+	component: KvSideSheet,
+};
+
+const Template = (args, {
+	argTypes,
+}) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvSideSheet,
+		KvButton,
+	},
+	template: `
+		<div>
+			<kv-button @click="isVisible = true">Show Side Sheet</kv-button>
+			<kv-side-sheet
+				:visible="isVisible"
+				:kv-track-function="kvTrackMock"
+				track-event-category="new-loan-card"
+				:show-go-to-link="true"
+				@side-sheet-closed="isVisible = false"
+			>
+				<div>
+					Some content
+				</div>
+			</kv-side-sheet>
+		</div>`,
+	data() {
+		return {
+			isVisible: args.visible,
+		};
+	},
+	methods: {
+		kvTrackMock(
+			category,
+			action,
+			label,
+			property,
+			value,
+		) {
+			console.log(category, action, label, property, value);
+		},
+	},
+});
+
+export const Default = Template.bind({});