@kiva/kv-components 3.93.0 → 3.95.0

package/vue/KvPopper.vue

@@ -0,0 +1,178 @@
+<template>
+	<transition :name="transitionType">
+		<div
+			v-show="show"
+			class="tw-absolute"
+			:style="styles"
+			:aria-hidden="show ? 'false' : 'true'"
+		>
+			<slot></slot>
+		</div>
+	</transition>
+</template>
+
+<script>
+import {
+	onBodyTouchstart,
+	offBodyTouchstart,
+	isTargetElement,
+} from '../utils/touchEvents';
+
+export default {
+	name: 'KvPopper',
+	props: {
+		controller: {
+			validator(value) {
+				if (typeof value === 'string') return true;
+				if (typeof window === 'object'
+					&& 'HTMLElement' in window
+					&& value instanceof HTMLElement) return true;
+				return false;
+			},
+			required: true,
+		},
+		openDelay: { type: Number, default: 0 },
+		closeDelay: { type: Number, default: 200 },
+		// must be defined in our globa/transitions.scss
+		transitionType: { type: String, default: '' },
+		popperPlacement: { type: String, default: 'bottom-start' },
+		popperModifiers: { type: Object, default: () => {} },
+	},
+	data() {
+		return {
+			popper: null,
+			popperPromise: null,
+			styles: {},
+			show: false,
+			timeout: null,
+		};
+	},
+	computed: {
+		reference() {
+			return typeof this.controller === 'string' ? document.getElementById(this.controller) : this.controller;
+		},
+	},
+	watch: {
+		show(showing) {
+			if (this.reference) {
+				this.reference.setAttribute('aria-expanded', showing ? 'true' : 'false');
+			}
+			this.$emit(showing ? 'show' : 'hide');
+		},
+	},
+	mounted() {
+		this.reference.tabIndex = 0;
+		this.attachEvents();
+	},
+	updated() {
+		if (this.popper) {
+			this.popper.scheduleUpdate();
+		}
+	},
+	beforeDestroy() {
+		this.removeEvents();
+		if (this.popper) {
+			this.popper.destroy();
+		}
+	},
+	methods: {
+		open() {
+			this.initPopper().then(() => {
+				this.setTimeout(() => {
+					this.show = true;
+					this.popper.scheduleUpdate();
+					this.attachBodyEvents();
+				}, this.openDelay);
+			});
+		},
+		close() {
+			this.setTimeout(() => {
+				this.show = false;
+				this.removeBodyEvents();
+			}, this.closeDelay);
+		},
+		toggle() {
+			if (this.show) {
+				this.close();
+			} else {
+				this.open();
+			}
+		},
+		update() {
+			if (this.popper) {
+				this.popper.scheduleUpdate();
+			}
+		},
+		initPopper() {
+			// skip loading if popper already created
+			if (this.popper) return Promise.resolve();
+			// skip loading if loading already started
+			if (this.popperPromise) return this.popperPromise;
+			// import and init Popper.js
+			this.popperPromise = import('popper.js').then(({ default: Popper }) => {
+				this.popper = new Popper(this.reference, this.$el, {
+					placement: this.popperPlacement,
+					modifiers: {
+						applyStyle: (data) => {
+							this.styles = data.styles;
+							this.setAttributes(data.attributes);
+						},
+						preventOverflow: {
+							padding: 0,
+						},
+						...this.popperModifiers,
+					},
+				});
+			});
+			return this.popperPromise;
+		},
+		bodyTouchHandler(e) {
+			if (!isTargetElement(e, [this.reference, this.$el])) {
+				this.show = false;
+				this.removeBodyEvents();
+			}
+		},
+		referenceTapHandler(e) {
+			e.preventDefault();
+			this.toggle();
+		},
+		attachEvents() {
+			this.reference.addEventListener('mouseover', this.open);
+			this.reference.addEventListener('focus', this.open);
+			this.reference.addEventListener('mouseout', this.close);
+			this.reference.addEventListener('blur', this.close);
+			this.$el.addEventListener('mouseover', this.open);
+			this.$el.addEventListener('mouseout', this.close);
+			this.reference.addEventListener('touchstart', this.referenceTapHandler);
+		},
+		attachBodyEvents() {
+			onBodyTouchstart(this.bodyTouchHandler);
+		},
+		removeEvents() {
+			this.removeBodyEvents();
+			this.reference.removeEventListener('touchstart', this.referenceTapHandler);
+			this.reference.removeEventListener('mouseover', this.open);
+			this.reference.removeEventListener('mouseout', this.close);
+			this.$el.removeEventListener('mouseover', this.open);
+			this.$el.removeEventListener('mouseout', this.close);
+		},
+		removeBodyEvents() {
+			offBodyTouchstart(this.bodyTouchHandler);
+		},
+		setAttributes(attrs) {
+			Object.keys(attrs).forEach((attr) => {
+				const value = attrs[attr];
+				if (value === false) {
+					this.$el.removeAttribute(attr);
+				} else {
+					this.$el.setAttribute(attr, value);
+				}
+			});
+		},
+		setTimeout(fn, delay) {
+			window.clearTimeout(this.timeout);
+			this.timeout = window.setTimeout(fn, delay);
+		},
+	},
+};
+</script>

