All files / elements/forms/utils/ControlLabel styled.js

100% Statements 8/8
100% Branches 2/2
100% Functions 2/2
100% Lines 6/6

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77                                                  21x   234x       234x 21x                               21x                         21x                              
import PropTypes from 'prop-types';
import styled from 'styled-components';
import { getGlobalStyles } from 'src/global-styles';
import {
  fontWeight,
  layout,
  position,
  space,
} from 'styled-system';
import {
  colorCore,
  defaultStylesBase,
  defaultControlStyles,
  ellipsisCore,
  fontFamilyCore,
  fontSizeCore,
  fontStyleCore,
  letterSpacingCore,
  lineHeightCore,
  textAlignCore,
  textDecorationCore,
  typography,
} from 'src/utils/styledHelpers';
import { ControlLabelComponent } from './component';
 
const { fontSize: fontSizeSchema } = getGlobalStyles();
 
const colorLabel = props => colorCore({
  ...props,
  color: !props.validationError ? props.color : 'brandDanger',
});
const fontSizeLabel = props => fontSizeCore({ ...props, sm: true });
const ControlLabel = styled(ControlLabelComponent)`
  ${colorLabel}
  ${ellipsisCore}
  ${fontFamilyCore}
  ${fontSizeLabel}
  ${fontStyleCore}
  ${fontWeight}
  ${layout}
  ${letterSpacingCore}
  ${lineHeightCore}
  ${position}
  ${space}
  ${textAlignCore}
  ${textDecorationCore}
`;
 
ControlLabel.propTypes = {
  /** Background of the label component.  For 'outlined' styled controls, this assures that the label is making space on the control's border. */
  bg: PropTypes.string,
  /** When true, this will change the label text color to the control disabled color. */
  disabled: PropTypes.bool,
  ...typography.propTypes,
  /** When true, this will change the label text color to brandDanger. */
  validationError: PropTypes.oneOfType([
    PropTypes.bool,
    PropTypes.string,
  ]),
};
 
ControlLabel.defaultProps = {
  ...defaultStylesBase,
  bg: defaultControlStyles.bg,
  disabled: false,
  height: `${(fontSizeSchema.sizeVariants.sm / 1.5).toFixed(1)}rem`,
  left: 2,
  lineHeight: 0.8,
  position: 'absolute',
  px: 2,
  top: '-1px',
  validationError: '',
};
 
/** @component */
export { ControlLabel };