@platformatic/ui-components 0.1.105 → 0.1.107

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 (98) hide show
  1. package/dist/assets/index-68be35eb.js +206 -0
  2. package/dist/index.html +1 -1
  3. package/package.json +1 -1
  4. package/src/components/FollowUs.module.css +2 -2
  5. package/src/components/ListElement.module.css +2 -2
  6. package/src/components/PlatformaticIcon.jsx +4 -4
  7. package/src/components/forms/RadioGroup.jsx +1 -1
  8. package/src/components/forms/TextArea.jsx +1 -1
  9. package/src/components/icons/AddIcon.jsx +6 -6
  10. package/src/components/icons/AlertIcon.jsx +6 -6
  11. package/src/components/icons/AllInOneIcon.jsx +6 -6
  12. package/src/components/icons/ApiCloudIcon.jsx +6 -6
  13. package/src/components/icons/ApiEmptyIcon.jsx +4 -4
  14. package/src/components/icons/ApiIcon.jsx +6 -6
  15. package/src/components/icons/AppEmptyIcon.jsx +4 -4
  16. package/src/components/icons/AppIcon.jsx +6 -6
  17. package/src/components/icons/AppListIcon.jsx +4 -4
  18. package/src/components/icons/ArrowDownFullIcon.jsx +6 -6
  19. package/src/components/icons/ArrowDownIcon.jsx +6 -6
  20. package/src/components/icons/ArrowLeftIcon.jsx +6 -6
  21. package/src/components/icons/ArrowRightIcon.jsx +6 -6
  22. package/src/components/icons/ArrowUpIcon.jsx +6 -6
  23. package/src/components/icons/BellIcon.jsx +6 -6
  24. package/src/components/icons/BillingIcon.jsx +6 -6
  25. package/src/components/icons/Calendar1DayIcon.jsx +6 -6
  26. package/src/components/icons/Calendar7DaysIcon.jsx +6 -6
  27. package/src/components/icons/CalendarIcon.jsx +6 -6
  28. package/src/components/icons/ChatGPTIcon.jsx +77 -0
  29. package/src/components/icons/CheckListIcon.jsx +6 -6
  30. package/src/components/icons/CircleAddIcon.jsx +6 -6
  31. package/src/components/icons/CircleArrowLeftIcon.jsx +6 -6
  32. package/src/components/icons/CircleArrowRightIcon.jsx +6 -6
  33. package/src/components/icons/CircleCheckMarkFullIcon.jsx +4 -4
  34. package/src/components/icons/CircleCheckMarkIcon.jsx +6 -6
  35. package/src/components/icons/CircleCloseHoverIcon.jsx +4 -4
  36. package/src/components/icons/CircleCloseIcon.jsx +5 -5
  37. package/src/components/icons/CircleExclamationIcon.jsx +6 -6
  38. package/src/components/icons/CircleFullIcon.jsx +3 -3
  39. package/src/components/icons/CircleGearIcon.jsx +6 -6
  40. package/src/components/icons/CircleTwoArrowsDownIcon.jsx +6 -6
  41. package/src/components/icons/CircleTwoArrowsUpIcon.jsx +6 -6
  42. package/src/components/icons/CloseIcon.jsx +6 -6
  43. package/src/components/icons/CopyPasteIcon.jsx +6 -6
  44. package/src/components/icons/CreditCardIcon.jsx +6 -6
  45. package/src/components/icons/DatabaseIcon.jsx +6 -6
  46. package/src/components/icons/EditIcon.jsx +6 -6
  47. package/src/components/icons/EnlargeIcon.jsx +6 -6
  48. package/src/components/icons/EntryIcon.jsx +6 -6
  49. package/src/components/icons/ExploreDocIcon.jsx +6 -6
  50. package/src/components/icons/GearIcon.jsx +6 -6
  51. package/src/components/icons/GenerationLoadingIcon.jsx +3 -3
  52. package/src/components/icons/GiveOwnershipIcon.jsx +6 -6
  53. package/src/components/icons/GraphQLIcon.jsx +6 -6
  54. package/src/components/icons/KeyIcon.jsx +6 -6
  55. package/src/components/icons/LabelIcon.jsx +3 -3
  56. package/src/components/icons/LayersIcon.jsx +6 -6
  57. package/src/components/icons/LensIcon.jsx +6 -6
  58. package/src/components/icons/LiveIcon.jsx +6 -6
  59. package/src/components/icons/LoadingAppIcon.jsx +5 -5
  60. package/src/components/icons/LogOutIcon.jsx +6 -6
  61. package/src/components/icons/MetricsIcon.jsx +6 -6
  62. package/src/components/icons/MetricsLoadingIcon.jsx +3 -3
  63. package/src/components/icons/OrganizationIcon.jsx +6 -6
  64. package/src/components/icons/PlayIcon.jsx +6 -6
  65. package/src/components/icons/PullRequestIcon.jsx +6 -6
  66. package/src/components/icons/PullRequestLoadingIcon.jsx +4 -4
  67. package/src/components/icons/RequestOwnershipIcon.jsx +6 -6
  68. package/src/components/icons/RestartIcon.jsx +6 -6
  69. package/src/components/icons/RocketIcon.jsx +6 -6
  70. package/src/components/icons/RunningIcon.jsx +6 -6
  71. package/src/components/icons/SendIcon.jsx +6 -6
  72. package/src/components/icons/ServiceIcon.jsx +6 -6
  73. package/src/components/icons/SlotIcon.jsx +6 -6
  74. package/src/components/icons/SocialDiscordIcon.jsx +6 -6
  75. package/src/components/icons/SocialGitHubIcon.jsx +6 -6
  76. package/src/components/icons/SocialGitLabIcon.jsx +6 -6
  77. package/src/components/icons/SocialLinkedInIcon.jsx +6 -6
  78. package/src/components/icons/SocialNPMIcon.jsx +6 -6
  79. package/src/components/icons/SocialTwitterIcon.jsx +6 -6
  80. package/src/components/icons/StopIcon.jsx +6 -6
  81. package/src/components/icons/SwitchIcon.jsx +6 -6
  82. package/src/components/icons/TeamsIcon.jsx +6 -6
  83. package/src/components/icons/TerminalIcon.jsx +6 -6
  84. package/src/components/icons/TwoUsersIcon.jsx +6 -6
  85. package/src/components/icons/UpgradeIcon.jsx +7 -7
  86. package/src/components/icons/UserIcon.jsx +6 -6
  87. package/src/components/icons/UserRemoveIcon.jsx +6 -6
  88. package/src/components/icons/UserRoleIcon.jsx +6 -6
  89. package/src/components/icons/WorkspaceDynamicIcon.jsx +6 -6
  90. package/src/components/icons/WorkspaceEmptyIcon.jsx +4 -4
  91. package/src/components/icons/WorkspaceFailIcon.jsx +7 -7
  92. package/src/components/icons/WorkspaceGitHubIcon.jsx +7 -7
  93. package/src/components/icons/WorkspaceLoadingIcon.jsx +4 -4
  94. package/src/components/icons/WorkspaceReadyIcon.jsx +7 -7
  95. package/src/components/icons/WorkspaceStaticIcon.jsx +6 -6
  96. package/src/components/icons/index.js +2 -0
  97. package/src/stories/PlatformaticIcon.stories.jsx +32 -26
  98. package/dist/assets/index-3e148026.js +0 -206
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-3e148026.js"></script>
7
+ <script type="module" crossorigin src="/assets/index-68be35eb.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index-6fadf156.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.105",
4
+ "version": "0.1.107",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/FollowUs.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .containerFrontpage {
2
- @apply flex w-full items-center;
2
+ @apply flex w-full items-center gap-x-2 md:gap-x-8;
3
3
  }
