@platformatic/ui-components 0.13.2 → 0.13.4
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/assets/index-CvMjKwW6.js +49 -0
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/constants.js +1 -1
- package/src/components/icons/ScheduledJobsAppIcon.jsx +104 -0
- package/src/components/icons/SuspendIcon.jsx +93 -0
- package/src/components/icons/index.js +83 -79
- package/src/stories/icons/Icons.stories.jsx +37 -1
- package/dist/assets/index-DES2qWoG.js +0 -49
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-CvMjKwW6.js"></script>
|
|
8
8
|
<link rel="stylesheet" crossorigin href="/assets/index-DMinbJlj.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -40,7 +40,7 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, DULLS_BACKGROUND_COLOR, UNDERL
|
|
|
40
40
|
export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
|
|
41
41
|
export const BUTTON_BACKGROUNDS_COLOR_HOVER = [ANTI_FLASH_WHITE, FIRE_ENGINE_RED, ALTERNATE_RICH_BLACK]
|
|
42
42
|
|
|
43
|
-
export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE,
|
|
43
|
+
export const COLORS_ICON = [RICH_BLACK, MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW, TERTIARY_BLUE, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
|
|
44
44
|
export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT, RICH_BLACK, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
|
|
45
45
|
export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT, LIGHT_BLUE, TERTIARY_BLUE, RICH_BLACK, BLACK_RUSSIAN, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
|
|
46
46
|
|
|
@@ -0,0 +1,104 @@
|
|
|
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 ScheduledJobsAppIcon = ({
|
|
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
|
+
|
|
21
|
+
switch (size) {
|
|
22
|
+
case SMALL:
|
|
23
|
+
icon = (
|
|
24
|
+
<svg
|
|
25
|
+
width={16}
|
|
26
|
+
height={16}
|
|
27
|
+
viewBox='0 0 16 16'
|
|
28
|
+
fill='none'
|
|
29
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
30
|
+
className={className}
|
|
31
|
+
>
|
|
32
|
+
<path d='M14 8.5L10.5 6.75L7 8.5M14 8.5V12.25L10.5 14M14 8.5L10.5 10.25M10.5 14L7 12.25V8.5M10.5 14V10.25M7 8.5L10.5 10.25' stroke='white' strokeLinejoin='round' />
|
|
33
|
+
<path d='M5.79744 11C3.70017 11 2 9.2952 2 7.19227C2 5.08934 3.70017 3.38458 5.79744 3.38458C7.40205 3.38458 8.77421 4.3825 9.33032 5.79316' stroke='white' strokeLinecap='round' />
|
|
34
|
+
<path d='M5.79739 3.38462V2M4.4165 2H7.17828' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
|
|
35
|
+
<path d='M8.73792 4.27069L9.23166 3.78676M8.74902 3.29169L9.71429 4.28182' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
|
|
36
|
+
<path d='M3.00073 4.32292L2.52032 3.82567M2.02441 4.30737L3.01623 3.34397' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
|
|
37
|
+
<path d='M7.00592 5.46146L5.79758 7.53839' stroke='white' strokeLinecap='round' strokeLinejoin='round' />
|
|
38
|
+
</svg>
|
|
39
|
+
)
|
|
40
|
+
break
|
|
41
|
+
case MEDIUM:
|
|
42
|
+
icon = (
|
|
43
|
+
<svg
|
|
44
|
+
width={24}
|
|
45
|
+
height={24}
|
|
46
|
+
viewBox='0 0 24 24'
|
|
47
|
+
fill='none'
|
|
48
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
49
|
+
className={className}
|
|
50
|
+
>
|
|
51
|
+
<path d='M21 12.75L15.75 10.125L10.5 12.75M21 12.75V18.375L15.75 21M21 12.75L15.75 15.375M15.75 21L10.5 18.375V12.75M15.75 21V15.375M10.5 12.75L15.75 15.375' stroke='white' strokeWidth={1.5} strokeLinejoin='round' />
|
|
52
|
+
<path d='M8.69616 16.5C5.55026 16.5 3 13.9428 3 10.7884C3 7.63405 5.55026 5.0769 8.69616 5.0769C11.1031 5.0769 13.1613 6.57378 13.9955 8.68977' stroke='white' strokeWidth={1.5} strokeLinecap='round' />
|
|
53
|
+
<path d='M8.69584 5.07692V3M6.62451 3H10.7672' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
54
|
+
<path d='M13.1064 6.40601L13.847 5.6801M13.123 4.9375L14.571 6.42271' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
55
|
+
<path d='M4.50109 6.48444L3.78048 5.73857M3.03662 6.46112L4.52434 5.01602' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
56
|
+
<path d='M10.5086 8.19219L8.69612 11.3076' stroke='white' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
|
|
57
|
+
</svg>
|
|
58
|
+
)
|
|
59
|
+
break
|
|
60
|
+
case LARGE:
|
|
61
|
+
icon = (
|
|
62
|
+
<svg
|
|
63
|
+
width={40}
|
|
64
|
+
height={40}
|
|
65
|
+
viewBox='0 0 40 40'
|
|
66
|
+
fill='none'
|
|
67
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
68
|
+
className={className}
|
|
69
|
+
>
|
|
70
|
+
<path d='M35 21.25L26.25 16.875L17.5 21.25M35 21.25V30.625L26.25 35M35 21.25L26.25 25.625M26.25 35L17.5 30.625V21.25M26.25 35V25.625M17.5 21.25L26.25 25.625' stroke='white' strokeWidth={2} strokeLinejoin='round' />
|
|
71
|
+
<path d='M14.4936 27.4999C9.25043 27.4999 5 23.238 5 17.9807C5 12.7234 9.25043 8.46149 14.4936 8.46149C18.5051 8.46149 21.9355 10.9563 23.3258 14.4829' stroke='white' strokeWidth={2} strokeLinecap='round' />
|
|
72
|
+
<path d='M14.4932 8.46154V5M11.041 5H17.9454' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
73
|
+
<path d='M21.8443 10.6766L23.0787 9.4668M21.8721 8.22913L24.2852 10.7045' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
74
|
+
<path d='M7.50181 10.8074L6.3008 9.56424M5.06104 10.7685L7.54057 8.35999' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
75
|
+
<path d='M17.5146 13.6537L14.4937 18.846' stroke='white' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
|
|
76
|
+
</svg>
|
|
77
|
+
)
|
|
78
|
+
break
|
|
79
|
+
default:
|
|
80
|
+
break
|
|
81
|
+
}
|
|
82
|
+
return icon
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
ScheduledJobsAppIcon.propTypes = {
|
|
86
|
+
/**
|
|
87
|
+
* color of text, icon and borders
|
|
88
|
+
*/
|
|
89
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
90
|
+
/**
|
|
91
|
+
* Size
|
|
92
|
+
*/
|
|
93
|
+
size: PropTypes.oneOf(SIZES),
|
|
94
|
+
/**
|
|
95
|
+
* disabled
|
|
96
|
+
*/
|
|
97
|
+
disabled: PropTypes.bool,
|
|
98
|
+
/**
|
|
99
|
+
* inactive
|
|
100
|
+
*/
|
|
101
|
+
inactive: PropTypes.bool
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
export default ScheduledJobsAppIcon
|
|
@@ -0,0 +1,93 @@
|
|
|
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 SuspendIcon = ({
|
|
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
|
+
|
|
21
|
+
switch (size) {
|
|
22
|
+
case SMALL:
|
|
23
|
+
icon = (
|
|
24
|
+
<svg
|
|
25
|
+
width={16}
|
|
26
|
+
height={16}
|
|
27
|
+
viewBox='0 0 16 16'
|
|
28
|
+
fill='none'
|
|
29
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
30
|
+
className={className}
|
|
31
|
+
>
|
|
32
|
+
<circle cx='8' cy='8' r='6' stroke='currentColor' />
|
|
33
|
+
<rect x='6' y='6' width='4' height='4' rx='1' fill='currentColor' />
|
|
34
|
+
</svg>
|
|
35
|
+
)
|
|
36
|
+
break
|
|
37
|
+
case MEDIUM:
|
|
38
|
+
icon = (
|
|
39
|
+
<svg
|
|
40
|
+
width={24}
|
|
41
|
+
height={24}
|
|
42
|
+
viewBox='0 0 24 24'
|
|
43
|
+
fill='none'
|
|
44
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
45
|
+
className={className}
|
|
46
|
+
>
|
|
47
|
+
<circle cx='12' cy='12' r='9' stroke='currentColor' strokeWidth='1.5' />
|
|
48
|
+
<rect x='9' y='9' width='6' height='6' rx='1' fill='currentColor' />
|
|
49
|
+
</svg>
|
|
50
|
+
)
|
|
51
|
+
break
|
|
52
|
+
case LARGE:
|
|
53
|
+
icon = (
|
|
54
|
+
<svg
|
|
55
|
+
width={40}
|
|
56
|
+
height={40}
|
|
57
|
+
viewBox='0 0 40 40'
|
|
58
|
+
fill='none'
|
|
59
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
60
|
+
className={className}
|
|
61
|
+
>
|
|
62
|
+
<circle cx='20' cy='20' r='15' stroke='currentColor' strokeWidth='2' />
|
|
63
|
+
<rect x='15' y='15' width='10' height='10' rx='1.5' fill='currentColor' />
|
|
64
|
+
</svg>
|
|
65
|
+
)
|
|
66
|
+
break
|
|
67
|
+
|
|
68
|
+
default:
|
|
69
|
+
break
|
|
70
|
+
}
|
|
71
|
+
return icon
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
SuspendIcon.propTypes = {
|
|
75
|
+
/**
|
|
76
|
+
* color of text, icon and borders
|
|
77
|
+
*/
|
|
78
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
79
|
+
/**
|
|
80
|
+
* Size
|
|
81
|
+
*/
|
|
82
|
+
size: PropTypes.oneOf(SIZES),
|
|
83
|
+
/**
|
|
84
|
+
* disabled
|
|
85
|
+
*/
|
|
86
|
+
disabled: PropTypes.bool,
|
|
87
|
+
/**
|
|
88
|
+
* inactive
|
|
89
|
+
*/
|
|
90
|
+
inactive: PropTypes.bool
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
export default SuspendIcon
|