@platformatic/ui-components 0.1.64 → 0.1.66

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/assets/index.b6eabf18.css +1 -0
  2. package/dist/assets/{index.f5218dec.js → index.de7e435d.js} +8 -8
  3. package/dist/index.html +2 -2
  4. package/dist/main.css +2 -6
  5. package/package.json +1 -1
  6. package/src/components/BorderedBox.jsx +10 -4
  7. package/src/components/Button.jsx +17 -9
  8. package/src/components/Button.module.css +10 -9
  9. package/src/components/ButtonFullRounded.jsx +38 -14
  10. package/src/components/ButtonFullRounded.module.css +4 -1
  11. package/src/components/Common.module.css +36 -0
  12. package/src/components/CopyAndPaste.jsx +2 -2
  13. package/src/components/InfoBox.jsx +4 -2
  14. package/src/components/Sidebar.jsx +28 -17
  15. package/src/components/Sidebar.module.css +3 -5
  16. package/src/components/Status.jsx +2 -2
  17. package/src/components/Tag.jsx +1 -1
  18. package/src/components/constants.js +6 -0
  19. package/src/stories/Button.stories.jsx +2 -2
  20. package/dist/assets/index.560569d1.css +0 -1
package/dist/index.html CHANGED
@@ -4,8 +4,8 @@
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>Platformatic UI Components</title>
7
- <script type="module" crossorigin src="/assets/index.f5218dec.js"></script>
8
- <link rel="stylesheet" href="/assets/index.560569d1.css">
7
+ <script type="module" crossorigin src="/assets/index.de7e435d.js"></script>
8
+ <link rel="stylesheet" href="/assets/index.b6eabf18.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
package/dist/main.css CHANGED
@@ -558,8 +558,8 @@ video {
558
558
  margin-bottom: 1.25rem;
559
559
  }
560
560
 
