@catho/quantum/Button/Button.js

Catho react components

"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _shared = require("../shared");
var _theme = require("../shared/theme");
var _Icon = _interopRequireDefault(require("../Icon/Icon"));
var _jsxRuntime = require("react/jsx-runtime");
var _excluded = ["children", "icon", "size", "theme", "center", "disabled", "stroked", "full", "skin", "type", "$as", "onClick"],
  _excluded2 = ["size", "skin", "theme"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
var ButtonIcon = (0, _styledComponents["default"])(_Icon["default"]).withConfig({
  displayName: "Button__ButtonIcon",
  componentId: "sc-1ovnfsw-0"
})(["pointer-events:none;", " width:", "px;"], function (_ref) {
  var xsmall = _ref.theme.spacing.xsmall;
  return (0, _styledComponents.css)(["&.with-children{margin-right:", "px;}"], xsmall);
}, _theme.baseFontSize * 1.5);
var buttonFontAndLineProps = function buttonFontAndLineProps(_ref2) {
  var size = _ref2.size,
    baseFontSize = _ref2.theme.baseFontSize;
  var fontSizes = {
    xsmall: "".concat(baseFontSize * 0.75, "px"),
    small: "".concat(baseFontSize * 0.75, "px"),
    medium: "".concat(baseFontSize, "px"),
    large: "".concat(baseFontSize * 1.25, "px"),
    xlarge: "".concat(baseFontSize * 1.5, "px")
  };
  var lineHeights = {
    xsmall: "".concat(baseFontSize, "px"),
    small: "".concat(baseFontSize * 0.75 * 1.5, "px"),
    medium: "".concat(baseFontSize * 1.5, "px"),
    large: "".concat(baseFontSize * 1.75, "px"),
    xlarge: "".concat(baseFontSize * 2, "px")
  };
  return (0, _styledComponents.css)(["font-size:", ";line-height:", ";"], fontSizes[size], lineHeights[size]);
};
var StyledButton = _styledComponents["default"].button.withConfig({
  displayName: "Button__StyledButton",
  componentId: "sc-1ovnfsw-1"
})(["align-items:center;box-sizing:border-box;display:flex;font-weight:bold;justify-content:center;border-radius:4px;", " ", " ", " ", " ", " transition:all 0.2s ease-in-out;", " ", ""], function (_ref3) {
  var disabled = _ref3.disabled;
  return (0, _styledComponents.css)(["cursor:", ";"], disabled ? 'not-allowed' : 'pointer');
}, buttonFontAndLineProps, function (_ref4) {
  var size = _ref4.size,
    _ref4$theme$spacing = _ref4.theme.spacing,
    xsmall = _ref4$theme$spacing.xsmall,
    large = _ref4$theme$spacing.large,
    xlarge = _ref4$theme$spacing.xlarge,
    xxlarge = _ref4$theme$spacing.xxlarge,
    xxxlarge = _ref4$theme$spacing.xxxlarge;
  var heights = {
    xsmall: "".concat(large, "px"),
    small: "".concat(xlarge, "px"),
    medium: "".concat(xxlarge, "px"),
    large: "".concat(xxxlarge, "px"),
    xlarge: "".concat(xxxlarge + xsmall, "px")
  };
  return (0, _styledComponents.css)(["min-height:", ";"], heights[size]);
}, function (_ref5) {
  var size = _ref5.size,
    _ref5$theme$spacing = _ref5.theme.spacing,
    xsmall = _ref5$theme$spacing.xsmall,
    xxsmall = _ref5$theme$spacing.xxsmall,
    medium = _ref5$theme$spacing.medium;
  var borderWidth = 2;
  var borderSize = borderWidth * 2;
  var paddings = {
    xsmall: "".concat(xxsmall - borderSize, "px ").concat(xsmall, "px"),
    small: "".concat(xsmall - borderSize, "px ").concat(medium, "px"),
    medium: "".concat(xsmall - borderSize, "px ").concat(medium, "px"),
    large: "".concat(xsmall - borderSize, "px ").concat(medium, "px"),
    xlarge: "".concat(xsmall - borderSize, "px ").concat(medium, "px")
  };
  return (0, _styledComponents.css)(["padding:", ";"], paddings[size]);
}, function (props) {
  return props.center && (0, _styledComponents.css)(["margin-left:auto;margin-right:auto;"]);
}, function (props) {
  return props.full && "width: 100%;";
}, function (_ref6) {
  var skin = _ref6.skin,
    theme = _ref6.theme,
    disabled = _ref6.disabled,
    stroked = _ref6.stroked;
  var _theme$components$but = theme.components.button.skins[skin],
    _theme$components$but2 = _theme$components$but.mainColor,
    mainColor100 = _theme$components$but2[100],
    mainColor700 = _theme$components$but2[700],
    mainColor900 = _theme$components$but2[900],
    text0 = _theme$components$but.text[0],
    _theme$colors$neutral = theme.colors.neutral,
    neutral0 = _theme$colors$neutral[0],
    neutral300 = _theme$colors$neutral[300],
    neutral500 = _theme$colors$neutral[500],
    neutral700 = _theme$colors$neutral[700];
  var bgColor;
  var textColor;
  var borderColor;
  if (disabled && stroked) {
    bgColor = neutral300;
    borderColor = neutral500;
    textColor = neutral700;
  } else if (stroked) {
    bgColor = neutral0;
    borderColor = mainColor700;
    textColor = mainColor700;
  } else if (disabled) {
    bgColor = neutral300;
    borderColor = bgColor;
    textColor = neutral700;
  } else {
    bgColor = mainColor700;
    borderColor = bgColor;
    textColor = text0;
  }
  return (0, _styledComponents.css)(["background-color:", ";color:", ";border:2px solid ", ";", " &:hover{", "}&:focus,&:focus-within{", "}&:active{", "}"], bgColor, textColor, borderColor, (0, _shared.shadow)(2, neutral500)({
    theme: theme
  }), !disabled ? (0, _styledComponents.css)(["", " background-color:", ";border-color:", ";"], (0, _shared.shadow)(4, mainColor900)({
    theme: theme
  }), stroked ? mainColor100 : mainColor900, mainColor900) : '', !disabled ? (0, _shared.shadow)(4, mainColor700)({
    theme: theme
  }) : '', !disabled ? (0, _styledComponents.css)(["", " background-color:", ";"], (0, _shared.shadow)(8, mainColor900)({
    theme: theme
  }), stroked ? mainColor100 : mainColor900) : '');
});
var Button = function Button(_ref7) {
  var _ref7$children = _ref7.children,
    children = _ref7$children === void 0 ? undefined : _ref7$children,
    _ref7$icon = _ref7.icon,
    icon = _ref7$icon === void 0 ? '' : _ref7$icon,
    _ref7$size = _ref7.size,
    size = _ref7$size === void 0 ? 'medium' : _ref7$size,
    _ref7$theme = _ref7.theme,
    theme = _ref7$theme === void 0 ? {
      colors: _theme.colors,
      baseFontSize: _theme.baseFontSize,
      spacing: _theme.spacing,
      breakpoints: _shared.theme.breakpoints,
      components: {
        button: _theme.components.button
      }
    } : _ref7$theme,
    _ref7$center = _ref7.center,
    center = _ref7$center === void 0 ? false : _ref7$center,
    _ref7$disabled = _ref7.disabled,
    disabled = _ref7$disabled === void 0 ? false : _ref7$disabled,
    _ref7$stroked = _ref7.stroked,
    stroked = _ref7$stroked === void 0 ? false : _ref7$stroked,
    _ref7$full = _ref7.full,
    full = _ref7$full === void 0 ? false : _ref7$full,
    _ref7$skin = _ref7.skin,
    skin = _ref7$skin === void 0 ? 'primary' : _ref7$skin,
    _ref7$type = _ref7.type,
    type = _ref7$type === void 0 ? 'button' : _ref7$type,
    _ref7$$as = _ref7.$as,
    $as = _ref7$$as === void 0 ? undefined : _ref7$$as,
    _ref7$onClick = _ref7.onClick,
    onClick = _ref7$onClick === void 0 ? function () {} : _ref7$onClick,
    rest = _objectWithoutProperties(_ref7, _excluded);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledButton, _objectSpread(_objectSpread({
    as: $as,
    size: size,
    theme: theme,
    center: center,
    disabled: disabled,
    stroked: stroked,
    full: full,
    skin: skin,
    type: type,
    onClick: onClick
  }, rest), {}, {
    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonIcon, {
      className: children ? 'with-children' : '',
      size: size,
      name: icon,
      theme: theme
    }), children]
  }));
};
Button.propTypes = {
  center: _propTypes["default"].bool,
  disabled: _propTypes["default"].bool,
  stroked: _propTypes["default"].bool,
  full: _propTypes["default"].bool,
  /** Icon name. The full catalogue can be found
   * [here](/?path=/docs/foundation-icons--page#catalog) */
  icon: _propTypes["default"].string,
  size: _propTypes["default"].oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
  skin: _propTypes["default"].oneOf(['neutral', 'primary', 'secondary', 'success', 'warning', 'error']),
  type: _propTypes["default"].oneOf(['button', 'reset', 'submit']),
  children: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].node), _propTypes["default"].node, _propTypes["default"].string]),
  /** https://www.styled-components.com/docs/api#as-polymorphic-prop */
  $as: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].string]),
  onClick: _propTypes["default"].func,
  theme: _propTypes["default"].shape({
    baseFontSize: _propTypes["default"].number,
    colors: _propTypes["default"].object,
    spacing: _propTypes["default"].object,
    breakpoints: _propTypes["default"].object,
    components: _propTypes["default"].shape({
      button: _propTypes["default"].object
    })
  })
};
var IconButton = (0, _styledComponents["default"])(Button).attrs(function (_ref8) {
  var size = _ref8.size,
    skin = _ref8.skin,
    theme = _ref8.theme,
    rest = _objectWithoutProperties(_ref8, _excluded2);
  return _objectSpread({
    size: size || 'medium',
    skin: skin || 'neutral',
    theme: _objectSpread({
      breakpoints: _shared.theme.breakpoints,
      gutter: '8px',
      baseFontSize: _theme.baseFontSize,
      spacing: _theme.spacing,
      components: {
        button: _theme.components.button
      }
    }, theme)
  }, rest);
}).withConfig({
  displayName: "Button__IconButton",
  componentId: "sc-1ovnfsw-2"
})(["", ""], function (_ref9) {
  var skin = _ref9.skin,
    theme = _ref9.theme;
  var _theme$components$but3 = theme.components.button.skins[skin].mainColor,
    mainColor300 = _theme$components$but3[300],
    mainColor500 = _theme$components$but3[500],
    mainColor700 = _theme$components$but3[700];
  return (0, _styledComponents.css)(["border-radius:50%;border:none;color:", ";width:40px;background-color:transparent;box-shadow:none;outline:none;", "{margin-right:0;}&:hover,&:focus{box-shadow:none;background-color:", ";color:", ";}&:active{box-shadow:none;background-color:", ";color:", ";}"], (0, _shared.hexToRgba)(mainColor500, 0.5), ButtonIcon, (0, _shared.hexToRgba)(mainColor300, 0.4), mainColor700, (0, _shared.hexToRgba)(mainColor300, 0.5), mainColor700);
});
IconButton.propTypes = {
  size: _propTypes["default"].oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
  skin: _propTypes["default"].oneOf(['neutral', 'primary', 'secondary', 'success', 'warning', 'error']),
  theme: _propTypes["default"].shape({
    baseFontSize: _propTypes["default"].number,
    colors: _propTypes["default"].object,
    spacing: _propTypes["default"].object,
    components: _propTypes["default"].shape({
      button: _propTypes["default"].object
    })
  })
};
Button.Icon = IconButton;
var _default = exports["default"] = Button;