4
4
  .containerDashboard {
5
5
  @apply flex items-center;
@@ -11,7 +11,7 @@
11
11
  @apply text-xs mr-2;
12
12
  }
13
13
  .iconFrontpage {
14
- @apply text-white mx-4 text-xl hover:cursor-pointer hover:scale-125;
14
+ @apply text-white text-xl hover:cursor-pointer hover:scale-125;
15
15
  }
16
16
  .iconDashboard {
17
17
  @apply mx-1 hover:cursor-pointer hover:scale-125;
package/src/components/ListElement.module.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .container {
2
- @apply flex flex-col my-4
2
+ @apply flex flex-col my-4 w-full;
3
3
  }
4
4
  .margin-medium {
5
5
  @apply my-4
@@ -14,5 +14,5 @@
14
14
  @apply flex gap-x-2 items-center w-full;
15
15
  }
16
16
  .textCol {
17
- @apply flex flex-col text-justify w-full ml-8;
17
+ @apply flex flex-col text-justify w-full pl-8;
18
18
  }
package/src/components/PlatformaticIcon.jsx CHANGED
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
4
4
  import ReactTooltip from 'react-tooltip'
5
5
  import Icons from './icons'
6
6
  import styles from './PlatformaticIcon.module.css'
7
- import { COLORS_ICON, SIZES } from './constants'
7
+ import { COLORS_ICON, MAIN_GREEN, SIZES, SMALL } from './constants'
8
8
 
9
9
  function PlatformaticIcon ({ iconName, color, onClick, size, classes, tip, ...rest }) {
10
10
  let icon = <></>
@@ -58,10 +58,10 @@ PlatformaticIcon.propTypes = {
58
58
 
59
59
  PlatformaticIcon.defaultProps = {
60
60
  iconName: '',
61
- color: 'main-green',
62
- size: 'small',
61
+ color: MAIN_GREEN,
62
+ size: SMALL,
63
63
  onClick: () => {},
64
- classes: null,
64
+ classes: '',
65
65
  tip: ''
66
66
  }
67
67
 
package/src/components/forms/RadioGroup.jsx CHANGED
@@ -16,7 +16,7 @@ function RadioGroup ({ name, radios, errorMessage, onChange, disabled, value })
16
16
  {radios.map(radio => (
17
17
  <div className={radioContainerClass} key={radio.value}>
18
18
  <input className={styles.radio} type='radio' name={name} value={radio.value} onChange={onChange} disabled={disabled} checked={radio.value === value} />
19
- <label className={styles.label} for={radio.name}>{radio.label}</label>
19
+ <label className={styles.label} htmlFor={radio.name}>{radio.label}</label>
20
20
  </div>
21
21
  ))}
22
22
  </div>
package/src/components/forms/TextArea.jsx CHANGED
@@ -16,7 +16,7 @@ function TextArea ({ placeholder, value, name, borderColor, errorMessage, onChan
16
16
  return (
17
17
  <div className={styles.container}>
18
18
  <div className={className}>
19
- <textarea name={name} className={textAreaClassName} onChange={onChange} disabled={disabled} placeholder={placeholder} rows={rows} cols={cols}>{value}</textarea>
19
+ <textarea name={name} className={textAreaClassName} onChange={onChange} disabled={disabled} placeholder={placeholder} rows={rows} cols={cols} value={value} />
20
20
  {afterIcon && <div className={styles.afterIcon}><PlatformaticIcon iconName={afterIcon.iconName} color={afterIcon.color} data-testid='after-icon' onClick={null} /></div>}
21
21
  </div>
22
22
  {showError && <span className={commonStyles['error-message']}>{errorMessage}</span>}
package/src/components/icons/AddIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const AddIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'small':
11
+ case SMALL:
12
12
  icon = (
13
13
  <svg
14
14
  width={16}
@@ -23,7 +23,7 @@ const AddIcon = ({ color, size }) => {
23
23
  </svg>
24
24
  )
25
25
  break
26
- case 'medium':
26
+ case MEDIUM:
27
27
  icon = (
28
28
  <svg
29
29
  width={24}
@@ -38,7 +38,7 @@ const AddIcon = ({ color, size }) => {
38
38
  </svg>
39
39
  )
40
40
  break
41
- case 'large':
41
+ case LARGE:
42
42
  icon = (
43
43
  <svg
44
44
  width={40}
@@ -72,8 +72,8 @@ AddIcon.propTypes = {
72
72
  }
73
73
 
74
74
  AddIcon.defaultProps = {
75
- color: 'main-dark-blue',
76
- size: 'medium'
75
+ color: MAIN_DARK_BLUE,
76
+ size: MEDIUM
77
77
  }
78
78
 
79
79
  export default AddIcon
package/src/components/icons/AlertIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, ERROR_RED } from '../constants'
5
5
 
6
6
  const AlertIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'small':
11
+ case SMALL:
12
12
  icon = (
13
13
  <svg
14
14
  width={16}
@@ -24,7 +24,7 @@ const AlertIcon = ({ color, size }) => {
24
24
  </svg>
25
25
  )
26
26
  break
27
- case 'medium':
27
+ case MEDIUM:
28
28
  icon = (
29
29
  <svg
30
30
  width={24}
@@ -40,7 +40,7 @@ const AlertIcon = ({ color, size }) => {
40
40
  </svg>
41
41
  )
42
42
  break
43
- case 'large':
43
+ case LARGE:
44
44
  icon = (
45
45
  <svg
46
46
  width={40}
@@ -75,8 +75,8 @@ AlertIcon.propTypes = {
75
75
  }
76
76
 
77
77
  AlertIcon.defaultProps = {
78
- color: 'error-red',
79
- size: 'medium'
78
+ color: ERROR_RED,
79
+ size: MEDIUM
80
80
  }
81
81
 
82
82
  export default AlertIcon
package/src/components/icons/AllInOneIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const AllInOneIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'small':
11
+ case SMALL:
12
12
  icon = (
13
13
  <svg
14
14
  width={16}
@@ -34,7 +34,7 @@ const AllInOneIcon = ({ color, size }) => {
34
34
  </svg>
35
35
  )
36
36
  break
37
- case 'medium':
37
+ case MEDIUM:
38
38
  icon = (
39
39
  <svg
40
40
  width={24}
@@ -60,7 +60,7 @@ const AllInOneIcon = ({ color, size }) => {
60
60
  </svg>
61
61
  )
62
62
  break
63
- case 'large':
63
+ case LARGE:
64
64
  icon = (
65
65
  <svg
66
66
  width={40}
@@ -105,8 +105,8 @@ AllInOneIcon.propTypes = {
105
105
  }
106
106
 
107
107
  AllInOneIcon.defaultProps = {
108
- color: 'main-dark-blue',
109
- size: 'medium'
108
+ color: MAIN_DARK_BLUE,
109
+ size: MEDIUM
110
110
  }
111
111
 
112
112
  export default AllInOneIcon
package/src/components/icons/ApiCloudIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const ApiCloudIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'small':
11
+ case SMALL:
12
12
  icon = (
13
13
  <svg
14
14
  width={16}
@@ -28,7 +28,7 @@ const ApiCloudIcon = ({ color, size }) => {
28
28
  </svg>
29
29
  )
30
30
  break
31
- case 'medium':
31
+ case MEDIUM:
32
32
  icon = (
33
33
  <svg
34
34
  width={24}
@@ -48,7 +48,7 @@ const ApiCloudIcon = ({ color, size }) => {
48
48
  </svg>
49
49
  )
50
50
  break
51
- case 'large':
51
+ case LARGE:
52
52
  icon = (
53
53
  <svg
54
54
  width={40}
@@ -87,8 +87,8 @@ ApiCloudIcon.propTypes = {
87
87
  }
88
88
 
89
89
  ApiCloudIcon.defaultProps = {
90
- color: 'main-dark-blue',
91
- size: 'medium'
90
+ color: MAIN_DARK_BLUE,
91
+ size: MEDIUM
92
92
  }
93
93
 
94
94
  export default ApiCloudIcon
package/src/components/icons/ApiEmptyIcon.jsx CHANGED
@@ -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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const ApiEmptyIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`] + ' '
@@ -9,7 +9,7 @@ const ApiEmptyIcon = ({ color, size }) => {
9
9
  let icon = <></>
10
10
 
11
11
  switch (size) {
12
- case 'extra-large':
12
+ case EXTRA_LARGE:
13
13
  icon = (
14
14
  <svg
15
15
  width={80}
@@ -135,8 +135,8 @@ ApiEmptyIcon.propTypes = {
135
135
  }
136
136
 
137
137
  ApiEmptyIcon.defaultProps = {
138
- color: 'main-dark-blue',
139
- size: 'medium'
138
+ color: MAIN_DARK_BLUE,
139
+ size: MEDIUM
140
140
  }
141
141
 
142
142
  export default ApiEmptyIcon
package/src/components/icons/ApiIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const ApiIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'small':
11
+ case SMALL:
12
12
  icon = (
13
13
  <svg
14
14
  width={16}
@@ -25,7 +25,7 @@ const ApiIcon = ({ color, size }) => {
25
25
  </svg>
26
26
  )
27
27
  break
28
- case 'medium':
28
+ case MEDIUM:
29
29
  icon = (
30
30
  <svg
31
31
  width={24}
@@ -42,7 +42,7 @@ const ApiIcon = ({ color, size }) => {
42
42
  </svg>
43
43
  )
44
44
  break
45
- case 'large':
45
+ case LARGE:
46
46
  icon = (
47
47
  <svg
48
48
  width={40}
@@ -78,8 +78,8 @@ ApiIcon.propTypes = {
78
78
  }
79
79
 
80
80
  ApiIcon.defaultProps = {
81
- color: 'main-dark-blue',
82
- size: 'medium'
81
+ color: MAIN_DARK_BLUE,
82
+ size: MEDIUM
83
83
  }
84
84
 
85
85
  export default ApiIcon
package/src/components/icons/AppEmptyIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const AppEmptyIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'extra-large':
11
+ case EXTRA_LARGE:
12
12
  icon = (
13
13
  <svg width={105} height={105} viewBox='0 0 105 105' fill='none' xmlns='http://www.w3.org/2000/svg' className={className}>
14
14
  <path d='M45.1159 59.7372H31.3467C30.7944 59.7372 30.3467 60.1849 30.3467 60.7372V87.0941C30.3467 87.6464 30.7944 88.0941 31.3467 88.0941H73.6544C74.2067 88.0941 74.6544 87.6464 74.6544 87.0941V60.7372C74.6544 60.1849 74.2067 59.7372 73.6544 59.7372H59.8851' stroke='none' strokeWidth={3} strokeLinecap='round' />
@@ -46,8 +46,8 @@ AppEmptyIcon.propTypes = {
46
46
  }
47
47
 
48
48
  AppEmptyIcon.defaultProps = {
49
- color: 'main-dark-blue',
50
- size: 'medium'
49
+ color: MAIN_DARK_BLUE,
50
+ size: MEDIUM
51
51
  }
52
52
 
53
53
  export default AppEmptyIcon
package/src/components/icons/AppIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const AppIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'small':
11
+ case SMALL:
12
12
  icon = (
13
13
  <svg
14
14
  width={16}
@@ -26,7 +26,7 @@ const AppIcon = ({ color, size }) => {
26
26
  </svg>
27
27
  )
28
28
  break
29
- case 'medium':
29
+ case MEDIUM:
30
30
  icon = (
31
31
  <svg
32
32
  width={24}
@@ -43,7 +43,7 @@ const AppIcon = ({ color, size }) => {
43
43
  </svg>
44
44
  )
45
45
  break
46
- case 'large':
46
+ case LARGE:
47
47
  icon = (
48
48
  <svg
49
49
  width={40}
@@ -79,8 +79,8 @@ AppIcon.propTypes = {
79
79
  }
80
80
 
81
81
  AppIcon.defaultProps = {
82
- color: 'main-dark-blue',
83
- size: 'medium'
82
+ color: MAIN_DARK_BLUE,
83
+ size: MEDIUM
84
84
  }
85
85
 
86
86
  export default AppIcon
package/src/components/icons/AppListIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, MEDIUM, EXTRA_LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const AppListIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'extra-large':
11
+ case EXTRA_LARGE:
12
12
  icon = (
13
13
  <svg
14
14
  width={81}
@@ -97,8 +97,8 @@ AppListIcon.propTypes = {
97
97
  }
98
98
 
99
99
  AppListIcon.defaultProps = {
100
- color: 'main-dark-blue',
101
- size: 'medium'
100
+ color: MAIN_DARK_BLUE,
101
+ size: MEDIUM
102
102
  }
103
103
 
104
104
  export default AppListIcon
package/src/components/icons/ArrowDownFullIcon.jsx CHANGED
@@ -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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const ArrowDownFullIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`] + ' '
@@ -9,7 +9,7 @@ const ArrowDownFullIcon = ({ color, size }) => {
9
9
  let icon = <></>
10
10
 
11
11
  switch (size) {
12
- case 'small':
12
+ case SMALL:
13
13
  icon = (
14
14
  <svg
15
15
  width={16}
@@ -23,7 +23,7 @@ const ArrowDownFullIcon = ({ color, size }) => {
23
23
  </svg>
24
24
  )
25
25
  break
26
- case 'medium':
26
+ case MEDIUM:
27
27
  icon = (
28
28
  <svg
29
29
  width={24}
@@ -37,7 +37,7 @@ const ArrowDownFullIcon = ({ color, size }) => {
37
37
  </svg>
38
38
  )
39
39
  break
40
- case 'large':
40
+ case LARGE:
41
41
  icon = (
42
42
  <svg
43
43
  width={40}
@@ -70,8 +70,8 @@ ArrowDownFullIcon.propTypes = {
70
70
  }
71
71
 
72
72
  ArrowDownFullIcon.defaultProps = {
73
- color: 'main-dark-blue',
74
- size: 'medium'
73
+ color: MAIN_DARK_BLUE,
74
+ size: MEDIUM
75
75
  }
76
76
 
77
77
  export default ArrowDownFullIcon
package/src/components/icons/ArrowDownIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const ArrowDownIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'small':
11
+ case SMALL:
12
12
  icon = (
13
13
  <svg
14
14
  width={16}
@@ -22,7 +22,7 @@ const ArrowDownIcon = ({ color, size }) => {
22
22
  </svg>
23
23
  )
24
24
  break
25
- case 'medium':
25
+ case MEDIUM:
26
26
  icon = (
27
27
  <svg
28
28
  width={24}
@@ -36,7 +36,7 @@ const ArrowDownIcon = ({ color, size }) => {
36
36
  </svg>
37
37
  )
38
38
  break
39
- case 'large':
39
+ case LARGE:
40
40
  icon = (
41
41
  <svg
42
42
  width={40}
@@ -69,8 +69,8 @@ ArrowDownIcon.propTypes = {
69
69
  }
70
70
 
71
71
  ArrowDownIcon.defaultProps = {
72
- color: 'main-dark-blue',
73
- size: 'medium'
72
+ color: MAIN_DARK_BLUE,
73
+ size: MEDIUM
74
74
  }
75
75
 
76
76
  export default ArrowDownIcon
package/src/components/icons/ArrowLeftIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const ArrowLeftIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'small':
11
+ case SMALL:
12
12
  icon = (
13
13
  <svg
14
14
  width={16}
@@ -22,7 +22,7 @@ const ArrowLeftIcon = ({ color, size }) => {
22
22
  </svg>
23
23
  )
24
24
  break
25
- case 'medium':
25
+ case MEDIUM:
26
26
  icon = (
27
27
  <svg
28
28
  width={24}
@@ -36,7 +36,7 @@ const ArrowLeftIcon = ({ color, size }) => {
36
36
  </svg>
37
37
  )
38
38
  break
39
- case 'large':
39
+ case LARGE:
40
40
  icon = (
41
41
  <svg
42
42
  width={40}
@@ -69,8 +69,8 @@ ArrowLeftIcon.propTypes = {
69
69
  }
70
70
 
71
71
  ArrowLeftIcon.defaultProps = {
72
- color: 'main-dark-blue',
73
- size: 'medium'
72
+ color: MAIN_DARK_BLUE,
73
+ size: MEDIUM
74
74
  }
75
75
 
76
76
  export default ArrowLeftIcon
package/src/components/icons/ArrowRightIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const ArrowRightIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'small':
11
+ case SMALL:
12
12
  icon = (
13
13
  <svg
14
14
  width={16}
@@ -22,7 +22,7 @@ const ArrowRightIcon = ({ color, size }) => {
22
22
  </svg>
23
23
  )
24
24
  break
25
- case 'medium':
25
+ case MEDIUM:
26
26
  icon = (
27
27
  <svg
28
28
  width={24}
@@ -36,7 +36,7 @@ const ArrowRightIcon = ({ color, size }) => {
36
36
  </svg>
37
37
  )
38
38
  break
39
- case 'large':
39
+ case LARGE:
40
40
  icon = (
41
41
  <svg
42
42
  width={40}
@@ -69,8 +69,8 @@ ArrowRightIcon.propTypes = {
69
69
  }
70
70
 
71
71
  ArrowRightIcon.defaultProps = {
72
- color: 'main-dark-blue',
73
- size: 'medium'
72
+ color: MAIN_DARK_BLUE,
73
+ size: MEDIUM
74
74
  }
75
75
 
76
76
  export default ArrowRightIcon
package/src/components/icons/ArrowUpIcon.jsx CHANGED
@@ -1,14 +1,14 @@
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, SIZES } from '../constants'
4
+ import { COLORS_ICON, SIZES, SMALL, MEDIUM, LARGE, MAIN_DARK_BLUE } from '../constants'
5
5
 
6
6
  const ArrowUpIcon = ({ color, size }) => {
7
7
  const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
8
  let icon = <></>
9
9
 
10
10
  switch (size) {
11
- case 'small':
11
+ case SMALL:
12
12
  icon = (
13
13
  <svg
14
14
  width={16}
@@ -22,7 +22,7 @@ const ArrowUpIcon = ({ color, size }) => {
22
22
  </svg>
23
23
  )
24
24
  break
25
- case 'medium':
25
+ case MEDIUM:
26
26
  icon = (
27
27
  <svg
28
28
  width={24}
@@ -36,7 +36,7 @@ const ArrowUpIcon = ({ color, size }) => {
36
36
  </svg>
37
37
  )
38
38
  break
39
- case 'large':
39
+ case LARGE:
40
40
  icon = (
41
41
  <svg
42
42
  width={40}
@@ -69,8 +69,8 @@ ArrowUpIcon.propTypes = {
69
69
  }
70
70
 
71
71
  ArrowUpIcon.defaultProps = {
72
- color: 'main-dark-blue',
73
- size: 'medium'
72
+ color: MAIN_DARK_BLUE,
73
+ size: MEDIUM
74
74
  }
75
75
 
76
76
  export default ArrowUpIcon