Skip to content

Commit

Permalink
Showing 10 changed files with 212 additions and 3 deletions.
8 changes: 6 additions & 2 deletions packages/react/.storybook/story-config.ts
Original file line number Diff line number Diff line change
@@ -39,6 +39,7 @@ export type Stories =
| 'Button'
| 'ColorModeToggle'
| 'Colors'
| 'Divider'
| 'Drawer'
| 'Grid'
| 'IconButton'
@@ -92,10 +93,10 @@ const StoryConfig: StorybookConfig = {
},
AppBar: {
hierarchy: `${StorybookCategories.Surfaces}/App Bar`,
},
},
Avatar: {
hierarchy: `${StorybookCategories.DataDisplay}/Avatar`,
},
},
Box: {
hierarchy: `${StorybookCategories.Layout}/Box`,
},
@@ -111,6 +112,9 @@ const StoryConfig: StorybookConfig = {
Colors: {
hierarchy: `${StorybookCategories.Foundations}/Colors`,
},
Divider: {
hierarchy: `${StorybookCategories.DataDisplay}/Divider`,
},
Drawer: {
hierarchy: `${StorybookCategories.Navigation}/Drawer`,
},
2 changes: 1 addition & 1 deletion packages/react/src/components/Avatar/Avatar.tsx
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@ import clsx from 'clsx';
import {FC, ReactElement} from 'react';
import {WithWrapperProps} from '../../models';
import {composeComponentDisplayName} from '../../utils';
import './app-bar.scss';
import './avatar.scss';

export type AvatarProps = MuiAvatarProps;

69 changes: 69 additions & 0 deletions packages/react/src/components/Divider/Divider.stories.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import {ArgsTable, Source, Story, Canvas, Meta} from '@storybook/addon-docs';
import dedent from 'ts-dedent';
import StoryConfig from '../../../.storybook/story-config.ts';
import Divider from './Divider.tsx';
import List from '../List/List.tsx';
import ListItem from '../ListItem/ListItem.tsx';
import ListItemText from '../ListItemText/ListItemText.tsx';

export const meta = {
component: Divider,
title: StoryConfig.Divider.hierarchy,
};

<Meta title={meta.title} component={meta.component} />

export const Template = args => (
<List
sx={{
width: '100%',
maxWidth: 360,
bgcolor: 'background.paper',
}}
component="nav"
aria-label="Divided list"
>
<ListItem button>
<ListItemText primary="Divided List Item 01" />
</ListItem>
<Divider {...args} />
<ListItem button>
<ListItemText primary="Divided List Item 02" />
</ListItem>
</List>
);

# Divider

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)

## Overview

A divider is a thin line that groups content in lists and layouts.

<Canvas>
<Story name="Overview">{Template.bind({})}</Story>
</Canvas>

## Props

<ArgsTable story="Overview" />

## Usage

Import and use the `Divider` component in your components as follows.

<Source
language="jsx"
dark
format
code={dedent`
import Divider from '@oxygen-ui/react/Divider';\n
function Demo() {
return (
<Divider />
);
}`}
/>
42 changes: 42 additions & 0 deletions packages/react/src/components/Divider/Divider.tsx
Original file line number Diff line number Diff line change
@@ -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 MuiDivider, {DividerProps as MuiDividerProps} from '@mui/material/Divider';
import clsx from 'clsx';
import {FC, ReactElement} from 'react';
import {WithWrapperProps} from '../../models';
import {composeComponentDisplayName} from '../../utils';
import './divider.scss';

export type DividerProps = MuiDividerProps;

const COMPONENT_NAME: string = 'Divider';

const Divider: FC<DividerProps> & WithWrapperProps = (props: DividerProps): ReactElement => {
const {className, ...rest} = props;

const classes: string = clsx('oxygen-divider', className);

return <MuiDivider className={classes} {...rest} />;
};

Divider.displayName = composeComponentDisplayName(COMPONENT_NAME);
Divider.muiName = COMPONENT_NAME;
Divider.defaultProps = {};

export default Divider;
32 changes: 32 additions & 0 deletions packages/react/src/components/Divider/__tests__/Divider.test.tsx
Original file line number Diff line number Diff line change
@@ -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 Divider from '../Divider';

describe('Divider', () => {
it('should render successfully', () => {
const {baseElement} = render(<Divider />);
expect(baseElement).toBeTruthy();
});

it('should match the snapshot', () => {
const {baseElement} = render(<Divider />);
expect(baseElement).toMatchSnapshot();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Divider should match the snapshot 1`] = `
<body>
<div>
<hr
class="MuiDivider-root MuiDivider-fullWidth oxygen-divider css-f1a6nn-MuiDivider-root"
/>
</div>
</body>
`;
21 changes: 21 additions & 0 deletions packages/react/src/components/Divider/divider.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
/**
* 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-divider {
/* Add Styles */
}
20 changes: 20 additions & 0 deletions packages/react/src/components/Divider/index.ts
Original file line number Diff line number Diff line change
@@ -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 './Divider';
export type {DividerProps} from './Divider';
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Drawer should match the snapshot 1`] = `
<body>
<div />
</body>
`;
3 changes: 3 additions & 0 deletions packages/react/src/components/index.ts
Original file line number Diff line number Diff line change
@@ -28,6 +28,9 @@ export * from './Button';
export {default as ColorModeToggle} from './ColorModeToggle';
export * from './ColorModeToggle';

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

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

0 comments on commit 650c992

Please sign in to comment.