@helpscout/hsds-react/components/FormLabel/FormLabel.css.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.calculateContentRules = calculateContentRules;
exports.default = exports.FormLabelHelpTextUI = exports.FormLabelUI = void 0;

var _styledComponents = _interopRequireDefault(require("styled-components"));

var FormLabelUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "FormLabelcss__FormLabelUI",
  componentId: "sc-14e5g04-0"
})(["display:flex;flex-flow:column;align-items:stretch;&.is-inline{flex-flow:row;align-items:flex-end;justify-content:space-between;.c-FormLabel__label{margin-right:40px;}.c-FormLabel__helpText{padding-bottom:0;}}& .c-FormLabel__content{", ";}"], function (props) {
  return calculateContentRules(props);
});
exports.FormLabelUI = FormLabelUI;
var FormLabelHelpTextUI = (0, _styledComponents.default)('div').withConfig({
  displayName: "FormLabelcss__FormLabelHelpTextUI",
  componentId: "sc-14e5g04-1"
})(["padding-bottom:4px;"]);
exports.FormLabelHelpTextUI = FormLabelHelpTextUI;
var _default = FormLabelUI;
/**
 * Method to generate the correct rules to align the content
 * vertically in inline mode depending on whether Help Text
 * is present or not
 * @param props {isInline:boolean, isHelpTextPresent:boolean }
 */

exports.default = _default;

function calculateContentRules(_ref) {
  var isInline = _ref.isInline,
      isHelpTextPresent = _ref.isHelpTextPresent;

  if (isInline) {
    if (isHelpTextPresent) {
      return "\n        align-self: flex-start;\n        margin-top: 1.4em;\n      ";
    }

    return 'align-self: center;';
  }

  return 'align-self: initial;';
}