@zenkit/typography/esm/blockquote.js

ZenKit components for impliments typography

import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import * as React from 'react';
import cn from 'classnames';
import { withStyles } from '@zenkit/styles';
import Text from './text';
import Paragraph from './paragraph';
export const styles = {
  root: {
    margin: '0 0 1em'
  },
  paragraph: {
    margin: 0
  },
  footer: {
    display: 'block'
  }
};

function Blockquote(props) {
  const {
    source,
    classes,
    className: classNameProps,
    children
  } = props,
        otherProps = _objectWithoutPropertiesLoose(props, ["source", "classes", "className", "children"]);

  return React.createElement(Text, _extends({
    is: "blockquote",
    size: "1.25em",
    className: cn(classes.root, classNameProps)
  }, otherProps), React.Children.map(children, (child, index) => {
    if (!child) return;
    const key = child.key || `paragraph-${index}`;

    if (child.type !== Paragraph) {
      return React.createElement(Paragraph, {
        key: key,
        className: classes.paragraph
      }, child);
    }

    return React.cloneElement(child, {
      key,
      className: cn(classes.paragraph, child.props.className)
    });
  }), source && React.createElement(Text, {
    is: "footer",
    size: "80%",
    color: "#6c757d",
    className: classes.footer
  }, source));
}

export default withStyles(styles)(Blockquote);