@kiwicom/orbit-components/es/ButtonLink/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

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; }

import * as React from "react";
import styled, { css } from "styled-components";
import { warning } from "@kiwicom/js";
import defaultTheme from "../defaultTheme";
import { TYPES, SIZES, TOKENS, BUTTON_STATES } from "./consts";
import { ICON_SIZES } from "../Icon/consts";
import { getSize } from "../Icon";
import getSpacingToken from "../common/getSpacingToken";
import getIconSpacing from "./helpers/getIconSpacing";
import getSizeToken from "./helpers/getSizeToken";
import getTypeToken from "./helpers/getTypeToken";
import getButtonSpacing from "./helpers/getButtonLinkSpacing";
import getButtonLinkBoxShadow from "./helpers/getButtonLinkBoxShadow";

// media query only for IE 10+, not Edge
const onlyIE = (style, breakpoint = "all") => css(["@media ", " and (-ms-high-contrast:none),(-ms-high-contrast:active){", ";}"], breakpoint, style);

const IconContainer = styled(({
  className,
  children
}) => React.createElement("div", {
  className: className
}, children)).withConfig({
  displayName: "ButtonLink__IconContainer",
  componentId: "sc-14jv5cl-0"
})(["display:flex;flex-direction:row;align-items:center;justify-content:center;margin:", ";> *{width:", ";height:", ";}"], getIconSpacing(), ({
  sizeIcon
}) => getSize(sizeIcon), ({
  sizeIcon
}) => getSize(sizeIcon));
IconContainer.defaultProps = {
  theme: defaultTheme
};
export const StyledButtonLink = styled((_ref) => {
  let {
    onlyIcon,
    component,
    circled,
    external,
    block,
    type,
    icon,
    iconLeft,
    iconRight,
    sizeIcon,
    width,
    children,
    transparent,
    style,
    theme,
    dataTest,
    submit,
    buttonRef,
    ariaControls,
    ariaExpanded,
    spaceAfter,
    title
  } = _ref,
      props = _objectWithoutProperties(_ref, ["onlyIcon", "component", "circled", "external", "block", "type", "icon", "iconLeft", "iconRight", "sizeIcon", "width", "children", "transparent", "style", "theme", "dataTest", "submit", "buttonRef", "ariaControls", "ariaExpanded", "spaceAfter", "title"]);

  const isButtonWithHref = component === "button" && props.href;
  const Component = isButtonWithHref ? "a" : component;
  const buttonType = submit ? "submit" : "button";
  return React.createElement(Component, _extends({
    "data-test": dataTest,
    type: !isButtonWithHref ? buttonType : undefined
  }, props, {
    ref: buttonRef,
    "aria-controls": ariaControls,
    "aria-expanded": ariaExpanded,
    "aria-label": title
  }), children);
}).withConfig({
  displayName: "ButtonLink__StyledButtonLink",
  componentId: "sc-14jv5cl-1"
})(["font-family:", ";box-sizing:border-box;appearance:none;display:inline-flex;justify-content:center;align-items:center;width:", ";flex:", ";max-width:100%;height:", ";background:", ";color:", "!important;border:0;border-radius:", ";padding:", ";font-weight:", "!important;font-size:", ";cursor:", ";opacity:", ";transition:all 0.15s ease-in-out !important;outline:0;text-decoration:none;margin-bottom:", ";&:hover{", ";}&:active{", ";}&:focus{", ";}"], ({
  theme
}) => theme.orbit.fontFamily, ({
  block,
  width,
  onlyIcon
}) => block ? "100%" : width && `${width}px` || onlyIcon && getSizeToken(TOKENS.heightButton) || "auto", ({
  block
}) => block ? "1 1 auto" : "0 0 auto", getSizeToken(TOKENS.heightButton), getTypeToken(TOKENS.backgroundButton), getTypeToken(TOKENS.colorTextButton), ({
  theme,
  circled
}) => circled ? getSizeToken(TOKENS.heightButton) : theme.orbit.borderRadiusNormal, getButtonSpacing(), ({
  theme
}) => theme.orbit.fontWeightBold, getSizeToken(TOKENS.fontSizeButton), ({
  disabled
}) => disabled ? "not-allowed" : "pointer", ({
  disabled,
  theme
}) => disabled ? theme.orbit.opacityButtonDisabled : "1", getSpacingToken, ({
  transparent,
  disabled
}) => !disabled && css(["background:", ";color:", "!important;"], !transparent && getTypeToken(TOKENS.backgroundButtonHover), getTypeToken(TOKENS.colorTextButtonHover)), ({
  transparent,
  disabled
}) => !disabled && css(["background:", ";color:", "!important;", ";"], !transparent && getTypeToken(TOKENS.backgroundButtonActive), getTypeToken(TOKENS.colorTextButtonActive), getButtonLinkBoxShadow(BUTTON_STATES.ACTIVE)), getButtonLinkBoxShadow(BUTTON_STATES.FOCUS));
StyledButtonLink.defaultProps = {
  theme: defaultTheme
};
const StyledButtonLinkContent = styled.div.withConfig({
  displayName: "ButtonLink__StyledButtonLinkContent",
  componentId: "sc-14jv5cl-2"
})(["display:flex;flex-basis:100%;justify-content:center;align-items:center;", ";"], onlyIE(css(["min-width:100%;max-width:1px;"])));
const StyledButtonLinkContentChildren = styled.div.withConfig({
  displayName: "ButtonLink__StyledButtonLinkContentChildren",
  componentId: "sc-14jv5cl-3"
})(["display:inline-block;"]); // $FlowExpected

