+
+export const Template = ({...args}) => {
+ const [runtimeArgs, updateArgs] = useArgs();
+ const {in: checked} = runtimeArgs;
+ return (
+
+
+ updateArgs({...runtimeArgs, in: !checked})} />}
+ label="Show"
+ />
+
+
+
+
+
+ );
+};
+
+# Collapse
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+Expand from the start edge of the child element. Use the `orientation` prop if you need a horizontal collapse. The
+`collapsedSize` prop can be used to set the minimum width/height when not expanded.
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `Collapse` component in your components as follows.
+
+
+ );
+}`}
+/>
diff --git a/packages/react/src/components/Collapse/Collapse.tsx b/packages/react/src/components/Collapse/Collapse.tsx
new file mode 100644
index 00000000..441545a3
--- /dev/null
+++ b/packages/react/src/components/Collapse/Collapse.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2024, 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 MuiCollapse from '@mui/material/Collapse';
+import type {CollapseProps as MuiCollapseProps} from '@mui/material/Collapse';
+import type {OverridableComponent, OverridableTypeMap} from '@mui/material/OverridableComponent';
+import type {TransitionProps} from '@mui/material/transitions';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ReactElement, Ref, ElementType} from 'react';
+
+export type CollapseProps> = {
+ /**
+ * The component used for the root node. Either a string to use a HTML element or a component.
+ */
+ component?: C;
+} & Omit;
+
+/**
+ * A Transition component to expand from the start edge of the child element.
+ *
+ * Demos:
+ *
+ * - [Card (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/surfaces-card)
+ * - [Card (MUI)](https://mui.com/material-ui/react-card/)
+ * - [Lists (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/data-display-list)
+ * - [Lists (MUI)](https://mui.com/material-ui/react-list/)
+ * - [Collapse (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/utils-collapse)
+ * - [Transitions (MUI)](https://mui.com/material-ui/transitions/)
+ *
+ * API:
+ *
+ * - [Collapse API](https://mui.com/material-ui/api/collapse/)
+ * - inherits [Transition API](http://reactcommunity.org/react-transition-group/transition/#Transition-props)
+ *
+ * @remarks
+ * - ✔️ Props of the [Transition](https://mui.com/material-ui/transitions/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Collapse component.
+ * @param ref - The ref to be forwarded to the MuiCollapse component.
+ * @returns The rendered Collapse component.
+ */
+const Collapse: OverridableComponent = forwardRef(
+ ({className, ...rest}: CollapseProps>, ref: Ref): ReactElement => (
+
+ ),
+) as OverridableComponent;
+
+export default Collapse;
diff --git a/packages/react/src/components/Collapse/__tests__/Collapse.test.tsx b/packages/react/src/components/Collapse/__tests__/Collapse.test.tsx
new file mode 100644
index 00000000..c040bf31
--- /dev/null
+++ b/packages/react/src/components/Collapse/__tests__/Collapse.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, 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 {render} from '@unit-testing';
+import Collapse from '../Collapse';
+
+describe('Collapse', () => {
+ 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/Collapse/__tests__/__snapshots__/Collapse.test.tsx.snap b/packages/react/src/components/Collapse/__tests__/__snapshots__/Collapse.test.tsx.snap
new file mode 100644
index 00000000..ba7832bf
--- /dev/null
+++ b/packages/react/src/components/Collapse/__tests__/__snapshots__/Collapse.test.tsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collapse should match the snapshot 1`] = `
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/Collapse/index.ts b/packages/react/src/components/Collapse/index.ts
new file mode 100644
index 00000000..518ee59a
--- /dev/null
+++ b/packages/react/src/components/Collapse/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2024, 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.
+ */
+
+export {default} from './Collapse';
+export * from './Collapse';
diff --git a/packages/react/src/components/Dialog/Dialog.stories.mdx b/packages/react/src/components/Dialog/Dialog.stories.mdx
new file mode 100644
index 00000000..8324dadd
--- /dev/null
+++ b/packages/react/src/components/Dialog/Dialog.stories.mdx
@@ -0,0 +1,119 @@
+import {XMarkIcon} from '@oxygen-ui/react-icons';
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import {useArgs} from '@storybook/client-api';
+import dedent from 'ts-dedent';
+import Dialog from './Dialog.tsx';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Box from '../Box/Box.tsx';
+import Button from '../Button/Button.tsx';
+import DialogActions from '../DialogActions/DialogActions.tsx';
+import DialogContent from '../DialogContent/DialogContent.tsx';
+import DialogContentText from '../DialogContentText/DialogContentText.tsx';
+import DialogTitle from '../DialogTitle/DialogTitle.tsx';
+import IconButton from '../IconButton/IconButton.tsx';
+
+export const meta = {
+ component: Dialog,
+ title: StoryConfig.Dialog.hierarchy,
+};
+
+
+
+export const Template = ({...args}) => {
+ const [runtimeArgs, updateArgs] = useArgs();
+ const {open} = runtimeArgs;
+ const handleOpen = () => updateArgs({...runtimeArgs, open: true});
+ const handleClose = () => updateArgs({...runtimeArgs, open: false});
+ return (
+
+
+
+
+ );
+};
+
+# Dialog
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+A Dialog is a type of `modal` window that appears in front of app content to provide critical information or ask for a
+decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a
+required action has been taken.
+
+Dialogs are purposefully interruptive, so they should be used sparingly.
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `Dialog` component in your components as follows.
+
+
+ {/* Content */}
+
+ );
+}`}
+/>
diff --git a/packages/react/src/components/Dialog/Dialog.tsx b/packages/react/src/components/Dialog/Dialog.tsx
new file mode 100644
index 00000000..1dc5f4cf
--- /dev/null
+++ b/packages/react/src/components/Dialog/Dialog.tsx
@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2024, 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 MuiDialog from '@mui/material/Dialog';
+import type {DialogProps as MuiDialogProps} from '@mui/material/Dialog';
+import type {ModalTypeMap} from '@mui/material/Modal';
+import {OverridableComponent} from '@mui/material/OverridableComponent';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ElementType, ReactElement, Ref} from 'react';
+
+export type DialogProps = {
+ /**
+ * The component used for the root node. Either a string to use a HTML element or a component.
+ */
+ component?: C;
+} & Omit;
+
+/**
+ * Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.
+ *
+ * Demos:
+ *
+ * - [Dialog (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-dialog)
+ * - [Dialog (MUI)](https://mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [Dialog API](https://mui.com/material-ui/api/dialog/)
+ * - inherits [Modal API](https://mui.com/material-ui/api/modal/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Modal](https://mui.com/material-ui/api/modal/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Dialog component.
+ * @param ref - The ref to be forwarded to the MuiDialog component.
+ * @returns The rendered Dialog component.
+ */
+const Dialog: OverridableComponent> = forwardRef(
+ (
+ {className, ...rest}: DialogProps,
+ ref: Ref,
+ ): ReactElement => ,
+) as OverridableComponent>;
+
+export default Dialog;
diff --git a/packages/react/src/components/Dialog/__tests__/Dialog.test.tsx b/packages/react/src/components/Dialog/__tests__/Dialog.test.tsx
new file mode 100644
index 00000000..da0f5fe4
--- /dev/null
+++ b/packages/react/src/components/Dialog/__tests__/Dialog.test.tsx
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2024, 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 {render} from '@unit-testing';
+import Dialog from '../Dialog';
+
+describe('Dialog', () => {
+ 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/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap b/packages/react/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
new file mode 100644
index 00000000..3cd8d56c
--- /dev/null
+++ b/packages/react/src/components/Dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dialog should match the snapshot 1`] = `
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/Dialog/index.ts b/packages/react/src/components/Dialog/index.ts
new file mode 100644
index 00000000..431de538
--- /dev/null
+++ b/packages/react/src/components/Dialog/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2024, 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.
+ */
+
+export {default} from './Dialog';
+export * from './Dialog';
diff --git a/packages/react/src/components/DialogActions/DialogActions.tsx b/packages/react/src/components/DialogActions/DialogActions.tsx
new file mode 100644
index 00000000..e50ac81f
--- /dev/null
+++ b/packages/react/src/components/DialogActions/DialogActions.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2024, 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 MuiDialogActions from '@mui/material/DialogActions';
+import type {DialogActionsProps as MuiDialogActionsProps} from '@mui/material/DialogActions';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
+
+export type DialogActionsProps = MuiDialogActionsProps;
+
+/**
+ * The Dialog Actions is an optional container for a Dialog's Buttons.
+ *
+ * Demos:
+ *
+ * - [Dialog (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-dialog)
+ * - [Dialog (MUI)](https://mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogActions API](https://mui.com/material-ui/api/dialog-actions/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the DialogActions component.
+ * @param ref - The ref to be forwarded to the MuiDialogActions component.
+ * @returns The rendered DialogActions component.
+ */
+const DialogActions: ForwardRefExoticComponent = forwardRef(
+ ({className, ...rest}: DialogActionsProps, ref: Ref): ReactElement => (
+
+ ),
+) as ForwardRefExoticComponent;
+
+export default DialogActions;
diff --git a/packages/react/src/components/DialogActions/__tests__/DialogActions.test.tsx b/packages/react/src/components/DialogActions/__tests__/DialogActions.test.tsx
new file mode 100644
index 00000000..b09e85e2
--- /dev/null
+++ b/packages/react/src/components/DialogActions/__tests__/DialogActions.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, 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 {render} from '@unit-testing';
+import DialogActions from '../DialogActions';
+
+describe('DialogActions', () => {
+ 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/DialogActions/__tests__/__snapshots__/DialogActions.test.tsx.snap b/packages/react/src/components/DialogActions/__tests__/__snapshots__/DialogActions.test.tsx.snap
new file mode 100644
index 00000000..844c5a04
--- /dev/null
+++ b/packages/react/src/components/DialogActions/__tests__/__snapshots__/DialogActions.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogActions should match the snapshot 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/DialogActions/index.ts b/packages/react/src/components/DialogActions/index.ts
new file mode 100644
index 00000000..31405213
--- /dev/null
+++ b/packages/react/src/components/DialogActions/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2024, 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.
+ */
+
+export {default} from './DialogActions';
+export * from './DialogActions';
diff --git a/packages/react/src/components/DialogContent/DialogContent.tsx b/packages/react/src/components/DialogContent/DialogContent.tsx
new file mode 100644
index 00000000..eb6d3496
--- /dev/null
+++ b/packages/react/src/components/DialogContent/DialogContent.tsx
@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) 2024, 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 MuiDialogContent from '@mui/material/DialogContent';
+import type {DialogContentProps as MuiDialogContentProps} from '@mui/material/DialogContent';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ForwardRefExoticComponent, ReactElement, Ref} from 'react';
+
+export type DialogContentProps = MuiDialogContentProps;
+
+/**
+ * The Dialog Content is an optional container for displaying the Dialog's content.
+ *
+ * Demos:
+ *
+ * - [Dialog (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-dialog)
+ * - [Dialog (MUI)](https://mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogContent API](https://mui.com/material-ui/api/dialog-content/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ❌ `component` prop is not supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @param props - The props for the DialogContent component.
+ * @param ref - The ref to be forwarded to the MuiDialogContent component.
+ * @returns The rendered DialogContent component.
+ */
+const DialogContent: ForwardRefExoticComponent = forwardRef(
+ ({className, ...rest}: DialogContentProps, ref: Ref): ReactElement => (
+
+ ),
+) as ForwardRefExoticComponent;
+
+export default DialogContent;
diff --git a/packages/react/src/components/DialogContent/__tests__/DialogContent.test.tsx b/packages/react/src/components/DialogContent/__tests__/DialogContent.test.tsx
new file mode 100644
index 00000000..9445d058
--- /dev/null
+++ b/packages/react/src/components/DialogContent/__tests__/DialogContent.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, 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 {render} from '@unit-testing';
+import DialogContent from '../DialogContent';
+
+describe('DialogContent', () => {
+ 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/DialogContent/__tests__/__snapshots__/DialogContent.test.tsx.snap b/packages/react/src/components/DialogContent/__tests__/__snapshots__/DialogContent.test.tsx.snap
new file mode 100644
index 00000000..71725783
--- /dev/null
+++ b/packages/react/src/components/DialogContent/__tests__/__snapshots__/DialogContent.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogContent should match the snapshot 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/DialogContent/index.ts b/packages/react/src/components/DialogContent/index.ts
new file mode 100644
index 00000000..cd054029
--- /dev/null
+++ b/packages/react/src/components/DialogContent/index.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2024, 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.
+ */
+
+export {default} from './DialogContent';
+export * from './DialogContent';
diff --git a/packages/react/src/components/DialogContentText/DialogContentText.tsx b/packages/react/src/components/DialogContentText/DialogContentText.tsx
new file mode 100644
index 00000000..06a98b1c
--- /dev/null
+++ b/packages/react/src/components/DialogContentText/DialogContentText.tsx
@@ -0,0 +1,72 @@
+/**
+ * Copyright (c) 2024, 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 MuiDialogContentText from '@mui/material/DialogContentText';
+import type {
+ DialogContentTextTypeMap,
+ DialogContentTextProps as MuiDialogContentTextProps,
+} from '@mui/material/DialogContentText';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ReactElement, ElementType, Ref} from 'react';
+
+export type DialogContentTextProps<
+ C extends ElementType = ElementType,
+ D extends ElementType = DialogContentTextTypeMap['defaultComponent'],
+ P = {},
+> = {
+ /**
+ * The component used for the root node. Either a string to use a HTML element or a component.
+ */
+ component?: C;
+} & Omit, 'component'>;
+
+/**
+ * The Dialog Content Text is a wrapper for text inside of ``.
+ *
+ * Demos:
+ *
+ * - [Dialog (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-dialog)
+ * - [Dialog (MUI)](https://mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogContentText API](https://mui.com/material-ui/api/dialog-content-text/)
+ * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the DialogContentText component.
+ * @param ref - The ref to be forwarded to the MuiDialogContentText component.
+ * @returns The rendered DialogContentText component.
+ */
+const DialogContentText: OverridableComponent> = forwardRef(
+ (
+ {className, ...rest}: DialogContentTextProps,
+ ref: Ref,
+ ): ReactElement => (
+
+ ),
+) as OverridableComponent>;
+
+export default DialogContentText;
diff --git a/packages/react/src/components/DialogContentText/__tests__/DialogContentText.test.tsx b/packages/react/src/components/DialogContentText/__tests__/DialogContentText.test.tsx
new file mode 100644
index 00000000..40dec33e
--- /dev/null
+++ b/packages/react/src/components/DialogContentText/__tests__/DialogContentText.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, 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 {render} from '@unit-testing';
+import DialogContentText from '../DialogContentText';
+
+describe('DialogContentText', () => {
+ it('should render successfully', () => {
+ const {baseElement} = render(Demo Text);
+ expect(baseElement).toBeTruthy();
+ });
+
+ it('should match the snapshot', () => {
+ const {baseElement} = render(Demo Text);
+ expect(baseElement).toMatchSnapshot();
+ });
+});
diff --git a/packages/react/src/components/DialogContentText/__tests__/__snapshots__/DialogContentText.test.tsx.snap b/packages/react/src/components/DialogContentText/__tests__/__snapshots__/DialogContentText.test.tsx.snap
new file mode 100644
index 00000000..7602a382
--- /dev/null
+++ b/packages/react/src/components/DialogContentText/__tests__/__snapshots__/DialogContentText.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogContentText should match the snapshot 1`] = `
+
+
+
+ Demo Text
+
+
+
+`;
diff --git a/packages/react/src/components/DialogContentText/index.ts b/packages/react/src/components/DialogContentText/index.ts
new file mode 100644
index 00000000..10a7b4dc
--- /dev/null
+++ b/packages/react/src/components/DialogContentText/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2024, 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.
+ */
+
+export {default} from './DialogContentText';
+export * from './DialogContentText';
+
+export type {DialogContentTextTypeMap} from '@mui/material/DialogContentText';
diff --git a/packages/react/src/components/DialogTitle/DialogTitle.tsx b/packages/react/src/components/DialogTitle/DialogTitle.tsx
new file mode 100644
index 00000000..b9fe3eb1
--- /dev/null
+++ b/packages/react/src/components/DialogTitle/DialogTitle.tsx
@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) 2024, 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 MuiDialogTitle from '@mui/material/DialogTitle';
+import type {DialogTitleTypeMap, DialogTitleProps as MuiDialogTitleProps} from '@mui/material/DialogTitle';
+import type {OverridableComponent} from '@mui/material/OverridableComponent';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ReactElement, ElementType, Ref} from 'react';
+
+export type DialogTitleProps<
+ C extends ElementType = ElementType,
+ D extends ElementType = DialogTitleTypeMap['defaultComponent'],
+ P = {},
+> = {
+ /**
+ * The component used for the root node. Either a string to use a HTML element or a component.
+ */
+ component?: C;
+} & Omit, 'component'>;
+
+/**
+ * The Dialog Content Text is a wrapper used for the title of a Dialog.
+ *
+ * Demos:
+ *
+ * - [Dialog (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/feedback-dialog)
+ * - [Dialog (MUI)](https://mui.com/material-ui/react-dialog/)
+ *
+ * API:
+ *
+ * - [DialogTitle API](https://mui.com/material-ui/api/dialog-title/)
+ * - inherits [Typography API](https://mui.com/material-ui/api/typography/)
+ *
+ * @remarks
+ * - ✔️ Props of the [Typography](https://mui.com/material-ui/api/typography/) component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the DialogTitle component.
+ * @param ref - The ref to be forwarded to the MuiDialogTitle component.
+ * @returns The rendered DialogTitle component.
+ */
+const DialogTitle: OverridableComponent> = forwardRef(
+ (
+ {className, ...rest}: DialogTitleProps,
+ ref: Ref,
+ ): ReactElement => ,
+) as OverridableComponent>;
+
+export default DialogTitle;
diff --git a/packages/react/src/components/DialogTitle/__tests__/DialogTitle.test.tsx b/packages/react/src/components/DialogTitle/__tests__/DialogTitle.test.tsx
new file mode 100644
index 00000000..0951b0b5
--- /dev/null
+++ b/packages/react/src/components/DialogTitle/__tests__/DialogTitle.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, 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 {render} from '@unit-testing';
+import DialogTitle from '../DialogTitle';
+
+describe('DialogTitle', () => {
+ it('should render successfully', () => {
+ const {baseElement} = render(Demo Title);
+ expect(baseElement).toBeTruthy();
+ });
+
+ it('should match the snapshot', () => {
+ const {baseElement} = render(Demo Title);
+ expect(baseElement).toMatchSnapshot();
+ });
+});
diff --git a/packages/react/src/components/DialogTitle/__tests__/__snapshots__/DialogTitle.test.tsx.snap b/packages/react/src/components/DialogTitle/__tests__/__snapshots__/DialogTitle.test.tsx.snap
new file mode 100644
index 00000000..998f34a3
--- /dev/null
+++ b/packages/react/src/components/DialogTitle/__tests__/__snapshots__/DialogTitle.test.tsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DialogTitle should match the snapshot 1`] = `
+
+
+
+ Demo Title
+
+
+
+`;
diff --git a/packages/react/src/components/DialogTitle/index.ts b/packages/react/src/components/DialogTitle/index.ts
new file mode 100644
index 00000000..1da045d2
--- /dev/null
+++ b/packages/react/src/components/DialogTitle/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2024, 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.
+ */
+
+export {default} from './DialogTitle';
+export * from './DialogTitle';
+
+export type {DialogTitleTypeMap} from '@mui/material/DialogTitle';
diff --git a/packages/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap b/packages/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap
index 1dd45e6e..edc33b49 100644
--- a/packages/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap
+++ b/packages/react/src/components/OutlinedInput/__test__/__snapshots__/OutlinedInput.test.tsx.snap
@@ -4,10 +4,10 @@ exports[`OutlinedInput should match the snapshot 1`] = `
diff --git a/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap b/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap
index 14fa25cd..9308fc3d 100644
--- a/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap
+++ b/packages/react/src/components/PhoneNumberInput/__test__/__snapshots__/PhoneNumberInput.test.tsx.snap
@@ -17,13 +17,13 @@ exports[`TextField should match the snapshot 1`] = `
class="oxygen-box oxygen-select-input MuiBox-root css-0"
>
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 9c3b4653..334bbfb8 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
@@ -33,14 +33,14 @@ exports[`SignIn should match the snapshot 1`] = `
Username
+
+export const Template = args => (
+
+
+ Item 1
+ Item 2
+ Item 3
+
+
+);
+
+# Stack
+
+- [Overview](#overview)
+- [Props](#props)
+- [Usage](#usage)
+
+## Overview
+
+The Stack component manages the layout of its immediate children along the vertical or horizontal axis, with optional
+spacing and dividers between each child.
+
+> **NOTE** Stack is ideal for one-dimensional layouts, while Grid is preferable when you need both vertical and
+> horizontal arrangement.
+
+
+
+## Props
+
+
+
+## Usage
+
+Import and use the `Stack` component in your components as follows.
+
+{ /* Content */ };
+}`}
+/>
diff --git a/packages/react/src/components/Stack/Stack.tsx b/packages/react/src/components/Stack/Stack.tsx
new file mode 100644
index 00000000..808f0647
--- /dev/null
+++ b/packages/react/src/components/Stack/Stack.tsx
@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2024, 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 type {OverridableComponent} from '@mui/material/OverridableComponent';
+import MuiStack from '@mui/material/Stack';
+import type {StackProps as MuiStackProps, StackTypeMap} from '@mui/material/Stack';
+import clsx from 'clsx';
+import {forwardRef} from 'react';
+import type {ElementType, Ref, ReactElement} from 'react';
+
+export type StackProps<
+ C extends ElementType = ElementType,
+ D extends ElementType = StackTypeMap['defaultComponent'],
+ P = {},
+> = {
+ /**
+ * The component used for the root node. Either a string to use a HTML element or a component.
+ */
+ component?: C;
+} & Omit, 'component'>;
+
+/**
+ * The Stack is a container component for arranging elements vertically or horizontally.
+ *
+ * Demos:
+ *
+ * - [Stack (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/layout-stack)
+ * - [Stack (MUI)](https://mui.com/material-ui/react-stack/)
+ *
+ * API:
+ *
+ * - [Stack API](https://mui.com/material-ui/api/stack/)
+ *
+ * @remarks
+ * - ✔️ Props of the native component are also available.
+ * - ✅ `component` prop is supported.
+ * - ✅ The `ref` is forwarded to the root element.
+ *
+ * @template C - The type of the component.
+ * @param props - The props for the Stack component.
+ * @param ref - The ref to be forwarded to the MuiStack component.
+ * @returns The rendered Stack component.
+ */
+const Stack: OverridableComponent> = forwardRef(
+ (
+ {className, ...rest}: StackProps,
+ ref: Ref,
+ ): ReactElement => ,
+) as OverridableComponent>;
+
+export default Stack;
diff --git a/packages/react/src/components/Stack/__test__/Stack.test.tsx b/packages/react/src/components/Stack/__test__/Stack.test.tsx
new file mode 100644
index 00000000..f551f527
--- /dev/null
+++ b/packages/react/src/components/Stack/__test__/Stack.test.tsx
@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) 2024, 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 {render} from '@unit-testing';
+import Stack from '../Stack';
+
+describe('Stack', () => {
+ 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/Stack/__test__/__snapshots__/Stack.test.tsx.snap b/packages/react/src/components/Stack/__test__/__snapshots__/Stack.test.tsx.snap
new file mode 100644
index 00000000..507c9b1a
--- /dev/null
+++ b/packages/react/src/components/Stack/__test__/__snapshots__/Stack.test.tsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Stack should match the snapshot 1`] = `
+
+
+
+
+
+`;
diff --git a/packages/react/src/components/Stack/index.ts b/packages/react/src/components/Stack/index.ts
new file mode 100644
index 00000000..4ec4bc40
--- /dev/null
+++ b/packages/react/src/components/Stack/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2024, 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.
+ */
+
+export {default} from './Stack';
+export * from './Stack';
+
+export type {StackTypeMap} from '@mui/material/Stack';
diff --git a/packages/react/src/components/TextField/TextField.stories.mdx b/packages/react/src/components/TextField/TextField.stories.mdx
index 3c826bfd..d5da0f70 100644
--- a/packages/react/src/components/TextField/TextField.stories.mdx
+++ b/packages/react/src/components/TextField/TextField.stories.mdx
@@ -1,7 +1,7 @@
import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
import dedent from 'ts-dedent';
-import StoryConfig from '../../../.storybook/story-config.ts';
import TextField from './TextField.tsx';
+import StoryConfig from '../../../.storybook/story-config.ts';
export const meta = {
component: TextField,
@@ -58,21 +58,32 @@ A component that wraps an input filed and an input label.
+### Readonly
+
+Readonly variation of the text field.
+
+
+
### Password
## Usage
diff --git a/packages/react/src/components/TextField/TextField.tsx b/packages/react/src/components/TextField/TextField.tsx
index edb01ba9..8211723a 100644
--- a/packages/react/src/components/TextField/TextField.tsx
+++ b/packages/react/src/components/TextField/TextField.tsx
@@ -94,7 +94,7 @@ const PasswordField: ForwardRefExoticComponent = forwardRef(
const PasswordFieldWithCriteria: ForwardRefExoticComponent = forwardRef(
(
- {criteria, id, type, ...rest}: TextFieldProps,
+ {criteria, id, ...rest}: TextFieldProps,
ref: Ref,
): ReactElement => {
const [openPasswordCriteriaTooltip, setOpenPasswordCriteriaTooltip] = useState(false);
@@ -138,7 +138,6 @@ const PasswordFieldWithCriteria: ForwardRefExoticComponent = for
> = forw
{type === TextFieldInputTypes.INPUT_PASSWORD ? (
) : (
-
+
)}
);
diff --git a/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap b/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap
index b8854299..57a7f7fb 100644
--- a/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap
+++ b/packages/react/src/components/TextField/__test__/__snapshots__/TextField.test.tsx.snap
@@ -10,14 +10,14 @@ exports[`TextField should match the snapshot 1`] = `
class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-animated MuiFormLabel-colorPrimary MuiInputLabel-root MuiInputLabel-animated oxygen-input-label css-f3834g-MuiFormLabel-root-MuiInputLabel-root"
/>