@kiva/kv-components 3.106.0 → 3.107.1

package/dist/components/stories/KvInlineActivityCard.stories.js

@@ -0,0 +1,69 @@
+import KvInlineActivityCard from '../KvInlineActivityCard.vue';
+
+export default {
+	title: 'KvInlineActivityCard',
+	component: KvInlineActivityCard,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvInlineActivityCard },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<div style="max-width: 200px;">	
+				<KvInlineActivityCard v-bind="args" />
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({
+	activity: {
+		lender: {
+			image: {
+				url: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+			},
+			name: 'Roger',
+		},
+		amountLent: '125.00',
+	},
+});
+
+export const NoImage = story({
+	activity: {
+		lender: {
+			image: {
+				url: '',
+			},
+			name: 'Roger',
+		},
+		amountLent: '75.00',
+	},
+});
+
+export const Anonymous = story({
+	activity: {
+		lender: {
+			image: {
+				url: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+			},
+			name: 'Anonymous',
+		},
+		amountLent: '5.00',
+	},
+});
+
+export const DefaultProfile = story({
+	activity: {
+		lender: {
+			image: {
+				url: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+			},
+			name: 'Default Profile',
+		},
+		amountLent: '25.00',
+	},
+});

package/dist/components/stories/KvInlineActivityFeed.stories.js

@@ -0,0 +1,76 @@
+import KvInlineActivityFeed from '../KvInlineActivityFeed.vue';
+
+const activities = [
+	{
+		lender: {
+			id: 723174,
+			name: 'TonyB',
+			image: {
+				url: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg',
+			},
+		},
+		amountLent: '25.00',
+	},
+	{
+		lender: {
+			id: 723174,
+			name: 'Roger',
+			image: {
+				url: '',
+			},
+		},
+		amountLent: '25.00',
+	},
+	{
+		lender: {
+			id: 723174,
+			name: 'Anonymous',
+			image: {
+				url: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg',
+			},
+		},
+		amountLent: '25.00',
+	},
+	{
+		lender: {
+			id: 723174,
+			name: 'Default user',
+			image: {
+				url: 'https://www-0.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+			},
+		},
+		amountLent: '25.00',
+	},
+	{
+		lender: {
+			id: 723174,
+			name: 'Jessica',
+			image: {
+				url: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg',
+			},
+		},
+		amountLent: '25.00',
+	},
+];
+
+export default {
+	title: 'KvInlineActivityFeed',
+	component: KvInlineActivityFeed,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvInlineActivityFeed },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<div style="max-width: 1200px;">	
+				<KvInlineActivityFeed v-bind="args" />
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({ activities });

package/dist/components/stories/KvIntroductionLoanCard.stories.js

@@ -0,0 +1,208 @@
+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"
+					:is-visitor="isVisitor"
+					@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,
+	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,
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const LseLoan = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		partnerName: 'N/A, direct to Novulis',
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const AlmostFunded = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		loanAmount: '100.00',
+		unreservedAmount: '10.00',
+		fundraisingPercent: 0.9,
+		loanFundraisingInfo: {
+			fundedAmount: '90.00',
+			reservedAmount: '0.00',
+		},
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+const tomorrow = new Date();
+tomorrow.setDate(new Date().getDate() + 1);
+
+export const ExpiringSoon = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		plannedExpirationDate: tomorrow.toISOString(),
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const Funded = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		unreservedAmount: '0.00',
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const LongName = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		name: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const USLoan = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		geocode: {
+			city: 'Kittanning',
+			state: 'PA',
+			country: {
+				isoCode: 'US',
+				name: 'United States',
+				region: 'North America',
+				__typename: 'Country',
+			},
+			__typename: 'Geocode',
+		},
+		distributionModel: 'direct',
+	},
+	kvTrackFunction,
+	photoPath,
+});
+
+export const Bookmark = story({
+	loanId: loan.id,
+	loan,
+	kvTrackFunction,
+	photoPath,
+	isVisitor: false,
+});

package/dist/components/stories/KvLendAmountButton.stories.js

@@ -0,0 +1,31 @@
+import KvLendAmountButton from '../KvLendAmountButton.vue';
+
+export default {
+	title: 'KvLendAmountButton',
+	component: KvLendAmountButton,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvLendAmountButton },
+		template: `
+			<kv-lend-amount-button
+				:loan-id="loanId"
+				:show-now="showNow"
+				:amount-left="amountLeft"
+				:complete-loan="completeLoan"
+			/>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story();
+
+export const ShowNow = story({ showNow: true });
+
+export const AmountLeft = story({ amountLeft: 5 });
+
+export const CompleteLoan = story({ completeLoan: true });

package/dist/components/stories/KvLendCta.stories.js

@@ -0,0 +1,177 @@
+import KvLendCta from '../KvLendCta.vue';
+
+export default {
+	title: 'KvLendCta',
+	component: KvLendCta,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvLendCta },
+		template: `
+			<div style="width: 300px;">
+				<kv-lend-cta
+					: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"
+					:enable-huge-amount="enableHugeAmount"
+					:is-visitor="isVisitor"
+					:secondary-button-handler="secondaryButtonHandler"
+					:external-links="externalLinks"
+				/>
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+const kvTrackFunction = () => { };
+
+const secondaryButtonHandler = () => { console.log('secondary button handler'); };
+
+export const Loading = story({ isLoading: true, kvTrackFunction });
+
+export const Adding = story({ isLoading: false, isAdding: true, kvTrackFunction });
+
+export const Basketed = story({
+	isLoading: false,
+	loan: { id: 1 },
+	basketItems: [
+		{
+			__typename: 'LoanReservation',
+			id: 1,
+		},
+	],
+	kvTrackFunction,
+});
+
+export const BasketedWithSecondaryAction = story({
+	isLoading: false,
+	loan: { id: 1 },
+	basketItems: [
+		{
+			__typename: 'LoanReservation',
+			id: 1,
+		},
+	],
+	externalLinks: true,
+	kvTrackFunction,
+	secondaryButtonHandler,
+});
+
+export const Funded = story({
+	isLoading: false,
+	loan: { status: 'funded' },
+	kvTrackFunction,
+});
+
+export const NonActionable = story({
+	isLoading: false,
+	loan: { status: 'refunded' },
+	kvTrackFunction,
+});
+
+export const Dropdown = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+	},
+	kvTrackFunction,
+});
+
+export const HugeAmount = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '12850.00',
+	},
+	kvTrackFunction,
+	enableHugeAmount: true,
+	isVisitor: false,
+});
+
+export const HugeAmountUnder1000 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '850.00',
+	},
+	kvTrackFunction,
+	enableHugeAmount: true,
+	isVisitor: false,
+});
+
+export const FiveDollar = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+	},
+	enableFiveDollarsNotes: true,
+	kvTrackFunction,
+});
+
+export const FiveDollarsSelected = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+	},
+	enableFiveDollarsNotes: true,
+	fiveDollarsSelected: true,
+	kvTrackFunction,
+});
+
+export const LessThan25 = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '20.00',
+	},
+	kvTrackFunction,
+});
+
+export const Non25Increments = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '30.00',
+	},
+	kvTrackFunction,
+});
+
+export const LendAgain = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+		userProperties: { lentTo: true },
+	},
+	kvTrackFunction,
+});
+
+export const ViewLoan = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+	},
+	kvTrackFunction,
+	showViewLoan: true,
+});
+
+export const ViewLoanFunded = story({
+	isLoading: false,
+	loan: { status: 'funded' },
+	kvTrackFunction,
+	showViewLoan: true,
+});