diff options
author | Michael Lando <ml636r@att.com> | 2018-05-21 20:19:48 +0000 |
---|---|---|
committer | Gerrit Code Review <gerrit@onap.org> | 2018-05-21 20:19:48 +0000 |
commit | 05b37297177e8a342668c15e5d6f738b51f7aedd (patch) | |
tree | e236c96df52a13f935292db8aa73e84d0c41ad8a /src/react/Tile.js | |
parent | 884dfb789593d2a3cc319047ab1f0215778aec9f (diff) | |
parent | 1994c98063c27a41797dec01f2ca9fcbe33ceab0 (diff) |
Merge "init commit onap ui"HEAD2.0.0-ONAPmasterbeijing2.0.0-ONAP
Diffstat (limited to 'src/react/Tile.js')
-rw-r--r-- | src/react/Tile.js | 33 |
1 files changed, 33 insertions, 0 deletions
diff --git a/src/react/Tile.js b/src/react/Tile.js new file mode 100644 index 0000000..f47f88d --- /dev/null +++ b/src/react/Tile.js @@ -0,0 +1,33 @@ +import React, {Children} from 'react'; +import PropTypes from 'prop-types'; +import TileInfo from './TileInfo.js'; +import TileFooter from './TileFooter.js'; +import SVGIcon from './SVGIcon.js'; + +const Tile = ({headerText, headerColor, iconName, iconColor, className, onClick, children, dataTestId}) => { + let childrenArr = Children.toArray(children); + return ( + <div className={`sdc-tile ${className || ''}`} onClick={onClick} data-test-id={dataTestId}> + <div className={`sdc-tile-header ${headerColor || ''}`}>{headerText}</div> + <div className='sdc-tile-content'> + <div className={`sdc-tile-content-icon ${iconColor || ''}`}> + {iconName && <SVGIcon name={iconName}/>} + </div> + {childrenArr.find(e => e.type === TileInfo)} + </div> + {childrenArr.find(e => e.type === TileFooter)} + </div> + ); +}; + +Tile.propTypes = { + headerText: PropTypes.string, + headerColor: PropTypes.string, + iconName: PropTypes.string, + iconColor: PropTypes.string, + className: PropTypes.string, + onClick: PropTypes.func, + dataTestId: PropTypes.string +}; + +export default Tile; |