@kiva/kv-components 4.8.6 → 5.0.0

package/vue/KvClassicLoanCard.vue

@@ -1,527 +0,0 @@
-<template>
-	<div
-		class="tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-1"
-		:class="{ 'tw-p-1': !largeCard, 'tw-pointer-events-none' : isLoading }"
-		data-testid="loan-card"
-		style="box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);"
-		:style="{ minWidth: '230px', maxWidth: cardWidth }"
-	>
-		<div class="tw-grow">
-			<div class="loan-card-active-hover">
-				<!-- Borrower image -->
-				<kv-loading-placeholder
-					v-if="isLoading"
-					class="tw-mb-1 tw-w-full"
-					:class="{ 'tw-rounded-t tw-rounded-b-none': largeCard, 'tw-rounded': !largeCard }"
-					:style="{ height: '15rem' }"
-				/>
-				<div
-					v-else
-					class="tw-relative"
-				>
-					<component
-						:is="tag"
-						:to="readMorePath"
-						:href="readMorePath"
-						class="tw-flex"
-						aria-label="Borrower image"
-						@click.native="clickReadMore('Photo', $event)"
-					>
-						<kv-borrower-image
-							class="
-								tw-relative
-								tw-w-full
-								tw-bg-black
-							"
-							:class="{ 'tw-rounded-t': largeCard, 'tw-rounded': !largeCard }"
-							:alt="`Photo of ${borrowerName}`"
-							:aspect-ratio="imageAspectRatio"
-							:default-image="{ width: imageDefaultWidth }"
-							:hash="imageHash"
-							:images="imageSizes"
-							:photo-path="photoPath"
-						/>
-
-						<div v-if="countryName">
-							<p
-								class="
-									tw-absolute
-									tw-bottom-1
-									tw-left-1
-									tw-text-primary
-									tw-bg-white
-									tw-rounded
-									tw-p-1
-									tw-mb-0
-									tw-mr-2
-									tw-text-h4
-									tw-inline-flex
-									tw-items-center"
-								style="padding: 2px 6px; text-transform: capitalize;"
-							>
-								<kv-material-icon
-									class="tw-h-2 tw-w-2"
-									:icon="mdiMapMarker"
-								/>
-								{{ formattedLocation }}
-							</p>
-						</div>
-					</component>
-					<kv-loan-team-pick
-						v-if="isTeamPick"
-						class="tw-absolute"
-						:class="{ 'tw-right-6': !isVisitor, 'tw-right-0': isVisitor }"
-						style="top: -6px;"
-						data-testid="loan-card-teampick"
-					/>
-					<kv-loan-bookmark
-						v-if="!isVisitor"
-						:loan-id="loanId"
-						:is-bookmarked="isBookmarked"
-						class="tw-absolute tw-right-1"
-						style="top: -6px;"
-						data-testid="loan-card-bookmark"
-						@toggle-bookmark="$emit('toggle-bookmark')"
-					/>
-				</div>
-
-				<!-- Loan tag -->
-				<component
-					:is="tag"
-					:to="readMorePath"
-					:href="readMorePath"
-					class="tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline"
-					:class="{ 'tw-px-1': largeCard }"
-					aria-label="Loan tag"
-					@click.native="clickReadMore('Tag', $event)"
-				>
-					<kv-loan-tag
-						v-if="showTags && !isLoading"
-						:loan="loan"
-					/>
-				</component>
-
-				<component
-					:is="tag"
-					:to="readMorePath"
-					:href="readMorePath"
-					class="loan-card-use tw-no-underline tw-text-primary"
-					aria-label="Loan use"
-					@click.native="clickReadMore('Use', $event)"
-				>
-					<!-- Loan use  -->
-					<div class="tw-mb-1.5 tw-pt-1">
-						<div
-							v-if="isLoading"
-							class="tw-w-full"
-							:class="{ 'tw-px-1': largeCard }"
-							style="height: 5.5rem;"
-						>
-							<div
-								v-for="(_n, i) in [...Array(4)]"
-								:key="i"
-								class="tw-h-2 tw-mb-1"
-							>
-								<kv-loading-placeholder />
-							</div>
-						</div>
-						<div v-else>
-							<kv-loan-use
-								:use="loanUse"
-								:loan-amount="loanAmount"
-								:status="loanStatus"
-								:borrower-count="loanBorrowerCount"
-								:name="borrowerName"
-								:distribution-model="distributionModel"
-								:class="{ 'tw-px-1': largeCard }"
-							/>
-						</div>
-					</div>
-				</component>
-			</div>
-
-			<!-- Loan call outs -->
-			<kv-loading-placeholder
-				v-if="isLoading || typeof loanCallouts === 'undefined'"
-				class="tw-mt-1.5 tw-mb-1"
-				:class="{ 'tw-mx-1': largeCard }"
-				:style="{ width: '60%', height: '1.75rem', 'border-radius': '500rem' }"
-			/>
-
-			<kv-loan-callouts
-				v-else
-				:callouts="loanCallouts"
-				class="tw-mt-1.5"
-				:class="{ 'tw-px-1': largeCard }"
-				@click="$emit('jump-filter-page', $event)"
-			/>
-		</div>
-
-		<div
-			class="tw-flex tw-justify-between tw-mt-2"
-			:class="{ 'tw-px-1': largeCard }"
-		>
-			<!-- Fundraising -->
-			<div
-				v-if="!hasProgressData"
-				class="tw-w-full tw-pt-1 tw-pr-1"
-			>
-				<kv-loading-placeholder
-					class="tw-mb-0.5"
-					:style="{ width: '70%', height: '1.3rem' }"
-				/>
-
-				<kv-loading-placeholder
-					class="tw-rounded"
-					:style="{ width: '70%', height: '0.5rem' }"
-				/>
-			</div>
-
-			<div>
-				<component
-					:is="tag"
-					v-if="unreservedAmount > 0"
-					:to="readMorePath"
-					:href="readMorePath"
-					class="loan-card-progress tw-no-underline tw-mt-1"
-					aria-label="Loan progress"
-					@click.native="clickReadMore('Progress', $event)"
-				>
-					<kv-loan-progress-group
-						id="loanProgress"
-						:money-left="`${unreservedAmount}`"
-						:progress-percent="fundraisingPercent"
-						class="tw-text-black"
-					/>
-				</component>
-			</div>
-
-			<!-- CTA Button -->
-			<kv-loading-placeholder
-				v-if="!allDataLoaded"
-				class="tw-rounded tw-self-start"
-				:style="{ width: '9rem', height: '3rem' }"
-			/>
-
-			<kv-lend-cta
-				v-else
-				:loan="loan"
-				:basket-items="basketItems"
-				:is-loading="isLoading"
-				:is-adding="isAdding"
-				:enable-five-dollars-notes="enableFiveDollarsNotes"
-				:five-dollars-selected="fiveDollarsSelected"
-				:kv-track-function="kvTrackFunction"
-				:show-view-loan="showViewLoan"
-				:custom-loan-details="customLoanDetails"
-				:external-links="externalLinks"
-				:route="route"
-				:user-balance="userBalance"
-				:get-cookie="getCookie"
-				:set-cookie="setCookie"
-				:enable-huge-amount="enableHugeAmount"
-				:is-visitor="isVisitor"
-				:primary-button-text="primaryButtonText"
-				:secondary-button-text="secondaryButtonText"
-				:secondary-button-handler="secondaryButtonHandler"
-				class="tw-mt-auto"
-				:class="{ 'tw-w-full' : unreservedAmount <= 0 }"
-				@add-to-basket="$emit('add-to-basket', $event)"
-				@show-loan-details="clickReadMore('ViewLoan', $event)"
-				@remove-from-basket="$emit('remove-from-basket', $event)"
-			/>
-		</div>
-
-		<div
-			v-if="showContributors && lendersNumber && amountLent"
-			class="tw-text-center tw-w-full tw-mt-1 tw-font-medium "
-		>
-			<p>
-				{{ lendersNumber }} people contributed {{ amountLent }}
-			</p>
-		</div>
-
-		<div
-			v-if="combinedActivities.length > 0"
-			class="tw-pt-1.5"
-		>
-			<hr class="tw-border-tertiary tw-mb-1 tw-w-5/6 tw-mx-auto">
-			<KvLoanActivities
-				:loan="loan"
-				:combined-activities="combinedActivities"
-				:kv-track-function="kvTrackFunction"
-				:basket-items="basketItems"
-				:is-adding="isAdding"
-				:enable-five-dollars-notes="enableFiveDollarsNotes"
-				:five-dollars-selected="fiveDollarsSelected"
-				:show-view-loan="showViewLoan"
-				:custom-loan-details="customLoanDetails"
-				:external-links="externalLinks"
-				:route="route"
-				:user-balance="userBalance"
-				:get-cookie="getCookie"
-				:set-cookie="setCookie"
-				:error-msg="errorMsg"
-				:enable-huge-amount="enableHugeAmount"
-				:is-visitor="isVisitor"
-				@add-to-basket="$emit('add-to-basket', $event)"
-			/>
-		</div>
-	</div>
-</template>
-
-<script>
-import numeral from 'numeral';
-import { loanCardComputedProperties, loanCardMethods } from '../utils/loanCard';
-
-import KvLoanUse from './KvLoanUse.vue';
-import KvBorrowerImage from './KvBorrowerImage.vue';
-import KvLoanProgressGroup from './KvLoanProgressGroup.vue';
-import KvLoanCallouts from './KvLoanCallouts.vue';
-import KvLendCta from './KvLendCta.vue';
-import KvLoanBookmark from './KvLoanBookmark.vue';
-import KvLoanTag from './KvLoanTag.vue';
-import KvMaterialIcon from './KvMaterialIcon.vue';
-import KvLoadingPlaceholder from './KvLoadingPlaceholder.vue';
-import KvLoanTeamPick from './KvLoanTeamPick.vue';
-import KvLoanActivities from './KvLoanActivities.vue';
-
-export default {
-	name: 'KvClassicLoanCard',
-	components: {
-		KvBorrowerImage,
-		KvLoadingPlaceholder,
-		KvLoanUse,
-		KvLoanProgressGroup,
-		KvMaterialIcon,
-		KvLendCta,
-		KvLoanTag,
-		KvLoanCallouts,
-		KvLoanBookmark,
-		KvLoanTeamPick,
-		KvLoanActivities,
-	},
-	props: {
-		loanId: {
-			type: Number,
-			default: undefined,
-		},
-		loan: {
-			type: Object,
-			default: null,
-		},
-		customLoanDetails: {
-			type: Boolean,
-			default: false,
-		},
-		showTags: {
-			type: Boolean,
-			default: false,
-		},
-		categoryPageName: {
-			type: String,
-			default: '',
-		},
-		enableFiveDollarsNotes: {
-			type: Boolean,
-			default: false,
-		},
-		isAdding: {
-			type: Boolean,
-			default: false,
-		},
-		isVisitor: {
-			type: Boolean,
-			default: true,
-		},
-		basketItems: {
-			type: Array,
-			default: () => ([]),
-		},
-		isBookmarked: {
-			type: Boolean,
-			default: false,
-		},
-		kvTrackFunction: {
-			type: Function,
-			required: true,
-		},
-		photoPath: {
-			type: String,
-			required: true,
-		},
-		showViewLoan: {
-			type: Boolean,
-			default: false,
-		},
-		externalLinks: {
-			type: Boolean,
-			default: false,
-		},
-		route: {
-			type: Object,
-			default: undefined,
-		},
-		userBalance: {
-			type: String,
-			default: undefined,
-		},
-		getCookie: {
-			type: Function,
-			default: undefined,
-		},
-		setCookie: {
-			type: Function,
-			default: undefined,
-		},
-		fiveDollarsSelected: {
-			type: Boolean,
-			default: false,
-		},
-		customCallouts: {
-			type: Array,
-			default: () => ([]),
-		},
-		useFullWidth: {
-			type: Boolean,
-			default: false,
-		},
-		largeCard: {
-			type: Boolean,
-			default: false,
-		},
-		isTeamPick: {
-			type: Boolean,
-			default: false,
-		},
-		combinedActivities: {
-			type: Array,
-			default: () => ([]),
-		},
-		errorMsg: {
-			type: String,
-			default: '',
-		},
-		enableHugeAmount: {
-			type: Boolean,
-			default: false,
-		},
-		primaryButtonText: {
-			type: String,
-			default: 'Lend',
-		},
-		secondaryButtonHandler: {
-			type: Function,
-			default: undefined,
-		},
-		secondaryButtonText: {
-			type: String,
-			default: 'Checkout now',
-		},
-		showContributors: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props, { emit }) {
-		const {
-			allDataLoaded,
-			borrowerName,
-			city,
-			countryName,
-			distributionModel,
-			formattedLocation,
-			fundraisingPercent,
-			hasProgressData,
-			imageHash,
-			isLoading,
-			loanAmount,
-			loanBorrowerCount,
-			loanCallouts,
-			loanStatus,
-			loanUse,
-			mdiMapMarker,
-			readMorePath,
-			state,
-			tag,
-			unreservedAmount,
-		} = loanCardComputedProperties(props);
-
-		const {
-			clickReadMore,
-		} = loanCardMethods(props, emit);
-
-		return {
-			allDataLoaded,
-			borrowerName,
-			city,
-			countryName,
-			distributionModel,
-			formattedLocation,
-			fundraisingPercent,
-			hasProgressData,
-			imageHash,
-			isLoading,
-			loanAmount,
-			loanBorrowerCount,
-			loanCallouts,
-			loanStatus,
-			loanUse,
-			mdiMapMarker,
-			readMorePath,
-			state,
-			tag,
-			unreservedAmount,
-			clickReadMore,
-		};
-	},
-	computed: {
-		cardWidth() {
-			return this.useFullWidth ? '100%' : '374px';
-		},
-		imageAspectRatio() {
-			if (this.largeCard) {
-				return 5 / 8;
-			}
-			return 3 / 4;
-		},
-		imageDefaultWidth() {
-			return this.largeCard ? 480 : 336;
-		},
-		imageSizes() {
-			if (this.largeCard) {
-				return [{ width: 480 }];
-			}
-			return [
-				{ width: this.imageDefaultWidth, viewSize: 1024 },
-				{ width: this.imageDefaultWidth, viewSize: 768 },
-				{ width: 416, viewSize: 480 },
-				{ width: 374, viewSize: 414 },
-				{ width: 335, viewSize: 375 },
-			];
-		},
-		lendersNumber() {
-			return this.loan?.lenders?.totalCount ?? 0;
-		},
-		amountLent() {
-			const amount = this.loan?.loanFundraisingInfo?.fundedAmount ?? 0;
-			return numeral(parseFloat(amount)).format('$0,0');
-		},
-	},
-};
-</script>
-
-<style lang="postcss" scoped>
-/** Shared with KvWideLoanCard */
-.loan-card-use:hover,
-.loan-card-use:focus {
-	@apply tw-text-primary;
-}
-.loan-card-active-hover:hover .loan-card-use {
-	@apply tw-underline;
-}
-.loan-card-progress:hover,
-.loan-card-progress:focus {
-	@apply tw-no-underline;
-}
-</style>

