feat: add components & new icons

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

@@ -32,6 +32,7 @@ enum StorybookCategories {
   Utils = 'Utils'
 }
 
+// NOTE: Please keep the stories in alphabetical order.
 export type Stories =
   | 'Accordion'
   | 'AccordionDetails'
@@ -46,34 +47,36 @@ export type Stories =
   | 'Avatar'
   | 'Backdrop'
   | 'Badge'
-  | 'Breadcrumbs'
   | 'Box'
+  | 'Breadcrumbs'
   | 'Button'
-  | 'CircularProgress'
   | 'Card'
   | 'CardActions'
   | 'CardContent'
   | 'CardHeader'
   | 'Carousel'
   | 'Checkbox'
-  | 'CircularProgressAvatar'
   | 'Chip'
+  | 'CircularProgress'
+  | 'CircularProgressAvatar'
   | 'Code'
+  | 'Colors'
+  | 'Collapse'
   | 'CollapsibleNavbarItem'
   | 'ColorModeToggle'
-  | 'Colors'
   | 'Container'
+  | 'CountryFlag'
   | 'DataGrid'
+  | 'Dialog'
   | 'Divider'
   | 'Drawer'
-  | 'CountryFlag'
   | 'Fab'
   | 'Footer'
+  | 'FormControl'
   | 'FormControlLabel'
   | 'FormGroup'
-  | 'FormLabel'
   | 'FormHelperText'
-  | 'FormControl'
+  | 'FormLabel'
   | 'Grid'
   | 'Header'
   | 'IconButton'
@@ -92,19 +95,19 @@ export type Stories =
   | 'ListItemText'
   | 'Menu'
   | 'MenuItem'
-  | 'UserDropdownMenu'
   | 'Navbar'
   | 'NavbarItem'
   | 'OutlinedInput'
   | 'Paper'
-  | 'Popover'
   | 'PhoneNumberInput'
+  | 'Popover'
   | 'Radio'
   | 'RadioGroup'
   | 'Select'
   | 'SignIn'
   | 'Skeleton'
   | 'Snackbar'
+  | 'Stack'
   | 'Stepper'
   | 'Switch'
   | 'Tab'
