Skip to content

Commit 67733de

Browse files
blesildaramirezblesildaramirez
authored
pkp/pkp-lib#10033 Add new dropdown menu component (#363)
* pkp/pkp-lib#10033 Add MoreOptions icon in Icon Gallery/components * pkp/pkp-lib#10033 Add DropdownMenu component * pkp/pkp-lib#10033 Change classes used for white bg and set min width * pkp/pkp-lib#10033 Only use white bg for dropdown button if not using ellipsis menu * pkp/pkp-lib#10033 Rename newly added component from DropdownMenu to DropdownActions * pkp/pkp-lib#10033 Add click user event when rendering stories for DropdownActions component * pkp/pkp-lib#10033 Add ariaLabel prop when using ellipsis menu * pkp/pkp-lib#i10033 Implement code review suggestions * pkp/pkp#10033 Update documentation and validations for the DropdownActions component * pkp/pkp-lib#10033 Add validator for direction prop * pkp/pkp-lib#10033 Add select options for Dropdown controls in Storybook * pkp/pkp-lib#10033 Update documentation for the DropdownActions component * pkp/pkp-lib#10033 Add Accessibility section in DropdownActions documentation
1 parent 50e3204 commit 67733de

File tree

6 files changed

+264
-0
lines changed

6 files changed

+264
-0
lines changed

‎src/components/DropdownActions/DropdownActions.mdx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import {Primary, Controls, Stories, Meta, Description} from '@storybook/blocks';
2+
import DropdownActions from './DropdownActions.vue';
3+
4+
import * as DropdownActionsStories from './DropdownActions.stories.js';
5+
6+
<Meta of={DropdownActionsStories} />
7+
8+
# Dropdown Actions
9+
10+
## Usage
11+
12+
This component renders a dropdown menu that displays a list of actions. To use an ellipsis menu, set `displayAsEllipsis` to `true`. Otherwise, the `label` prop will be used as the dropdown button text.
13+
14+
## Accesibility
15+
16+
When the ellipsis menu is enabled by setting `displayAsEllipsis` to `true`, the `label` prop provides descriptive text for the "More Options" icon. In this case, the `ariaLabel` prop can be used to further specify the function of the button for screen readers.
17+
18+
For dropdowns with text, you can provide an `ariaLabel` prop to set the `aria-label` attribute on the dropdown button, ensuring that it is fully described for screen readers. This enhances accessibility without relying solely on the surrounding visual context.
19+
20+
<Primary />
21+
<Controls />
22+
<Stories />

