@platformatic/ui-components 0.1.122 → 0.1.124

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 (10) hide show
  1. package/dist/assets/{index-37b6b359.js → index-8f6ac36c.js} +8 -8
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/FollowUs.jsx +7 -5
  5. package/src/components/FollowUs.module.css +0 -6
  6. package/src/components/Sidebar.jsx +91 -86
  7. package/src/components/Sidebar.module.css +4 -4
  8. package/src/components/icons/SocialXIcon.jsx +79 -0
  9. package/src/components/icons/index.js +2 -2
  10. 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-37b6b359.js"></script>
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,7 +1,7 @@
1
1
  {
2
2
  "name": "@platformatic/ui-components",
3
3
  "description": "Platformatic UI Components",
4
- "version": "0.1.122",
4
+ "version": "0.1.124",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/FollowUs.jsx 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.SocialTwitterIcon color={iconColor} size={iconSize} />
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,
package/src/components/FollowUs.module.css CHANGED
@@ -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
  }
package/src/components/Sidebar.jsx CHANGED
@@ -40,95 +40,100 @@ function Sidebar (props) {
40
40
 
41
41
  return (
42
42
  <div className={`${styles.container} ${collapsed && styles.collapsed}`}>
43
- {collapsed
44
- ? (
45
- <>
46
- <ButtonFullRounded
47
- className={buttonFullRoundedClassName}
48
- iconName='CircleArrowRightIcon'
49
- iconSize={MEDIUM}
50
- iconColor={WHITE}
51
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
52
- onClick={() => { setCollapsed(false) }}
53
- bordered={false}
54
- />
55
- <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
56
- <Icons.WorkspaceStaticIcon color='white' size='large' />
57
- </button>
58
- <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
59
- {title}
60
- </div>
61
- <HorizontalSeparator marginBottom={0} marginTop={0} />
62
- <div className={styles.bottom}>
63
- <button type='button' className={styles.buttonSettings} onClick={onClickSettings}>
64
- <Icons.GearIcon color='white' size='large' />
65
- </button>
66
- </div>
67
- </>
68
- )
69
- : (
70
- <>
71
- <ButtonFullRounded
72
- className={buttonFullRoundedClassName}
73
- iconName='CircleArrowLeftIcon'
74
- iconSize={MEDIUM}
75
- iconColor={WHITE}
76
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
77
- onClick={() => { setCollapsed(true) }}
78
- bordered={false}
79
- />
80
- <div className={styles.title} data-testid='lateral-bar-title'>
81
- {title}
82
- </div>
83
- <div className={styles.items} data-test-id='lateral-bar-items'>
84
- {items.map(item => {
85
- const isSelected = selectedItem === item.id
86
- return (
87
- <React.Fragment key={item.id}>
88
- <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(item)}>
89
- {item.iconName && (<PlatformaticIcon
90
- iconName={item.iconName}
91
- color={isSelected ? 'main-green' : 'white'}
92
- tip={item.title}
93
- size='medium'
94
- />)}
95
- <div className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>
96
- <span className={styles.itemSubTitle}>{item.subTitle}</span>
97
- <span className={styles.itemTitle}>{item.title}</span>
98
- </div>
99
- </button>
100
- <ReactTooltip place='top' type='info' />
101
- </React.Fragment>
102
- )
103
- })}
104
- <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed} ${disabledCreateButton} ${!disableClickAdd && styles.hoverSemibold}`} onClick={onClickAdd} disabled={disableClickAdd}>
105
- <PlatformaticIcon
106
- iconName='CircleAddIcon'
107
- color='white'
108
- size='medium'
109
- tip={addTitle}
110
- onClick={null}
111
- />
112
- {!collapsed && <span className={styles.item}>{addTitle}</span>}
43
+ <div>
44
+ {collapsed
45
+ ? (
46
+ <>
47
+ <ButtonFullRounded
48
+ className={buttonFullRoundedClassName}
49
+ iconName='CircleArrowRightIcon'
50
+ iconSize={MEDIUM}
51
+ iconColor={WHITE}
52
+ hoverEffect={BACKGROUND_COLOR_OPAQUE}
53
+ onClick={() => { setCollapsed(false) }}
54
+ bordered={false}
55
+ />
56
+ <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
57
+ <Icons.WorkspaceStaticIcon color='white' size='large' />
113
58
  </button>
114
- </div>
115
- <HorizontalSeparator marginBottom={2} marginTop={2} />
116
-
117
- <div className={styles.bottom}>
118
- <Button
119
- label={labelButtonSettings}
120
- color={WHITE}
121
- onClick={onClickSettings}
122
- platformaticIcon={{ iconName: 'GearIcon', color: WHITE }}
123
- fullWidth
124
- bold
125
- size={MEDIUM}
126
- disabled={disableClickSettings}
59
+ <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
60
+ {title}
61
+ </div>
62
+ <HorizontalSeparator marginBottom={0} marginTop={0} />
63
+ </>
64
+ )
65
+ : (
66
+ <>
67
+ <ButtonFullRounded
68
+ className={buttonFullRoundedClassName}
69
+ iconName='CircleArrowLeftIcon'
70
+ iconSize={MEDIUM}
71
+ iconColor={WHITE}
127
72
  hoverEffect={BACKGROUND_COLOR_OPAQUE}
73
+ onClick={() => { setCollapsed(true) }}
74
+ bordered={false}
128
75
  />
129
- </div>
130
- </>
131
- )}
76
+ <div className={styles.title} data-testid='lateral-bar-title'>
77
+ {title}
78
+ </div>
79
+ <div className={styles.items} data-test-id='lateral-bar-items'>
80
+ {items.map(item => {
81
+ const isSelected = selectedItem === item.id
82
+ return (
83
+ <React.Fragment key={item.id}>
84
+ <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(item)}>
85
+ {item.iconName && (<PlatformaticIcon
86
+ iconName={item.iconName}
87
+ color={isSelected ? 'main-green' : 'white'}
88
+ tip={item.title}
89
+ size='medium'
90
+ />)}
91
+ <div className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>
92
+ <span className={styles.itemSubTitle}>{item.subTitle}</span>
93
+ <span className={styles.itemTitle}>{item.title}</span>
94
+ </div>
95
+ </button>
96
+ <ReactTooltip place='top' type='info' />
97
+ </React.Fragment>
98
+ )
99
+ })}
100
+ <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed} ${disabledCreateButton} ${!disableClickAdd && styles.hoverSemibold}`} onClick={onClickAdd} disabled={disableClickAdd}>
101
+ <PlatformaticIcon
102
+ iconName='CircleAddIcon'
103
+ color='white'
104
+ size='medium'
105
+ tip={addTitle}
106
+ onClick={null}
107
+ />
108
+ {!collapsed && <span className={styles.item}>{addTitle}</span>}
109
+ </button>
110
+ </div>
111
+ <HorizontalSeparator marginBottom={2} marginTop={2} />
112
+ </>
113
+ )}
114
+ </div>
115
+
116
+ <div>
117
+ {collapsed
118
+ ? (
119
+ <button type='button' className={styles.buttonSettings} onClick={onClickSettings}>
120
+ <Icons.GearIcon color='white' size='large' />
121
+ </button>
122
+ )
123
+ : (
124
+ <Button
125
+ label={labelButtonSettings}
126
+ color={WHITE}
127
+ onClick={onClickSettings}
128
+ platformaticIcon={{ iconName: 'GearIcon', color: WHITE }}
129
+ fullWidth
130
+ bold
131
+ size={MEDIUM}
132
+ disabled={disableClickSettings}
133
+ hoverEffect={BACKGROUND_COLOR_OPAQUE}
134
+ />
135
+ )}
136
+ </div>
132
137
  </div>
