diff --git a/packages/react/.storybook/story-config.ts b/packages/react/.storybook/story-config.ts index c34b0de5..4d282768 100644 --- a/packages/react/.storybook/story-config.ts +++ b/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`, }, diff --git a/packages/react/src/components/CircularProgress/CircularProgress.stories.mdx b/packages/react/src/components/CircularProgress/CircularProgress.stories.mdx new file mode 100644 index 00000000..dbb18313 --- /dev/null +++ b/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, +}; + + + +export const Template = args => ; + +# Circular Progress + +- [Overview](#overview) +- [Props](#props) +- [Usage](#usage) + +## Overview + +Use CircularProgress as a spinner or progress indicator. + + + {Template.bind({})} + + +## Props + + + +## Usage + +Import and use the `CircularProgress` component in your components as follows. + + diff --git a/packages/react/src/components/CircularProgress/CircularProgress.tsx b/packages/react/src/components/CircularProgress/CircularProgress.tsx new file mode 100644 index 00000000..7f4f5128 --- /dev/null +++ b/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 & WithWrapperProps = (props: CircularProgressProps): ReactElement => { + const {className, ...rest} = props; + + const classes: string = clsx('oxygen-circular-progress', className); + + return ; +}; + +CircularProgress.displayName = composeComponentDisplayName(COMPONENT_NAME); +CircularProgress.muiName = COMPONENT_NAME; +CircularProgress.defaultProps = {}; + +export default CircularProgress; diff --git a/packages/react/src/components/CircularProgress/__tests__/CircularProgress.test.tsx b/packages/react/src/components/CircularProgress/__tests__/CircularProgress.test.tsx new file mode 100644 index 00000000..e395f8a2 --- /dev/null +++ b/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(); + expect(baseElement).toBeTruthy(); + }); + + it('should match the snapshot', () => { + const {baseElement} = render(); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/components/CircularProgress/__tests__/__snapshots__/CircularProgress.test.tsx.snap b/packages/react/src/components/CircularProgress/__tests__/__snapshots__/CircularProgress.test.tsx.snap new file mode 100644 index 00000000..c681e290 --- /dev/null +++ b/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`] = ` + +
+ + + + + +
+ +`; diff --git a/packages/react/src/components/CircularProgress/circular-progress.scss b/packages/react/src/components/CircularProgress/circular-progress.scss new file mode 100644 index 00000000..cb1326e1 --- /dev/null +++ b/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 */ +} diff --git a/packages/react/src/components/CircularProgress/index.ts b/packages/react/src/components/CircularProgress/index.ts new file mode 100644 index 00000000..1975b8e1 --- /dev/null +++ b/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';