@platformatic/ui-components 0.1.122 → 0.1.123
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-37b6b359.js → index-8f6ac36c.js} +8 -8
- package/dist/index.html +1 -1
- package/package.json +1 -1
- package/src/components/FollowUs.jsx +7 -5
- package/src/components/FollowUs.module.css +0 -6
- package/src/components/icons/SocialXIcon.jsx +79 -0
- package/src/components/icons/index.js +2 -2
- package/src/components/icons/SocialTwitterIcon.jsx +0 -78
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-8f6ac36c.js"></script>
|
|
8
8
|
<link rel="stylesheet" href="/assets/index-3a61658e.css">
|
|
9
9
|
</head>
|
|
10
10
|
<body>
|
package/package.json
CHANGED
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
|
-
import commonStyles from './Common.module.css'
|
|
4
3
|
import styles from './FollowUs.module.css'
|
|
5
4
|
import Icons from './icons'
|
|
6
5
|
import { MAIN_GREEN, WHITE, MEDIUM, SMALL, MAIN_DARK_BLUE, LIGHT_GREEN } from './constants'
|
|
7
6
|
|
|
8
|
-
function FollowUs ({ label, useOnFrontpage, iconColor, iconSize, labelColor }) {
|
|
7
|
+
function FollowUs ({ label, labelClassName, useOnFrontpage, iconColor, iconSize, labelColor }) {
|
|
9
8
|
const suffix = useOnFrontpage ? 'Frontpage' : 'Dashboard'
|
|
10
9
|
const className = styles[`container${suffix}`]
|
|
11
10
|
const iconClassName = styles[`icon${suffix}`]
|
|
12
|
-
let labelClassName = styles[`label${suffix}`]
|
|
13
|
-
labelClassName += ' ' + commonStyles[`text--${labelColor}`]
|
|
14
11
|
|
|
15
12
|
return (
|
|
16
13
|
<div className={className}>
|
|
@@ -19,7 +16,7 @@ function FollowUs ({ label, useOnFrontpage, iconColor, iconSize, labelColor }) {
|
|
|
19
16
|
</div>
|
|
20
17
|
<div className={iconClassName}>
|
|
21
18
|
<a href='https://twitter.com/platformatic' target='_blank' rel='noopener noreferrer'>
|
|
22
|
-
<Icons.
|
|
19
|
+
<Icons.SocialXIcon color={iconColor} size={iconSize} />
|
|
23
20
|
</a>
|
|
24
21
|
</div>
|
|
25
22
|
<div className={iconClassName}>
|
|
@@ -46,6 +43,10 @@ FollowUs.propTypes = {
|
|
|
46
43
|
* label
|
|
47
44
|
*/
|
|
48
45
|
label: PropTypes.string,
|
|
46
|
+
/**
|
|
47
|
+
* labelClassName
|
|
48
|
+
*/
|
|
49
|
+
labelClassName: PropTypes.string,
|
|
49
50
|
/**
|
|
50
51
|
* frontPageAspect
|
|
51
52
|
*/
|
|
@@ -66,6 +67,7 @@ FollowUs.propTypes = {
|
|
|
66
67
|
|
|
67
68
|
FollowUs.defaultProps = {
|
|
68
69
|
label: 'Follow us on',
|
|
70
|
+
labelClassName: '',
|
|
69
71
|
useOnFrontpage: true,
|
|
70
72
|
labelColor: LIGHT_GREEN,
|
|
71
73
|
iconColor: WHITE,
|
|
@@ -4,12 +4,6 @@
|
|
|
4
4
|
.containerDashboard {
|
|
5
5
|
@apply flex items-center;
|
|
6
6
|
}
|
|
7
|
-
.labelFrontpage {
|
|
8
|
-
@apply uppercase tracking-more-widest text-sm mr-8;
|
|
9
|
-
}
|
|
10
|
-
.labelDashboard {
|
|
11
|
-
@apply text-xs mr-2;
|
|
12
|
-
}
|
|
13
7
|
.iconFrontpage {
|
|
14
8
|
@apply text-white text-xl hover:cursor-pointer hover:scale-125;
|
|
15
9
|
}
|
|
@@ -0,0 +1,79 @@
|
|
|
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 SocialXIcon = ({ color, size }) => {
|
|
7
|
+
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
8
|
+
const filledClassName = styles[`filled-${color}`]
|
|
9
|
+
let icon = <></>
|
|
10
|
+
|
|
11
|
+
switch (size) {
|
|
12
|
+
case SMALL:
|
|
13
|
+
icon = (
|
|
14
|
+
<svg
|
|
15
|
+
width={16}
|
|
16
|
+
height={16}
|
|
17
|
+
viewBox='0 0 16 16'
|
|
18
|
+
fill='none'
|
|
19
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
20
|
+
className={className}
|
|
21
|
+
>
|
|
22
|
+
<path d='M9.14154 7.19276L13.6088 2H12.5502L8.67134 6.50886L5.57327 2H2L6.68486 8.81814L2 14.2636H3.05869L7.15496 9.50214L10.4267 14.2636H14L9.14144 7.19276H9.14174H9.14154ZM7.69155 8.87814L7.21686 8.19925L3.44009 2.79689H5.06607L8.11405 7.15676L8.58875 7.83565L12.5507 13.5028H10.9247L7.69165 8.87834V8.87804L7.69155 8.87814Z' fill='none' className={filledClassName} />
|
|
23
|
+
|
|
24
|
+
</svg>
|
|
25
|
+
)
|
|
26
|
+
break
|
|
27
|
+
case MEDIUM:
|
|
28
|
+
icon = (
|
|
29
|
+
<svg
|
|
30
|
+
width={24}
|
|
31
|
+
height={24}
|
|
32
|
+
viewBox='0 0 24 24'
|
|
33
|
+
fill='none'
|
|
34
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
35
|
+
className={className}
|
|
36
|
+
>
|
|
37
|
+
<path d='M13.7123 10.7891L20.4132 3H18.8253L13.007 9.76329L8.35991 3H3L10.0273 13.2272L3 21.3954H4.58804L10.7324 14.2532L15.6401 21.3954H21L13.7122 10.7891H13.7126H13.7123ZM11.5373 13.3172L10.8253 12.2989L5.16013 4.19534H7.59911L12.1711 10.7351L12.8831 11.7535L18.8261 20.2542H16.3871L11.5375 13.3175V13.3171L11.5373 13.3172Z' fill='none' className={filledClassName} />
|
|
38
|
+
</svg>
|
|
39
|
+
)
|
|
40
|
+
break
|
|
41
|
+
case LARGE:
|
|
42
|
+
icon = (
|
|
43
|
+
<svg
|
|
44
|
+
width={40}
|
|
45
|
+
height={40}
|
|
46
|
+
viewBox='0 0 40 40'
|
|
47
|
+
fill='none'
|
|
48
|
+
xmlns='http://www.w3.org/2000/svg'
|
|
49
|
+
className={className}
|
|
50
|
+
>
|
|
51
|
+
<path d='M22.8539 17.9819L34.022 5H31.3755L21.6784 16.2722L13.9332 5H5L16.7122 22.0454L5 35.659H7.64673L17.8874 23.7553L26.0668 35.659H35L22.8536 17.9819H22.8544H22.8539ZM19.2289 22.1954L18.0421 20.4981L8.60022 6.99223H12.6652L20.2851 17.8919L21.4719 19.5891L31.3768 33.757H27.3118L19.2291 22.1959V22.1951L19.2289 22.1954Z' fill='none' className={filledClassName} />
|
|
52
|
+
|
|
53
|
+
</svg>
|
|
54
|
+
)
|
|
55
|
+
break
|
|
56
|
+
|
|
57
|
+
default:
|
|
58
|
+
break
|
|
59
|
+
}
|
|
60
|
+
return icon
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
SocialXIcon.propTypes = {
|
|
64
|
+
/**
|
|
65
|
+
* color of text, icon and borders
|
|
66
|
+
*/
|
|
67
|
+
color: PropTypes.oneOf(COLORS_ICON),
|
|
68
|
+
/**
|
|
69
|
+
* Size
|
|
70
|
+
*/
|
|
71
|
+
size: PropTypes.oneOf(SIZES)
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
SocialXIcon.defaultProps = {
|
|
75
|
+
color: MAIN_DARK_BLUE,
|
|
76
|
+
size: MEDIUM
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
export default SocialXIcon
|
|
@@ -97,7 +97,7 @@ import SocialGitHubIcon from './SocialGitHubIcon'
|
|
|
97
97
|
import SocialGitLabIcon from './SocialGitLabIcon'
|
|
98
98
|
import SocialLinkedInIcon from './SocialLinkedInIcon'
|
|
99
99
|
import SocialNPMIcon from './SocialNPMIcon'
|
|
100
|
-
import
|
|
100
|
+
import SocialXIcon from './SocialXIcon'
|
|
101
101
|
import StopIcon from './StopIcon'
|
|
102
102
|
import TerminalIcon from './TerminalIcon'
|
|
103
103
|
import TwoUsersIcon from './TwoUsersIcon'
|
|
@@ -215,7 +215,7 @@ export default {
|
|
|
215
215
|
SocialGitLabIcon,
|
|
216
216
|
SocialLinkedInIcon,
|
|
217
217
|
SocialNPMIcon,
|
|
218
|
-
|
|
218
|
+
SocialXIcon,
|
|
219
219
|
TerminalIcon,
|
|
220
220
|
UpgradeIcon,
|
|
221
221
|
UserIcon,
|
|
@@ -1,78 +0,0 @@
|
|
|
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 SocialTwitterIcon = ({ color, size }) => {
|
|
7
|
-
const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
|
|
8
|
-
const filledClassName = styles[`filled-${color}`]
|
|
9
|
-
let icon = <></>
|
|
10
|
-
|
|
11
|
-
switch (size) {
|
|
12
|
-
case SMALL:
|
|
13
|
-
icon = (
|
|
14
|
-
<svg
|
|
15
|
-
width={16}
|
|
16
|
-
height={16}
|
|
17
|
-
viewBox='0 0 16 16'
|
|
18
|
-
fill='none'
|
|
19
|
-
xmlns='http://www.w3.org/2000/svg'
|
|
20
|
-
className={className}
|
|
21
|
-
>
|
|
22
|
-
<path d='M14.6666 3.92407C14.1674 4.14221 13.6376 4.28522 13.0952 4.34833C13.6657 4.01139 14.0923 3.48149 14.2953 2.85751C13.7588 3.17265 13.1713 3.39479 12.5585 3.51426C12.1458 3.08286 11.6004 2.79736 11.0065 2.70189C10.4126 2.60641 9.80328 2.70627 9.27276 2.98603C8.74223 3.2658 8.32001 3.70989 8.07134 4.24969C7.82267 4.78949 7.76139 5.39494 7.89697 5.97247C6.80927 5.91774 5.7454 5.63833 4.7744 5.15239C3.8034 4.66644 2.94697 3.98481 2.26069 3.15173C1.91173 3.74501 1.80505 4.44686 1.9623 5.1148C2.11956 5.78274 2.52897 6.36669 3.1074 6.74809C2.67233 6.7355 2.24666 6.62042 1.86601 6.41249C1.86601 6.42366 1.86601 6.43548 1.86601 6.44665C1.86649 7.0696 2.0859 7.67318 2.48697 8.15482C2.88804 8.63646 3.44603 8.96646 4.06612 9.08875C3.66325 9.19645 3.24078 9.2124 2.83072 9.13538C3.00541 9.67082 3.34567 10.1391 3.80389 10.4746C4.26211 10.8101 4.81535 10.996 5.38618 11.0065C4.41654 11.7564 3.2188 12.1629 1.98601 12.1604C1.76788 12.1603 1.54993 12.1476 1.33331 12.1223C2.58405 12.9144 4.03994 13.3348 5.52686 13.3333C10.5584 13.3333 13.3099 9.22732 13.3099 5.66577C13.3099 5.54887 13.3099 5.43262 13.3026 5.31704C13.8376 4.93621 14.2996 4.46452 14.6666 3.92407V3.92407Z' fill='none' className={filledClassName} />
|
|
23
|
-
</svg>
|
|
24
|
-
)
|
|
25
|
-
break
|
|
26
|
-
case MEDIUM:
|
|
27
|
-
icon = (
|
|
28
|
-
<svg
|
|
29
|
-
width={24}
|
|
30
|
-
height={24}
|
|
31
|
-
viewBox='0 0 24 24'
|
|
32
|
-
fill='none'
|
|
33
|
-
xmlns='http://www.w3.org/2000/svg'
|
|
34
|
-
className={className}
|
|
35
|
-
>
|
|
36
|
-
<path d='M22 5.88612C21.2511 6.21333 20.4565 6.42785 19.6429 6.52251C20.4986 6.0171 21.1384 5.22225 21.443 4.28628C20.6382 4.759 19.757 5.0922 18.8378 5.2714C18.2188 4.6243 17.4006 4.19606 16.5098 4.05284C15.6189 3.90963 14.705 4.05942 13.9092 4.47907C13.1134 4.89871 12.48 5.56486 12.107 6.37455C11.734 7.18425 11.6421 8.09242 11.8455 8.95872C10.2139 8.87662 8.61813 8.45751 7.16163 7.72859C5.70513 6.99967 4.42049 5.97723 3.39107 4.72762C2.86763 5.61752 2.7076 6.67031 2.94349 7.67222C3.17937 8.67413 3.79348 9.55006 4.66113 10.1222C4.00853 10.1033 3.37001 9.93065 2.79904 9.61876C2.79904 9.6355 2.79904 9.65324 2.79904 9.66998C2.79976 10.6044 3.12888 11.5098 3.73049 12.2322C4.33209 12.9547 5.16907 13.4497 6.09921 13.6331C5.4949 13.7947 4.86119 13.8186 4.24611 13.7031C4.50814 14.5062 5.01854 15.2086 5.70586 15.7118C6.39319 16.2151 7.22305 16.4941 8.0793 16.5097C6.62485 17.6346 4.82824 18.2443 2.97905 18.2406C2.65184 18.2405 2.32493 18.2214 2 18.1834C3.8761 19.3716 6.05994 20.0023 8.29032 20C15.8377 20 19.9649 13.841 19.9649 8.49867C19.9649 8.32332 19.9649 8.14895 19.9539 7.97557C20.7565 7.40433 21.4494 6.69679 22 5.88612Z' fill='none' className={filledClassName} />
|
|
37
|
-
</svg>
|
|
38
|
-
)
|
|
39
|
-
break
|
|
40
|
-
case LARGE:
|
|
41
|
-
icon = (
|
|
42
|
-
<svg
|
|
43
|
-
width={40}
|
|
44
|
-
height={40}
|
|
45
|
-
viewBox='0 0 40 40'
|
|
46
|
-
fill='none'
|
|
47
|
-
xmlns='http://www.w3.org/2000/svg'
|
|
48
|
-
className={className}
|
|
49
|
-
>
|
|
50
|
-
<path d='M36.6667 9.81019C35.4185 10.3555 34.0942 10.7131 32.7382 10.8708C34.1644 10.0285 35.2308 8.70374 35.7383 7.14379C34.397 7.93165 32.9284 8.487 31.3964 8.78566C30.3647 7.70716 29.001 6.99342 27.5163 6.75473C26.0315 6.51604 24.5083 6.76569 23.182 7.4651C21.8557 8.16451 20.8001 9.27475 20.1784 10.6242C19.5568 11.9737 19.4036 13.4874 19.7425 14.9312C17.0233 14.7944 14.3636 14.0958 11.9361 12.881C9.5086 11.6661 7.36753 9.96204 5.65182 7.87935C4.77942 9.36253 4.51271 11.1172 4.90585 12.787C5.29899 14.4569 6.32251 15.9167 7.7686 16.8702C6.68092 16.8388 5.61673 16.5511 4.66511 16.0313C4.66511 16.0592 4.66511 16.0887 4.66511 16.1166C4.66631 17.674 5.21485 19.183 6.21752 20.3871C7.2202 21.5912 8.61516 22.4162 10.1654 22.7219C9.15821 22.9911 8.10203 23.031 7.07689 22.8385C7.51361 24.1771 8.36427 25.3476 9.50981 26.1864C10.6554 27.0252 12.0385 27.4901 13.4655 27.5162C11.0415 29.391 8.0471 30.4072 4.96512 30.4009C4.41978 30.4008 3.87492 30.369 3.33337 30.3057C6.46021 32.286 10.0999 33.3371 13.8172 33.3333C26.3962 33.3333 33.2749 23.0683 33.2749 14.1644C33.2749 13.8722 33.2749 13.5816 33.2565 13.2926C34.5942 12.3405 35.749 11.1613 36.6667 9.81019V9.81019Z' fill='none' className={filledClassName} />
|
|
51
|
-
|
|
52
|
-
</svg>
|
|
53
|
-
)
|
|
54
|
-
break
|
|
55
|
-
|
|
56
|
-
default:
|
|
57
|
-
break
|
|
58
|
-
}
|
|
59
|
-
return icon
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
SocialTwitterIcon.propTypes = {
|
|
63
|
-
/**
|
|
64
|
-
* color of text, icon and borders
|
|
65
|
-
*/
|
|
66
|
-
color: PropTypes.oneOf(COLORS_ICON),
|
|
67
|
-
/**
|
|
68
|
-
* Size
|
|
69
|
-
*/
|
|
70
|
-
size: PropTypes.oneOf(SIZES)
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
SocialTwitterIcon.defaultProps = {
|
|
74
|
-
color: MAIN_DARK_BLUE,
|
|
75
|
-
size: MEDIUM
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
export default SocialTwitterIcon
|