Merge pull request #35 from savindi7/feat-circular-progress

feat(react): add `CircularProgress` component

packages/react/.storybook/story-config.ts

@@ -20,6 +20,7 @@
 enum StorybookCategories {
   DataDisplay = 'Data Display',
   Foundations = 'Foundations',
+  Feedback = 'Feedback',
   Icons = 'Icons',
   Inputs = 'Inputs',
   Layout = 'Layout',
@@ -37,6 +38,7 @@ export type Stories =
   | 'Badge'
   | 'Box'
   | 'Button'
+  | 'CircularProgress'
   | 'Card'
   | 'CardActions'
   | 'CardContent'
@@ -111,6 +113,9 @@ const StoryConfig: StorybookConfig = {
   Button: {
     hierarchy: `${StorybookCategories.Inputs}/Button`,
   },
+  CircularProgress: {
+    hierarchy: `${StorybookCategories.Feedback}/Circular Progress`,
+  },
   Card: {
     hierarchy: `${StorybookCategories.Surfaces}/Card`,
   },

packages/react/src/components/CircularProgress/CircularProgress.stories.mdx

@@ -0,0 +1,42 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import CircularProgress from './CircularProgress.tsx';
+
+export const meta = {
+  component: CircularProgress,
+  title: StoryConfig.CircularProgress.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = args => <CircularProgress {...args} />;
+
+# Circular Progress
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Use CircularProgress as a spinner or progress indicator.
+
+<Canvas>
+  <Story name="Overview">{Template.bind({})}</Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `CircularProgress` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`import CircularProgress from '@oxygen-ui/react/CircularProgress';\n`}
+/>

packages/react/src/components/CircularProgress/CircularProgress.tsx

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with 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 MuiCircularProgress, {CircularProgressProps as MuiCircularProgressProps} from '@mui/material/CircularProgress';
+import clsx from 'clsx';
+import {FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import './circular-progress.scss';
+
+export type CircularProgressProps = MuiCircularProgressProps;
+
+const COMPONENT_NAME: string = 'CircularProgress';
+
+const CircularProgress: FC<CircularProgressProps> & WithWrapperProps = (props: CircularProgressProps): ReactElement => {
+  const {className, ...rest} = props;
+
+  const classes: string = clsx('oxygen-circular-progress', className);
+
+  return <MuiCircularProgress aria-label="progress" className={classes} {...rest} />;
+};
+
+CircularProgress.displayName = composeComponentDisplayName(COMPONENT_NAME);
+CircularProgress.muiName = COMPONENT_NAME;
+CircularProgress.defaultProps = {};
+
+export default CircularProgress;

packages/react/src/components/CircularProgress/__tests__/CircularProgress.test.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with 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 {render} from '@unit-testing';
+import CircularProgress from '../CircularProgress';
+
+describe('CircularProgress', () => {
+  it('should render successfully', () => {
+    const {baseElement} = render(<CircularProgress />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<CircularProgress />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});

packages/react/src/components/CircularProgress/__tests__/__snapshots__/CircularProgress.test.tsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CircularProgress should match the snapshot 1`] = `
+<body>
+  <div>
+    <span
+      aria-label="progress"
+      class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary oxygen-circular-progress css-b5eq2j-MuiCircularProgress-root"
+      role="progressbar"
+      style="width: 40px; height: 40px;"
+    >
+      <svg
+        class="MuiCircularProgress-svg css-1idz92c-MuiCircularProgress-svg"
+        viewBox="22 22 44 44"
+      >
+        <circle
+          class="MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate css-176wh8e-MuiCircularProgress-circle"
+          cx="44"
+          cy="44"
+          fill="none"
+          r="20.2"
+          stroke-width="3.6"
+        />
+      </svg>
+    </span>
+  </div>
+</body>
+`;

packages/react/src/components/CircularProgress/circular-progress.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with 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.
+ */
+
+.oxygen-circular-progress {
+  /* Add Styles */
+}

packages/react/src/components/CircularProgress/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
+ *
+ * WSO2 LLC. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with 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.
+ */
+
+export {default} from './CircularProgress';
+export type {CircularProgressProps} from './CircularProgress';