561
- .ml-2 {
562
- margin-left: 0.5rem;
561
+ .ml-0 {
562
+ margin-left: 0px;
563
563
  }
564
564
 
565
565
  .ml-4 {
@@ -665,10 +665,6 @@ video {
665
665
  color: rgb(250 33 33 / var(--tw-text-opacity));
666
666
  }
667
667
 
668
- .underline {
669
- text-decoration-line: underline;
670
- }
671
-
672
668
  .blur {
673
669
  --tw-blur: blur(8px);
674
670
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.1.64",
4
+ "version": "0.1.66",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/BorderedBox.jsx CHANGED
@@ -5,10 +5,11 @@ import commonStyles from './Common.module.css'
5
5
  import React from 'react'
6
6
  import { COLORS_BORDERED_BOX } from './constants'
7
7
  function BorderedBox (props) {
8
- const { classes, color, children, backgroundColor } = props
8
+ const { classes, color, children, backgroundColor, opaque } = props
9
9
  const borderColor = commonStyles[`bordered--${color}`]
10
10
  const styledBackgroundColor = commonStyles[`background-color-${backgroundColor}`]
11
- const className = `${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor} ${styledBackgroundColor}`
11
+ const opacity = commonStyles[`background-color-opaque-${opaque}`]
12
+ const className = `${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor} ${styledBackgroundColor} ${opacity}`
12
13
 
13
14
  return (
14
15
  <div className={className}>
@@ -33,14 +34,19 @@ BorderedBox.propTypes = {
33
34
  /**
34
35
  * classes
35
36
  */
36
- classes: PropTypes.string
37
+ classes: PropTypes.string,
38
+ /**
39
+ * opaque
40
+ */
41
+ opaque: PropTypes.oneOf([100, 60, 30, 20])
37
42
  }
38
43
 
39
44
  BorderedBox.defaultProps = {
40
45
  children: null,
41
46
  color: 'main-green',
42
47
  backgroundColor: 'dark-blue',
43
- classes: ''
48
+ classes: '',
49
+ opaque: 100
44
50
  }
45
51
 
46
52
  export default BorderedBox
package/src/components/Button.jsx CHANGED
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
4
4
  import styles from './Button.module.css'
5
5
  import commonStyles from './Common.module.css'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
- import { SIZES, COLORS_BUTTON } from './constants'
7
+ import { SIZES, COLORS_BUTTON, BOX_SHADOW, UNDERLINE, HOVER_EFFECTS_BUTTONS, BACKGROUND_COLOR_OPAQUE, MAIN_DARK_BLUE, LARGE } from './constants'
8
8
 
9
9
  function Button (props) {
10
10
  const { icon, label, color, backgroundColor, size, disabled, bold, hoverEffect, bordered, fullWidth, platformaticIcon, ...rest } = props
@@ -13,10 +13,18 @@ function Button (props) {
13
13
  if (disabled) {
14
14
  className += ` ${styles.disabled}`
15
15
  } else {
16
- if (hoverEffect === 'hover') {
17
- className += ` ${styles['hover-' + backgroundColor]}`
18
- } else {
19
- className += ` ${styles['underline-effect']}`
16
+ switch (hoverEffect) {
17
+ case BACKGROUND_COLOR_OPAQUE:
18
+ className += ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${color}`]
19
+ break
20
+ case BOX_SHADOW:
21
+ className += ' ' + styles[`hover-${BOX_SHADOW}-${backgroundColor}`]
22
+ break
23
+ case UNDERLINE:
24
+ className += ` ${styles['underline-effect']}`
25
+ break
26
+ default:
27
+ break
20
28
  }
21
29
  }
22
30
  if (bold) className += ` ${styles.fontBold}`
@@ -61,7 +69,7 @@ Button.propTypes = {
61
69
  /**
62
70
  * Effect on hover
63
71
  */
64
- hoverEffect: PropTypes.oneOf(['hover', 'underline']),
72
+ hoverEffect: PropTypes.oneOf(HOVER_EFFECTS_BUTTONS),
65
73
  /**
66
74
  * Apply border: default true
67
75
  */
@@ -81,12 +89,12 @@ Button.propTypes = {
81
89
 
82
90
  Button.defaultProps = {
83
91
  label: '',
84
- color: 'main-dark-blue',
92
+ color: MAIN_DARK_BLUE,
85
93
  backgroundColor: 'transparent',
86
94
  disabled: false,
87
- size: 'large',
95
+ size: LARGE,
88
96
  bold: false,
89
- hoverEffect: 'hover',
97
+ hoverEffect: BACKGROUND_COLOR_OPAQUE,
90
98
  bordered: true,
91
99
  fullWidth: false,
92
100
  platformaticIcon: null
package/src/components/Button.module.css CHANGED
@@ -63,36 +63,37 @@
63
63
  .disabled {
64
64
  @apply opacity-30 cursor-default;
65
65
  }
66
- .hover-main-green {
66
+ .hover-box-shadow-main-green {
67
67
  @apply hover:shadow-main-green;
68
68
  }
69
- .hover-light-green {
69
+ .hover-box-shadow-light-green {
70
70
  @apply hover:shadow-light-green;
71
71
  }
72
- .hover-dark-green {
72
+ .hover-box-shadow-dark-green {
73
73
  @apply hover:shadow-dark-green;
74
74
  }
75
- .hover-main-dark-blue {
75
+ .hover-box-shadow-main-dark-blue {
76
76
  @apply hover:shadow-main-dark-blue;
77
77
  }
78
- .hover-dark-blue {
78
+ .hover-box-shadow-dark-blue {
79
79
  @apply hover:shadow-dark-blue;
80
80
  }
81
- .hover-light-blue {
81
+ .hover-box-shadow-light-blue {
82
82
  @apply hover:shadow-light-blue;
83
83
  }
84
- .hover-white{
84
+ .hover-box-shadow-white{
85
85
  @apply hover:shadow-wrap;
86
86
  }
87
- .hover-error-red {
87
+ .hover-box-shadow-error-red {
88
88
  @apply hover:shadow-error-red;
89
89
  }
90
- .hover-tertiary-blue {
90
+ .hover-box-shadow-tertiary-blue {
91
91
  @apply hover:shadow-tertiary-blue;
92
92
  }
93
93
  .underline-effect {
94
94
  @apply hover:underline;
95
95
  }
96
+
96
97
  .fullWidth {
97
98
  @apply w-full;
98
99
  }
package/src/components/ButtonFullRounded.jsx CHANGED
@@ -4,17 +4,30 @@ import PropTypes from 'prop-types'
4
4
  import commonStyles from './Common.module.css'
5
5
  import styles from './ButtonFullRounded.module.css'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
- import { COLORS_ICON, SIZES } from './constants'
8
- function ButtonFullRounded ({ iconName, iconSize, iconColor, disabled, paddingSize, alt, onClick }) {
9
- const borderColor = commonStyles[`bordered--${iconColor}`]
7
+ import { COLORS_ICON, SIZES, BACKGROUND_COLOR_OPAQUE, PADDING_SIZES, SMALL, WHITE, NONE } from './constants'
8
+ function ButtonFullRounded ({ className, iconName, iconSize, iconColor, disabled, paddingSize, alt, onClick, hoverEffect, bordered }) {
10
9
  const padding = commonStyles[`padding--${paddingSize}`]
11
- let className = `${styles.buttonRoundedFull} ${borderColor} ${padding}`
12
- if (disabled) className += ` ${styles.disabled}`
10
+ const containerClassName = `${className} ${styles.roundedFull} ` + commonStyles['background-color-main-dark-blue']
11
+ let buttonClassName = `${styles.roundedFull} ${styles.buttonRoundedFull} ${padding}`
12
+ if (bordered) buttonClassName += ' ' + commonStyles[`bordered--${iconColor}`]
13
+ if (disabled) {
14
+ buttonClassName += ` ${styles.disabled}`
15
+ } else {
16
+ switch (hoverEffect) {
17
+ case BACKGROUND_COLOR_OPAQUE:
18
+ buttonClassName += ' ' + commonStyles[`hover-${BACKGROUND_COLOR_OPAQUE}-${iconColor}`]
19
+ break
20
+ default:
21
+ break
22
+ }
23
+ }
13
24
 
14
25
  return (
15
- <button className={className} disabled={disabled} onClick={onClick} alt={alt}>
16
- <PlatformaticIcon iconName={iconName} size={iconSize} color={iconColor} data-testid='button-icon' onClick={null} />
17
- </button>
26
+ <div className={containerClassName}>
27
+ <button className={buttonClassName} disabled={disabled} onClick={onClick} alt={alt}>
28
+ <PlatformaticIcon iconName={iconName} size={iconSize} color={iconColor} data-testid='button-icon' onClick={null} />
29
+ </button>
30
+ </div>
18
31
  )
19
32
  }
20
33
 
@@ -38,7 +51,7 @@ ButtonFullRounded.propTypes = {
38
51
  /**
39
52
  * paddingSize
40
53
  */
41
- paddingSize: PropTypes.oneOf(SIZES),
54
+ paddingSize: PropTypes.oneOf(PADDING_SIZES),
42
55
  /**
43
56
  * alt
44
57
  */
@@ -46,17 +59,28 @@ ButtonFullRounded.propTypes = {
46
59
  /**
47
60
  * onClick
48
61
  */
49
- onClick: PropTypes.func
62
+ onClick: PropTypes.func,
63
+ /**
64
+ * Effect on hover
65
+ */
66
+ hoverEffect: PropTypes.oneOf([BACKGROUND_COLOR_OPAQUE]),
67
+ /**
68
+ * bordered
69
+ */
70
+ bordered: PropTypes.bool
71
+
50
72
  }
51
73
 
52
74
  ButtonFullRounded.defaultProps = {
53
75
  iconName: '',
54
- iconColor: 'white',
55
- iconSize: 'small',
76
+ iconColor: WHITE,
77
+ iconSize: SMALL,
56
78
  disabled: false,
57
- paddingSize: 'small',
79
+ paddingSize: NONE,
58
80
  alt: 'ButtonFullRounded',
59
- onClick: () => {}
81
+ onClick: () => {},
82
+ hoverEffect: '',
83
+ bordered: true
60
84
  }
61
85
 
62
86
  export default ButtonFullRounded
package/src/components/ButtonFullRounded.module.css CHANGED
@@ -1,6 +1,9 @@
1
1
  .buttonRoundedFull {
2
- @apply rounded-full flex justify-center cursor-pointer bg-main-dark-blue border items-center;
2
+ @apply flex justify-center cursor-pointer bg-main-dark-blue border items-center;
3
3
  }
4
4
  .disabled {
5
5
  @apply bg-opacity-30 cursor-default;
6
6
  }
7
+ .roundedFull {
8
+ @apply rounded-full
9
+ }
package/src/components/Common.module.css CHANGED
@@ -68,6 +68,9 @@
68
68
  .background-color-tertiary-blue{
69
69
  @apply bg-tertiary-blue !important;
70
70
  }
71
+ .background-color-warning-yellow{
72
+ @apply bg-warning-yellow !important ;
73
+ }
71
74
  .background-color-transparent{
72
75
  @apply bg-transparent;
73
76
  }
@@ -80,9 +83,15 @@
80
83
  .background-color-opaque-30 {
81
84
  @apply bg-opacity-30 !important;
82
85
  }
86
+ .background-color-opaque-20 {
87
+ @apply bg-opacity-20 !important;
88
+ }
83
89
  .apply-opacity-30 {
84
90
  @apply opacity-30;
85
91
  }
92
+ .padding--none {
93
+ @apply p-0 ;
94
+ }
86
95
  .padding--small {
87
96
  @apply p-1 ;
88
97
  }
@@ -95,4 +104,31 @@
95
104
  .padding--extra-large {
96
105
  @apply p-6;
97
106
  }
107
+ .hover-background-color-opaque-main-green {
108
+ @apply hover:bg-main-green hover:bg-opacity-20;
109
+ }
110
+ .hover-background-color-opaque-light-green {
111
+ @apply hover:bg-light-green hover:bg-opacity-20;
112
+ }
113
+ .hover-background-color-opaque-dark-green {
114
+ @apply hover:bg-dark-green hover:bg-opacity-20;
115
+ }
116
+ .hover-background-color-opaque-main-dark-blue{
117
+ @apply hover:bg-main-dark-blue hover:bg-opacity-20;
118
+ }
119
+ .hover-background-color-opaque-dark-blue {
120
+ @apply hover:bg-dark-blue hover:bg-opacity-20;
121
+ }
122
+ .hover-background-color-opaque-light-blue {
123
+ @apply hover:bg-light-blue hover:bg-opacity-20;
124
+ }
125
+ .hover-background-color-opaque-white{
126
+ @apply hover:bg-white hover:bg-opacity-20;
127
+ }
128
+ .hover-background-color-opaque-error-red{
129
+ @apply hover:bg-error-red hover:bg-opacity-20;
130
+ }
131
+ .hover-background-color-opaque-tertiary-blue{
132
+ @apply hover:bg-tertiary-blue hover:bg-opacity-20;
133
+ }
98
134
 
package/src/components/CopyAndPaste.jsx CHANGED
@@ -1,7 +1,7 @@
1
-
1
+ 'use strict'
2
+ import React, { useState } from 'react'
2
3
  import PropTypes from 'prop-types'
3
4
  import { COLORS_ICON, MEDIUM, SIZES } from './constants'
4
- import { useState } from 'react'
5
5
  import PlatformaticIcon from './PlatformaticIcon'
6
6
  import ReactTooltip from 'react-tooltip'
7
7
 
package/src/components/InfoBox.jsx CHANGED
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
4
4
  import styles from './InfoBox.module.css'
5
5
  import Button from './Button'
6
6
  import PlatformaticIcon from './PlatformaticIcon'
7
- import { COLORS_BUTTON, COLORS_ICON } from './constants'
7
+ import { COLORS_BUTTON, COLORS_ICON, HOVER_EFFECTS_BUTTONS } from './constants'
8
8
 
9
9
  function InfoBox ({ children, iconName, iconColor, helpText, buttonProps }) {
10
10
  return (
@@ -12,7 +12,7 @@ function InfoBox ({ children, iconName, iconColor, helpText, buttonProps }) {
12
12
  <PlatformaticIcon size='extra-large' iconName={iconName} color={iconColor} />
13
13
  {children}
14
14
  <p className={styles.helpText}>{helpText}</p>
15
- {buttonProps && (<Button type='button' size='extra-large' label={buttonProps.label} color={buttonProps.color} backgroundColor={buttonProps.backgroundColor} onClick={() => buttonProps.onClick()} fullWidth bold />)}
15
+ {buttonProps && (<Button type='button' size='extra-large' label={buttonProps.label} color={buttonProps.color} backgroundColor={buttonProps.backgroundColor} onClick={() => buttonProps.onClick()} fullWidth bold bordered={buttonProps.bordered} hoverEffect={buttonProps.hoverEffect} />)}
16
16
  </div>
17
17
  )
18
18
  }
@@ -41,6 +41,8 @@ InfoBox.propTypes = {
41
41
  label: PropTypes.string,
42
42
  backgroundColor: PropTypes.string,
43
43
  color: PropTypes.oneOf(COLORS_BUTTON),
44
+ hoverEffect: PropTypes.oneOf(HOVER_EFFECTS_BUTTONS),
45
+ bordered: PropTypes.bool,
44
46
  onClick: PropTypes.func
45
47
  })
46
48
  }
package/src/components/Sidebar.jsx CHANGED
@@ -1,14 +1,18 @@
1
1
  import React, { useEffect, useState } from 'react'
2
2
  import Icons from './icons'
3
+ import Button from './Button'
3
4
  import styles from './Sidebar.module.css'
4
5
  import ReactTooltip from 'react-tooltip'
5
6
  import HorizontalSeparator from './HorizontalSeparator'
6
7
  import PlatformaticIcon from './PlatformaticIcon'
7
8
  import PropTypes from 'prop-types'
9
+ import { BACKGROUND_COLOR_OPAQUE, MEDIUM, WHITE } from './constants'
10
+ import ButtonFullRounded from './ButtonFullRounded'
8
11
 
9
12
  function Sidebar (props) {
10
13
  const {
11
14
  title,
15
+ labelButtonSettings,
12
16
  defaultSelected,
13
17
  onClickItemSelectedParent,
14
18
  items,
@@ -33,13 +37,15 @@ function Sidebar (props) {
33
37
  {collapsed
34
38
  ? (
35
39
  <>
36
- <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(false) }}>
37
- <PlatformaticIcon
38
- iconName='CircleArrowRightIcon'
39
- color='white'
40
- size='medium'
41
- />
42
- </button>
40
+ <ButtonFullRounded
41
+ className={styles.buttonCollapse}
42
+ iconName='CircleArrowRightIcon'
43
+ iconSize={MEDIUM}
44
+ iconColor={WHITE}
45
+ hoverEffect={BACKGROUND_COLOR_OPAQUE}
46
+ onClick={() => { setCollapsed(false) }}
47
+ bordered={false}
48
+ />
43
49
  <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
44
50
  <Icons.WorkspaceStaticIcon color='white' size='large' />
45
51
  </button>
@@ -56,13 +62,15 @@ function Sidebar (props) {
56
62
  )
57
63
  : (
58
64
  <>
59
- <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(true) }}>
60
- <PlatformaticIcon
61
- iconName='CircleArrowLeftIcon'
62
- color='white'
63
- size='medium'
64
- />
65
- </button>
65
+ <ButtonFullRounded
66
+ className={styles.buttonCollapse}
67
+ iconName='CircleArrowLeftIcon'
68
+ iconSize={MEDIUM}
69
+ iconColor={WHITE}
70
+ hoverEffect={BACKGROUND_COLOR_OPAQUE}
71
+ onClick={() => { setCollapsed(true) }}
72
+ bordered={false}
73
+ />
66
74
  <div className={styles.title} data-testid='lateral-bar-title'>
67
75
  {title}
68
76
  </div>
@@ -101,9 +109,7 @@ function Sidebar (props) {
101
109
  <HorizontalSeparator marginBottom='2' marginTop='2' />
102
110
 
103
111
  <div className={styles.bottom}>
104
- <button type='button' className={`${styles.buttonSettings} ${styles.buttonSettingsExpanded}`} onClick={onClickSettings}>
105
- <Icons.GearIcon color='white' size='small' /> <span className={styles.titleSettings}>Settings</span>
106
- </button>
112
+ <Button label={labelButtonSettings} color={WHITE} onClick={onClickSettings} platformaticIcon={{ iconName: 'GearIcon', color: WHITE }} fullWidth bold size={MEDIUM} hoverEffect={BACKGROUND_COLOR_OPAQUE} />
107
113
  </div>
108
114
  </>
109
115
  )}
@@ -116,6 +122,10 @@ Sidebar.propTypes = {
116
122
  * title
117
123
  */
118
124
  title: PropTypes.string,
125
+ /**
126
+ * title
127
+ */
128
+ labelButtonSettings: PropTypes.string,
119
129
  /**
120
130
  * defaultSelected
121
131
  */
@@ -154,6 +164,7 @@ Sidebar.propTypes = {
154
164
 
155
165
  Sidebar.defaultProps = {
156
166
  title: '',
167
+ labelButtonSettings: 'Settings',
157
168
  defaultSelected: null,
158
169
  onClickItemSelectedParent: () => {},
159
170
  items: [],
package/src/components/Sidebar.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .container {
2
- @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh];
2
+ @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh] z-10;
3
3
  transition: max-width 0.2s linear;
4
4
  }
5
5
  .collapsed {
@@ -12,9 +12,8 @@
12
12
  @apply border rounded-md p-1 border-white;
13
13
  }
14
14
  .buttonCollapse {
15
- @apply absolute border-0 rounded-full right-[-0.875rem];
15
+ @apply absolute right-[-0.875rem] border-0 z-20 bg-main-dark-blue;
16
16
  /* Override tailwind dist button[type='button]: background: transparent*/
17
- @apply bg-main-dark-blue !important;
18
17
  top: 1rem;
19
18
  }
20
19
  .title {
@@ -24,9 +23,8 @@
24
23
  @apply text-white text-[10px];
25
24
  }
26
25
  .buttonItem {
27
- @apply flex items-center justify-start border-0 w-full py-1;
26
+ @apply flex items-center justify-start border-0 rounded-md w-full py-1 hover:bg-white hover:bg-opacity-20;
28
27
  }
29
-
30
28
  .buttonCreate {
31
29
  @apply flex items-center justify-start border-0 w-full pt-1 pb-4;
32
30
  }
package/src/components/Status.jsx CHANGED
@@ -8,8 +8,8 @@ function Status ({ color, status }) {
8
8
  const className = `inline-flex text-${color}`
9
9
  return (
10
10
  <div className={className}>
11
- <PlatformaticIcon iconName='CircleFullIcon' size='medium' color={color} />
12
- <span className='ml-2'>{status}</span>
11
+ <PlatformaticIcon iconName='CircleFullIcon' size='small' color={color} />
12
+ <span className='ml-0'>{status}</span>
13
13
  </div>
14
14
  )
15
15
  }
package/src/components/Tag.jsx CHANGED
@@ -40,7 +40,7 @@ Tag.propTypes = {
40
40
  /**
41
41
  * opaque
42
42
  */
43
- opaque: PropTypes.oneOf([100, 60, 30])
43
+ opaque: PropTypes.oneOf([100, 60, 30, 20])
44
44
 
45
45
  }
46
46
 
package/src/components/constants.js CHANGED
@@ -4,8 +4,14 @@ export const COLORS_BORDERED_BOX = ['main-green', 'error-red', 'white', 'dark-bl
4
4
  export const WHITE = 'white'
5
5
  export const MAIN_DARK_BLUE = 'main-dark-blue'
6
6
  export const MAIN_GREEN = 'main-green'
7
+ export const NONE = 'none'
7
8
  export const SMALL = 'small'
8
9
  export const MEDIUM = 'medium'
9
10
  export const LARGE = 'large'
10
11
  export const EXTRA_LARGE = 'extra-large'
11
12
  export const SIZES = [SMALL, MEDIUM, LARGE, EXTRA_LARGE]
13
+ export const PADDING_SIZES = [NONE, ...SIZES]
14
+ export const BOX_SHADOW = 'box-shadow'
15
+ export const BACKGROUND_COLOR_OPAQUE = 'background-color-opaque'
16
+ export const UNDERLINE = 'underline'
17
+ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, BACKGROUND_COLOR_OPAQUE, UNDERLINE]
package/src/stories/Button.stories.jsx CHANGED
@@ -2,7 +2,7 @@
2
2
  import { faCheck } from '@fortawesome/free-solid-svg-icons'
3
3
  import { useState } from 'react'
4
4
  import Button from '../components/Button'
5
- import { COLORS_BUTTON, SIZES } from '../components/constants'
5
+ import { COLORS_BUTTON, HOVER_EFFECTS_BUTTONS, SIZES } from '../components/constants'
6
6
 
7
7
  export default {
8
8
  title: 'Platformatic/Button',
@@ -41,7 +41,7 @@ export default {
41
41
  },
42
42
  hoverEffect: {
43
43
  type: 'radio',
44
- options: ['hover', 'underline']
44
+ options: HOVER_EFFECTS_BUTTONS
45
45
  },
46
46
  bordered: {
47
47
  type: 'boolean'
package/dist/assets/index.560569d1.css DELETED
@@ -1 +0,0 @@
1
- ._input_1k1s3_1{box-sizing:border-box;display:flex;height:2.5rem;width:100%;justify-content:space-between;border-radius:.375rem;border-width:1px;border-style:solid;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._onFocus_1k1s3_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._onBlur_1k1s3_7{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._fillGreen_1k1s3_10{fill:#21fa90}._fillWhite_1k1s3_13{fill:#fff}._input_1k1s3_1>input:focus{outline:2px solid transparent;outline-offset:2px}._title_1k1s3_19{padding-bottom:1rem;font-size:1.875rem;line-height:2.25rem;font-weight:600;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._bordered_1vk1a_1{box-sizing:border-box;border-radius:.375rem;border-width:1px;border-style:solid}._bordered--main-green_1vk1a_4{--tw-border-opacity: 1;border-color:rgb(33 250 144 / var(--tw-border-opacity))}._bordered--main-dark-blue_1vk1a_7{--tw-border-opacity: 1;border-color:rgb(0 40 61 / var(--tw-border-opacity))}._bordered--error-red_1vk1a_10{--tw-border-opacity: 1;border-color:rgb(250 33 33 / var(--tw-border-opacity))}._bordered--warning-yellow_1vk1a_13{--tw-border-opacity: 1;border-color:rgb(254 185 40 / var(--tw-border-opacity))}._bordered--dark-blue_1vk1a_16{--tw-border-opacity: 1;border-color:rgb(0 52 79 / var(--tw-border-opacity))}._bordered--white_1vk1a_19{--tw-border-opacity: 1;border-color:rgb(255 255 255 / var(--tw-border-opacity))}._error-message_1vk1a_23{position:absolute;bottom:-1.25rem;padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._padded_1vk1a_27{padding:.625rem .5rem}._text--error-red_1vk1a_31{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}._text--white_1vk1a_34{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._text--main-green_1vk1a_37{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}._text--main-dark-blue_1vk1a_40{--tw-text-opacity: 1;color:rgb(0 40 61 / var(--tw-text-opacity))}._background-color-main-green_1vk1a_44{--tw-bg-opacity: 1 !important;background-color:rgb(33 250 144 / var(--tw-bg-opacity))!important}._background-color-light-green_1vk1a_47{--tw-bg-opacity: 1 !important;background-color:rgb(33 241 144 / var(--tw-bg-opacity))!important}._background-color-dark-green_1vk1a_50{--tw-bg-opacity: 1 !important;background-color:rgb(2 120 63 / var(--tw-bg-opacity))!important}._background-color-main-dark-blue_1vk1a_53{--tw-bg-opacity: 1 !important;background-color:rgb(0 40 61 / var(--tw-bg-opacity))!important}._background-color-dark-blue_1vk1a_56{--tw-bg-opacity: 1 !important;background-color:rgb(0 52 79 / var(--tw-bg-opacity))!important}._background-color-light-blue_1vk1a_59{--tw-bg-opacity: 1 !important;background-color:rgb(233 247 255 / var(--tw-bg-opacity))!important}._background-color-white_1vk1a_62{--tw-bg-opacity: 1 !important;background-color:rgb(255 255 255 / var(--tw-bg-opacity))!important}._background-color-error-red_1vk1a_65{--tw-bg-opacity: 1 !important;background-color:rgb(250 33 33 / var(--tw-bg-opacity))!important}._background-color-tertiary-blue_1vk1a_68{--tw-bg-opacity: 1 !important;background-color:rgb(37 136 228 / var(--tw-bg-opacity))!important}._background-color-transparent_1vk1a_71{background-color:transparent}._background-color-opaque-100_1vk1a_74{--tw-bg-opacity: 1 !important}._background-color-opaque-60_1vk1a_77{--tw-bg-opacity: .6 !important}._background-color-opaque-30_1vk1a_80{--tw-bg-opacity: .3 !important}._apply-opacity-30_1vk1a_83{opacity:.3}._padding--small_1vk1a_86{padding:.25rem}._padding--medium_1vk1a_89{padding:.5rem}._padding--large_1vk1a_92{padding:1rem}._padding--extra-large_1vk1a_95{padding:1.5rem}._main-green_s6yir_1>circle,._main-green_s6yir_1>ellipse,._main-green_s6yir_1>rect,._main-green_s6yir_1>line,._main-green_s6yir_1>path{stroke:#21fa90}._error-red_s6yir_10>circle,._error-red_s6yir_10>ellipse,._error-red_s6yir_10>rect,._error-red_s6yir_10>line,._error-red_s6yir_10>path{stroke:#fa2121}._white_s6yir_18>circle,._white_s6yir_18>ellipse,._white_s6yir_18>rect,._white_s6yir_18>line,._white_s6yir_18>path{stroke:#fff}._main-dark-blue_s6yir_25>circle,._main-dark-blue_s6yir_25>ellipse,._main-dark-blue_s6yir_25>rect,._main-dark-blue_s6yir_25>line,._main-dark-blue_s6yir_25>path{stroke:#00283d}._warning-yellow_s6yir_32>circle,._warning-yellow_s6yir_32>ellipse,._warning-yellow_s6yir_32>rect,._warning-yellow_s6yir_32>line,._warning-yellow_s6yir_32>path{stroke:#feb928}._filled-white_s6yir_40{fill:#fff}._filled-error-red_s6yir_43{fill:#fa2121}._filled-main-dark-blue_s6yir_46{fill:#00283d}._filled-main-green_s6yir_49{fill:#21fa90}._filled-warning-yellow_s6yir_52{fill:#feb928}._fill-circle-green_s6yir_56>circle{fill:#fff}._fill-circle-main-dark-blue_s6yir_59>circle{fill:#00283d}._noShrinkForFlex_s6yir_63{flex-shrink:0}._cursorPointer_ydxr1_1{cursor:pointer}._tabbed-container_16gar_1{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity))}._tabs-header_16gar_5{margin-bottom:1rem;display:flex;height:2rem;justify-content:flex-start;text-transform:uppercase;letter-spacing:.25em;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}._tabs-header_16gar_5:hover{cursor:pointer}._tab_16gar_1{margin-left:2rem;margin-right:2rem;min-width:105px;text-align:center;font-size:.875rem;line-height:1.25rem}._tab_16gar_1:first-child{margin-left:0}._tab_16gar_1:last-child{margin-right:0}._selected-tab_16gar_11{font-weight:700;--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity));text-decoration-line:underline;text-underline-offset:8px}._tabs-content_16gar_15{height:100vh}._borderedBox_170cy_1{flex:1 1 0%;row-gap:1rem;border-radius:.375rem;padding:1.25rem;--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}:before,:after{--tw-content: ""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:Montserrat}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%;margin-right:auto;margin-left:auto}@media (min-width: 640px){.container{max-width:640px}}@media (min-width: 768px){.container{max-width:768px}}@media (min-width: 1280px){.container{max-width:1280px}}@media (min-width: 1440px){.container{max-width:1440px}}@media (min-width: 1536px){.container{max-width:1536px}}.relative{position:relative}.m-3{margin:.75rem}.mx-auto{margin-left:auto;margin-right:auto}.my-5{margin-top:1.25rem;margin-bottom:1.25rem}.ml-2{margin-left:.5rem}.ml-4{margin-left:1rem}.mt-4{margin-top:1rem}.flex{display:flex}.inline-flex{display:inline-flex}.h-screen{height:100vh}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.flex-col{flex-direction:column}.gap-10{gap:2.5rem}.gap-y-6{row-gap:1.5rem}.border{border-width:1px}.px-5{padding-left:1.25rem;padding-right:1.25rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-5xl{font-size:3rem;line-height:1}.text-6xl{font-size:3.75rem;line-height:1}.text-2xl{font-size:1.5rem;line-height:2rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-error-red{--tw-text-opacity: 1;color:rgb(250 33 33 / var(--tw-text-opacity))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity))}.text-main-green{--tw-text-opacity: 1;color:rgb(33 250 144 / var(--tw-text-opacity))}.text-dark-green{--tw-text-opacity: 1;color:rgb(2 120 63 / var(--tw-text-opacity))}.underline{text-decoration-line:underline}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}@font-face{font-family:Montserrat;src:url(/assets/Montserrat-Regular.dcfe8df2.ttf) format("truetype");font-weight:400;font-style:normal}:root{--tw-bg-opacity: 1;background-color:rgb(0 40 61 / var(--tw-bg-opacity));font-family:Montserrat}a{--tw-text-opacity: 1;color:rgb(37 136 228 / var(--tw-text-opacity))}input{background-color:transparent}.hover\:cursor-pointer:hover{cursor:pointer}