feat: add basic comments container for future comment work

@kiva/kv-components/tests/unit/specs/components/KvCommentsContainer.spec.js

@@ -0,0 +1,18 @@
+import { render } from '@testing-library/vue';
+import Container from '../../../../vue/KvCommentsContainer.vue';
+
+const renderContainer = (props = {}) => {
+	return render(Container, { props });
+};
+
+describe('KvCommentsContainer', () => {
+	it('should render without activity ID', async () => {
+		const component = renderContainer();
+		component.getByText('Activity ID missing');
+	});
+
+	it('should render with activity ID', async () => {
+		const component = renderContainer({ activityId: 'asd' });
+		component.getByText('Comment functionality coming soon!');
+	});
+});

@kiva/kv-components/vue/KvCommentsContainer.vue

@@ -0,0 +1,28 @@
+<template>
+	<div>
+		<h3>Comment Container Placeholder</h3>
+		<p v-if="activityId">
+			Comment functionality coming soon!
+		</p>
+		<p
+			v-else
+			class="tw-text-desert-rose"
+		>
+			Activity ID missing
+		</p>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+		/**
+		 * The activity ID for the comments
+		 */
+		activityId: {
+			type: String,
+			default: '',
+		},
+	},
+};
+</script>

@kiva/kv-components/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: `
+			<KvCommentsContainer v-bind="args" />
+		`,
+	});
+	template.args = args;
+	return template;
+};
+
+export const Default = story({});
+
+export const Activity = story({ activityId: 'asd' });