@kiva/kv-components 4.8.5 → 5.0.0

package/dist/components/KvImpactDashboardHeader.vue

@@ -1,40 +0,0 @@
-<!-- eslint-disable max-len -->
-<template>
-	<nav class="tw-bg-primary">
-		<div
-			class="header__full tw-h-9 tw-grid xl:tw-gap-x-4 tw-items-center tw-mx-auto tw-px-2.5 md:tw-px-4 lg:tw-px-8"
-			style="max-width: 1200px;"
-		>
-			<div class="header__full__logo tw-w-6 tw-text-brand">
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					viewBox="0 0 57 23"
-				>
-					<path
-						d="M4.695.391H0v22.141h4.695V.391zm12.899 22.141h4.695V7.011h-4.695v15.521zm12.159 0h5.413l5.413-15.521h-4.662s-2.544 8.445-3.293 11.119h-.066c-.75-2.674-3.326-11.119-3.326-11.119h-4.956l5.477 15.521zm-23.537-8.31c7.37 0 9.092-6.158 9.092-7.21h-.637c-7.372 0-9.094 6.157-9.094 7.21h.639zm-.639.969c0 1.117 1.276 7.403 9.222 7.403h.638c0-1.119-1.277-7.403-9.221-7.403h-.639zM22.746 2.739C22.746 1.272 21.671 0 19.941 0c-1.727 0-2.804 1.272-2.804 2.739 0 1.468 1.077 2.739 2.804 2.739 1.73 0 2.805-1.271 2.805-2.739M57 7.011h-4.532V9.13c-.783-1.631-2.608-2.543-4.729-2.543-3.848 0-6.88 3.129-6.88 8.184 0 5.087 2.935 8.185 6.652 8.185 2.608 0 4.173-1.272 4.956-2.675v2.25H57V7.011zm-4.663 8.151c0 2.871-1.76 4.208-3.522 4.208-1.924 0-3.163-1.956-3.163-4.598 0-2.608 1.305-4.598 3.326-4.598 1.663 0 3.359 1.37 3.359 4.206v.782z"
-						fill="currentColor"
-					/>
-				</svg>
-			</div>
-
-			<div class="header__full__right">
-				<slot></slot>
-			</div>
-		</div>
-	</nav>
-</template>
-
-<style scoped>
-.header__full {
-  grid-template-areas: 'logo right';
-  grid-template-columns: 1fr auto;
-}
-
-.header__full__logo {
-  grid-area: logo;
-}
-
-.header__full__right {
-  grid-area: right;
-}
-</style>

package/dist/components/KvInlineActivityCard.vue

@@ -1,55 +0,0 @@
-<template>
-	<div
-		class="tw-flex tw-items-center tw-gap-1 tw-py-0.5 tw-px-1 tw-shadow-lg tw-rounded-sm tw-bg-white"
-	>
-		<KvUserAvatar
-			:lender-image-url="lenderImageUrl"
-			:lender-name="lenderName"
-			is-small
-			class="activity-avatar"
-		/>
-		<p class="tw-text-base tw-whitespace-nowrap">
-			<span class="data-hj-suppress">{{ lenderName }}</span> contributed
-		</p>
-	</div>
-</template>
-
-<script>
-import { computed, toRefs } from 'vue-demi';
-import KvUserAvatar from './KvUserAvatar.vue';
-
-export default {
-	name: 'KvInlineActivityCard',
-	components: {
-		KvUserAvatar,
-	},
-	props: {
-		/**
-         * Activity data object
-         */
-		activity: {
-			type: Object,
-			default: () => ({}),
-		},
-	},
-	setup(props) {
-		const {
-			activity,
-		} = toRefs(props);
-
-		const lenderName = computed(() => activity?.value?.lender?.name ?? '');
-		const lenderImageUrl = computed(() => activity?.value?.lender?.image?.url ?? '');
-
-		return {
-			lenderImageUrl,
-			lenderName,
-		};
-	},
-};
-</script>
-
-<style scoped lang="postcss">
-.activity-avatar, .activity-avatar :deep(img), .activity-avatar :deep(div) {
-    @apply tw-w-4 tw-h-4;
-}
-</style>

package/dist/components/KvInlineActivityFeed.vue

