@primer/react/lib/InlineMessage/InlineMessage.js

An implementation of GitHub's Primer Design System using React

'use strict';

var octiconsReact = require('@primer/octicons-react');
var clsx = require('clsx');
var React = require('react');
var styled = require('styled-components');
var constants = require('../constants.js');
var toggleStyledComponent = require('../internal/utils/toggleStyledComponent.js');
require('../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
require('../FeatureFlags/DefaultFeatureFlags.js');
var InlineMessage_module = require('./InlineMessage.module.css.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

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); }
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff';
const StyledMessage = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled__default.default.div.withConfig({
  displayName: "InlineMessage__StyledMessage",
  componentId: "sc-13z0tw8-0"
})(["display:grid;column-gap:0.5rem;grid-template-columns:auto 1fr;align-items:start;color:var(--inline-message-fgColor,", ");line-height:var(--inline-message-lineHeight);font-size:var(--inline-message-fontSize,", ");&[data-size='small']{--inline-message-fontSize:var(--text-body-size-small,", ");--inline-message-lineHeight:var(--text-body-lineHeight-small,1.6666);}&[data-size='medium']{--inline-message-fontSize:var(--text-body-size-medium,", ");--inline-message-lineHeight:var(--text-body-lineHeight-medium,1.4285);}&[data-variant='warning']{--inline-message-fgColor:", ";}&[data-variant='critical']{--inline-message-fgColor:", ";}&[data-variant='success']{--inline-message-fgColor:", ";}&[data-variant='unavailable']{--inline-message-fgColor:", ";}& .InlineMessageIcon{min-height:calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));}"], constants.get('colors.fg.muted'), constants.get('fontSizes.1'), constants.get('fontSizes.0'), constants.get('fontSizes.1'), constants.get('colors.attention.fg'), constants.get('colors.danger.fg'), constants.get('colors.success.fg'), constants.get('colors.fg.muted')));
const variantToIcon = (enabled, variant) => {
  const icons = {
    warning: /*#__PURE__*/React__default.default.createElement(octiconsReact.AlertIcon, {
      className: enabled ? InlineMessage_module.InlineMessageIcon : 'InlineMessageIcon'
    }),
    critical: /*#__PURE__*/React__default.default.createElement(octiconsReact.AlertIcon, {
      className: enabled ? InlineMessage_module.InlineMessageIcon : 'InlineMessageIcon'
    }),
    success: /*#__PURE__*/React__default.default.createElement(octiconsReact.CheckCircleIcon, {
      className: enabled ? InlineMessage_module.InlineMessageIcon : 'InlineMessageIcon'
    }),
    unavailable: /*#__PURE__*/React__default.default.createElement(octiconsReact.AlertIcon, {
      className: enabled ? InlineMessage_module.InlineMessageIcon : 'InlineMessageIcon'
    })
  };
  return icons[variant];
};
const variantToSmallIcon = (enabled, variant) => {
  const icons = {
    warning: /*#__PURE__*/React__default.default.createElement(octiconsReact.AlertFillIcon, {
      className: InlineMessage_module.InlineMessageIcon,
      size: 12
    }),
    critical: /*#__PURE__*/React__default.default.createElement(octiconsReact.AlertFillIcon, {
      className: InlineMessage_module.InlineMessageIcon,
      size: 12
    }),
    success: /*#__PURE__*/React__default.default.createElement(octiconsReact.CheckCircleFillIcon, {
      className: InlineMessage_module.InlineMessageIcon,
      size: 12
    }),
    unavailable: /*#__PURE__*/React__default.default.createElement(octiconsReact.AlertFillIcon, {
      className: InlineMessage_module.InlineMessageIcon,
      size: 12
    })
  };
  return icons[variant];
};
function InlineMessage({
  children,
  className,
  size = 'medium',
  variant,
  ...rest
}) {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  const icon = size === 'small' ? variantToSmallIcon(enabled, variant) : variantToIcon(enabled, variant);
  return /*#__PURE__*/React__default.default.createElement(StyledMessage, _extends({
    className: clsx.clsx(className, enabled && InlineMessage_module.InlineMessage)
  }, rest, {
    "data-size": size,
    "data-variant": variant
  }), icon, children);
}
InlineMessage.displayName = "InlineMessage";

exports.InlineMessage = InlineMessage;