@kiva/kv-components 3.62.1 → 3.63.1

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.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.63.0...@kiva/kv-components@3.63.1) (2024-03-12)
+
+
+### Bug Fixes
+
+* fix data reference for comment list item ([0955f28](https://github.com/kiva/kv-ui-elements/commit/0955f28b8deeb067e8d393c2365dbdcab79e92df))
+
+
+
+
+
+# [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)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.62.1",
+  "version": "3.63.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "987be7ae143b387454a2f9d931851bc2652c1dd2"
+  "gitHead": "1738a3cf8256bc15231d79008d3a23533a78fdeb"
 }

package/vue/KvCommentsListItem.vue

@@ -161,7 +161,7 @@ export default {
 
 		const childComments = computed(() => comment?.value?.latest_children?.comment ?? null);
 		const childLikes = computed(() => comment?.value?.latest_children?.like ?? []);
-		const likedObject = computed(() => childLikes.value.find((child) => child.user.data.publicLenderId === userPublicId.value)); // eslint-disable-line max-len
+		const likedObject = computed(() => childLikes.value.find((child) => child?.user?.data?.publicLenderId === userPublicId.value)); // eslint-disable-line max-len
 		const isLiked = computed(() => likedObject.value !== undefined);
 
 		const replyClick = () => {

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/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 });