From 3376d5e4eff537495e72972c91355d15ffe2a873 Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Mon, 19 Jun 2023 20:49:42 -0400
Subject: [PATCH] fix(striker-ui): add delete preset to IconButton

---
 striker-ui/components/IconButton/IconButton.tsx | 17 +++++++++++++++++
 striker-ui/types/IconButton.d.ts                |  3 ++-
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/striker-ui/components/IconButton/IconButton.tsx b/striker-ui/components/IconButton/IconButton.tsx
index 9d73871c..1164d6e3 100644
--- a/striker-ui/components/IconButton/IconButton.tsx
+++ b/striker-ui/components/IconButton/IconButton.tsx
@@ -1,4 +1,5 @@
 import {
+  Delete as MUIDeleteIcon,
   Add as MUIAddIcon,
   Close as MUICloseIcon,
   Done as MUIDoneIcon,
@@ -21,6 +22,7 @@ import {
   BORDER_RADIUS,
   DISABLED,
   GREY,
+  RED,
 } from '../../lib/consts/DEFAULT_THEME';
 
 type IconButtonProps = IconButtonOptionalProps & MUIIconButtonProps;
@@ -39,6 +41,15 @@ const ContainedIconButton = styled(MUIIconButton)({
   },
 });
 
+const RedContainedIconButton = styled(ContainedIconButton)({
+  backgroundColor: RED,
+  color: GREY,
+
+  '&:hover': {
+    backgroundColor: `${RED}F0`,
+  },
+});
+
 const NormalIconButton = styled(MUIIconButton)({
   color: GREY,
 });
@@ -51,6 +62,10 @@ const MAP_TO_CLOSE_ICON: IconButtonMapToStateIconBundle = {
   none: { iconType: MUICloseIcon },
 };
 
+const MAP_TO_DELETE_ICON: IconButtonMapToStateIconBundle = {
+  none: { iconType: MUIDeleteIcon },
+};
+
 const MAP_TO_EDIT_ICON: IconButtonMapToStateIconBundle = {
   false: { iconType: MUIEditIcon },
   true: { iconType: MUIDoneIcon, iconProps: { sx: { color: BLUE } } },
@@ -71,6 +86,7 @@ const MAP_TO_MAP_PRESET: Record<
 > = {
   add: MAP_TO_ADD_ICON,
   close: MAP_TO_CLOSE_ICON,
+  delete: MAP_TO_DELETE_ICON,
   edit: MAP_TO_EDIT_ICON,
   play: MAP_TO_PLAY_ICON,
   visibility: MAP_TO_VISIBILITY_ICON,
@@ -79,6 +95,7 @@ const MAP_TO_MAP_PRESET: Record<
 const MAP_TO_VARIANT: Record<IconButtonVariant, CreatableComponent> = {
   contained: ContainedIconButton,
   normal: NormalIconButton,
+  redcontained: RedContainedIconButton,
 };
 
 const IconButton: FC<IconButtonProps> = ({
diff --git a/striker-ui/types/IconButton.d.ts b/striker-ui/types/IconButton.d.ts
index 208fae3a..1693ef0f 100644
--- a/striker-ui/types/IconButton.d.ts
+++ b/striker-ui/types/IconButton.d.ts
@@ -3,6 +3,7 @@ type CreatableComponent = Parameters<typeof import('react').createElement>[0];
 type IconButtonPresetMapToStateIconBundle =
   | 'add'
   | 'close'
+  | 'delete'
   | 'edit'
   | 'play'
   | 'visibility';
@@ -14,7 +15,7 @@ type IconButtonStateIconBundle = {
 
 type IconButtonMapToStateIconBundle = Record<string, IconButtonStateIconBundle>;
 
-type IconButtonVariant = 'contained' | 'normal';
+type IconButtonVariant = 'contained' | 'normal' | 'redcontained';
 
 type IconButtonMouseEventHandler =
   import('@mui/material').IconButtonProps['onClick'];