@platformatic/ui-components 0.1.90 → 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 (11) 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/constants.js +4 -2
  9. package/src/stories/List.stories.jsx +26 -4
  10. package/dist/assets/index.3099dee8.js +0 -206
  11. 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.91",
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/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
+ }