vcc-ui/es/components/button/index.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React from "react";
import PropTypes from "prop-types";
import { useFela } from "react-fela";
import { Click } from "../click";
import { Block } from "../block";
import { Arrow } from "../arrow";
import { Icon } from "../icon";
import { Inline } from "../inline";
import { Spinner } from "../spinner";
import { getThemeStyle } from "../../get-theme-style";

var intentStyleMap = function intentStyleMap(_ref) {
  var tokens = _ref.tokens;
  return {
    primary: {
      color: tokens.buttonPrimaryColor,
      defaultForeground: tokens.buttonPrimaryForeground,
      highlight: tokens.buttonPrimaryHoverBackground,
      activeBackground: tokens.buttonPrimaryActiveBackground
    },
    "primary-light": {
      color: tokens.buttonPrimaryLightColor,
      defaultForeground: tokens.buttonPrimaryLightForeground,
      activeBackground: tokens.buttonPrimaryLightActiveBackground
    },
    secondary: {
      color: tokens.buttonSecondaryColor,
      defaultForeground: tokens.buttonSecondaryForeground,
      activeBackground: tokens.buttonSecondaryActiveBackground
    },
    destructive: {
      color: tokens.buttonDestructiveColor,
      defaultForeground: tokens.buttonDestructiveForeground,
      highlight: tokens.buttonDestructiveHoverBackground,
      activeBackground: tokens.buttonDestructiveActiveBackground
    }
  };
};

var arrowTransform = {
  up: "translateY(-3px)",
  down: "translateY(3px)",
  right: "translateX(5px)",
  left: "translateX(-5px)"
};

var button = function button(_ref2) {
  var _ref2$disabled = _ref2.disabled,
      disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
      _ref2$intent = _ref2.intent,
      intent = _ref2$intent === void 0 ? "primary" : _ref2$intent,
      _ref2$variant = _ref2.variant,
      variant = _ref2$variant === void 0 ? "default" : _ref2$variant,
      loading = _ref2.loading,
      arrow = _ref2.arrow,
      theme = _ref2.theme;
  var _intentStyleMap$inten = intentStyleMap(theme)[intent],
      color = _intentStyleMap$inten.color,
      defaultForeground = _intentStyleMap$inten.defaultForeground,
      activeBackground = _intentStyleMap$inten.activeBackground,
      highlight = _intentStyleMap$inten.highlight;
  return _objectSpread({
    display: "inline-flex",
    flexShrink: 0,
    justifyContent: "center",
    alignItems: "baseline",
    padding: "".concat(theme.tokens.buttonPaddingVertical, "px ").concat(theme.tokens.buttonPaddingHorizontal, "px"),
    textAlign: "center",
    fontSize: 15
  }, loading && {
    position: "relative"
  }, {
    lineHeight: 1.2,
    transition: "all 0.3s ease-out",
    transitionProperty: "background, fill, stroke, color, border-color",
    fontWeight: 400,
    ":focus": {
      outline: "2px solid ".concat(color, "33"),
      ":active": {
        background: activeBackground
      }
    },
    extend: [{
      condition: !disabled,
      style: {
        extend: [{
          condition: variant === "default",
          style: {
            borderWidth: 1,
            borderStyle: "solid",
            borderColor: color,
            background: color,
            color: defaultForeground,
            fill: defaultForeground,
            stroke: defaultForeground,
            ":hover": {
              background: highlight
            }
          }
        }, {
          condition: variant === "outline",
          style: {
            borderWidth: 1,
            borderStyle: "solid",
            borderColor: color,
            color: color,
            fill: color,
            stroke: color,
            ":hover": {
              background: color,
              color: defaultForeground,
              borderColor: highlight,
              fill: defaultForeground,
              stroke: defaultForeground
            }
          }
        }, {
          condition: variant === "text",
          style: {
            borderWidth: 1,
            borderStyle: "solid",
            borderColor: "transparent",
            fill: color,
            color: color,
            stroke: color,
            ":hover": {
              color: highlight
            }
          }
        }, {
          condition: arrow,
          style: {
            ":hover svg": {
              transform: arrowTransform[arrow]
            }
          }
        }]
      }
    }, {
      condition: loading,
      style: {
        pointerEvents: "none"
      }
    }, {
      condition: disabled,
      style: {
        cursor: "not-allowed",
        fill: "lightgrey",
        color: "lightgrey",
        stroke: "lightgrey",
        ":focus": {
          outline: "2px solid #CCCCCC33"
        },
        extend: [{
          condition: variant === "default",
          style: {
            background: "lightgrey",
            color: "grey",
            stroke: "grey",
            fill: "grey"
          }
        }, {
          condition: variant === "outline",
          style: {
            borderWidth: 1,
            borderStyle: "solid",
            borderColor: "lightgrey"
          }
        }]
      }
    }]
  });
};

