pkp/pkp-lib#10447 Create new ButtonIcon component (#413)

* pkp/pkp-lib#i10447 Add new icons to Icon Gallery * pkp/pkp-lib#10447 Add ButtonIcon component * pkp/pkp-lib#10447 Add Copy icon and remove fixed width and height on Expand and History icons * pkp/pkp-lib#10447 Update ButtonIcon style and props, provide documentation * pkp/pkp-lib#10447 Update DropdownActions component to use ButtonIcon * pkp/pkp-lib#10447 Adjust button size for ButtonIcon component * pkp/pkp-lib#10447 Remove prop enlarged icon for ButtonIcon component * pkp/pkp-lib#10447 Update how button is clicked in DropdownActions story for ellipsis/icon only mode
pkp · Sep 24, 2024 · c927175 · c927175
1 parent 5ee548f
commit c927175
Show file tree

Hide file tree

Showing 19 changed files with 758 additions and 22 deletions.
diff --git a/src/components/ButtonIcon/ButtonIcon.mdx b/src/components/ButtonIcon/ButtonIcon.mdx
@@ -0,0 +1,19 @@
+import {Primary, Controls, Stories, Meta, Description} from '@storybook/blocks';
+
+import * as ButtonIconStories from './ButtonIcon.stories.js';
+
+<Meta of={ButtonIconStories} />
+
+# ButtonIcon
+
+## Usage
+
+Use the ButtonIcon component to create a button that displays only an icon, without any visible text.
+
+## Accessibility
+
+Since the button has no visible text, use a descriptive aria-label to ensure it's accessible to screen reader users.
+
+<Primary />
+<Controls />
+<Stories />
diff --git a/src/components/ButtonIcon/ButtonIcon.stories.js b/src/components/ButtonIcon/ButtonIcon.stories.js
@@ -0,0 +1,35 @@
+import ButtonIcon from './ButtonIcon.vue';
+export default {
+	title: 'Components/ButtonIcon',
+	component: ButtonIcon,
+	render: (args) => ({
+		components: {ButtonIcon},
+		setup() {
+			return {args};
+		},
+		template: '<ButtonIcon v-bind="args" />',
+	}),
+};
+
+export const Default = {
+	args: {
+		icon: 'Add',
+		ariaLabel: 'Add more items',
+	},
+};
+
+export const Disabled = {
+	args: {
+		icon: 'Cancel',
+		ariaLabel: 'Cancel',
+		isDisabled: true,
+	},
+};
+
+export const Active = {
+	args: {
+		icon: 'Complete',
+		ariaLabel: 'Complete',
+		isActive: true,
+	},
+};
diff --git a/src/components/ButtonIcon/ButtonIcon.vue b/src/components/ButtonIcon/ButtonIcon.vue
@@ -0,0 +1,47 @@
+<template>
+	<button :class="styles" :aria-label="ariaLabel" :disabled="isDisabled">
+		<Icon class="h-5 w-5" :icon="icon" aria-hidden="true" />
+	</button>
+</template>
+
+<script setup>
+import {computed} from 'vue';
+import Icon from '@/components/Icon/Icon.vue';
+
+const props = defineProps({
+	/** Icon name to be displayed within the button */
+	icon: {
+		type: String,
+		required: true,
+	},
+	/** Accessible label for the button. */
+	ariaLabel: {
+		type: String,
+		default: null,
+	},
+	/** Indicates whether the button is in an active state. */
+	isActive: {
+		type: Boolean,
+		default: false,
+	},
+	/** Disables the button, making it unclickable and styled as disabled */
+	isDisabled: {
+		type: Boolean,
+		default: false,
+	},
+});
+
+const styles = computed(() => ({
+	// Base
+	'inline-flex relative items-center justify-center text-lg-semibold rounded w-9 h-9': true,
+	// Default
+	'text-primary bg-secondary': !props.isActive,
+	// Hover
+	'hover:text-on-dark hover:bg-hover': !props.isDisabled,
+	// Active
+	'text-on-dark bg-selection-dark border-transparent': props.isActive,
+	// Disabled
+	'hover:text-disabled hover:bg-secondary !text-disabled cursor-not-allowed':
+		props.isDisabled,
+}));
+</script>
diff --git a/src/components/DropdownActions/DropdownActions.stories.js b/src/components/DropdownActions/DropdownActions.stories.js
@@ -146,7 +146,7 @@ export const EllipsisMenu = {
 		const canvas = within(canvasElement);
 		const user = userEvent.setup();
 
-		await user.click(canvas.getByText('User management options'));
+		await user.click(canvas.getByLabelText('User management options'));
 	},
 };
 

