lucid-ui
Version:
A UI component library from Xandr.
112 lines • 6.02 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Banner = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var prop_types_1 = __importDefault(require("prop-types"));
var react_transition_group_1 = require("react-transition-group");
var style_helpers_1 = require("../../util/style-helpers");
var CloseIcon_1 = __importDefault(require("../Icon/CloseIcon/CloseIcon"));
var cx = style_helpers_1.lucidClassNames.bind('&-Banner');
var bannerPropTypes = {
/** Pass in a icon component for custom icons within `Banner`. */
icon: prop_types_1.default.element,
/** Set this to `true` if you want to have a `x` close icon. */
isCloseable: prop_types_1.default.bool,
/** Defaults to `true`. If set to `false` the banner will not be filled in. */
isFilled: prop_types_1.default.bool,
/** If set to `true` the banner have smaller padding on the inside. */
isSmall: prop_types_1.default.bool,
/** Class names that are appended to the defaults. */
className: prop_types_1.default.string,
/** Any valid React children. */
children: prop_types_1.default.node,
/** Style variations of the `Banner`. */
kind: prop_types_1.default.oneOf([
'primary',
'success',
'warning',
'danger',
'info',
'default',
]),
/** Called when the user closes the `Banner`. Signature: `({ event, props }) => {}` */
onClose: prop_types_1.default.func,
/** Controls the visibility of the `Banner`. */
isClosed: prop_types_1.default.bool,
};
var defaultProps = {
icon: null,
isCloseable: true,
isFilled: true,
isSmall: false,
kind: 'default',
onClose: lodash_1.default.noop,
isClosed: false,
};
var Banner = function (props) {
var icon = props.icon, kind = props.kind, className = props.className, children = props.children, isCloseable = props.isCloseable, isClosed = props.isClosed, isFilled = props.isFilled, isSmall = props.isSmall, onClose = props.onClose, passThroughs = __rest(props, ["icon", "kind", "className", "children", "isCloseable", "isClosed", "isFilled", "isSmall", "onClose"]);
var handleClose = function (_a) {
var event = _a.event, props = _a.props;
onClose({ event: event, props: props });
};
var displayedIcon = null;
if (icon) {
displayedIcon = icon;
}
return (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: !isClosed, classNames: cx('&'), timeout: 300, unmountOnExit: true },
react_1.default.createElement("section", __assign({}, passThroughs, { className: cx('&', {
'&-has-icon': displayedIcon,
'&-has-close': isCloseable,
'&-primary': kind === 'primary',
'&-success': kind === 'success',
'&-warning': kind === 'warning',
'&-danger': kind === 'danger',
'&-info': kind === 'info',
'&-small': isSmall,
'&-filled': isFilled,
}, className) }),
displayedIcon ? (react_1.default.createElement("span", { className: cx('&-icon') }, displayedIcon)) : null,
react_1.default.createElement("span", { className: cx('&-content') }, children),
isCloseable ? (react_1.default.createElement(CloseIcon_1.default, { isClickable: true, size: 8, className: cx('&-close'), onClick: handleClose })) : null)));
};
exports.Banner = Banner;
exports.Banner.defaultProps = defaultProps;
exports.Banner.displayName = 'Banner';
exports.Banner.peek = {
description: "A banner that displays a prominent message.",
notes: {
overview: "\n\t\t\tA banner that displays a prominent message.\n\t\t",
intendedUse: "\n\t\t\tCommunicates information, success, a warning, or an error.\n\n\t\t\t**Styling notes**\n\n\t\t\t- Banners usually display at the top of a page.\n\t\t\t- Use the solid filled banner for single-line content.\n\t\t\t- Use the outlined banner for multi-line content.\n\t\t\t- Color use:\n\t\t\t\t- Use `kind:\"info\"` (blue) for information, like instructions for a feature.\n\t\t\t\t- Use `kind:\"success\"` (green) for success messages, like completing a task successfully.\n\t\t\t\t- Use `kind:\"warning\"` (yellow) for warnings, like a line item that is under-delivering.\n\t\t\t\t- Use `kind:\"danger\"` (orange) for danger messages, like an error message for missing required content.\n\t\t\t\t- Use grey banners for new feature announcements.\n\t\t",
technicalRecommendations: "\n\t\t\tShort single-line content can be passed in as a simple string. Multi-line messages should be passed wrapped in a `<p>` tag.\n\t\t\tYou can apply styling as needed within a banner, for example using `strong`, `a href`, or `em`.\n\t\t",
},
categories: ['communication'],
};
exports.Banner.propTypes = bannerPropTypes;
exports.default = exports.Banner;
//# sourceMappingURL=Banner.js.map