@navinc/base-react-components/src/block-quote.js

Nav's Pattern Library

import styled from 'styled-components'
import PropTypes from 'prop-types'

const StyledFigure = styled.figure`
  position: relative;
  padding: 0 1em;
  margin: 0 0 16px 16px;
`

const StyledBlockQuote = styled.blockquote`
  && p {
    padding-bottom: 0;
    color: ${({ theme }) => theme.neutral500};
    font-style: italic;
    font-size: 14px;
  }
  & ::before {
    content: '';
    height: 100%;
    position: absolute;
    left: 0;
    width: 4px;
    border: solid ${({ color, theme }) => theme[color] ?? theme.navBlue} 2px;
    background: ${({ color, theme }) => theme[color] ?? theme.navBlue};
    border-radius: 2px;
  }
  margin: 0 20px;
`

const BlockQuote = ({ children, color }) => {
  return (
    <StyledFigure>
      <StyledBlockQuote color={color}>{children}</StyledBlockQuote>
    </StyledFigure>
  )
}

BlockQuote.propTypes = {
  /** It changes the color of the line to the left of the quote, must be defined in the theme (ex: navBlue) */
  color: PropTypes.string,
  /** The actual quote */
  children: PropTypes.string,
}

export default BlockQuote