@kiva/kv-components 3.94.0 → 3.95.1

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.95.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.95.0...@kiva/kv-components@3.95.1) (2024-08-28)
+
+
+### Bug Fixes
+
+* props usage removed reactivity ([6795042](https://github.com/kiva/kv-ui-elements/commit/6795042bfcc11e133781e2591eaee4035cfd7d63))
+
+
+
+
+
+# [3.95.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.94.0...@kiva/kv-components@3.95.0) (2024-08-28)
+
+
+### Bug Fixes
+
+* add story for long borrower name ([da58fc9](https://github.com/kiva/kv-ui-elements/commit/da58fc9a078626577370eea41a0d9336edc2c74e))
+* allow new card to be pull width ([59488dc](https://github.com/kiva/kv-ui-elements/commit/59488dc7e9550d8df38f73fe0b859844e65c6576))
+* fully funded card ([17a9156](https://github.com/kiva/kv-ui-elements/commit/17a9156fc8003f2a19feb030cfe1e1ba369222dc))
+* general new loan card styling tweaks ([dac3bb1](https://github.com/kiva/kv-ui-elements/commit/dac3bb14d62c97b04e7979e0c512edc4c90634c8))
+* hide country for US loans ([5353e0f](https://github.com/kiva/kv-ui-elements/commit/5353e0f9b1678d013becf7775bb4c408cf72887a))
+* one more small styling change ([042da40](https://github.com/kiva/kv-ui-elements/commit/042da402e089805260f4e465c8d237baf6bfe642))
+
+
+### Features
+
+* add emojis and colors to loan tags ([8d002c2](https://github.com/kiva/kv-ui-elements/commit/8d002c25a243c305fae5113305a604c2f34746e4))
+
+
+
+
+
 # [3.94.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.93.0...@kiva/kv-components@3.94.0) (2024-08-23)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.94.0",
+  "version": "3.95.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -84,5 +84,5 @@
       "optional": true
     }
   },
-  "gitHead": "4d6b8d16d7fe0e5b3904b87a82484e28325cd496"
+  "gitHead": "731d35dd8d4d09b1688ce93fad36c6fe993b88e6"
 }

package/utils/loanCard.js

@@ -13,7 +13,7 @@ const REFUGEE_KEY = 'REFUGEES/DISPLACED';
 
 const findCalloutData = (tags, tagName) => tags?.find((t) => t.name.replace('#', '').toUpperCase() === tagName.toUpperCase()) ?? {}; // eslint-disable-line max-len
 
-export function loanCardComputedProperties(props) {
+export function loanCardComputedProperties(props, hideUnitedStatesText = false) {
 	const {
 		externalLinks,
 		customLoanDetails,
@@ -49,7 +49,9 @@ export function loanCardComputedProperties(props) {
 
 	const formattedLocation = computed(() => {
 		if (distributionModel.value === 'direct') {
-			return `${city.value}, ${state.value}, ${countryName.value}`;
+			const countryText = hideUnitedStatesText && countryName.value.toLowerCase() === 'united states'
+				? '' : `, ${countryName.value}`;
+			return `${city.value}, ${state.value}${countryText}`;
 		}
 		if (countryName.value === 'Puerto Rico') {
 			return `${city.value}, PR`;

package/vue/KvIntroductionLoanCard.vue

@@ -1,10 +1,10 @@
 <template>
 	<div
-		class="tw-flex tw-flex-col tw-bg-white tw-rounded tw-w-full tw-pb-1"
+		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: 0 4px 12px rgba(0, 0, 0, 0.08);"
-		:style="{ minWidth: '230px', maxWidth: '20.5rem' }"
+		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">
@@ -63,9 +63,9 @@
 								style="padding: 2px 6px;"
 							>
 								<kv-flag
-									class="tw-mr-0.5"
+									class="tw-ml-0.5 tw-mr-1"
 									:country="countryCode"
-									width-override="0.725rem"
+									width-override="16px"
 									hide-border
 								/>
 								{{ formattedLocation }}
@@ -82,13 +82,14 @@
 					:style="{ width: '60%', height: '1.75rem', 'border-radius': '500rem' }"
 				/>
 
-				<h2
+				<h3
 					class="loan-card-name"
-					:class="{'tw-text-center': borrowerName.length < 20}"
+					:class="{ 'tw-text-center': borrowerName.length < 20 }"
+					style="font-size: 28px;"
 					@click="clickReadMore('Name', $event)"
 				>
 					{{ borrowerName }}
-				</h2>
+				</h3>
 
 				<!-- Loan tag -->
 
@@ -99,17 +100,17 @@
 					<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' }"
+						: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.75rem', 'border-radius': '500rem' }"
+						: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.75rem', 'border-radius': '500rem' }"
+						:style="{ width: '20%', height: '1.65rem', 'border-radius': '500rem' }"
 					/>
 				</div>
 
@@ -139,7 +140,7 @@
 				>
 					<!-- Loan use  -->
 					<div
-						class="tw-pt-1 tw-px-1"
+						class="tw-pt-0.5 tw-px-2"
 						:class="{'tw-mb-1.5': !isLoading}"
 					>
 						<div
@@ -172,7 +173,7 @@
 			</div>
 		</div>
 
-		<div class="tw-px-1">
+		<div class="tw-px-2">
 			<!-- Fundraising -->
 			<div
 				v-if="!hasProgressData"
@@ -215,21 +216,28 @@
 				</component>
 			</div>
 
-			<!-- Loan Match -->
+			<!-- Loan Tag -->
 			<kv-loading-placeholder
 				v-if="isLoading"
-				class="tw-rounded tw-mx-auto tw-mt-1"
+				class="tw-rounded tw-mx-auto tw-mt-2"
 				: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
+				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>
@@ -300,6 +308,10 @@ export default {
 			type: Object,
 			default: undefined,
 		},
+		useFullWidth: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const {
@@ -324,7 +336,7 @@ export default {
 			state,
 			tag,
 			unreservedAmount,
-		} = loanCardComputedProperties(props);
+		} = loanCardComputedProperties(props, true);
 
 		const {
 			clickReadMore,
@@ -356,6 +368,9 @@ export default {
 		};
 	},
 	computed: {
+		cardWidth() {
+			return this.useFullWidth ? '100%' : '20.5rem';
+		},
 		imageAspectRatio() {
 			return 5 / 8;
 		},
@@ -374,8 +389,8 @@ export default {
 			const amount = this.loan?.loanFundraisingInfo?.fundedAmount ?? 0;
 			return numeral(parseFloat(amount)).format('$0,0');
 		},
-		matchingText() {
-			return this.loan?.matchingText ?? '';
+		isFunded() {
+			return this.loan?.status === 'funded' || parseFloat(this.unreservedAmount) === 0;
 		},
 	},
 };
@@ -383,7 +398,7 @@ export default {
 
 <style lang="postcss" scoped>
 .loan-callouts >>> span {
-	@apply !tw-bg-transparent tw-text-brand;
+	@apply !tw-bg-transparent tw-text-action;
 }
 .loan-card-use:hover,
 .loan-card-use:focus {

package/vue/KvLoanTag.vue

@@ -2,7 +2,7 @@
 	<div
 		v-if="!!variation"
 		class="tw-text-small tw-font-medium tw-pt-0.5 tw-line-clamp-1"
-		style="color: #CE4A00;"
+		:style="{ color: tagColor }"
 	>
 		{{ tagText }}
 		<kv-countdown-timer
@@ -29,6 +29,10 @@ export default {
 			type: Object,
 			required: true,
 		},
+		useExpandedStyles: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -59,11 +63,22 @@ export default {
 		},
 		tagText() {
 			switch (this.variation) {
-				case 'lse-loan': return 'High community impact';
-				case 'almost-funded': return 'Almost funded';
-				case 'matched-loan': return `${this.matchRatio + 1}x matching by ${this.loan?.matchingText}`;
-				default: return 'Ending soon: ';
+				case 'lse-loan': return `${this.useExpandedStyles ? '⚡ ' : ''}High community impact`;
+				case 'almost-funded': return `${this.useExpandedStyles ? '💸 ' : ''}Almost funded`;
+				// eslint-disable-next-line max-len
+				case 'matched-loan': return `${this.useExpandedStyles ? '🤝 ' : ''}${this.matchRatio + 1}x matching by ${this.loan?.matchingText}`;
+				default: return `${this.useExpandedStyles ? '⏰ ' : ''}Ending soon: `;
+			}
+		},
+		tagColor() {
+			if (this.useExpandedStyles) {
+				switch (this.variation) {
+					case 'almost-funded': return '#AF741C';
+					case 'ending-soon': return '#CE2626';
+					default: return '#2B7C5F';
+				}
 			}
+			return '#CE4A00';
 		},
 		matchRatio() {
 			return this.loan?.matchRatio;

package/vue/stories/KvClassicLoanCard.stories.js

@@ -457,3 +457,24 @@ export const ContributorsAndAmount = story({
 	photoPath,
 	showContributors: true,
 });
+
+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,
+});

package/vue/stories/KvIntroductionLoanCard.stories.js

@@ -84,14 +84,7 @@ 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',
-		},
-	},
+	loan,
 	kvTrackFunction,
 	photoPath,
 });
@@ -120,13 +113,87 @@ export const Matched = story({
 		...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: '200.00',
-			isExpiringSoon: false,
+			fundedAmount: '90.00',
 			reservedAmount: '0.00',
 		},
 	},
 	kvTrackFunction,
 	photoPath,
-	loanCallouts: [{ label: 'callout 1' }, { label: 'callout 2' }, { label: 'callout 3' }],
+});
+
+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,
 });