@aegov/design-system-react/dist/components/Alert/Alert.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Alert = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@phosphor-icons/react");
var _zod = require("zod");
var _utils = require("../../utils");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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 AlertSchema = _zod.z.object({
  variant: _zod.z.enum(['info', 'warning', 'success', 'error']).default('info'),
  title: _zod.z.string().optional(),
  children: _zod.z.any(),
  className: _zod.z.string().optional(),
  size: _zod.z.enum(['sm', 'base', 'lg']).default('base'),
  style: _zod.z.enum(['soft', 'solid']).default('soft'),
  onDismiss: _zod.z.function().optional(),
  action: _zod.z.object({
    text: _zod.z.string(),
    href: _zod.z.string()
  }).optional(),
  id: _zod.z.string().optional(),
  showIcon: _zod.z.boolean().default(true)
});
const variantStyles = {
  info: {
    soft: 'bg-techblue-50 text-techblue-700',
    solid: 'bg-techblue-600 text-whitely-50',
    icon: _react2.Info,
    link: {
      soft: 'hover:text-techblue-600',
      solid: 'hover:text-whitely-100'
    }
  },
  warning: {
    soft: 'bg-camel-50 text-camel-700',
    solid: 'bg-camel-600 text-whitely-50',
    icon: _react2.Warning,
    link: {
      soft: 'hover:text-camel-600',
      solid: 'hover:text-whitely-100'
    }
  },
  success: {
    soft: 'bg-aegreen-50 text-aegreen-700',
    solid: 'bg-aegreen-600 text-whitely-50',
    icon: _react2.CheckCircle,
    link: {
      soft: 'hover:text-aegreen-600',
      solid: 'hover:text-whitely-100'
    }
  },
  error: {
    soft: 'bg-aered-50 text-aered-700',
    solid: 'bg-aered-600 text-whitely-50',
    icon: _react2.XCircle,
    link: {
      soft: 'hover:text-aered-600',
      solid: 'hover:text-whitely-100'
    }
  }
};
const sizeStyles = {
  sm: {
    container: 'px-4 py-3 gap-3',
    icon: 'h-5 w-5',
    text: 'text-sm',
    actionIcon: 'h-4 w-4'
  },
  base: {
    container: 'px-6 py-4 gap-4',
    icon: 'h-5 w-5',
    text: 'text-base',
    actionIcon: 'h-5 w-5'
  },
  lg: {
    container: 'px-7 py-5 gap-4',
    icon: 'h-8 w-8',
    text: 'text-lg',
    actionIcon: 'h-6 w-6'
  }
};
const AlertContent = ({
  variantStyle,
  sizeStyle,
  title,
  children,
  action,
  style,
  showIcon = true
}) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, showIcon && /*#__PURE__*/_react.default.createElement("div", {
  className: "flex-shrink-0"
}, /*#__PURE__*/_react.default.createElement(variantStyle.icon, {
  className: (0, _utils.cn)('fill-current', sizeStyle.icon),
  weight: "fill"
})), /*#__PURE__*/_react.default.createElement("div", {
  className: "flex-1"
}, title && /*#__PURE__*/_react.default.createElement("div", {
  className: (0, _utils.cn)('font-semibold mb-5', sizeStyle.text)
}, title), /*#__PURE__*/_react.default.createElement("div", {
  className: (0, _utils.cn)(sizeStyle.text)
}, /*#__PURE__*/_react.default.createElement("div", {
  className: action ? 'flex justify-between items-start gap-6' : ''
}, /*#__PURE__*/_react.default.createElement("div", null, children), action && /*#__PURE__*/_react.default.createElement("div", {
  className: (0, _utils.cn)('flex-shrink-0', sizeStyle.text === 'text-lg' ? 'text-base' : 'text-sm')
}, /*#__PURE__*/_react.default.createElement("a", {
  href: action.href,
  className: (0, _utils.cn)('underline underline-offset-1 inline-flex items-center gap-2 font-medium hover:underline hover:underline-offset-2', variantStyle.link[style])
}, action.text, /*#__PURE__*/_react.default.createElement(_react2.CaretRight, {
  className: sizeStyle.actionIcon
})))))));
const Alert = props => {
  const {
    variant,
    title,
    children,
    className,
    size,
    style,
    action,
    onDismiss,
    showIcon,
    ...rest
  } = AlertSchema.parse(props);
  const variantStyle = variantStyles[variant];
  const styleVariant = variantStyle[style];
  const sizeStyle = sizeStyles[size];
  return /*#__PURE__*/_react.default.createElement("div", _extends({
    role: "alert",
    className: (0, _utils.cn)('relative flex items-start rounded', styleVariant, sizeStyle.container, className)
  }, rest), /*#__PURE__*/_react.default.createElement(AlertContent, {
    variantStyle: variantStyle,
    sizeStyle: sizeStyle,
    title: title,
    children: children,
    action: action,
    style: style,
    showIcon: showIcon
  }), onDismiss && /*#__PURE__*/_react.default.createElement("button", {
    onClick: onDismiss,
    "aria-label": "Close",
    className: 'flex-shrink-0 rounded-full hover:opacity-50 transition-opacity duration-200'
  }, /*#__PURE__*/_react.default.createElement(_react2.X, {
    className: (0, _utils.cn)(sizeStyle.icon, style === 'solid' ? 'text-whitely-50' : '')
  })));
};
exports.Alert = Alert;
var _default = exports.default = Alert;