@kiva/kv-components 4.8.6 → 5.0.0

package/vue/KvToast.vue

@@ -1,221 +0,0 @@
-<template>
-	<div
-		role="alert"
-		aria-live="polite"
-	>
-		<transition
-			enter-active-class="tw-transition-opacity tw-duration-300"
-			leave-active-class="tw-transition-opacity tw-duration-300"
-			enter-class="tw-opacity-0"
-			enter-to-class="tw-opacity-full"
-			leave-class="tw-opacity-full"
-			leave-to-class="tw-opacity-0"
-		>
-			<div
-				v-if="isVisible"
-				data-test="tip-message"
-				class="tw-mx-2.5"
-			>
-				<kv-page-container>
-					<div
-						class="
-							tw-rounded tw-overflow-hidden
-							tw-flex
-							tw-bg-secondary
-							tw-mx-auto
-							tw-w-full md:tw-w-max md:tw-max-w-full md:tw-min-w-1/2
-							tw-shadow
-						"
-					>
-						<div
-							class="
-							tw-w-5
-							tw-flex-shrink-0
-							tw-flex
-							tw-items-center tw-justify-center
-						"
-							:class="{
-								'tw-bg-brand tw-text-white' : (
-									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"
-							/>
-						</div>
-						<div
-							ref="messageRef"
-							class="
-							tw-flex-1
-							tw-px-1 tw-py-2
-							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
-							class="
-								tw-w-5
-								tw-flex-shrink-0
-								tw-flex
-								tw-items-center tw-justify-center
-								tw-bg-secondary
-								hover:tw-text-action-highlight
-							"
-							@click="close"
-						>
-							<kv-material-icon
-								class="tw-w-2.5 tw-h-2.5"
-								:icon="mdiClose"
-							/>
-							<span class="tw-sr-only">Close notification</span>
-						</button>
-					</div>
-				</kv-page-container>
-			</div>
-		</transition>
-	</div>
-</template>
-
-<script>
-import {
-	ref,
-	computed,
-} from 'vue-demi';
-import {
-	mdiClose, mdiAlertCircle, mdiAlert, mdiCheckCircle,
-} from '@mdi/js';
-import KvMaterialIcon from './KvMaterialIcon.vue';
-import KvPageContainer from './KvPageContainer.vue';
-
-/**
- * A component which displays a temporary notice to the user.
- * Toasts remain visible for 100ms * message character count, with a minumum of 5 seconds.
- * Queuing toasts is not included in this component and should be handled by your application.
- *
- * Usage:
- *
- * ```
- *  <kv-toast ref="myToastRef" />
- *
- *  this.$refs.myToastRef.show(
- * 		message: String,
- * 		messageType: 'error' | 'info' | 'confirmation',
- * 		persist: Boolean
- *  );
- *  this.$refs.myToastRef.close();
- * ```
- */
-export default {
-	components: {
-		KvMaterialIcon,
-		KvPageContainer,
-	},
-	emits: [
-		'close',
-	],
-	setup(props, { emit, slots }) {
-		const isVisible = ref(false);
-		const message = ref('');
-		const messageType = ref('confirmation'); // 'error', 'info', 'confirmation'
-		const persist = ref(false);
-		const timeout = ref(null);
-
-		const icon = computed(() => {
-			if (messageType.value === 'warning') {
-				return mdiAlert;
-			}
-			if (messageType.value === 'error') {
-				return mdiAlertCircle;
-			}
-			return mdiCheckCircle;
-		});
-
-		const msToDisplayToast = computed(() => {
-			const MINIMUM_MS = 5000;
-			const MS_PER_CHARACTER = 100;
-
-			// create an empty span to get the character count without HTML
-			const span = document.createElement('span');
-			span.innerHTML = message.value;
-			const characterCount = span.innerText.length;
-
-			const characterMs = MS_PER_CHARACTER * characterCount;
-			return Math.max(characterMs, MINIMUM_MS);
-		});
-
-		const hasToastContentSlot = computed(() => !!slots?.toastContent ?? false);
-
-		const close = () => {
-			isVisible.value = false;
-			clearTimeout(timeout.value);
-
-			/**
-			* Indicates the toast has closed by a user or after timeout
-			* @event close
-			*/
-			emit('close');
-		};
-
-		const show = (messageInput, type, persistInput, hideDelay) => {
-			isVisible.value = true;
-			message.value = typeof messageInput === 'string' ? messageInput : '';
-			messageType.value = typeof type === 'string' ? type : '';
-			persist.value = Boolean(persistInput);
-
-			if (!persist.value) {
-				timeout.value = setTimeout(() => {
-					close();
-				}, hideDelay ?? msToDisplayToast.value);
-			}
-		};
-
-		return {
-			mdiClose,
-			isVisible,
-			message,
-			messageType,
-			persist,
-			timeout,
-			icon,
-			msToDisplayToast,
-			close,
-			show,
-			hasToastContentSlot,
-		};
-	},
-};
-</script>

package/vue/KvTooltip.vue

@@ -1,168 +0,0 @@
-<template>
-	<kv-theme-provider
-		:theme="themeStyle"
-		class="kv-tailwind"
-	>
-		<kv-popper
-			:controller="controller"
-			:popper-modifiers="popperModifiers"
-			popper-placement="top"
-			transition-type="kvfastfade"
-			class="tooltip-pane tw-absolute tw-bg-primary tw-rounded tw-z-popover"
-		>
-			<div
-				class="tw-p-2.5"
-				style="max-width: 250px;"
-			>
-				<div
-					v-if="$slots.title"
-					class="tw-text-primary tw-font-medium tw-mb-1.5"
-				>
-					<slot name="title"></slot>
-				</div>
-				<div class="tw-text-primary">
-					<slot></slot>
-				</div>
-			</div>
-			<div
-				class="tooltip-arrow tw-absolute tw-w-0 tw-h-0 tw-border-solid"
-				x-arrow=""
-			></div>
-		</kv-popper>
-	</kv-theme-provider>
-</template>
-
-<script>
-import { ref, toRefs, computed } from 'vue-demi';
-import {
-	darkTheme,
-	mintTheme,
-} from '@kiva/kv-tokens/configs/kivaColors.cjs';
-import KvPopper from './KvPopper.vue';
-import KvThemeProvider from './KvThemeProvider.vue';
-
-export default {
-	name: 'KvTooltip',
-	components: {
-		KvPopper,
-		KvThemeProvider,
-	},
-	// TODO: Add prop for tooltip placement, Currently defaults to 'top' but will flip to bottom when constrained
-	props: {
-		controller: {
-			validator(value) {
-				if (typeof value === 'string') return true;
-				if (typeof window !== 'undefined'
-					&& 'HTMLElement' in window
-					&& value instanceof HTMLElement) return true;
-				return false;
-			},
-			required: true,
-		},
-		theme: {
-			type: String,
-			default: 'default',
-			validator(value) {
-				// The value must match one of these strings
-				return ['default', 'mint', 'dark'].indexOf(value) !== -1;
-			},
-		},
-	},
-	setup(props) {
-		const {
-			theme,
-		} = toRefs(props);
-
-		const popperModifiers = ref({
-			preventOverflow: {
-				padding: 10,
-			},
-		});
-
-		const themeStyle = computed(() => {
-			const themeMapper = {
-				mint: mintTheme,
-				dark: darkTheme,
-			};
-			return themeMapper[theme.value];
-		});
-
-		return {
-			darkTheme,
-			mintTheme,
-			popperModifiers,
-			themeStyle,
-		};
-	},
-};
-</script>
-
-<style lang="postcss" scoped>
-.tooltip-pane,
-.tooltip-arrow {
-	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.tooltip-arrow {
-	@apply tw-m-1;
-	@apply tw-border-white;
-}
-
-/* Top Tooltip Arrow appears on Bottom */
-.tooltip-pane[x-placement^="top"] {
-	@apply tw-mb-1;
-}
-
-.tooltip-pane[x-placement^="top"] .tooltip-arrow {
-	border-width: 8px 8px 0 8px;
-	border-left-color: transparent;
-	border-right-color: transparent;
-	border-bottom-color: transparent;
-	left: calc(50% - 8px);
-	@apply -tw-bottom-1 tw-mt-0 tw-mb-0;
-}
-
-/* Bottom Tooltip Arrow appears on Top */
-.tooltip-pane[x-placement^="bottom"] {
-	@apply tw-mt-1;
-}
-
-.tooltip-pane[x-placement^="bottom"] .tooltip-arrow {
-	border-width: 0 8px 8px 8px;
-	border-left-color: transparent;
-	border-right-color: transparent;
-	border-top-color: transparent;
-	left: calc(50% - 8px);
-	@apply -tw-top-1 tw-mb-0 tw-mt-0;
-}
-
-/* TODO: TWEAK Inner Arrow Styles for Left + Right Orientations */
-
-/* Right Side Tooltip, Arrow appears on Left */
-.tooltip-pane[x-placement^="right"] {
-	@apply tw-ml-1;
-}
-
-.tooltip-pane[x-placement^="right"] .tooltip-arrow {
-	border-width: 8px 8px 8px 0;
-	border-left-color: transparent;
-	border-top-color: transparent;
-	border-bottom-color: transparent;
-	top: calc(50% - 8px);
-	@apply -tw-left-1 tw-ml-0 tw-mr-0;
-}
-
-/* Left Side Tooltip, Arrow appears on Right */
-.tooltip-pane[x-placement^="left"] {
-	@apply tw-mr-1;
-}
-
-.tooltip-pane[x-placement^="left"] .tooltip-arrow {
-	border-width: 8px 0 8px 8px;
-	border-top-color: transparent;
-	border-right-color: transparent;
-	border-bottom-color: transparent;
-	top: calc(50% - 8px);
-	@apply -tw-right-1 tw-ml-0 tw-mr-0;
-}
-</style>

package/vue/KvTreeMapChart.vue

@@ -1,229 +0,0 @@
-<template>
-	<figure class="treemap-figure tw-relative">
-		<!-- treemap -->
-		<div
-			v-for="(block, index) in blocks"
-			:key="`block-${index}`"
-			class="tw-absolute"
-			:style="blockPositionStyles(block)"
-		>
-			<kv-loading-placeholder
-				v-if="loading"
-				style="width: calc(100% - 0.25rem); height: calc(100% - 0.25rem);"
-			/>
-			<p
-				v-if="!loading"
-				class="tw-rounded-sm tw-box-border tw-overflow-hidden tw-text-small"
-				:class="colorClasses(index)"
-				style="width: calc(100% - 0.25rem); height: calc(100% - 0.25rem);"
-				@mouseenter="setHoverBlock(block)"
-			>
-				<span class="tw-block tw-px-1 tw-py-0.5 tw-truncate">
-					{{ block.data.label }} {{ block.data.percent }}
-				</span>
-			</p>
-		</div>
-		<!-- tooltip -->
-		<div
-			ref="tooltipController"
-			class="tw-absolute"
-			:style="blockPositionStyles(activeBlock)"
-		></div>
-		<kv-tooltip
-			v-if="!loading && tooltipControllerElement"
-			:controller="tooltipControllerElement"
-		>
-			<template #title>
-				{{ activeBlock.data.label }}
-			</template>
-			{{ activeBlock.data.value }} ({{ activeBlock.data.percent }})
-		</kv-tooltip>
-	</figure>
-</template>
-
-<script>
-import numeral from 'numeral';
-import kvTokensPrimitives from '@kiva/kv-tokens/primitives.json';
-import { getTreemap } from '../utils/treemap';
-import { throttle } from '../utils/throttle';
-import KvTooltip from './KvTooltip.vue';
-import KvLoadingPlaceholder from './KvLoadingPlaceholder.vue';
-
-const { breakpoints } = kvTokensPrimitives;
-
-export default {
-	name: 'TreeMapFigure',
-	components: {
-		KvLoadingPlaceholder,
-		KvTooltip,
-	},
-	props: {
-		loading: {
-			type: Boolean,
-			default: true,
-		},
-		values: {
-			type: Array,
-			default: () => [],
-		},
-	},
-	data() {
-		return {
-			screenWidth: 0,
-			activeBlock: { data: {} },
-			tooltipControllerElement: null,
-		};
-	},
-	computed: {
-		activeBreakpoints() {
-			return Object.keys(breakpoints)
-				.filter((name) => this.screenWidth >= breakpoints[name]);
-		},
-		// Used to determine if blocks should be displayed in landscape or portrait orientation
-		aboveMedium() {
-			return this.activeBreakpoints.includes('md');
-		},
-		// Calculate the blocks of the treemap, but don't apply any formatting
-		rawBlocks() {
-			// Use static blocks when no data is available (either loading or no loans)
-			if (!this.values?.length) {
-				return this.loading ? [
-					{
-						x: 0, y: 0, width: 60, height: 40,
-					},
-					{ x: 60, y: 0, height: 40 },
-					{ x: 0, y: 40, width: 30 },
-					{ x: 30, y: 40 },
-				] : [
-					{ x: 0, y: 0, data: { label: 'No loans yet' } },
-				];
-			}
-
-			// Calculate treemap blocks using canvas size 100x100 to easily translate to percentages
-			const blocks = getTreemap({
-				data: this.values,
-				width: 100,
-				height: 100,
-			});
-
-			// Blocks smaller than 8% in either dimension will not display well,
-			// so combine them into one large 'Other' block
-			// If we only have 1 small block though, don't make the 'Other' block
-			const tooSmall = blocks.filter((block) => block.width <= 8 || block.height <= 8);
-			if (tooSmall.length === 1) return blocks;
-
-			const bigBlocks = blocks.filter((block) => block.width > 8 && block.height > 8);
-			return [...bigBlocks, this.reduceBlocks(tooSmall)];
-		},
-		// This is the array that is iterated over in the template
-		blocks() {
-			return this.rawBlocks.map((block) => {
-				const {
-					data, x, y, width, height,
-				} = block ?? {};
-				const { percent } = data ?? {};
-
-				return {
-					data: {
-						...data,
-						percent: numeral(percent).format('0[.]0%'),
-					},
-					// flip x/y when going between small (portrait) and medium (landscape) screens
-					x: this.aboveMedium ? x : y,
-					y: this.aboveMedium ? y : x,
-					width: this.aboveMedium ? width : height,
-					height: this.aboveMedium ? height : width,
-				};
-			});
-		},
-	},
-	mounted() {
-		this.screenWidth = window.innerWidth;
-		window.addEventListener('resize', throttle(() => {
-			this.screenWidth = window.innerWidth;
-		}, 200));
-
-		// Used by KvTooltip/KvPopper to position the tooltip
-		if (this.$refs?.tooltipController) {
-			this.tooltipControllerElement = this.$refs.tooltipController;
-		}
-	},
-	methods: {
-		// Used by the p elements in the main v-for loop to determine background and text color
-		colorClasses(index) {
-			const classes = [];
-			const total = this.blocks?.length ?? 1;
-
-			// background
-			const size = (10 - Math.round((index / total) * 9)) * 100;
-			classes.push(size === 600 ? 'tw-bg-brand' : `tw-bg-brand-${size}`);
-
-			// text
-			classes.push(size > 700 ? 'tw-text-white' : 'tw-text-black');
-
-			return classes;
-		},
-		// Used by the divs in the main v-for for block positions and the tooltip controller div to match positions
-		// with the current active block
-		blockPositionStyles(block) {
-			return {
-				left: `${block.x}%`,
-				top: `${block.y}%`,
-				width: block.width ? `${block.width}%` : null,
-				height: block.height ? `${block.height}%` : null,
-				right: block.width ? null : '0',
-				bottom: block.height ? null : '0',
-			};
-		},
-		// Combine all small blocks into a single 'Other' block that will be at the bottom right of the figure.
-		reduceBlocks(blocks) {
-			return blocks?.reduce((other, block) => {
-				/* eslint-disable no-param-reassign */
-				// Use the smallest x for the overall x
-				if (block.x < other.x) {
-					other.x = block.x;
-				}
-				// Use the smallest y for the overall y
-				if (block.y < other.y) {
-					other.y = block.y;
-				}
-				// Sum up all values and percents
-				other.data.value += block.data.value;
-				other.data.percent += block.data.percent;
-				return other;
-				/* eslint-ensable no-param-reassign */
-			}, {
-				x: 100,
-				y: 100,
-				width: 0,
-				height: 0,
-				data: {
-					label: 'Other',
-					value: 0,
-					percent: 0,
-				},
-			}) ?? [];
-		},
-		// Sets the block that will be used to position the tooltip and change the info displayed in the tooltip
-		setHoverBlock(block) {
-			this.activeBlock = block;
-		},
-	},
-};
-</script>
-
-<style lang="postcss" scoped>
-.treemap-figure {
-	height: 30rem;
-
-	/* account for every block having a 0.25rem right margin */
-	width: calc(100% + 0.25rem);
-	margin-right: -0.25rem;
-}
-
-@screen md {
-	.treemap-figure {
-		height: 20rem;
-	}
-}
-</style>