package/vue/KvCommentsAdd.vue

@@ -1,135 +0,0 @@
-<template>
-	<div class="tw-flex tw-flex-col">
-		<div class="tw-flex tw-flex-col md:tw-flex-row md:tw-items-center tw-gap-0.5 md:tw-gap-1">
-			<div class="tw-flex tw-items-center tw-gap-1">
-				<kv-user-avatar
-					:lender-name="userDisplayName"
-					:lender-image-url="userImageUrl"
-					is-small
-				/>
-				<div class="data-hj-suppress tw-font-medium">
-					{{ userDisplayName }}
-				</div>
-			</div>
-			<kv-text-input
-				:id="ADD_COMMENT_ID"
-				ref="input"
-				v-model="addCommentValue"
-				placeholder="Add a comment..."
-				class="data-hj-suppress tw-grow"
-				@keyup.enter="comment"
-			/>
-		</div>
-		<div class="tw-flex tw-py-0.5 tw-gap-0.5">
-			<kv-button
-				variant="ghost"
-				class="tw-ml-auto"
-				@click="cancel"
-			>
-				Cancel
-			</kv-button>
-			<kv-button
-				variant="ghost"
-				:state="commentButtonState"
-				@click="comment"
-			>
-				Comment
-			</kv-button>
-		</div>
-	</div>
-</template>
-
-<script>
-import { computed, ref } from 'vue-demi';
-import KvButton from './KvButton.vue';
-import KvTextInput from './KvTextInput.vue';
-import KvUserAvatar from './KvUserAvatar.vue';
-
-export const ADD_COMMENT_ID = 'add-comment-value';
-export const ADD_COMMENT_EVENT = 'add-comment';
-export const HIDE_INPUT_EVENT = 'hide-input';
-
-export default {
-	name: 'KvCommentsAdd',
-	components: {
-		KvButton,
-		KvTextInput,
-		KvUserAvatar,
-	},
-	props: {
-		/**
-		 * The full URL for the user image
-		 */
-		userImageUrl: {
-			type: String,
-			default: '',
-		},
-		/**
-		 * The name to display for the user
-		 */
-		userDisplayName: {
-			type: String,
-			default: '',
-		},
-		/**
-		 * Whether or not the comment is a reply
-		 */
-		isReply: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	emits: [ADD_COMMENT_EVENT, HIDE_INPUT_EVENT],
-	setup(props, { emit }) {
-		const addCommentValue = ref('');
-		const input = ref(null);
-
-		const commentButtonState = computed(() => (addCommentValue.value ? '' : 'disabled'));
-
-		const cancel = () => {
-			addCommentValue.value = '';
-			if (props.isReply) {
-				emit(HIDE_INPUT_EVENT);
-			}
-		};
-
-		const comment = () => {
-			emit(ADD_COMMENT_EVENT, addCommentValue.value);
-			addCommentValue.value = '';
-			if (props.isReply) {
-				emit(HIDE_INPUT_EVENT);
-			}
-		};
-
-		const focus = () => input.value.focus();
-
-		return {
-			ADD_COMMENT_ID,
-			addCommentValue,
-			commentButtonState,
-			cancel,
-			comment,
-			focus,
-		};
-	},
-};
-</script>
-
-<style lang="postcss" scoped>
-:deep(input) {
-	@apply tw-border-t-0 tw-border-r-0 tw-border-l-0 tw-rounded-none tw-p-0 tw-h-4;
-}
-
-:deep(input:focus) {
-	@apply tw-border-tertiary;
-	box-shadow: none;
-}
-
-:deep(button > span) {
-	@apply tw-min-h-0;
-}
-
-:deep(button > span > span) {
-	@apply tw-py-0 tw-px-0.5;
-}
-</style>