@braineet/ui/dist/esm/components/alert/index.js

Braineet design system

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React from 'react';
import { withTheme } from 'styled-components';
import { fluid } from '../../utils';
import Badge from '../badge';
import Heading from '../heading';
import Icon from '../icon';
import Pane from '../pane';
import { Wrapper, StyledIcon, IconClose } from './styles';

/**
 The `Alert` component.
*/
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var Alert = function Alert(_ref) {
  var color = _ref.color,
    theme = _ref.theme,
    icon = _ref.icon,
    isClosable = _ref.isClosable,
    onClose = _ref.onClose,
    label = _ref.label,
    children = _ref.children,
    textStyles = _ref.textStyles;
  // Get text color and background color of badge
  var _theme$helpers$getFil = theme.helpers.getFills({
      appearance: 'subtle',
      color: color
    }),
    textColor = _theme$helpers$getFil.color,
    backgroundColor = _theme$helpers$getFil.backgroundColor;
  return /*#__PURE__*/_jsxs(Wrapper, {
    bg: backgroundColor,
    paddingY: theme.utils.fluid(8),
    paddingLeft: fluid(12),
    paddingRight: fluid(12),
    borderRadius: theme.borderRadius.md,
    children: [/*#__PURE__*/_jsxs(Pane, {
      display: "flex",
      alignY: "center",
      children: [icon && (typeof icon === 'string' ? /*#__PURE__*/_jsx(StyledIcon, {
        color: textColor,
        name: icon,
        mr: theme.spaces.sm
      }) : icon), label && /*#__PURE__*/_jsx(Badge, {
        color: textColor,
        isSolid: true,
        marginRight: "0.25rem",
        children: label
      }), /*#__PURE__*/_jsx(Heading, _extends({
        color: textColor,
        size: "sm",
        lineHeight: fluid(20),
        wordBreak: "break-word",
        marginRight: fluid(36),
        display: "inline-block"
      }, textStyles, {
        children: children
      }))]
    }), typeof isClosable === 'boolean' && isClosable && /*#__PURE__*/_jsx(IconClose, {
      color: color,
      onClick: onClose,
      backgroundColor: textColor,
      children: /*#__PURE__*/_jsx(Icon, {
        color: textColor,
        name: "cross"
      })
    })]
  });
};
Alert.defaultProps = {
  icon: null,
  theme: {},
  isClosable: false,
  onClose: function onClose() {},
  color: 'success',
  textStyles: {}
};
export default withTheme(Alert);