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 | 2x 2x 2x 2x 26x 26x 2x 2x 2x 2x | import _ from 'lodash'; import React from 'react'; import PropTypes from 'prop-types'; import { lucidClassNames } from '../../util/style-helpers'; import { StandardProps } from '../../util/component-types'; const cx = lucidClassNames.bind('&-Badge'); const badgePropTypes = { /** class names that are appended to the defaults */ className: PropTypes.string, /** any valid React children */ children: PropTypes.node, /** Style variations for the `Badge` */ kind: PropTypes.oneOf([ 'default', 'primary', 'success', 'danger', 'warning', 'info', 'dark', ]), /** Fill style variations for the `Badge` */ type: PropTypes.oneOf(['filled', 'stroke']), }; export enum Kind { default = 'default', primary = 'primary', success = 'success', danger = 'danger', warning = 'warning', info = 'info', dark = 'dark', } export enum Type { filled = 'filled', stroke = 'stroke', } export interface IBadgeProps extends StandardProps, React.DetailedHTMLProps< React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement > { kind: keyof typeof Kind; /** Fill variations for the `Badge` */ type: keyof typeof Type; } const defaultProps = { kind: Kind.default, type: Type.filled, }; export const Badge = (props: IBadgeProps): React.ReactElement => { const { className, kind, type, children, ...passThroughs } = props; return ( <span className={cx('&', `&-${kind}`, `&-${type}`, className)} {...(passThroughs as any)} > {children} </span> ); }; Badge.defaultProps = defaultProps; Badge.displayName = 'Badge'; Badge.peek = { description: `A quick utility component to create a badge around an element.`, categories: ['visual design', 'icons'], }; Badge.propTypes = badgePropTypes; export default Badge; |