jsx import { CSSObject , jsx } from '@emotion/core' ; import type { Theme } from '../Layout' ; import { QueryKeys , media } from '../mediaQueries' ; import { TextProps , filterTextProps , textStyle } from './Text' ; interface HeadingProps < T = HTMLHeadingElement > extends TextProps < T > { level ? : string ; } export const Heading = ( { level , ... props } ) => { switch ( level ) { case '2' : return < H2 { ... props } / > ; case '3' : return < H3 { ... props } / > ; case '4' : return < H4 { ... props } / > ; case '1' : default : return < H1 { ... props } / > ; } } ; export const h1Style = ( theme , { block = true , color = theme . general . color , level = '1' , noWrap = false , textTransform = 'none' , ... props } ) => ( { ... textStyle ( theme , { block , color , noWrap , textTransform , ... props } ) , fontSize : '48px' , fontWeight : 300 , lineHeight : '56px' , marginBottom : '64px' , marginTop : 0 , minHeight : '48px' , [ media [ QueryKeys . MOBILE ] ] : { fontSize : '40px' , lineHeight : '48px' , } , } ) ; export const H1 = ( props ) => < h1 css = { theme => h1Style ( theme , props ) } { ... filterTextProps ( props ) } />; export const h2Style = ( theme , { block = true , color = theme . general . color , noWrap = false , textTransform = 'none' , ... props } ) => ( { ... textStyle ( theme , { block , color , noWrap , textTransform , ... props } ) , fontSize : '20px' , fontWeight : 700 , lineHeight : '28px' , marginBottom : '24px' , marginTop : '32px' , [ media [ QueryKeys . MOBILE ] ] : { fontSize : '18px' , lineHeight : '26px' , marginBottom : '20px' , marginTop : '26px' , } , } ) ; export const H2 = ( props ) => < h2 css = { theme => h2Style ( theme , props ) } { ... filterTextProps ( props ) } />; export const h3Style = ( theme , { block = true , color = theme . general . color , noWrap = false , textTransform = 'none' , ... props } ) => ( { ... textStyle ( theme , { block , color , noWrap , textTransform , ... props } ) , fontSize : '16px' , fontWeight : 600 , marginBottom : '16px' , } ) ; export const H3 = ( props ) => < h3 css = { theme => h3Style ( theme , props ) } { ... filterTextProps ( props ) } />; export const h4Style = ( theme , { block = true , color = theme . general . color , noWrap = false , textTransform = 'none' , ... props } ) => ( { ... textStyle ( theme , { block , color , noWrap , textTransform , ... props } ) , fontSize : '11px' , fontWeight : 300 , marginBottom : '5px' , marginTop : '20px' , } ) ; export const H4 = ( props ) => < h3 css = { theme => h4Style ( theme , props ) } { ... filterTextProps ( props ) } />;