@platformatic/ui-components 0.1.90 → 0.1.92

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 (14) hide show
  1. package/dist/assets/index.1ec7065b.css +1 -0
  2. package/dist/assets/index.e3fdc2c7.js +206 -0
  3. package/dist/index.html +2 -2
  4. package/package.json +1 -1
  5. package/src/components/Common.module.css +6 -0
  6. package/src/components/ListElement.jsx +30 -10
  7. package/src/components/ListElement.module.css +1 -11
  8. package/src/components/Modal.jsx +68 -10
  9. package/src/components/Modal.module.css +7 -1
  10. package/src/components/constants.js +11 -4
  11. package/src/stories/List.stories.jsx +26 -4
  12. package/src/stories/Modal.stories.jsx +15 -3
  13. package/dist/assets/index.3099dee8.js +0 -206
  14. package/dist/assets/index.787e3281.css +0 -1
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.3099dee8.js"></script>
8
- <link rel="stylesheet" href="/assets/index.787e3281.css">
7
+ <script type="module" crossorigin src="/assets/index.e3fdc2c7.js"></script>
8
+ <link rel="stylesheet" href="/assets/index.1ec7065b.css">
9
9
  </head>
10
10
  <body>
11
11
  <div id="root"></div>
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.90",
4
+ "version": "0.1.92",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Common.module.css CHANGED
@@ -178,3 +178,9 @@
178
178
  @apply !bg-tertiary-blue bg-opacity-15;
179
179
  }
180
180
 
181
+ .fontSemiBold {
182
+ @apply font-semibold;
183
+ }
184
+ .fontLight {
185
+ @apply font-light;
186
+ }
package/src/components/ListElement.jsx CHANGED
@@ -1,26 +1,31 @@
1
1
  import React from 'react'
2
2
  import PropTypes from 'prop-types'
3
3
  import PlatformaticIcon from './PlatformaticIcon'
4
+ import commonStyles from './Common.module.css'
4
5
  import styles from './ListElement.module.css'
6
+ import { MAIN_DARK_BLUE, MEDIUM, SMALL, WHITE, MAIN_GREEN } from './constants'
5
7
 