‎src/components/DropdownActions/DropdownActions.stories.js

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import DropdownActions from './DropdownActions.vue';
2+
import {within, userEvent} from '@storybook/test';
3+
4+
export default {
5+
title: 'Components/DropdownActions',
6+
component: DropdownActions,
7+
render: (args) => ({
8+
components: {DropdownActions},
9+
setup() {
10+
return {args};
11+
},
12+
template: '<DropdownActions v-bind="args" />',
13+
}),
14+
argTypes: {
15+
direction: {
16+
control: {type: 'select'},
17+
options: ['left', 'right'],
18+
},
19+
},
20+
decorators: [
21+
() => ({
22+
template:
23+
'<div style="height: 300px; padding: 10px;" class="text-center"><story/></div>',
24+
}),
25+
],
26+
};
27+
28+
const downloadActions = [
29+
{
30+
label: 'Author-Only Sections Displayed (PDF)',
31+
name: 'authorPdf',
32+
},
33+
{
34+
label: 'Author-Only Sections Displayed (XML)',
35+
name: 'authorXml',
36+
},
37+
{
38+
label: 'Editor Forms Shows All Review Sections (PDF)',
39+
name: 'editorPdf',
40+
},
41+
{
42+
label: 'Editor Forms Shows All Review Sections (XML)',
43+
name: 'editorXml',
44+
},
45+
];
46+
47+
export const Default = {
48+
args: {
49+
actions: downloadActions,
50+
label: 'Download Review Form',
51+
ariaLabel: 'Click to download content in the available formats',
52+
direction: 'left',
53+
},
54+
play: async ({canvasElement}) => {
55+
// Assigns canvas to the component root element
56+
const canvas = within(canvasElement);
57+
const user = userEvent.setup();
58+
59+
await user.click(canvas.getByText('Download Review Form'));
60+
},
61+
};
62+
63+
export const EllipsisMenu = {
64+
args: {
65+
actions: [
66+
{
67+
label: 'View',
68+
url: '#',
69+
icon: 'View',
70+
},
71+
{
72+
label: 'Email',
73+
url: '#',
74+
icon: 'Email',
75+
},
76+
{
77+
label: 'Login As',
78+
url: '#',
79+
icon: 'LoginAs',
80+
},
81+
{
82+
label: 'Remove User',
83+
url: '#',
84+
icon: 'Cancel',
85+
isWarnable: true,
86+
},
87+
{
88+
label: 'Disable User',
89+
url: '#',
90+
icon: 'DisableUser',
91+
isWarnable: true,
92+
},
93+
{
94+
label: 'Merge User',
95+
url: '#',
96+
icon: 'MergeUser',
97+
},
98+
],
99+
label: 'User management options',
100+
displayAsEllipsis: true,
101+
direction: 'left',
102+
},
103+
play: async ({canvasElement}) => {
104+
// Assigns canvas to the component root element
105+
const canvas = within(canvasElement);
106+
const user = userEvent.setup();
107+
108+
await user.click(canvas.getByText('User management options'));
109+
},
110+
};
111+
112+
export const RightAlignedMenu = {
113+
args: {
114+
actions: downloadActions,
115+
label: 'Right Aligned Menu',
116+
direction: 'right',
117+
},
118+
play: async ({canvasElement}) => {
119+
// Assigns canvas to the component root element
120+
const canvas = within(canvasElement);
121+
const user = userEvent.setup();
122+
123+
await user.click(canvas.getByText('Right Aligned Menu'));
124+
},
125+
};

