aboutsummaryrefslogtreecommitdiffstats
path: root/src/react/Tile.js
blob: f47f88d611a7e01b01d6bd4ac31bb7ff17847ed1 (plain)
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;