@kiva/kv-components 3.48.3 → 3.49.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.49.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.49.0...@kiva/kv-components@3.49.1) (2024-01-17)
+
+
+### Bug Fixes
+
+* correcting mistake with wrong function call ([904d39d](https://github.com/kiva/kv-ui-elements/commit/904d39df4afa9d470fc91a96d7e76fe782898448))
+* editing classes for country / name tag ([aaac1c5](https://github.com/kiva/kv-ui-elements/commit/aaac1c561a24a192031977c7ea5a365789228740))
+
+
+
+
+
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.48.3",
+  "version": "3.49.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "c2f834e03d69c4df0edfa0abbd9cefc5d193ea48"
+  "gitHead": "189e36f37bd09e01f11d65347e24feafbbba7324"
 }

package/vue/KvVotingCard.vue

@@ -0,0 +1,154 @@
+<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"
+			/>
+			<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"
+				style="padding: 2px 6px; text-transform: capitalize;"
+			>
+				<kv-material-icon
+					class="tw-h-2 tw-w-2 tw-truncate"
+					:icon="mapMarkerIcon"
+				/>
+				<div>
+					{{ borrowerName }}, {{ country }}
+				</div>
+			</div>
+		</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="castVote"
+		>
+			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,
+};