@platformatic/ui-components 0.1.91 → 0.1.93

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 (27) hide show
  1. package/dist/assets/index.d4907a34.js +206 -0
  2. package/dist/index.html +1 -1
  3. package/index.js +2 -0
  4. package/package.json +1 -1
  5. package/src/components/Logo.jsx +9 -5
  6. package/src/components/Logo.module.css +4 -1
  7. package/src/components/LogoDropDown.jsx +82 -0
  8. package/src/components/LogoDropDown.module.css +30 -0
  9. package/src/components/Modal.jsx +68 -10
  10. package/src/components/Modal.module.css +7 -1
  11. package/src/components/backgrounds/AppBackgroundIcon.jsx +12 -12
  12. package/src/components/backgrounds/LensBackgroundIcon.jsx +2 -2
  13. package/src/components/backgrounds/TimerBackgroundIcon.jsx +5 -5
  14. package/src/components/constants.js +8 -3
  15. package/src/components/icons/CheckListIcon.jsx +98 -0
  16. package/src/components/icons/SlotIcon.jsx +88 -0
  17. package/src/components/icons/TeamsIcon.jsx +91 -0
  18. package/src/components/icons/WorkspaceEmptyIcon.jsx +1 -1
  19. package/src/components/icons/index.js +7 -0
  20. package/src/components/logos/AdvancedLogo.jsx +58 -0
  21. package/src/components/logos/BasicLogo.jsx +22 -20
  22. package/src/components/logos/FreeLogo.jsx +22 -20
  23. package/src/components/logos/ProLogo.jsx +60 -0
  24. package/src/components/logos/index.js +5 -1
  25. package/src/stories/LogoDropDown.stories.jsx +43 -0
  26. package/src/stories/Modal.stories.jsx +15 -3
  27. package/dist/assets/index.e3fdc2c7.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.e3fdc2c7.js"></script>
7
+ <script type="module" crossorigin src="/assets/index.d4907a34.js"></script>
8
8
  <link rel="stylesheet" href="/assets/index.1ec7065b.css">
9
9
  </head>
10
10
  <body>
package/index.js CHANGED
@@ -23,6 +23,7 @@ import Loadable from './src/components/Loadable'
23
23
  import LoadingSpinner from './src/components/LoadingSpinner'
24
24
  import LoginButton from './src/components/LoginButton'
25
25
  import Logo from './src/components/Logo'
26
+ import LogoDropDown from './src/components/LogoDropDown'
26
27
  import Logos from './src/components/logos'
27
28
  import Modal from './src/components/Modal'
28
29
  import PlatformaticIcon from './src/components/PlatformaticIcon'
