backpack-ui/dist/components/paginatorButton/index.js

Lonely Planet's Components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _radium = require("radium");

var _radium2 = _interopRequireDefault(_radium);

var _objectAssign = require("object-assign");

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _upperFirst = require("lodash/upperFirst");

var _upperFirst2 = _interopRequireDefault(_upperFirst);

var _classnames = require("classnames");

var _classnames2 = _interopRequireDefault(_classnames);

var _colors = require("../../styles/colors");

var _colors2 = _interopRequireDefault(_colors);

var _timing = require("../../styles/timing");

var _timing2 = _interopRequireDefault(_timing);

var _color = require("../../utils/color");

var _icon = require("../../utils/icon");

var _icon2 = _interopRequireDefault(_icon);

var _mixins = require("../../utils/mixins");

var _createQAHook = require("../../utils/createQAHook");

var _createQAHook2 = _interopRequireDefault(_createQAHook);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var _ = { upperFirst: _upperFirst2.default };

var hoverStyles = {
  base: {
    color: _colors2.default.linkPrimary
  },
  blue: {
    color: _colors2.default.linkPrimary
  }
};

var styles = {
  base: {
    appearance: "none",
    WebkitAppearance: "none",
    backgroundColor: _colors2.default.bgPrimary,
    border: 0,
    borderRadius: "50%",
    cursor: "pointer",
    display: "inline-block",
    fontSize: "9px",
    lineHeight: 1,
    transition: "color " + _timing2.default.default + ",\n      box-shadow " + _timing2.default.default,

    ":hover": hoverStyles.base,
    ":active": hoverStyles.base,
    ":focus": (0, _objectAssign2.default)({}, hoverStyles.base, (0, _mixins.outline)())
  },

  size: {
    small: {
      height: 30 / 9 + "em",
      width: 30 / 9 + "em"
    },
    medium: {
      height: 40 / 9 + "em",
      width: 40 / 9 + "em"
    }
  },

  shadow: {
    loose: {
      boxShadow: "0 " + 2 / 9 + "em " + 8 / 9 + "em rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", .1)"
    },
    tight: {
      boxShadow: "0 0 " + 4 / 9 + "em rgba(" + (0, _color.rgb)(_colors2.default.shadowPrimary) + ", .16)"
    }
  },

  color: {
    blue: {
      color: _colors2.default.linkPrimary,

      ":hover": hoverStyles.blue,
      ":active": hoverStyles.blue,
      ":focus": (0, _objectAssign2.default)({}, hoverStyles.blue, (0, _mixins.outline)())
    }
  },

  align: {
    base: {
      position: "absolute"
    },
    vertical: {
      bottom: 0,
      marginBottom: "auto",
      marginTop: "auto",
      top: 0
    },
    horizontal: {
      left: 0,
      marginLeft: "auto",
      marginRight: "auto",
      right: 0
    }
  },

  direction: {
    up: {
      base: {
        top: 0
      },

      offset: {
        small: {
          top: -15 / 9 + "em"
        },
        medium: {
          top: -20 / 9 + "em"
        }
      }
    },
    down: {
      base: {
        bottom: 0
      },

      offset: {
        small: {
          bottom: -15 / 9 + "em"
        },
        medium: {
          bottom: -20 / 9 + "em"
        }
      }
    },
    left: {
      base: {
        left: 0
      },

      offset: {
        small: {
          left: -15 / 9 + "em"
        },
        medium: {
          left: -20 / 9 + "em"
        }
      }
    },
    right: {
      base: {
        right: 0
      },

      offset: {
        small: {
          right: -15 / 9 + "em"
        },
        medium: {
          right: -20 / 9 + "em"
        }
      }
    }
  }
};

function PaginatorButton(_ref) {
  var direction = _ref.direction,
      size = _ref.size,
      shadow = _ref.shadow,
      arrow = _ref.arrow,
      color = _ref.color,
      align = _ref.align,
      offset = _ref.offset,
      onClick = _ref.onClick,
      iconLabel = _ref.iconLabel,
      owns = _ref.owns,
      style = _ref.style,
      className = _ref.className,
      qaHook = _ref.qaHook;

  var iconName = "" + _.upperFirst(arrow) + _.upperFirst(direction);

  var label = void 0;

  if (iconLabel) {
    label = iconLabel;
  } else {
    label = direction === "up" || direction === "left" ? "Previous" : "Next";
  }

  return _react2.default.createElement(
    "button",
    {
      className: (0, _classnames2.default)("PaginatorButton", className),
      style: [styles.base, size && styles.size[size], shadow && styles.shadow[shadow], color && styles.color[color], align && styles.align.base, align && styles.align[align], align && !offset && styles.direction[direction].base, align && offset && styles.direction[direction].offset[size], style],
      "data-testid": qaHook ? (0, _createQAHook2.default)(label, "paginator", "btn") : null,
      title: label,
      onClick: onClick,
      "aria-label": label,
      "aria-owns": owns
    },
    (0, _icon2.default)(iconName, { label: label })
  );
}

PaginatorButton.propTypes = {
  /**
   * Change the direction the arrow points
   */
  direction: _propTypes2.default.oneOf(["up", "down", "left", "right"]).isRequired,

  /**
   * Set the size of the button
   */
  size: _propTypes2.default.oneOf(["small", "medium"]),

  /**
   * Change the shadow
   */
  shadow: _propTypes2.default.oneOf(["loose", "tight"]),

  /**
   * Change the arrow icon type
   */
  arrow: _propTypes2.default.oneOf(["chevron", "triangle"]),

  /**
   * Change the color of the icon
   */
  color: _propTypes2.default.oneOf(["", "blue"]),

  /**
   * Position the button absolutely and align it
   */
  align: _propTypes2.default.oneOf(["", "horizontal", "vertical"]),

  /**
   * Offset the button when positioned absolutely; must be used with align
   */
  offset: _propTypes2.default.bool,

  /**
   * Function to run when the button is clicked
   */
  onClick: _propTypes2.default.func,

  /**
   * Override the icon label
   */
  iconLabel: _propTypes2.default.string,

  /**
   * The ID of the sibling element that the button owns, e.g., if the button has
   * a menu with an ID of "share-menu", then `owns="share-menu"`.
   */
  owns: _propTypes2.default.string,

  style: _propTypes2.default.objectOf(_propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.object])),

  className: _propTypes2.default.string,

  qaHook: _propTypes2.default.bool
};

PaginatorButton.defaultProps = {
  direction: "up",
  size: "medium",
  shadow: "loose",
  arrow: "chevron",
  color: "",
  align: "",
  offset: false,
  onClick: null,
  iconLabel: "",
  owns: "",
  className: null,
  qaHook: false
};

PaginatorButton.styles = styles;

exports.default = (0, _radium2.default)(PaginatorButton);