pure-styled-components/lib/components/Button/Button.js

Styled Component design system based on Pure CSS for React/Preact

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  font-family: inherit;\n  font-size: 100%;\n  padding: 0.5em 1em;\n  color: #444; /* rgba not supported (IE 8) */\n  color: rgba(0, 0, 0, 0.8); /* rgba supported */\n  border: 1px solid #999; /*IE 6/7/8*/\n  border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/\n  background-color: #e6e6e6;\n  text-decoration: none;\n  border-radius: 2px;\n  \n  ", "\n  ", "\n  ", "\n  ", "\n\n  :hover {\n    background-image: linear-gradient(\n      transparent,\n      rgba(0, 0, 0, 0.05) 40%,\n      rgba(0, 0, 0, 0.1)\n    );\n  }\n\n  :focus {\n    outline: 0;\n  }\n\n  ", ";\n\n\n  ", "\n\n  ", "\n    \n  ", "\n\n  ", "\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { space, width, fontSize, color } from "styled-system";
import Group from "./Button.Group";

var activeButton = function activeButton(isActive) {
  var style;

  if (isActive) {
    style = "\n      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset,\n      0 0 6px rgba(0, 0, 0, 0.2) inset;\n    border-color: #0009;\n    ";
  }

  style = "".concat(style, "\n  :active {\n    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset,\n      0 0 6px rgba(0, 0, 0, 0.2) inset;\n    border-color: #0009;\n  }");
  return style;
};

var BaseButton = function BaseButton(_ref) {
  var className = _ref.className,
      children = _ref.children,
      style = _ref.style,
      onClick = _ref.onClick;
  return React.createElement("button", {
    className: "".concat(className, " button"),
    style: style,
    onClick: onClick
  }, children);
};

BaseButton.Group = Group;
/**
 * Pure CSS and React button.
 */

var Button = styled(BaseButton)(_templateObject(), space, width, fontSize, color, function (props) {
  return activeButton(props.active);
}, function (props) {
  return props.disabled ? "border: none;\n    background-image: none;\n    /* csslint ignore:start */\n    filter: alpha(opacity=40);\n    /* csslint ignore:end */\n    opacity: 0.40;\n    cursor: not-allowed;\n    box-shadow: none;\n    pointer-events: none;" : "";
}, function (props) {
  return props.hidden ? "display: none;" : "";
}, function (props) {
  return props.primary ? "background-color: rgb(0, 120, 231);\n    color: #fff;" : "";
}, function (props) {
  return props.rounded ? "border-radius:1em;" : "";
});
Button.propTypes = {
  /**
   * Responsive margin values (string or array).
   * Similar props: `mt: margin-top`, `mx: margin-left and margin-right`
   */
  m: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),

  /**
   * Responsive padding values (string or array)
   * Similar props: `pt: padding-top`, `px: padding-left and padding-right`
   */
  p: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),

  /**
   * Responsive width values (number or array)
   * Numbers from 0-1 are converted to percentage widths.
   * Numbers greater than 1 are converted to pixel values.
   * String values are passed as raw CSS values.
   * And arrays are converted to responsive width styles.
   */
  width: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),

  /**
   * Responsive width values (number or array)
   * Numbers from 0-8 (or theme.fontSizes.length) are converted to values on the font size scale.
   * Numbers greater than theme.fontSizes.length are converted to raw pixel values.
   * String values are passed as raw CSS values.
   * And array values are converted into responsive values.
   */
  fontSize: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number]),

  /**
   * Set text alignment inside component
   */
  textAlign: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.string]),

  /**
   * Set font color of component
   */
  color: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.string]),

  /**
   * Set background color of component
   */
  bg: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.string]),

  /**
   * Makes button appear inset to distinguish it being "activated"
   */
  active: PropTypes.boolean,

  /**
   * Makes button appear disabled
   */
  disabled: PropTypes.boolean,

  /**
   * Hides button completely using `display:none`
   */
  hidden: PropTypes.boolean,

  /**
   * Styles button with primary color (defaults to blue)
   */
  primary: PropTypes.boolean,

  /**
   * Additional object with inline styles to override default CSS
   */
  style: PropTypes.object,

  /**
   * Function called when user clicks button
   */
  onClick: PropTypes.func,

  /**
   * Child components (array or single element)
   */
  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
};
/** @component */

export default Button;
//# sourceMappingURL=Button.js.map