add SemiCircleProgress

CHANGELOG.md

@@ -4,6 +4,7 @@
 ### Added
 
 - Added `disabled` prop to `Radio`  #425  by @namakshenas
+- Added `SemiCircleProgress` component #434 by @AnnMarieW
 
 ### Fixed
 - Fixed closing of Popovers when clicking outside. #423 by @magicmq

src/ts/components/core/SemiCircleProgress.tsx

@@ -0,0 +1,55 @@
+import {
+    MantineColor,
+    SemiCircleProgress as MantineSemiCircleProgess,
+} from "@mantine/core";
+import { BoxProps } from "props/box";
+import { DashBaseProps } from "props/dash";
+import { StylesApiProps } from "props/styles";
+import React from "react";
+
+interface Props extends BoxProps, StylesApiProps, DashBaseProps {
+     /** Progress value from `0` to `100` */
+      value: number;
+
+      /** Diameter of the svg in px, `200` by default */
+      size?: number;
+
+      /** Circle thickness in px, `12` by default */
+      thickness?: number;
+
+      /** Orientation of the circle, `'up'` by default */
+      orientation?: 'up' | 'down';
+
+      /** Direction from which the circle is filled, `'left-to-right'` by default */
+      fillDirection?: 'right-to-left' | 'left-to-right';
+
+      /** Key of `theme.colors` or any valid CSS color value, `theme.primaryColor` by default */
+      filledSegmentColor?: MantineColor;
+
+      /** Key of `theme.colors` or any valid CSS color value, by default the value is determined based on the color scheme value */
+      emptySegmentColor?: MantineColor;
+
+      /** Transition duration of filled section styles changes in ms, `0` by default */
+      transitionDuration?: number;
+
+      /** Label rendered inside the circle */
+      label?: React.ReactNode;
+
+      /** Label position relative to the circle center, `'bottom'` by default */
+      labelPosition?: 'center' | 'bottom';
+}
+
+/** Use to represent progress with semi circle diagram */
+const SemiCircleProgress = (props: Props) => {
+    const { setProps, loading_state, ...others } = props;
+
+    return (
+        <MantineSemiCircleProgess
+            {...others}
+        />
+    );
+};
+
+SemiCircleProgress.defaultProps = {};
+
+export default SemiCircleProgress;

src/ts/index.ts

@@ -112,6 +112,7 @@ import ProgressSection from "./components/core/progress/ProgressSection";
 import Radio from "./components/core/radio/Radio";
 import RadioGroup from "./components/core/radio/RadioGroup";
 import RangeSlider from "./components/core/slider/RangeSlider";
+import SemiCircleProgress from "./components/core/SemiCircleProgress";
 import Slider from "./components/core/slider/Slider";
 import Stepper from "./components/core/stepper/Stepper";
 import StepperCompleted from "./components/core/stepper/StepperCompleted";
@@ -264,6 +265,7 @@ export {
     RangeSlider,
     Rating,
     RingProgress,
+    SemiCircleProgress,
     ScatterChart,
     ScrollArea,
     SegmentedControl,