@@ -62,6 +63,7 @@ export {
62
63
  LoadingSpinner,
63
64
  LoginButton,
64
65
  Logo,
66
+ LogoDropDown,
65
67
  Modal,
66
68
  PlatformaticIcon,
67
69
  Playground,
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.91",
4
+ "version": "0.1.93",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Logo.jsx CHANGED
@@ -1,11 +1,13 @@
1
1
  import React from 'react'
2
2
  import styles from './Logo.module.css'
3
- export default function Logo ({ width = 107, heigth = 86, color = 'white' }) {
3
+ export default function Logo ({ width = 107, height = 86, color = 'white', fillColor = 'none' }) {
4
4
  const className = styles[`${color}`]
5
+ const filledClassName = styles[`filled--${fillColor}`]
6
+
5
7
  return (
6
8
  <svg
7
9
  width={width}
8
- height={heigth}
10
+ height={height}
9
11
  viewBox='0 0 107 86'
10
12
  fill='none'
11
13
  xmlns='http://www.w3.org/2000/svg'
@@ -18,6 +20,8 @@ export default function Logo ({ width = 107, heigth = 86, color = 'white' }) {
18
20
  strokeWidth={4.21053}
19
21
  strokeLinecap='round'
20
22
  strokeLinejoin='round'
23
+ fill='none'
24
+ className={filledClassName}
21
25
  />
22
26
  <path
23
27
  d='M41.4979 35.2219L33.6299 37.9838L37.0924 45.3197'
@@ -34,7 +38,7 @@ export default function Logo ({ width = 107, heigth = 86, color = 'white' }) {
34
38
  strokeLinejoin='round'
35
39
  />
36
40
  <path
37
- opacity='0.2'
41
+ opacity={0.2}
38
42
  d='M24.498 79.7146V83.0001'
39
43
  stroke='#21FA90'
40
44
  strokeWidth={4.21053}
@@ -42,7 +46,7 @@ export default function Logo ({ width = 107, heigth = 86, color = 'white' }) {
42
46
  strokeLinejoin='round'
43
47
  />
44
48
  <path
45
- opacity='0.4'
49
+ opacity={0.4}
46
50
  d='M24.5283 69.3757V74.5658'
47
51
  stroke='#21FA90'
48
52
  strokeWidth={4.21053}
@@ -50,7 +54,7 @@ export default function Logo ({ width = 107, heigth = 86, color = 'white' }) {
50
54
  strokeLinejoin='round'
51
55
  />
52
56
  <path
53
- opacity='0.7'
57
+ opacity={0.7}
54
58
  d='M24.498 55.3254V64.0028'
55
59
  stroke='#21FA90'
56
60
  strokeWidth={4.21053}
package/src/components/Logo.module.css CHANGED
@@ -3,4 +3,7 @@
3
3
  }
4
4
  .main-dark-blue > path[id='platformatic-cloud']{
5
5
  @apply stroke-main-dark-blue
6
- }
6
+ }
7
+ .filled--main-dark-blue {
8
+ @apply fill-main-dark-blue;
9
+ }
package/src/components/LogoDropDown.jsx ADDED
@@ -0,0 +1,82 @@
1
+ 'use strict'
2
+ import React, { useState } from 'react'
3
+ import PropTypes from 'prop-types'
4
+ import styles from './LogoDropDown.module.css'
5
+ import PlatformaticIcon from './PlatformaticIcon'
6
+ import { MAIN_DARK_BLUE, SMALL, WHITE } from './constants'
7
+ import Logo from './Logo'
8
+ function LogoDropDown ({ itemSelected, items, width, height }) {
9
+ const [open, setOpen] = useState(false)
10
+
11
+ function handleOpen () {
12
+ setOpen(!open)
13
+ }
14
+
15
+ function getItemsSelected () {
16
+ return items.find(item => item.id === itemSelected)?.name
17
+ }
18
+
19
+ function onClick (callback) {
20
+ handleOpen()
21
+ callback()
22
+ }
23
+
24
+ return (
25
+ <div className={styles.container}>
26
+ <div className={styles.dropDown}>
27
+ <div className={styles.logoContainer}>
28
+ <Logo width={width} height={height} color={WHITE} fillColor={MAIN_DARK_BLUE} />
29
+ </div>
30
+ <div className={styles.selectorContainer} style={{ left: width / 2, paddingLeft: width / 3 }} onClick={() => handleOpen()}>
31
+ <p className={styles.header}>{getItemsSelected()}</p>
32
+ {!open && <PlatformaticIcon iconName='ArrowDownIcon' color={MAIN_DARK_BLUE} onClick={null} />}
33
+ {open && <PlatformaticIcon iconName='ArrowUpIcon' color={MAIN_DARK_BLUE} onClick={null} />}
34
+ </div>
35
+ </div>
36
+ {open && (
37
+ <div className={styles.menuContainer}>
38
+ <div className={styles.menu} style={{ width: `calc(100% - ${width}px)` }}>
39
+ {items.map((item, index) => {
40
+ return (
41
+ <div className={styles.item} key={index} onClick={() => onClick(item.handleClick)}>
42
+ <PlatformaticIcon iconName='OrganizationIcon' color={MAIN_DARK_BLUE} size={SMALL} onClick={null} /><span className={styles.itemName}>{item.name}</span>
43
+ </div>
44
+ )
45
+ })}
46
+ </div>
47
+ </div>
48
+ )}
49
+ </div>
50
+ )
51
+ }
52
+
53
+ LogoDropDown.propTypes = {
54
+ /**
55
+ * width
56
+ */
57
+ width: PropTypes.number,
58
+ /**
59
+ * height
60
+ */
61
+ height: PropTypes.number,
62
+ /**
63
+ * itemSelected
64
+ */
65
+ itemSelected: PropTypes.string,
66
+ /**
67
+ * items
68
+ */
69
+ items: PropTypes.arrayOf(PropTypes.shape({
70
+ id: PropTypes.string.isRequired,
71
+ name: PropTypes.string,
72
+ handleClick: PropTypes.func
73
+ }))
74
+ }
75
+
76
+ LogoDropDown.defaultProps = {
77
+ width: 71,
78
+ height: 56,
79
+ itemSelected: '',
80
+ items: []
81
+ }
82
+ export default LogoDropDown
package/src/components/LogoDropDown.module.css ADDED
@@ -0,0 +1,30 @@
1
+ .container {
2
+ @apply relative min-w-[263px] max-w-[263px];
3
+ }
4
+ .menuContainer {
5
+ @apply min-w-[263px] max-w-[263px] absolute top-[43px];
6
+ }
7
+ .dropDown {
8
+ @apply relative flex items-center;
9
+ }
10
+ .logoContainer {
11
+ @apply relative z-10;
12
+ }
13
+ .selectorContainer {
14
+ @apply absolute top-[50%] translate-y-[-50%] flex items-center gap-x-1 bg-white p-0.5 pr-3 rounded-full mt-[0.5px] cursor-pointer;
15
+ }
16
+ .header {
17
+ @apply flex items-center hover:cursor-pointer pr-2 font-light text-main-dark-blue ml-4 text-ellipsis overflow-hidden whitespace-nowrap min-w-[155px] max-w-[155px] w-full;
18
+ }
19
+ .picture {
20
+ @apply border border-transparent rounded-full mr-2;
21
+ }
22
+ .menu {
23
+ @apply absolute top-0 right-0 border border-main-dark-blue p-0 z-10 text-sm bg-white rounded-md w-fit z-20;
24
+ }
25
+ .item {
26
+ @apply inline-flex gap-x-2 py-2 px-5 first:border-t-0 tracking-wide text-sm font-normal leading-4 hover:font-semibold hover:cursor-pointer border-t text-main-dark-blue w-full;
27
+ }
28
+ .itemName {
29
+ @apply text-ellipsis overflow-hidden whitespace-nowrap;
30
+ }
package/src/components/Modal.jsx CHANGED
@@ -7,10 +7,25 @@ import Logo from './Logo'
7
7
  import Logos from './logos'
8
8
  import styles from './Modal.module.css'
9
9
  import commonStyles from './Common.module.css'
10
- import { MODAL_SIZES, SMALL, MODAL_LAYOUTS, MODAL_COVER, MODAL_POPUP, MAIN_DARK_BLUE, BACKGROUND_COLOR_OPAQUE, LARGE, PROFILE, FREE, BASIC } from './constants'
10
+ import {
11
+ MODAL_SIZES,
12
+ SMALL,
13
+ MODAL_LAYOUTS,
14
+ MODAL_COVER,
15
+ MODAL_POPUP,
16
+ MAIN_DARK_BLUE,
17
+ BACKGROUND_COLOR_OPAQUE,
18
+ LARGE,
19
+ PROFILES,
20
+ FREE,
21
+ BASIC,
22
+ MODAL_FULL_DARK,
23
+ MODAL_FULL_LIGHT,
24
+ WHITE
25
+ } from './constants'
11
26
  import PlatformaticIcon from './PlatformaticIcon'
12
27
 
13
- function Modal ({ setIsOpen, title, layout, children, size, profile }) {
28
+ function Modal ({ setIsOpen, title, layout, children, size, profile, backgroundClassName }) {
14
29
  let contentFullscreen
15
30
  let titleFullscreen
16
31
  let modalClassName = `${styles.modal}`
@@ -20,11 +35,26 @@ function Modal ({ setIsOpen, title, layout, children, size, profile }) {
20
35
  let buttonFullRoundedClassName
21
36
 
22
37
  const headerClassName = styles[`header--${layout}`]
23
- if (MODAL_COVER === layout) {
24
- contentFullscreen = styles[`content--${layout}`]
25
- titleFullscreen = styles[`title--${layout}`]
26
- buttonFullRoundedClassName = `${styles['close--cover']} `
27
- buttonFullRoundedClassName += commonStyles['background-color-light-blue']
38
+ let modalCoverClassName = `${styles.container} ${styles.fullscreen} `
39
+ switch (layout) {
40
+ case MODAL_COVER:
41
+ contentFullscreen = styles[`content--${layout}`]
42
+ titleFullscreen = styles[`title--${layout}`]
43
+ buttonFullRoundedClassName = `${styles['close--cover']} `
44
+ buttonFullRoundedClassName += commonStyles['background-color-light-blue']
45
+ modalCoverClassName += commonStyles['background-color-light-blue']
46
+ break
47
+
48
+ case MODAL_FULL_DARK:
49
+ modalCoverClassName += commonStyles['background-color-main-dark-blue']
50
+ modalCoverClassName += ` ${backgroundClassName}`
51
+ break
52
+ case MODAL_FULL_LIGHT:
53
+ modalCoverClassName += commonStyles['background-color-light-blue']
54
+ break
55
+
56
+ default:
57
+ break
28
58
  }
29
59
 
30
60
  useEscapeKey(() => setIsOpen(false))
@@ -62,7 +92,7 @@ function Modal ({ setIsOpen, title, layout, children, size, profile }) {
62
92
 
63
93
  case MODAL_COVER:
64
94
  whichModal = (
65
- <div className={`${styles.container} ${styles.fullscreen}`}>
95
+ <div className={modalCoverClassName}>
66
96
  <div className={headerClassName}>
67
97
  <ButtonFullRounded
68
98
  className={buttonFullRoundedClassName}
@@ -85,6 +115,29 @@ function Modal ({ setIsOpen, title, layout, children, size, profile }) {
85
115
  )
86
116
  break
87
117
 
118
+ case MODAL_FULL_LIGHT:
119
+ case MODAL_FULL_DARK:
120
+ whichModal = (
121
+ <div className={modalCoverClassName}>
122
+ <div className={headerClassName}>
123
+ <ButtonFullRounded
124
+ className={buttonFullRoundedClassName}
125
+ iconName='CircleCloseIcon'
126
+ iconSize={LARGE}
127
+ iconColor={layout === MODAL_FULL_LIGHT ? MAIN_DARK_BLUE : WHITE}
128
+ hoverEffect={BACKGROUND_COLOR_OPAQUE}
129
+ onClick={() => { setIsOpen(false) }}
130
+ bordered={false}
131
+ alt='Close'
132
+ />
133
+ </div>
134
+ <div className={contentFullscreen}>
135
+ <div>{children}</div>
136
+ </div>
137
+ </div>
138
+ )
139
+ break
140
+
88
141
  default:
89
142
  break
90
143
  }
@@ -115,7 +168,11 @@ Modal.propTypes = {
115
168
  /**
116
169
  * profile
117
170
  */
118
- profile: PropTypes.oneOf(PROFILE)
171
+ profile: PropTypes.oneOf(PROFILES),
172
+ /**
173
+ * backgroundClassName
174
+ */
175
+ backgroundClassName: PropTypes.string
119
176
  }
120
177
 
121
178
  Modal.defaultProps = {
@@ -124,7 +181,8 @@ Modal.defaultProps = {
124
181
  title: '',
125
182
  layout: MODAL_POPUP,
126
183
  size: SMALL,
127
- profile: ''
184
+ profile: '',
185
+ backgroundClassName: ''
128
186
  }
129
187
 
130
188
  export default Modal
package/src/components/Modal.module.css CHANGED
@@ -15,11 +15,13 @@
15
15
  @apply bg-light-blue;
16
16
  }
17
17
  .fullscreen {
18
- @apply fixed top-0 left-0 bg-light-blue h-screen w-full min-h-screen min-w-full py-4 pl-20 pr-4 overflow-y-auto;
18
+ @apply fixed top-0 left-0 h-screen w-full min-h-screen min-w-full py-4 pl-20 pr-4 overflow-y-auto;
19
19
  }
20
20
  .header--popup {
21
21
  @apply flex justify-between items-center;
22
22
  }
23
+ .header--full-dark,
24
+ .header--full-light,
23
25
  .header--cover {
24
26
  @apply flex justify-end;
25
27
  }
@@ -29,6 +31,8 @@
29
31
  .title {
30
32
  @apply font-bold text-[20px];
31
33
  }
34
+ .content--full-dark,
35
+ .header--full-light,
32
36
  .content--cover {
33
37
  @apply h-auto w-full mt-4 mb-10;
34
38
  }
@@ -44,6 +48,8 @@
44
48
  .modal--full-width {
45
49
  @apply w-screen min-w-full;
46
50
  }
51
+ .close--full-dark,
52
+ .header--full-light,
47
53
  .close--cover {
48
54
  @apply mt-4 mr-4;
49
55
  }
package/src/components/backgrounds/AppBackgroundIcon.jsx CHANGED
@@ -4,18 +4,18 @@ const AppBackgroundIcon = () => {
4
4
  return (
5
5
  <svg width='669' height='669' viewBox='0 0 669 669' fill='none' xmlns='http://www.w3.org/2000/svg'>
6
6
  <g opacity='0.05'>
7
- <path d='M286.786 380.769H217.563C203.362 380.769 191.851 392.28 191.851 406.48V537.332C191.851 551.532 203.362 563.044 217.563 563.044H450.944C465.144 563.044 476.656 551.532 476.656 537.332V406.48C476.656 392.28 465.144 380.769 450.944 380.769H381.721' stroke='white' stroke-width='31' stroke-linecap='round' />
8
- <rect x='286.786' y='563.042' width='94.9349' height='45.5688' stroke='white' stroke-width='31' />
9
- <path d='M239.318 634.324C239.318 620.123 250.829 608.612 265.029 608.612H403.476C417.676 608.612 429.188 620.123 429.188 634.324V642.789H239.318V634.324Z' stroke='white' stroke-width='31' />
10
- <path d='M334.253 357.983L355.567 420.958H424.541L368.74 459.878L390.054 522.853L334.253 483.932L278.451 522.853L299.766 459.878L243.964 420.958H312.939L334.253 357.983Z' stroke='white' stroke-width='31' stroke-linejoin='round' />
11
- <path d='M156.246 476.653H73.1784V310.516' stroke='white' stroke-width='31' stroke-linecap='round' stroke-linejoin='round' />
12
- <path d='M239.315 334.25V120.647' stroke='white' stroke-width='31' stroke-linecap='round' stroke-linejoin='round' />
13
- <path d='M512.253 476.652H595.321V381.718' stroke='white' stroke-width='31' stroke-linecap='round' stroke-linejoin='round' />
14
- <path d='M405.451 346.117V274.916H488.519V144.38' stroke='white' stroke-width='31' stroke-linecap='round' stroke-linejoin='round' />
15
- <circle cx='73.179' cy='263.049' r='47.4675' stroke='white' stroke-width='31' />
16
- <circle cx='239.315' cy='73.1789' r='47.4675' stroke='white' stroke-width='31' />
17
- <circle cx='488.52' cy='96.9123' r='47.4675' stroke='white' stroke-width='31' />
18
- <circle cx='595.321' cy='334.25' r='47.4675' stroke='white' stroke-width='31' />
7
+ <path d='M286.786 380.769H217.563C203.362 380.769 191.851 392.28 191.851 406.48V537.332C191.851 551.532 203.362 563.044 217.563 563.044H450.944C465.144 563.044 476.656 551.532 476.656 537.332V406.48C476.656 392.28 465.144 380.769 450.944 380.769H381.721' stroke='white' stroke-width='31' strokeLinecap='round' />
8
+ <rect x='286.786' y='563.042' width='94.9349' height='45.5688' stroke='white' strokeWidth={31} />
9
+ <path d='M239.318 634.324C239.318 620.123 250.829 608.612 265.029 608.612H403.476C417.676 608.612 429.188 620.123 429.188 634.324V642.789H239.318V634.324Z' stroke='white' strokeWidth={31} />
10
+ <path d='M334.253 357.983L355.567 420.958H424.541L368.74 459.878L390.054 522.853L334.253 483.932L278.451 522.853L299.766 459.878L243.964 420.958H312.939L334.253 357.983Z' stroke='white' strokeWidth={31} strokeLinejoin='round' />
11
+ <path d='M156.246 476.653H73.1784V310.516' stroke='white' strokeWidth={31} strokeLinecap='round' strokeLinejoin='round' />
12
+ <path d='M239.315 334.25V120.647' stroke='white' strokeWidth={31} strokeLinecap='round' strokeLinejoin='round' />
13
+ <path d='M512.253 476.652H595.321V381.718' stroke='white' strokeWidth={31} strokeLinecap='round' strokeLinejoin='round' />
14
+ <path d='M405.451 346.117V274.916H488.519V144.38' stroke='white' strokeWidth={31} strokeLinecap='round' strokeLinejoin='round' />
15
+ <circle cx='73.179' cy='263.049' r='47.4675' stroke='white' strokeWidth={31} />
16
+ <circle cx='239.315' cy='73.1789' r='47.4675' stroke='white' strokeWidth={31} />
17
+ <circle cx='488.52' cy='96.9123' r='47.4675' stroke='white' strokeWidth={31} />
18
+ <circle cx='595.321' cy='334.25' r='47.4675' stroke='white' strokeWidth={31} />
19
19
  </g>
20
20
  </svg>
21
21
  )
package/src/components/backgrounds/LensBackgroundIcon.jsx CHANGED
@@ -4,8 +4,8 @@ const LensBackgroundIcon = () => {
4
4
  return (
5
5
  <svg width='828' height='828' viewBox='0 0 828 828' fill='none' xmlns='http://www.w3.org/2000/svg'>
6
6
  <g opacity='0.05'>
7
- <circle cx='258.75' cy='258.75' r='258.75' transform='matrix(-1 0 0 1 724.5 103.5)' stroke='white' stroke-width='41.4' />
8
- <path d='M103.5 724.5L258.75 569.25' stroke='white' stroke-width='41.4' stroke-linecap='round' stroke-linejoin='round' />
7
+ <circle cx='258.75' cy='258.75' r='258.75' transform='matrix(-1 0 0 1 724.5 103.5)' stroke='white' strokeWidth={41.4} />
8
+ <path d='M103.5 724.5L258.75 569.25' stroke='white' strokeWidth={41.4} strokeLinecap='round' strokeLinejoin='round' />
9
9
  </g>
10
10
  </svg>
11
11
  )
package/src/components/backgrounds/TimerBackgroundIcon.jsx CHANGED
@@ -4,11 +4,11 @@ const TimerBackgroundIcon = () => {
4
4
  return (
5
5
  <svg width='828' height='828' viewBox='0 0 828 828' fill='none' xmlns='http://www.w3.org/2000/svg'>
6
6
  <g opacity='0.05'>
7
- <ellipse cx='409.996' cy='451.818' rx='254.746' ry='255.434' stroke='white' stroke-width='41.4' />
8
- <path d='M409.988 196.385V103.5M317.353 103.5H502.622' stroke='white' stroke-width='41.4' stroke-linecap='round' stroke-linejoin='round' />
9
- <path d='M607.247 255.825L640.369 223.361M607.992 190.15L672.746 256.572' stroke='white' stroke-width='41.4' stroke-linecap='round' stroke-linejoin='round' />
10
- <path d='M222.392 259.332L190.165 225.975M156.897 258.289L223.432 193.66' stroke='white' stroke-width='41.4' stroke-linecap='round' stroke-linejoin='round' />
11
- <path d='M491.054 335.708L409.994 475.036' stroke='white' stroke-width='41.4' stroke-linecap='round' stroke-linejoin='round' />
7
+ <ellipse cx='409.996' cy='451.818' rx='254.746' ry='255.434' stroke='white' strokeWidth={41.4} />
8
+ <path d='M409.988 196.385V103.5M317.353 103.5H502.622' stroke='white' strokeWidth={41.4} strokeLinecap='round' strokeLinejoin='round' />
9
+ <path d='M607.247 255.825L640.369 223.361M607.992 190.15L672.746 256.572' stroke='white' strokeWidth={41.4} strokeLinecap='round' strokeLinejoin='round' />
10
+ <path d='M222.392 259.332L190.165 225.975M156.897 258.289L223.432 193.66' stroke='white' strokeWidth={41.4} strokeLinecap='round' strokeLinejoin='round' />
11
+ <path d='M491.054 335.708L409.994 475.036' stroke='white' strokeWidth={41.4} strokeLinecap='round' strokeLinejoin='round' />
12
12
  </g>
13
13
  </svg>
14
14
 
package/src/components/constants.js CHANGED
@@ -6,6 +6,7 @@ export const DARK_BLUE = 'dark-blue'
6
6
  export const DARK_GREEN = 'dark-green'
7
7
  export const MAIN_GREEN = 'main-green'
8
8
  export const TRANSPARENT = 'transparent'
9
+ export const TERTIARY_BLUE = 'tertiary-blue'
9
10
  export const ERROR_RED = 'error-red'
10
11
  export const WARNING_YELLOW = 'warning-yellow'
11
12
  export const NONE = 'none'
@@ -25,16 +26,20 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, BACKGROUND_COLOR_OPAQUE, UNDER
25
26
  export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
26
27
 
27
28
  export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW]
28
- export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, 'tertiary-blue', TRANSPARENT]
29
+ export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, DARK_BLUE, LIGHT_BLUE, WHITE, ERROR_RED, TERTIARY_BLUE, TRANSPARENT]
29
30
  export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT]
30
31
 
31
32
  export const MODAL_POPUP = 'popup'
32
33
  export const MODAL_COVER = 'cover'
33
- export const MODAL_LAYOUTS = [MODAL_POPUP, MODAL_COVER]
34
+ export const MODAL_FULL_DARK = 'full-dark'
35
+ export const MODAL_FULL_LIGHT = 'full-light'
36
+ export const MODAL_LAYOUTS = [MODAL_POPUP, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT]
34
37
 
35
38
  export const FREE = 'free'
36
39
  export const BASIC = 'basic'
37
- export const PROFILE = ['', FREE, BASIC]
40
+ export const ADVANCED = 'advanced'
41
+ export const PRO = 'pro'
42
+ export const PROFILES = ['', FREE, BASIC, ADVANCED, PRO]
38
43
 
39
44
  export const FONT_BASE = 'base'
40
45
  export const FONT_XS = 'xs'
package/src/components/icons/CheckListIcon.jsx ADDED
@@ -0,0 +1,98 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES } from '../constants'
5
+
6
+ const CheckListIcon = ({ color, size }) => {
7
+ const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
+ let icon = <></>
9
+
10
+ switch (size) {
11
+ case 'small':
12
+ icon = (
13
+ <svg
14
+ width={16}
15
+ height={16}
16
+ viewBox='0 0 16 16'
17
+ fill='none'
18
+ xmlns='http://www.w3.org/2000/svg'
19
+ className={className}
20
+ >
21
+ <path d='M11 3H12C12.5523 3 13 3.44772 13 4V13C13 13.5523 12.5523 14 12 14H4C3.44772 14 3 13.5523 3 13V4C3 3.44771 3.44772 3 4 3H5' stroke='none' />
22
+ <rect x={5} y={2} width={6} height={2} rx={1} stroke='none' />
23
+ <path d='M9 7L11 7' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
24
+ <path d='M9 12L11 12' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
25
+ <path d='M5 6.5L6 7.5L7.5 6' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
26
+ <path d='M9 9.5L11 9.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
27
+ <path d='M5 9L6 10L7.5 8.5' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
28
+ <path d='M5 11.5L6 12.5L7.5 11' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
29
+ </svg>
30
+ )
31
+ break
32
+ case 'medium':
33
+ icon = (
34
+ <svg
35
+ width={24}
36
+ height={24}
37
+ viewBox='0 0 24 24'
38
+ fill='none'
39
+ xmlns='http://www.w3.org/2000/svg'
40
+ className={className}
41
+ >
42
+ <path d='M16.5 4.5H18.5C19.0523 4.5 19.5 4.94772 19.5 5.5V20C19.5 20.5523 19.0523 21 18.5 21H5.5C4.94772 21 4.5 20.5523 4.5 20V5.5C4.5 4.94772 4.94772 4.5 5.5 4.5H7.5' stroke='none' strokeWidth={1.5} />
43
+ <rect x={7.5} y={3} width={9} height={3} rx={1} stroke='none' strokeWidth={1.5} />
44
+ <path d='M13.5 10.5L16.5 10.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
45
+ <path d='M13.5 18L16.5 18' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
46
+ <path d='M7.5 9.75L9 11.25L11.25 9' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
47
+ <path d='M13.5 14.25L16.5 14.25' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
48
+ <path d='M7.5 13.5L9 15L11.25 12.75' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
49
+ <path d='M7.5 17.25L9 18.75L11.25 16.5' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
50
+
51
+ </svg>
52
+ )
53
+ break
54
+ case 'large':
55
+ icon = (
56
+ <svg
57
+ width={40}
58
+ height={40}
59
+ viewBox='0 0 40 40'
60
+ fill='none'
61
+ xmlns='http://www.w3.org/2000/svg'
62
+ className={className}
63
+ >
64
+ <path d='M27.5 7.5H31.5C32.0523 7.5 32.5 7.94772 32.5 8.5V34C32.5 34.5523 32.0523 35 31.5 35H8.5C7.94772 35 7.5 34.5523 7.5 34V8.5C7.5 7.94772 7.94772 7.5 8.5 7.5H12.5' stroke='none' strokeWidth={2} />
65
+ <rect x={12.5} y={5} width={15} height={5} rx={1} stroke='none' strokeWidth={2} />
66
+ <path d='M22.5 17.5L27.5 17.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
67
+ <path d='M22.5 30L27.5 30' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
68
+ <path d='M12.5 16.25L15 18.75L18.75 15' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
69
+ <path d='M22.5 23.75L27.5 23.75' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
70
+ <path d='M12.5 22.5L15 25L18.75 21.25' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
71
+ <path d='M12.5 28.75L15 31.25L18.75 27.5' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
72
+ </svg>
73
+ )
74
+ break
75
+
76
+ default:
77
+ break
78
+ }
79
+ return icon
80
+ }
81
+
82
+ CheckListIcon.propTypes = {
83
+ /**
84
+ * color of text, icon and borders
85
+ */
86
+ color: PropTypes.oneOf(COLORS_ICON),
87
+ /**
88
+ * Size
89
+ */
90
+ size: PropTypes.oneOf(SIZES)
91
+ }
92
+
93
+ CheckListIcon.defaultProps = {
94
+ color: 'main-dark-blue',
95
+ size: 'medium'
96
+ }
97
+
98
+ export default CheckListIcon
package/src/components/icons/SlotIcon.jsx ADDED
@@ -0,0 +1,88 @@
1
+ import * as React from 'react'
2
+ import PropTypes from 'prop-types'
3
+ import styles from './Icons.module.css'
4
+ import { COLORS_ICON, SIZES } from '../constants'
5
+
6
+ const SlotIcon = ({ color, size }) => {
7
+ const className = `${styles.noShrinkForFlex} ` + styles[`${color}`]
8
+ let icon = <></>
9
+
10
+ switch (size) {
11
+ case 'small':
12
+ icon = (
13
+ <svg
14
+ width={16}
15
+ height={16}
16
+ viewBox='0 0 16 16'
17
+ fill='none'
18
+ xmlns='http://www.w3.org/2000/svg'
19
+ className={className}
20
+ >
21
+ <rect x={14} y={14} width={12} height={12} rx={1} transform='rotate(-180 14 14)' stroke='none' />
22
+ <path d='M12 5.5L4 5.5L4 3.5L12 3.5L12 5.5Z' stroke='none' strokeLinejoin='round' />
23
+ <rect x={10} y={9} width={2} height={2} transform='rotate(-180 10 9)' stroke='none' strokeLinejoin='round' />
24
+ <rect x={10} y={12.5} width={2} height={2} transform='rotate(-180 10 12.5)' stroke='none' strokeLinejoin='round' />
25
+ <path d='M5 5.5V8M5 8H8M5 8V10.5C5 11.0523 5.44772 11.5 6 11.5H8' stroke='none' strokeLinecap='round' strokeLinejoin='round' />
26
+ </svg>
27
+ )
28
+ break
29
+ case 'medium':
30
+ icon = (
31
+ <svg
32
+ width={24}
33
+ height={24}
34
+ viewBox='0 0 24 24'
35
+ fill='none'
36
+ xmlns='http://www.w3.org/2000/svg'
37
+ className={className}
38
+ >
39
+ <rect x={21} y={21} width={18} height={18} rx={1} transform='rotate(-180 21 21)' stroke='none' strokeWidth={1.5} />
40
+ <path d='M18 8.25L6 8.25L6 5.25L18 5.25L18 8.25Z' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
41
+ <rect x={15} y={13.5} width={3} height={3} transform='rotate(-180 15 13.5)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
42
+ <rect x={15} y={18.75} width={3} height={3} transform='rotate(-180 15 18.75)' stroke='none' strokeWidth={1.5} strokeLinejoin='round' />
43
+ <path d='M7.5 8.25V12M7.5 12H12M7.5 12V16.25C7.5 16.8023 7.94772 17.25 8.5 17.25H12' stroke='none' strokeWidth={1.5} strokeLinecap='round' strokeLinejoin='round' />
44
+ </svg>
45
+ )
46
+ break
47
+ case 'large':
48
+ icon = (
49
+ <svg
50
+ width={40}
51
+ height={40}
52
+ viewBox='0 0 40 40'
53
+ fill='none'
54
+ xmlns='http://www.w3.org/2000/svg'
55
+ className={className}
56
+ >
57
+ <rect x={35} y={35} width={30} height={30} rx={1} transform='rotate(-180 35 35)' stroke='none' strokeWidth={2} />
58
+ <path d='M30 13.75L10 13.75L10 8.75L30 8.75L30 13.75Z' stroke='none' strokeWidth={2} strokeLinejoin='round' />
59
+ <rect x={25} y={22.5} width={5} height={5} transform='rotate(-180 25 22.5)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
60
+ <rect x={25} y={31.25} width={5} height={5} transform='rotate(-180 25 31.25)' stroke='none' strokeWidth={2} strokeLinejoin='round' />
61
+ <path d='M12.5 13.75V20M12.5 20H20M12.5 20V27.75C12.5 28.3023 12.9477 28.75 13.5 28.75H20' stroke='none' strokeWidth={2} strokeLinecap='round' strokeLinejoin='round' />
62
+ </svg>
63
+ )
64
+ break
65
+
66
+ default:
67
+ break
68
+ }
69
+ return icon
70
+ }
71
+
72
+ SlotIcon.propTypes = {
73
+ /**
74
+ * color of text, icon and borders
75
+ */
76
+ color: PropTypes.oneOf(COLORS_ICON),
77
+ /**
78
+ * Size
79
+ */
80
+ size: PropTypes.oneOf(SIZES)
81
+ }
82
+
83
+ SlotIcon.defaultProps = {
84
+ color: 'main-dark-blue',
85
+ size: 'medium'
86
+ }
87
+
88
+ export default SlotIcon