feat: create circular progress indicator (#95)

src/components/common/Progress/components/CircularProgress/circularProgress.styles.ts

@@ -0,0 +1,6 @@
+import styled from "@emotion/styled";
+
+export const ProgressPositioner = styled.div`
+  display: flex;
+  position: relative; /* positions track */
+`;

src/components/common/Progress/components/CircularProgress/circularProgress.tsx

@@ -0,0 +1,26 @@
+import {
+  CircularProgress as MCircularProgress,
+  CircularProgressProps as MCircularProgressProps,
+} from "@mui/material";
+import React, { ElementType } from "react";
+import { ProgressPositioner } from "./circularProgress.styles";
+import { CircularProgressTrack } from "./components/CircularProgressTrack/circularProgressTrack";
+
+export interface CircularProgressProps extends MCircularProgressProps {
+  className?: string;
+  Track?: ElementType<CircularProgressProps>;
+}
+
+export const CircularProgress = ({
+  className,
+  value,
+  Track = CircularProgressTrack,
+  ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */
+}: CircularProgressProps): JSX.Element => {
+  return (
+    <ProgressPositioner className={className}>
+      <Track {...props} />
+      <MCircularProgress value={value} {...props} />
+    </ProgressPositioner>
+  );
+};

src/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.styles.ts

@@ -0,0 +1,33 @@
+import styled from "@emotion/styled";
+import { CircularProgress as MCircularProgress } from "@mui/material";
+import {
+  alertLight,
+  infoLight,
+  smokeLight,
+  successLight,
+  warningLight,
+} from "../../../../../../../styles/common/mixins/colors";
+
+export const CircularProgress = styled(MCircularProgress)`
+  color: ${smokeLight};
+  left: 0;
+  position: absolute;
+  top: 0;
+  z-index: 0;
+
+  &.MuiCircularProgress-colorAlert {
+    color: ${alertLight};
+  }
+
+  &.MuiCircularProgress-colorInfo {
+    color: ${infoLight};
+  }
+
+  &.MuiCircularProgress-colorSuccess {
+    color: ${successLight};
+  }
+
+  &.MuiCircularProgress-colorWarning {
+    color: ${warningLight};
+  }
+`;

src/components/common/Progress/components/CircularProgress/components/CircularProgressTrack/circularProgressTrack.tsx

@@ -0,0 +1,23 @@
+import { CircularProgressProps as MCircularProgressProps } from "@mui/material";
+import React, { Fragment } from "react";
+import { CircularProgress } from "./circularProgressTrack.styles";
+
+export interface CircularProgressTrackProps extends MCircularProgressProps {
+  className?: string;
+  track?: boolean;
+}
+
+export const CircularProgressTrack = ({
+  className,
+  track = true,
+  value = 100,
+  ...props /* Spread props to allow for CircularProgress specific props e.g. "disableShrink". */
+}: CircularProgressTrackProps): JSX.Element => {
+  return (
+    <Fragment>
+      {track && (
+        <CircularProgress className={className} value={value} {...props} />
+      )}
+    </Fragment>
+  );
+};

src/styles/common/mixins/colors.ts

@@ -2,6 +2,8 @@ import { CommonColors, PaletteColor } from "@mui/material/styles/createPalette";
 import { ThemeProps } from "../../../theme/theme";
 
 // Alert
+export const alertLight = ({ theme }: ThemeProps): PaletteColor["light"] =>
+  theme.palette.alert.light;
 export const alertLightest = ({
   theme,
 }: ThemeProps): PaletteColor["lightest"] => theme.palette.alert.lightest;
@@ -13,8 +15,6 @@ export const errorMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
   theme.palette.error.main;
 
 // Info
-export const infoDark = ({ theme }: ThemeProps): PaletteColor["dark"] =>
-  theme.palette.info.dark;
 export const infoLight = ({ theme }: ThemeProps): PaletteColor["light"] =>
   theme.palette.info.light;
 export const infoLightest = ({ theme }: ThemeProps): PaletteColor["lightest"] =>
@@ -23,12 +23,8 @@ export const infoMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
   theme.palette.info.main;
 
 // Ink
-export const inkDark = ({ theme }: ThemeProps): PaletteColor["dark"] =>
-  theme.palette.ink.dark;
 export const inkLight = ({ theme }: ThemeProps): PaletteColor["light"] =>
   theme.palette.ink.light;
-export const inkLightest = ({ theme }: ThemeProps): PaletteColor["lightest"] =>
-  theme.palette.ink.lightest;
 export const inkMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
   theme.palette.ink.main;
 
@@ -50,13 +46,17 @@ export const smokeMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
   theme.palette.smoke.main;
 
 // Success
+export const successLight = ({ theme }: ThemeProps): PaletteColor["light"] =>
+  theme.palette.success.light;
 export const successLightest = ({
   theme,
 }: ThemeProps): PaletteColor["lightest"] => theme.palette.success.lightest;
 export const successMain = ({ theme }: ThemeProps): PaletteColor["main"] =>
   theme.palette.success.main;
 
 // Warning
+export const warningLight = ({ theme }: ThemeProps): PaletteColor["light"] =>
+  theme.palette.warning.light;
 export const warningLightest = ({
   theme,
 }: ThemeProps): PaletteColor["lightest"] => theme.palette.warning.lightest;

src/theme/common/components.ts

@@ -615,6 +615,33 @@ export const MuiChip = (theme: Theme): Components["MuiChip"] => {
   };
 };
 
+/**
+ * MuiCircularProgress Component
+ * @param theme - Theme.
+ * @returns MuiCircularProgress component theme styles.
+ */
+export const MuiCircularProgress = (
+  theme: Theme
+): Components["MuiCircularProgress"] => {
+  return {
+    styleOverrides: {
+      circle: {
+        strokeLinecap: "round",
+      },
+    },
+    variants: [
+      {
+        props: {
+          color: "alert",
+        },
+        style: {
+          backgroundColor: theme.palette.alert.main,
+        },
+      },
+    ],
+  };
+};
+
 /**
  * MuiCssBaseline Component
  * @param theme - Theme.

src/theme/theme.ts

@@ -83,6 +83,7 @@ export function createAppTheme(customOptions?: ThemeOptions): Theme {
     MuiCard: C.MuiCard,
     MuiCheckbox: C.MuiCheckbox(theme),
     MuiChip: C.MuiChip(theme),
+    MuiCircularProgress: C.MuiCircularProgress(theme),
     MuiCssBaseline: C.MuiCssBaseline(theme),
     MuiDialog: C.MuiDialog(theme),
     MuiDialogActions: C.MuiDialogActions,

types/data-explorer-ui.d.ts

@@ -3,6 +3,7 @@ import type {} from "@mui/material/Alert";
 import type {} from "@mui/material/Button";
 import type {} from "@mui/material/Checkbox";
 import type {} from "@mui/material/Chip";
+import type {} from "@mui/material/CircularProgress";
 import type {} from "@mui/material/IconButton";
 import type {} from "@mui/material/Paper";
 import type {} from "@mui/material/styles";
@@ -54,6 +55,15 @@ declare module "@mui/material/Button" {
   }
 }
 
+/**
+ * CircularProgress prop options.
+ */
+declare module "@mui/material/CircularProgress" {
+  interface CircularProgressPropsColorOverrides {
+    alert: true;
+  }
+}
+
 /**
  * Checkbox prop options.
  */