@navinc/base-react-components/src/aside.js

Nav's Pattern Library

import React from 'react'
import styled from 'styled-components'
import Copy from './copy'

const StyledAside = styled.aside`
  position: relative;
  padding: 0 1em;
  margin: 0;

  &::before {
    content: '';
    height: 100%;
    position: absolute;
    left: 0;
    width: 4px;
    border: solid ${({ theme, color = 'tuscan200' }) => theme[color]} 2px;
    background: ${({ theme, color = 'tuscan200' }) => theme[color]};
    border-radius: 2px;
  }
`

const Title = styled.h3`
  color: ${({ theme }) => theme.neutral500};
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
`
const Text = styled(Copy).attrs(() => ({ size: 'sm' }))`
  color: ${({ theme }) => theme.neutral500};
  font-style: italic;
`

const BlockQuote = ({ title, children, color, ...props }) => (
  <StyledAside color={color} data-testid="aside" {...props}>
    {title && <Title>{title}</Title>}
    <Text>{children}</Text>
  </StyledAside>
)

export default BlockQuote