lucid-ui
Version:
A UI component library from AppNexus.
55 lines (54 loc) • 1.65 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import PropTypes from 'react-peek/prop-types';
import { lucidClassNames } from '../../util/style-helpers';
import { omitProps } from '../../util/component-types';
const cx = lucidClassNames.bind('&-Badge');
const { node, string, oneOf } = PropTypes;
export var Kind;
(function (Kind) {
Kind["default"] = "default";
Kind["primary"] = "primary";
Kind["success"] = "success";
Kind["danger"] = "danger";
Kind["warning"] = "warning";
Kind["info"] = "info";
Kind["dark"] = "dark";
})(Kind || (Kind = {}));
export var Type;
(function (Type) {
Type["filled"] = "filled";
Type["stroke"] = "stroke";
})(Type || (Type = {}));
const defaultProps = {
kind: Kind.default,
type: Type.filled,
};
export const Badge = (props) => {
const { className, kind, type, children, ...passThroughs } = props;
return (React.createElement("span", Object.assign({ className: cx('&', `&-${kind}`, `&-${type}`, className) }, omitProps(passThroughs, undefined, _.keys(Badge.propTypes))), children));
};
Badge.defaultProps = defaultProps;
Badge.displayName = 'Badge';
Badge.peek = {
description: `
\`Badge\` is a quick utility component to create a badge around any
element(s).
`,
categories: ['visual design', 'icons'],
};
Badge.propTypes = {
className: string `
class names that are appended to the defaults
`,
children: node `
any valid React children
`,
kind: oneOf(_.values(Kind)) `
Style variations for the \`Badge\`
`,
type: oneOf(_.values(Type)) `
Fill style variations for the \`Badge\`
`,
};
export default Badge;