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

React component library for Help Scout's Design System

"use strict";

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

exports.__esModule = true;
exports.SuffixIconUI = exports.PrefixIconUI = exports.SpinnerUI = exports.LoadingWrapperUI = exports.ButtonUI = void 0;

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

var _lodash = _interopRequireDefault(require("lodash.get"));

var _Spinner = _interopRequireDefault(require("../Spinner"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _color = require("../../styles/utilities/color");

var _variableFontSize = _interopRequireDefault(require("../../styles/utilities/variableFontSize"));

var _focusRing = require("../../styles/mixins/focusRing.css");

var _Button = _interopRequireDefault(require("./Button.config"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function mapBrandColorToConfig(theme) {
  if (!theme) return {};
  var mainColor = theme.backgroundColorUI || theme.brandColor;
  var textColor = theme.textColorInteractive || theme.brandTextColor;
  var hoverColor = theme.backgroundColorUIHover;
  return {
    mainColor: mainColor,
    hoverColor: hoverColor,
    textColor: textColor
  };
}

var ButtonUI = _styledComponents.default.button.withConfig({
  displayName: "Buttoncss__ButtonUI",
  componentId: "sc-11k3518-0"
})(["--buttonMainColor:", ";--buttonBackgroundColor:", ";--buttonBackgroundColorHover:", ";--buttonBorderColor:", ";--buttonBorderColorHover:", ";--buttonColor:white;--buttonColorHover:white;--buttonTextDecoration:none;--buttonTextDecorationHover:none;--buttonPadding:0px;--buttonMinWidth:initial;--buttonHeight:", "px;--buttonFontWeight:", ";--buttonRadius:", "px;", ";--focusRingOffset:-", "px;--focusRingRadius:var(--buttonRadius);align-items:center;appearance:none;background:", ";background:var(--buttonBackgroundColor);border-radius:3px;border-radius:var(--buttonRadius);border:1px solid ", ";border-color:var(--buttonBorderColor);color:white;color:var(--buttonColor);cursor:pointer;display:inline-flex;font-family:var(--HSDSGlobalFontFamily);font-weight:500;font-weight:var(--buttonFontWeight);height:44px;height:var(--buttonHeight);justify-content:center;line-height:1;min-width:var(--buttonMinWidth);outline:none;padding:0 30px;padding:0 var(--buttonPadding);position:relative;text-align:center;text-decoration:none;text-decoration:var(--buttonTextDecoration);*{pointer-events:none;}&:hover,&:active,&:focus{outline:none;text-decoration:none;}&:focus{color:white;color:var(--buttonColor);text-decoration:none;text-decoration:var(--buttonTextDecoration);}&:hover,&.is-active,&:active{background:", ";background:var(--buttonBackgroundColorHover);border-color:", ";border-color:var(--buttonBorderColorHover);color:white;color:var(--buttonColorHover);text-decoration:none;text-decoration:var(--buttonTextDecorationHover);}&.is-disabled,&[disabled]{pointer-events:none;user-select:none;background:", " !important;border-color:", " !important;color:white !important;&.is-style-outlined{background:white !important;border-color:", " !important;color:", " !important;}&.is-style-link{background:transparent !important;border-color:transparent !important;color:", " !important;}&:before{display:none;}}&.is-rounded{border-radius:100px;--focusRingRadius:100px;}&.is-first{border-top-right-radius:0;border-bottom-right-radius:0;}&.is-notOnly{border-radius:0;}&.is-last{border-top-left-radius:0;border-bottom-left-radius:0;}", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";", ";"], _Button.default.theme.blue.mainColor, _Button.default.theme.blue.mainColor, _Button.default.theme.blue.hoverColor, _Button.default.theme.blue.mainColor, _Button.default.theme.blue.mainColor, _Button.default.size.lg.height, _Button.default.fontWeight, _Button.default.borderRadius, _focusRing.focusRing, _Button.default.focusOutlineOffset, _Button.default.theme.blue.mainColor, _Button.default.theme.blue.mainColor, _Button.default.theme.blue.hoverColor, _Button.default.theme.blue.hoverColor, (0, _color.getColor)('grey.500'), (0, _color.getColor)('grey.500'), (0, _color.getColor)('grey.600'), (0, _color.getColor)('grey.800'), (0, _color.getColor)('grey.800'), makeButtonSizeStyles('xxl', _Button.default.size.xxl), makeButtonSizeStyles('xl', _Button.default.size.xl), makeButtonSizeStyles('lg', _Button.default.size.lg), makeButtonSizeStyles('md', _Button.default.size.md), makeButtonSizeStyles('sm', _Button.default.size.sm), makeButtonSizeStyles('xs', _Button.default.size.xs), makeButtonSizeStyles('xxs', _Button.default.size.xxs), makeButtonThemeStyles('blue', _Button.default.theme.blue), makeButtonThemeStyles('green', _Button.default.theme.green), makeButtonThemeStyles('red', _Button.default.theme.red), makeButtonThemeStyles('grey', _Button.default.theme.grey), function (_ref) {
  var theme = _ref.theme;
  return theme && theme.brandColor ? makeButtonThemeStyles('brand', mapBrandColorToConfig(theme.brandColor)) : '';
});

exports.ButtonUI = ButtonUI;

function makeButtonThemeStyles(theme, config) {
  return (0, _styledComponents.css)(["&.is-theme-", "{--buttonMainColor:", ";--buttonBackgroundColor:", ";--buttonBackgroundColorHover:", ";--buttonBorderColor:", ";--buttonBorderColorHover:", ";", ";", ";", " &.is-style-link{--buttonMinWidth:0;--buttonPadding:0;--buttonBackgroundColor:transparent;--buttonBackgroundColorHover:transparent;--buttonBorderColor:transparent;--buttonBorderColorHover:transparent;--buttonTextDecorationHover:underline;--buttonFontWeight:400;", ";", ";}}"], theme, config.mainColor, config.mainColor, config.hoverColor, config.mainColor, config.hoverColor, renderPropStyle(config, 'textColor', '--buttonColor'), renderPropStyle(config, 'textColor', '--buttonColorHover'), function () {
    if (config.outline) {
      return (0, _styledComponents.css)(["&.is-style-outlined{--buttonBackgroundColor:white;", ";", ";", ";", ";", ";&.has-icon-only{", ";}&.is-seamless{", ";background:transparent !important;border-color:transparent !important;}}"], renderPropStyle(config, 'outline.hoverColor', '--buttonBackgroundColorHover'), renderPropStyle(config, 'outline.textColor', '--buttonColor'), renderPropStyle(config, 'outline.textHoverColor', '--buttonColorHover', 'textColor'), renderPropStyle(config, 'outline.borderColor', '--buttonBorderColor', 'mainColor'), renderPropStyle(config, 'outline.borderHoverColor', '--buttonBorderColorHover', 'outline.borderColor'), renderPropStyle(config, 'outline.hoverColorIconOnly', '--buttonBackgroundColorHover'), renderPropStyle(config, 'outline.textColorSeamlessHover', '--buttonColorHover'));
    }
  }, renderPropStyle(config, 'outline.textColor', '--buttonColor'), renderPropStyle(config, 'outline.textHoverColor', '--buttonColorHover', 'textColor'));
}

function makeButtonSizeStyles(size, config) {
  return (0, _styledComponents.css)(["&.is-size-", "{", ";", ";", ";", ";", ";&.is-rounded{", ";--buttonMinWidth:0px;}&.has-prefix-icon{padding-left:calc(var(--buttonPadding) - 8px);--buttonMinWidth:0px;}&.has-suffix-icon{padding-right:calc(var(--buttonPadding) - 8px);--buttonMinWidth:0px;}&.is-style-link.is-inlined{--buttonPadding:0;--buttonMinWidth:0;--buttonHeight:auto;}}"], size, (0, _variableFontSize.default)({
    fontSize: config.fontSize
  }), renderPropStyle(config, 'height', '--buttonHeight'), renderPropStyle(config, 'padding', '--buttonPadding'), renderPropStyle(config, 'fontWeight', '--buttonFontWeight'), renderPropStyle(config, 'minWidth', '--buttonMinWidth'), renderPropStyle(config, 'roundedPadding', '--buttonPadding'));
}

function renderPropStyle(config, prop, attribute, fallback) {
  if (fallback === void 0) {
    fallback = null;
  }

  var attr = attribute || prop;
  var value = (0, _lodash.default)(config, prop);
  if (!value && fallback) value = (0, _lodash.default)(config, fallback);
  if (!value) return '';
  return (0, _styledComponents.css)(["", ":", ";"], attr, value);
}

var LoadingWrapperUI = _styledComponents.default.span.withConfig({
  displayName: "Buttoncss__LoadingWrapperUI",
  componentId: "sc-11k3518-1"
})(["align-items:inherit;display:inherit;justify-content:inherit;text-decoration:inherit;width:100%;opacity:0;"]);

exports.LoadingWrapperUI = LoadingWrapperUI;
var SpinnerUI = (0, _styledComponents.default)(_Spinner.default).withConfig({
  displayName: "Buttoncss__SpinnerUI",
  componentId: "sc-11k3518-2"
})(["color:inherit;margin:-6px 0 0 -6px;position:absolute;z-index:1;top:50%;left:50%;"]);
exports.SpinnerUI = SpinnerUI;
var PrefixIconUI = (0, _styledComponents.default)(_Icon.default).withConfig({
  displayName: "Buttoncss__PrefixIconUI",
  componentId: "sc-11k3518-3"
})(["color:inherit;"]);
exports.PrefixIconUI = PrefixIconUI;
var SuffixIconUI = (0, _styledComponents.default)(_Icon.default).withConfig({
  displayName: "Buttoncss__SuffixIconUI",
  componentId: "sc-11k3518-4"
})(["color:inherit;"]);
exports.SuffixIconUI = SuffixIconUI;
SpinnerUI.defaultProps = {
  size: 12
};