@kiva/kv-components 3.16.0 → 3.17.0

package/vue/stories/KvBorrowerImage.stories.js

@@ -0,0 +1,62 @@
+import KvBorrowerImage from '../KvBorrowerImage.vue';
+
+export default {
+	title: 'KvBorrowerImage',
+	component: KvBorrowerImage,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvBorrowerImage },
+		template: `
+			<div style="width: 336px;">
+				<kv-borrower-image
+					:alt="alt"
+					:aspect-ratio="aspectRatio"
+					:default-image="defaultImage"
+					:hash="hash"
+					:images="images"
+					:photo-path="photoPath"
+				/>
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+const props = {
+	alt: 'Photo of Borrower',
+	aspectRatio: 0.75,
+	defaultImage: { width: 336 },
+	hash: '9673d0722a7675b9b8d11f90849d9b44',
+	images: [
+		{
+			width: 336,
+			viewSize: 1024,
+		},
+		{
+			width: 336,
+			viewSize: 768,
+		},
+		{
+			width: 416,
+			viewSize: 480,
+		},
+		{
+			width: 374,
+			viewSize: 414,
+		},
+		{
+			width: 335,
+			viewSize: 375,
+		},
+		{
+			width: 300,
+		},
+	],
+	photoPath: 'https://www-kiva-org.freetls.fastly.net/img/',
+};
+
+export const Default = story(props);

package/vue/stories/KvClassicLoanCard.stories.js

@@ -0,0 +1,206 @@
+import KvClassicLoanCard from '../KvClassicLoanCard.vue';
+
+export default {
+	title: 'KvClassicLoanCard',
+	component: KvClassicLoanCard,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvClassicLoanCard },
+		template: `
+			<div style="width: 600px;">
+				<kv-classic-loan-card
+					:loanId="loanId"
+					:loan="loan"
+					:custom-loan-details="customLoanDetails"
+					:use-full-width="useFullWidth"
+					:show-tags="showTags"
+					:category-page-name="categoryPageName"
+					:enable-five-dollars-notes="enableFiveDollarsNotes"
+					:large-card="largeCard"
+					:is-adding="isAdding"
+					:is-visitor="isVisitor"
+					:basket-items="basketItems"
+					:is-bookmarked="isBookmarked"
+					:kv-track-function="kvTrackFunction"
+					:photo-path="photoPath"
+				/>
+			</div>
+		`,
+	});
+	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.',
+	status: 'fundraising',
+	loanAmount: '1000.00',
+	borrowerCount: 1,
+	activity: {
+		id: 61,
+		name: 'Dairy',
+		__typename: 'Activity',
+	},
+	sector: {
+		id: 1,
+		name: 'Agriculture',
+		__typename: 'Sector',
+	},
+	plannedExpirationDate: nextWeek.toISOString(),
+};
+
+const kvTrackFunction = () => { };
+
+const photoPath = 'https://www-kiva-org.freetls.fastly.net/img/';
+
+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 UseFullWidth = story({
+	loanId: loan.id,
+	loan,
+	kvTrackFunction,
+	photoPath,
+	useFullWidth: true,
+});
+
+export const ShowTags = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		loanFundraisingInfo: {
+			fundedAmount: '950.00',
+			isExpiringSoon: false,
+			reservedAmount: '0.00',
+		},
+	},
+	kvTrackFunction,
+	photoPath,
+	showTags: true,
+});
+
+export const Matched = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		matchingText: 'Matched by Ebay',
+		matchRatio: 1,
+		loanFundraisingInfo: {
+			fundedAmount: '200.00',
+			isExpiringSoon: false,
+			reservedAmount: '0.00',
+		},
+	},
+	kvTrackFunction,
+	photoPath,
+	showTags: true,
+});
+
+export const AllSharesReserved = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		unreservedAmount: '0.00',
+		fundraisingPercent: 1,
+	},
+	kvTrackFunction,
+	photoPath,
+}, false, { unreservedAmount: '0.00', fundraisingPercent: 1 });
+
+export const InBasket = story({
+	loanId: loan.id,
+	loan,
+	kvTrackFunction,
+	photoPath,
+	basketItems: [{ id: loan.id, __typename: 'LoanReservation' }],
+});
+
+export const LargeCardLoading = story({
+	loanId: loan.id,
+	loan: undefined,
+	kvTrackFunction,
+	photoPath,
+	largeCard: true,
+});
+
+export const LargeCard = story({
+	loanId: loan.id,
+	loan,
+	showTags: true,
+	largeCard: true,
+	kvTrackFunction,
+	photoPath,
+});
+
+export const LongCallouts = story({
+	loanId: loan.id,
+	loan: {
+		...loan,
+		activity: { id: 1, name: 'Longer activity name test that will be longer than 50% of the card' },
+	},
+	showTags: true,
+	kvTrackFunction,
+	photoPath,
+});
+
+export const Bookmarked = story({
+	loanId: loan.id,
+	loan,
+	isBookmarked: true,
+	isVisitor: false,
+	kvTrackFunction,
+	photoPath,
+});
+
+export const Adding = story({
+	loanId: loan.id,
+	loan,
+	isAdding: true,
+	kvTrackFunction,
+	photoPath,
+});
+
+export const FiveDollarNotes = story({
+	loanId: loan.id,
+	loan,
+	enableFiveDollarsNotes: true,
+	kvTrackFunction,
+	photoPath,
+});

package/vue/stories/KvLendAmountButton.stories.js

@@ -0,0 +1,34 @@
+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"
+				:is-adding="isAdding"
+			/>
+		`,
+	});
+	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 });
+
+export const IsAdding = story({ isAdding: true });

