diff --git a/src/buttons/EditButton/EditButton.stories.tsx b/src/buttons/EditButton/EditButton.stories.tsx index fe33a7475..7e2bb5afb 100644 --- a/src/buttons/EditButton/EditButton.stories.tsx +++ b/src/buttons/EditButton/EditButton.stories.tsx @@ -1,5 +1,8 @@ +import { expect } from '@storybook/jest'; import type { StoryObj } from '@storybook/react'; +import { userEvent, within } from '@storybook/testing-library'; +import { ActionButton } from '../../types'; import { TABLE_CATEGORIES } from '../../utils/storybook'; import EditButton from './EditButton'; @@ -37,3 +40,16 @@ export const Medium: Story = { size: 'medium', }, }; + +export const MenuItem: Story = { + args: { + type: ActionButton.MENU_ITEM, + }, + play: async ({ args, canvasElement }) => { + const canvas = within(canvasElement); + + await userEvent.click(canvas.getByText('Edit')); + + expect(args.onClick).toHaveBeenCalled(); + }, +}; diff --git a/src/buttons/EditButton/EditButton.tsx b/src/buttons/EditButton/EditButton.tsx index 912969a06..aac7c8b26 100644 --- a/src/buttons/EditButton/EditButton.tsx +++ b/src/buttons/EditButton/EditButton.tsx @@ -1,16 +1,20 @@ import EditIcon from '@mui/icons-material/Edit'; +import { ListItemIcon, ListItemText, MenuItem } from '@mui/material'; import IconButton, { IconButtonProps } from '@mui/material/IconButton'; import Tooltip from '@mui/material/Tooltip'; import { FC, MouseEventHandler } from 'react'; +import { ActionButton, ActionButtonVariant } from '../../types'; + export type Props = { id?: string; className?: string; ariaLabel?: string; onClick?: MouseEventHandler; - tooltip?: string; + title?: string; size?: IconButtonProps['size']; + type?: ActionButtonVariant; }; const EditButton: FC = ({ @@ -18,24 +22,38 @@ const EditButton: FC = ({ className, ariaLabel, onClick, - tooltip = 'edit', + title = 'Edit', size = 'small', + type = ActionButton.ICON_BUTTON, }) => { - return ( - - - - - - - - ); + switch (type) { + case ActionButton.MENU_ITEM: + return ( + + + + + {title} + + ); + case ActionButton.ICON_BUTTON: + default: + return ( + + + + + + + + ); + } }; export default EditButton; diff --git a/src/buttons/ShareButton/ShareButton.stories.tsx b/src/buttons/ShareButton/ShareButton.stories.tsx index 1e1e00d2c..4bdb8fa19 100644 --- a/src/buttons/ShareButton/ShareButton.stories.tsx +++ b/src/buttons/ShareButton/ShareButton.stories.tsx @@ -1,5 +1,8 @@ +import { expect } from '@storybook/jest'; import type { Meta, StoryObj } from '@storybook/react'; +import { userEvent, within } from '@storybook/testing-library'; +import { ActionButton } from '../../types'; import { TABLE_CATEGORIES } from '../../utils/storybook'; import ShareButton from './ShareButton'; @@ -31,3 +34,16 @@ export const SharingOpen: Story = { open: true, }, }; + +export const MenuItem: Story = { + args: { + type: ActionButton.MENU_ITEM, + }, + play: async ({ args, canvasElement }) => { + const canvas = within(canvasElement); + + await userEvent.click(canvas.getByText('Share')); + + expect(args.onClick).toHaveBeenCalled(); + }, +}; diff --git a/src/buttons/ShareButton/ShareButton.tsx b/src/buttons/ShareButton/ShareButton.tsx index c00488cac..d5ec9146f 100644 --- a/src/buttons/ShareButton/ShareButton.tsx +++ b/src/buttons/ShareButton/ShareButton.tsx @@ -1,18 +1,22 @@ import CloseIcon from '@mui/icons-material/Close'; import Groups from '@mui/icons-material/Groups'; +import { ListItemIcon, ListItemText, MenuItem } from '@mui/material'; import IconButton, { IconButtonProps } from '@mui/material/IconButton'; import Tooltip from '@mui/material/Tooltip'; import { FC, MouseEventHandler } from 'react'; +import { ActionButton, ActionButtonVariant } from '../../types'; + export type Props = { tooltip?: string; open?: boolean; - onClick?: MouseEventHandler; + onClick?: MouseEventHandler; ariaLabel?: string; className?: string; size?: IconButtonProps['size']; id?: string; + type?: ActionButtonVariant; }; const ShareButton: FC = ({ @@ -23,22 +27,36 @@ const ShareButton: FC = ({ id, onClick, size, + type = ActionButton.ICON_BUTTON, }) => { - return ( - - - - {open ? : } - - - - ); + switch (type) { + case ActionButton.MENU_ITEM: + return ( + + + + + {tooltip} + + ); + case ActionButton.ICON_BUTTON: + default: + return ( + + + + {open ? : } + + + + ); + } }; export default ShareButton;