@mirrormedia/lilith-draft-renderer/lib/website/readr/block-renderers/info-box-block.js

## Introduction

"use strict";

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

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

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _sharedStyle = require("../shared-style");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

const infoboxDefaultSpacing = 8;
const InfoBoxRenderWrapper = _styledComponents.default.div`
  background: #f6f6fb;
  position: relative;
  padding: 24px 0px;
  width: calc(100% + 40px);
  transform: translateX(-20px);
  ${({
  theme
}) => theme.margin.default};

  ${({
  theme
}) => theme.breakpoint.md} {
    max-width: 560px;
    transform: none;
  }
`;
const InfoTitle = _styledComponents.default.div`
  width: 100%;
  font-style: normal;
  font-weight: 700;
  ${({
  theme
}) => theme.fontSize.md};
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: #000928;
  border-left: 8px solid #04295e;
  padding: 0 32px 0 24px;
  margin-bottom: ${infoboxDefaultSpacing}px;
`;
const InfoContent = _styledComponents.default.div`
  padding: 0px 32px;
  font-style: normal;
  font-weight: 400;
  ${({
  theme
}) => theme.fontSize.sm};
  line-height: 1.6;
  color: rgba(0, 9, 40, 0.87);

  > div > * + * {
    margin: ${infoboxDefaultSpacing}px 0 0;
    min-height: 0.01px; //to make margins between paragraphs effective
  }

  h2 {
    ${_sharedStyle.defaultH2Style}
  }

  ul {
    ${_sharedStyle.defaultUlStyle}
    margin-top: ${infoboxDefaultSpacing}px;

    > li {
      ${_sharedStyle.defaultUnorderedListStyle}

      & + li {
        margin: ${infoboxDefaultSpacing / 2}px 0 0;
      }
    }
  }

  ol {
    ${_sharedStyle.defaultOlStyle}
    margin-top: ${infoboxDefaultSpacing}px;

    > li {
      ${_sharedStyle.defaultOrderedListStyle}

      & + li {
        margin: ${infoboxDefaultSpacing / 2}px 0 0;
      }
    }
  }

  a {
    ${_sharedStyle.defaultLinkStyle}
  }

  blockquote {
    ${_sharedStyle.defaultBlockQuoteStyle}
  }
`;

function InfoBoxBlock(props) {
  const {
    block,
    contentState
  } = props;
  const entityKey = block.getEntityAt(0);
  const entity = contentState.getEntity(entityKey);
  const {
    title,
    body
  } = entity.getData();
  return /*#__PURE__*/_react.default.createElement(InfoBoxRenderWrapper, {
    className: "infobox-wrapper"
  }, /*#__PURE__*/_react.default.createElement(InfoTitle, {
    className: "infobox-title"
  }, title), /*#__PURE__*/_react.default.createElement(InfoContent, {
    className: "infobox-content"
  }, /*#__PURE__*/_react.default.createElement("div", {
    dangerouslySetInnerHTML: {
      __html: body
    }
  })));
}