@@ -215,6 +218,9 @@ const StoryConfig: StorybookConfig = {
   Code: {
     hierarchy: `${StorybookCategories.DataDisplay}/Code`,
   },
+  Collapse: {
+    hierarchy: `${StorybookCategories.Utils}/Collapse`,
+  },
   CollapsibleNavbarItem: {
     hierarchy: `${StorybookCategories.Navigation}/Collapsible Navbar Item`,
   },
@@ -230,6 +236,9 @@ const StoryConfig: StorybookConfig = {
   DataGrid: {
     hierarchy: `${StorybookCategories.DataDisplay}/DataGrid`,
   },
+  Dialog: {
+    hierarchy: `${StorybookCategories.Feedback}/Dialog`,
+  },
   Divider: {
     hierarchy: `${StorybookCategories.DataDisplay}/Divider`,
   },
@@ -358,6 +367,9 @@ const StoryConfig: StorybookConfig = {
   Snackbar: {
     hierarchy: `${StorybookCategories.Feedback}/Snackbar`,
   },
+  Stack: {
+    hierarchy: `${StorybookCategories.Layout}/Stack`,
+  },
   Stepper: {
     hierarchy: `${StorybookCategories.Surfaces}/Stepper`,
   },

packages/react/src/components/AlertTitle/AlertTitle.tsx

@@ -17,15 +17,15 @@
  */
 
 import MuiAlertTitle from '@mui/material/AlertTitle';
-import type {AlertTitleProps, AlertTitleProps as MuiAlertTitleProps} from '@mui/material/AlertTitle';
+import type {AlertTitleProps as MuiAlertTitleProps} from '@mui/material/AlertTitle';
 import type {OverridableComponent} from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
 import {forwardRef} from 'react';
 import type {ReactElement, ElementType, Ref} from 'react';
 import type {TypographyTypeMap} from '../Typography';
 import './alert-title.scss';
 
-export type AlertProps<C extends ElementType = ElementType> = {
+export type AlertTitleProps<C extends ElementType = ElementType> = {
   /**
    * The component used for the root node. Either a string to use a HTML element or a component.
    */
@@ -57,7 +57,7 @@ export type AlertProps<C extends ElementType = ElementType> = {
  */
 const AlertTitle: OverridableComponent<TypographyTypeMap<AlertTitleProps>> = forwardRef(
   <C extends ElementType = ElementType>(
-    {className, ...rest}: AlertProps<C>,
+    {className, ...rest}: AlertTitleProps<C>,
     ref: Ref<HTMLDivElement>,
   ): ReactElement => {
     const classes: string = clsx('oxygen-alert-title', className);

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

@@ -18,18 +18,18 @@ exports[`Alert should match the snapshot 1`] = `
           Movie
         </label>
         <div
-          class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root OxygenTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
         >
           <div
-            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-115mmlx-MuiInputBase-root-MuiOutlinedInput-root"
+            class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedEnd MuiAutocomplete-inputRoot css-118ft55-MuiInputBase-root-MuiOutlinedInput-root"
           >
             <input
               aria-autocomplete="list"
               aria-expanded="false"
               aria-invalid="false"
               autocapitalize="none"
               autocomplete="off"
-              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-11fn00k-MuiInputBase-input-MuiOutlinedInput-input"
+              class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd MuiAutocomplete-input MuiAutocomplete-inputFocused css-1d0o5yu-MuiInputBase-input-MuiOutlinedInput-input"
               id=":r2:"
               role="combobox"
               spellcheck="false"

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

@@ -19,5 +19,4 @@
 export {default} from './Backdrop';
 export * from './Backdrop';
 
-export {BackdropRoot} from '@mui/material/Backdrop';
 export type {BackdropComponentsPropsOverrides, BackdropTypeMap} from '@mui/material/Backdrop';

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

@@ -0,0 +1,79 @@
+import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
+import {useArgs} from '@storybook/client-api';
+import dedent from 'ts-dedent';
+import Collapse from './Collapse.tsx';
+import StoryConfig from '../../../.storybook/story-config.ts';
+import Box from '../Box/Box.tsx';
+import FormControlLabel from '../FormControlLabel/FormControlLabel.tsx';
+import FormGroup from '../FormGroup/FormGroup.tsx';
+import Paper from '../Paper/Paper.tsx';
+import Switch from '../Switch/Switch.tsx';
+
+export const meta = {
+  component: Collapse,
+  title: StoryConfig.Collapse.hierarchy,
+};
+
+<Meta title={meta.title} component={meta.component} />
+
+export const Template = ({...args}) => {
+  const [runtimeArgs, updateArgs] = useArgs();
+  const {in: checked} = runtimeArgs;
+  return (
+    <Box sx={{p: 3}}>
+      <FormGroup sx={{mb: 2}}>
+        <FormControlLabel
+          control={<Switch checked={checked} onChange={() => updateArgs({...runtimeArgs, in: !checked})} />}
+          label="Show"
+        />
+      </FormGroup>
+      <Collapse in={checked} {...args}>
+        <Paper sx={{background: 'red', height: '200px', width: '200px'}} />
+      </Collapse>
+    </Box>
+  );
+};
+
+# 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.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{in: false}}
+    parameters={{
+      docs: {iframeHeight: 476, inlineStories: false},
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" />
+
+## Usage
+
+Import and use the `Collapse` component in your components as follows.
+
+<Source
+  language="jsx"
+  dark
+  format
+  code={dedent`
+import Collapse from '@oxygen-ui/react/Collapse';\n
+function Demo() {
+  return (
+    <Collapse />
+  );
+}`}
+/>

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<C extends ElementType = ElementType<TransitionProps>> = {
+  /**
+   * The component used for the root node. Either a string to use a HTML element or a component.
+   */
+  component?: C;
+} & Omit<MuiCollapseProps, 'component'>;
+
+/**
+ * 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<OverridableTypeMap> = forwardRef(
+  ({className, ...rest}: CollapseProps<ElementType<TransitionProps>>, ref: Ref<HTMLDivElement>): ReactElement => (
+    <MuiCollapse ref={ref} className={clsx('OxygenCollapse-root', className)} {...rest} />
+  ),
+) as OverridableComponent<OverridableTypeMap>;
+
+export default Collapse;

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(<Collapse />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should match the snapshot', () => {
+    const {baseElement} = render(<Collapse />);
+    expect(baseElement).toMatchSnapshot();
+  });
+});