| 1 |
import styled from 'styled-components'; |
| 2 |
import { getStyle } from 'e-utils'; |
| 3 |
import styles from 'e-styles/heading'; |
| 4 |
|
| 5 |
const SharedHeading = styled.h1.attrs( ( props ) => ( { as: props.tag } ) )`${ ( props ) => getStyle( styles, props, 'shared' ) }`; |
| 6 |
|
| 7 |
const Heading = styled( SharedHeading )`${ ( props ) => getStyle( styles, props, 'unique' ) }`; |
| 8 |
|
| 9 |
Heading.propTypes = { |
| 10 |
className: PropTypes.string, |
| 11 |
children: PropTypes.any, |
| 12 |
tag: PropTypes.oneOf( [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ] ), |
| 13 |
variant: PropTypes.oneOf( [ 'display-1', 'display-2', 'display-3', 'display-4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ] ).isRequired, |
| 14 |
}; |
| 15 |
|
| 16 |
Heading.defaultProps = { |
| 17 |
className: '', |
| 18 |
tag: 'h1', |
| 19 |
}; |
| 20 |
|
| 21 |
export default Heading; |
| 22 |
|
