Merge pull request #333 from kiva/CIT-579

feat: make voting card image into a generic slot
kiva · Jan 19, 2024 · c664ae9 · c664ae9
2 parents 189e36f + 6781e31
commit c664ae9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 61 deletions.
diff --git a/@kiva/kv-components/vue/KvVotingCard.vue b/@kiva/kv-components/vue/KvVotingCard.vue
@@ -13,26 +13,18 @@
 		tw-max-w-300"
 	>
 		<div class="tw-relative tw-flex tw-w-full tw-bg-black tw-rounded tw-mb-1">
-			<kv-borrower-image
-				class="tw-rounded"
-				:alt="`Photo of ${borrowerName}`"
-				:aspect-ratio="aspectRatio"
-				:default-image="defaultImage"
-				:hash="hash"
-				:images="images"
-				:photo-path="photoPath"
-			/>
+			<slot name="image"></slot>
 			<div
 				class="
-				tw-absolute
-				tw-bottom-1
-				tw-left-1
-				tw-text-primary
-				tw-bg-white
-				tw-rounded
-				tw-text-h4
-				tw-inline-flex
-				tw-items-center"
+					tw-absolute
+					tw-bottom-1
+					tw-left-1
+					tw-text-primary
+					tw-bg-white
+					tw-rounded
+					tw-text-h4
+					tw-inline-flex
+					tw-items-center"
 				style="padding: 2px 6px; text-transform: capitalize;"
 			>
 				<kv-material-icon
@@ -70,18 +62,14 @@
 
 <script>
 import { mdiMapMarker } from '@mdi/js';
-import {
-	computed,
-} from 'vue-demi';
-import KvBorrowerImage from './KvBorrowerImage.vue';
+import { computed } from 'vue-demi';
 import KvProgressBar from './KvProgressBar.vue';
 import KvButton from './KvButton.vue';
 import KvMaterialIcon from './KvMaterialIcon.vue';
 
 export default {
 	name: 'KvVotingCard',
 	components: {
-		KvBorrowerImage,
 		KvProgressBar,
 		KvButton,
 		KvMaterialIcon,
@@ -99,26 +87,10 @@ export default {
 			type: String,
 			default: '',
 		},
-		aspectRatio: {
-			type: Number,
-			default: 1,
-		},
-		hash: {
-			type: String,
-			default: '',
-		},
 		images: {
 			type: Array,
 			default: () => [],
 		},
-		photoPath: {
-			type: String,
-			default: '',
-		},
-		defaultImage: {
-			type: Object,
-			default: () => ({ width: 300 }),
-		},
 		percentage: {
 			type: Number,
 			default: 0,
@@ -128,15 +100,13 @@ export default {
 			default: true,
 		},
 	},
-	emits: ['vote'],
 	setup() {
-		const mapMarkerIcon = computed(() => {
-			return mdiMapMarker;
-		});
+		const mapMarkerIcon = computed(() => mdiMapMarker);
 		return {
 			mapMarkerIcon,
 		};
 	},
+
 	methods: {
 		castVote() {
 			this.$emit('vote', {
@@ -147,8 +117,8 @@ export default {
 };
 </script>
 
-<style scoped>
-.kv-voting-card {
-  max-width: 300px;
-}
-</style>
+  <style scoped>
+  .kv-voting-card {
+	max-width: 300px;
+  }
+  </style>
diff --git a/@kiva/kv-components/vue/stories/KvVotingCard.stories.js b/@kiva/kv-components/vue/stories/KvVotingCard.stories.js
@@ -10,26 +10,24 @@ const Template = (args) => ({
 	setup() {
 		return { args };
 	},
-	template: '<kv-voting-card v-bind="args" />',
+	template: `
+    <kv-voting-card v-bind="args">
+      <template #image>
+		<img
+			class="tw-rounded"
+			src="https://www-kiva-org.freetls.fastly.net/img/w600h450/9673d0722a7675b9b8d11f90849d9b44.jpg"
+			alt="Default image"
+		/>
+      </template>
+    </kv-voting-card>
+  `,
 });
 
 export const Default = Template.bind({});
 Default.args = {
 	borrowerName: 'Jacqueline',
 	country: 'Rwanda',
 	category: 'Women-owned retail businesses',
-	aspectRatio: 0.75,
-	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/',
-	defaultImage: { width: 300 },
 	percentage: 45,
 	showVoteButton: true,
 };