@kiva/kv-components 3.107.0 → 3.107.2

package/dist/components/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 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>

package/dist/components/KvUserAvatar.vue

@@ -0,0 +1,132 @@
+<template>
+	<div
+		class="data-hj-suppress tw-flex"
+		:class="{ 'tw-w-3': isSmall, 'tw-w-6': !isSmall }"
+	>
+		<!-- User is anonymous or data is missing -->
+		<div
+			v-if="isAnonymousUser"
+			class="
+				tw-rounded-full
+				tw-bg-brand
+				tw-inline-flex tw-align-center tw-justify-center
+			"
+			:class="{ 'tw-w-3 tw-h-3': isSmall, 'tw-w-6 tw-h-6': !isSmall }"
+		>
+			<!-- Kiva K logo -->
+			<!-- eslint-disable max-len -->
+			<svg
+				class="tw-h-full tw-text-brand"
+				:class="{ 'tw-w-3 tw-h-3': isSmall }"
+				width="25"
+				height="37"
+				viewBox="0 0 25 37"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					d="M8.22861 0.875H0.857178V36.3125H8.22861V0.875Z"
+					fill="white"
+				/>
+				<path
+					d="M10.1143 23.2751C21.9428 23.2751 24.6857 13.2126 24.6857 11.4626H23.6571C11.8286 11.4626 9.08569 21.5251 9.08569 23.2751H10.1143Z"
+					fill="white"
+				/>
+				<path
+					d="M9.08569 24.2376C9.08569 26.0751 11.1428 36.3126 23.8285 36.3126H24.8571C24.8571 34.4751 22.8 24.2376 10.1143 24.2376H9.08569Z"
+					fill="white"
+				/>
+			</svg>
+			<!-- eslint-enable max-len -->
+		</div>
+		<!-- User is not anonymous and has an image -->
+		<div
+			v-else-if="!isLegacyPlaceholderAvatar(imageFilename) && imageFilename"
+		>
+			<img
+				:src="lenderImageUrl"
+				alt="Image of lender"
+				class="tw-rounded-full tw-inline-block"
+				:class="{ 'tw-w-3 tw-h-3': isSmall, 'tw-w-6 tw-h-6': !isSmall }"
+			>
+		</div>
+		<!-- User is not anonymous and does not have an image -->
+		<div
+			v-else-if="isLegacyPlaceholderAvatar(imageFilename) || !imageFilename"
+			class="
+				tw-rounded-full
+				tw-inline-flex tw-align-center tw-justify-center
+			"
+			:class="avatarClass()"
+		>
+			<!-- First Letter of lender name -->
+			<span class="tw-self-center">
+				{{ lenderNameFirstLetter }}
+			</span>
+		</div>
+	</div>
+</template>
+
+<script>
+import { computed, toRefs } from 'vue-demi';
+import { isLegacyPlaceholderAvatar, randomizedUserAvatarClass } from '../utils/imageUtils';
+
+export default {
+	name: 'KvUserAvatar',
+	props: {
+		/**
+		 * The name of the lender
+		 */
+		lenderName: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The image of the lender
+		 */
+		lenderImageUrl: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The image of the lender
+		 */
+		isSmall: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const {
+			lenderName,
+			lenderImageUrl,
+			isSmall,
+		} = toRefs(props);
+
+		const isAnonymousUser = computed(() => {
+			return (lenderName.value === '' && lenderImageUrl.value === '') || lenderName.value === 'Anonymous';
+		});
+
+		const avatarClass = () => {
+			const smallClass = isSmall?.value ? 'tw-w-3 tw-h-3 tw-text-h4' : 'tw-w-6 tw-h-6 tw-text-h2';
+			return `${randomizedUserAvatarClass()} ${smallClass}`;
+		};
+
+		const imageFilename = computed(() => {
+			return lenderImageUrl?.value?.split('/').pop() ?? '';
+		});
+
+		const lenderNameFirstLetter = computed(() => {
+			return lenderName?.value?.substring(0, 1).toUpperCase();
+		});
+
+		return {
+			isAnonymousUser,
+			avatarClass,
+			imageFilename,
+			lenderNameFirstLetter,
+			isLegacyPlaceholderAvatar,
+		};
+	},
+};
+</script>

