@primer/components/lib-esm/NewButton/button.js

Primer react components

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

import React, { forwardRef } from 'react';
import Box from '../Box';
import styled from 'styled-components';
import sx, { merge } from '../sx';
import { useTheme } from '../ThemeProvider';
const TEXT_ROW_HEIGHT = '20px'; // custom value off the scale

const getVariantStyles = (variant = 'default', theme) => {
  const style = {
    default: {
      color: 'btn.text',
      backgroundColor: 'btn.bg',
      boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}, ${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.insetShadow}`,
      '&:hover:not([disabled])': {
        backgroundColor: 'btn.hoverBg'
      },
      // focus must come before :active so that the active box shadow overrides
      '&:focus:not([disabled])': {
        boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.focusShadow}`
      },
      '&:active:not([disabled])': {
        backgroundColor: 'btn.selectedBg',
        boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadowActive}`
      },
      '&:disabled': {
        color: 'primer.fg.disabled',
        backgroundColor: 'btn.disabledBg'
      }
    },
    primary: {
      color: 'btn.primary.text',
      backgroundColor: 'btn.primary.bg',
      borderColor: 'border.subtle',
      boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.shadow}`,
      '&:hover:not([disabled])': {
        color: 'btn.primary.hoverText',
        backgroundColor: 'btn.primary.hoverBg'
      },
      // focus must come before :active so that the active box shadow overrides
      '&:focus:not([disabled])': {
        boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.focusShadow}`
      },
      '&:active:not([disabled])': {
        backgroundColor: 'btn.primary.selectedBg',
        boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.primary.selectedShadow}`
      },
      '&:disabled': {
        color: 'btn.primary.disabledText',
        backgroundColor: 'btn.primary.disabledBg'
      },
      '[data-component="ButtonCounter"]': {
        backgroundColor: 'btn.primary.counterBg',
        color: 'btn.primary.text'
      }
    },
    danger: {
      color: 'btn.danger.text',
      backgroundColor: 'btn.bg',
      boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}`,
      '&:hover:not([disabled])': {
        color: 'btn.danger.hoverText',
        backgroundColor: 'btn.danger.hoverBg',
        borderColor: 'btn.danger.hoverBorder',
        boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.hoverShadow}`,
        '[data-component="ButtonCounter"]': {
          backgroundColor: 'btn.danger.hoverCounterBg',
          color: 'btn.danger.hoverText'
        }
      },
      // focus must come before :active so that the active box shadow overrides
      '&:focus:not([disabled])': {
        borderColor: 'btn.danger.focusBorder',
        boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.focusShadow}`
      },
      '&:active:not([disabled])': {
        color: 'btn.danger.selectedText',
        backgroundColor: 'btn.danger.selectedBg',
        boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.danger.selectedShadow}`,
        borderColor: 'btn.danger.selectedBorder'
      },
      '&:disabled': {
        color: 'btn.danger.disabledText',
        backgroundColor: 'btn.danger.disabledBg',
        borderColor: 'btn.danger.disabledBorder',
        '[data-component="ButtonCounter"]': {
          backgroundColor: 'btn.danger.disabledCounterBg'
        }
      },
      '[data-component="ButtonCounter"]': {
        color: 'btn.danger.text',
        backgroundColor: 'btn.danger.counterBg'
      }
    },
    invisible: {
      color: 'accent.fg',
      backgroundColor: 'transparent',
      border: '0',
      boxShadow: 'none',
      '&:hover:not([disabled])': {
        backgroundColor: 'btn.hoverBg'
      },
      // focus must come before :active so that the active box shadow overrides
      '&:focus:not([disabled])': {
        boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.focusShadow}`
      },
      '&:active:not([disabled])': {
        backgroundColor: 'btn.selectedBg'
      },
      '&:disabled': {
        color: 'primer.fg.disabled'
      }
    },
    outline: {
      color: 'btn.outline.text',
      boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.shadow}`,
      '&:hover': {
        color: 'btn.outline.hoverText',
        backgroundColor: 'btn.outline.hoverBg',
        borderColor: 'outline.hoverBorder',
        boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.hoverShadow}`,
        '[data-component="ButtonCounter"]': {
          backgroundColor: 'btn.outline.hoverCounterBg',
          color: 'btn.outline.hoverText'
        }
      },
      // focus must come before :active so that the active box shadow overrides
      '&:focus': {
        borderColor: 'btn.outline.focusBorder',
        boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.focusShadow}`
      },
      '&:active:not([disabled])': {
        color: 'btn.outline.selectedText',
        backgroundColor: 'btn.outline.selectedBg',
        boxShadow: `${theme === null || theme === void 0 ? void 0 : theme.shadows.btn.outline.selectedShadow}`,
        borderColor: 'btn.outline.selectedBorder'
      },
      '&:disabled': {
        color: 'btn.outline.disabledText',
        backgroundColor: 'btn.outline.disabledBg',
        borderColor: 'btn.border',
        '[data-component="ButtonCounter"]': {
          backgroundColor: 'btn.outline.disabledCounterBg'
        }
      },
      '[data-component="ButtonCounter"]': {
        backgroundColor: 'btn.outline.counterBg',
        color: 'btn.outline.text'
      }
    }
  };
  return style[variant];
};

