import * as React from 'react' ; import classnames from 'classnames' ; import { ITextBaseProps , ITextCommonProps , TextBase , TextBasePropColor , TextBasePropFontSize , TextBasePropFontWeight , } from '../_private/TextBase/TextBase' ; export enum TitlePropSize { caption = 'caption' , s = 's' , m = 'm' , l = 'l' , xl = 'xl' } interface IProps extends ITextCommonProps { privateOptions ? : ITextBaseProps ; size ? : TitlePropSize | keyof typeof TitlePropSize ; } export const Title = ( props ) => { const { className , id , privateOptions , size , style , ... otherProps } = props ; return ( < TextBase className = { classnames ( 'Title' , className ) } color = { setColorProp ( props , TextBasePropColor . graydark_white_caption ) } fontSize = { setSizeProp ( props , TextBasePropFontSize . m ) } fontWeight = { TextBasePropFontWeight . bold } id = { id } style = { style } { ... privateOptions } { ... otherProps } />); } ; Title . defaultProps = { size : TitlePropSize . m , tag : 'div' , } as Partial < IProps > ; function setSizeProp ( props , defaultValue ) { switch ( props . size ) { case TitlePropSize . s : case TitlePropSize . caption : return TextBasePropFontSize . s ; case TitlePropSize . m : return TextBasePropFontSize . m ; case TitlePropSize . l : return TextBasePropFontSize . l ; case TitlePropSize . xl : return TextBasePropFontSize . xl ; } return defaultValue ; } function setColorProp ( props , defaultColor ) { switch ( props . size ) { case TitlePropSize . caption : return TextBasePropColor . gray_gray75_title ; } return defaultColor ; }