@kiva/kv-components 3.48.2 → 3.49.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.49.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.48.3...@kiva/kv-components@3.49.0) (2024-01-16)
+
+
+### Features
+
+* vote button variant ([d58fe0c](https://github.com/kiva/kv-ui-elements/commit/d58fe0c9d16b3139d36e7d61bc2c3b4fbb5d1f0d))
+* voting category cards ([8938dff](https://github.com/kiva/kv-ui-elements/commit/8938dff740c79eaf09e8543ad384c97decee2634))
+
+
+
+
+
+## [3.48.3](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.48.2...@kiva/kv-components@3.48.3) (2023-12-08)
+
+
+### Bug Fixes
+
+* p4 tag on loan card ([8513e93](https://github.com/kiva/kv-ui-elements/commit/8513e93addcb68f9f6f17f4eb52ee4d33f6af481))
+
+
+
+
+
 ## [3.48.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.48.1...@kiva/kv-components@3.48.2) (2023-12-06)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.48.2",
+  "version": "3.49.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "992d943a0e3a39d8bb33162c1e059d295266c933"
+  "gitHead": "efc7a48388a2ed44b08b55c596e5fd261b9e8a2f"
 }

package/utils/loanCard.js

@@ -83,8 +83,8 @@ export function loanCardComputedProperties(props) {
 		// Tag as first option for LSE loans
 		if (isLseLoan && tags.length) {
 			const position = Math.floor(Math.random() * tags.length);
-			const atag = tags[position];
-			callouts.push(atag);
+			const p1Tag = tags[position];
+			callouts.push(p1Tag);
 		}
 
 		if (!categoryPageName.value) {
@@ -116,9 +116,9 @@ export function loanCardComputedProperties(props) {
 		// P4 Tag
 		if (!!tags.length && callouts.length < 2) {
 			const position = Math.floor(Math.random() * tags.length);
-			const atag = tags[position];
-			if (!callouts.filter((c) => c.toUpperCase() === tag.toUpperCase()).length) {
-				callouts.push(atag);
+			const p4Tag = tags[position];
+			if (!callouts.filter((c) => c.toUpperCase() === p4Tag.toUpperCase()).length) {
+				callouts.push(p4Tag);
 			}
 		}
 

package/vue/KvVotingCard.vue

@@ -0,0 +1,152 @@
+<template>
+	<div
+		class="
+		kv-voting-card
+		tw-bg-white
+		tw-rounded
+		tw-shadow
+		tw-p-1
+		tw-flex
+		tw-flex-col
+		tw-items-center
+		tw-justify-between
+		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"
+			/>
+			<p
+				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"
+				style="padding: 2px 6px; text-transform: capitalize;"
+			>
+				<kv-material-icon
+					class="tw-h-2 tw-w-2"
+					:icon="mapMarkerIcon"
+				/>
+				{{ borrowerName }}, {{ country }}
+			</p>
+		</div>
+
+		<h3 class="tw-font-medium">
+			{{ category }}
+		</h3>
+		<div class="tw-flex tw-items-center tw-w-full tw-mb-1">
+			<kv-progress-bar
+				class="tw-flex-grow"
+				:aria-label="'Percent of votes for ' + category"
+				:value="percentage"
+			/>
+			<div class="tw-ml-2 tw-font-medium">
+				{{ percentage }}%
+			</div>
+		</div>
+		<kv-button
+			v-if="showVoteButton"
+			class="tw-w-full"
+			@click="showVoteButton"
+		>
+			Vote
+		</kv-button>
+	</div>
+</template>
+
+<script>
+import { mdiMapMarker } from '@mdi/js';
+import {
+	computed,
+} from 'vue-demi';
+import KvBorrowerImage from './KvBorrowerImage.vue';
+import KvProgressBar from './KvProgressBar.vue';
+import KvButton from './KvButton.vue';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+
+export default {
+	name: 'KvVotingCard',
+	components: {
+		KvBorrowerImage,
+		KvProgressBar,
+		KvButton,
+		KvMaterialIcon,
+	},
+	props: {
+		borrowerName: {
+			type: String,
+			default: '',
+		},
+		country: {
+			type: String,
+			default: '',
+		},
+		category: {
+			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,
+		},
+		showVoteButton: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	emits: ['vote'],
+	setup() {
+		const mapMarkerIcon = computed(() => {
+			return mdiMapMarker;
+		});
+		return {
+			mapMarkerIcon,
+		};
+	},
+	methods: {
+		castVote() {
+			this.$emit('vote', {
+				category: this.category,
+			});
+		},
+	},
+};
+</script>
+
+<style scoped>
+.kv-voting-card {
+  max-width: 300px;
+}
+</style>

package/vue/stories/KvVotingCard.stories.js

@@ -0,0 +1,35 @@
+import KvVotingCard from '../KvVotingCard.vue';
+
+export default {
+	title: 'KvVotingCard',
+	component: KvVotingCard,
+};
+
+const Template = (args) => ({
+	components: { KvVotingCard },
+	setup() {
+		return { args };
+	},
+	template: '<kv-voting-card v-bind="args" />',
+});
+
+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,
+};