package/dist/components/KvVerticalCarousel.vue

@@ -0,0 +1,156 @@
+<template>
+	<div>
+		<section
+			ref="rootEl"
+			aria-label="carousel"
+			class="kv-carousel tw-overflow-hidden tw-relative"
+		>
+			<!-- Carousel Content -->
+			<div
+				class="tw-flex tw-flex-col"
+				:style="`height: ${heightStyle}`"
+				@click.capture="onCarouselContainerClick"
+			>
+				<div
+					v-for="(slotName, index) in componentSlotKeys"
+					:key="index"
+					role="group"
+					:aria-label="`slide ${index + 1} of ${componentSlotKeys.length}`"
+					:aria-current="currentIndex === index ? 'true' : 'false'"
+					:aria-hidden="isAriaHidden(index)? 'true' : 'false'"
+					:tab-index="isAriaHidden(index) ? '-1' : false"
+				>
+					<slot
+						:name="slotName"
+					></slot>
+				</div>
+			</div>
+		</section>
+		<!-- Carousel Controls -->
+		<div
+			class="kv-carousel__controls tw-flex
+			tw-justify-between md:tw-justify-center tw-items-center tw-gap-2
+			tw-mt-2 tw-w-full"
+		>
+			<button
+				class="tw-text-primary
+					tw-rounded-full
+					tw-border-2 tw-border-primary
+					tw-h-4 tw-w-4
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
+				:disabled="embla && !embla.canScrollPrev()"
+				@click="handleUserInteraction(previousIndex, 'click-left-arrow')"
+			>
+				<kv-material-icon
+					class="tw-w-4"
+					:icon="mdiChevronUp"
+				/>
+				<span class="tw-sr-only">Show previous slide</span>
+			</button>
+			<button
+				class="tw-text-primary
+					tw-rounded-full
+					tw-border-2 tw-border-primary
+					tw-h-4 tw-w-4
+					tw-flex tw-items-center tw-justify-center
+					disabled:tw-opacity-low disabled:tw-cursor-default"
+				:disabled="embla && !embla.canScrollNext()"
+				@click="handleUserInteraction(nextIndex, 'click-right-arrow')"
+			>
+				<kv-material-icon
+					class="tw-w-4"
+					:icon="mdiChevronDown"
+				/>
+				<span class="tw-sr-only">Show next slide</span>
+			</button>
+		</div>
+	</div>
+</template>
+
+<script>
+import {
+	mdiChevronUp,
+	mdiChevronDown,
+} from '@mdi/js';
+import { carouselUtil } from '../utils/carousels';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	components: {
+		KvMaterialIcon,
+	},
+	props: {
+		/**
+		 * Height style declaration of the vertical carousel.
+		 * */
+		heightStyle: {
+			type: String,
+			default: '400px;',
+		},
+		/**
+		 * Options for the embla carousel - // https://davidcetinkaya.github.io/embla-carousel/api#options
+		 * */
+		emblaOptions: {
+			type: Object,
+			default() {
+				return {};
+			},
+		},
+		/**
+		 * The type of logic to implement when deciding how many slides
+		 * to scroll when pressing the next/prev button
+		 * `visible, auto`
+		 * */
+		slidesToScroll: {
+			type: String,
+			default: 'auto',
+			validator: (value) => ['visible', 'auto'].indexOf(value) !== -1,
+		},
+	},
+	emits: [
+		'change',
+		'interact-carousel',
+	],
+	setup(props, { emit, slots }) {
+		const {
+			componentSlotKeys,
+			currentIndex,
+			embla,
+			goToSlide,
+			handleUserInteraction,
+			isAriaHidden,
+			nextIndex,
+			onCarouselContainerClick,
+			previousIndex,
+			reInit,
+			reInitVisible,
+			rootEl,
+			slideIndicatorCount,
+			slides,
+		} = carouselUtil(props, { emit, slots }, { axis: 'y' });
+
+		return {
+			componentSlotKeys,
+			currentIndex,
+			embla,
+			goToSlide,
+			handleUserInteraction,
+			isAriaHidden,
+			mdiChevronDown,
+			mdiChevronUp,
+			nextIndex,
+			onCarouselContainerClick,
+			previousIndex,
+			reInit,
+			reInitVisible,
+			rootEl,
+			slideIndicatorCount,
+			slides,
+		};
+	},
+};
+</script>
+
+<style scoped>
+</style>

