@kiva/kv-components 3.40.1 → 3.42.0

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [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)
+
+
+### Features
+
+* add box shadow to all toasts ([57ccaf2](https://github.com/kiva/kv-ui-elements/commit/57ccaf2f2da006a6990f5d5b0d6adeca8d3081b0))
+* rolled back some new tooltip props ([4ce96d6](https://github.com/kiva/kv-ui-elements/commit/4ce96d6eae3457a6a92bde9e407f226d5e53d332))
+
+
+
+
+
 ## [3.40.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.40.0...@kiva/kv-components@3.40.1) (2023-09-07)
 
 **Note:** Version bump only for package @kiva/kv-components

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.40.1",
+  "version": "3.42.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "4ce025324410f92a58a6e235886145d501290f79"
+  "gitHead": "5ce65863bbb21ba1ace0ac77c2afd89318410365"
 }

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/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/KvToast.vue

@@ -21,10 +21,11 @@
 						class="
 							tw-rounded tw-overflow-hidden
 							tw-flex
+							tw-bg-secondary
 							tw-mx-auto
 							tw-w-full md:tw-w-max md:tw-max-w-full md:tw-min-w-1/2
+							tw-shadow
 						"
-						:class="[backgroundClass, { 'tw-shadow': applyDropShadow }]"
 					>
 						<div
 							class="
@@ -91,9 +92,9 @@
 								tw-flex-shrink-0
 								tw-flex
 								tw-items-center tw-justify-center
+								tw-bg-secondary
 								hover:tw-text-action-highlight
 							"
-							:class="[backgroundClass]"
 							@click="close"
 						>
 							<kv-material-icon
@@ -150,19 +151,9 @@ export default {
 		const isVisible = ref(false);
 		const message = ref('');
 		const messageType = ref('confirmation'); // 'error', 'info', 'confirmation'
-		const backgroundType = ref('secondary'); // 'primary', 'secondary', 'tertiary'
-		const applyDropShadow = ref(false);
 		const persist = ref(false);
 		const timeout = ref(null);
 
-		const backgroundClass = computed(() => {
-			switch (backgroundType.value) {
-				case 'primary': return 'tw-bg-primary';
-				case 'tertiary': return 'tw-bg-tertiary';
-				default: return 'tw-bg-secondary';
-			}
-		});
-
 		const icon = computed(() => {
 			if (messageType.value === 'warning') {
 				return mdiAlert;
@@ -199,12 +190,10 @@ export default {
 			emit('close');
 		};
 
-		const show = (messageInput, type, persistInput, hideDelay, background, dropShadow) => {
+		const show = (messageInput, type, persistInput, hideDelay) => {
 			isVisible.value = true;
 			message.value = typeof messageInput === 'string' ? messageInput : '';
 			messageType.value = typeof type === 'string' ? type : '';
-			backgroundType.value = typeof background === 'string' ? background : '';
-			applyDropShadow.value = Boolean(dropShadow);
 			persist.value = Boolean(persistInput);
 
 			if (!persist.value) {
@@ -226,8 +215,6 @@ export default {
 			close,
 			show,
 			hasToastContentSlot,
-			backgroundClass,
-			applyDropShadow,
 		};
 	},
 };

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/KvToast.stories.js

@@ -31,16 +31,6 @@ export default {
 				type: 'number',
 			},
 		},
-		background: {
-			control: {
-				type: 'text',
-			},
-		},
-		dropShadow: {
-			control: {
-				type: 'boolean',
-			},
-		},
 	},
 };
 
@@ -54,7 +44,7 @@ const Template = (args, {
 	},
 	template: `
 		<div>
-			<kv-button @click="showToast(message, type, persist, hideDelay, background, dropShadow)">Show Toast</kv-button>
+			<kv-button @click="showToast(message, type, persist, hideDelay)">Show Toast</kv-button>
 
 			<!-- div below is a kludge for storybook docs -->
 			<div class="tw-fixed tw-z-toast tw-inset-0 tw-pointer-events-none">
@@ -64,8 +54,8 @@ const Template = (args, {
 			</div>
 		</div>`,
 	methods: {
-		showToast(messageInput, type, persistInput, hideDelay, background, dropShadow) {
-			this.$refs.toastRef.show(messageInput, type, persistInput, hideDelay, background, dropShadow);
+		showToast(messageInput, type, persistInput, hideDelay) {
+			this.$refs.toastRef.show(messageInput, type, persistInput, hideDelay);
 		},
 		onClose() {
 		},
@@ -90,18 +80,6 @@ persist.args = { persist: true };
 export const hideDelay = Template.bind({});
 hideDelay.args = { hideDelay: 10000 };
 
-export const backgroundPrimary = Template.bind({});
-backgroundPrimary.args = { background: 'primary' };
-
-export const backgroundSecondary = Template.bind({});
-backgroundSecondary.args = { background: 'secondary' };
-
-export const backgroundTertiary = Template.bind({});
-backgroundTertiary.args = { background: 'tertiary' };
-
-export const dropShadow = Template.bind({});
-dropShadow.args = { dropShadow: true };
-
 const KivaLogoTemplate = (args, {
 	argTypes,
 }) => ({