import * as React from 'react' ; import styled from 'styled-components' ; import ReactTooltip from 'react-tooltip' ; import { InputDescriptor } from './InputDescriptor' ; export type IInputLabel = { inputDescriptor ? : string ; disabled ? : boolean ; ignoreMediaQuery ? : boolean ; color ? : string ; required ? : boolean ; hideAsterisk ? : boolean ; tooltip ? : string ; } & React . LabelHTMLAttributes < HTMLLabelElement > ; const StyledInputLabel = styled . label < IInputLabel > `
  ${ ( { theme } ) => theme . fonts . bigBodyStyle };
  color: ${ ( { color , disabled , theme } ) => disabled ? theme . colors . disabled : color ? color : theme . colors . copy };
  width: 100%;
  margin-bottom: 5px;
  display: inline-block;

  ${ ( { ignoreMediaQuery , theme } ) => { return ! ignoreMediaQuery ? `@media (min-width: ${ theme . grid . breakpoints . md }px) {
        width: 615px;
      }` : '' ; } }
` ; const Required = styled . span < { disabled ? : boolean ; } & React . LabelHTMLAttributes < HTMLLabelElement > > `
  ${ ( { theme } ) => theme . fonts . bigBodyStyle };
  color: ${ ( { disabled , theme } ) => disabled ? theme . colors . disabled : theme . colors . error };
  flex-grow: 0;
` ; const ToolTipContainer = styled . span `
  text-align: center;
` ; export class InputLabel extends React . Component < IInputLabel > { render ( ) { const { inputDescriptor , required , hideAsterisk , children , tooltip } = this . props ; return ( < StyledInputLabel data - tip = { tooltip } { ... this . props } > { tooltip && < ReactTooltip />} { children } { required && ! hideAsterisk && ( < Required disabled = { this . props . disabled } > & nbsp ; * < /Required>)} { inputDescriptor && ( < InputDescriptor > { inputDescriptor } < /InputDescriptor>)} < /StyledInputLabel>); } }