feat: wrapped CircularProgress

feat: wrapped CircularProgress

packages/odyssey-react-mui/src/CircularProgress.tsx

@@ -0,0 +1,24 @@
+/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { CircularProgress as MuiCircularProgress } from "@mui/material";
+
+export type CircularProgressProps = {
+  value?: number;
+};
+
+export const CircularProgress = ({ value }: CircularProgressProps) => (
+  <MuiCircularProgress
+    value={value}
+    variant={value ? "determinate" : "indeterminate"}
+  />
+);

packages/odyssey-react-mui/src/index.ts

@@ -16,7 +16,6 @@ export {
   Box,
   Button,
   Chip,
-  CircularProgress,
   createTheme,
   CssBaseline,
   Dialog,
@@ -69,7 +68,6 @@ export type {
   BoxProps,
   ButtonProps,
   ChipProps,
-  CircularProgressProps,
   CssBaselineProps,
   DialogProps,
   DialogActionsProps,
@@ -127,6 +125,7 @@ export { deepmerge, visuallyHidden } from "@mui/utils";
 export * from "./Banner";
 export * from "./Checkbox";
 export * from "./CheckboxGroup";
+export * from "./CircularProgress";
 export * from "./createUniqueId";
 export * from "./Icon";
 export * from "./iconDictionary";

packages/odyssey-storybook/src/components/odyssey-mui/CircularProgress/CircularProgress.stories.tsx

@@ -28,12 +28,9 @@ export default {
     },
   },
   argTypes: {
-    variant: {
-      options: ["indeterminate", "determinate"],
-      control: { type: "radio" },
-    },
     value: {
       control: { type: "number" },
+      defaultValue: undefined,
     },
   },
   decorators: [MuiThemeDecorator],
@@ -48,6 +45,5 @@ Indeterminate.args = {};
 
 export const Determinate = Template.bind({});
 Determinate.args = {
-  variant: "determinate",
   value: 70,
 };