ui-components/src/components/Button.jsx at main · java-tools/ui-components · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
'use strict'
import React from 'react'
import PropTypes from 'prop-types'
import styles from './Button.module.css'
import commonStyles from './Common.module.css'
import PlatformaticIcon from './PlatformaticIcon'
import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, LARGE } from './constants'

function Button ({
  classes,
  label,
  color,
  backgroundColor,
  size,
  disabled,
  bold,
  hoverEffect,
  bordered,
  fullWidth,
  platformaticIcon,
  selected,
  ...rest
}) {
  let buttonClassName = classes
  buttonClassName += ` ${styles.button} ${commonStyles['background-color-' + backgroundColor]} ${styles['color-' + color]} ${styles['button-' + size]}`
  if (!bordered) buttonClassName += ` ${styles['no-border']}`
  if (disabled) {
    buttonClassName += ` ${styles.disabled}`
  } else {
    switch (hoverEffect) {
      case BACKGROUND_COLOR_OPAQUE:
        buttonClassName += ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${color}`]
        break
      case BOX_SHADOW:
        buttonClassName += ' ' + styles[`hover-${BOX_SHADOW}-${backgroundColor}`]
        break
      case UNDERLINE:
        buttonClassName += ` ${styles['underline-effect']}`
        break
      default:
        break
    }
  }
  if (bold) buttonClassName += ` ${styles.fontBold}`
  if (fullWidth) buttonClassName += ` ${styles.fullWidth}`
  if (selected) buttonClassName += ' ' + commonStyles[`selected-background-color-${color}`]
  return (
    <button className={buttonClassName} disabled={disabled} alt={label} {...rest}>
      {platformaticIcon ? <PlatformaticIcon iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} /> : null}
      <span className={styles.label}>{label}</span>
    </button>
  )
}

Button.propTypes = {
  /**
   * classes
   */
  classes: PropTypes.string,
  /**
   * label
   */
  label: PropTypes.string,
  /**
   * color of text, icon and borders
   */
  color: PropTypes.oneOf(COLORS_BUTTON),
  /**
   * background color of the button
   */
  backgroundColor: PropTypes.oneOf(COLORS_BUTTON),
  /**
   * Size
   */
  size: PropTypes.oneOf(SIZES),
  /**
   * Disabled
   */
  disabled: PropTypes.bool,
  /**
   * Bold
   */
  bold: PropTypes.bool,
  /**
   * Effect on hover
   */
  hoverEffect: PropTypes.oneOf(HOVER_EFFECTS_BUTTONS),
  /**
   * Apply border: default true
   */
  bordered: PropTypes.bool,
  /**
   * Full Width: default false
   */
  fullWidth: PropTypes.bool,
  /**
   * platformaticIcon: should be removed once we use totally our icons
   */
  platformaticIcon: PropTypes.shape({
    iconName: PropTypes.string,
    color: PropTypes.string
  }),
  /**
   * Selected: default false
   */
  selected: PropTypes.bool
}

Button.defaultProps = {
  classes: '',
  label: '',
  color: MAIN_DARK_BLUE,
  backgroundColor: 'transparent',
  disabled: false,
  size: LARGE,
  bold: false,
  hoverEffect: BACKGROUND_COLOR_OPAQUE,
  bordered: true,
  fullWidth: false,
  platformaticIcon: null,
  selected: false
}

export default Button