@kiva/kv-components 3.44.0 → 3.44.2

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.44.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.44.1...@kiva/kv-components@3.44.2) (2023-09-25)
+
+
+### Bug Fixes
+
+* bookmark icon position fixed to avoid using z index property ([#301](https://github.com/kiva/kv-ui-elements/issues/301)) ([59287f8](https://github.com/kiva/kv-ui-elements/commit/59287f82e27275a23c6924537a55bdb31f563946))
+
+
+
+
+
+## [3.44.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.44.0...@kiva/kv-components@3.44.1) (2023-09-20)
+
+
+### Bug Fixes
+
+* backpedal kvedit button and use existing components instead ([e751910](https://github.com/kiva/kv-ui-elements/commit/e751910f808f7d4b5861995053015bd20b9c6d5e))
+
+
+
+
+
 # [3.44.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.43.0...@kiva/kv-components@3.44.0) (2023-09-19)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "3.44.0",
+  "version": "3.44.2",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -75,5 +75,5 @@
       "optional": true
     }
   },
-  "gitHead": "de7cefc4bfbacb12fbabf0c4b201319acaba37d3"
+  "gitHead": "93f09fe1ce35d25928ce15123bf87349a09c693f"
 }

package/vue/KvClassicLoanCard.vue

@@ -19,15 +19,6 @@
 					class="tw-relative"
 					@click="showLoanDetails"
 				>
-					<kv-loan-bookmark
-						v-if="!isVisitor"
-						:loan-id="loanId"
-						:is-bookmarked="isBookmarked"
-						class="tw-absolute tw-right-1 tw-z-2"
-						style="top: -6px;"
-						data-testid="loan-card-bookmark"
-						@toggle-bookmark="$emit('toggle-bookmark')"
-					/>
 					<component
 						:is="tag"
 						:to="readMorePath"
@@ -76,6 +67,15 @@
 							</p>
 						</div>
 					</component>
+					<kv-loan-bookmark
+						v-if="!isVisitor"
+						:loan-id="loanId"
+						:is-bookmarked="isBookmarked"
+						class="tw-absolute tw-right-1"
+						style="top: -6px;"
+						data-testid="loan-card-bookmark"
+						@toggle-bookmark="$emit('toggle-bookmark')"
+					/>
 				</div>
 
 				<!-- Loan tag -->

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

@@ -1,71 +0,0 @@
-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

@@ -1,105 +0,0 @@
-<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/stories/KvEditButton.stories.js

@@ -1,63 +0,0 @@
-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',
-};