diff --git a/src/components/DropdownActions/DropdownActions.vue b/src/components/DropdownActions/DropdownActions.vue
@@ -3,20 +3,26 @@
 		<Menu as="div">
 			<div>
 				<MenuButton
-					class="hover:bg-gray-50 inline-flex w-full justify-center gap-x-1.5 rounded px-3 py-2"
+					class="hover:bg-gray-50 inline-flex w-full justify-center gap-x-1.5 rounded"
 					:class="
 						displayAsEllipsis
 							? 'text-3xl-normal'
-							: 'border border-light bg-secondary text-lg-normal'
+							: 'border border-light bg-secondary px-3 py-2 text-lg-normal'
 					"
 					:aria-label="ariaLabel || null"
 				>
-					<span :class="displayAsEllipsis ? 'sr-only' : ''">{{ label }}</span>
+					<span v-if="!displayAsEllipsis">{{ label }}</span>
 					<Icon
-						class="-mr-1 h-5 w-5 text-primary"
-						:icon="displayAsEllipsis ? 'MoreOptions' : 'Dropdown'"
+						v-if="!displayAsEllipsis"
+						class="h-5 w-5 text-primary"
+						icon="Dropdown"
 						aria-hidden="true"
 					/>
+					<ButtonIcon
+						v-else
+						icon="MoreOptions"
+						:aria-label="label"
+					></ButtonIcon>
 				</MenuButton>
 			</div>
 
@@ -72,6 +78,7 @@
 <script setup>
 import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue';
 import PkpButton from '@/components/Button/Button.vue';
