@platformatic/ui-components 0.13.2 → 0.13.3

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 (7) hide show
  1. package/dist/assets/{index-DES2qWoG.js → index-BexnS8FK.js} +10 -10
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/constants.js +1 -1
  5. package/src/components/icons/SuspendIcon.jsx +93 -0
  6. package/src/components/icons/index.js +2 -0
  7. package/src/stories/icons/Icons.stories.jsx +37 -1
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-DES2qWoG.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-BexnS8FK.js"></script>
8
8
  <link rel="stylesheet" crossorigin href="/assets/index-DMinbJlj.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.13.2",
4
+ "version": "0.13.3",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/constants.js 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, RICH_BLACK, FLUORESCENT_CYAN, GIANTS_ORANGE, ELECTRIC_PURPLE]
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
 
package/src/components/icons/SuspendIcon.jsx ADDED
@@ -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
package/src/components/icons/index.js CHANGED
@@ -178,6 +178,7 @@ import SendIcon from './SendIcon'
178
178
  import ServiceIcon from './ServiceIcon'
179
179
  import ServicesWorkingIcon from './ServicesWorkingIcon'
180
180
  import SlotIcon from './SlotIcon'
181
+ import SuspendIcon from './SuspendIcon'
181
182
  import SwitchIcon from './SwitchIcon'
182
183
  import SocialDiscordIcon from './SocialDiscordIcon'
183
184
  import SocialGitHubIcon from './SocialGitHubIcon'
@@ -399,6 +400,7 @@ export default {
399
400
  ServiceIcon,
400
401
  ServicesWorkingIcon,
401
402
  SlotIcon,
403
+ SuspendIcon,
402
404
  SwitchIcon,
403
405
  SocialDiscordIcon,
404
406
  SocialGitHubIcon,
package/src/stories/icons/Icons.stories.jsx CHANGED
@@ -5,7 +5,7 @@ import CircleCloseIcon from '../../components/icons/CircleCloseIcon'
5
5
  import WorkspaceStaticIcon from '../../components/icons/WorkspaceStaticIcon'
6
6
  import UpgradeIcon from '../../components/icons/UpgradeIcon'
7
7
  import WorkspaceDynamicIcon from '../../components/icons/WorkspaceDynamicIcon'
8
- import { COLORS_ICON, RICH_BLACK } from '../../components/constants'
8
+ import { COLORS_ICON, LARGE, MEDIUM, RICH_BLACK, SIZES, SMALL } from '../../components/constants'
9
9
  import icons from '../../components/icons/index.js'
10
10
 
11
11
  const divStyle = {
@@ -121,3 +121,39 @@ export const AlertIcon = AllSizesIcons(icons.AlertIcon).bind({})
121
121
  export const ScheduledJobSettingsIcons = AllSizesIcons(icons.ScheduledJobSettingsIcon).bind({})
122
122
  export const ScheduledJobsSuspendIcons = AllSizesIcons(icons.ScheduledJobsSuspendIcon).bind({})
123
123
  export const ScheduledJobsDetailIcons = AllSizesIcons(icons.ScheduledJobsDetailIcon).bind({})
124
+
125
+ const IconPreviewTemplate = ({ iconName, size, color }) => {
126
+ const Icon = icons[iconName]
127
+ if (!Icon) return <div>Icon not found</div>
128
+
129
+ return (
130
+ <div style={{ backgroundColor: RICH_BLACK, padding: '20px', display: 'flex', gap: '10px' }}>
131
+ <Icon size={SMALL} color={color} />
132
+ <Icon size={MEDIUM} color={color} />
133
+ <Icon size={LARGE} color={color} />
134
+ </div>
135
+ )
136
+ }
137
+
138
+ export const IconPreview = IconPreviewTemplate.bind({})
139
+ IconPreview.args = {
140
+ iconName: 'AddIcon',
141
+ color: 'rich-black'
142
+ }
143
+ IconPreview.argTypes = {
144
+ iconName: {
145
+ control: 'select',
146
+ options: Object.keys(icons),
147
+ description: 'Select an icon to preview'
148
+ },
149
+ size: {
150
+ control: 'select',
151
+ options: SIZES,
152
+ description: 'Select icon size'
153
+ },
154
+ color: {
155
+ control: 'select',
156
+ options: COLORS_ICON,
157
+ description: 'Select icon color'
158
+ }
159
+ }