@platformatic/ui-components 0.7.11 → 0.7.12

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 (11) hide show
  1. package/dist/assets/index-TVRb_Qow.css +1 -0
  2. package/dist/assets/index-eoI4Uq2D.js +40 -0
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/components/BorderedBox.jsx +41 -10
  6. package/src/components/Common.module.css +33 -2
  7. package/src/components/constants.js +1 -0
  8. package/src/stories/BorderedBox.stories.jsx +11 -1
  9. package/tailwind.config.cjs +1 -0
  10. package/dist/assets/index-DGOpiKCv.js +0 -40
  11. package/dist/assets/index-DVghlxYb.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-DGOpiKCv.js"></script>
8
- <link rel="stylesheet" crossorigin href="/assets/index-DVghlxYb.css">
7
+ <script type="module" crossorigin src="/assets/index-eoI4Uq2D.js"></script>
8
+ <link rel="stylesheet" crossorigin href="/assets/index-TVRb_Qow.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
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.7.11",
4
+ "version": "0.7.12",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/BorderedBox.jsx CHANGED
@@ -1,27 +1,58 @@
1
1
  'use strict'
2
+ import React, { useEffect, useState } from 'react'
2
3
  import PropTypes from 'prop-types'
3
4
  import styles from './BorderedBox.module.css'
4
5
  import commonStyles from './Common.module.css'
