@kiwicom/orbit-components/es/Alert/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

import * as React from "react";
import styled from "styled-components";

import defaultTokens from "../defaultTokens";
import InformationCircle from "../icons/InformationCircle";
import Check from "../icons/Check";
import AlertTriangle from "../icons/Alert";
import AlertCircle from "../icons/AlertCircle";
import Close from "../icons/Close";
import ButtonLink from "../ButtonLink";
import { StyledTextLink } from "../TextLink";
import { TYPE_OPTIONS, TOKENS } from "./consts";
import getSpacingToken from "../common/getSpacingToken";

const getTypeToken = name => ({ theme, type }) => {
  const tokens = {
    [TOKENS.colorIconAlert]: {
      [TYPE_OPTIONS.INFO]: theme.orbit.colorAlertIconInfo,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorAlertIconSuccess,
      [TYPE_OPTIONS.WARNING]: theme.orbit.colorAlertIconWarning,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorAlertIconCritical
    },
    [TOKENS.backgroundAlert]: {
      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundAlertInfo,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundAlertSuccess,
      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundAlertWarning,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundAlertCritical
    },
    [TOKENS.colorTextAlert]: {
      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextAlertInfo,
      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextAlertSuccess,
      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextAlertWarning,
      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextAlertCritical
    }
  };

  return tokens[name][type];
};

const Icon = ({ icon, type }) => {
  // Icon should be boolean and TRUE
  if (typeof icon === "boolean" && icon) {
    if (type === TYPE_OPTIONS.INFO) {
      return React.createElement(InformationCircle, null);
    }
    if (type === TYPE_OPTIONS.SUCCESS) {
      return React.createElement(Check, null);
    }
    if (type === TYPE_OPTIONS.WARNING) {
      return React.createElement(AlertTriangle, null);
    }
    if (type === TYPE_OPTIONS.CRITICAL) {
      return React.createElement(AlertCircle, null);
    }
  }
  return icon;
};

const StyledDiv = ({
  className,
  children,
  dataTest
}) => React.createElement(
  "div",
  { className: className, "data-test": dataTest },
  children
);

const StyledAlert = styled(StyledDiv).withConfig({
  displayName: "Alert__StyledAlert"
})(["position:relative;display:flex;width:100%;padding:", ";padding-right:", ";border-radius:", ";background:", ";color:", ";font-family:", ";font-size:", ";box-sizing:border-box;margin-bottom:", ";"], ({ theme, icon }) => icon ? `${theme.orbit.paddingAlert} ${theme.orbit.paddingAlertWithIcon}` : theme.orbit.paddingAlert, ({ theme, closable }) => closable && theme.orbit.spaceXXLarge, ({ theme }) => theme.orbit.borderRadiusNormal, getTypeToken(TOKENS.backgroundAlert), getTypeToken(TOKENS.colorTextAlert), ({ theme }) => theme.orbit.fontFamily, ({ theme }) => theme.orbit.fontSizeTextNormal, getSpacingToken);

StyledAlert.defaultProps = {
  theme: defaultTokens
};

const IconContainer = styled(StyledDiv).withConfig({
  displayName: "Alert__IconContainer"
})(["flex-shrink:0;margin-right:", ";color:", ";"], ({ theme }) => theme.orbit.spaceSmall, getTypeToken(TOKENS.colorIconAlert));

IconContainer.defaultProps = {
  theme: defaultTokens
};

const ContentWrapper = styled(StyledDiv).withConfig({
  displayName: "Alert__ContentWrapper"
})(["flex:1;display:flex;flex-direction:", ";align-items:", ";"], ({ title }) => title && "column", ({ title }) => !title && "center");

const Title = styled(StyledDiv).withConfig({
  displayName: "Alert__Title"
})(["display:flex;align-items:center;margin-bottom:", ";font-weight:", ";line-height:", ";min-height:", ";"], ({ theme, hasChildren }) => hasChildren && theme.orbit.spaceXSmall, ({ theme }) => theme.orbit.fontWeightBold, ({ theme }) => theme.orbit.lineHeightHeading, ({ theme }) => theme.orbit.heightIconMedium);

Title.defaultProps = {
  theme: defaultTokens
};

const Content = styled(StyledDiv).withConfig({
  displayName: "Alert__Content"
})(["display:block;margin-bottom:", ";line-height:", ";& a,& ", "{color:", ";font-weight:", ";transition:color ", " ease-in-out;text-decoration:none;&:hover{color:", ";}}"], ({ theme, title }) => title && theme.orbit.spaceXXSmall, ({ theme }) => theme.orbit.lineHeightText, StyledTextLink, getTypeToken(TOKENS.colorTextAlert), ({ theme }) => theme.orbit.fontWeightMedium, ({ theme }) => theme.orbit.durationFast, ({ theme }) => theme.orbit.colorTextAlertLink);

Content.defaultProps = {
  theme: defaultTokens
};

const CloseContainer = styled(StyledDiv).withConfig({
  displayName: "Alert__CloseContainer"
})(["position:absolute;top:", ";margin-top:", ";right:0;margin-right:", ";"], ({ hasChildren }) => hasChildren ? 0 : "50%", ({ hasChildren, theme }) => !hasChildren && `-${theme.orbit.widthIconSmall}`, ({ hasChildren, theme }) => !hasChildren && theme.orbit.spaceXSmall);

CloseContainer.defaultProps = {
  theme: defaultTokens
};

const Alert = props => {
  const {
    type = TYPE_OPTIONS.INFO,
    title,
    closable,
    icon,
    onClose = () => {},
    children,
    dataTest,
    spaceAfter
  } = props;
  return React.createElement(
    StyledAlert,
    { type: type, closable: closable, dataTest: dataTest, spaceAfter: spaceAfter },
    icon && React.createElement(
      IconContainer,
      { type: type },
      React.createElement(Icon, { type: type, icon: icon })
    ),
    React.createElement(
      ContentWrapper,
      { title: title },
      title && React.createElement(
        Title,
        { hasChildren: children },
        title
      ),
      children && React.createElement(
        Content,
        { title: title, type: type },
        children
      )
    ),
    closable && React.createElement(
      CloseContainer,
      { hasChildren: children },
      React.createElement(ButtonLink, {
        onClick: onClose,
        size: "small",
        icon: React.createElement(Close, { size: "small", color: type }),
        transparent: true
      })
    )
  );
};

export default Alert;