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 | 1x 5x 5x 5x 1x 1x | import cx from 'classnames'
import PropTypes from 'prop-types'
import {
CLASS_ICON,
CLASS_ICON_RIGHT,
CLASS_TEXT,
DESIGNS,
getClassNames,
shouldRenderIcon,
SIZES,
truncateText,
TYPES
} from './config.js'
const AtomBadge = ({
icon,
iconRight,
label,
size = SIZES.SMALL,
type = TYPES.SUCCESS,
design = DESIGNS.SOLID,
className,
...props
}) => {
const truncatedLabel = truncateText(label)
const classNames = getClassNames({
icon,
label,
size,
type,
design,
className,
...props
})
return (
<div className={classNames} {...props}>
{shouldRenderIcon({icon, ...props}) && !iconRight && <span className={CLASS_ICON}>{icon}</span>}
<span className={CLASS_TEXT} title={truncatedLabel}>
{label}
</span>
{shouldRenderIcon({icon, ...props}) && iconRight && (
<span className={cx(CLASS_ICON, CLASS_ICON_RIGHT)}>{icon}</span>
)}
</div>
)
}
AtomBadge.displayName = 'AtomBadge'
AtomBadge.propTypes = {
/**
* Design style of button: 'solid' (default) or 'soft'
*/
design: PropTypes.oneOf(Object.values(DESIGNS)),
/** Badge text to be shown */
label: PropTypes.string.isRequired,
/** Custom svg icon to be shown */
icon: PropTypes.node,
/** Icon to the right (left by default) */
iconRight: PropTypes.bool,
/** Whether show a background color */
transparent: PropTypes.bool,
/** Determine the size of the badge */
size: PropTypes.oneOf(Object.values(SIZES)),
/** Determine the type of the badge */
type: PropTypes.oneOfType([
PropTypes.oneOf(Object.values(TYPES)), // Better use one of defined types
PropTypes.string // Can even custom your own type
]),
/* Custom class name */
className: PropTypes.string
}
export default AtomBadge
export {DESIGNS as atomBadgeDesigns, TYPES as atomBadgeTypes, SIZES as atomBadgeSizes}
|