const getSizeStyles = (size = 'medium', variant = 'default', iconOnly) => {
  let paddingY, paddingX, fontSize;

  switch (size) {
    case 'small':
      paddingY = 3;
      paddingX = 12;
      fontSize = 0;
      break;

    case 'large':
      paddingY = 9;
      paddingX = 20;
      fontSize = 2;
      break;

    case 'medium':
    default:
      paddingY = 5;
      paddingX = 16;
      fontSize = 1;
  }

  if (iconOnly) {
    paddingX = paddingY + 2;
  }

  if (variant === 'invisible') {
    paddingY = paddingY + 1;
  }

  return {
    paddingY: `${paddingY}px`,
    paddingX: `${paddingX}px`,
    fontSize,
    '[data-component="ButtonCounter"]': {
      fontSize
    }
  };
};

const ButtonBase = styled.button.withConfig({
  displayName: "button__ButtonBase",
  componentId: "sc-15k5iqk-0"
})(sx);
const Button = /*#__PURE__*/forwardRef(({
  children,
  sx: sxProp = {},
  ...props
}, forwardedRef) => {
  const {
    icon: Icon,
    leadingIcon: LeadingIcon,
    trailingIcon: TrailingIcon,
    variant = 'default',
    size = 'medium'
  } = props;
  const iconOnly = !!Icon;
  const {
    theme
  } = useTheme();
  const styles = {
    borderRadius: '2',
    border: '1px solid',
    borderColor: theme === null || theme === void 0 ? void 0 : theme.colors.btn.border,
    display: 'grid',
    gridTemplateAreas: '"leadingIcon text trailingIcon"',
    fontWeight: 'bold',
    lineHeight: TEXT_ROW_HEIGHT,
    whiteSpace: 'nowrap',
    verticalAlign: 'middle',
    cursor: 'pointer',
    appearance: 'none',
    userSelect: 'none',
    textDecoration: 'none',
    textAlign: 'center',
    '& > :not(:last-child)': {
      mr: '2'
    },
    '&:focus': {
      outline: 'none'
    },
    '&:disabled': {
      cursor: 'default'
    },
    '&:disabled svg': {
      opacity: '0.6'
    },
    '[data-component="leadingIcon"]': {
      gridArea: 'leadingIcon'
    },
    '[data-component="text"]': {
      gridArea: 'text'
    },
    '[data-component="trailingIcon"]': {
      gridArea: 'trailingIcon'
    }
  };
  const iconWrapStyles = {
    display: 'inline-block'
  };
  const sxStyles = merge.all([styles, getSizeStyles(size, variant, iconOnly), getVariantStyles(variant, theme), sxProp]);
  return /*#__PURE__*/React.createElement(ButtonBase, _extends({
    sx: sxStyles,
    ref: forwardedRef
  }, props), LeadingIcon && /*#__PURE__*/React.createElement(Box, {
    as: "span",
    "data-component": "leadingIcon",
    sx: iconWrapStyles,
    "aria-hidden": !iconOnly
  }, /*#__PURE__*/React.createElement(LeadingIcon, null)), /*#__PURE__*/React.createElement("span", {
    "data-component": "text",
    hidden: Icon ? true : false
  }, children), Icon && /*#__PURE__*/React.createElement(Box, {
    "data-component": "icon-only",
    as: "span",
    sx: {
      display: 'inline-block'
    },
    "aria-hidden": !iconOnly
  }, /*#__PURE__*/React.createElement(Icon, null)), TrailingIcon && /*#__PURE__*/React.createElement(Box, {
    as: "span",
    "data-component": "trailingIcon",
    sx: { ...iconWrapStyles,
      ml: 2
    },
    "aria-hidden": !iconOnly
  }, /*#__PURE__*/React.createElement(TrailingIcon, null)));
});
Button.displayName = 'Button';
Object.assign(Button, {});
export { Button };