@kiva/kv-components 3.41.0 → 3.43.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.43.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.42.0...@kiva/kv-components@3.43.0) (2023-09-15)
+
+
+### Features
+
+* added label support ([c016a68](https://github.com/kiva/kv-ui-elements/commit/c016a683ae38ca5af66fa86576d88abd0066d719))
+* line graph can now just take values and normalization happens in component ([3f706be](https://github.com/kiva/kv-ui-elements/commit/3f706be31b288b64e4a566746bd7d0530ce25650))
+* ported over Shua's line graph using clip path and made slight CSS tweaks to match mocks ([56ac312](https://github.com/kiva/kv-ui-elements/commit/56ac312924eecdf56e2d9d99082643e6d42f7765))
+* simple unit tests and small fixes related to tests ([43700fa](https://github.com/kiva/kv-ui-elements/commit/43700faf6c1f0c76432107c3a658539bd3bf6c7b))
+
+
+
+
+
+# [3.42.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.41.0...@kiva/kv-components@3.42.0) (2023-09-14)
+
+
+### Bug Fixes
+
+* added event emitters ([3a84e6e](https://github.com/kiva/kv-ui-elements/commit/3a84e6e97b5d230ff747c296339bce31263d89da))
+* added event emitters, addressed comments, updated tests ([35a8a0c](https://github.com/kiva/kv-ui-elements/commit/35a8a0c6b34eed36fba030c29d3389c356c06927))
+* addressing build issues, made button square ([974bbdc](https://github.com/kiva/kv-ui-elements/commit/974bbdcac2558fc47c7280f6535d390ed8c824ef))
+* stopped requiring default title ([f494700](https://github.com/kiva/kv-ui-elements/commit/f494700078a2660f72703b95327df6e407d16d5f))
+
+
+### Features
+
+* new edit button that opens up a lightbox for editing page settings in kiva at work pages ([9d9c2ca](https://github.com/kiva/kv-ui-elements/commit/9d9c2caf3df0f741c2039d2423e42e108e753ff0))
+
+
+
+
+
 # [3.41.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.40.1...@kiva/kv-components@3.41.0) (2023-09-07)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.41.0",
+  "version": "3.43.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "e8c825179c7a3044372369640113d65d7c30b3f5"
+  "gitHead": "023c2d950460478d6c3684d3d09906f9d9672f35"
 }

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

@@ -0,0 +1,71 @@
+import { render, fireEvent } from '@testing-library/vue';
+import { axe } from 'jest-axe';
+import { nextTick } from 'vue';
+import addVueRouter from '../../utils/addVueRouter';
+import KvEditButton from '../../../../vue/KvEditButton.vue';
+
+describe('KvEditButton', () => {
+	const renderComponent = (options) => render(KvEditButton, addVueRouter(options));
+
+	it('renders the edit button', () => {
+		const { getByRole } = renderComponent();
+		getByRole('button', { name: /edit/i });
+	});
+
+	it('shows the lightbox when the edit button is clicked', async () => {
+		const { getByRole } = renderComponent();
+		const button = getByRole('button', { name: /edit/i });
+		await fireEvent.click(button);
+		expect(getByRole('dialog')).toBeVisible();
+	});
+
+	it('closes the lightbox when the close event is emitted', async () => {
+		const { getByRole, queryByRole } = renderComponent();
+		const button = getByRole('button', { name: /edit/i });
+		await fireEvent.click(button);
+		await fireEvent.keyUp(document, { key: 'Escape', code: 'Escape' });
+		await nextTick();
+		expect(queryByRole('dialog')).not.toBeInTheDocument();
+	});
+
+	it('renders a custom title for the lightbox if provided', () => {
+		const { getByText } = renderComponent({ props: { title: 'Custom Title' } });
+		getByText('Custom Title');
+	});
+
+	it('has no automated accessibility violations', async () => {
+		const { container } = renderComponent();
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+
+	it('renders content in the default slot of the lightbox', async () => {
+		const customContent = 'Custom Content for Body';
+		const { getByText, getByRole } = renderComponent({
+			slots: { default: customContent },
+		});
+		const button = getByRole('button', { name: /edit/i });
+		await fireEvent.click(button);
+		expect(getByText(customContent)).toBeVisible();
+	});
+
+	it('renders content in the header slot of the lightbox', async () => {
+		const customHeader = 'Custom Header Content';
+		const { getByText, getByRole } = renderComponent({
+			slots: { header: customHeader },
+		});
+		const button = getByRole('button', { name: /edit/i });
+		await fireEvent.click(button);
+		expect(getByText(customHeader)).toBeVisible();
+	});
+
+	it('renders content in the controls slot of the lightbox', async () => {
+		const customControls = 'Custom Controls Content';
+		const { getByText, getByRole } = renderComponent({
+			slots: { controls: customControls },
+		});
+		const button = getByRole('button', { name: /edit/i });
+		await fireEvent.click(button);
+		expect(getByText(customControls)).toBeVisible();
+	});
+});

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

@@ -0,0 +1,58 @@
+import { render } from '@testing-library/vue';
+import { axe } from 'jest-axe';
+import KvLineGraph from '../../../../vue/KvLineGraph.vue';
+
+describe('KvLineGraph', () => {
+	const points = [
+		{ value: 10 },
+		{ value: 20 },
+		{ value: 50 },
+		{ value: 60 },
+		{ value: 80 },
+	];
+
+	const pointsWithLabels = [
+		{ value: 10, label: '2014' },
+		{ value: 20, label: '2015' },
+		{ value: 50, label: '2016' },
+		{ value: 60, label: '2017' },
+		{ value: 80, label: '2018' },
+	];
+
+	it('should render chart with points', () => {
+		const { container } = render(KvLineGraph, { props: { points } });
+		const pointElements = container.querySelectorAll('span');
+
+		expect(pointElements.length).toBe(points.length);
+	});
+
+	it('should render chart with value labels', () => {
+		const { container } = render(KvLineGraph, { props: { points: pointsWithLabels } });
+		const pointElements = container.querySelectorAll('span');
+
+		expect(pointElements.length).toBe(points.length * 2);
+	});
+
+	it('should render chart with x-axis label', () => {
+		const { container } = render(KvLineGraph, { props: { points, axisLabel: 'People supported over time' } });
+		const label = container.querySelectorAll('h4');
+
+		expect(label.length).toBe(1);
+	});
+
+	it('should render chart with value labels and x-axis label', () => {
+		const { container } = render(KvLineGraph, { props: { points: pointsWithLabels, axisLabel: 'People supported over time' } });
+		const pointElements = container.querySelectorAll('span');
+		const label = container.querySelectorAll('h4');
+
+		expect(pointElements.length).toBe(points.length * 2);
+		expect(label.length).toBe(1);
+	});
+
+	it('should have no automated accessibility violations', async () => {
+		const { container } = render(KvLineGraph, { props: { points } });
+		const results = await axe(container);
+
+		expect(results).toHaveNoViolations();
+	});
+});

package/vue/KvEditButton.vue

@@ -0,0 +1,105 @@
+<template>
+	<div>
+		<!-- Edit Button -->
+		<KvButton
+			variant="secondary"
+			aria-label="Edit"
+			class="tw-w-7 tw-h-10"
+			@click="showLightbox"
+		>
+			<KvMaterialIcon
+				class="tw-w-3 tw-h-3"
+				:icon="mdiPencil"
+			/>
+		</KvButton>
+
+		<!-- Lightbox -->
+		<KvLightbox
+			:visible="isVisible"
+			:title="title"
+			:prevent-close="preventClose"
+			:variant="variant"
+			@lightbox-closed="hideLightbox"
+		>
+			<template #header>
+				<slot name="header"></slot>
+			</template>
+
+			<!-- default slot (body) -->
+			<slot></slot>
+
+			<!-- controls slot -->
+			<template #controls>
+				<slot
+					name="controls"
+					:hideLightbox="hideLightbox"
+				></slot>
+			</template>
+		</KvLightbox>
+	</div>
+</template>
+
+<script>
+import { ref } from 'vue-demi';
+import { mdiPencil } from '@mdi/js';
+import KvButton from './KvButton.vue';
+import KvMaterialIcon from './KvMaterialIcon.vue';
+import KvLightbox from './KvLightbox.vue';
+
+export default {
+	components: {
+		KvButton,
+		KvMaterialIcon,
+		KvLightbox,
+	},
+	props: {
+		variant: {
+			type: String,
+			default: 'lightbox',
+			validator(value) {
+				return ['lightbox', 'alert'].includes(value);
+			},
+		},
+		/**
+		 * The title of the dialog which describes the dialog to screenreaders, and if no
+		 * content is in the `header` slot, will be displayed at the top of the lightbox.
+		 * */
+		title: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * The dialog has no close X button, clicking the screen does not close,
+		 * pressing ESC does not close.
+		 * */
+		preventClose: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: [
+		'lightbox-opened',
+		'lightbox-closed',
+	],
+	setup(_, { emit }) {
+		const isVisible = ref(false);
+
+		const showLightbox = () => {
+			isVisible.value = true;
+			emit('lightbox-opened');
+		};
+
+		const hideLightbox = () => {
+			isVisible.value = false;
+			emit('lightbox-closed');
+		};
+
+		return {
+			mdiPencil,
+			isVisible,
+			showLightbox,
+			hideLightbox,
+		};
+	},
+};
+</script>

package/vue/KvLineGraph.vue

@@ -0,0 +1,128 @@
+<template>
+	<div class="tw-h-full tw-w-full tw-p-2.5">
+		<figure
+			class="tw-w-full tw-relative"
+			:style="{ height: graphHeight }"
+		>
+			<div
+				class="tw-w-full tw-h-full tw-bg-marigold-2 tw-opacity-low"
+				:style="{ clipPath: `polygon(${shade}, 100% 100%, 0% 100%)` }"
+			></div>
+			<div
+				class="tw-absolute tw-top-0 tw-w-full tw-h-full tw-bg-marigold-2"
+				:style="{ clipPath: `polygon(${line})` }"
+			></div>
+			<span
+				v-for="point in normalizedPoints"
+				:key="point.x"
+				class="
+					tw-absolute
+					tw-w-2
+					tw-h-2
+					tw-border
+					tw-border-white
+					tw-bg-marigold-2
+					tw-rounded-full
+				"
+				:style="{ left: `${point.x}%`, top: `${point.y}%`, transform: 'translate(-50%, -50%)' }"
+			></span>
+			<template v-for="point in normalizedPoints">
+				<span
+					v-if="point.label"
+					:key="point.label"
+					class="tw-absolute"
+					:style="{ left: `${point.x}%`, bottom: '-3rem', transform: 'translate(-50%, -50%)' }"
+				>
+					{{ point.label }}
+				</span>
+			</template>
+		</figure>
+		<h4
+			v-if="axisLabel"
+			class="tw-text-center"
+			:class="{ 'tw-pt-1': !hasValueLabels, 'tw-pt-6': hasValueLabels }"
+		>
+			{{ axisLabel }}
+		</h4>
+	</div>
+</template>
+
+<script>
+import { computed, toRefs } from 'vue-demi';
+
+export default {
+	props: {
+		/**
+		 * Array of objects like [{ value: 10, label: '2014' }, { value: 20, label: '2015' }]
+		 */
+		points: {
+			type: Array,
+			required: true,
+		},
+		/**
+		 * The optional label to show below the graph on the x-axis
+		 */
+		axisLabel: {
+			type: String,
+			default: '',
+		},
+	},
+	setup(props) {
+		const { points, axisLabel } = toRefs(props);
+
+		// Get step to use on x-axis
+		const xIncrement = Math.round(100 / (points.value.length - 1));
+
+		// Find the largest value to be used as the scale of the graph
+		const largestY = computed(() => {
+			return points.value.reduce((prev, current) => {
+				return prev > current.value ? prev : current.value;
+			}, 0);
+		});
+
+		// Find the largest value to be used as the scale of the graph
+		const hasValueLabels = computed(() => {
+			return points.value.reduce((prev, current) => {
+				return prev || !!current.label;
+			}, false);
+		});
+
+		// Convert single values to points using increment and largest value
+		const normalizedPoints = computed(() => {
+			return points.value.reduce((prev, next, i) => {
+				prev.push({
+					x: i * xIncrement,
+					y: 100 - ((next.value / largestY.value) * 100),
+					label: next.label,
+				});
+
+				return prev;
+			}, []);
+		});
+
+		// Used for drawing the shading under the line
+		const shade = computed(() => (normalizedPoints.value.map(({ x, y }) => `${x}% ${y}%`).join(',')));
+
+		// Used for drawing the line
+		const line = computed(() => {
+			const topLine = normalizedPoints.value.map(({ x, y }) => `${x}% ${y + 0.3}%`).join(',');
+			const bottomLine = [...normalizedPoints.value].reverse().map(({ x, y }) => `${x}% ${y - 0.3}%`).join(',');
+			return `${topLine}, ${bottomLine}`;
+		});
+
+		const graphHeight = computed(() => {
+			const labelSpace = (axisLabel.value ? 2 : 0) + (hasValueLabels.value ? 2 : 0);
+
+			return `calc(100% - ${labelSpace}rem)`;
+		});
+
+		return {
+			hasValueLabels,
+			graphHeight,
+			normalizedPoints,
+			shade,
+			line,
+		};
+	},
+};
+</script>

package/vue/stories/KvEditButton.stories.js

@@ -0,0 +1,63 @@
+import KvEditButton from '../KvEditButton.vue';
+import KvButton from '../KvButton.vue';
+
+export default {
+	title: 'KvEditButton',
+	component: KvEditButton,
+	argTypes: {
+		visible: {
+			control: 'boolean',
+			defaultValue: false,
+		},
+		title: {
+			control: 'text',
+			defaultValue: 'Edit',
+		},
+		variant: {
+			control: 'select',
+			options: ['lightbox', 'alert'],
+			defaultValue: 'lightbox',
+		},
+		preventClose: {
+			control: 'boolean',
+			defaultValue: false,
+		},
+	},
+	args: {
+		visible: false,
+		title: '',
+		variant: 'lightbox',
+		preventClose: false,
+	},
+};
+
+const DefaultTemplate = (args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: { KvEditButton, KvButton },
+	template: `
+		<div>
+			<kv-edit-button v-bind="$props">
+				<template>This is the content that will appear inside the lightbox when the edit button is clicked.</template>
+				<template #header>
+					<h3>
+						Custom Header
+					</h3>
+				</template>
+				<template #controls="{ hideLightbox }">
+					<kv-button variant="ghost" @click="hideLightbox" ref="dontDoItRef">Cancel</kv-button>
+					<kv-button variant="danger" @click="hideLightbox" ref="doItRef">Delete</kv-button>
+				</template>
+			</kv-edit-button>
+		</div>
+	`,
+	data() {
+		return {
+			isLightboxVisible: args.visible,
+		};
+	},
+});
+
+export const EditButtonWithLightbox = DefaultTemplate.bind({});
+EditButtonWithLightbox.args = {
+	title: 'Edit Item Details',
+};

package/vue/stories/KvLineGraph.stories.js

@@ -0,0 +1,52 @@
+import KvLineGraph from '../KvLineGraph.vue';
+
+export default {
+	title: 'KvLineGraph',
+	component: KvLineGraph,
+};
+
+const Template = (_args, { argTypes }) => ({
+	props: Object.keys(argTypes),
+	components: {
+		KvLineGraph,
+	},
+	template: `
+		<div style="height: 500px; width: 500px;">
+			<kv-line-graph :points="points" :axis-label="axisLabel" />
+		</div>
+	`,
+});
+
+const points = [
+	{ value: 10 },
+	{ value: 20 },
+	{ value: 50 },
+	{ value: 60 },
+	{ value: 80 },
+];
+
+const pointsWithLabels = [
+	{ value: 10, label: '2014' },
+	{ value: 20, label: '2015' },
+	{ value: 50, label: '2016' },
+	{ value: 60, label: '2017' },
+	{ value: 80, label: '2018' },
+];
+
+export const Default = Template.bind();
+Default.args = { points };
+
+export const AxisLabel = Template.bind();
+AxisLabel.args = {
+	points,
+	axisLabel: 'People supported over time',
+};
+
+export const ValueLabels = Template.bind();
+ValueLabels.args = { points: pointsWithLabels };
+
+export const AllLabels = Template.bind();
+AllLabels.args = {
+	points: pointsWithLabels,
+	axisLabel: 'People supported over time',
+};