@kiva/kv-components 3.83.0 → 3.83.2

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.83.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.83.1...@kiva/kv-components@3.83.2) (2024-06-25)
+
+
+### Bug Fixes
+
+* max dimensions on kvContentfulImg ([#419](https://github.com/kiva/kv-ui-elements/issues/419)) ([4496979](https://github.com/kiva/kv-ui-elements/commit/4496979544fa7d9d941111bff234aae58aa5ca16))
+
+
+
+
+
+## [3.83.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.83.0...@kiva/kv-components@3.83.1) (2024-06-07)
+
+
+### Bug Fixes
+
+* event is firing twice ([#417](https://github.com/kiva/kv-ui-elements/issues/417)) ([3e30e40](https://github.com/kiva/kv-ui-elements/commit/3e30e4023c6d6af324fc99e805b0f10d36934c2e))
+
+
+
+
+
 # [3.83.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.82.1...@kiva/kv-components@3.83.0) (2024-06-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.83.0",
+  "version": "3.83.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "a248af9b1215451e5b121939976b5340cf3b00bd"
+  "gitHead": "b24be12d68662bf99ee0d17a1ed6f4b788ae0ce5"
 }

package/utils/loanCard.js

@@ -186,13 +186,6 @@ export function loanCardMethods(props, emit) {
 		kvTrackFunction,
 	} = toRefs(props);
 
-	function showLoanDetails(event) {
-		if (customLoanDetails.value) {
-			event.preventDefault();
-			emit('show-loan-details');
-		}
-	}
-
 	function clickReadMore(target, event) {
 		kvTrackFunction.value('Lending', 'click-Read more', target, loanId.value);
 		if (customLoanDetails.value) {
@@ -202,7 +195,6 @@ export function loanCardMethods(props, emit) {
 	}
 
 	return {
-		showLoanDetails,
 		clickReadMore,
 	};
 }

package/vue/KvClassicLoanCard.vue

@@ -17,7 +17,6 @@
 				<div
 					v-else
 					class="tw-relative"
-					@click="showLoanDetails"
 				>
 					<component
 						:is="tag"
@@ -455,7 +454,6 @@ export default {
 
 		const {
 			clickReadMore,
-			showLoanDetails,
 		} = loanCardMethods(props, emit);
 
 		return {
@@ -480,7 +478,6 @@ export default {
 			tag,
 			unreservedAmount,
 			clickReadMore,
-			showLoanDetails,
 		};
 	},
 	computed: {

package/vue/KvContentfulImg.vue

@@ -213,9 +213,22 @@ export default {
 
 		const buildUrl = (image = null, multiplier = 1) => {
 			let src = image && image.url ? `${image.url}?` : `${contentfulSrc.value}?`;
-			const imgWidth = image ? image.width : width.value;
-			const imgHeight = image ? image.height : height.value;
-
+			let imgWidth = image ? image.width : width.value;
+			let imgHeight = image ? image.height : height.value;
+			// The max contentful image size is 4000px so we have to
+			// impose a limit of 2000px here for both height and width
+			// so when we request the retina x2 image we don't go over the 4000px limit
+			let newMultiplier;
+			if (imgWidth >= 2000) {
+				newMultiplier = imgWidth / 1999;
+				imgWidth = 1999;
+				imgHeight = Math.round(imgHeight / newMultiplier);
+			}
+			if (imgHeight >= 2000) {
+				newMultiplier = imgHeight / 1999;
+				imgHeight = 1999;
+				imgWidth = Math.round(imgWidth / newMultiplier);
+			}
 			if (imgWidth) {
 				src += `w=${imgWidth * multiplier}`;
 			}

package/vue/KvWideLoanCard.vue

@@ -27,7 +27,6 @@
 			<div
 				v-else
 				class="tw-relative tw-w-full"
-				@click="showLoanDetails"
 			>
 				<component
 					:is="tag"
@@ -364,7 +363,6 @@ export default {
 
 		const {
 			clickReadMore,
-			showLoanDetails,
 		} = loanCardMethods(props, emit);
 
 		return {
@@ -389,7 +387,6 @@ export default {
 			tag,
 			unreservedAmount,
 			clickReadMore,
-			showLoanDetails,
 		};
 	},
 	computed: {

package/vue/stories/KvContentfulImg.stories.js

@@ -4,7 +4,7 @@ export default {
 	title: 'KvContentfulImg',
 	component: KvContentfulImg,
 	args: {
-		contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/2TWV32iioxapwjn26ZpigZ/84ac39a1396d6be9eea472cf8791faa7/Cynthia.png',
+		contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/35lkLRfbLxzFPlDVgA4aKI/c435630d811f9ad35ddfc88eaea22b08/Blog-import-1082518_us_shawn_16.jpg',
 		fallbackFormat: 'jpg',
 		width: 200,
 		height: null,
@@ -77,6 +77,7 @@ export const ResponsiveImageSet = (args, { argTypes }) => ({
 		/>
 	`,
 });
+
 ResponsiveImageSet.args = {
 	fit: 'fill',
 	focus: 'face',
@@ -168,3 +169,28 @@ export const WithCaption = (args, { argTypes }) => ({
 		/>
 	`,
 });
+
+export const GiantImage = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvContentfulImg,
+	},
+	template: `
+		<kv-contentful-img
+			:contentful-src="contentfulSrc"
+			:fallback-format="fallbackFormat"
+			:width="width"
+			:height="height"
+			alt="Descriptive alt text"
+			:loading="loading"
+			:fit="fit"
+			:focus="focus"
+		/>
+	`,
+});
+
+GiantImage.args = {
+	contentfulSrc: 'https://images.ctfassets.net/j0p9a6ql0rn7/7dVINOyAxRaXM8p6aq7p5s/9213f63ff10dec57c5f740c056afe8a8/gradient-hero-bg__1_.jpg',
+	width: 4000,
+	height: 2000,
+};