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

## Introduction

"use strict";

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

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 colorBoxDefaultSpacing = 32;
const ColorBoxRenderWrapper = _styledComponents.default.div`
  background-color: ${props => props.color ? props.color : ' #FFFFFF'};
  padding: 12px 24px;
  position: relative;
  color: #000928;
  ${({
  theme
}) => theme.margin.default};

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

  h2 {
    ${_sharedStyle.defaultH2Style}
  }

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

    > li {
      ${_sharedStyle.defaultUnorderedListStyle}

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

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

    > li {
      ${_sharedStyle.defaultOrderedListStyle}

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

  a {
    ${_sharedStyle.defaultLinkStyle}
  }

  blockquote {
    ${_sharedStyle.defaultBlockQuoteStyle}
  }

  ${({
  theme
}) => theme.breakpoint.md} {
    padding: 16px 32px;
  }
`;

function ColorBoxBlock(props) {
  const {
    block,
    contentState
  } = props;
  const entityKey = block.getEntityAt(0);
  const entity = contentState.getEntity(entityKey);
  const {
    color,
    body
  } = entity.getData();
  return /*#__PURE__*/_react.default.createElement(ColorBoxRenderWrapper, {
    color: color
  }, /*#__PURE__*/_react.default.createElement("div", {
    dangerouslySetInnerHTML: {
      __html: body
    }
  }));
}