diff options
Diffstat (limited to 'ui/app/components/page-container')
7 files changed, 112 insertions, 0 deletions
diff --git a/ui/app/components/page-container/page-container-content.component.js b/ui/app/components/page-container/page-container-content.component.js new file mode 100644 index 000000000..ffd62894c --- /dev/null +++ b/ui/app/components/page-container/page-container-content.component.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class PageContainerContent extends Component { + + static propTypes = { + children: PropTypes.node.isRequired, + }; + + render () { + return ( + <div className="page-container__content"> + {this.props.children} + </div> + ); + } + +} diff --git a/ui/app/components/page-container/page-container-footer.component.js b/ui/app/components/page-container/page-container-footer.component.js new file mode 100644 index 000000000..0ef14c9d7 --- /dev/null +++ b/ui/app/components/page-container/page-container-footer.component.js @@ -0,0 +1,41 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class PageContainerFooter extends Component { + + static propTypes = { + onCancel: PropTypes.func, + onSubmit: PropTypes.func, + disabled: PropTypes.bool, + }; + + render () { + const { onCancel, onSubmit, disabled } = this.props + + return ( + <div className="page-container__footer"> + + <button + className="btn-secondary--lg page-container__footer-button" + onClick={() => onCancel()} + > + {this.context.t('cancel')} + </button> + + <button + className="btn-primary--lg page-container__footer-button" + disabled={disabled} + onClick={(e) => onSubmit(e)} + > + {this.context.t('next')} + </button> + + </div> + ); + } + +} + +PageContainerFooter.contextTypes = { + t: PropTypes.func, +} diff --git a/ui/app/components/page-container/page-container-header.component.js b/ui/app/components/page-container/page-container-header.component.js new file mode 100644 index 000000000..9adc88fb3 --- /dev/null +++ b/ui/app/components/page-container/page-container-header.component.js @@ -0,0 +1,35 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class PageContainerHeader extends Component { + + static propTypes = { + title: PropTypes.string, + subtitle: PropTypes.string, + onClose: PropTypes.func, + }; + + render () { + const { title, subtitle, onClose } = this.props + + return ( + <div className="page-container__header"> + + <div className="page-container__title"> + {title} + </div> + + <div className="page-container__subtitle"> + {subtitle} + </div> + + <div + className="page-container__header-close" + onClick={() => onClose()} + /> + + </div> + ); + } + +} diff --git a/ui/app/components/page-container/page-container.component.js b/ui/app/components/page-container/page-container.component.js new file mode 100644 index 000000000..7df1d48d8 --- /dev/null +++ b/ui/app/components/page-container/page-container.component.js @@ -0,0 +1,18 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' + +export default class PageContainer extends Component { + + static propTypes = { + children: PropTypes.node.isRequired, + }; + + render () { + return ( + <div className="page-container"> + {this.props.children} + </div> + ); + } + +} diff --git a/ui/app/components/page-container/tests/page-container-content-component.test.js b/ui/app/components/page-container/tests/page-container-content-component.test.js new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/ui/app/components/page-container/tests/page-container-content-component.test.js diff --git a/ui/app/components/page-container/tests/page-container-footer-component.test.js b/ui/app/components/page-container/tests/page-container-footer-component.test.js new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/ui/app/components/page-container/tests/page-container-footer-component.test.js diff --git a/ui/app/components/page-container/tests/page-container-header-component.test.js b/ui/app/components/page-container/tests/page-container-header-component.test.js new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/ui/app/components/page-container/tests/page-container-header-component.test.js |