Statement-richtext-markdown.js

import React from 'react'
import styled from 'styled-components'
import breakpoint from 'styled-components-breakpoint'
import ReactMarkdown from 'react-markdown'

import StyledLink from './StyledLink'
import GreyBackground from './GreyBackground'
import { Row, Col, Grid } from '../grid'
import { DisplayTitle } from '../Typography'

const PaddedGrid = styled(Grid)`
  padding-top: ${({ theme }) => theme.space[4]};
  padding-bottom: ${({ theme }) => theme.space[4]};

  ${breakpoint('tablet')`
    padding-top: ${({ theme }) => theme.space[6]};
    padding-bottom: ${({ theme }) => theme.space[6]};
  `}
`

const Link = styled(StyledLink)`
  margin-bottom: 0;
  margin-left: 0;
  padding: 0;
  font-weight: normal;
  text-decoration: underline;
  display: initial;
`

const StyledDisplayTitle = styled(DisplayTitle)`
  > strong {
    color: ${({ theme }) => theme.colors.text};
    font-weight: 500;
  }
`

const Statement = props => {
  const { richText, children, as = 'h2' } = props

  return (
    <GreyBackground>
      <PaddedGrid>
        <Row>
          <Col width={[1, 1, 1, 10 / 12, 10 / 12, 9 / 12]}>
            {richText ? (
              <DisplayTitle textLight>
                {richText.map(content => {
                  if (content.nodeType === 'text') return content.value

                  if (content.nodeType === 'hyperlink') {
                    return (
                      <Link
                        key={content.data.uri}
                        noafter="true"
                        to={`${content.data.uri}`}
                      >
                        {content.content[0].value}
                      </Link>
                    )
                  }
                  return ''
                })}
              </DisplayTitle>
            ) : (
              <ReactMarkdown
                renderers={{
                  // eslint-disable-next-line
                  headings: props => (
                    <StyledDisplayTitle as={as} textLight {...props} />
                  ),
                  // eslint-disable-next-line react/display-name
                  paragraph: props => (
                    <StyledDisplayTitle as={as} textLight {...props} />
                  )
                }}
                source={children}
              />
            )}
          </Col>
        </Row>
      </PaddedGrid>
    </GreyBackground>
  )
}

export default Statement