@zenkit/typography/esm/heading.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';
export function mapLevelToSize(level) {
  const SIZES = ['xl', 'l', 'm', 's', 'xs', 'xxs'];
  return SIZES[level - 1];
}
export const styles = {
  root: {
    margin: '0 0 .5rem',
    fontWeight: '500',
    lineHeight: '1.2',
    color: 'inherit'
  },
  size_xl: {
    fontSize: '2.5rem'
  },
  size_l: {
    fontSize: '2rem'
  },
  size_m: {
    fontSize: '1.75rem'
  },
  size_s: {
    fontSize: '1.5rem'
  },
  size_xs: {
    fontSize: '1.25rem'
  },
  size_xxs: {
    fontSize: '1rem'
  }
};

function Heading(props) {
  const {
    level,
    size: sizeProp,
    classes,
    className: classNameProps,
    children
  } = props,
        otherProps = _objectWithoutPropertiesLoose(props, ["level", "size", "classes", "className", "children"]);

  const component = `h${level}`;
  const size = sizeProp || mapLevelToSize(level);
  return React.createElement(Text, _extends({
    is: component,
    className: cn(classes.root, {
      [classes[`size_${size}`]]: size
    }, classNameProps)
  }, otherProps), children);
}

Heading.defaultProps = {
  level: 3
};
export default withStyles(styles)(Heading);