Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 1x 10x 10x 10x 10x 10x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import {
BASE_CLASS,
BORDER_RADIUS,
CLASS_HIGHLIGHT,
CLASS_INFO,
CLASS_LINK,
CLASS_MEDIA,
CLASS_RESPONSIVE,
CLASS_VERTICAL,
ELEVATION,
redirectToHref
} from './config.js'
const AtomCard = ({
media: Media,
content: Content,
vertical,
responsive,
rounded,
elevation,
highlight,
href,
blank,
onClick,
tabIndex
}) => {
const onClickHandler = e => {
typeof onClick === 'function' ? onClick(e) : redirectToHref({href, blank})
}
const redirectOnEnter = e => {
if (e.key === 'Enter') redirectToHref({href, blank})
}
const isVertical = vertical && !responsive
const classNames = cx(
BASE_CLASS,
isVertical && CLASS_VERTICAL,
responsive && CLASS_RESPONSIVE,
href && CLASS_LINK,
onClick && CLASS_LINK,
highlight && (href || onClick) && CLASS_HIGHLIGHT,
rounded && `${BASE_CLASS}--rounded-${rounded}`,
elevation && `${BASE_CLASS}--elevation-${elevation}`
)
return (
<div className={classNames} tabIndex={tabIndex} role="button" onClick={onClickHandler} onKeyDown={redirectOnEnter}>
{Media && (
<div className={CLASS_MEDIA}>
<Media />
</div>
)}
<div className={CLASS_INFO}>{Content && <Content />}</div>
</div>
)
}
AtomCard.displayName = 'AtomCard'
AtomCard.propTypes = {
/** HTML (component) to be displayed on the left/right side. It's an optional component */
media: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
/** HTML (component) to be displayed on the other side */
content: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
/** true for vertical layout */
vertical: PropTypes.bool,
/** true for make responsive layout */
responsive: PropTypes.bool,
/** Specify the border-radius of the card */
rounded: PropTypes.oneOf(Object.values(BORDER_RADIUS)),
/** Specify the box-shadow of the card */
elevation: PropTypes.oneOf(Object.values(ELEVATION)),
/** true for highlight mode */
highlight: PropTypes.bool,
/** url target of the card */
href: PropTypes.string,
/** true to open a new tab */
blank: PropTypes.bool,
/** tab order */
tabIndex: PropTypes.string,
/** */
onClick: PropTypes.func
}
export default AtomCard
export {BORDER_RADIUS as atomCardRounded, ELEVATION as atomCardElevation}
|