@parkassist/pa-ui-library/dist/components/Button/index.js

INX Platform elements

import styled, { css } from "styled-components";
import Theme from "../../constants/Theme";
import Palette from "../../constants/Palette";
import Font from "../../constants/Font";
import FontStyles from "../../constants/FontStyles";
function calculateBackgroundColor(props, hovered) {
  if (props.transparent && !hovered) {
    return 'transparent';
  }
  if (props.dangerous) {
    return hovered ? Palette.ERROR_RED_LIGHT : Palette.ERROR_RED;
  }
  if (props.dark) {
    return hovered ? Palette.DIM_GREY : Palette.LIGHT_BLACK;
  }
  return hovered ? Palette.WHITE_SMOKE : Theme.BACKGROUND_COLOR;
}
function calculateForeColor(props) {
  if (props.dangerous) {
    return Palette.WHITE;
  }
  if (props.dark) {
    return Palette.WHITE;
  }
  return Palette.LIGHT_BLACK;
}
function calculateBorderColor(props, hovered) {
  if (props.dangerous) {
    return hovered ? Palette.ERROR_RED_LIGHT : Palette.ERROR_RED;
  }
  if (props.dark) {
    return hovered ? Palette.DIM_GREY : Palette.LIGHT_BLACK;
  }
  return Palette.LIGHT_BLACK;
}
function getBigStyles(props) {
  return `
        height: ${props.multiline ? 'auto' : '48px'};
        font: ${FontStyles.BUTTON_FONT};
        line-height:  ${props.multiline ? 1.3 : '32px'};
        padding:  ${props.customPadding || (props.multiline ? '8px 16px' : '2px 16px')};
    `;
}
function getSmallStyles(props) {
  return `
        height: ${props.multiline ? 'auto' : '32px'};
        font: ${FontStyles.BUTTON_SMALL_FONT};
        line-height:  ${props.multiline ? 1.3 : '28px'};
        padding:  ${props.customPadding || (props.multiline ? '4px 8px' : '2px 8px')};
    `;
}
function getDefaultStyles(props) {
  return `
        height: ${props.multiline ? 'auto' : '40px'};
        font: ${FontStyles.BUTTON_FONT};
        line-height: ${props.multiline ? 1.3 : '32px'};
        padding:  ${props.customPadding || (props.multiline ? '8px 16px' : '2px 16px')};
    `;
}
function calculateSize(props) {
  if (props.big) {
    return getBigStyles(props);
  }
  if (props.small) {
    return getSmallStyles(props);
  }
  return getDefaultStyles(props);
}
export default styled.button`
  ${props => calculateSize(props)};
  border-radius: 4px;
  border-width: ${props => props.outline ? 0 : '1px'};
  border-style: solid;
  border-color: ${props => calculateBorderColor(props, false)};
  width: ${props => props.width ? props.width + 'px' : 'fit-content'};
  background-color: ${props => calculateBackgroundColor(props, false)};
  cursor: ${props => props.disabled ? "initial" : "pointer"};
  opacity: ${props => props.disabled ? 0.25 : 1};
  letter-spacing: 0;
  outline: none;
  user-select: none;
  color: ${props => calculateForeColor(props)};
  font-family: ${Font.fontFamily};
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  

  &:hover:enabled {
    background-color: ${props => calculateBackgroundColor(props, true)};
    border-color: ${props => calculateBorderColor(props, true)};
  }
  
  &:active:enabled {
    background-color: ${props => calculateBackgroundColor(props, true)};
    border-color: ${props => calculateBorderColor(props, true)};
  }
  

  ${({
  round,
  roundSize
}) => round && roundSize && css`
      width: ${roundSize}px;
      height: ${roundSize}px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      line-height: 1;
    `}
  
  
  ${({
  inline
}) => inline && css`
      ${props => calculateSize(props)};
      margin: 0 0 0 10px;
      min-width: 50px;
    `}

  ${({
  noMarginTop
}) => noMarginTop && css`
      margin-top: 0;
    `}
`;