feat: add type props to share and edit buttons (#676)

* feat: add type props to share and edit buttons * fix: import expect from storybook/jest * feat: add classname and id to edit button * fix: use ActionButton.icon for icon type --------- Co-authored-by: Kim Lan Phan Hoang <pyphilia@gmail.com>
graasp · Jan 29, 2024 · b7d580a · b7d580a
1 parent 7411a5c
commit b7d580a
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 33 deletions.
diff --git 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
@@ -1,41 +1,59 @@
 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<Props> = ({
   id,
   className,
   ariaLabel,
   onClick,
-  tooltip = 'edit',
+  title = 'Edit',
   size = 'small',
+  type = ActionButton.ICON_BUTTON,
 }) => {
-  return (
-    <Tooltip title={tooltip}>
-      <span>
-        <IconButton
-          id={id}
-          aria-label={ariaLabel}
-          className={className}
-          onClick={onClick}
-          size={size}
-        >
-          <EditIcon />
-        </IconButton>
-      </span>
-    </Tooltip>
-  );
+  switch (type) {
+    case ActionButton.MENU_ITEM:
+      return (
+        <MenuItem key={title} onClick={onClick} id={id} className={className}>
+          <ListItemIcon>
+            <EditIcon />
+          </ListItemIcon>
+          <ListItemText>{title}</ListItemText>
+        </MenuItem>
+      );
+    case ActionButton.ICON_BUTTON:
+    default:
+      return (
+        <Tooltip title={title}>
+          <span>
+            <IconButton
+              id={id}
+              aria-label={ariaLabel}
+              className={className}
+              onClick={onClick}
+              size={size}
+            >
+              <EditIcon />
+            </IconButton>
+          </span>
+        </Tooltip>
+      );
+  }
 };
 
 export default EditButton;
diff --git 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
@@ -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<HTMLButtonElement>;
+  onClick?: MouseEventHandler;
   ariaLabel?: string;
   className?: string;
   size?: IconButtonProps['size'];
   id?: string;
+  type?: ActionButtonVariant;
 };
 
 const ShareButton: FC<Props> = ({
@@ -23,22 +27,36 @@ const ShareButton: FC<Props> = ({
   id,
   onClick,
   size,
+  type = ActionButton.ICON_BUTTON,
 }) => {
-  return (
-    <Tooltip title={tooltip}>
-      <span>
-        <IconButton
-          aria-label={ariaLabel ?? tooltip}
-          className={className}
-          onClick={onClick}
-          id={id}
-          size={size}
-        >
-          {open ? <CloseIcon /> : <Groups />}
-        </IconButton>
-      </span>
-    </Tooltip>
-  );
+  switch (type) {
+    case ActionButton.MENU_ITEM:
+      return (
+        <MenuItem key={tooltip} className={className} onClick={onClick}>
+          <ListItemIcon>
+            <Groups />
+          </ListItemIcon>
+          <ListItemText>{tooltip}</ListItemText>
+        </MenuItem>
+      );
+    case ActionButton.ICON_BUTTON:
+    default:
+      return (
+        <Tooltip title={tooltip}>
+          <span>
+            <IconButton
+              aria-label={ariaLabel ?? tooltip}
+              className={className}
+              onClick={onClick}
+              id={id}
+              size={size}
+            >
+              {open ? <CloseIcon /> : <Groups />}
+            </IconButton>
+          </span>
+        </Tooltip>
+      );
+  }
 };
 
 export default ShareButton;