6
- function List ({ title, detail, marginSize, titleAspect }) {
8
+ function List ({ title, detail, marginSize, detailColor, titleColor, semiBold, iconColor }) {
7
9
  let className = `${styles.container} `
8
10
  className += styles[`margin-${marginSize}`]
9
11
 
10
- let classNameTitle = `${styles.title} `
11
- classNameTitle += styles[`${titleAspect}`]
12
+ let classNameTitle = `${styles.title} ${semiBold ? commonStyles.fontSemiBold : commonStyles.fontLight} `
13
+ classNameTitle += commonStyles[`text--${titleColor}`]
14
+
15
+ let detailClassName = `${styles.textCol} `
16
+ detailClassName += commonStyles[`text--${detailColor}`]
12
17
 
13
18
  return (
14
19
  <div className={className}>
15
20
  <div className={styles.row}>
16
- <PlatformaticIcon iconName='CircleCheckMarkIcon' color='main-green' data-testid='list-element-title-icon' onClick={null} size='medium' />
21
+ <PlatformaticIcon iconName='CircleCheckMarkIcon' color={iconColor} data-testid='list-element-title-icon' onClick={null} size={MEDIUM} />
17
22
  <div className={classNameTitle} data-testid='list-element-title'>
18
23
  {title}
19
24
  </div>
20
25
  </div>
21
26
  {detail &&
22
27
  (
23
- <div className={styles.textCol} data-test-id='list-element-detail'>
28
+ <div className={detailClassName} data-test-id='list-element-detail'>
24
29
  {detail}
25
30
  </div>
26
31
  )}
@@ -39,18 +44,33 @@ List.propTypes = {
39
44
  /**
40
45
  * marginSize
41
46
  */
42
- marginSize: PropTypes.oneOf(['small', 'medium']),
47
+ marginSize: PropTypes.oneOf([SMALL, MEDIUM]),
48
+ /**
49
+ * color
50
+ */
51
+ titleColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE, WHITE]),
52
+ /**
53
+ * color
54
+ */
55
+ iconColor: PropTypes.oneOf([MAIN_GREEN, MAIN_DARK_BLUE]),
56
+ /**
57
+ * titleColor
58
+ */
59
+ detailColor: PropTypes.oneOf([WHITE, MAIN_DARK_BLUE]),
43
60
  /**
44
- * titleAspect
61
+ * semiBold
45
62
  */
46
- titleAspect: PropTypes.oneOf(['boldAndGreen', 'lightAndWhite'])
63
+ semiBold: PropTypes.bool
47
64
  }
48
65
 
49
66
  List.defaultProps = {
50
67
  title: '',
51
68
  detail: '',
52
- marginSize: 'medium',
53
- titleAspect: 'boldAndGreen'
69
+ marginSize: MEDIUM,
70
+ detailColor: WHITE,
71
+ titleColor: MAIN_GREEN,
72
+ iconColor: MAIN_GREEN,
73
+ semiBold: true
54
74
  }
55
75
 
56
76
  export default List
package/src/components/ListElement.module.css CHANGED
@@ -10,19 +10,9 @@
10
10
  .title {
11
11
  @apply w-full;
12
12
  }
13
- .boldAndGreen {
14
- @apply text-light-green font-bold;
15
- }
16
- .lightAndWhite {
17
- @apply text-white font-light;
18
- }
19
13
  .row {
20
14
  @apply flex gap-x-2 items-center w-full;
21
15
  }
22
16
  .textCol {
23
- @apply flex flex-col text-white text-justify w-full ml-8;
24
- }
25
-
26
- .detailSpace {
27
- @apply w-6
17
+ @apply flex flex-col text-justify w-full ml-8;
28
18
  }
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/constants.js CHANGED
@@ -2,8 +2,11 @@ export const WHITE = 'white'
2
2
  export const MAIN_DARK_BLUE = 'main-dark-blue'
3
3
  export const LIGHT_GREEN = 'light-green'
4
4
  export const LIGHT_BLUE = 'light-blue'
5
+ export const DARK_BLUE = 'dark-blue'
5
6
  export const DARK_GREEN = 'dark-green'
6
7
  export const MAIN_GREEN = 'main-green'
8
+ export const TRANSPARENT = 'transparent'
9
+ export const TERTIARY_BLUE = 'tertiary-blue'
7
10
  export const ERROR_RED = 'error-red'
8
11
  export const WARNING_YELLOW = 'warning-yellow'
9
12
  export const NONE = 'none'
@@ -23,16 +26,20 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, BACKGROUND_COLOR_OPAQUE, UNDER
23
26
  export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
24
27
 
25
28
  export const COLORS_ICON = [MAIN_GREEN, WHITE, MAIN_DARK_BLUE, ERROR_RED, WARNING_YELLOW]
26
- export const COLORS_BUTTON = [MAIN_GREEN, DARK_GREEN, LIGHT_GREEN, MAIN_DARK_BLUE, 'dark-blue', LIGHT_BLUE, WHITE, ERROR_RED, 'tertiary-blue', 'transparent']
27
- export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, 'dark-blue', MAIN_DARK_BLUE, WARNING_YELLOW, '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]
30
+ export const COLORS_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT]
28
31
 
29
32
  export const MODAL_POPUP = 'popup'
30
33
  export const MODAL_COVER = 'cover'
31
- 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]
32
37
 
33
38
  export const FREE = 'free'
34
39
  export const BASIC = 'basic'
35
- export const PROFILE = ['', FREE, BASIC]
40
+ export const ADVANCED = 'advanced'
41
+ export const PRO = 'pro'
42
+ export const PROFILES = ['', FREE, BASIC, ADVANCED, PRO]
36
43
 
37
44
  export const FONT_BASE = 'base'
38
45
  export const FONT_XS = 'xs'
package/src/stories/List.stories.jsx CHANGED
@@ -1,7 +1,15 @@
1
1
  import React from 'react'
2
+ import { MAIN_DARK_BLUE, WHITE } from '../components/constants'
2
3
  import List from '../components/List'
3
4
  import ListElement from '../components/ListElement'
4
5
 