const ButtonLink = React.forwardRef((props, ref) => {
  const {
    external,
    children,
    component = "button",
    href,
    size = SIZES.NORMAL,
    icon,
    iconRight,
    type = TYPES.PRIMARY,
    onClick,
    width = 0,
    role,
    disabled,
    circled,
    submit,
    transparent,
    ariaExpanded,
    ariaControls,
    spaceAfter,
    dataTest,
    tabIndex,
    title,
    block,
    className
  } = props;
  const iconLeft = props.iconLeft || icon;
  const sizeIcon = size === ICON_SIZES.SMALL ? ICON_SIZES.SMALL : ICON_SIZES.MEDIUM;
  const onlyIcon = iconLeft && !children;
  warning(!(!children && !title), "Warning: children or title property is missing on ButtonLink. Use title property to add aria-label to be accessible for screen readers. More information https://orbit.kiwi/components/buttonlink/#accessibility");
  return React.createElement(StyledButtonLink, {
    onClick: onClick,
    component: component,
    size: size,
    onlyIcon: onlyIcon,
    sizeIcon: sizeIcon,
    type: type,
    href: !disabled ? href : null,
    target: !disabled && href && external ? "_blank" : undefined,
    rel: !disabled && href && external ? "noopener noreferrer" : undefined,
    iconLeft: iconLeft,
    iconRight: iconRight,
    buttonRef: ref,
    width: width,
    className: className,
    role: role,
    disabled: disabled,
    block: block,
    circled: circled,
    submit: submit,
    transparent: transparent,
    ariaExpanded: ariaExpanded,
    ariaControls: ariaControls,
    title: title,
    spaceAfter: spaceAfter,
    tabIndex: tabIndex,
    dataTest: dataTest
  }, React.createElement(StyledButtonLinkContent, null, iconLeft && React.createElement(IconContainer, {
    size: size,
    type: type,
    onlyIcon: onlyIcon,
    sizeIcon: sizeIcon
  }, iconLeft), children && React.createElement(StyledButtonLinkContentChildren, null, children), iconRight && React.createElement(IconContainer, {
    size: size,
    type: type,
    onlyIcon: onlyIcon,
    sizeIcon: sizeIcon,
    right: true
  }, iconRight)));
});
ButtonLink.displayName = "ButtonLink";
export default ButtonLink;