1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;
|
