@telia/styleguide/es/molecules/Alert/Alert.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 _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import SvgIcon from '../../atoms/SvgIcon/SvgIcon';
import map from 'lodash/map';
/**
 * Status: *finished*.
 */

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

var _ref3 = React.createElement("span", {
  className: "alert__close-text"
}, "LUKK");

var _ref4 = React.createElement(SvgIcon, {
  iconName: "ico_delete",
  color: "black",
  className: "box__close-icon"
});

const Alert = (_ref) => {
  let {
    kind = 'positive',
    minimizable,
    size,
    bodyHtml,
    links = [],
    children,
    onOpen,
    onClose,
    isOpen,
    minimizedText,
    className
  } = _ref,
      rest = _objectWithoutProperties(_ref, ["kind", "minimizable", "size", "bodyHtml", "links", "children", "onOpen", "onClose", "isOpen", "minimizedText", "className"]);

  return React.createElement("div", _extends({
    className: classnames('alert', {
      [className]: className,
      [`alert--${kind}`]: kind,
      [`alert--${size}`]: size,
      [`alert--minimizable`]: minimizable,
      [`alert--minimized`]: minimizable && !isOpen
    }),
    role: "alert"
  }, rest), React.createElement("div", {
    className: "alert__content"
  }, _ref2, React.createElement("div", {
    className: "alert__text-container"
  }, children ? children : bodyHtml, links.length > 0 ? React.createElement("ul", {
    className: "list list--links list--black"
  }, map(links, (link, i) => React.createElement("li", {
    key: i,
    className: "list__item"
  }, React.createElement("a", {
    className: "list__link",
    href: link.url,
    target: "_self"
  }, link.text)))) : null)), minimizable && React.createElement("button", {
    onClick: onClose,
    className: "alert__close"
  }, _ref3, _ref4), React.createElement("button", {
    onClick: onOpen,
    className: "alert__expand"
  }, minimizedText));
};

Alert.propTypes = process.env.NODE_ENV !== "production" ? {
  kind: PropTypes.oneOf(['positive', 'negative', 'info', 'warning']),
  size: PropTypes.oneOf(['large', 'large-with-borders']),
  onOpen: PropTypes.func,
  onClose: PropTypes.func,
  isOpen: PropTypes.bool,
  minimizedText: PropTypes.string,
  links: PropTypes.arrayOf(PropTypes.shape({
    text: PropTypes.string,
    url: PropTypes.string
  }))
} : {};
export default Alert;