+import ButtonIcon from '@/components/ButtonIcon/ButtonIcon.vue';
 import Icon from '@/components/Icon/Icon.vue';
 
 defineProps({

diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
@@ -58,17 +58,26 @@ export const iconGallery = {
 
 	args: {
 		icons: [
+			'Add',
 			'Announcements',
 			'AnonymousReview',
+			'ArrowLeft',
+			'ArrowRight',
 			'AttachFile',
+			'Attention',
 			'BackButton',
 			'Bold',
+			'Book',
 			'Bullets',
+			'Calendar',
 			'Cancel',
 			'Catalog',
-			'Complete',
 			'ChevronDown',
+			'ChevronLeft',
+			'ChevronRight',
 			'ChevronUp',
+			'Clock',
+			'Complete',
 			'Dashboard',
 			'DefaultDocument',
 			'DecreaseTextSize',

diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
@@ -36,16 +36,25 @@
 <script></script>
 <script setup>
 import {defineProps, computed} from 'vue';
+import Add from './icons/Add.vue';
 import Announcements from './icons/Announcements.vue';
 import AnonymousReview from './icons/AnonymousReview.vue';
+import ArrowLeft from './icons/ArrowLeft.vue';
+import ArrowRight from './icons/ArrowRight.vue';
 import AttachFile from './icons/AttachFile.vue';
+import Attention from './icons/Attention.vue';
 import BackButton from './icons/BackButton.vue';
 import Bold from './icons/Bold.vue';
+import Book from './icons/Book.vue';
 import Bullets from './icons/Bullets.vue';
+import Calendar from './icons/Calendar.vue';
 import Cancel from './icons/Cancel.vue';
 import Catalog from './icons/Catalog.vue';
 import ChevronDown from './icons/ChevronDown.vue';
+import ChevronLeft from './icons/ChevronLeft.vue';
+import ChevronRight from './icons/ChevronRight.vue';
 import ChevronUp from './icons/ChevronUp.vue';
+import Clock from './icons/Clock.vue';
 import Complete from './icons/Complete.vue';
 import Dashboard from './icons/Dashboard.vue';
 import DecreaseTextSize from './icons/DecreaseTextSize.vue';
@@ -103,17 +112,26 @@ import View from './icons/View.vue';
 import Workflow from './icons/Workflow.vue';
 
 const svgIcons = {
+	Add,
 	Announcements,
 	AnonymousReview,
+	ArrowLeft,
+	ArrowRight,
 	AttachFile,
+	Attention,
 	BackButton,
 	Bold,
+	Book,
 	Bullets,
+	Calendar,
 	Cancel,
 	Catalog,
-	Complete,
 	ChevronDown,
+	ChevronLeft,
+	ChevronRight,
 	ChevronUp,
+	Clock,
+	Complete,
 	Dashboard,
 	DefaultDocument,
 	DecreaseTextSize,

diff --git a/src/components/Icon/icons/Add.vue b/src/components/Icon/icons/Add.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M20.5714 11.1429H12.8571V3.42857C12.8571 3.20124 12.7668 2.98323 12.6061 2.82248C12.4453 2.66174 12.2273 2.57143 12 2.57143C11.7727 2.57143 11.5547 2.66174 11.3939 2.82248C11.2332 2.98323 11.1429 3.20124 11.1429 3.42857V11.1429H3.42857C3.20124 11.1429 2.98323 11.2332 2.82248 11.3939C2.66174 11.5547 2.57143 11.7727 2.57143 12C2.57143 12.2273 2.66174 12.4453 2.82248 12.6061C2.98323 12.7668 3.20124 12.8571 3.42857 12.8571H11.1429V20.5714C11.1429 20.7988 11.2332 21.0168 11.3939 21.1775C11.5547 21.3383 11.7727 21.4286 12 21.4286C12.2273 21.4286 12.4453 21.3383 12.6061 21.1775C12.7668 21.0168 12.8571 20.7988 12.8571 20.5714V12.8571H20.5714C20.7988 12.8571 21.0168 12.7668 21.1775 12.6061C21.3383 12.4453 21.4286 12.2273 21.4286 12C21.4286 11.7727 21.3383 11.5547 21.1775 11.3939C21.0168 11.2332 20.7988 11.1429 20.5714 11.1429Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/ArrowLeft.vue b/src/components/Icon/icons/ArrowLeft.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M21 11H5.41L6.71 9.71C6.8983 9.52169 7.00409 9.2663 7.00409 9C7.00409 8.7337 6.8983 8.4783 6.71 8.29C6.5217 8.10169 6.2663 7.99591 6 7.99591C5.7337 7.99591 5.4783 8.10169 5.29 8.29L2.29 11.29C2.19627 11.383 2.12188 11.4936 2.07111 11.6154C2.02034 11.7373 1.9942 11.868 1.9942 12C1.9942 12.132 2.02034 12.2627 2.07111 12.3846C2.12188 12.5064 2.19627 12.617 2.29 12.71L5.29 15.71C5.38296 15.8037 5.49356 15.8781 5.61542 15.9289C5.73728 15.9797 5.86799 16.0058 6 16.0058C6.13201 16.0058 6.26272 15.9797 6.38458 15.9289C6.50644 15.8781 6.61704 15.8037 6.71 15.71C6.80373 15.617 6.87812 15.5064 6.92889 15.3846C6.97966 15.2627 7.0058 15.132 7.0058 15C7.0058 14.868 6.97966 14.7373 6.92889 14.6154C6.87812 14.4936 6.80373 14.383 6.71 14.29L5.41 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/ArrowRight.vue b/src/components/Icon/icons/ArrowRight.vue
@@ -0,0 +1,18 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M3 12H21"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+		<path
+			d="M18 15L21 12L18 9"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Attention.vue b/src/components/Icon/icons/Attention.vue
@@ -0,0 +1,8 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M13 2V16.5H11V2H13ZM11 19H13.004V21.004H11V19Z"
+			fill="currentColor"
+		/>
+	</svg>
+</template>
diff --git a/src/components/Icon/icons/Book.vue b/src/components/Icon/icons/Book.vue
@@ -0,0 +1,13 @@
+<template>
+	<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+		<path
+			d="M4 8C4 5.17157 4 3.75736 4.87868 2.87868C5.75736 2 7.17157 2 10 2H14C16.8284 2 18.2426 2 19.1213 2.87868C20 3.75736 20 5.17157 20 8V16C20 18.8284 20 20.2426 19.1213 21.1213C18.2426 22 16.8284 22 14 22H10C7.17157 22 5.75736 22 4.87868 21.1213C4 20.2426 4 18.8284 4 16V8Z"
+			stroke="currentColor"
+		/>
+		<path
+			d="M19.8978 16H7.89778C6.96781 16 6.50282 16 6.12132 16.1022C5.08604 16.3796 4.2774 17.1883 4 18.2235"
+			stroke="currentColor"
+		/>
+		<path d="M7 16V2.5" stroke="currentColor" stroke-linecap="round" />
+	</svg>
+</template>