pkp/pkp-lib#10994 ShowMore button (pkp#539)

* pkp/pkp-lib#10994 ShowMore button

src/components/Button/Button.vue

@@ -8,7 +8,6 @@
 		:class="styles"
 		:href="element === 'a' ? href : false"
 		:disabled="element === 'a' && !isDisabled ? undefined : isDisabled"
-		@click="click"
 		@focus="emit('focus')"
 		@blur="emit('blur')"
 	>
@@ -61,12 +60,6 @@ const isSecondary = computed(
 			!props.isActive),
 );
 
-function click(e) {
-	if (props.element === 'button') {
-		e.preventDefault();
-	}
-}
-
 const styles = computed(() => ({
 	// Base
 	'inline-flex relative items-center gap-x-1 ': true,

src/components/ShowMore/ShowMore.stories.js

@@ -0,0 +1,16 @@
+import ShowMore from './ShowMore.vue';
+
+export default {title: 'Components/ShowMore', component: ShowMore};
+
+export const Primary = {
+	render: (args) => ({
+		components: {ShowMore},
+		setup() {
+			return {args};
+		},
+		template: '<ShowMore v-bind="args">Hello</ShowMore>',
+	}),
+	args: {
+		label: 'Show more details',
+	},
+};

src/components/ShowMore/ShowMore.vue

@@ -0,0 +1,19 @@
+<template>
+	<Disclosure>
+		<DisclosureButton v-slot="{open}" as="template" class="">
+			<Button is-active :icon="open ? 'Dropup' : 'Dropdown'">
+				{{ label }}
+			</Button>
+		</DisclosureButton>
+		<DisclosurePanel class="">
+			<slot />
+		</DisclosurePanel>
+	</Disclosure>
+</template>
+
+<script setup>
+import {Disclosure, DisclosureButton, DisclosurePanel} from '@headlessui/vue';
+import Button from '../Button/Button.vue';
+
+defineProps({label: {type: String, required: true}});
+</script>