@kiva/kv-components 3.102.4 → 3.103.0

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.103.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.102.5...@kiva/kv-components@3.103.0) (2024-10-08)
+
+
+### Features
+
+* new voting card ([#466](https://github.com/kiva/kv-ui-elements/issues/466)) ([039bca4](https://github.com/kiva/kv-ui-elements/commit/039bca45ac0b8fa2f902f4623af04da5d55a0a88))
+
+
+
+
+
+## [3.102.5](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.102.4...@kiva/kv-components@3.102.5) (2024-10-08)
+
+
+### Bug Fixes
+
+* activeSlice value isn't comparable because it's a Proxy, use toRaw ([046a4c1](https://github.com/kiva/kv-ui-elements/commit/046a4c1518a751f8a6d47ff970a0fd6583655f59))
+
+
+
+
+
 ## [3.102.4](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.102.3...@kiva/kv-components@3.102.4) (2024-10-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.102.4",
+  "version": "3.103.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -83,5 +83,5 @@
       "optional": true
     }
   },
-  "gitHead": "9d819f1b11475de5c5f728409069c241f399cc0f"
+  "gitHead": "959188a1e62533846d7d1627c44218eaec5abcab"
 }

package/vue/KvPieChart.vue

@@ -97,7 +97,12 @@
 
 <script>
 import numeral from 'numeral';
-import { ref, toRefs, computed } from 'vue-demi';
+import {
+	ref,
+	toRaw,
+	toRefs,
+	computed,
+} from 'vue-demi';
 import Alea from '../utils/Alea';
 import KvLoadingPlaceholder from './KvLoadingPlaceholder.vue';
 
@@ -211,7 +216,7 @@ export default {
 		};
 
 		const isSliceActive = (slice) => {
-			return activeSlice.value === slice;
+			return toRaw(activeSlice.value) === slice;
 		};
 
 		const setActiveSlice = (slice) => {

package/vue/KvVotingCardV2.vue

@@ -0,0 +1,111 @@
+<template>
+	<div
+		class="vote_card"
+		:style="cssProps"
+	>
+		<h2 class="tw-italic tw-pb-1">
+			{{ title }}
+		</h2>
+		<p class="tw-pb-1.5">
+			{{ description }}
+		</p>
+		<div class="tw-block md:tw-flex tw-justify-between">
+			<div
+				v-if="showPercentage"
+				class="tw-flex tw-items-center tw-w-full tw-max-w-16"
+			>
+				<kv-progress-bar
+					class="tw-flex-grow"
+					:aria-label="'Percent of votes for ' + description"
+					:value="percentage"
+				/>
+				<div class="tw-ml-2">
+					{{ percentage }}%
+				</div>
+			</div>
+			<kv-button
+				v-if="showVoteButton"
+				variant="secondary"
+				class="tw-flex-grow-0 tw-min-w-16 tw-mt-2"
+				@click="castVote"
+			>
+				Vote
+			</kv-button>
+		</div>
+	</div>
+</template>
+
+<script>
+import {
+	computed,
+	toRefs,
+} from 'vue-demi';
+import KvProgressBar from './KvProgressBar.vue';
+import KvButton from './KvButton.vue';
+
+export default {
+	name: 'KvVotingCard',
+	components: {
+		KvProgressBar,
+		KvButton,
+	},
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		description: {
+			type: String,
+			default: '',
+		},
+		backgroundImageUrl: {
+			type: String,
+			default: '',
+		},
+		percentage: {
+			type: Number,
+			default: 0,
+		},
+		showVoteButton: {
+			type: Boolean,
+			default: true,
+		},
+		showPercentage: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	emits: [
+		'vote',
+	],
+	setup(props, { emit }) {
+		const {
+			backgroundImageUrl,
+		} = toRefs(props);
+
+		const cssProps = computed(() => {
+			return {
+				'--background-image-voting-card': `url(${backgroundImageUrl.value})`,
+			};
+		});
+
+		return {
+			cssProps,
+			castVote() {
+				emit('vote');
+			},
+		};
+	},
+};
+</script>
+
+<style lang="postcss">
+.vote_card {
+	background-image:
+    linear-gradient(180deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%),
+    var(--background-image-voting-card);
+	background-size: cover;
+	padding-top: 35%;
+	@apply tw-rounded tw-px-4 tw-pb-4 tw-text-white;
+}
+</style>

package/vue/stories/KvVotingCardV2.stories.js

@@ -0,0 +1,33 @@
+import KvVotingCardV2 from '../KvVotingCardV2.vue';
+
+export default {
+	title: 'KvVotingCardV2',
+	component: KvVotingCardV2,
+};
+
+const Template = (args) => ({
+	components: { KvVotingCardV2 },
+	setup() {
+		return { args };
+	},
+	template: `
+	<div style="max-width: 524px;">
+		<kv-voting-card-v2 v-bind="args" @vote="vote"/>
+	</div>
+  `,
+	methods: {
+		vote() {
+			console.log('vote');
+		},
+	},
+});
+
+export const Default = Template.bind({});
+Default.args = {
+	title: 'Women owned small businesses',
+	description: 'Just half of all women-owned businesses in the U.S. who apply for a loan are approved. Kiva provides access where others don\'t, creating more opportunities for women entrepreneurs.',
+	backgroundImageUrl: '//images.ctfassets.net/j0p9a6ql0rn7/3LZLziZYCl05YAhb6zlH6G/df770c45b790f065b8f3d11744ef1417/Lola__Oregon__United_States.jpeg',
+	percentage: 45,
+	showVoteButton: true,
+	showPercentage: true,
+};