@kiva/kv-components 4.8.5 → 5.0.0

package/dist/components/KvUserAvatar.vue

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

@@ -1,219 +0,0 @@
-<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}`"
-			>
-				<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-items-center tw-gap-2
-			tw-mt-2 tw-w-full
-			tw-justify-between md:tw-justify-center"
-		>
-			<div
-				class="tw-flex tw-gap-2 tw-w-full md:tw-w-auto"
-				:class="{'tw-justify-between md:tw-justify-center': !hasAutoplay}"
-			>
-				<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>
-
-			<button
-				v-if="hasAutoplay"
-				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"
-				@click.native.prevent="toggleAutoPlay()"
-			>
-				<kv-material-icon
-					v-if="isAutoplaying"
-					class="tw-w-4"
-					:icon="mdiPause"
-				/>
-				<kv-material-icon
-					v-else
-					class="tw-w-4"
-					:icon="mdiPlay"
-				/>
-				<span class="tw-sr-only">Show previous slide</span>
-			</button>
-		</div>
-	</div>
-</template>
-
-<script>
-import {
-	toRefs,
-} from 'vue-demi';
-import {
-	mdiPause,
-	mdiPlay,
-	mdiChevronUp,
-	mdiChevronDown,
-} from '@mdi/js';
-import { computed } from 'vue';
-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,
-		},
-		/**
-		 * Options for the autoplay plugin - // https://www.embla-carousel.com/plugins/autoplay/#options
-		 * */
-		autoplayOptions: {
-			type: Object,
-			default() {
-				return {};
-			},
-		},
-		/**
-		 * Enable fade plugin - // https://www.embla-carousel.com/plugins/fade/
-		 * */
-		fadeEnabled: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: [
-		'change',
-		'interact-carousel',
-	],
-	setup(props, { emit, slots }) {
-		const {
-			autoplayOptions,
-		} = toRefs(props);
-
-		const {
-			componentSlotKeys,
-			currentIndex,
-			embla,
-			goToSlide,
-			handleUserInteraction,
-			isAriaHidden,
-			isAutoplaying,
-			nextIndex,
-			previousIndex,
-			reInit,
-			reInitVisible,
-			rootEl,
-			slideIndicatorCount,
-			slides,
-			toggleAutoPlay,
-		} = carouselUtil(props, { emit, slots }, { axis: 'y' });
-
-		const hasAutoplay = computed(() => {
-			return Object.keys(autoplayOptions.value).length !== 0;
-		});
-
-		return {
-			hasAutoplay,
-			componentSlotKeys,
-			currentIndex,
-			embla,
-			goToSlide,
-			handleUserInteraction,
-			isAriaHidden,
-			isAutoplaying,
-			mdiPause,
-			mdiPlay,
-			mdiChevronDown,
-			mdiChevronUp,
-			nextIndex,
-			previousIndex,
-			reInit,
-			reInitVisible,
-			rootEl,
-			slideIndicatorCount,
-			slides,
-			toggleAutoPlay,
-		};
-	},
-};
-</script>
-
-<style scoped>
-</style>

package/dist/components/KvVotingCard.vue

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

package/dist/components/KvVotingCardV2.vue

@@ -1,154 +0,0 @@
-<template>
-	<div
-		class="vote_card tw-flex tw-flex-col tw-justify-end"
-		:style="cssProps"
-	>
-		<div
-			class="tw-flex-grow-0 tw-text-white"
-		>
-			<h2 class="tw-italic tw-pb-1">
-				{{ title }}
-			</h2>
-			<p class="tw-pb-1.5">
-				{{ truncatedDescription }}
-				<a
-					v-if="isTruncated"
-					class="tw-underline tw-pl-1 tw-text-white tw-cursor-pointer"
-					@click="isLightboxOpen = true"
-				>read more</a>
-			</p>
-			<div class="tw-block md:tw-flex tw-justify-between">
-				<div
-					v-if="showPercentage"
-					class="tw-flex tw-items-center tw-w-full tw-max-w-16"
-				>
-					<kv-progress-bar
-						class="tw-flex-grow"
-						:aria-label="'Percent of votes for ' + description"
-						:value="percentage"
-					/>
-					<div class="tw-ml-2">
-						{{ percentage }}%
-					</div>
-				</div>
-				<kv-button
-					v-if="showVoteButton"
-					variant="secondary"
-					class="tw-flex-grow-0 tw-min-w-16 tw-mt-2"
-					@click="castVote"
-				>
-					Vote
-				</kv-button>
-			</div>
-		</div>
-		<KvLightbox
-			:title="title"
-			:visible="isLightboxOpen"
-			@lightbox-closed="isLightboxOpen = false"
-		>
-			<template #header>
-				<h3>
-					{{ title }}
-				</h3>
-			</template>
-			<p class="tw-pb-1.5">
-				{{ description }}
-			</p>
-		</KvLightbox>
-	</div>
-</template>
-
-<script>
-import {
-	computed,
-	ref,
-	toRefs,
-} from 'vue-demi';
-import KvProgressBar from './KvProgressBar.vue';
-import KvButton from './KvButton.vue';
-import KvLightbox from './KvLightbox.vue';
-
-export default {
-	name: 'KvVotingCard',
-	components: {
-		KvButton,
-		KvLightbox,
-		KvProgressBar,
-	},
-	props: {
-		title: {
-			type: String,
-			default: '',
-		},
-		description: {
-			type: String,
-			default: '',
-		},
-		backgroundImageUrl: {
-			type: String,
-			default: '',
-		},
-		percentage: {
-			type: Number,
-			default: 0,
-		},
-		showVoteButton: {
-			type: Boolean,
-			default: true,
-		},
-		showPercentage: {
-			type: Boolean,
-			default: true,
-		},
-	},
-	emits: [
-		'vote',
-	],
-	setup(props, { emit }) {
-		const isLightboxOpen = ref(false);
-
-		const TRUNCATION_LIMIT = 110;
-
-		const {
-			backgroundImageUrl,
-			description,
-		} = toRefs(props);
-
-		const cssProps = computed(() => {
-			return {
-				'--background-image-voting-card': `url(${backgroundImageUrl.value})`,
-			};
-		});
-
-		const isTruncated = computed(() => {
-			return description?.value && (description?.value.length > TRUNCATION_LIMIT);
-		});
-
-		const truncatedDescription = computed(() => {
-			if (isTruncated.value) {
-				return `${description.value.substring(0, TRUNCATION_LIMIT)}...`;
-			}
-			return description.value;
-		});
-		return {
-			cssProps,
-			castVote() {
-				emit('vote');
-			},
-			isLightboxOpen,
-			isTruncated,
-			truncatedDescription,
-		};
-	},
-};
-</script>
-
-<style lang="postcss">
-.vote_card {
-	background-image:
-    linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),
-    var(--background-image-voting-card);
-	background-size: cover;
-	@apply tw-rounded tw-px-4 tw-pb-4;
-}
-</style>