@telia/styleguide/es/molecules/LightAlert/LightAlert.js

This is a living styleguide, showing the Atomic Design components which should be used in Telia Norway's web applications to achieve a common look & feel, and therefore user experience.

import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import SvgIcon from '../../atoms/SvgIcon/SvgIcon';
import Heading from '../../atoms/Heading/Heading';
/**
 * Status: *in progress*.
 */

var _ref = React.createElement(SvgIcon, {
  iconName: "ico_info",
  color: "black",
  className: "light-alert__icon",
  role: "presentation",
  alt: ""
});

const LightAlert = ({
  title,
  children,
  className,
  noMargin
}) => React.createElement("div", {
  className: classnames('light-alert', {
    'light-alert--no-margin': noMargin,
    [className]: className
  }),
  role: "alert"
}, React.createElement("div", {
  className: "light-alert__content"
}, React.createElement("div", {
  className: "light-alert__header-container"
}, React.createElement(Heading, {
  level: "2",
  text: title,
  className: "light-alert__heading"
}), _ref), React.createElement("div", {
  className: "light-alert__text-container"
}, children)));

LightAlert.propTypes = process.env.NODE_ENV !== "production" ? {
  title: PropTypes.string,
  className: PropTypes.string,
  noMargin: PropTypes.bool,
  children: PropTypes.node
} : {};
export default LightAlert;