133
138
  )
134
139
  }
package/src/components/Sidebar.module.css CHANGED
@@ -1,7 +1,10 @@
1
1
  .container {
2
- @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh] z-10 bg-dark-blue;
2
+ @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh] z-10 bg-dark-blue flex flex-col gap-y-6 justify-between;
3
3
  transition: max-width 0.2s linear;
4
4
  }
5
+ .content {
6
+ @apply flex flex-col justify-between
7
+ }
5
8
  .collapsed {
6
9
  @apply max-w-[96px] text-center;
7
10
  }
@@ -54,9 +57,6 @@
54
57
  .items {
55
58
  @apply flex flex-col gap-y-4;
56
59
  }
57
- .bottom {
58
- @apply absolute left-0 bottom-[1rem] w-full px-4;
59
- }
60
60
  .titleSettings {
61
61
  @apply text-white font-semibold ml-3;
62
62
  }
package/src/components/icons/SocialXIcon.jsx ADDED
@@ -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
package/src/components/icons/index.js CHANGED
@@ -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 SocialTwitterIcon from './SocialTwitterIcon'
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
- SocialTwitterIcon,
218
+ SocialXIcon,
219
219
  TerminalIcon,
220
220
  UpgradeIcon,
221
221
  UserIcon,
package/src/components/icons/SocialTwitterIcon.jsx DELETED
@@ -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