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 = { contained: ContainedIconButton, normal: NormalIconButton, + redcontained: RedContainedIconButton, }; const IconButton: FC = ({ 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[0]; type IconButtonPresetMapToStateIconBundle = | 'add' | 'close' + | 'delete' | 'edit' | 'play' | 'visibility'; @@ -14,7 +15,7 @@ type IconButtonStateIconBundle = { type IconButtonMapToStateIconBundle = Record; -type IconButtonVariant = 'contained' | 'normal'; +type IconButtonVariant = 'contained' | 'normal' | 'redcontained'; type IconButtonMouseEventHandler = import('@mui/material').IconButtonProps['onClick'];