pouncejs/dist/esm/components/utils/ControlledAlert/useAlertStyles.js

A collection of UI components from Panther labs

import { addOpacity } from '../../../utils/helpers';
import useTheme from '../../../utils/useTheme';

var getSolidAlertThemes = function getSolidAlertThemes(alertVariant) {
  switch (alertVariant) {
    case 'success':
      return {
        color: 'green-500',
        backgroundColor: 'green-50',
        icon: 'check-circle'
      };

    case 'warning':
      return {
        color: 'yellow-600',
        backgroundColor: 'yellow-50',
        icon: 'alert-circle-filled'
      };

    case 'error':
      return {
        color: 'red-400',
        backgroundColor: 'red-50',
        icon: 'alert-circle-filled'
      };

    case 'info':
      return {
        color: 'blue-400',
        backgroundColor: 'blue-50',
        icon: 'info'
      };

    case 'default':
    default:
      return {
        color: undefined,
        backgroundColor: 'gray-100',
        icon: undefined
      };
  }
};

var getTransparentAlertThemes = function getTransparentAlertThemes(alertVariant) {
  var theme = useTheme();

  switch (alertVariant) {
    case 'success':
      return {
        color: 'green-300',
        backgroundColor: addOpacity(theme.colors['green-300'], 0.3),
        icon: 'check-circle'
      };

    case 'warning':
      return {
        color: 'yellow-300',
        backgroundColor: addOpacity(theme.colors['yellow-300'], 0.3),
        icon: 'alert-circle'
      };

    case 'error':
      return {
        color: 'red-300',
        backgroundColor: addOpacity(theme.colors['red-300'], 0.3),
        icon: 'alert-circle'
      };

    case 'info':
      return {
        color: 'blue-300',
        backgroundColor: addOpacity(theme.colors['blue-300'], 0.3),
        icon: 'info'
      };

    case 'default':
    default:
      return {
        color: 'white',
        backgroundColor: addOpacity(theme.colors['white'], 0.3),
        icon: 'info'
      };
  }
};

var useAlertStyles = function useAlertStyles(_ref) {
  var variant = _ref.variant,
      variantBackgroundStyle = _ref.variantBackgroundStyle;

  var _ref2 = variantBackgroundStyle === 'solid' ? getSolidAlertThemes(variant) : getTransparentAlertThemes(variant),
      color = _ref2.color,
      backgroundColor = _ref2.backgroundColor,
      icon = _ref2.icon;

  switch (variantBackgroundStyle) {
    case 'transparent':
      return {
        p: 2,
        align: 'center',
        icon: icon,
        iconColor: color,
        border: '1px solid',
        borderColor: color,
        borderRadius: 'large',
        backgroundColor: backgroundColor,
        discardButtonColor: undefined
      };

    case 'solid':
    default:
      return {
        p: 2,
        align: 'center',
        icon: icon,
        iconColor: color,
        borderRadius: 'large',
        borderLeft: variant === 'default' ? 'none' : '4px solid',
        borderLeftColor: color,
        backgroundColor: backgroundColor,
        titleColor: 'black',
        discardButtonColor: 'black'
      };
  }
};

export default useAlertStyles;