Skip to content

Commit

Permalink
feat(react): add Collapse component
Browse files Browse the repository at this point in the history
  • Loading branch information
brionmario committed Oct 21, 2024
1 parent a2957cb commit 293e66d
Show file tree
Hide file tree
Showing 7 changed files with 225 additions and 0 deletions.
4 changes: 4 additions & 0 deletions packages/react/.storybook/story-config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -59,6 +59,7 @@ export type Stories =
| 'CircularProgressAvatar'
| 'Chip'
| 'Code'
| 'Collapse'
| 'CollapsibleNavbarItem'
| 'ColorModeToggle'
| 'Colors'
Expand Down Expand Up @@ -216,6 +217,9 @@ const StoryConfig: StorybookConfig = {
Code: {
hierarchy: `${StorybookCategories.DataDisplay}/Code`,
},
Collapse: {
hierarchy: `${StorybookCategories.Utils}/Collapse`,
},
CollapsibleNavbarItem: {
hierarchy: `${StorybookCategories.Navigation}/Collapsible Navbar Item`,
},
Expand Down
79 changes: 79 additions & 0 deletions packages/react/src/components/Collapse/Collapse.stories.mdx
Original file line number Diff line number Diff line change
@@ -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 = ({...props}) => {
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} {...props}>
<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 />
);
}`}
/>
67 changes: 67 additions & 0 deletions packages/react/src/components/Collapse/Collapse.tsx
Original file line number Diff line number Diff line change
@@ -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://mui.com/material-ui/transitions/)
* - [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;
32 changes: 32 additions & 0 deletions packages/react/src/components/Collapse/__tests__/Collapse.test.tsx
Original file line number Diff line number Diff line change
@@ -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();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Collapse should match the snapshot 1`] = `
<body>
<div>
<div
class="MuiCollapse-root MuiCollapse-vertical OxygenCollapse-root MuiCollapse-hidden css-bz4dnt-MuiCollapse-root"
style="min-height: 0px;"
>
<div
class="MuiCollapse-wrapper MuiCollapse-vertical css-smkl36-MuiCollapse-wrapper"
>
<div
class="MuiCollapse-wrapperInner MuiCollapse-vertical css-9l5vo-MuiCollapse-wrapperInner"
/>
</div>
</div>
</div>
</body>
`;
20 changes: 20 additions & 0 deletions packages/react/src/components/Collapse/index.ts
Original file line number Diff line number Diff line change
@@ -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';
3 changes: 3 additions & 0 deletions packages/react/src/components/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,9 @@ export * from './CircularProgressAvatar';
export {default as Code} from './Code';
export * from './Code';

export {default as Collapse} from './Collapse';
export * from './Collapse';

export {default as ColorModeToggle} from './ColorModeToggle';
export * from './ColorModeToggle';

Expand Down

0 comments on commit 293e66d

Please sign in to comment.