@platformatic/ui-components 0.1.65 → 0.1.67

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/InfoBox.jsx +4 -2
  13. package/src/components/Sidebar.jsx +40 -23
  14. package/src/components/Sidebar.module.css +7 -6
  15. package/src/components/Status.jsx +2 -2
  16. package/src/components/Tag.jsx +1 -1
  17. package/src/components/constants.js +6 -0
  18. package/src/stories/Button.stories.jsx +2 -2
  19. package/src/stories/Sidebar.stories.jsx +2 -1
  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.65",
4
+ "version": "0.1.67",
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/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,23 +1,29 @@
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,
15
19
  onClickAdd,
16
20
  addTitle,
17
- onClickSettings
21
+ onClickSettings,
22
+ disableClickAdd
18
23
  } = props
19
24
  const [collapsed, setCollapsed] = useState(false)
20
25
  const [selectedItem, setSelectedItem] = useState(null)
26
+ const disabledCreateButton = disableClickAdd ? styles.disabled : ''
21
27
 
22
28
  function onClickItemSelected (item) {
23
29
  setSelectedItem(item.id)
@@ -33,13 +39,15 @@ function Sidebar (props) {
33
39
  {collapsed
34
40
  ? (
35
41
  <>
36
- <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(false) }}>
37
- <PlatformaticIcon
38
- iconName='CircleArrowRightIcon'
39
- color='white'
40
- size='medium'
41
- />
42
- </button>
42
+ <ButtonFullRounded
43
+ className={styles.buttonCollapse}
44
+ iconName='CircleArrowRightIcon'
45
+ iconSize={MEDIUM}
46
+ iconColor={WHITE}
47
+ hoverEffect={BACKGROUND_COLOR_OPAQUE}
48
+ onClick={() => { setCollapsed(false) }}
49
+ bordered={false}
50
+ />
43
51
  <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
44
52
  <Icons.WorkspaceStaticIcon color='white' size='large' />
45
53
  </button>
@@ -56,13 +64,15 @@ function Sidebar (props) {
56
64
  )
57
65
  : (
58
66
  <>
59
- <button type='button' className={styles.buttonCollapse} onClick={() => { setCollapsed(true) }}>
60
- <PlatformaticIcon
61
- iconName='CircleArrowLeftIcon'
62
- color='white'
63
- size='medium'
64
- />
65
- </button>
67
+ <ButtonFullRounded
68
+ className={styles.buttonCollapse}
69
+ iconName='CircleArrowLeftIcon'
70
+ iconSize={MEDIUM}
71
+ iconColor={WHITE}
72
+ hoverEffect={BACKGROUND_COLOR_OPAQUE}
73
+ onClick={() => { setCollapsed(true) }}
74
+ bordered={false}
75
+ />
66
76
  <div className={styles.title} data-testid='lateral-bar-title'>
67
77
  {title}
68
78
  </div>
@@ -87,13 +97,13 @@ function Sidebar (props) {
87
97
  </React.Fragment>
88
98
  )
89
99
  })}
90
- {/* <Button label='Add' buttonClass='transparent' icon={faPlus} color='white' size='small' inClick={onClickAdd}/> */}
91
- <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed}`} onClick={onClickAdd}>
100
+ <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed} ${disabledCreateButton}`} onClick={onClickAdd} disabled={disableClickAdd}>
92
101
  <PlatformaticIcon
93
102
  iconName='CircleAddIcon'
94
103
  color='white'
95
104
  size='medium'
96
105
  tip={addTitle}
106
+ onClick={null}
97
107
  />
98
108
  {!collapsed && <span className={styles.item}>{addTitle}</span>}
99
109
  </button>
@@ -101,9 +111,7 @@ function Sidebar (props) {
101
111
  <HorizontalSeparator marginBottom='2' marginTop='2' />
102
112
 
103
113
  <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>
114
+ <Button label={labelButtonSettings} color={WHITE} onClick={onClickSettings} platformaticIcon={{ iconName: 'GearIcon', color: WHITE }} fullWidth bold size={MEDIUM} hoverEffect={BACKGROUND_COLOR_OPAQUE} />
107
115
  </div>
108
116
  </>
109
117
  )}
@@ -116,6 +124,10 @@ Sidebar.propTypes = {
116
124
  * title
117
125
  */
118
126
  title: PropTypes.string,
127
+ /**
128
+ * title
129
+ */
130
+ labelButtonSettings: PropTypes.string,
119
131
  /**
120
132
  * defaultSelected
121
133
  */
@@ -148,18 +160,23 @@ Sidebar.propTypes = {
148
160
  /**
149
161
  * Apply onClickSettings: function called clicking on Settings button
150
162
  */
151
- onClickSettings: PropTypes.func
152
-
163
+ onClickSettings: PropTypes.func,
164
+ /**
165
+ * disableClickAdd
166
+ */
167
+ disableClickAdd: PropTypes.bool
153
168
  }
154
169
 
155
170
  Sidebar.defaultProps = {
156
171
  title: '',
172
+ labelButtonSettings: 'Settings',
157
173
  defaultSelected: null,
158
174
  onClickItemSelectedParent: () => {},
159
175
  items: [],
160
176
  onClickAdd: () => {},
161
177
  addTitle: 'Add',
162
- onClickSettings: () => {}
178
+ onClickSettings: () => {},
179
+ disableClickAdd: false
163
180
  }
164
181
 
165
182
  export default Sidebar
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,11 +23,13 @@
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
- @apply flex items-center justify-start border-0 w-full pt-1 pb-4;
29
+ @apply flex items-center justify-start border-0 w-full pt-1 pb-4 cursor-pointer;
30
+ }
31
+ .disabled {
32
+ @apply opacity-30 cursor-default;
32
33
  }
33
34
  .buttonItemCollapsed {
34
35
  @apply w-auto;
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/src/stories/Sidebar.stories.jsx CHANGED
@@ -57,7 +57,8 @@ FullSidebar.args = {
57
57
  title: 'Sidebar bar Full',
58
58
  addTitle: 'Create',
59
59
  onClickItemSelected: (index) => alert('selected: ' + index),
60
- onClickSettings: () => alert('settings')
60
+ onClickSettings: () => alert('settings'),
61
+ disableClickAdd: true
61
62
  }
62
63
 
63
64
  export const AlreadySelected = Template.bind({})
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}