saagie-ui/src/react/core/molecules/message/Message.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Text } from '../../atoms/text/Text';
import { modifierCSS } from '../../../helpers';

const propTypes = {
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,

  /**
   * The component default class.
   */
  defaultClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),

  /**
   * The className property allows you to add more classes to the component.
   */
  className: PropTypes.string,

  /**
   * The message color
   */
  color: PropTypes.oneOf(['', 'primary', 'secondary', 'success', 'warning', 'danger']),

  /**
   * Object of props passed to the <Text> component
   */
  textProps: PropTypes.object,

  /**
   * The size of the message (affects the font-size and the padding)
   */
  size: PropTypes.oneOf(['', 'sm']),

  /**
   * Sets the light mode for the component
   */
  isLight: PropTypes.bool,

  /**
   * The content of the message
   */
  children: PropTypes.node,
};
const defaultProps = {
  tag: 'div',
  defaultClassName: 'sui-m-message',
  className: '',
  color: '',
  textProps: {},
  size: '',
  isLight: false,
  children: '',
};

export const Message = ({
  tag: Tag,
  defaultClassName,
  className,
  color,
  textProps,
  size,
  isLight,
  children,
}) => {
  const classes = classnames(
    defaultClassName,
    modifierCSS(color),
    modifierCSS(size),
    isLight ? 'as--light' : '',
    className,
  );

  return (
    <Tag className={classes}>
      <Text {...textProps}>{children}</Text>
    </Tag>
  );
};

Message.propTypes = propTypes;
Message.defaultProps = defaultProps;