feat: introduce FlowSubstepTitle in FlowStep

packages/web/src/components/FlowSubstepTitle/index.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ErrorIcon from '@mui/icons-material/Error';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+
+import { ListItemButton, Typography} from './style';
+
+type FlowSubstepTitleProps = {
+  expanded?: boolean;
+  onClick: () => void;
+  title: string;
+  valid?: boolean | null;
+};
+
+function FlowSubstepTitle(props: FlowSubstepTitleProps): React.ReactElement {
+  const {
+    expanded = false,
+    onClick = () => null,
+    valid = null,
+    title,
+  } = props;
+
+  const hasValidation = valid !== null;
+
+  const validIcon = <CheckCircleIcon color="success" />;
+  const errorIcon = <ErrorIcon color="error" />;
+  const validationStatusIcon = valid ? validIcon : errorIcon;
+
+  return (
+    <ListItemButton onClick={onClick} selected={expanded} divider>
+      <Typography variant="body2">
+        {expanded ? <ExpandLessIcon /> : <ExpandMoreIcon />}
+        {title}
+      </Typography>
+
+      {hasValidation && validationStatusIcon}
+    </ListItemButton>
+  );
+}
+
+export default FlowSubstepTitle;

packages/web/src/components/FlowSubstepTitle/style.tsx

@@ -0,0 +1,13 @@
+import { styled } from '@mui/material/styles';
+import MuiListItemButton from '@mui/material/ListItemButton';
+import MuiTypography from '@mui/material/Typography';
+
+export const ListItemButton = styled(MuiListItemButton)`
+  justify-content: space-between;
+`;
+
+export const Typography = styled(MuiTypography)`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing(1)};
+`;