@mirrormedia/lilith-draft-renderer/lib/website/mirrortv/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 = _interopRequireWildcard(require("styled-components"));

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

var _utils = require("../utils");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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

//for setting background color info box
const backgroundColorNormal = '#054f77';
const backgroundColorWide = '#F2F2F2';
const backgroundColorPremium = '#F2F2F2';
const textColorNormal = '#c4c4c4';
const textColorWide = 'rgba(0, 0, 0, 0.66)';
const textColorPremium = 'rgba(0, 0, 0, 0.66)';
const infoBoxWrapperNormal = (0, _styledComponents.css)`
  background-color: ${backgroundColorNormal};
  color: ${textColorNormal};
  > h2 {
    color: #ffffff;
  }
`;
const infoBoxWrapperWide = (0, _styledComponents.css)`
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  background-color: ${backgroundColorWide};
  color: ${textColorWide};
  border-top: 2px solid #054f77;
  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.08))
    drop-shadow(0px 2px 28px rgba(0, 0, 0, 0.06));

  > h2 {
    color: black;
  }
`;
const infoBoxWrapperPremium = (0, _styledComponents.css)`
  background-color: ${backgroundColorPremium};
  color: ${textColorPremium};
  border-top: 2px solid #054f77;
  filter: drop-shadow(0px 4px 12px rgba(0, 0, 0, 0.08))
    drop-shadow(0px 2px 28px rgba(0, 0, 0, 0.06));

  > h2 {
    color: #054f77;
  }
`;
const InfoBoxRenderWrapper = _styledComponents.default.div`
  padding: 32px 30px 22px 30px;
  ${_sharedStyle.defaultMarginTop}
  ${_sharedStyle.defaultMarginBottom}
  position: relative;
  > h2 {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 18px;
  }

  ${({
  contentLayout
}) => {
  switch (contentLayout) {
    case 'normal':
      return infoBoxWrapperNormal;

    case 'wide':
      return infoBoxWrapperWide;

    case 'premium':
      return infoBoxWrapperPremium;

    default:
      return infoBoxWrapperNormal;
  }
}}
`;
const infoBoxBodyNormal = (0, _styledComponents.css)`
  ul {
    li {
      &::before {
        background-color: ${textColorNormal};
      }
    }
  }
  ol {
    li {
      &::before {
        color: ${textColorNormal};
      }
    }
  }
`;
const infoBoxBodyWide = (0, _styledComponents.css)`
  ul {
    li {
      &::before {
        background-color: ${textColorWide};
      }
    }
  }
  ol {
    li {
      &::before {
        color: ${textColorWide};
      }
    }
  }
`;
const infoBoxBodyPremium = (0, _styledComponents.css)`
  ul {
    li {
      &::before {
        background-color: ${textColorPremium};
      }
    }
  }
  ol {
    li {
      &::before {
        color: ${textColorPremium};
      }
    }
  }
`;
const infoBoxLineHeight = 1.8;
const InfoBoxBody = _styledComponents.default.div`
  > * + * {
    margin-top: 20px;
  }
  font-size: 16px;
  line-height: ${infoBoxLineHeight};
  a {
    text-decoration: underline;
  }
  ul {
    margin-left: 18px;

    li {
      position: relative;
      &::before {
        content: '';
        position: absolute;
        top: calc((1rem * ${infoBoxLineHeight}) / 2);
        left: -12px;
        width: 6px;
        height: 6px;
        transform: translate(-50%, -50%);
        border-radius: 50%;
      }
    }
  }
  ol {
    margin-left: 18px;
    li {
      position: relative;
      counter-increment: list;
      padding-left: 6px;
      list-style: none;
      &::before {
        content: counter(list) '.';
        position: absolute;
        left: -18px;
        width: 24px;
      }
    }
  }
  ${({
  contentLayout
}) => {
  switch (contentLayout) {
    case 'normal':
      return infoBoxBodyNormal;

    case 'wide':
      return infoBoxBodyWide;

    case 'premium':
      return infoBoxBodyPremium;

    default:
      return infoBoxBodyNormal;
  }
}}
`;

function InfoBoxBlock(props, contentLayout = 'normal') {
  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, {
    contentLayout: contentLayout
  }, /*#__PURE__*/_react.default.createElement("h2", null, title), /*#__PURE__*/_react.default.createElement(InfoBoxBody, {
    contentLayout: contentLayout,
    dangerouslySetInnerHTML: {
      __html: contentLayout === 'amp' ? (0, _utils.convertEmbeddedToAmp)(body) : body
    }
  }));
}