@hellobetterdigitalnz/betterui 0.0.3-310 → 0.0.3-312

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/Components/DataDisplay/GanttChart/GanttChart.d.ts +11 -3
  2. package/dist/Components/DataDisplay/index.d.ts +1 -0
  3. package/dist/betterui.css +1 -1
  4. package/dist/index.cjs.js +10 -10
  5. package/dist/index.cjs.js.map +1 -1
  6. package/dist/index.es.js +3042 -2773
  7. package/dist/index.es.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/Components/DataDisplay/GanttChart/{GanttChart.scss → GanttChart.module.scss} +66 -55
  10. package/src/Components/DataDisplay/GanttChart/GanttChart.tsx +230 -174
  11. package/src/Components/DataDisplay/index.ts +2 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hellobetterdigitalnz/betterui",
3
- "version": "0.0.3-310",
3
+ "version": "0.0.3-312",
4
4
  "type": "module",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.es.js",
package/src/Components/DataDisplay/GanttChart/{GanttChart.scss → GanttChart.module.scss} RENAMED
@@ -1,50 +1,52 @@
1
- .gantt-chart {
2
- font-family: Arial, sans-serif;
3
- border: 1px solid #dcdfe6;
4
- background-color: #fff;
1
+ /* Month navigation */
2
+ .monthControls {
5
3
  display: flex;
6
- flex-direction: column;
7
- overflow: auto;
8
- width: 100vw;
4
+ align-items: center;
5
+ justify-content: space-between;
6
+ padding-bottom: 24px;
9
7
 
10
- /* Month navigation */
11
- .month-controls {
8
+ .prevBtn,.nxtBtn{
12
9
  display: flex;
13
- align-items: center;
14
- justify-content: center;
15
- padding: 8px;
16
- background-color: #f9fafc;
17
- border-bottom: 1px solid #e6e9f0;
18
-
19
- button {
20
- background: none;
21
- border: 1px solid #dcdfe6;
22
- padding: 4px 8px;
23
- margin: 0 8px;
24
- cursor: pointer;
25
- font-size: 13px;
26
- border-radius: 4px;
10
+ padding: calc(2 * var(--space-unit));
27
11
 
28
- &:hover {
29
- background-color: #f1f3f5;
30
- }
12
+ svg{
13
+ height: 24px;
14
+ width: 24px;
31
15
  }
16
+ }
32
17
 
33
- span {
34
- font-weight: 600;
35
- font-size: 14px;
36
- }
18
+ .monthControlLeft, .monthControlRight{
19
+ display: flex;
20
+ align-items: center;
37
21
  }
38
22
 
39
- .gantt-header {
23
+ .period{
24
+ font-size: var(--font-size-h2);
25
+ line-height: var(--line-height-h2);
26
+ font-weight: var(--font-weight-h2);
27
+ margin-left: 24px;
28
+ }
29
+
30
+ }
31
+
32
+
33
+ .ganttChart {
34
+ font-family: Arial, sans-serif;
35
+ background-color: #fff;
36
+ display: flex;
37
+ flex-direction: column;
38
+ overflow: auto;
39
+ width: 100vw;
40
+ //height: 100vh;
41
+
42
+ .ganttHeader {
40
43
  display: flex;
41
- background-color: #f9fafc;
42
44
  position: sticky;
43
45
  top: 0;
44
46
  z-index: 200;
45
47
  min-width: max-content;
46
48
 
47
- .task-column {
49
+ .taskCol {
48
50
  position: sticky;
49
51
  left: 0;
50
52
  flex: 0 0 200px;
@@ -53,8 +55,8 @@
53
55
  font-weight: 600;
54
56
  border-right: 1px solid #e6e9f0;
55
57
  font-size: 14px;
56
- background-color: #f9fafc;
57
- border-bottom: 1px solid #e6e9f0;
58
+ background: #FFFFFF;
59
+ border-bottom: 1px solid var(--color-gray-100);
58
60
  }
59
61
 
60
62
  .days {
@@ -62,19 +64,20 @@
62
64
  flex: 1;
63
65
  border-bottom: 1px solid #e6e9f0;
64
66
 
65
- .date-day-view {
67
+ .dateDayView {
66
68
  display: flex;
67
69
  flex-direction: column;
68
70
  width: 100%;
71
+ border-right: 1px solid var(--color-secondary-100);
69
72
 
70
- .single-date {
73
+ .singleDate {
71
74
  text-align: left;
72
- padding: 4px;
75
+ padding: 10px 4px;
73
76
  font-size: 12px;
74
- font-weight: 500;
75
- background-color: #f9fafc;
76
- color: #333;
77
- border-bottom: 1px solid #e6e9f0;
77
+ font-weight: 600;
78
+ line-height: 1.33;
79
+ color: #212121;
80
+ font-family: var(--font);
78
81
  }
79
82
 
80
83
  .hours {
@@ -88,7 +91,6 @@
88
91
  text-align: center;
89
92
  font-size: 11px;
90
93
  padding: 2px 0;
91
- border-left: 1px solid #e6e9f0;
92
94
  color: #666;
93
95
  background-color: #fff;
94
96
 
@@ -99,39 +101,49 @@
99
101
  }
100
102
  }
101
103
 
102
- .gantt-body {
104
+ .ganttBody {
103
105
  min-width: max-content;
104
106
 
105
- .gantt-row {
107
+ .ganttRow {
106
108
  display: flex;
107
- min-height: 40px;
109
+ min-height: 28px;
108
110
 
109
111
  &:hover {
110
112
  background-color: #fafafa;
111
113
  }
112
114
 
113
- .task-column-label {
115
+ .taskColLabel {
114
116
  position: sticky;
117
+ display: flex;
118
+ align-items: center;
115
119
  left: 0;
116
120
  flex: 0 0 200px;
117
- padding: 8px 12px;
121
+ padding: 0px 8px;
118
122
  font-size: 13px;
119
123
  border-right: 1px solid #f0f0f0;
120
124
  background-color: #fff;
121
125
  z-index: 100;
122
- border-bottom: 1px solid #e6e9f0;
126
+ border-bottom: 1px solid var(--color-gray-100);
123
127
  }
124
128
 
125
129
  .days {
126
130
  flex: 1;
127
131
  display: flex;
128
132
  position: relative;
129
- border-bottom: 1px solid #e6e9f0;
133
+
134
+ .dayColumn{
135
+ display: flex;
136
+ align-items: center;
137
+ border-left: 1px solid var(--color-secondary-100);
138
+ }
139
+
140
+ .dayHrs{
141
+ min-width: 60px;
142
+ }
130
143
 
131
144
  > div {
132
145
  flex: 1;
133
146
  min-width:60px;
134
- border-left: 1px solid #f5f5f5;
135
147
 
136
148
  &:first-child {
137
149
  border-left: none;
@@ -141,10 +153,9 @@
141
153
  }
142
154
  }
143
155
 
144
- .task-bar {
156
+ .taskBar {
145
157
  position: absolute;
146
158
  height: 24px;
147
- top: 8px;
148
159
  border-radius: 4px;
149
160
  display: flex;
150
161
  align-items: center;
@@ -174,7 +185,7 @@
174
185
  display: flex;
175
186
  align-items: center;
176
187
 
177
- .bar-drag{
188
+ .barDrag{
178
189
  display: flex;
179
190
  align-items: center;
180
191
  cursor: grab;
@@ -194,7 +205,7 @@
194
205
  }
195
206
  }
196
207
 
197
- /* Bar colors override */
208
+
198
209
  .task-bar[style*="background-color: blue"] {
199
210
  background-color: #4a90e2 !important;
200
211
  }