6
+ const divStyle = {
7
+ width: '100%',
8
+ height: 'auto',
9
+ padding: '2px',
10
+ backgroundColor: WHITE
11
+ }
12
+
5
13
  export default {
6
14
  title: 'Platformatic/List',
7
15
  component: List
@@ -15,8 +23,8 @@ ListWithNoElements.args = {
15
23
 
16
24
  const TemplateWithElements = (args) => (
17
25
  <List {...args}>
18
- <ListElement title='List Element 1' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' titleAspect='boldAndGreen' />
19
- <ListElement title='List Element 2' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
26
+ <ListElement title='List Element 1' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' />
27
+ <ListElement title='List Element 2' detail='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et dui facilisis, molestie urna sed, volutpat nibh.' detailColor={MAIN_DARK_BLUE} titleColor={MAIN_DARK_BLUE} semiBold={false} />
20
28
  </List>
21
29
  )
22
30
 
@@ -30,8 +38,8 @@ ListWithElementsNoTitle.args = {}
30
38
 
31
39
  const TemplateWithElementsVariants = (args) => (
32
40
  <List {...args}>
33
- <ListElement title='List Element 1' titleAspect='boldAndGreen' marginSize='small' />
34
- <ListElement title='List Element 2' titleAspect='lightAndWhite' marginSize='small' />
41
+ <ListElement title='List Element 1' marginSize='small' />
42
+ <ListElement title='List Element 2' marginSize='small' />
35
43
  </List>
36
44
  )
37
45
 
@@ -39,3 +47,17 @@ export const ListWithElementsVariants = TemplateWithElementsVariants.bind({})
39
47
  ListWithElementsVariants.args = {
40
48
  title: 'List Title'
41
49
  }
50
+
51
+ const TemplateWithElementsOnWhiteDiv = (args) => (
52
+ <div style={divStyle}>
53
+ <List {...args}>
54
+ <ListElement title='List Element 1' marginSize='small' detailColor={MAIN_DARK_BLUE} titleColor={MAIN_DARK_BLUE} semiBold={false} />
55
+ <ListElement title='List Element 2' marginSize='small' detailColor={MAIN_DARK_BLUE} titleColor={MAIN_DARK_BLUE} semiBold={false} />
56
+ </List>
57
+ </div>
58
+ )
59
+
60
+ export const ListWithElementsOnWhiteDiv = TemplateWithElementsOnWhiteDiv.bind({})
61
+ ListWithElementsOnWhiteDiv.args = {
62
+ title: 'List Title on White div'
63
+ }
package/src/stories/Modal.stories.jsx CHANGED
@@ -4,7 +4,7 @@ import Button from '../components/Button'
4
4
  import BorderedBox from '../components/BorderedBox'
5
5
  import DropDown from '../components/DropDown'
6
6
  import HorizontalSeparator from '../components/HorizontalSeparator'
7
- import { FULL_WIDTH, MAIN_DARK_BLUE, MAIN_GREEN, MODAL_COVER, MODAL_LAYOUTS, MODAL_SIZES } from '../components/constants'
7
+ import { FULL_WIDTH, MAIN_DARK_BLUE, MAIN_GREEN, MODAL_COVER, MODAL_FULL_DARK, MODAL_FULL_LIGHT, MODAL_LAYOUTS, MODAL_SIZES } from '../components/constants'
8
8
  export default {
9
9
  title: 'Platformatic/Modal',
10
10
  component: Modal,
@@ -82,9 +82,21 @@ const MenuTemplate = () => {
82
82
  }
83
83
  export const WithDropDown = MenuTemplate.bind({})
84
84
 
85
- export const FullscreenLayout = Template.bind({})
86
- FullscreenLayout.args = {
85
+ export const FullscreenLayoutLightBlue = Template.bind({})
86
+ FullscreenLayoutLightBlue.args = {
87
87
  title: 'Give me an invite',
88
88
  size: FULL_WIDTH,
89
89
  layout: MODAL_COVER
90
90
  }
91
+
92
+ export const FullscreenLayoutDark = Template.bind({})
93
+ FullscreenLayoutDark.args = {
94
+ size: FULL_WIDTH,
95
+ layout: MODAL_FULL_DARK
96
+ }
97
+
98
+ export const FullscreenLayoutLight = Template.bind({})
99
+ FullscreenLayoutLight.args = {
100
+ size: FULL_WIDTH,
101
+ layout: MODAL_FULL_LIGHT
102
+ }