@kiva/kv-components 3.62.0 → 3.63.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.63.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.62.1...@kiva/kv-components@3.63.0) (2024-03-08)
+
+
+### Features
+
+* inline activity feed components added ([#367](https://github.com/kiva/kv-ui-elements/issues/367)) ([32c782a](https://github.com/kiva/kv-ui-elements/commit/32c782a39d39100dcf24a7a322488d5e25b86d8b))
+
+
+
+
+
+## [3.62.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.62.0...@kiva/kv-components@3.62.1) (2024-03-07)
+
+
+### Bug Fixes
+
+* remove centering on voting card category ([fc0d036](https://github.com/kiva/kv-ui-elements/commit/fc0d03604bcdf6157b716a93d3e62d758e765aad))
+
+
+
+
+
 # [3.62.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.61.0...@kiva/kv-components@3.62.0) (2024-03-05)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.62.0",
+  "version": "3.63.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "444a69ad972d2eaef7f19c3ca99467aa2d157be7"
+  "gitHead": "4b633ea152b2c305b72f1db62f703fdc0f657f24"
 }

package/vue/KvInlineActivityCard.vue

@@ -0,0 +1,60 @@
+<template>
+	<div
+		class="tw-flex tw-items-center tw-gap-1 tw-py-0.5 tw-px-1 tw-shadow-lg tw-rounded-sm"
+	>
+		<KvUserAvatar
+			:lender-image-url="lenderImageUrl"
+			:lender-name="lenderName"
+			is-small
+			class="activity-avatar"
+		/>
+		<p class="tw-text-base tw-whitespace-nowrap">
+			<span class="data-hj-suppress">{{ lenderName }}</span> contributed ${{ amountLent }}
+		</p>
+	</div>
+</template>
+
+<script>
+import { computed, toRefs } from 'vue-demi';
+import KvUserAvatar from './KvUserAvatar.vue';
+
+export default {
+	name: 'KvInlineActivityCard',
+	components: {
+		KvUserAvatar,
+	},
+	props: {
+		/**
+         * Activity data object
+         */
+		activity: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	setup(props) {
+		const {
+			activity,
+		} = toRefs(props);
+
+		const lenderName = computed(() => activity?.value?.lender?.name ?? '');
+		const lenderImageUrl = computed(() => activity?.value?.lender?.image?.url ?? '');
+		const amountLent = computed(() => {
+			const amount = activity?.value?.shareAmount ?? '';
+			return parseFloat(amount).toFixed();
+		});
+
+		return {
+			lenderImageUrl,
+			lenderName,
+			amountLent,
+		};
+	},
+};
+</script>
+
+<style scoped lang="postcss">
+.activity-avatar, .activity-avatar >>> img, .activity-avatar >>> div {
+    @apply tw-w-4 tw-h-4;
+}
+</style>

package/vue/KvInlineActivityFeed.vue

@@ -0,0 +1,38 @@
+<template>
+	<div class="tw-flex tw-gap-x-0.5 tw-overflow-x-auto tw-py-2 tw-px-1 hide-scrollbar">
+		<KvInlineActivityCard
+			v-for="(activity, index) in activities"
+			:key="index"
+			:activity="activity"
+		/>
+	</div>
+</template>
+
+<script>
+import KvInlineActivityCard from './KvInlineActivityCard.vue';
+
+export default {
+	name: 'KvInlineActivityFeed',
+	components: { KvInlineActivityCard },
+	props: {
+		/**
+         * Activities data array
+         */
+		activities: {
+			type: Array,
+			default: () => ([]),
+		},
+	},
+};
+</script>
+
+<style scoped lang="postcss">
+.hide-scrollbar {
+    -ms-overflow-style: none;  /* IE and Edge */
+    scrollbar-width: none;  /* Firefox */
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+    @apply tw-hidden;
+}
+</style>

package/vue/KvVotingCard.vue

@@ -8,7 +8,6 @@
 		tw-p-1
 		tw-flex
 		tw-flex-col
-		tw-items-center
 		tw-justify-between
 		tw-max-w-300"
 	>

package/vue/stories/KvInlineActivityCard.stories.js

@@ -0,0 +1,69 @@
+import KvInlineActivityCard from '../KvInlineActivityCard.vue';
+
+export default {
+	title: 'KvInlineActivityCard',
+	component: KvInlineActivityCard,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvInlineActivityCard },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<div style="max-width: 320px;">	
+				<KvInlineActivityCard v-bind="args" />
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({
+	activity: {
+		lender: {
+			image: {
+				url: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+			},
+			name: 'Roger',
+		},
+		shareAmount: '125.00',
+	},
+});
+
+export const NoImage = story({
+	activity: {
+		lender: {
+			image: {
+				url: '',
+			},
+			name: 'Roger',
+		},
+		shareAmount: '75.00',
+	},
+});
+
+export const Anonymous = story({
+	activity: {
+		lender: {
+			image: {
+				url: 'https://www.development.kiva.org/img/s100/26e15431f51b540f31cd9f011cc54f31.jpg',
+			},
+			name: 'Anonymous',
+		},
+		shareAmount: '5.00',
+	},
+});
+
+export const DefaultProfile = story({
+	activity: {
+		lender: {
+			image: {
+				url: 'https://www.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+			},
+			name: 'Default Profile',
+		},
+		shareAmount: '25.00',
+	},
+});

package/vue/stories/KvInlineActivityFeed.stories.js

@@ -0,0 +1,76 @@
+import KvInlineActivityFeed from '../KvInlineActivityFeed.vue';
+
+const activities = [
+	{
+		lender: {
+			id: 723174,
+			name: 'TonyB',
+			image: {
+				url: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg',
+			},
+		},
+		shareAmount: '25.00',
+	},
+	{
+		lender: {
+			id: 723174,
+			name: 'Roger',
+			image: {
+				url: '',
+			},
+		},
+		shareAmount: '25.00',
+	},
+	{
+		lender: {
+			id: 723174,
+			name: 'Anonymous',
+			image: {
+				url: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg',
+			},
+		},
+		shareAmount: '25.00',
+	},
+	{
+		lender: {
+			id: 723174,
+			name: 'Default user',
+			image: {
+				url: 'https://www-0.development.kiva.org/img/s100/4d844ac2c0b77a8a522741b908ea5c32.jpg',
+			},
+		},
+		shareAmount: '25.00',
+	},
+	{
+		lender: {
+			id: 723174,
+			name: 'Jessica',
+			image: {
+				url: 'https://www-0.development.kiva.org/img/s100/6b1a24092be3aaa22216874e644a4acf.jpg',
+			},
+		},
+		shareAmount: '25.00',
+	},
+];
+
+export default {
+	title: 'KvInlineActivityFeed',
+	component: KvInlineActivityFeed,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvInlineActivityFeed },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<div style="max-width: 1200px;">	
+				<KvInlineActivityFeed v-bind="args" />
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({ activities });