@platformatic/ui-components 0.1.123 → 0.1.124

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/components/Sidebar.jsx +91 -86
  3. package/src/components/Sidebar.module.css +4 -4
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.123",
4
+ "version": "0.1.124",
5
5
  "type": "module",
6
6
  "license": "Apache-2.0",
7
7
  "repository": {
package/src/components/Sidebar.jsx CHANGED
@@ -40,95 +40,100 @@ function Sidebar (props) {
40
40
 
41
41
  return (
42
42
  <div className={`${styles.container} ${collapsed && styles.collapsed}`}>
43
- {collapsed
44
- ? (
45
- <>
46
- <ButtonFullRounded
47
- className={buttonFullRoundedClassName}
48
- iconName='CircleArrowRightIcon'
49
- iconSize={MEDIUM}
50
- iconColor={WHITE}
51
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
52
- onClick={() => { setCollapsed(false) }}
53
- bordered={false}
54
- />
55
- <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
56
- <Icons.WorkspaceStaticIcon color='white' size='large' />
57
- </button>
58
- <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
59
- {title}
60
- </div>
61
- <HorizontalSeparator marginBottom={0} marginTop={0} />
62
- <div className={styles.bottom}>
63
- <button type='button' className={styles.buttonSettings} onClick={onClickSettings}>
64
- <Icons.GearIcon color='white' size='large' />
65
- </button>
66
- </div>
67
- </>
68
- )
69
- : (
70
- <>
71
- <ButtonFullRounded
72
- className={buttonFullRoundedClassName}
73
- iconName='CircleArrowLeftIcon'
74
- iconSize={MEDIUM}
75
- iconColor={WHITE}
76
- hoverEffect={BACKGROUND_COLOR_OPAQUE}
77
- onClick={() => { setCollapsed(true) }}
78
- bordered={false}
79
- />
80
- <div className={styles.title} data-testid='lateral-bar-title'>
81
- {title}
82
- </div>
83
- <div className={styles.items} data-test-id='lateral-bar-items'>
84
- {items.map(item => {
85
- const isSelected = selectedItem === item.id
86
- return (
87
- <React.Fragment key={item.id}>
88
- <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(item)}>
89
- {item.iconName && (<PlatformaticIcon
90
- iconName={item.iconName}
91
- color={isSelected ? 'main-green' : 'white'}
92
- tip={item.title}
93
- size='medium'
94
- />)}
95
- <div className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>
96
- <span className={styles.itemSubTitle}>{item.subTitle}</span>
97
- <span className={styles.itemTitle}>{item.title}</span>
98
- </div>
99
- </button>
100
- <ReactTooltip place='top' type='info' />
101
- </React.Fragment>
102
- )
103
- })}
104
- <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed} ${disabledCreateButton} ${!disableClickAdd && styles.hoverSemibold}`} onClick={onClickAdd} disabled={disableClickAdd}>
105
- <PlatformaticIcon
106
- iconName='CircleAddIcon'
107
- color='white'
108
- size='medium'
109
- tip={addTitle}
110
- onClick={null}
111
- />
112
- {!collapsed && <span className={styles.item}>{addTitle}</span>}
43
+ <div>
44
+ {collapsed
45
+ ? (
46
+ <>
47
+ <ButtonFullRounded
48
+ className={buttonFullRoundedClassName}
49
+ iconName='CircleArrowRightIcon'
50
+ iconSize={MEDIUM}
51
+ iconColor={WHITE}
52
+ hoverEffect={BACKGROUND_COLOR_OPAQUE}
53
+ onClick={() => { setCollapsed(false) }}
54
+ bordered={false}
55
+ />
56
+ <button type='button' className={styles.buttonExpand} onClick={() => { setCollapsed(false) }}>
57
+ <Icons.WorkspaceStaticIcon color='white' size='large' />
113
58
  </button>
114
- </div>
115
- <HorizontalSeparator marginBottom={2} marginTop={2} />
116
-
117
- <div className={styles.bottom}>
118
- <Button
119
- label={labelButtonSettings}
120
- color={WHITE}
121
- onClick={onClickSettings}
122
- platformaticIcon={{ iconName: 'GearIcon', color: WHITE }}
123
- fullWidth
124
- bold
125
- size={MEDIUM}
126
- disabled={disableClickSettings}
59
+ <div className={styles.titleCollapsed} data-testid='lateral-bar-title'>
60
+ {title}
61
+ </div>
62
+ <HorizontalSeparator marginBottom={0} marginTop={0} />
63
+ </>
64
+ )
65
+ : (
66
+ <>
67
+ <ButtonFullRounded
68
+ className={buttonFullRoundedClassName}
69
+ iconName='CircleArrowLeftIcon'
70
+ iconSize={MEDIUM}
71
+ iconColor={WHITE}
127
72
  hoverEffect={BACKGROUND_COLOR_OPAQUE}
73
+ onClick={() => { setCollapsed(true) }}
74
+ bordered={false}
128
75
  />
129
- </div>
130
- </>
131
- )}
76
+ <div className={styles.title} data-testid='lateral-bar-title'>
77
+ {title}
78
+ </div>
79
+ <div className={styles.items} data-test-id='lateral-bar-items'>
80
+ {items.map(item => {
81
+ const isSelected = selectedItem === item.id
82
+ return (
83
+ <React.Fragment key={item.id}>
84
+ <button className={`${styles.buttonItem} ${collapsed && styles.buttonItemCollapsed}`} type='button' onClick={() => onClickItemSelected(item)}>
85
+ {item.iconName && (<PlatformaticIcon
86
+ iconName={item.iconName}
87
+ color={isSelected ? 'main-green' : 'white'}
88
+ tip={item.title}
89
+ size='medium'
90
+ />)}
91
+ <div className={`${styles.item} ${isSelected ? styles.itemSelected : ''}`}>
92
+ <span className={styles.itemSubTitle}>{item.subTitle}</span>
93
+ <span className={styles.itemTitle}>{item.title}</span>
94
+ </div>
95
+ </button>
96
+ <ReactTooltip place='top' type='info' />
97
+ </React.Fragment>
98
+ )
99
+ })}
100
+ <button className={`${styles.buttonCreate} ${collapsed && styles.buttonItemCollapsed} ${disabledCreateButton} ${!disableClickAdd && styles.hoverSemibold}`} onClick={onClickAdd} disabled={disableClickAdd}>
101
+ <PlatformaticIcon
102
+ iconName='CircleAddIcon'
103
+ color='white'
104
+ size='medium'
105
+ tip={addTitle}
106
+ onClick={null}
107
+ />
108
+ {!collapsed && <span className={styles.item}>{addTitle}</span>}
109
+ </button>
110
+ </div>
111
+ <HorizontalSeparator marginBottom={2} marginTop={2} />
112
+ </>
113
+ )}
114
+ </div>
115
+
116
+ <div>
117
+ {collapsed
118
+ ? (
119
+ <button type='button' className={styles.buttonSettings} onClick={onClickSettings}>
120
+ <Icons.GearIcon color='white' size='large' />
121
+ </button>
122
+ )
123
+ : (
124
+ <Button
125
+ label={labelButtonSettings}
126
+ color={WHITE}
127
+ onClick={onClickSettings}
128
+ platformaticIcon={{ iconName: 'GearIcon', color: WHITE }}
129
+ fullWidth
130
+ bold
131
+ size={MEDIUM}
132
+ disabled={disableClickSettings}
133
+ hoverEffect={BACKGROUND_COLOR_OPAQUE}
134
+ />
135
+ )}
136
+ </div>
132
137
  </div>
133
138
  )
134
139
  }
package/src/components/Sidebar.module.css CHANGED
@@ -1,7 +1,10 @@
1
1
  .container {
2
- @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh] z-10 bg-dark-blue;
2
+ @apply max-w-[216px] w-full p-4 border border-white rounded-md h-auto relative min-h-[80vh] z-10 bg-dark-blue flex flex-col gap-y-6 justify-between;
3
3
  transition: max-width 0.2s linear;
4
4
  }
5
+ .content {
6
+ @apply flex flex-col justify-between
7
+ }
5
8
  .collapsed {
6
9
  @apply max-w-[96px] text-center;
7
10
  }
@@ -54,9 +57,6 @@
54
57
  .items {
55
58
  @apply flex flex-col gap-y-4;
56
59
  }
57
- .bottom {
58
- @apply absolute left-0 bottom-[1rem] w-full px-4;
59
- }
60
60
  .titleSettings {
61
61
  @apply text-white font-semibold ml-3;
62
62
  }