5
- import React from 'react'
6
- import { COLORS_BORDERED_BOX, DARK_BLUE, MAIN_GREEN, OPACITIES, OPACITY_100 } from './constants'
6
+ import { COLORS_BORDERED_BOX, DARK_BLUE, TRANSPARENT, OPACITIES, OPACITY_100 } from './constants'
7
7
  function BorderedBox ({
8
8
  classes = '',
9
- color = MAIN_GREEN,
9
+ color = TRANSPARENT,
10
10
  children = null,
11
11
  backgroundColor = DARK_BLUE,
12
12
  backgroundColorOpacity = OPACITY_100,
13
13
  borderColorOpacity = OPACITY_100,
14
14
  clickable = false,
15
- onClick = () => {}
15
+ onClick = () => {},
16
+ internalOverHandling = false,
17
+ backgroundColorOver = null,
18
+ backgroundColorOpacityOver = null,
19
+ borderColorOpacityOver = null
16
20
  }) {
17
- const borderColor = commonStyles[`bordered--${color}-${borderColorOpacity}`]
18
- const styledBackgroundColor = commonStyles[`background-color-${backgroundColor}`]
19
- const opacity = commonStyles[`background-color-opaque-${backgroundColorOpacity}`]
20
- let className = `${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor} ${styledBackgroundColor} ${opacity}`
21
- className += clickable ? ` ${styles.clickable}` : ''
21
+ const [over, setOver] = useState(false)
22
+ const [className, setClassName] = useState(normalClassName())
23
+
24
+ useEffect(() => {
25
+ if (over) {
26
+ setClassName(overClassName())
27
+ } else {
28
+ setClassName(normalClassName())
29
+ }
30
+ }, [over])
31
+
32
+ function normalClassName () {
33
+ const borderColor = color === TRANSPARENT ? commonStyles[`bordered--${color}`] : commonStyles[`bordered--${color}-${borderColorOpacity}`]
34
+ const styledBackgroundColor = commonStyles[`background-color-${backgroundColor}`]
35
+ const opacity = commonStyles[`background-color-opaque-${backgroundColorOpacity}`]
36
+ let className = `${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor} ${styledBackgroundColor} ${opacity}`
37
+ className += clickable ? ` ${styles.clickable}` : ''
38
+ return className
39
+ }
40
+
41
+ function overClassName () {
42
+ const borderColor = color === TRANSPARENT ? commonStyles[`bordered--${color}`] : commonStyles[`bordered--${color}-${borderColorOpacityOver}`]
43
+ const styledBackgroundColor = commonStyles[`background-color-${backgroundColorOver}`]
44
+ const opacity = commonStyles[`background-color-opaque-${backgroundColorOpacityOver}`]
45
+ let className = `${styles.borderedBox} ${commonStyles.bordered} ${classes} ${borderColor} ${styledBackgroundColor} ${opacity}`
46
+ className += clickable ? ` ${styles.clickable}` : ''
47
+ return className
48
+ }
22
49
 
23
50
  return (
24
- <div className={className} onClick={() => clickable ? onClick() : {}}>
51
+ <div
52
+ className={className}
53
+ onMouseOver={() => internalOverHandling && setOver(true)} onMouseLeave={() => internalOverHandling && setOver(false)}
54
+ onClick={() => clickable ? onClick() : {}}
55
+ >
25
56
  {children}
26
57
  </div>
27
58
  )
package/src/components/Common.module.css CHANGED
@@ -22,6 +22,12 @@
22
22
  .bordered--white {
23
23
  @apply border-white;
24
24
  }
25
+ .bordered--rich-black {
26
+ @apply border-rich-black;
27
+ }
28
+ .bordered--transparent {
29
+ @apply border-none;
30
+ }
25
31
  .bordered--main-green-100 {
26
32
  @apply border-main-green/100;
27
33
  }
@@ -43,6 +49,9 @@
43
49
  .bordered--white-100 {
44
50
  @apply border-white/100;
45
51
  }
52
+ .bordered--rich-black-100 {
53
+ @apply border-rich-black/100;
54
+ }
46
55
  .bordered--main-green-70 {
47
56
  @apply border-main-green/70;
48
57
  }
@@ -64,6 +73,9 @@
64
73
  .bordered--white-70 {
65
74
  @apply border-white/70;
66
75
  }
76
+ .bordered--rich-black-70 {
77
+ @apply border-rich-black/70;
78
+ }
67
79
  .bordered--main-green-30 {
68
80
  @apply border-main-green/30;
69
81
  }
@@ -82,6 +94,9 @@
82
94
  .bordered--white-30 {
83
95
  @apply border-white/30;
84
96
  }
97
+ .bordered--rich-black-30 {
98
+ @apply border-rich-black/30;
99
+ }
85
100
  .bordered--tertiary-blue-30 {
86
101
  @apply border-tertiary-blue/30;
87
102
  }
@@ -103,6 +118,9 @@
103
118
  .bordered--white-20 {
104
119
  @apply border-white/20;
105
120
  }
121
+ .bordered--rich-black-20 {
122
+ @apply border-rich-black/20;
123
+ }
106
124
  .bordered--tertiary-blue-20 {
107
125
  @apply border-tertiary-blue/20;
108
126
  }
@@ -112,6 +130,9 @@
112
130
  .bordered--white-15 {
113
131
  @apply border-white/15;
114
132
  }
133
+ .bordered--rich-black-15 {
134
+ @apply border-rich-black/15;
135
+ }
115
136
  .bordered--tertiary-blue-15 {
116
137
  @apply border-tertiary-blue/15;
117
138
  }
@@ -121,11 +142,12 @@
121
142
  .bordered--white-10 {
122
143
  @apply border-white/10;
123
144
  }
145
+ .bordered--rich-black-10 {
146
+ @apply border-rich-black/10;
147
+ }
124
148
  .bordered--tertiary-blue-10 {
125
149
  @apply border-tertiary-blue/10;
126
150
  }
127
-
128
-
129
151
  .error-message {
130
152
  @apply absolute -bottom-5 text-error-red text-xs px-2 w-max;
131
153
  }
@@ -222,6 +244,9 @@
222
244
  .background-color-rich-black {
223
245
  @apply bg-rich-black ;
224
246
  }
247
+ .background-color-night {
248
+ @apply bg-night ;
249
+ }
225
250
  .background-color-anti-flash-white {
226
251
  @apply bg-anti-flash-white ;
227
252
  }
@@ -300,6 +325,9 @@
300
325
  .hover-background-color-opaque-rich-black{
301
326
  @apply hover:bg-rich-black hover:bg-opacity-15;
302
327
  }
328
+ .hover-background-color-opaque-night{
329
+ @apply hover:bg-night hover:bg-opacity-15;
330
+ }
303
331
  .selected-background-color-main-green {
304
332
  @apply !bg-main-green bg-opacity-15 !important;
305
333
  }
@@ -321,6 +349,9 @@
321
349
  .selected-background-color-rich-black {
322
350
  @apply !bg-rich-black bg-opacity-15;
323
351
  }
352
+ .selected-background-color-night {
353
+ @apply !bg-night bg-opacity-15;
354
+ }
324
355
  .selected-background-color-white{
325
356
  @apply !bg-white bg-opacity-15;
326
357
  }
package/src/components/constants.js CHANGED
@@ -10,6 +10,7 @@ export const TERTIARY_BLUE = 'tertiary-blue'
10
10
  export const ERROR_RED = 'error-red'
11
11
  export const WARNING_YELLOW = 'warning-yellow'
12
12
  export const RICH_BLACK = 'rich-black'
13
+ export const NIGHT = 'night'
13
14
  export const ANTI_FLASH_WHITE = 'anti-flash-white'
14
15
  export const FIRE_ENGINE_RED = 'fire-engine-red'
15
16
  export const ALTERNATE_RICH_BLACK = 'alternate-rich-black'
package/src/stories/BorderedBox.stories.jsx CHANGED
@@ -1,6 +1,6 @@
1
1
  'use strict'
2
2
  import BorderedBox from '../components/BorderedBox'
3
- import { COLORS_BORDERED_BOX } from '../components/constants'
3
+ import { COLORS_BORDERED_BOX, ERROR_RED, OPACITY_30, OPACITY_100, TERTIARY_BLUE, WHITE } from '../components/constants'
4
4
  export default {
5
5
  title: 'Platformatic/BorderedBox',
6
6
  component: BorderedBox,
@@ -33,3 +33,13 @@ export const White = Template.bind({})
33
33
  White.args = {
34
34
  color: 'white'
35
35
  }
36
+
37
+ export const HandlingOver = Template.bind({})
38
+ HandlingOver.args = {
39
+ color: WHITE,
40
+ backgroundColor: ERROR_RED,
41
+ borderColorOpacity: OPACITY_30,
42
+ internalOverHandling: true,
43
+ borderColorOpacityOver: OPACITY_100,
44
+ backgroundColorOver: TERTIARY_BLUE
45
+ }
package/tailwind.config.cjs CHANGED
@@ -44,6 +44,7 @@ module.exports = {
44
44
  transparent: 'transparent',
45
45
  'warning-yellow': '#FEB928',
46
46
  'rich-black': '#00050B',
47
+ night: '#0F1114',
47
48
  'electric-purple': '#C61BE2',
48
49
  'anti-flash-white': '#EDEDED',
49
50
  'fire-engine-red': '#D71919',