@kiva/kv-components 3.50.0 → 3.52.0

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.52.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.51.0...@kiva/kv-components@3.52.0) (2024-01-31)
+
+
+### Bug Fixes
+
+* added missing suppression classes ([5d04867](https://github.com/kiva/kv-ui-elements/commit/5d048672f078d2d229372e37b896c9be025457d9))
+
+
+### Features
+
+* add comments add component ([1bf5fc3](https://github.com/kiva/kv-ui-elements/commit/1bf5fc388fee61a63f49775a15b50728c140a569))
+
+
+
+
+
+# [3.51.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.50.0...@kiva/kv-components@3.51.0) (2024-01-25)
+
+
+### Features
+
+* add basic comments container for future comment work ([4f1b3ab](https://github.com/kiva/kv-ui-elements/commit/4f1b3aba7f78ead3cf53a955bbb1b1243c4b2cda))
+
+
+
+
+
 # [3.50.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.49.1...@kiva/kv-components@3.50.0) (2024-01-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.50.0",
+  "version": "3.52.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "7bedad99cec599d99830aeebedfc9d49f4f53649"
+  "gitHead": "185baa28a3a0e9616ca3ef4cf404b9074d19b373"
 }

package/tests/unit/specs/components/KvCommentsAdd.spec.js

@@ -0,0 +1,74 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import CommentsAdd, { ADD_COMMENT_EVENT } from '../../../../vue/KvCommentsAdd.vue';
+
+const renderCommentsAdd = (props = {}) => {
+	return render(CommentsAdd, { props });
+};
+
+describe('KvCommentsAdd', () => {
+	it('should render defaults', () => {
+		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
+		getByPlaceholderText('Add a comment to this loan...');
+		getByRole('button', { name: 'Cancel' });
+		getByRole('button', { name: 'Comment' });
+	});
+
+	it('should render user info', () => {
+		const { getByAltText, getByText } = renderCommentsAdd({
+			userImageUrl: 'test.com',
+			userDisplayName: 'User',
+		});
+		getByAltText('Lender');
+		getByText('User');
+	});
+
+	it('should enable comment button when text entered', async () => {
+		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
+		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const commentButton = getByRole('button', { name: 'Comment' });
+
+		expect(commentButton.disabled).toBeTruthy();
+
+		await userEvent.type(textInput, 'test');
+
+		expect(commentButton.disabled).toBeFalsy();
+
+		await userEvent.clear(textInput);
+
+		expect(commentButton.disabled).toBeTruthy();
+	});
+
+	it('should clear text when cancel clicked', async () => {
+		const { getByPlaceholderText, getByRole } = renderCommentsAdd();
+		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const cancelButton = getByRole('button', { name: 'Cancel' });
+
+		await userEvent.type(textInput, 'test');
+		await userEvent.click(cancelButton);
+
+		expect(textInput.value).toBe('');
+	});
+
+	it('should emit value when comment clicked', async () => {
+		const { getByPlaceholderText, getByRole, emitted } = renderCommentsAdd();
+		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const commentButton = getByRole('button', { name: 'Comment' });
+		const TEST_INPUT = 'test test';
+
+		await userEvent.type(textInput, TEST_INPUT);
+
+		await userEvent.click(commentButton);
+
+		expect(emitted()[ADD_COMMENT_EVENT]).toEqual([[TEST_INPUT]]);
+	});
+
+	it('should not emit empty value when comment clicked', async () => {
+		const { getByRole, emitted } = renderCommentsAdd();
+		const commentButton = getByRole('button', { name: 'Comment' });
+
+		await userEvent.click(commentButton);
+
+		expect(emitted()[ADD_COMMENT_EVENT]).toBe(undefined);
+	});
+});

package/tests/unit/specs/components/KvCommentsContainer.spec.js

@@ -0,0 +1,28 @@
+import { render } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import Container from '../../../../vue/KvCommentsContainer.vue';
+import { ADD_COMMENT_ID, ADD_COMMENT_EVENT } from '../../../../vue/KvCommentsAdd.vue';
+
+const renderContainer = (props = {}) => {
+	return render(Container, { props });
+};
+
+describe('KvCommentsContainer', () => {
+	it('should render comments add component', async () => {
+		const { container } = renderContainer();
+		expect(container.querySelectorAll(`#${ADD_COMMENT_ID}`).length).toBe(1);
+	});
+
+	it('should emit comment', async () => {
+		const { getByPlaceholderText, getByRole, emitted } = renderContainer();
+		const textInput = getByPlaceholderText('Add a comment to this loan...');
+		const commentButton = getByRole('button', { name: 'Comment' });
+		const TEST_INPUT = 'test test';
+
+		await userEvent.type(textInput, TEST_INPUT);
+
+		await userEvent.click(commentButton);
+
+		expect(emitted()[ADD_COMMENT_EVENT]).toEqual([[TEST_INPUT]]);
+	});
+});

package/vue/KvCommentsAdd.vue

@@ -0,0 +1,120 @@
+<template>
+	<div class="tw-flex tw-flex-col">
+		<div class="tw-flex tw-flex-col md:tw-flex-row md:tw-items-center tw-gap-0.5 md:tw-gap-1">
+			<div class="tw-flex tw-items-center tw-gap-1">
+				<img
+					v-if="userImageUrl"
+					:src="userImageUrl"
+					alt="Lender"
+					class="
+						data-hj-suppress
+						tw-inline-block
+						tw-w-3.5
+						tw-h-3.5
+						tw-rounded-full
+						tw-overflow-hidden
+						tw-object-fill
+					"
+				>
+				<div class="data-hj-suppress tw-font-medium">
+					{{ userDisplayName }}
+				</div>
+			</div>
+			<kv-text-input
+				:id="ADD_COMMENT_ID"
+				v-model="addCommentValue"
+				placeholder="Add a comment to this loan..."
+				class="data-hj-suppress tw-grow"
+			/>
+		</div>
+		<div class="tw-flex tw-py-0.5 tw-gap-0.5">
+			<kv-button
+				variant="ghost"
+				class="tw-ml-auto"
+				@click="cancel"
+			>
+				Cancel
+			</kv-button>
+			<kv-button
+				variant="ghost"
+				:state="commentButtonState"
+				@click="comment"
+			>
+				Comment
+			</kv-button>
+		</div>
+	</div>
+</template>
+
+<script>
+import { computed, ref } from 'vue-demi';
+import KvButton from './KvButton.vue';
+import KvTextInput from './KvTextInput.vue';
+
+export const ADD_COMMENT_ID = 'add-comment-value';
+export const ADD_COMMENT_EVENT = 'add-comment';
+
+export default {
+	components: {
+		KvButton,
+		KvTextInput,
+	},
+	props: {
+		/**
+		 * The full URL for the user image
+		 */
+		userImageUrl: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The name to display for the user
+		 */
+		userDisplayName: {
+			type: String,
+			default: '',
+		},
+	},
+	emits: [ADD_COMMENT_EVENT],
+	setup(_props, { emit }) {
+		const addCommentValue = ref('');
+
+		const commentButtonState = computed(() => (addCommentValue.value ? '' : 'disabled'));
+
+		const cancel = () => {
+			addCommentValue.value = '';
+		};
+
+		const comment = () => {
+			emit(ADD_COMMENT_EVENT, addCommentValue.value);
+		};
+
+		return {
+			ADD_COMMENT_ID,
+			addCommentValue,
+			commentButtonState,
+			cancel,
+			comment,
+		};
+	},
+};
+</script>
+
+<style lang="postcss" scoped>
+>>> input {
+	@apply tw-border-t-0 tw-border-r-0 tw-border-l-0 tw-rounded-none tw-p-0 tw-h-4;
+}
+
+>>> input:focus {
+	@apply tw-border-tertiary;
+	box-shadow: none;
+}
+
+>>> button > span {
+	@apply tw-min-h-0;
+}
+
+>>> button > span > span {
+	@apply tw-py-0 tw-px-0.5;
+}
+</style>

package/vue/KvCommentsContainer.vue

@@ -0,0 +1,44 @@
+<template>
+	<kv-comments-add
+		:user-image-url="userImageUrl"
+		:user-display-name="userDisplayName"
+		@add-comment="comment"
+	/>
+</template>
+
+<script>
+import KvCommentsAdd from './KvCommentsAdd.vue';
+
+export const ADD_COMMENT_EVENT = 'add-comment';
+
+export default {
+	components: {
+		KvCommentsAdd,
+	},
+	props: {
+		/**
+		 * The full URL for the user image
+		 */
+		userImageUrl: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The name to display for the user
+		 */
+		userDisplayName: {
+			type: String,
+			default: '',
+		},
+	},
+	setup(_props, { emit }) {
+		const comment = (commentValue) => {
+			emit(ADD_COMMENT_EVENT, commentValue);
+		};
+
+		return {
+			comment,
+		};
+	},
+};
+</script>

package/vue/stories/KvCommentsAdd.stories.js

@@ -0,0 +1,32 @@
+import KvCommentsAdd from '../KvCommentsAdd.vue';
+
+export default {
+	title: 'KvCommentsAdd',
+	component: KvCommentsAdd,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvCommentsAdd },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<div style="max-width: 800px;">
+				<KvCommentsAdd v-bind="args" />
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({});
+
+export const UserName = story({
+	userDisplayName: 'User',
+});
+
+export const UserInfo = story({
+	userImageUrl: 'https://via.placeholder.com/50x50',
+	userDisplayName: 'User',
+});

package/vue/stories/KvCommentsContainer.stories.js

@@ -0,0 +1,23 @@
+import KvCommentsContainer from '../KvCommentsContainer.vue';
+
+export default {
+	title: 'KvCommentsContainer',
+	component: KvCommentsContainer,
+};
+
+const story = (args) => {
+	const template = (templateArgs, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { KvCommentsContainer },
+		setup() { return { args: templateArgs }; },
+		template: `
+			<div style="max-width: 800px;">
+				<KvCommentsContainer v-bind="args" />
+			</div>
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({});