@platformatic/ui-components 0.1.89 → 0.1.91

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 (13) 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 +9 -0
  6. package/src/components/DropDown.jsx +68 -10
  7. package/src/components/DropDown.module.css +2 -4
  8. package/src/components/ListElement.jsx +30 -10
  9. package/src/components/ListElement.module.css +1 -11
  10. package/src/components/constants.js +4 -2
  11. package/src/stories/List.stories.jsx +26 -4
  12. package/dist/assets/index.275c1b71.js +0 -206
  13. package/dist/assets/index.a673103b.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.275c1b71.js"></script>
8
- <link rel="stylesheet" href="/assets/index.a673103b.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.89",
4
+ "version": "0.1.91",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Common.module.css CHANGED
@@ -46,6 +46,9 @@
46
46
  .text--main-dark-blue {
47
47
  @apply text-main-dark-blue;
48
48
  }
49
+ .text--light-blue {
50
+ @apply text-light-blue;
51
+ }
49
52
 
50
53
  .text--base {
51
54
  @apply text-base
@@ -175,3 +178,9 @@
175
178
  @apply !bg-tertiary-blue bg-opacity-15;
176
179
  }
177
180
 
181
+ .fontSemiBold {
182
+ @apply font-semibold;
183
+ }
184
+ .fontLight {
185
+ @apply font-light;
186
+ }
package/src/components/DropDown.jsx CHANGED
@@ -1,35 +1,93 @@
1
1
  'use strict'
2
-
3
2
  import React, { useState } from 'react'
3
+ import PropTypes from 'prop-types'
4
4
  import styles from './DropDown.module.css'
5
+ import commonStyles from './Common.module.css'
5
6
  import PlatformaticIcon from './PlatformaticIcon'
6
- export default function DropDown (props) {
7
- const { pictureUrl, header, items, align = 'left' } = props
7
+ import { LIGHT_BLUE, MAIN_DARK_BLUE, WHITE } from './constants'
8
+ function DropDown ({ pictureUrl, header, items, align, backgroundColor, textColor, borderColor, headerColor }) {
8
9
  const [open, setOpen] = useState(false)
10
+
11
+ let classNameMenu = `${styles.menu} `
12
+ classNameMenu += commonStyles[`background-color-${backgroundColor}`]
13
+ classNameMenu += ' ' + commonStyles[`bordered--${borderColor}`]
14
+
15
+ let classNameItem = `${styles.item} `
16
+ classNameItem += commonStyles[`text--${textColor}`]
17
+
18
+ let headerClassNamme = `${styles.header} `
19
+ headerClassNamme += commonStyles[`text--${headerColor}`]
20
+
9
21
  function handleOpen () {
10
22
  setOpen(!open)
11
23
  }
24
+
12
25
  return (
13
26
  <div className={`${styles.dropDown} ${styles[align]}`}>
14
- <span className={styles.header} onClick={handleOpen}>
27
+ <span className={headerClassNamme} onClick={handleOpen}>
15
28
  {pictureUrl && <img src={pictureUrl} height={32} width={32} className={styles.picture} />}
16
29
  {header}
17
- {!open && <div className={styles.arrow}><PlatformaticIcon iconName='ArrowRightIcon' color='white' onClick={null} /></div>}
18
- {open && <div className={styles.arrow}><PlatformaticIcon iconName='ArrowDownIcon' color='white' onClick={null} /></div>}
30
+ {!open && <div className={styles.arrow}><PlatformaticIcon iconName='ArrowRightIcon' color={headerColor} onClick={null} /></div>}
31
+ {open && <div className={styles.arrow}><PlatformaticIcon iconName='ArrowDownIcon' color={headerColor} onClick={null} /></div>}
19
32
  </span>
20
33
  {open && (
21
- <div className={styles.menu}>
34
+ <div className={classNameMenu}>
22
35
  {items.map((item, index) => {
23
36
  return (
24
- <div className={styles.item} key={index}>
37
+ <div className={classNameItem} key={index}>
25
38
  {item}
26
39
  </div>
27
40
  )
28
41
  })}
29
42
  </div>
30
43
  )}
31
-
32
44
  </div>
33
-
34
45
  )
35
46
  }
47
+
48
+ DropDown.propTypes = {
49
+ /**
50
+ * pictureUrl
51
+ */
52
+ pictureUrl: PropTypes.string,
53
+ /**
54
+ * header
55
+ */
56
+ header: PropTypes.string,
57
+ /**
58
+ * align
59
+ */
60
+ align: PropTypes.string,
61
+ /**
62
+ * items
63
+ */
64
+ items: PropTypes.array,
65
+ /**
66
+ * backgroundColor
67
+ */
68
+ backgroundColor: PropTypes.oneOf([MAIN_DARK_BLUE, LIGHT_BLUE]),
69
+ /**
70
+ * textColor
71
+ */
72
+ textColor: PropTypes.oneOf([MAIN_DARK_BLUE, LIGHT_BLUE]),
73
+ /**
74
+ * borderColor
75
+ */
76
+ borderColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE]),
77
+ /**
78
+ * headerColor
79
+ */
80
+ headerColor: PropTypes.oneOf([MAIN_DARK_BLUE, WHITE])
81
+ }
82
+
83
+ DropDown.defaultProps = {
84
+ pictureUrl: '',
85
+ header: '',
86
+ align: 'left',
87
+ items: [],
88
+ backgroundColor: LIGHT_BLUE,
89
+ textColor: MAIN_DARK_BLUE,
90
+ headerColor: WHITE,
91
+ borderColor: WHITE
92
+ }
93
+ export default DropDown
package/src/components/DropDown.module.css CHANGED
@@ -17,10 +17,8 @@
17
17
  @apply border border-transparent rounded-full mr-2;
18
18
  }
19
19
  .menu {
20
- @apply absolute border-solid border border-white p-0 bg-light-blue mt-8 rounded-md z-10 text-sm min-w-[190px];
20
+ @apply absolute border-solid border p-0 mt-8 rounded-md z-10 text-sm min-w-[190px];
21
21
  }
22
22
  .item {
23
- @apply py-2 px-3 text-main-dark-blue first:border-t-0 text-sm leading-4 uppercase hover:font-semibold hover:cursor-pointer tracking-more-widest;
24
- /* it's a workaround due to opacity... */
25
- border-top: 1px solid rgba(0, 40, 61, 0.2);;
23
+ @apply py-2 px-3 first:border-t-0 text-sm leading-4 uppercase hover:font-semibold hover:cursor-pointer tracking-more-widest border-t;
26
24
  }
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/constants.js CHANGED
@@ -2,8 +2,10 @@ 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'
7
9
  export const ERROR_RED = 'error-red'
8
10
  export const WARNING_YELLOW = 'warning-yellow'
9
11
  export const NONE = 'none'
@@ -23,8 +25,8 @@ export const HOVER_EFFECTS_BUTTONS = [BOX_SHADOW, BACKGROUND_COLOR_OPAQUE, UNDER
23
25
  export const MODAL_SIZES = [SMALL, MEDIUM, FULL_WIDTH]
24
26
 
25
27
  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']
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_BORDERED_BOX = [MAIN_GREEN, ERROR_RED, WHITE, DARK_BLUE, MAIN_DARK_BLUE, WARNING_YELLOW, TRANSPARENT]
28
30
 
29
31
  export const MODAL_POPUP = 'popup'
30
32
  export const MODAL_COVER = 'cover'
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
+ }