-
Notifications
You must be signed in to change notification settings - Fork 27
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #293 from brionmario/migrate-default-props
feat: add components & new icons
- Loading branch information
Showing
48 changed files
with
1,388 additions
and
66 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
packages/react/src/components/Collapse/Collapse.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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 = ({...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 /> | ||
| ); | ||
| }`} | ||
| /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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://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; |
32 changes: 32 additions & 0 deletions
32
packages/react/src/components/Collapse/__tests__/Collapse.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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(); | ||
| }); | ||
| }); |
Oops, something went wrong.