export function Button(_ref3) {
  var children = _ref3.children,
      intent = _ref3.intent,
      variant = _ref3.variant,
      loading = _ref3.loading,
      disabled = _ref3.disabled,
      arrow = _ref3.arrow,
      iconBefore = _ref3.iconBefore,
      iconAfter = _ref3.iconAfter,
      props = _objectWithoutProperties(_ref3, ["children", "intent", "variant", "loading", "disabled", "arrow", "iconBefore", "iconAfter"]);

  var _useFela = useFela(),
      theme = _useFela.theme;

  var styleProps = {
    disabled: disabled,
    intent: intent,
    variant: variant,
    loading: loading,
    theme: theme,
    arrow: arrow
  };
  return React.createElement(Click, _extends({
    disabled: disabled || loading
  }, props, {
    extend: [button(styleProps), getThemeStyle("button", theme, styleProps)]
  }), loading && React.createElement(Block, {
    extend: {
      position: "absolute",
      margin: "0 auto",
      top: 10
    }
  }, React.createElement(Spinner, {
    color: "auto",
    size: 30
  })), loading ? React.createElement(Inline, {
    extend: {
      visibility: "hidden"
    }
  }, React.createElement(InnerButton, {
    iconBefore: iconBefore,
    iconAfter: iconAfter,
    arrow: arrow
  }, children)) : React.createElement(InnerButton, {
    iconBefore: iconBefore,
    iconAfter: iconAfter,
    arrow: arrow
  }, children));
}

var InnerButton = function InnerButton(_ref4) {
  var children = _ref4.children,
      iconBefore = _ref4.iconBefore,
      iconAfter = _ref4.iconAfter,
      arrow = _ref4.arrow;
  return React.createElement(React.Fragment, null, iconBefore && React.createElement(Inline, {
    extend: {
      marginRight: 12,
      position: "relative",
      bottom: "-3px"
    }
  }, React.createElement(Icon, {
    size: "m",
    type: iconBefore
  })), arrow && arrow === "left" && React.createElement(Inline, {
    extend: {
      marginRight: 8
    }
  }, React.createElement(Arrow, {
    direction: "left"
  })), children, arrow && arrow !== "left" && React.createElement(Inline, {
    extend: {
      marginLeft: 8
    }
  }, React.createElement(Arrow, {
    direction: arrow
  })), iconAfter && React.createElement(Inline, {
    extend: {
      marginLeft: 12,
      position: "relative",
      bottom: "-3px"
    }
  }, React.createElement(Icon, {
    size: "m",
    type: iconAfter
  })));
};

Button.propTypes = {
  /** A JSX node */
  children: PropTypes.node,
  intent: PropTypes.oneOf(["primary", "primary-light", "secondary", "destructive"]),
  variant: PropTypes.oneOf(["default", "outline", "text"]),
  loading: PropTypes.bool,
  disabled: PropTypes.bool,
  arrow: PropTypes.oneOf(["up", "down", "right", "left"]),

  /** Add an icon before button text  */
  iconBefore: PropTypes.string,

  /** Add an icon after button text  */
  iconAfter: PropTypes.string,

  /** Changes the rendered element from `<button>` to `<a>` */
  href: PropTypes.string
};