@platformatic/ui-components 0.7.8 → 0.7.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.
- package/dist/assets/{index-D6y32yDw.css → index-DVghlxYb.css} +1 -1
- package/dist/assets/index-DXcXpVaM.js +40 -0
- package/dist/index.html +2 -2
- package/package.json +1 -1
- package/src/components/Status.jsx +2 -2
- package/src/components/TabbedWindow.module.css +1 -1
- package/src/components/constants.js +3 -2
- package/src/components/icons/CircleFullIcon.jsx +20 -5
- package/src/stories/PlatformaticIcon.stories.jsx +2 -2
- package/dist/assets/index-CVJlkMNG.js +0 -40
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-
|
|
8
|
-
<link rel="stylesheet" crossorigin href="/assets/index-
|
|
7
|
+
<script type="module" crossorigin src="/assets/index-DXcXpVaM.js"></script>
|
|
8
|
+
<link rel="stylesheet" crossorigin href="/assets/index-DVghlxYb.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
|
11
11
|
<div id="root"></div>
|
package/package.json
CHANGED
|
@@ -2,12 +2,12 @@
|
|
|
2
2
|
import React from 'react'
|
|
3
3
|
import PropTypes from 'prop-types'
|
|
4
4
|
import PlatformaticIcon from './PlatformaticIcon'
|
|
5
|
-
import { COLORS_ICON,
|
|
5
|
+
import { COLORS_ICON, TINY, SIZES, WHITE } from './constants'
|
|
6
6
|
|
|
7
7
|
function Status ({
|
|
8
8
|
color = WHITE,
|
|
9
9
|
status = '',
|
|
10
|
-
size =
|
|
10
|
+
size = TINY
|
|
11
11
|
}) {
|
|
12
12
|
const className = `inline-flex items-center text-${color}`
|
|
13
13
|
return (
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
@apply flex justify-start text-white uppercase hover:cursor-pointer tracking-super-widest h-[2rem];
|
|
6
6
|
}
|
|
7
7
|
.tab {
|
|
8
|
-
@apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0 font-light hover:
|
|
8
|
+
@apply mx-8 min-w-[105px] text-center text-sm first:ml-0 last:mr-0 font-light opacity-70 hover:opacity-100;
|
|
9
9
|
}
|
|
10
10
|
.selected-tab {
|
|
11
11
|
@apply underline underline-offset-8 font-medium opacity-100;
|
|
@@ -15,14 +15,15 @@ export const FIRE_ENGINE_RED = 'fire-engine-red'
|
|
|
15
15
|
export const ALTERNATE_RICH_BLACK = 'alternate-rich-black'
|
|
16
16
|
|
|
17
17
|
export const NONE = 'none'
|
|
18
|
-
export const
|
|
18
|
+
export const MINI = 'mini'
|
|
19
|
+
export const TINY = 'tiny'
|
|
19
20
|
export const SMALL = 'small'
|
|
20
21
|
export const MEDIUM = 'medium'
|
|
21
22
|
export const EXTRA_MEDIUM = 'extra-medium'
|
|
22
23
|
export const LARGE = 'large'
|
|
23
24
|
export const EXTRA_LARGE = 'extra-large'
|
|
24
25
|
|
|
25
|
-
export const SIZES = [
|
|
26
|
+
export const SIZES = [MINI, TINY, SMALL, MEDIUM, EXTRA_MEDIUM, LARGE, EXTRA_LARGE]
|
|
26
27
|
export const PADDING_SIZES = [NONE, ...SIZES]
|
|
27
28
|
export const CHANGE_BACKGROUND_COLOR = 'background-color-change'
|
|
28
29
|
export const BOX_SHADOW = 'box-shadow'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react'
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
3
|
import styles from './Icons.module.css'
|
|
4
|
-
import { COLORS_ICON,
|
|
4
|
+
import { COLORS_ICON, MINI, TINY, LARGE, MEDIUM, SIZES, SMALL, MAIN_DARK_BLUE } from '../constants'
|
|
5
5
|
|
|
6
6
|
const CircleFullIcon = ({
|
|
7
7
|
color = MAIN_DARK_BLUE,
|
|
@@ -20,12 +20,27 @@ const CircleFullIcon = ({
|
|
|
20
20
|
let icon = <></>
|
|
21
21
|
|
|
22
22
|
switch (size) {
|
|
23
|
-
case
|
|
23
|
+
case MINI:
|
|
24
24
|
icon = (
|
|
25
25
|
<svg
|
|
26
|
-
width={
|
|
27
|
-
height={
|
|
28
|
-
viewBox='0 0
|
|
26
|
+
width={4}
|
|
27
|
+
height={4}
|
|
28
|
+
viewBox='0 0 4 4'
|
|
29
|
+
fill='none'
|
|
30
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
31
|
+
className={className}
|
|
32
|
+
>
|
|
33
|
+
<circle cx={2} cy={2} r={2} fill='none' className={filledClassName} />
|
|
34
|
+
</svg>
|
|
35
|
+
)
|
|
36
|
+
break
|
|
37
|
+
|
|
38
|
+
case TINY:
|
|
39
|
+
icon = (
|
|
40
|
+
<svg
|
|
41
|
+
width={4}
|
|
42
|
+
height={4}
|
|
43
|
+
viewBox='0 0 4 4'
|
|
29
44
|
fill='none'
|
|
30
45
|
xmlns='http://www.w3.org/2000/svg'
|
|
31
46
|
className={className}
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
COLORS_ICON,
|
|
6
6
|
EXTRA_LARGE,
|
|
7
7
|
EXTRA_MEDIUM,
|
|
8
|
-
|
|
8
|
+
TINY,
|
|
9
9
|
LARGE,
|
|
10
10
|
MEDIUM,
|
|
11
11
|
SIZES,
|
|
@@ -85,7 +85,7 @@ const AllIconsTemplate = (args) => {
|
|
|
85
85
|
<PlatformaticIcon
|
|
86
86
|
key={icon}
|
|
87
87
|
iconName={icon}
|
|
88
|
-
size={
|
|
88
|
+
size={TINY}
|
|
89
89
|
{...args}
|
|
90
90
|
/>
|
|
91
91
|
</div>
|