@kiva/kv-components 3.106.0 → 3.107.1

package/dist/components/KvImpactDashboardHeader.vue

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

@@ -0,0 +1,55 @@
+<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 >>> img, .activity-avatar >>> div {
+    @apply tw-w-4 tw-h-4;
+}
+</style>

package/dist/components/KvInlineActivityFeed.vue

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

@@ -0,0 +1,446 @@
+<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;"
+							>
+								<kv-flag
+									class="tw-ml-0.5 tw-mr-1"
+									:country="countryCode"
+									width-override="16px"
+									hide-border
+								/>
+								{{ 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"
+					@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 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"
+					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 >>> 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: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 >>> button {
+	@apply !tw-rounded-t-none;
+}
+</style>

package/dist/components/KvLendAmountButton.vue

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