+
+export const Template = args => ;
+
+# Checkbox
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Checkboxes allow the user to select one or more items from a set.
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `Checkbox` component in your components as follows.
+
+
diff --git a/packages/react/src/components/Checkbox/Checkbox.tsx b/packages/react/src/components/Checkbox/Checkbox.tsx
new file mode 100644
index 00000000..619fdedc
--- /dev/null
+++ b/packages/react/src/components/Checkbox/Checkbox.tsx
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).
+ *
+ * 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 MuiCheckbox, {CheckboxProps as MuiCheckboxProps} from '@mui/material/Checkbox';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type CheckboxProps = MuiCheckboxProps;
+
+const COMPONENT_NAME: string = 'Checkbox';
+
+const Checkbox: ForwardRefExoticComponent & WithWrapperProps = forwardRef(
+ (props: CheckboxProps, ref: MutableRefObject): ReactElement => {
+ const {className, ...rest} = props;
+
+ const classes: string = clsx('oxygen-checkbox', className);
+
+ return ;
+ },
+) as ForwardRefExoticComponent & WithWrapperProps;
+
+Checkbox.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Checkbox.muiName = COMPONENT_NAME;
+Checkbox.defaultProps = {};
+
+export default Checkbox;
diff --git a/packages/react/src/components/Checkbox/__tests__/Checkbox.test.tsx b/packages/react/src/components/Checkbox/__tests__/Checkbox.test.tsx
new file mode 100644
index 00000000..cd2d4d4c
--- /dev/null
+++ b/packages/react/src/components/Checkbox/__tests__/Checkbox.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 Checkbox from '../Checkbox';
+
+describe('Checkbox', () => {
+ 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/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/packages/react/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
new file mode 100644
index 00000000..0f1bc19e
--- /dev/null
+++ b/packages/react/src/components/Checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox should match the snapshot 1`] = `
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/Checkbox/index.ts b/packages/react/src/components/Checkbox/index.ts
new file mode 100644
index 00000000..a33377af
--- /dev/null
+++ b/packages/react/src/components/Checkbox/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 './Checkbox';
+export type {CheckboxProps} from './Checkbox';
diff --git a/packages/react/src/components/Code/Code.stories.mdx b/packages/react/src/components/Code/Code.stories.mdx
new file mode 100644
index 00000000..da9c929a
--- /dev/null
+++ b/packages/react/src/components/Code/Code.stories.mdx
@@ -0,0 +1,52 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Code from './Code.tsx';
+
+export const meta = {
+ component: Code,
+ title: StoryConfig.Code.hierarchy,
+};
+
+
+
+export const Template = args => ;
+
+# Code
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Use `Code` to present Inline or block code without syntax highlight.
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `Code` component in your components as follows.
+
+
+ var text = "Hello World";
+
+ );
+}`}
+/>
diff --git a/packages/react/src/components/Code/Code.tsx b/packages/react/src/components/Code/Code.tsx
new file mode 100644
index 00000000..821cc62d
--- /dev/null
+++ b/packages/react/src/components/Code/Code.tsx
@@ -0,0 +1,48 @@
+/**
+ * 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 MuiTypography, {TypographyProps as MuiTypographyProps} from '@mui/material/Typography';
+import clsx from 'clsx';
+import {ElementType, FC, ReactElement} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+import './code.scss';
+
+export type CodeProps = {
+ component?: C;
+} & Omit, 'component'>;
+
+const COMPONENT_NAME: string = 'Code';
+
+const Code: FC & WithWrapperProps = (props: CodeProps): ReactElement => {
+ const {className, children, ...rest} = props;
+
+ const classes: string = clsx('oxygen-code', className);
+
+ return (
+
+ {children}
+
+ );
+};
+
+Code.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Code.muiName = COMPONENT_NAME;
+Code.defaultProps = {};
+
+export default Code;
diff --git a/packages/react/src/components/Code/__tests__/Code.test.tsx b/packages/react/src/components/Code/__tests__/Code.test.tsx
new file mode 100644
index 00000000..82bc7600
--- /dev/null
+++ b/packages/react/src/components/Code/__tests__/Code.test.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 {render} from '@unit-testing';
+import Code from '../Code';
+
+describe('Code', () => {
+ it('should render successfully', () => {
+ const {baseElement} = render(Code Block);
+ expect(baseElement).toBeTruthy();
+ });
+
+ it('should match the snapshot', () => {
+ const {baseElement} = render(Code Block);
+ expect(baseElement).toMatchSnapshot();
+ });
+
+ it('should have the correct class name', () => {
+ const {container} = render(Code Block);
+ expect(container.firstChild).toHaveClass('oxygen-code');
+ });
+
+ it('should have the correct text', () => {
+ const {container} = render(Code Block);
+ expect(container.firstChild).toHaveTextContent('Code Block');
+ });
+});
diff --git a/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap b/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap
new file mode 100644
index 00000000..1ada0580
--- /dev/null
+++ b/packages/react/src/components/Code/__tests__/__snapshots__/Code.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Code should match the snapshot 1`] = `
+
+
+
+ Code Block
+
+
+
+`;
diff --git a/packages/react/src/components/Code/code.scss b/packages/react/src/components/Code/code.scss
new file mode 100644
index 00000000..cd03436c
--- /dev/null
+++ b/packages/react/src/components/Code/code.scss
@@ -0,0 +1,25 @@
+/**
+ * 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-code {
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+ padding: 1px 3px;
+ background-color: var(--oxygen-palette-action-selected);
+ border-radius: 5px;
+ border: 1px solid var(--oxygen-palette-divider);
+}
diff --git a/packages/react/src/components/Code/index.ts b/packages/react/src/components/Code/index.ts
new file mode 100644
index 00000000..30e6abc8
--- /dev/null
+++ b/packages/react/src/components/Code/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 './Code';
+export type {CodeProps} from './Code';
diff --git a/packages/react/src/components/Fab/Fab.stories.mdx b/packages/react/src/components/Fab/Fab.stories.mdx
new file mode 100644
index 00000000..fb95f077
--- /dev/null
+++ b/packages/react/src/components/Fab/Fab.stories.mdx
@@ -0,0 +1,62 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Fab from './Fab.tsx';
+
+export const meta = {
+ component: Fab,
+ title: StoryConfig.Fab.hierarchy,
+};
+
+
+
+export const Template = args => ;
+
+# Fab
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+A Floating Action Button (FAB) performs the primary, or most common, action on a screen.
+
+export const PlusIcon = () => (
+
+);
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `Fab` component in your components as follows.
+
+
diff --git a/packages/react/src/components/Fab/Fab.tsx b/packages/react/src/components/Fab/Fab.tsx
new file mode 100644
index 00000000..de34688c
--- /dev/null
+++ b/packages/react/src/components/Fab/Fab.tsx
@@ -0,0 +1,45 @@
+/**
+ * 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 MuiFab, {FabProps as MuiFabProps} from '@mui/material/Fab';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type FabProps = {
+ component?: C;
+} & Omit, 'component'>;
+
+const COMPONENT_NAME: string = 'Fab';
+
+const Fab: ForwardRefExoticComponent & WithWrapperProps = forwardRef(
+ (props: FabProps, ref: MutableRefObject): ReactElement => {
+ const {className, ...rest} = props;
+
+ const classes: string = clsx('oxygen-fab', className);
+
+ return ;
+ },
+) as ForwardRefExoticComponent & WithWrapperProps;
+
+Fab.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Fab.muiName = COMPONENT_NAME;
+Fab.defaultProps = {};
+
+export default Fab;
diff --git a/packages/react/src/components/Fab/__tests__/Fab.test.tsx b/packages/react/src/components/Fab/__tests__/Fab.test.tsx
new file mode 100644
index 00000000..cc5dbaa8
--- /dev/null
+++ b/packages/react/src/components/Fab/__tests__/Fab.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 Fab from '../Fab';
+
+describe('Fab', () => {
+ 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/Fab/__tests__/__snapshots__/Fab.test.tsx.snap b/packages/react/src/components/Fab/__tests__/__snapshots__/Fab.test.tsx.snap
new file mode 100644
index 00000000..7f0f66ec
--- /dev/null
+++ b/packages/react/src/components/Fab/__tests__/__snapshots__/Fab.test.tsx.snap
@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Fab should match the snapshot 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/Fab/index.ts b/packages/react/src/components/Fab/index.ts
new file mode 100644
index 00000000..5f228f4f
--- /dev/null
+++ b/packages/react/src/components/Fab/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 './Fab';
+export type {FabProps} from './Fab';
diff --git a/packages/react/src/components/FormControlLabel/FormControlLabel.stories.mdx b/packages/react/src/components/FormControlLabel/FormControlLabel.stories.mdx
new file mode 100644
index 00000000..acebd6a8
--- /dev/null
+++ b/packages/react/src/components/FormControlLabel/FormControlLabel.stories.mdx
@@ -0,0 +1,46 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import FormControlLabel from './FormControlLabel.tsx';
+
+export const meta = {
+ component: FormControlLabel,
+ title: StoryConfig.FormControlLabel.hierarchy,
+};
+
+
+
+export const Template = args => ;
+
+# FormControlLabel
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component. Use this component if you want to display an extra label.
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `FormControlLabel` component in your components as follows.
+
+
diff --git a/packages/react/src/components/FormControlLabel/FormControlLabel.tsx b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx
new file mode 100644
index 00000000..ef137acd
--- /dev/null
+++ b/packages/react/src/components/FormControlLabel/FormControlLabel.tsx
@@ -0,0 +1,43 @@
+/**
+ * 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 MuiFormControlLabel, {FormControlLabelProps as MuiFormControlLabelProps} from '@mui/material/FormControlLabel';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type FormControlLabelProps = MuiFormControlLabelProps;
+
+const COMPONENT_NAME: string = 'FormControlLabel';
+
+const FormControlLabel: ForwardRefExoticComponent & WithWrapperProps = forwardRef(
+ (props: FormControlLabelProps, ref: MutableRefObject): ReactElement => {
+ const {className, ...rest} = props;
+
+ const classes: string = clsx('oxygen-form-control-label', className);
+
+ return ;
+ },
+) as ForwardRefExoticComponent & WithWrapperProps;
+
+FormControlLabel.displayName = composeComponentDisplayName(COMPONENT_NAME);
+FormControlLabel.muiName = COMPONENT_NAME;
+FormControlLabel.defaultProps = {};
+
+export default FormControlLabel;
diff --git a/packages/react/src/components/FormControlLabel/__tests__/FormControlLabel.test.tsx b/packages/react/src/components/FormControlLabel/__tests__/FormControlLabel.test.tsx
new file mode 100644
index 00000000..4145ef79
--- /dev/null
+++ b/packages/react/src/components/FormControlLabel/__tests__/FormControlLabel.test.tsx
@@ -0,0 +1,33 @@
+/**
+ * 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 Checkbox from '../../Checkbox';
+import FormControlLabel from '../FormControlLabel';
+
+describe('FormControlLabel', () => {
+ it('should render successfully', () => {
+ const {baseElement} = render(} label="Label" />);
+ expect(baseElement).toBeTruthy();
+ });
+
+ it('should match the snapshot', () => {
+ const {baseElement} = render(} label="Label" />);
+ expect(baseElement).toMatchSnapshot();
+ });
+});
diff --git a/packages/react/src/components/FormControlLabel/__tests__/__snapshots__/FormControlLabel.test.tsx.snap b/packages/react/src/components/FormControlLabel/__tests__/__snapshots__/FormControlLabel.test.tsx.snap
new file mode 100644
index 00000000..baea57af
--- /dev/null
+++ b/packages/react/src/components/FormControlLabel/__tests__/__snapshots__/FormControlLabel.test.tsx.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormControlLabel should match the snapshot 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/FormControlLabel/index.ts b/packages/react/src/components/FormControlLabel/index.ts
new file mode 100644
index 00000000..455daf14
--- /dev/null
+++ b/packages/react/src/components/FormControlLabel/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 './FormControlLabel';
+export type {FormControlLabelProps} from './FormControlLabel';
diff --git a/packages/react/src/components/FormGroup/FormGroup.stories.mdx b/packages/react/src/components/FormGroup/FormGroup.stories.mdx
new file mode 100644
index 00000000..168b1713
--- /dev/null
+++ b/packages/react/src/components/FormGroup/FormGroup.stories.mdx
@@ -0,0 +1,46 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import FormGroup from './FormGroup.tsx';
+
+export const meta = {
+ component: FormGroup,
+ title: StoryConfig.FormGroup.hierarchy,
+};
+
+
+
+export const Template = args => ;
+
+# FormGroup
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+`FormGroup` wraps controls such as `Checkbox` and `Switch`. It provides compact row layout. For the `Radio`, you should be using the `RadioGroup` component instead of this one.
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `FormGroup` component in your components as follows.
+
+
diff --git a/packages/react/src/components/FormGroup/FormGroup.tsx b/packages/react/src/components/FormGroup/FormGroup.tsx
new file mode 100644
index 00000000..912ca2ea
--- /dev/null
+++ b/packages/react/src/components/FormGroup/FormGroup.tsx
@@ -0,0 +1,43 @@
+/**
+ * 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 MuiFormGroup, {FormGroupProps as MuiFormGroupProps} from '@mui/material/FormGroup';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type FormGroupProps = MuiFormGroupProps;
+
+const COMPONENT_NAME: string = 'FormGroup';
+
+const FormGroup: ForwardRefExoticComponent & WithWrapperProps = forwardRef(
+ (props: FormGroupProps, ref: MutableRefObject): ReactElement => {
+ const {className, ...rest} = props;
+
+ const classes: string = clsx('oxygen-form-group', className);
+
+ return ;
+ },
+) as ForwardRefExoticComponent & WithWrapperProps;
+
+FormGroup.displayName = composeComponentDisplayName(COMPONENT_NAME);
+FormGroup.muiName = COMPONENT_NAME;
+FormGroup.defaultProps = {};
+
+export default FormGroup;
diff --git a/packages/react/src/components/FormGroup/__tests__/FormGroup.test.tsx b/packages/react/src/components/FormGroup/__tests__/FormGroup.test.tsx
new file mode 100644
index 00000000..d857c7d4
--- /dev/null
+++ b/packages/react/src/components/FormGroup/__tests__/FormGroup.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 FormGroup from '../FormGroup';
+
+describe('FormGroup', () => {
+ 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/FormGroup/__tests__/__snapshots__/FormGroup.test.tsx.snap b/packages/react/src/components/FormGroup/__tests__/__snapshots__/FormGroup.test.tsx.snap
new file mode 100644
index 00000000..f16d1c6f
--- /dev/null
+++ b/packages/react/src/components/FormGroup/__tests__/__snapshots__/FormGroup.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormGroup should match the snapshot 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/FormGroup/index.ts b/packages/react/src/components/FormGroup/index.ts
new file mode 100644
index 00000000..a6ed1763
--- /dev/null
+++ b/packages/react/src/components/FormGroup/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 './FormGroup';
+export type {FormGroupProps} from './FormGroup';
diff --git a/packages/react/src/components/FormLabel/FormLabel.stories.mdx b/packages/react/src/components/FormLabel/FormLabel.stories.mdx
new file mode 100644
index 00000000..b445cfd1
--- /dev/null
+++ b/packages/react/src/components/FormLabel/FormLabel.stories.mdx
@@ -0,0 +1,53 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import FormLabel from './FormLabel.tsx';
+import LinkTo from '@storybook/addon-links/react';
+
+export const meta = {
+ component: FormLabel,
+ title: StoryConfig.FormLabel.hierarchy,
+};
+
+
+
+export const Template = args => ;
+
+# FormLabel
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+API reference docs for the React FormLabel component. Learn about the props, CSS, and other APIs of this exported module.
+
+For examples and details on the usage of this React component, visit the component demo pages:
+
+- Checkbox
+- Radio Group
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `FormLabel` component in your components as follows.
+
+
diff --git a/packages/react/src/components/FormLabel/FormLabel.tsx b/packages/react/src/components/FormLabel/FormLabel.tsx
new file mode 100644
index 00000000..1089810d
--- /dev/null
+++ b/packages/react/src/components/FormLabel/FormLabel.tsx
@@ -0,0 +1,45 @@
+/**
+ * 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 MuiFormLabel, {FormLabelProps as MuiFormLabelProps} from '@mui/material/FormLabel';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type FormLabelProps = {
+ component?: C;
+} & Omit, 'component'>;
+
+const COMPONENT_NAME: string = 'FormLabel';
+
+const FormLabel: ForwardRefExoticComponent & WithWrapperProps = forwardRef(
+ (props: FormLabelProps, ref: MutableRefObject): ReactElement => {
+ const {className, ...rest} = props;
+
+ const classes: string = clsx('oxygen-form-label', className);
+
+ return ;
+ },
+) as ForwardRefExoticComponent & WithWrapperProps;
+
+FormLabel.displayName = composeComponentDisplayName(COMPONENT_NAME);
+FormLabel.muiName = COMPONENT_NAME;
+FormLabel.defaultProps = {};
+
+export default FormLabel;
diff --git a/packages/react/src/components/FormLabel/__tests__/FormLabel.test.tsx b/packages/react/src/components/FormLabel/__tests__/FormLabel.test.tsx
new file mode 100644
index 00000000..f780b434
--- /dev/null
+++ b/packages/react/src/components/FormLabel/__tests__/FormLabel.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 FormLabel from '../FormLabel';
+
+describe('FormLabel', () => {
+ 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/FormLabel/__tests__/__snapshots__/FormLabel.test.tsx.snap b/packages/react/src/components/FormLabel/__tests__/__snapshots__/FormLabel.test.tsx.snap
new file mode 100644
index 00000000..427b8409
--- /dev/null
+++ b/packages/react/src/components/FormLabel/__tests__/__snapshots__/FormLabel.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FormLabel should match the snapshot 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/FormLabel/index.ts b/packages/react/src/components/FormLabel/index.ts
new file mode 100644
index 00000000..d1987cd7
--- /dev/null
+++ b/packages/react/src/components/FormLabel/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 './FormLabel';
+export type {FormLabelProps} from './FormLabel';
diff --git a/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap b/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap
index de75faf2..dfbd5d50 100644
--- a/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap
+++ b/packages/react/src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`Header should match the snapshot 1`] = `
>
+
+export const Template = args => (
+ :not(style)': {
+ m: 1,
+ width: 128,
+ height: 128,
+ },
+ }}
+ >
+
+
+)
+
+# Paper
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Component that ressembles a sheet of paper.
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `Paper` component in your components as follows.
+
+
diff --git a/packages/react/src/components/Paper/Paper.tsx b/packages/react/src/components/Paper/Paper.tsx
new file mode 100644
index 00000000..265c8c6f
--- /dev/null
+++ b/packages/react/src/components/Paper/Paper.tsx
@@ -0,0 +1,45 @@
+/**
+ * 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 MuiPaper, {PaperProps as MuiPaperProps} from '@mui/material/Paper';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject, ElementType} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type PaperProps = {
+ component?: C;
+} & Omit, 'component'>;
+
+const COMPONENT_NAME: string = 'Paper';
+
+const Paper: ForwardRefExoticComponent & WithWrapperProps = forwardRef(
+ (props: PaperProps, ref: MutableRefObject): ReactElement => {
+ const {className, ...rest} = props;
+
+ const classes: string = clsx('oxygen-paper', className);
+
+ return ;
+ },
+) as ForwardRefExoticComponent & WithWrapperProps;
+
+Paper.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Paper.muiName = COMPONENT_NAME;
+Paper.defaultProps = {};
+
+export default Paper;
diff --git a/packages/react/src/components/Paper/__tests__/Paper.test.tsx b/packages/react/src/components/Paper/__tests__/Paper.test.tsx
new file mode 100644
index 00000000..5c92dc59
--- /dev/null
+++ b/packages/react/src/components/Paper/__tests__/Paper.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 Paper from '../Paper';
+
+describe('Paper', () => {
+ 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/Paper/__tests__/__snapshots__/Paper.test.tsx.snap b/packages/react/src/components/Paper/__tests__/__snapshots__/Paper.test.tsx.snap
new file mode 100644
index 00000000..7a5fc1ad
--- /dev/null
+++ b/packages/react/src/components/Paper/__tests__/__snapshots__/Paper.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Paper should match the snapshot 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/Paper/index.ts b/packages/react/src/components/Paper/index.ts
new file mode 100644
index 00000000..7bd2fafd
--- /dev/null
+++ b/packages/react/src/components/Paper/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 './Paper';
+export type {PaperProps} from './Paper';
diff --git a/packages/react/src/components/Popover/Popover.stories.mdx b/packages/react/src/components/Popover/Popover.stories.mdx
new file mode 100644
index 00000000..43004e67
--- /dev/null
+++ b/packages/react/src/components/Popover/Popover.stories.mdx
@@ -0,0 +1,84 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Button from '../Button/Button.tsx';
+import Typography from '../Typography/Typography.tsx';
+import Popover from './Popover.tsx';
+import {useArgs} from '@storybook/client-api';
+
+export const meta = {
+ component: Popover,
+ title: StoryConfig.Popover.hierarchy,
+};
+
+
+
+export const Template = args => {
+ const [runtimeArgs, updateArgs] = useArgs();
+ const id = 'simple-popover';
+ const handleClick = (event) => {
+ updateArgs({
+ open: !runtimeArgs.open,
+ anchorEl: event.currentTarget
+ });
+ };
+ const handleClose = () => {
+ updateArgs({
+ open: false,
+ anchorEl: null
+ })
+ };
+ return (
+
+
+
+ The content of the Popover.
+
+
+ );
+};
+
+# Popover
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+A Popover can be used to display some content on top of another.
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `Popover` component in your components as follows.
+
+
diff --git a/packages/react/src/components/Popover/Popover.tsx b/packages/react/src/components/Popover/Popover.tsx
new file mode 100644
index 00000000..a5cf6a63
--- /dev/null
+++ b/packages/react/src/components/Popover/Popover.tsx
@@ -0,0 +1,43 @@
+/**
+ * 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 MuiPopover, {PopoverProps as MuiPopoverProps} from '@mui/material/Popover';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type PopoverProps = MuiPopoverProps;
+
+const COMPONENT_NAME: string = 'Popover';
+
+const Popover: ForwardRefExoticComponent & WithWrapperProps = forwardRef(
+ (props: PopoverProps, ref: MutableRefObject): ReactElement => {
+ const {className, ...rest} = props;
+
+ const classes: string = clsx('oxygen-popover', className);
+
+ return ;
+ },
+) as unknown as ForwardRefExoticComponent & WithWrapperProps;
+
+Popover.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Popover.muiName = COMPONENT_NAME;
+Popover.defaultProps = {};
+
+export default Popover;
diff --git a/packages/react/src/components/Popover/__tests__/Popover.test.tsx b/packages/react/src/components/Popover/__tests__/Popover.test.tsx
new file mode 100644
index 00000000..e48af374
--- /dev/null
+++ b/packages/react/src/components/Popover/__tests__/Popover.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 Popover from '../Popover';
+
+describe('Popover', () => {
+ 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/Popover/__tests__/__snapshots__/Popover.test.tsx.snap b/packages/react/src/components/Popover/__tests__/__snapshots__/Popover.test.tsx.snap
new file mode 100644
index 00000000..0080983a
--- /dev/null
+++ b/packages/react/src/components/Popover/__tests__/__snapshots__/Popover.test.tsx.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Popover should match the snapshot 1`] = `
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/Popover/index.ts b/packages/react/src/components/Popover/index.ts
new file mode 100644
index 00000000..a308722a
--- /dev/null
+++ b/packages/react/src/components/Popover/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 './Popover';
+export type {PopoverProps} from './Popover';
diff --git a/packages/react/src/components/Radio/Radio.stories.mdx b/packages/react/src/components/Radio/Radio.stories.mdx
new file mode 100644
index 00000000..5aa367d1
--- /dev/null
+++ b/packages/react/src/components/Radio/Radio.stories.mdx
@@ -0,0 +1,50 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Radio from './Radio.tsx';
+
+export const meta = {
+ component: Radio,
+ title: StoryConfig.Radio.hierarchy,
+};
+
+
+
+export const Template = args => ;
+
+# Radio
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+API reference docs for the React Radio component. Learn about the props, CSS, and other APIs of this exported module.
+
+For examples and details on the usage of this React component, visit the component demo pages:
+
+- Radio Group
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `Radio` component in your components as follows.
+
+
diff --git a/packages/react/src/components/Radio/Radio.tsx b/packages/react/src/components/Radio/Radio.tsx
new file mode 100644
index 00000000..7687c91f
--- /dev/null
+++ b/packages/react/src/components/Radio/Radio.tsx
@@ -0,0 +1,43 @@
+/**
+ * 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 MuiRadio, {RadioProps as MuiRadioProps} from '@mui/material/Radio';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type RadioProps = MuiRadioProps;
+
+const COMPONENT_NAME: string = 'Radio';
+
+const Radio: ForwardRefExoticComponent & WithWrapperProps = forwardRef(
+ (props: RadioProps, ref: MutableRefObject): ReactElement => {
+ const {className, ...rest} = props;
+
+ const classes: string = clsx('oxygen-radio', className);
+
+ return ;
+ },
+) as ForwardRefExoticComponent & WithWrapperProps;
+
+Radio.displayName = composeComponentDisplayName(COMPONENT_NAME);
+Radio.muiName = COMPONENT_NAME;
+Radio.defaultProps = {};
+
+export default Radio;
diff --git a/packages/react/src/components/Radio/__tests__/Radio.test.tsx b/packages/react/src/components/Radio/__tests__/Radio.test.tsx
new file mode 100644
index 00000000..074b9247
--- /dev/null
+++ b/packages/react/src/components/Radio/__tests__/Radio.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 Radio from '../Radio';
+
+describe('Radio', () => {
+ 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/Radio/__tests__/__snapshots__/Radio.test.tsx.snap b/packages/react/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap
new file mode 100644
index 00000000..a0483561
--- /dev/null
+++ b/packages/react/src/components/Radio/__tests__/__snapshots__/Radio.test.tsx.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Radio should match the snapshot 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/Radio/index.ts b/packages/react/src/components/Radio/index.ts
new file mode 100644
index 00000000..e80f2e7b
--- /dev/null
+++ b/packages/react/src/components/Radio/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 './Radio';
+export type {RadioProps} from './Radio';
diff --git a/packages/react/src/components/RadioGroup/RadioGroup.stories.mdx b/packages/react/src/components/RadioGroup/RadioGroup.stories.mdx
new file mode 100644
index 00000000..e68daf54
--- /dev/null
+++ b/packages/react/src/components/RadioGroup/RadioGroup.stories.mdx
@@ -0,0 +1,63 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import dedent from 'ts-dedent';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import FormControl from '../FormControl/FormControl.tsx';
+import FormLabel from '../FormLabel/FormLabel.tsx';
+import FormControlLabel from '../FormControlLabel/FormControlLabel.tsx';
+import Radio from '../Radio/Radio.tsx';
+import RadioGroup from './RadioGroup.tsx';
+
+export const meta = {
+ component: RadioGroup,
+ title: StoryConfig.RadioGroup.hierarchy,
+};
+
+
+
+export const Template = args => (
+
+ Gender
+
+ } label="Female" />
+ } label="Male" />
+ } label="Other" />
+
+
+);
+
+# RadioGroup
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+The Radio Group allows the user to select one option from a set.
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `RadioGroup` component in your components as follows.
+
+
diff --git a/packages/react/src/components/RadioGroup/RadioGroup.tsx b/packages/react/src/components/RadioGroup/RadioGroup.tsx
new file mode 100644
index 00000000..236fdef1
--- /dev/null
+++ b/packages/react/src/components/RadioGroup/RadioGroup.tsx
@@ -0,0 +1,43 @@
+/**
+ * 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 MuiRadioGroup, {RadioGroupProps as MuiRadioGroupProps} from '@mui/material/RadioGroup';
+import clsx from 'clsx';
+import {forwardRef, ForwardRefExoticComponent, ReactElement, MutableRefObject} from 'react';
+import {WithWrapperProps} from '../../models';
+import {composeComponentDisplayName} from '../../utils';
+
+export type RadioGroupProps = MuiRadioGroupProps;
+
+const COMPONENT_NAME: string = 'RadioGroup';
+
+const RadioGroup: ForwardRefExoticComponent & WithWrapperProps = forwardRef(
+ (props: RadioGroupProps, ref: MutableRefObject): ReactElement => {
+ const {className, ...rest} = props;
+
+ const classes: string = clsx('oxygen-radio-group', className);
+
+ return ;
+ },
+) as ForwardRefExoticComponent & WithWrapperProps;
+
+RadioGroup.displayName = composeComponentDisplayName(COMPONENT_NAME);
+RadioGroup.muiName = COMPONENT_NAME;
+RadioGroup.defaultProps = {};
+
+export default RadioGroup;
diff --git a/packages/react/src/components/RadioGroup/__tests__/RadioGroup.test.tsx b/packages/react/src/components/RadioGroup/__tests__/RadioGroup.test.tsx
new file mode 100644
index 00000000..deb89b4c
--- /dev/null
+++ b/packages/react/src/components/RadioGroup/__tests__/RadioGroup.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 RadioGroup from '../RadioGroup';
+
+describe('RadioGroup', () => {
+ 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/RadioGroup/__tests__/__snapshots__/RadioGroup.test.tsx.snap b/packages/react/src/components/RadioGroup/__tests__/__snapshots__/RadioGroup.test.tsx.snap
new file mode 100644
index 00000000..5aceef45
--- /dev/null
+++ b/packages/react/src/components/RadioGroup/__tests__/__snapshots__/RadioGroup.test.tsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RadioGroup should match the snapshot 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/RadioGroup/index.ts b/packages/react/src/components/RadioGroup/index.ts
new file mode 100644
index 00000000..22ba0f57
--- /dev/null
+++ b/packages/react/src/components/RadioGroup/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 './RadioGroup';
+export type {RadioGroupProps} from './RadioGroup';
diff --git a/packages/react/src/components/SignIn/SignIn.stories.mdx b/packages/react/src/components/SignIn/SignIn.stories.mdx
index 2244c593..43128476 100644
--- a/packages/react/src/components/SignIn/SignIn.stories.mdx
+++ b/packages/react/src/components/SignIn/SignIn.stories.mdx
@@ -2,6 +2,7 @@ import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
import dedent from 'ts-dedent';
import StoryConfig from '../../../.storybook/story-config.ts';
import SignIn from './SignIn.tsx';
+import Button from '../Button/Button.tsx';
export const meta = {
component: SignIn,
@@ -57,3 +58,57 @@ A basic login box with username and password inputs.
+
+### With Sign In Options
+
+export const GoogleIcon = (props) => {
+ return (
+
+ );
+};
+
+
diff --git a/packages/react/src/components/SignIn/SignIn.tsx b/packages/react/src/components/SignIn/SignIn.tsx
index e3f6f076..719f0062 100644
--- a/packages/react/src/components/SignIn/SignIn.tsx
+++ b/packages/react/src/components/SignIn/SignIn.tsx
@@ -16,12 +16,13 @@
* under the License.
*/
-import {Box, Typography, Grid, BoxProps, Paper} from '@mui/material';
+import {Box, FormGroup, FormControlLabel, Typography, Grid, BoxProps, Paper, Checkbox} from '@mui/material';
import clsx from 'clsx';
import {FC, ReactElement} from 'react';
import {MuiWrapperProps} from '../../models';
import {composeComponentDisplayName} from '../../utils';
import Button from '../Button';
+import Divider from '../Divider';
import Link from '../Link';
import TextField from '../TextField';
import './sign-in.scss';
@@ -30,25 +31,29 @@ export interface SignInProps extends BoxProps {
/**
* URL for the login box logo.
*/
- logoUrl: string;
+ logoUrl?: string;
+ /**
+ * Different Sign In Options.
+ */
+ signInOptions?: ReactElement;
/**
* URL for the sign up.
*/
- signUpUrl: string;
+ signUpUrl?: string;
}
const COMPONENT_NAME: string = 'SignIn';
const SignIn: FC & MuiWrapperProps = (props: SignInProps): ReactElement => {
- const {className, signUpUrl, logoUrl, ...rest} = props;
+ const {className, signUpUrl, logoUrl, signInOptions, ...rest} = props;
const classes: string = clsx('oxygen-sign-in', className);
return (
-
+ {logoUrl && }
-
+
Sign in
null} noValidate sx={{mt: 1}}>
@@ -71,27 +76,28 @@ const SignIn: FC & MuiWrapperProps = (props: SignInProps): ReactEle
placeholder="Enter your password"
autoComplete="current-password"
/>
-
diff --git a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
index ab42aff5..6243ef8a 100644
--- a/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
+++ b/packages/react/src/components/SignIn/__tests__/__snapshots__/SignIn.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`SignIn should match the snapshot 1`] = `
class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded oxygen-sign-in-box css-1fbvlaf-MuiPaper-root"
>
Sign in
@@ -159,8 +159,45 @@ exports[`SignIn should match the snapshot 1`] = `