package/vue/KvTooltip.vue

@@ -0,0 +1,168 @@
+<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

@@ -0,0 +1,229 @@
+<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 { getTreemap } from 'treemap-squarify';
+import kvTokensPrimitives from '@kiva/kv-tokens/primitives.json';
+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>

package/vue/stories/KvClassicLoanCard.stories.js

@@ -457,3 +457,24 @@ export const ContributorsAndAmount = story({
 	photoPath,
 	showContributors: true,
 });
+
+export const USLoan = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		geocode: {
+			city: 'Kittanning',
+			state: 'PA',
+			country: {
+				isoCode: 'US',
+				name: 'United States',
+				region: 'North America',
+				__typename: 'Country',
+			},
+			__typename: 'Geocode',
+		},
+		distributionModel: 'direct',
+	},
+	kvTrackFunction,
+	photoPath,
+});

package/vue/stories/KvIntroductionLoanCard.stories.js

@@ -84,14 +84,7 @@ const photoPath = 'https://www-kiva-org.freetls.fastly.net/img/';
 
 export const Default = story({
 	loanId: loan.id,
-	loan: {
-		...loan,
-		loanFundraisingInfo: {
-			fundedAmount: '200.00',
-			isExpiringSoon: false,
-			reservedAmount: '0.00',
-		},
-	},
+	loan,
 	kvTrackFunction,
 	photoPath,
 });
@@ -120,13 +113,87 @@ export const Matched = story({
 		...loan,
 		matchingText: 'Ebay',
 		matchRatio: 1,
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const LseLoan = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		partnerName: 'N/A, direct to Novulis',
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const AlmostFunded = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		loanAmount: '100.00',
+		unreservedAmount: '10.00',
+		fundraisingPercent: 0.9,
 		loanFundraisingInfo: {
-			fundedAmount: '200.00',
-			isExpiringSoon: false,
+			fundedAmount: '90.00',
 			reservedAmount: '0.00',
 		},
 	},
 	kvTrackFunction,
 	photoPath,
-	loanCallouts: [{ label: 'callout 1' }, { label: 'callout 2' }, { label: 'callout 3' }],
+});
+
+const tomorrow = new Date();
+tomorrow.setDate(new Date().getDate() + 1);
+
+export const ExpiringSoon = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		plannedExpirationDate: tomorrow.toISOString(),
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const Funded = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		unreservedAmount: '0.00',
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const LongName = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const USLoan = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		geocode: {
+			city: 'Kittanning',
+			state: 'PA',
+			country: {
+				isoCode: 'US',
+				name: 'United States',
+				region: 'North America',
+				__typename: 'Country',
+			},
+			__typename: 'Geocode',
+		},
+		distributionModel: 'direct',
+	},
+	kvTrackFunction,
+	photoPath,
 });