@platformatic/ui-components 0.6.8 → 0.6.10

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 (9) hide show
  1. package/.nvmrc +1 -1
  2. package/dist/assets/index-ClhaEtyn.js +40 -0
  3. package/dist/index.html +1 -1
  4. package/package.json +1 -1
  5. package/src/components/Tooltip.jsx +6 -1
  6. package/src/components/icons/CheckListReviewIcon.jsx +118 -0
  7. package/src/components/icons/index.js +2 -0
  8. package/src/stories/Tooltip.stories.jsx +3 -2
  9. package/dist/assets/index-Bn4IkzM3.js +0 -40
package/dist/index.html CHANGED
@@ -4,7 +4,7 @@
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-Bn4IkzM3.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-ClhaEtyn.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-CeMo0DvI.css">
9
9
  </head>
10
10
  <body>
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.6.8",
4
+ "version": "0.6.10",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Tooltip.jsx CHANGED
@@ -5,6 +5,7 @@ import { useEffect, useRef, useState } from 'react'
5
5
  import { DIRECTIONS, DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP } from './constants'
6
6
 
7
7
  function Tooltip ({
8
+ immediateActive = true,
8
9
  direction = DIRECTION_TOP,
9
10
  visible = false,
10
11
  activeDependsOnVisible = false,
@@ -16,7 +17,7 @@ function Tooltip ({
16
17
  }) {
17
18
  let timeout
18
19
  // const [active, setActive] = useState(activeDependsOnVisible ? visible : false)
19
- const [active, setActive] = useState(true)
20
+ const [active, setActive] = useState(immediateActive)
20
21
  let componentClassName = tooltipClassName || styles.tooltipTipBaseClass
21
22
  componentClassName += ` ${styles.tooltipTip} ` + styles[`${direction}`]
22
23
  const fixedStyle = { top: '0px', left: '0px' }
@@ -111,6 +112,10 @@ Tooltip.propTypes = {
111
112
  * visible
112
113
  */
113
114
  visible: PropTypes.bool,
115
+ /**
116
+ * immediateActive
117
+ */
118
+ immediateActive: PropTypes.bool,
114
119
  /**
115
120
  * activeDependsOnVisible
116
121
  */
package/src/components/icons/CheckListReviewIcon.jsx ADDED
@@ -0,0 +1,118 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
+
6
+ const CheckListReviewIcon = ({
7
+ color = MAIN_DARK_BLUE,
8
+ size = MEDIUM,
9
+ disabled = false,
10
+ inactive = false
11
+ }) => {
12
+ let className = `${styles.svgClassName} ` + styles[`${color}`]
13
+ if (disabled) {
14
+ className += ` ${styles.iconDisabled}`
15
+ }
16
+ if (inactive) {
17
+ className += ` ${styles.iconInactive}`
18
+ }
19
+ let icon = <></>
20
+ const filledClassName = styles[`filled-${color}`]
21
+
22
+ switch (size) {
23
+ case SMALL:
24
+ icon = (
25
+ <svg
26
+ width={16}
27
+ height={16}
28
+ viewBox='0 0 16 16'
29
+ fill='none'
30
+ xmlns='http://www.w3.org/2000/svg'
31
+ className={className}
32
+ >
33
+ <path d='M11 3H12C12.5523 3 13 3.44772 13 4V9M5 3H4C3.44772 3 3 3.44771 3 4V13C3 13.5523 3.44772 14 4 14H8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
34
+ <rect x='5' y='2' width='6' height='2' rx='1' stroke='none' />
35
+ <path d='M6 6L11 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
36
+ <path d='M6 11L7 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
37
+ <path d='M6 8.5L8 8.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
38
+ <circle cx='2.5' cy='2.5' r='2.5' transform='matrix(-1 0 0 1 12 8)' stroke='none' />
39
+ <path d='M11.5 12.5L13.5 14' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
40
+ <circle cx='4.5' cy='6' r='0.5' className={filledClassName} />
41
+ <circle cx='4.5' cy='8.5' r='0.5' className={filledClassName} />
42
+ <circle cx='4.5' cy='11' r='0.5' className={filledClassName} />
43
+ </svg>
44
+ )
45
+ break
46
+ case MEDIUM:
47
+ icon = (
48
+ <svg
49
+ width={24}
50
+ height={24}
51
+ viewBox='0 0 24 24'
52
+ fill='none'
53
+ xmlns='http://www.w3.org/2000/svg'
54
+ className={className}
55
+ >
56
+ <path d='M16.5 4.5H18.5C19.0523 4.5 19.5 4.94772 19.5 5.5V13.5M7.5 4.5H5.5C4.94772 4.5 4.5 4.94772 4.5 5.5V20C4.5 20.5523 4.94772 21 5.5 21H12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
57
+ <rect x='7.5' y='3' width='9' height='3' rx='1' stroke='none' strokeWidth={1.5} />
58
+ <path d='M9 9L16.5 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
59
+ <path d='M9 16.5L10.5 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
60
+ <path d='M9 12.75L12 12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
61
+ <circle cx='3.75' cy='3.75' r='3.75' transform='matrix(-1 0 0 1 18 12)' stroke='none' strokeWidth={1.5} />
62
+ <path d='M17.25 18.75L20.25 21' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
63
+ <circle cx='6.75' cy='9' r='0.75' className={filledClassName} />
64
+ <circle cx='6.75' cy='12.75' r='0.75' className={filledClassName} />
65
+ <circle cx='6.75' cy='16.5' r='0.75' className={filledClassName} />
66
+ </svg>
67
+ )
68
+ break
69
+ case LARGE:
70
+ icon = (
71
+ <svg
72
+ width={40}
73
+ height={40}
74
+ viewBox='0 0 40 40'
75
+ fill='none'
76
+ xmlns='http://www.w3.org/2000/svg'
77
+ className={className}
78
+ >
79
+ <path d='M27.5 7.5H31.5C32.0523 7.5 32.5 7.94772 32.5 8.5V22.5M12.5 7.5H8.5C7.94772 7.5 7.5 7.94772 7.5 8.5V34C7.5 34.5523 7.94772 35 8.5 35H20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
80
+ <rect x='12.5' y='5' width='15' height='5' rx='1' stroke='none' strokeWidth={2} />
81
+ <path d='M15 15L27.5 15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
82
+ <path d='M15 27.5L17.5 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
83
+ <path d='M15 21.25L20 21.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
84
+ <circle cx='6.25' cy='6.25' r='6.25' transform='matrix(-1 0 0 1 30 20)' stroke='none' strokeWidth={2} />
85
+ <path d='M28.75 31.25L33.75 35' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
86
+ <circle cx='11.25' cy='15' r='1.25' className={filledClassName} />
87
+ <circle cx='11.25' cy='21.25' r='1.25' className={filledClassName} />
88
+ <circle cx='11.25' cy='27.5' r='1.25' className={filledClassName} />
89
+ </svg>
90
+ )
91
+ break
92
+
93
+ default:
94
+ break
95
+ }
96
+ return icon
97
+ }
98
+
99
+ CheckListReviewIcon.propTypes = {
100
+ /**
101
+ * color of text, icon and borders
102
+ */
103
+ color: PropTypes.oneOf(COLORS_ICON),
104
+ /**
105
+ * Size
106
+ */
107
+ size: PropTypes.oneOf(SIZES),
108
+ /**
109
+ * disabled
110
+ */
111
+ disabled: PropTypes.bool,
112
+ /**
113
+ * inactive
114
+ */
115
+ inactive: PropTypes.bool
116
+ }
117
+
118
+ export default CheckListReviewIcon
package/src/components/icons/index.js CHANGED
@@ -33,6 +33,7 @@ import CalendarIcon from './CalendarIcon'
33
33
  import Calendar1DayIcon from './Calendar1DayIcon'
34
34
  import Calendar7DaysIcon from './Calendar7DaysIcon'
35
35
  import CheckListIcon from './CheckListIcon'
36
+ import CheckListReviewIcon from './CheckListReviewIcon'
36
37
  import CircleAddIcon from './CircleAddIcon'
37
38
  import CircleArrowLeftIcon from './CircleArrowLeftIcon'
38
39
  import CircleArrowRightIcon from './CircleArrowRightIcon'
@@ -202,6 +203,7 @@ export default {
202
203
  Calendar1DayIcon,
203
204
  Calendar7DaysIcon,
204
205
  CheckListIcon,
206
+ CheckListReviewIcon,
205
207
  CircleAddIcon,
206
208
  CircleArrowLeftIcon,
207
209
  CircleArrowRightIcon,
package/src/stories/Tooltip.stories.jsx CHANGED
@@ -90,6 +90,7 @@ export const TooltipBase = TemplateWithButton.bind({})
90
90
  // More on args: https://storybook.js.org/docs/react/writing-stories/args
91
91
  TooltipBase.args = {
92
92
  content: <span>I'm a tooltip over a button</span>,
93
- delay: 100,
94
- offset: 44
93
+ delay: 0,
94
+ offset: 14,
95
+ immediateActive: false
95
96
  }