@axeptio/design-system/src/Core/Typography/Quote/index.jsx

Design System for Axeptio

import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const Root = styled.blockquote`
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: ${props => props.theme.spacings.sectionPaddingMobile}px;
  padding-bottom: ${props => props.theme.spacings.sectionPaddingMobile}px;
  font-family: ${props => props.theme.fonts.title};

  @media (min-width: ${props => props.theme.breakpoints.large}px) {
    padding-top: ${props => props.theme.spacings.sectionPaddingDesktop}px;
    padding-bottom: ${props => props.theme.spacings.sectionPaddingDesktop}px;
  }

  &:before {
    content: '“';
    font-size: clamp(84px, 8vw, 124px);
    line-height: 20px;
  }

  p {
    font-size: ${props => props.theme.fontSizes.h2};
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    color: ${props => props.theme.colors.secondary};
  }

  .infos {
    text-align: center;
    font-family: ${props => props.theme.fonts.text};
  }

  .author {
    display: block;
    margin-bottom: 4px;
    font-size: 18px;
    font-weight: 400;
  }

  .job {
    display: block;
    font-weight: 400;
    color: ${props => props.theme.colors.grey.v500};
  }
`;

const Quote = props => {
  const { quote, author, jobAuthor } = props;

  return (
    <Root>
      <p>{quote}</p>
      <div className="infos">
        <span className="author">{author}</span>
        <span className="job">{jobAuthor}</span>
      </div>
    </Root>
  );
};

Quote.propTypes = {
  quote: PropTypes.string,
  author: PropTypes.string,
  jobAuthor: PropTypes.string
};

Quote.defaultProps = {
  quote: '',
  author: '',
  jobAuthor: ''
};

export default Quote;