package/vue/stories/KvLendCta.stories.js

@@ -0,0 +1,104 @@
+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"
+					:kv-track-function="kvTrackFunction"
+				/>
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+const kvTrackFunction = () => { };
+
+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 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 FiveDollar = story({
+	isLoading: false,
+	loan: {
+		id: 1,
+		unreservedAmount: '150.00',
+	},
+	enableFiveDollarsNotes: 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,
+});

package/vue/stories/KvLoanBookmark.stories.js

@@ -0,0 +1,22 @@
+import KvLoanBookmark from '../KvLoanBookmark.vue';
+
+export default {
+	title: 'KvLoanBookmark',
+	component: KvLoanBookmark,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvLoanBookmark },
+		template: `
+			<kv-loan-bookmark :is-bookmarked="isBookmarked" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Bookmarked = story({ isBookmarked: true });
+
+export const NotBookmarked = story();

package/vue/stories/KvLoanCallouts.stories.js

@@ -0,0 +1,22 @@
+import KvLoanCallouts from '../KvLoanCallouts.vue';
+
+export default {
+	title: 'KvLoanCallouts',
+	component: KvLoanCallouts,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvLoanCallouts },
+		template: `
+			<kv-loan-callouts
+				:callouts="callouts"
+			/>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({ callouts: ['callout 1', 'callout 2', 'callout 3'] });

package/vue/stories/KvLoanProgressGroup.stories.js

@@ -0,0 +1,29 @@
+import KvLoanProgressGroup from '../KvLoanProgressGroup.vue';
+
+export default {
+	title: 'KvLoanProgressGroup',
+	component: KvLoanProgressGroup,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvLoanProgressGroup },
+		template: `
+			<div style="width: 200px">
+				<kv-loan-progress-group
+					:money-left="moneyLeft"
+					:progress-percent="progressPercent"
+				/>
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story();
+
+export const LowAmount = story({ moneyLeft: 5, progressPercent: 0.9 });
+
+export const HighAmount = story({ moneyLeft: 150, progressPercent: 0.5 });

package/vue/stories/KvLoanTag.stories.js

@@ -0,0 +1,51 @@
+import KvLoanTag from '../KvLoanTag.vue';
+
+export default {
+	title: 'KvLoanTag',
+	component: KvLoanTag,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvLoanTag },
+		template: `
+			<kv-loan-tag
+				:loan="loan"
+				:kv-track-function="kvTrackFunction"
+			/>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+const tomorrow = new Date();
+tomorrow.setDate(tomorrow.getDate() + 1);
+
+const nextWeek = new Date();
+nextWeek.setDate(new Date().getDate() + 7);
+
+const kvTrackFunction = () => {};
+
+export const EndingSoon = story({ loan: { plannedExpirationDate: tomorrow.toISOString() }, kvTrackFunction });
+
+export const AlmostFunded = story({
+	loan: {
+		loanAmount: 199,
+		plannedExpirationDate: nextWeek.toISOString(),
+		loanFundraisingInfo: { fundedAmount: 50, reservedAmount: 50 },
+	},
+	kvTrackFunction,
+});
+
+export const Matched = story({
+	loan: {
+		matchingText: 'Ebay',
+		matchRatio: 1,
+		plannedExpirationDate: nextWeek.toISOString(),
+		loanAmount: 199,
+		loanFundraisingInfo: { fundedAmount: 0, reservedAmount: 0 },
+	},
+	kvTrackFunction,
+});

package/vue/stories/KvLoanUse.stories.js

@@ -0,0 +1,51 @@
+import KvLoanUse from '../KvLoanUse.vue';
+
+export default {
+	title: 'KvLoanUse',
+	component: KvLoanUse,
+};
+
+const story = (args) => {
+	const template = (_args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvLoanUse },
+		template: `
+			<kv-loan-use
+				:anonymization-level="anonymizationLevel"
+				:use="use"
+				:loan-amount="loanAmount"
+				:status="status"
+				:borrower-count="borrowerCount"
+				:name="name"
+				:distribution-model="distributionModel"
+			/>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Anonymous = story({ anonymizationLevel: 'full' });
+
+export const Partner = story({
+	use: 'buy supplies.',
+	loanAmount: '1000.00',
+	status: 'fundraising',
+	name: 'Bob Smith',
+	distributionModel: 'partner',
+});
+
+export const Direct = story({
+	use: 'buy supplies.',
+	loanAmount: '1000.00',
+	status: 'fundraising',
+	name: 'Bob Smith',
+});
+
+export const Group = story({
+	use: 'buy supplies.',
+	loanAmount: '1000.00',
+	status: 'fundraising',
+	name: 'Farm Organization',
+	borrowerCount: 2,
+});

package/vue/.storybook/main.cjs

@@ -1,33 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  stories: [
-    '../stories/Styleguide.stories.js', // show the base styleguide first
-    '../stories/**/*.stories.mdx',
-    '../stories/**/*.stories.@(js|jsx|ts|tsx)'
-  ],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-a11y',
-    '@storybook/addon-storysource',
-    'storybook-dark-mode',
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
-        },
-      },
-    },
-  ],
-  webpackFinal: async (config) => {
-    config.module.rules.push({
-      test: /\.mjs$/,
-      include: /node_modules/,
-      type: 'javascript/auto'
-    });
-    return config;
-  },
-  "framework": "@storybook/vue"
-}