@platformatic/ui-components 0.1.99 → 0.1.100
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.
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.
|
|
7
|
+
<script type="module" crossorigin src="/assets/index.793edd0a.js"></script>
|
|
8
8
|
<link rel="stylesheet" href="/assets/index.bf6a37ab.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -51,7 +51,7 @@ function InputWithSeparator ({ placeholder, name, borderColor, errorMessage, onC
|
|
|
51
51
|
|
|
52
52
|
function renderChunk (chunk, index) {
|
|
53
53
|
return (
|
|
54
|
-
<BorderedBox color={TRANSPARENT} backgroundColor={MAIN_DARK_BLUE}
|
|
54
|
+
<BorderedBox color={TRANSPARENT} backgroundColor={MAIN_DARK_BLUE} backgroundColorOpacity={20} classes={chunkClasses} key={index}>
|
|
55
55
|
<div className={styles.chunkContent}>
|
|
56
56
|
<span className={styles.chunkText}>{chunk}</span>
|
|
57
57
|
<ButtonFullRounded
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import PropTypes from 'prop-types'
|
|
3
|
+
import styles from './Icons.module.css'
|
|
4
|
+
import { COLORS_ICON, EXTRA_LARGE, SIZES } from '../constants'
|
|
5
|
+
|
|
6
|
+
const MetricsLoadingIcon = ({ color, size }) => {
|
|
7
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
8
|
+
const filledClassName = styles[`filled-${color}`]
|
|
9
|
+
|
|
10
|
+
let icon = <></>
|
|
11
|
+
|
|
12
|
+
switch (size) {
|
|
13
|
+
case EXTRA_LARGE:
|
|
14
|
+
icon = (
|
|
15
|
+
<svg
|
|
16
|
+
width={104}
|
|
17
|
+
height={104}
|
|
18
|
+
viewBox='0 0 104 104'
|
|
19
|
+
fill='none'
|
|
20
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
21
|
+
className={className}
|
|
22
|
+
>
|
|
23
|
+
<rect x={28} y={22} width={12} height={42} rx={1.2} stroke='none' strokeWidth={3} />
|
|
24
|
+
<rect x={52} y={40} width={12} height={24} rx={1.2} stroke='none' strokeWidth={3} />
|
|
25
|
+
<rect x={76} y={4} width={12} height={60} rx={1.2} stroke='none' strokeWidth={3} />
|
|
26
|
+
<path d='M16 4V76H88' stroke='none' strokeWidth={3} strokeLinecap='round' strokeLinejoin='round' />
|
|
27
|
+
<rect x={4} y={84} width={96} height={16} rx={8} stroke='none' strokeWidth={3} />
|
|
28
|
+
<rect x={8} y={88} width={68} height={8} rx={4} fill='none' className={filledClassName} />
|
|
29
|
+
</svg>
|
|
30
|
+
)
|
|
31
|
+
break
|
|
32
|
+
|
|
33
|
+
default:
|
|
34
|
+
break
|
|
35
|
+
}
|
|
36
|
+
return icon
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
MetricsLoadingIcon.propTypes = {
|
|
40
|
+
/**
|
|
41
|
+
* color of text, icon and borders
|
|
42
|
+
*/
|
|
43
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
44
|
+
/**
|
|
45
|
+
* Size
|
|
46
|
+
*/
|
|
47
|
+
size: PropTypes.oneOf(SIZES)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
MetricsLoadingIcon.defaultProps = {
|
|
51
|
+
color: 'main-dark-blue',
|
|
52
|
+
size: 'medium'
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export default MetricsLoadingIcon
|
|
@@ -51,6 +51,7 @@ import LiveIcon from './LiveIcon'
|
|
|
51
51
|
import LoadingAppIcon from './LoadingAppIcon'
|
|
52
52
|
import LogOutIcon from './LogOutIcon'
|
|
53
53
|
import MetricsIcon from './MetricsIcon'
|
|
54
|
+
import MetricsLoadingIcon from './MetricsLoadingIcon'
|
|
54
55
|
import OrganizationIcon from './OrganizationIcon'
|
|
55
56
|
import PlayIcon from './PlayIcon'
|
|
56
57
|
import PullRequestIcon from './PullRequestIcon'
|
|
@@ -138,6 +139,7 @@ export default {
|
|
|
138
139
|
LoadingAppIcon,
|
|
139
140
|
LogOutIcon,
|
|
140
141
|
MetricsIcon,
|
|
142
|
+
MetricsLoadingIcon,
|
|
141
143
|
OrganizationIcon,
|
|
142
144
|
PlayIcon,
|
|
143
145
|
PullRequestIcon,
|