package/dist/components/KvVotingCard.vue

@@ -0,0 +1,160 @@
+<template>
+	<div
+		class="
+		kv-voting-card
+		tw-bg-white
+		tw-rounded
+		tw-shadow
+		tw-p-1
+		tw-flex
+		tw-flex-col
+		tw-max-w-300"
+	>
+		<div class="tw-relative tw-flex tw-w-full tw-bg-black tw-rounded tw-mb-1">
+			<slot name="image"></slot>
+			<div
+				class="
+					tw-absolute
+					tw-bottom-1
+					tw-left-1
+					tw-text-primary
+					tw-bg-white
+					tw-rounded
+					tw-text-h4
+					tw-inline-flex
+					tw-items-center"
+				style="padding: 2px 6px; text-transform: capitalize;"
+			>
+				<span
+					class="tw-inline-flex tw-align-text-top"
+					aria-hidden="true"
+					role="img"
+				>
+					<svg
+						class="tw-h-2 tw-w-2.5"
+						viewBox="0 0 20 20"
+						xmlns="http://www.w3.org/2000/svg"
+					>
+						<!-- eslint-disable max-len -->
+						<path
+							d="m3.12088 18.7441c12.86212 0 15.87912-14.52631 15.87912-16.99996h-1.1209c-12.85272 0-15.8791 14.51376-15.8791 16.99996z"
+							fill="currentColor"
+						/>
+					<!-- eslint-enable max-len -->
+					</svg>
+				</span>
+				<div>
+					{{ borrowerName }}
+				</div>
+			</div>
+		</div>
+		<div class="tw-flex tw-flex-grow">
+			<div class="tw-flex-grow">
+				<h3 class="tw-font-medium">
+					{{ category }}
+				</h3>
+			</div>
+			<div class="tw-flex-shrink">
+				<kv-material-icon
+					v-if="showInfoIcon"
+					:icon="infoIcon"
+					class="tw-h-3 tw-w-3"
+					@click="handleInfoClick"
+				/>
+			</div>
+		</div>
+		<div class="tw-flex tw-items-center tw-w-full tw-mb-1">
+			<kv-progress-bar
+				v-if="showPercentage"
+				class="tw-flex-grow"
+				:aria-label="'Percent of votes for ' + category"
+				:value="percentage"
+			/>
+			<div
+				v-if="showPercentage"
+				class="tw-ml-2 tw-font-medium"
+			>
+				{{ percentage }}%
+			</div>
+		</div>
+		<kv-button
+			v-if="showVoteButton"
+			class="tw-w-full"
+			@click="castVote"
+		>
+			Vote
+		</kv-button>
+	</div>
+</template>
+
+<script>
+import { mdiInformation } from '@mdi/js';
+import { computed } from 'vue-demi';
+import KvProgressBar from './KvProgressBar.vue';
+import KvButton from './KvButton.vue';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	name: 'KvVotingCard',
+	components: {
+		KvProgressBar,
+		KvButton,
+		KvMaterialIcon,
+	},
+	props: {
+		borrowerName: {
+			type: String,
+			default: '',
+		},
+		category: {
+			type: String,
+			default: '',
+		},
+		images: {
+			type: Array,
+			default: () => [],
+		},
+		percentage: {
+			type: Number,
+			default: 0,
+		},
+		showVoteButton: {
+			type: Boolean,
+			default: true,
+		},
+		showPercentage: {
+			type: Boolean,
+			default: true,
+		},
+		showInfoIcon: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup() {
+		const infoIcon = computed(() => mdiInformation);
+		return {
+			infoIcon,
+		};
+	},
+
+	methods: {
+		castVote() {
+			this.$emit('vote', {
+				category: this.category,
+			});
+		},
+		handleInfoClick() {
+			this.$emit('info-click', {
+				category: this.category,
+			});
+		},
+	},
+};
+</script>
+
+  <style scoped>
+  .kv-voting-card {
+	max-width: 300px;
+  }
+  </style>