import React from 'react';
import styled from 'styled-components';
import cx from 'classnames';
import Styled from 'react-styleguidist/lib/rsg-components/Styled';
import remcalc from 'remcalc';
const styles = ({ color, fontFamily, fontSize }) => ({
heading: {
margin: remcalc(24),
marginLeft: 0,
color: color.base,
fontFamily: fontFamily.base,
fontWeight: 'normal'
},
heading1: {
fontSize: remcalc(36)
},
heading2: {
fontSize: remcalc(30)
},
heading3: {
fontSize: remcalc(26)
},
heading4: {
fontSize: remcalc(24)
},
heading5: {
fontSize: remcalc(24)
},
heading6: {
fontSize: remcalc(18)
}
});
const Link = styled.a`
color: ${props => props.theme.text};
text-decoration: none;
`;
function HeadingRenderer({ classes, level, children, ...props }) {
const Tag = `h${level}`;
const headingClasses = cx(classes.heading, classes[`heading${level}`]);
const Heading = level === 1 ? null : (