jobiqo-cl/lib/src/components/02-atoms/13-text/02-WYSIWYG/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);

const StyledWISIWIGText = styled__default.div `
  h1 {
    font-size: ${props => props.theme.font.heading.h1.mobile.fontSize};
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }

  h2 {
    font-size: ${props => props.theme.font.heading.h2.mobile.fontSize};
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  h3 {
    font-size: ${props => props.theme.font.heading.h3.mobile.fontSize};
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
  }

  p {
    margin-top: 0.5rem;
  }

  ul {
    margin: 1.5rem 0;
  }

  ul li {
    margin: 0 0 12px 0;
  }

  ul li {
    list-style-type: none;
    padding: 0 0 0 2rem;
    position: relative;
  }

  ul li:before {
    /*fill it with a blank space*/
    content: '';

    /*make it a block element*/
    display: block;
    /*Now position it on the left of the list item, and center it vertically
        (so that it will work with multiple line list-items)*/
    position: absolute;
    left: 7px;
    top: 40%;
    margin-top: -8px;
  }

  ul li:after {
    /*Add another block-level blank space*/
    content: '';
    display: block;

    /*Make it a small rectangle so the border will create an L-shape*/
    width: 3px;
    height: 6px;

    /*Add a white border on the bottom and left, creating that 'L' */
    border-style: solid;
    border-color: ${props => props.theme.colors.primary};
    border-width: 0 2px 2px 0;

    /*Position it on top of the circle*/
    position: absolute;
    left: 14px;
    top: 40%;
    margin-top: -4px;

    /*Rotate the L 45 degrees to turn it into a checkmark*/
    transform: rotate(45deg);
  }
`;
/**
 * Renders full HTML Content or filtered HTML content dependin on format. Use with care.
 * Full HTML could be mean potential XSS scripting vulnerability if the provider of the content
 * is not trusted (admin) don't use this component.
 */
const WYSIWYGText = ({ format = null, content }) => {
    switch (format) {
        case 'full_html':
            return (React__default.createElement(StyledWISIWIGText, { "data-testid": "full-rendered-markup", dangerouslySetInnerHTML: {
                    __html: content
                } }));
        default:
            return React__default.createElement(React__default.Fragment, null, content);
    }
};

exports.WYSIWYGText = WYSIWYGText;