@@ -1,38 +0,0 @@
-<template>
-	<div class="tw-flex tw-gap-x-0.5 tw-overflow-x-auto tw-py-2 tw-px-1 hide-scrollbar">
-		<KvInlineActivityCard
-			v-for="(activity, index) in activities"
-			:key="index"
-			:activity="activity"
-		/>
-	</div>
-</template>
-
-<script>
-import KvInlineActivityCard from './KvInlineActivityCard.vue';
-
-export default {
-	name: 'KvInlineActivityFeed',
-	components: { KvInlineActivityCard },
-	props: {
-		/**
-         * Activities data array
-         */
-		activities: {
-			type: Array,
-			default: () => ([]),
-		},
-	},
-};
-</script>
-
-<style scoped lang="postcss">
-.hide-scrollbar {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
-}
-
-.hide-scrollbar::-webkit-scrollbar {
-    @apply tw-hidden;
-}
-</style>

package/dist/components/KvIntroductionLoanCard.vue

@@ -1,449 +0,0 @@
-<template>
-	<div
-		class="tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-2"
-		:class="{ 'tw-pointer-events-none' : isLoading }"
-		data-testid="loan-card"
-		style="box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);"
-		: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-w-full tw-rounded-t"
-					:style="{ height: '11rem' }"
-				/>
-				<div
-					v-else
-					:style="{ height: '11rem' }"
-					class="tw-relative tw-overflow-hidden"
-				>
-					<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
-								tw-rounded-t
-								borrower-image
-							"
-							: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
-									!tw-capitalize
-								"
-								style="padding: 2px 6px;"
-							>
-								<suspense>
-									<kv-flag
-										class="tw-ml-0.5 tw-mr-1"
-										:country="countryCode"
-										width-override="16px"
-										hide-border
-									/>
-								</suspense>
-								{{ formattedLocation }}
-							</p>
-						</div>
-					</component>
-
-					<kv-loan-bookmark
-						v-if="!isVisitor"
-						:loan-id="loanId"
-						:is-bookmarked="isBookmarked"
-						class="loan-bookmark tw-absolute tw-right-1.5 tw-top-0"
-						data-testid="loan-card-bookmark"
-						@toggle-bookmark="$emit('toggle-bookmark')"
-					/>
-				</div>
-
-				<!-- Loan name -->
-
-				<kv-loading-placeholder
-					v-if="isLoading || typeof loanCallouts === 'undefined'"
-					class="tw-mt-1 tw-mx-auto"
-					:style="{ width: '60%', height: '1.75rem', 'border-radius': '500rem' }"
-				/>
-
-				<component
-					:is="tag"
-					:to="readMorePath"
-					:href="readMorePath"
-					aria-label="Borrower name"
-					class="!tw-text-primary tw-no-underline"
-					@click.native="clickReadMore('Name', $event)"
-				>
-					<h3
-						class="loan-card-name"
-						:class="{ 'tw-text-center': borrowerName.length < 20 }"
-						style="font-size: 28px;"
-					>
-						{{ borrowerName }}
-					</h3>
-				</component>
-
-				<!-- Loan tag -->
-
-				<div
-					v-if="isLoading"
-					class="tw-flex tw-justify-center tw-gap-2"
-				>
-					<kv-loading-placeholder
-						v-if="isLoading || typeof loanCallouts === 'undefined'"
-						class="tw-mt-0.5 tw-mb-1"
-						:style="{ width: '20%', height: '1.65rem', 'border-radius': '500rem' }"
-					/>
-					<kv-loading-placeholder
-						v-if="isLoading || typeof loanCallouts === 'undefined'"
-						class="tw-mt-0.5 tw-mb-1"
-						:style="{ width: '20%', height: '1.65rem', 'border-radius': '500rem' }"
-					/>
-					<kv-loading-placeholder
-						v-if="isLoading || typeof loanCallouts === 'undefined'"
-						class="tw-mt-0.5 tw-mb-1"
-						:style="{ width: '20%', height: '1.65rem', 'border-radius': '500rem' }"
-					/>
-				</div>
-
-				<component
-					:is="tag"
-					v-else
-					:to="readMorePath"
-					:href="readMorePath"
-					class="tw-flex tw-no-underline hover:tw-no-underline focus:tw-no-underline tw-justify-center"
-					aria-label="Loan tag"
-					@click.native="clickReadMore('Tag', $event)"
-				>
-					<kv-loan-callouts
-						:callouts="loanCallouts"
-						:add-bg-color="false"
-						class="loan-callouts"
-					/>
-				</component>
-
-				<component
-					:is="tag"
-					:to="readMorePath"
-					:href="readMorePath"
-					class="loan-card-use tw-text-primary tw-no-underline"
-					aria-label="Loan use"
-					@click.native="clickReadMore('Use', $event)"
-				>
-					<!-- Loan use  -->
-					<div
-						class="tw-pt-0.5 tw-px-2"
-						:class="{'tw-mb-1.5': !isLoading}"
-					>
-						<div
-							v-if="isLoading"
-							class="tw-w-full"
-							style="height: 5.5rem;"
-						>
-							<div
-								v-for="(_n, i) in [...Array(3)]"
-								: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"
-								hide-loan-amount
-								class="!tw-line-clamp-3"
-							/>
-						</div>
-					</div>
-				</component>
-			</div>
-		</div>
-
-		<div class="tw-px-2">
-			<!-- Fundraising -->
-			<div
-				v-if="!hasProgressData"
-				class="tw-w-full tw-pr-1"
-			>
-				<div class="tw-flex tw-justify-between">
-					<kv-loading-placeholder
-						class="tw-mb-0.5"
-						:style="{ width: '20%', height: '1.3rem' }"
-					/>
-					<kv-loading-placeholder
-						class="tw-mb-0.5"
-						:style="{ width: '20%', height: '1.3rem' }"
-					/>
-				</div>
-
-				<kv-loading-placeholder
-					class="tw-rounded"
-					:style="{ width: '100%', height: '0.5rem' }"
-				/>
-			</div>
-
-			<div>
-				<component
-					:is="tag"
-					v-if="unreservedAmount > 0"
-					:to="readMorePath"
-					:href="readMorePath"
-					class="loan-card-progress tw-mt-1"
-					aria-label="Loan progress"
-					@click.native="clickReadMore('Progress', $event)"
-				>
-					<kv-loan-progress-group
-						id="loanProgress"
-						:money-left="`${unreservedAmount}`"
-						:amount-goal="`${loanAmount}`"
-						:progress-percent="fundraisingPercent"
-						class="tw-text-secondary"
-					/>
-				</component>
-			</div>
-
-			<!-- Loan Tag -->
-			<kv-loading-placeholder
-				v-if="isLoading"
-				class="tw-rounded tw-mx-auto tw-mt-2"
-				:style="{ width: '9rem', height: '1rem' }"
-			/>
-
-			<div
-				v-else-if="isFunded"
-				class="tw-bg-eco-green-1 tw-text-action tw-text-center tw-py-1.5"
-				style="font-weight: bold; font-size: 13px; border-radius: 8px;"
-			>
-				🎉 Fully funded!
-			</div>
-
-			<kv-loan-tag
-				v-else
-				:loan="loan"
-				:use-expanded-styles="true"
-				style="font-size: 15px;"
-				class="tw-text-center tw-pt-2"
-			/>
-		</div>
-	</div>
-</template>
-
-<script>
-import numeral from 'numeral';
-import { loanCardComputedProperties, loanCardMethods } from '../utils/loanCard';
-import KvLoanBookmark from './KvLoanBookmark.vue';
-import KvLoanUse from './KvLoanUse.vue';
-import KvBorrowerImage from './KvBorrowerImage.vue';
-import KvLoanProgressGroup from './KvLoanProgressGroup.vue';
-import KvLoanCallouts from './KvLoanCallouts.vue';
-import KvLoanTag from './KvLoanTag.vue';
-import KvMaterialIcon from './KvMaterialIcon.vue';
-import KvLoadingPlaceholder from './KvLoadingPlaceholder.vue';
-import KvFlag from './KvFlag.vue';
-
-export default {
-	name: 'KvIntroductionLoanCard',
-	components: {
-		KvBorrowerImage,
-		KvLoadingPlaceholder,
-		KvLoanUse,
-		KvLoanProgressGroup,
-		KvMaterialIcon,
-		KvLoanTag,
-		KvLoanCallouts,
-		KvFlag,
-		KvLoanBookmark,
-	},
-	props: {
-		loanId: {
-			type: Number,
-			default: undefined,
-		},
-		loan: {
-			type: Object,
-			default: null,
-		},
-		customLoanDetails: {
-			type: Boolean,
-			default: false,
-		},
-		categoryPageName: {
-			type: String,
-			default: '',
-		},
-		customCallouts: {
-			type: Array,
-			default: () => ([]),
-		},
-		kvTrackFunction: {
-			type: Function,
-			required: true,
-		},
-		photoPath: {
-			type: String,
-			required: true,
-		},
-		errorMsg: {
-			type: String,
-			default: '',
-		},
-		externalLinks: {
-			type: Boolean,
-			default: false,
-		},
-		route: {
-			type: Object,
-			default: undefined,
-		},
-		useFullWidth: {
-			type: Boolean,
-			default: false,
-		},
-		isVisitor: {
-			type: Boolean,
-			default: true,
-		},
-		isBookmarked: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	setup(props, { emit }) {
-		const {
-			allDataLoaded,
-			borrowerName,
-			city,
-			countryName,
-			countryCode,
-			distributionModel,
-			formattedLocation,
-			fundraisingPercent,
-			hasProgressData,
-			imageHash,
-			isLoading,
-			loanAmount,
-			loanBorrowerCount,
-			loanCallouts,
-			loanStatus,
-			loanUse,
-			mdiMapMarker,
-			readMorePath,
-			state,
-			tag,
-			unreservedAmount,
-		} = loanCardComputedProperties(props, true);
-
-		const {
-			clickReadMore,
-		} = loanCardMethods(props, emit);
-
-		return {
-			allDataLoaded,
-			borrowerName,
-			city,
-			countryName,
-			countryCode,
-			distributionModel,
-			formattedLocation,
-			fundraisingPercent,
-			hasProgressData,
-			imageHash,
-			isLoading,
-			loanAmount,
-			loanBorrowerCount,
-			loanCallouts,
-			loanStatus,
-			loanUse,
-			mdiMapMarker,
-			readMorePath,
-			state,
-			tag,
-			unreservedAmount,
-			clickReadMore,
-		};
-	},
-	computed: {
-		cardWidth() {
-			return this.useFullWidth ? '100%' : '20.5rem';
-		},
-		imageAspectRatio() {
-			return 5 / 8;
-		},
-		imageDefaultWidth() {
-			return 480;
-		},
-		imageSizes() {
-			return [
-				{ width: this.imageDefaultWidth, viewSize: 375 },
-			];
-		},
-		lendersNumber() {
-			return this.loan?.lenders?.totalCount ?? 0;
-		},
-		amountLent() {
-			const amount = this.loan?.loanFundraisingInfo?.fundedAmount ?? 0;
-			return numeral(parseFloat(amount)).format('$0,0');
-		},
-		isFunded() {
-			return this.loan?.status === 'funded' || parseFloat(this.unreservedAmount) === 0;
-		},
-	},
-};
-</script>
-
-<style lang="postcss" scoped>
-.loan-callouts :deep(span) {
-	@apply !tw-bg-transparent tw-text-action;
-}
-.loan-card-use:hover,
-.loan-card-use:focus {
-	@apply tw-text-primary;
-}
-.loan-card-active-hover:hover .loan-card-use, .loan-card-active-hover:hover .loan-card-name {
-	@apply tw-underline;
-}
-.loan-card-progress,
-.loan-card-progress:hover,
-.loan-card-progress:focus {
-	@apply tw-no-underline;
-}
-.loan-card-name {
-	@apply tw-pt-1 tw-px-3 tw-text-ellipsis tw-overflow-hidden tw-line-clamp-1 tw-cursor-pointer;
-}
-.loan-bookmark :deep(button) {
-	@apply !tw-rounded-t-none;
-}
-</style>

package/dist/components/KvLendAmountButton.vue

@@ -1,65 +0,0 @@
-<template>
-	<kv-button @click="addToBasket">
-		{{ buttonText }}
-	</kv-button>
-</template>
-
-<script>
-import KvButton from './KvButton.vue';
-
-export default {
-	name: 'KvLendAmountButton',
-	components: {
-		KvButton,
-	},
-	props: {
-		loanId: {
-			type: Number,
-			default: null,
-		},
-		showNow: {
-			type: Boolean,
-			default: false,
-		},
-		amountLeft: {
-			type: [Number, String],
-			default: 20,
-		},
-		completeLoan: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {
-		amountValue() {
-			return parseFloat(this.amountLeft).toFixed();
-		},
-		buttonText() {
-			let str = '';
-
-			if (this.completeLoan) {
-				str = `Complete loan for $${this.amountValue}`;
-			} else {
-				str = `Lend $${this.amountValue}`;
-				if (this.showNow) {
-					str += ' now';
-				}
-			}
-
-			return str;
-		},
-	},
-	methods: {
-		addToBasket(event) {
-			this.$kvTrackEvent(
-				'Lending',
-				'Add to basket (Partial Share)',
-				'lend-button-click',
-				this.loanId,
-				this.amountLeft,
-			);
-			this.$emit('add-to-basket', event);
-		},
-	},
-};
-</script>