@kiva/kv-components 3.88.1 → 3.89.0

package/CHANGELOG.md

@@ -3,6 +3,31 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.89.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.88.1...@kiva/kv-components@3.89.0) (2024-07-23)
+
+
+### Bug Fixes
+
+* flag-icons import ([0b58418](https://github.com/kiva/kv-ui-elements/commit/0b58418bf5aeb58cb8eefc265c228092e6e761e4))
+* indent, use kvFlag and some refactor ([4fbc11a](https://github.com/kiva/kv-ui-elements/commit/4fbc11a03fa2970e7d8c3cc340aa144b9da35c24))
+* line-clamp in loan use ([f4cf963](https://github.com/kiva/kv-ui-elements/commit/f4cf963a567adc6ba23349cbe0da1bc2d15f24d1))
+* loan name clickable ([18f63ca](https://github.com/kiva/kv-ui-elements/commit/18f63ca60d08f92e034cae73e3eb326b2a61f735))
+* loan use template ([4efe849](https://github.com/kiva/kv-ui-elements/commit/4efe8493ec1dce8a3edb73d17e47c1fb8e308be2))
+* remove class props for deep ([c6923dc](https://github.com/kiva/kv-ui-elements/commit/c6923dc3ff576be80efc69f72a9cf6d35974aef7))
+* remove kvflag from loan card ([1e2bba8](https://github.com/kiva/kv-ui-elements/commit/1e2bba8c726e7702aa52efb765651a138feb2220))
+
+
+### Features
+
+* introduction card component and story ([7115800](https://github.com/kiva/kv-ui-elements/commit/71158004b0b9a18e9bf1ba8375c213c1c3ca251f))
+* kvflag component and new loan card for homepage ([8cf61bb](https://github.com/kiva/kv-ui-elements/commit/8cf61bb62820c6f9ce280d0f864f5b58d5279694))
+* toggle flag border ([2a782a1](https://github.com/kiva/kv-ui-elements/commit/2a782a1c9bec4ca9d0d3f60a7e9a6d44a310956c))
+* using flag emoticons ([159497b](https://github.com/kiva/kv-ui-elements/commit/159497b08bb1efb5989544df068624cca3c6929b))
+
+
+
+
+
 ## [3.88.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.88.0...@kiva/kv-components@3.88.1) (2024-07-22)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.88.1",
+  "version": "3.89.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -66,6 +66,7 @@
     "change-case": "^4.1.2",
     "date-fns": "^2.30.0",
     "embla-carousel": "^4.5.3",
+    "flag-icons": "^7.2.3",
     "focus-trap": "^6.7.2",
     "moment": "^2.29.4",
     "nanoid": "^3.1.23",
@@ -81,5 +82,5 @@
       "optional": true
     }
   },
-  "gitHead": "76a3892223c35267dfbe3a9f25a9b78e62a7b1f0"
+  "gitHead": "042c90f037f0b23407c5daacfcc8f7668bc17c2d"
 }

package/utils/loanCard.js

@@ -28,6 +28,7 @@ export function loanCardComputedProperties(props) {
 	const isLoading = computed(() => !loanId.value || !loan.value);
 	const borrowerName = computed(() => loan.value?.name || '');
 	const countryName = computed(() => loan.value?.geocode?.country?.name || '');
+	const countryCode = computed(() => loan.value?.geocode?.country?.isoCode || '');
 	const city = computed(() => loan.value?.geocode?.city || '');
 	const state = computed(() => loan.value?.geocode?.state || '');
 	const distributionModel = computed(() => loan.value?.distributionModel || '');
@@ -161,6 +162,7 @@ export function loanCardComputedProperties(props) {
 		isLoading,
 		borrowerName,
 		countryName,
+		countryCode,
 		city,
 		state,
 		distributionModel,

package/vue/KvFlag.vue

@@ -0,0 +1,120 @@
+<template>
+	<div
+		v-if="country"
+		:class="`kv-flag kv-flag--${aspectRatio}`"
+		:style="{ maxWidth: spriteWidth, minWidth: spriteWidth }"
+	>
+		<div
+			class="
+				kv-flag__wrapper
+				kv-flag-svg
+				tw-bg-gray-100
+				tw-relative
+				tw-overflow-hidden
+				tw-h-0
+				tw-w-full
+				tw-border
+				tw-border-gray-600
+				!tw-bg-cover
+				fib
+			"
+			:class="classes"
+		>
+			<span class="tw-sr-only">{{ countryName }}</span>
+		</div>
+		<span
+			v-if="showName"
+			class="tw-text-h4 tw-my-2"
+		>{{ getNameByCode(country) }}</span>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'KvFlag',
+	props: {
+		/**
+		 * 2 letter ISO country code of the flag to show
+		* */
+		country: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Aspect Ratio of the flag image
+		 * `4x3, 1x1`
+		* */
+		aspectRatio: {
+			type: String,
+			default: '4x3',
+		},
+		/**
+		 * Show the name of the country next to the flag
+		 */
+		showName: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Override the width of the flag
+		 */
+		widthOverride: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Hide the border around the flag
+		 */
+		hideBorder: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	async setup() {
+		const countryList = await import('../../../node_modules/flag-icons/country.json');
+
+		return {
+			countryList,
+		};
+	},
+	computed: {
+		spriteWidth() {
+			if (this.widthOverride) {
+				return this.widthOverride;
+			}
+			return '100%';
+		},
+		countryName() {
+			return `Flag of ${this.getNameByCode(this.country)}`;
+		},
+		classes() {
+			return {
+				[`fi-${this.country.toLowerCase()}`]: true,
+				'tw-border-0': this.hideBorder,
+			};
+		},
+	},
+	methods: {
+		getNameByCode(code) {
+			const uppercaseCode = code?.toLowerCase() ?? '';
+			return this.countryList?.default?.find((country) => country.code === uppercaseCode)?.name ?? '';
+		},
+	},
+};
+</script>
+
+<style lang="postcss" scoped>
+@import "../../../node_modules/flag-icons/css/flag-icons.min.css";
+
+.kv-flag__wrapper {
+	line-height: 0;
+}
+
+.kv-flag--4x3 .kv-flag__wrapper.kv-flag-svg {
+	padding-bottom: 71%;
+}
+
+.kv-flag--1x1 .kv-flag__wrapper.kv-flag-svg {
+	padding-bottom: 96%;
+}
+</style>

package/vue/KvIntroductionLoanCard.vue

@@ -0,0 +1,418 @@
+<template>
+	<div
+		class="card-container"
+		:class="{ 'tw-pointer-events-none' : isLoading }"
+		style="box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);"
+		:style="{ minWidth: '230px', maxWidth: '20.5rem' }"
+	>
+		<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
+					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
+								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-mr-0.5"
+									:country="countryCode"
+									width-override="0.725rem"
+									hide-border
+								/>
+								{{ formattedLocation }}
+							</p>
+						</div>
+					</component>
+				</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' }"
+				/>
+
+				<h2
+					class="loan-card-name"
+					:class="{'tw-text-center': borrowerName.length < 20}"
+					@click="clickReadMore('Name', $event)"
+				>
+					{{ borrowerName }}
+				</h2>
+
+				<!-- 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.75rem', '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.75rem', '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.75rem', '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-1 tw-px-1"
+						: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-1 tw-grow"
+		>
+			<!-- 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 Match -->
+			<kv-loading-placeholder
+				v-if="isLoading"
+				class="tw-rounded tw-mx-auto tw-mt-1"
+				:style="{ width: '9rem', height: '1rem' }"
+			/>
+
+			<div class="tw-pb-2.5">
+				<kv-loan-tag
+					v-if="matchingText"
+					:loan="loan"
+					variation="matched-loan"
+					class="tw-text-center !tw-text-brand"
+				/>
+			</div>
+		</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 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,
+	},
+	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,
+		},
+	},
+	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);
+
+		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: {
+		imageAspectRatio() {
+			return 178 / 328;
+		},
+		imageDefaultWidth() {
+			return 336;
+		},
+		imageSizes() {
+			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');
+		},
+		matchingText() {
+			return this.loan?.matchingText ?? '';
+		},
+	},
+};
+</script>
+
+<style lang="postcss" scoped>
+.card-container {
+	@apply tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-1;
+	height: 415px;
+}
+@screen md {
+	.card-container {
+		height: 423px;
+	}
+}
+.loan-callouts >>> span {
+	@apply !tw-bg-transparent tw-text-brand;
+}
+.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;
+}
+.borrower-image >>> img {
+	@apply tw-object-cover;
+}
+.loan-card-name {
+	@apply tw-pt-1 tw-px-3 tw-text-ellipsis tw-overflow-hidden tw-line-clamp-1 tw-cursor-pointer;
+}
+</style>

package/vue/KvLoanProgressGroup.vue

@@ -1,11 +1,19 @@
 <template>
 	<figure>
-		<h4
-			class="tw-lowercase tw-mb-0.5"
-			:class="{ 'progress-group-amount-low': amountLow }"
-		>
-			{{ fundingText }}
-		</h4>
+		<div :class="{'tw-flex tw-justify-between': amountGoal}">
+			<h4
+				class="tw-lowercase tw-mb-0.5"
+				:class="{ 'progress-group-amount-low': amountLow}"
+			>
+				{{ fundingText }}
+			</h4>
+			<h4
+				v-if="amountGoal"
+				class="tw-lowercase tw-mb-0.5"
+			>
+				{{ goalText }}
+			</h4>
+		</div>
 		<kv-progress-bar
 			aria-label="Percent the loan has funded"
 			:value="progressPercent * 100"
@@ -31,6 +39,10 @@ export default {
 			type: Number,
 			default: 0,
 		},
+		amountGoal: {
+			type: String,
+			default: '',
+		},
 	},
 	computed: {
 		numeralLeft() {
@@ -45,6 +57,14 @@ export default {
 			const exclamationMark = this.amountLow ? '!' : '';
 			return `${formattedMoneyLeft} to go${exclamationMark}`;
 		},
+		numeralGoal() {
+			return numeral(this.amountGoal);
+		},
+		goalText() {
+			if (!this.numeralGoal.value()) return '';
+			const formattedGoal = this.numeralGoal.format('$0,0[.]00');
+			return `${formattedGoal} goal`;
+		},
 	},
 };
 </script>

package/vue/KvLoanUse.vue

@@ -46,6 +46,10 @@ export default {
 			type: String,
 			default: '',
 		},
+		hideLoanAmount: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		helpLanguage() {
@@ -67,6 +71,12 @@ export default {
 				return 'For the borrower\'s privacy, this loan has been made anonymous.';
 			}
 
+			if (this.hideLoanAmount) {
+				return `Help <span class="data-hj-suppress">${this.name}</span> `
+					+ `${this.use.charAt(0).toLowerCase() + this.use.slice(1)} `
+				+ `${this.whySpecialSentence}`;
+			}
+
 			const isGroup = this.borrowerCount > 1;
 
 			return `${numeral(this.loanAmount).format('$0,0')} `

package/vue/stories/KvFlag.stories.js

@@ -0,0 +1,36 @@
+import KvFlag from '../KvFlag.vue';
+
+export default {
+	title: 'Components/KvFlag',
+	component: KvFlag,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvFlag },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<div style="width: 100px; height: 100px;">
+				<KvFlag v-bind="args" />
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+// SVG based on the country code
+export const InlineSvg = story({ country: 'TO' });
+// SVG based on the country code with custom width
+export const InlineSvgCustomWidth = story({ country: 'DE', widthOverride: '40px' });
+
+// SVG Sqaure based on the country code
+export const SquareInlineSvg = story({ country: 'ME', aspectRatio: '1x1', showName: true });
+// SVG Sqaure based on the country code with custom width
+export const SquareInlineSvgCustomWidth = story({
+	country: 'SA',
+	inlineSvg: true,
+	widthOverride: '40px',
+	aspectRatio: '1x1',
+});

package/vue/stories/KvIntroductionLoanCard.stories.js

@@ -0,0 +1,132 @@
+import KvIntroductionLoanCard from '../KvIntroductionLoanCard.vue';
+
+export default {
+	title: 'KvIntroductionLoanCard',
+	component: KvIntroductionLoanCard,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvIntroductionLoanCard },
+		template: `
+			<div style="width: 600px;">
+				<kv-introduction-loan-card
+					:loanId="loanId"
+					:loan="loan"
+					:category-page-name="categoryPageName"
+					:custom-callouts="customCallouts"
+					:kv-track-function="kvTrackFunction"
+					:photo-path="photoPath"
+					@show-loan-details="showLoanDetails"
+				/>
+			</div>
+		`,
+		methods: {
+			showLoanDetails() {
+				console.log('show-loan-details');
+			},
+		},
+	});
+	template.args = args;
+	return template;
+};
+
+const nextWeek = new Date();
+nextWeek.setDate(new Date().getDate() + 7);
+
+const loan = {
+	id: 1,
+	name: 'Alan',
+	geocode: {
+		city: 'Lyantonde',
+		state: 'Central Region',
+		country: {
+			isoCode: 'UG',
+			name: 'Uganda',
+			region: 'Africa',
+			__typename: 'Country',
+		},
+		__typename: 'Geocode',
+	},
+	image: { hash: '9673d0722a7675b9b8d11f90849d9b44' },
+	fundraisingPercent: 0.5,
+	unreservedAmount: '500.00',
+	use: 'to purchase heifers to increase headcount of cattle and sales of organic milk. The profits from the loan will be used wisely.',
+	status: 'fundraising',
+	loanAmount: '1000.00',
+	borrowerCount: 1,
+	activity: {
+		id: 61,
+		name: 'Dairy',
+		__typename: 'Activity',
+	},
+	sector: {
+		id: 1,
+		name: 'Agriculture',
+		__typename: 'Sector',
+	},
+	plannedExpirationDate: nextWeek.toISOString(),
+	tags: [
+		'user_favorite',
+		'#Woman-Owned Business',
+		'#Animals',
+		'#Repeat Borrower',
+		'#Supporting Family',
+		'#Eco-friendly',
+		'#Single parent',
+	],
+};
+
+const kvTrackFunction = () => { };
+
+const photoPath = 'https://www-kiva-org.freetls.fastly.net/img/';
+
+export const Default = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		loanFundraisingInfo: {
+			fundedAmount: '200.00',
+			isExpiringSoon: false,
+			reservedAmount: '0.00',
+		},
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const Loading = story({
+	loanId: loan.id,
+	loan: undefined,
+	kvTrackFunction,
+	photoPath,
+});
+
+export const PartialLoading = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		unreservedAmount: undefined,
+		fundraisingPercent: undefined,
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const Matched = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		matchingText: 'Ebay',
+		matchRatio: 1,
+		loanFundraisingInfo: {
+			fundedAmount: '200.00',
+			isExpiringSoon: false,
+			reservedAmount: '0.00',
+		},
+	},
+	kvTrackFunction,
+	photoPath,
+	loanCallouts: [{ label: 'callout 1' }, { label: 'callout 2' }, { label: 'callout 3' }],
+});