aboutsummaryrefslogtreecommitdiffstats
path: root/src/react/Accordion.js
diff options
context:
space:
mode:
authorIsrael Lavi <israel.lavi@intl.att.com>2018-05-21 17:42:00 +0300
committerIsrael Lavi <il0695@att.com>2018-05-21 17:52:01 +0300
commit1994c98063c27a41797dec01f2ca9fcbe33ceab0 (patch)
treef30beeaf15a8358f6da78fdd74bcbda74bd334f8 /src/react/Accordion.js
parent4749f4631426fcbe29ed98cef8f24cab18b501d0 (diff)
init commit onap ui
Change-Id: I1dace78817dbba752c550c182dfea118b4a38646 Issue-ID: SDC-1350 Signed-off-by: Israel Lavi <il0695@att.com>
Diffstat (limited to 'src/react/Accordion.js')
-rw-r--r--src/react/Accordion.js40
1 files changed, 40 insertions, 0 deletions
diff --git a/src/react/Accordion.js b/src/react/Accordion.js
new file mode 100644
index 0000000..3acdd24
--- /dev/null
+++ b/src/react/Accordion.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import SVGIcon from './SVGIcon.js';
+
+class Accordion extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ open: props.defaultExpanded
+ };
+ }
+ render() {
+ const { children, title, className, dataTestId } = this.props;
+ const { open } = this.state;
+ return (
+ <div className={`sdc-accordion ${className}`}>
+ <div data-test-id={dataTestId} onClick={() => this.setState({ open: !open })} className='sdc-accordion-header'>
+ <SVGIcon name='chevronDown' iconClassName={open ? 'down' : ''} />
+ <div className='title'>{title}</div>
+ </div>
+ <div className={`sdc-accordion-body ${open ? 'open' : ''}`}>{children}</div>
+ </div>
+ );
+ }
+}
+
+Accordion.propTypes = {
+ title: PropTypes.string,
+ children: PropTypes.node,
+ expandByDefault: PropTypes.bool,
+ dataTestId: PropTypes.string
+};
+
+Accordion.defaultProps = {
+ title: '',
+ className: '',
+ defaultExpanded: false
+};
+
+export default Accordion;