@devseed-ui/form/src/label/index.js

devseed UI Kit Form

import React from 'react';
import T from 'prop-types';
import styled from 'styled-components';

import { themeVal, rgba } from '@devseed-ui/theme-provider';

const LabelHint = styled.small`
  font-weight: ${themeVal('type.base.weight')};
  font-size: 0.75rem;
  line-height: 1;
  color: ${rgba(themeVal('type.base.color'), 0.64)};
`;
const LabelStyled = styled.label`
  /* styled-component */
`;

const LabelBase = ({ children, optional, required, hint, ...rest }) => {
  const getHint = () => {
    if (hint) return hint;
    if (required) return '(required)';
    if (optional) return '(optional)';
  };

  const theHint = getHint();

  return (
    <LabelStyled {...rest}>
      {children}
      {!!theHint && '\u00A0' /* Non breaking space */}
      {!!theHint && <LabelHint>{theHint}</LabelHint>}
    </LabelStyled>
  );
};

LabelBase.propTypes = {
  children: T.node,
  optional: T.bool,
  required: T.bool,
  hint: T.node
};

const FormLabel = styled(LabelBase)`
  display: inline-flex;
  align-items: center;
  font-family: ${themeVal('type.base.family')};
  font-weight: ${themeVal('type.base.bold')};
  font-size: 1rem;
  line-height: 1.5;
  min-width: 0;

  &[for] {
    cursor: pointer;
  }
`;

export default FormLabel;