@telia/styleguide/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.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames2 = _interopRequireDefault(require("classnames"));

var _SvgIcon = _interopRequireDefault(require("../../atoms/SvgIcon/SvgIcon"));

var _Heading = _interopRequireDefault(require("../../atoms/Heading/Heading"));

var _ref2 = _react.default.createElement(_SvgIcon.default, {
  iconName: "ico_info",
  color: "black",
  className: "light-alert__icon",
  role: "presentation",
  alt: ""
});

/**
 * Status: *in progress*.
 */
var LightAlert = function LightAlert(_ref) {
  var title = _ref.title,
      children = _ref.children,
      className = _ref.className,
      noMargin = _ref.noMargin;
  return _react.default.createElement("div", {
    className: (0, _classnames2.default)('light-alert', (0, _defineProperty2.default)({
      'light-alert--no-margin': noMargin
    }, className, className)),
    role: "alert"
  }, _react.default.createElement("div", {
    className: "light-alert__content"
  }, _react.default.createElement("div", {
    className: "light-alert__header-container"
  }, _react.default.createElement(_Heading.default, {
    level: "2",
    text: title,
    className: "light-alert__heading"
  }), _ref2), _react.default.createElement("div", {
    className: "light-alert__text-container"
  }, children)));
};

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