diff --git a/web/ASC.Web.Components/src/components/side-panel/README.md b/web/ASC.Web.Components/src/components/side-panel/README.md new file mode 100644 index 0000000000..2c427ba064 --- /dev/null +++ b/web/ASC.Web.Components/src/components/side-panel/README.md @@ -0,0 +1,24 @@ +# SidePanel + +#### Description + +SidePanel is used for displaying side panels + +#### Usage + +```js +import { SidePanel } from 'asc-web-components'; + + +``` + +#### Properties + +| Props | Type | Required | Values | Default | Description | +| --------------- | ------------------------- | :------: | -------| ------- | ------------------------------------------------ | +| `visible` | `bool` | | | | Display side panels or not | +| `scale` | `bool` | | | | Indicates the side panel has scale | +| `headerContent` | `string/element/elements` | | | | Header content | +| `bodyContent` | `string/element/elements` | | | | Body content | +| `footerContent` | `string/element/elements` | | | | Footer content | +| `onClose` | `func` | | | | Will be triggered when a close button is clicked | \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/side-panel/index.js b/web/ASC.Web.Components/src/components/side-panel/index.js new file mode 100644 index 0000000000..b3f0205f9b --- /dev/null +++ b/web/ASC.Web.Components/src/components/side-panel/index.js @@ -0,0 +1,86 @@ +import React from 'react' +import PropTypes from 'prop-types' +import styled from 'styled-components' +import Backdrop from '../backdrop' +import { Text } from '../text' +import Aside from "../layout/sub-components/aside"; + +const Content = styled.div` + padding: 0 16px 16px; +`; + +const Header = styled.div` + display: flex; + align-items: center; + border-bottom: 1px solid #dee2e6; +`; + +const HeaderText = styled(Text.ContentHeader)` + max-width: 500px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +`; + +const CloseButton = styled.a` + cursor: pointer; + position: absolute; + right: 16px; + top: 20px; + width: 16px; + height: 16px; + + &:before, &:after { + position: absolute; + left: 8px; + content: ' '; + height: 16px; + width: 1px; + background-color: #D8D8D8; + } + &:before { + transform: rotate(45deg); + } + &:after { + transform: rotate(-45deg); + } +`; + +const Body = styled.div` + position: relative; + padding: 16px 0; +`; + +const Footer = styled.div``; + +const SidePanel = props => { + //console.log("SidePanel render"); + const { visible, scale, headerContent, bodyContent, footerContent, onClose } = props; + + return ( + <> + + + + ); +}; + +SidePanel.propTypes = { + visible: PropTypes.bool, + scale: PropTypes.bool, + headerContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), + bodyContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), + footerContent: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]), + onClose: PropTypes.func +} + +export default SidePanel diff --git a/web/ASC.Web.Components/src/components/side-panel/side-panel.stories.js b/web/ASC.Web.Components/src/components/side-panel/side-panel.stories.js new file mode 100644 index 0000000000..b0c0448c78 --- /dev/null +++ b/web/ASC.Web.Components/src/components/side-panel/side-panel.stories.js @@ -0,0 +1,58 @@ +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { BooleanValue } from 'react-values' +import { withKnobs, boolean } from '@storybook/addon-knobs/react'; +import withReadme from 'storybook-readme/with-readme'; +import Readme from './README.md'; +import Section from '../../../.storybook/decorators/section'; +import SidePanel from '.'; +import Button from '../button'; + + +storiesOf('Components|SidePanel', module) + .addDecorator(withKnobs) + .addDecorator(withReadme(Readme)) + .add('base', () => ( +
+ + {({ value, toggle }) => ( +
+
+ } + footerContent={[ +
+ )); \ No newline at end of file diff --git a/web/ASC.Web.Components/src/components/side-panel/side-panel.test.js b/web/ASC.Web.Components/src/components/side-panel/side-panel.test.js new file mode 100644 index 0000000000..641fd4065d --- /dev/null +++ b/web/ASC.Web.Components/src/components/side-panel/side-panel.test.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import SidePanel from '.'; + +describe('', () => { + it('renders without error', () => { + const wrapper = mount( + + ); + + expect(wrapper).toExist(); + }); +}); diff --git a/web/ASC.Web.Components/src/index.js b/web/ASC.Web.Components/src/index.js index 67942d73c9..7796ba0467 100644 --- a/web/ASC.Web.Components/src/index.js +++ b/web/ASC.Web.Components/src/index.js @@ -57,3 +57,4 @@ export { default as FieldContainer } from './components/field-container' export { default as utils } from './utils' export { default as DatePicker } from './components/date-picker' export { default as PasswordInput } from './components/password-input' +export { default as SidePanel } from './components/side-panel'