‎src/components/DropdownActions/DropdownActions.vue

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<template>
2+
<div class="relative inline-block items-start justify-between">
3+
<Menu as="div">
4+
<div>
5+
<MenuButton
6+
class="hover:bg-gray-50 inline-flex w-full justify-center gap-x-1.5 rounded px-3 py-2"
7+
:class="
8+
displayAsEllipsis
9+
? 'text-3xl-normal'
10+
: 'border border-light bg-secondary text-lg-normal'
11+
"
12+
:aria-label="ariaLabel || null"
13+
>
14+
<span :class="displayAsEllipsis ? 'sr-only' : ''">{{ label }}</span>
15+
<Icon
16+
class="-mr-1 h-5 w-5 text-primary"
17+
:icon="displayAsEllipsis ? 'MoreOptions' : 'Dropdown'"
18+
aria-hidden="true"
19+
/>
20+
</MenuButton>
21+
</div>
22+
23+
<transition
24+
enter-active-class="transition ease-out duration-100"
25+
enter-from-class="transform opacity-0 scale-95"
26+
enter-to-class="transform opacity-100 scale-100"
27+
leave-active-class="transition ease-in duration-75"
28+
leave-from-class="transform opacity-100 scale-100"
29+
leave-to-class="transform opacity-0 scale-95"
30+
>
31+
<MenuItems
32+
class="absolute z-10 w-max border border-light bg-secondary shadow focus:outline-none"
33+
:class="
34+
direction === 'right'
35+
? 'ltr:left-0 ltr:origin-top-left rtl:right-0 rtl:origin-top-left'
36+
: 'ltr:right-0 ltr:origin-top-right rtl:left-0 rtl:origin-top-right'
37+
"
38+
>
39+
<MenuItem v-for="(action, i) in actions" :key="i" v-slot="{active}">
40+
<div class="min-w-[96px]">
41+
<PkpButton
42+
v-if="isValidAction(action)"
43+
:element="action.url ? 'a' : 'button'"
44+
:href="action.url"
45+
:icon="action.icon"
46+
:is-active="active"
47+
:is-warnable="action.isWarnable"
48+
:class="i !== actions.length - 1 ? 'border-b' : ''"
49+
size-variant="fullWidth"
50+
class="border-light"
51+
@click="action.name"
52+
>
53+
{{ action.label }}
54+
</PkpButton>
55+
</div>
56+
</MenuItem>
57+
</MenuItems>
58+
</transition>
59+
</Menu>
60+
</div>
61+
</template>
62+
63+
<script setup>
64+
import {Menu, MenuButton, MenuItem, MenuItems} from '@headlessui/vue';
65+
66+
defineProps({
67+
/** An array of action objects. Each object should contain `label` (string), `url` (string) to navigate to if the action involves a link, or `name` (string) to perform the action when clicked, an optional `icon` (string) and `isWarnable` (boolean) if the button needs the "warning" button styling from `<Button>` component. */
68+
actions: {
69+
type: Array,
70+
required: true,
71+
validator: (actions) => {
72+
return actions.every((action) => {
73+
const hasLabel =
74+
typeof action.label === 'string' && action.label.trim() !== '';
75+
const hasAction = action.url || action.name;
76+
return hasLabel && hasAction;
77+
});
78+
},
79+
},
80+
/** The text label for the button. This is required. If `displayAsEllipsis` is `true`, the label will be used for accessibility. */
81+
label: {
82+
type: String,
83+
required: true,
84+
},
85+
/** If `true`, the button will display an ellipsis (`...`) */
86+
displayAsEllipsis: {
87+
type: Boolean,
88+
default: false,
89+
},
90+
/** The accessible label for the button, used by screen readers. This is optional. */
91+
ariaLabel: {
92+
type: String,
93+
default: '',
94+
},
95+
/** This specifies where the dropdown appears relative to the element, such as "left" or "right." */
96+
direction: {
97+
type: String,
98+
default: 'left',
99+
validator: (direction) => ['left', 'right'].includes(direction),
100+
},
101+
});
102+
103+
const isValidAction = (action) => {
104+
return action?.label && (action?.url || action?.name);
105+
};
106+
</script>

‎src/components/Icon/Icon.stories.js

+1
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,7 @@ export const iconGallery = {
9393
'Italics',
9494
'LoginAs',
9595
'MergeUser',
96+
'MoreOptions',
9697
'MySubmissions',
9798
'NavDoi',
9899
'Notifications',

‎src/components/Icon/Icon.vue

+2
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ import Issues from './icons/Issues.vue';
7171
import Italics from './icons/Italics.vue';
7272
import LoginAs from './icons/LoginAs.vue';
7373
import MergeUser from './icons/MergeUser.vue';
74+
import MoreOptions from './icons/MoreOptions.vue';
7475
import MySubmissions from './icons/MySubmissions.vue';
7576
import NavDoi from './icons/NavDoi.vue';
7677
import Notifications from './icons/Notifications.vue';
@@ -126,6 +127,7 @@ const svgIcons = {
126127
Italics,
127128
LoginAs,
128129
MergeUser,
130+
MoreOptions,
129131
MySubmissions,
130132
NavDoi,
131133
Notifications,

‎src/components/Icon/icons/MoreOptions.vue

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
3+
<path
4+
d="M4.5 10.5C3.675 10.5 3 11.175 3 12C3 12.825 3.675 13.5 4.5 13.5C5.325 13.5 6 12.825 6 12C6 11.175 5.325 10.5 4.5 10.5ZM19.5 10.5C18.675 10.5 18 11.175 18 12C18 12.825 18.675 13.5 19.5 13.5C20.325 13.5 21 12.825 21 12C21 11.175 20.325 10.5 19.5 10.5ZM12 10.5C11.175 10.5 10.5 11.175 10.5 12C10.5 12.825 11.175 13.5 12 13.5C12.825 13.5 13.5 12.825 13.5 12C13.5 11.175 12.825 10.5 12 10.5Z"
5+
fill="currentColor"
6+
/>
7+
</svg>
8+
</template>

0 commit comments

Comments
 (0)