fix(striker-ui): add colour presets in ContainedButton

striker-ui/components/ConfirmDialog.tsx

@@ -10,22 +10,12 @@ import {
   useState,
 } from 'react';
 
-import { BLUE, RED, TEXT } from '../lib/consts/DEFAULT_THEME';
-
 import ContainedButton from './ContainedButton';
 import FlexBox from './FlexBox';
 import { Panel, PanelHeader } from './Panels';
 import Spinner from './Spinner';
 import { BodyText, HeaderText } from './Text';
 
-const MAP_TO_COLOUR: Record<
-  Exclude<ConfirmDialogProps['proceedColour'], undefined>,
-  string
-> = {
-  blue: BLUE,
-  red: RED,
-};
-
 const ConfirmDialog = forwardRef<
   ConfirmDialogForwardedRefContent,
   ConfirmDialogProps
@@ -53,7 +43,7 @@ const ConfirmDialog = forwardRef<
       openInitially = false,
       preActionArea,
       proceedButtonProps = {},
-      proceedColour: proceedColourKey = 'blue',
+      proceedColour = 'blue',
       scrollContent: isScrollContent = false,
       scrollBoxProps: { sx: scrollBoxSx, ...restScrollBoxProps } = {},
       titleText,
@@ -63,7 +53,6 @@ const ConfirmDialog = forwardRef<
     const { sx: paperSx, ...restPaperProps } = paperProps;
     const {
       disabled: proceedButtonDisabled = isDisableProceed,
-      sx: proceedButtonSx,
       ...restProceedButtonProps
     } = proceedButtonProps;
 
@@ -75,10 +64,6 @@ const ConfirmDialog = forwardRef<
       () => (ref ? isOpen : baseOpen),
       [baseOpen, isOpen, ref],
     );
-    const proceedColour = useMemo(
-      () => MAP_TO_COLOUR[proceedColourKey],
-      [proceedColourKey],
-    );
     const {
       contentContainerComponent,
       contentContainerSubmitEventHandler,
@@ -146,18 +131,11 @@ const ConfirmDialog = forwardRef<
     const proceedButtonElement = useMemo(
       () => (
         <ContainedButton
+          background={proceedColour}
           disabled={proceedButtonDisabled}
           onClick={proceedButtonClickEventHandler}
           type={proceedButtonType}
           {...restProceedButtonProps}
-          sx={{
-            backgroundColor: proceedColour,
-            color: TEXT,
-
-            '&:hover': { backgroundColor: `${proceedColour}F0` },
-
-            ...proceedButtonSx,
-          }}
         >
           {actionProceedText}
         </ContainedButton>
@@ -166,7 +144,6 @@ const ConfirmDialog = forwardRef<
         actionProceedText,
         proceedButtonClickEventHandler,
         proceedButtonDisabled,
-        proceedButtonSx,
         proceedButtonType,
         proceedColour,
         restProceedButtonProps,

striker-ui/components/ContainedButton.tsx

@@ -1,34 +1,62 @@
 import {
-  Button as MUIButton,
+  Button as MuiButton,
   buttonClasses as muiButtonClasses,
-  SxProps,
-  Theme,
+  styled,
 } from '@mui/material';
-import { FC, useMemo } from 'react';
+import { FC } from 'react';
 
-import { BLACK, DISABLED, GREY } from '../lib/consts/DEFAULT_THEME';
+import {
+  BLACK,
+  BLUE,
+  DISABLED,
+  GREY,
+  RED,
+  TEXT,
+} from '../lib/consts/DEFAULT_THEME';
+
+const MAP_TO_COLOUR: Record<ContainedButtonBackground, string> = {
+  blue: BLUE,
+  normal: GREY,
+  red: RED,
+};
 
-const ContainedButton: FC<ContainedButtonProps> = ({ sx, ...restProps }) => {
-  const combinedSx = useMemo<SxProps<Theme>>(
-    () => ({
-      backgroundColor: GREY,
-      color: BLACK,
-      textTransform: 'none',
+const BaseStyle = styled(MuiButton)({
+  backgroundColor: GREY,
+  color: BLACK,
+  textTransform: 'none',
 
-      '&:hover': {
-        backgroundColor: `${GREY}F0`,
-      },
+  '&:hover': {
+    backgroundColor: `${GREY}F0`,
+  },
 
-      [`&.${muiButtonClasses.disabled}`]: {
-        backgroundColor: DISABLED,
-      },
+  [`&.${muiButtonClasses.disabled}`]: {
+    backgroundColor: DISABLED,
+  },
+});
 
-      ...sx,
-    }),
-    [sx],
-  );
+const Base: FC<ContainedButtonProps> = (props) => (
+  <BaseStyle variant="contained" {...props} />
+);
 
-  return <MUIButton variant="contained" {...restProps} sx={combinedSx} />;
-};
+const ContainedButton = styled(Base)((props) => {
+  const { background = 'normal' } = props;
+
+  let bg: string | undefined;
+  let color: string | undefined;
+
+  if (background !== 'normal') {
+    bg = MAP_TO_COLOUR[background];
+    color = TEXT;
+  }
+
+  return {
+    backgroundColor: bg,
+    color,
+
+    '&:hover': {
+      backgroundColor: `${bg}F0`,
+    },
+  };
+});
 
 export default ContainedButton;

striker-ui/types/ContainedButton.d.ts

@@ -1 +1,8 @@
-type ContainedButtonProps = import('@mui/material').ButtonProps;
+type ContainedButtonBackground = 'blue' | 'normal' | 'red';
+
+type ContainedButtonOptionalProps = {
+  background?: ContainedButtonBackground;
+};
+
+type ContainedButtonProps = import('@mui/material').ButtonProps &
+  ContainedButtonOptionalProps;