@dhis2/analytics 26.2.0 → 26.3.0-alpha.2

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 (23) hide show
  1. package/build/cjs/__demo__/DimensionsPanel.stories.js +1 -0
  2. package/build/cjs/assets/DynamicDimensionIcon.js +12 -38
  3. package/build/cjs/components/DimensionsPanel/List/DimensionItem.js +37 -29
  4. package/build/cjs/components/DimensionsPanel/List/OptionsButton.js +7 -6
  5. package/build/cjs/components/DimensionsPanel/List/RecommendedIcon.js +1 -2
  6. package/build/cjs/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap +190 -366
  7. package/build/cjs/components/DimensionsPanel/List/styles/DimensionItem.module.css +83 -0
  8. package/build/cjs/components/DimensionsPanel/List/styles/DimensionList.style.js +2 -2
  9. package/build/cjs/components/DimensionsPanel/List/styles/RecommendedIcon.style.js +4 -4
  10. package/build/cjs/components/DimensionsPanel/styles/DimensionsPanel.style.js +1 -1
  11. package/build/es/__demo__/DimensionsPanel.stories.js +1 -0
  12. package/build/es/assets/DynamicDimensionIcon.js +12 -38
  13. package/build/es/components/DimensionsPanel/List/DimensionItem.js +38 -30
  14. package/build/es/components/DimensionsPanel/List/OptionsButton.js +7 -6
  15. package/build/es/components/DimensionsPanel/List/RecommendedIcon.js +1 -2
  16. package/build/es/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap +190 -366
  17. package/build/es/components/DimensionsPanel/List/styles/DimensionItem.module.css +83 -0
  18. package/build/es/components/DimensionsPanel/List/styles/DimensionList.style.js +2 -2
  19. package/build/es/components/DimensionsPanel/List/styles/RecommendedIcon.style.js +4 -4
  20. package/build/es/components/DimensionsPanel/styles/DimensionsPanel.style.js +1 -1
  21. package/package.json +1 -1
  22. package/build/cjs/components/DimensionsPanel/List/styles/DimensionItem.style.js +0 -73
  23. package/build/es/components/DimensionsPanel/List/styles/DimensionItem.style.js +0 -66
package/build/es/components/DimensionsPanel/List/__tests__/__snapshots__/DimensionItem.spec.js.snap CHANGED
@@ -1,405 +1,229 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
3
  exports[`DimensionItem matches the snapshot 1`] = `
4
- <li
5
- name="Period"
6
- onClick={[Function]}
7
- onMouseLeave={[Function]}
8
- onMouseOver={[Function]}
9
- style={
10
- Object {
11
- "alignItems": "center",
12
- "borderRadius": "2px",
13
- "cursor": "pointer",
14
- "display": "flex",
15
- "marginBottom": 3,
16
- "marginTop": 3,
17
- "minHeight": "24px",
18
- }
19
- }
20
- >
21
- <div
22
- className="label"
23
- data-test="undefined-button-pe"
24
- style={
25
- Object {
26
- "display": "flex",
27
- "outline": "none",
28
- }
29
- }
30
- tabIndex={0}
4
+ <Fragment>
5
+ <CssVariables
6
+ colors={true}
7
+ elevations={false}
8
+ layers={false}
9
+ spacers={false}
10
+ theme={false}
11
+ />
12
+ <li
13
+ className=""
14
+ name="Period"
15
+ onClick={[Function]}
16
+ onMouseLeave={[Function]}
17
+ onMouseOver={[Function]}
18
+ style={Object {}}
31
19
  >
32
20
  <div
33
- style={
34
- Object {
35
- "display": "flex",
36
- "flexDirection": "column",
37
- "padding": "3px 8px 0 8px",
38
- }
39
- }
21
+ data-test="undefined-button-pe"
22
+ tabIndex={0}
40
23
  >
41
- <SvgClock16
42
- style={
43
- Object {
44
- "paddingBottom": "2px",
45
- "paddingLeft": "6px",
46
- }
47
- }
48
- />
24
+ <div>
25
+ <SvgClock16 />
26
+ </div>
27
+ <div>
28
+ <span>
29
+ <span
30
+ data-dimensionid="pe"
31
+ >
32
+ Period
33
+ </span>
34
+ </span>
35
+ <RecommendedIcon
36
+ dataTest="undefined-recommended-icon"
37
+ isRecommended={false}
38
+ />
39
+ </div>
49
40
  </div>
50
- <div
51
- style={
52
- Object {
53
- "padding": "2px 5px 2px 0",
54
- }
55
- }
56
- >
57
- <span
58
- data-dimensionid="pe"
59
- style={
60
- Object {
61
- "color": "#212934",
62
- "fontSize": "14px",
63
- "userSelect": "none",
64
- "wordBreak": "break-word",
65
- }
66
- }
67
- >
68
- Period
69
- </span>
70
- <RecommendedIcon
71
- dataTest="undefined-recommended-icon"
72
- isRecommended={false}
73
- />
74
- </div>
75
- </div>
76
- </li>
41
+ </li>
42
+ </Fragment>
77
43
  `;
78
44
 
79
45
  exports[`DimensionItem matches the snapshot with locked 1`] = `
80
- <li
81
- name="Period"
82
- onClick={[Function]}
83
- onMouseLeave={[Function]}
84
- onMouseOver={[Function]}
85
- style={
86
- Object {
87
- "alignItems": "center",
88
- "borderRadius": "2px",
89
- "cursor": "pointer",
90
- "display": "flex",
91
- "marginBottom": 3,
92
- "marginTop": 3,
93
- "minHeight": "24px",
94
- }
95
- }
96
- >
97
- <div
98
- className="label"
99
- data-test="undefined-button-pe"
100
- style={
101
- Object {
102
- "display": "flex",
103
- "outline": "none",
104
- }
105
- }
106
- tabIndex={0}
46
+ <Fragment>
47
+ <CssVariables
48
+ colors={true}
49
+ elevations={false}
50
+ layers={false}
51
+ spacers={false}
52
+ theme={false}
53
+ />
54
+ <li
55
+ className=""
56
+ name="Period"
57
+ onClick={[Function]}
58
+ onMouseLeave={[Function]}
59
+ onMouseOver={[Function]}
60
+ style={Object {}}
107
61
  >
108
62
  <div
109
- style={
110
- Object {
111
- "display": "flex",
112
- "flexDirection": "column",
113
- "padding": "3px 8px 0 8px",
114
- }
115
- }
63
+ data-test="undefined-button-pe"
64
+ tabIndex={0}
116
65
  >
117
- <SvgClock16
118
- style={
119
- Object {
120
- "paddingBottom": "2px",
121
- "paddingLeft": "6px",
122
- }
123
- }
124
- />
66
+ <div>
67
+ <SvgClock16 />
68
+ </div>
69
+ <div>
70
+ <span>
71
+ <span
72
+ data-dimensionid="pe"
73
+ >
74
+ Period
75
+ </span>
76
+ </span>
77
+ <RecommendedIcon
78
+ dataTest="undefined-recommended-icon"
79
+ isRecommended={false}
80
+ />
81
+ </div>
125
82
  </div>
126
- <div
127
- style={
128
- Object {
129
- "padding": "2px 5px 2px 0",
130
- }
131
- }
132
- >
133
- <span
134
- data-dimensionid="pe"
135
- style={
136
- Object {
137
- "color": "#212934",
138
- "fontSize": "14px",
139
- "userSelect": "none",
140
- "wordBreak": "break-word",
141
- }
142
- }
83
+ <div>
84
+ <svg
85
+ fill="none"
86
+ height="9"
87
+ width="7"
88
+ xmlns="http://www.w3.org/2000/svg"
143
89
  >
144
- Period
145
- </span>
146
- <RecommendedIcon
147
- dataTest="undefined-recommended-icon"
148
- isRecommended={false}
149
- />
150
- </div>
151
- <div
152
- style={
153
- Object {
154
- "display": "flex",
155
- "flexDirection": "column",
156
- "padding": "3px 8px 0 8px",
157
- }
158
- }
159
- >
160
- <SvgLock16 />
90
+ <path
91
+ clipRule="evenodd"
92
+ d="M3.5 1A1.5 1.5 0 0 0 2 2.5V3h3v-.5A1.5 1.5 0 0 0 3.5 1ZM1 2.5V3H0v6h7V3H6v-.5a2.5 2.5 0 0 0-5 0ZM1 8V4h5v4H1Zm3-1V5H3v2h1Z"
93
+ fill="none"
94
+ fillRule="evenodd"
95
+ />
96
+ </svg>
161
97
  </div>
162
- </div>
163
- </li>
98
+ </li>
99
+ </Fragment>
164
100
  `;
165
101
 
166
102
  exports[`DimensionItem matches the snapshot with onOptionsClick 1`] = `
167
- <li
168
- name="Period"
169
- onClick={[Function]}
170
- onMouseLeave={[Function]}
171
- onMouseOver={[Function]}
172
- style={
173
- Object {
174
- "alignItems": "center",
175
- "borderRadius": "2px",
176
- "cursor": "pointer",
177
- "display": "flex",
178
- "marginBottom": 3,
179
- "marginTop": 3,
180
- "minHeight": "24px",
181
- }
182
- }
183
- >
184
- <div
185
- className="label"
186
- data-test="undefined-button-pe"
187
- style={
188
- Object {
189
- "display": "flex",
190
- "outline": "none",
191
- }
192
- }
193
- tabIndex={0}
103
+ <Fragment>
104
+ <CssVariables
105
+ colors={true}
106
+ elevations={false}
107
+ layers={false}
108
+ spacers={false}
109
+ theme={false}
110
+ />
111
+ <li
112
+ className=""
113
+ name="Period"
114
+ onClick={[Function]}
115
+ onMouseLeave={[Function]}
116
+ onMouseOver={[Function]}
117
+ style={Object {}}
194
118
  >
195
119
  <div
196
- style={
197
- Object {
198
- "display": "flex",
199
- "flexDirection": "column",
200
- "padding": "3px 8px 0 8px",
201
- }
202
- }
120
+ data-test="undefined-button-pe"
121
+ tabIndex={0}
203
122
  >
204
- <SvgClock16
205
- style={
206
- Object {
207
- "paddingBottom": "2px",
208
- "paddingLeft": "6px",
209
- }
210
- }
211
- />
123
+ <div>
124
+ <SvgClock16 />
125
+ </div>
126
+ <div>
127
+ <span>
128
+ <span
129
+ data-dimensionid="pe"
130
+ >
131
+ Period
132
+ </span>
133
+ </span>
134
+ <RecommendedIcon
135
+ dataTest="undefined-recommended-icon"
136
+ isRecommended={false}
137
+ />
138
+ </div>
212
139
  </div>
213
140
  <div
214
- style={
215
- Object {
216
- "padding": "2px 5px 2px 0",
217
- }
218
- }
219
- >
220
- <span
221
- data-dimensionid="pe"
222
- style={
223
- Object {
224
- "color": "#212934",
225
- "fontSize": "14px",
226
- "userSelect": "none",
227
- "wordBreak": "break-word",
228
- }
229
- }
230
- >
231
- Period
232
- </span>
233
- <RecommendedIcon
234
- dataTest="undefined-recommended-icon"
235
- isRecommended={false}
236
- />
237
- </div>
238
- </div>
239
- <div
240
- data-test="undefined-menu-pe"
241
- style={
242
- Object {
243
- "height": "20px",
244
- "left": "5px",
245
- "position": "relative",
246
- "width": "20px",
247
- }
248
- }
249
- />
250
- </li>
141
+ data-test="undefined-menu-pe"
142
+ />
143
+ </li>
144
+ </Fragment>
251
145
  `;
252
146
 
253
147
  exports[`DimensionItem matches the snapshot with recommended 1`] = `
254
- <li
255
- name="Period"
256
- onClick={[Function]}
257
- onMouseLeave={[Function]}
258
- onMouseOver={[Function]}
259
- style={
260
- Object {
261
- "alignItems": "center",
262
- "borderRadius": "2px",
263
- "cursor": "pointer",
264
- "display": "flex",
265
- "marginBottom": 3,
266
- "marginTop": 3,
267
- "minHeight": "24px",
268
- }
269
- }
270
- >
271
- <div
272
- className="label"
273
- data-test="undefined-button-pe"
274
- style={
275
- Object {
276
- "display": "flex",
277
- "outline": "none",
278
- }
279
- }
280
- tabIndex={0}
148
+ <Fragment>
149
+ <CssVariables
150
+ colors={true}
151
+ elevations={false}
152
+ layers={false}
153
+ spacers={false}
154
+ theme={false}
155
+ />
156
+ <li
157
+ className=""
158
+ name="Period"
159
+ onClick={[Function]}
160
+ onMouseLeave={[Function]}
161
+ onMouseOver={[Function]}
162
+ style={Object {}}
281
163
  >
282
164
  <div
283
- style={
284
- Object {
285
- "display": "flex",
286
- "flexDirection": "column",
287
- "padding": "3px 8px 0 8px",
288
- }
289
- }
165
+ data-test="undefined-button-pe"
166
+ tabIndex={0}
290
167
  >
291
- <SvgClock16
292
- style={
293
- Object {
294
- "paddingBottom": "2px",
295
- "paddingLeft": "6px",
296
- }
297
- }
298
- />
168
+ <div>
169
+ <SvgClock16 />
170
+ </div>
171
+ <div>
172
+ <span>
173
+ <span
174
+ data-dimensionid="pe"
175
+ >
176
+ Period
177
+ </span>
178
+ </span>
179
+ <RecommendedIcon
180
+ dataTest="undefined-recommended-icon"
181
+ isRecommended={true}
182
+ />
183
+ </div>
299
184
  </div>
300
- <div
301
- style={
302
- Object {
303
- "padding": "2px 5px 2px 0",
304
- }
305
- }
306
- >
307
- <span
308
- data-dimensionid="pe"
309
- style={
310
- Object {
311
- "color": "#212934",
312
- "fontSize": "14px",
313
- "userSelect": "none",
314
- "wordBreak": "break-word",
315
- }
316
- }
317
- >
318
- Period
319
- </span>
320
- <RecommendedIcon
321
- dataTest="undefined-recommended-icon"
322
- isRecommended={true}
323
- />
324
- </div>
325
- </div>
326
- </li>
185
+ </li>
186
+ </Fragment>
327
187
  `;
328
188
 
329
189
  exports[`DimensionItem matches the snapshot with selected 1`] = `
330
- <li
331
- name="Period"
332
- onClick={[Function]}
333
- onMouseLeave={[Function]}
334
- onMouseOver={[Function]}
335
- style={
336
- Object {
337
- "alignItems": "center",
338
- "backgroundColor": "#e0f2f1",
339
- "borderRadius": "2px",
340
- "cursor": "pointer",
341
- "display": "flex",
342
- "fontWeight": 500,
343
- "marginBottom": 3,
344
- "marginTop": 3,
345
- "minHeight": "24px",
346
- }
347
- }
348
- >
349
- <div
350
- className="label"
351
- data-test="undefined-button-pe"
352
- style={
353
- Object {
354
- "display": "flex",
355
- "outline": "none",
356
- }
357
- }
358
- tabIndex={0}
190
+ <Fragment>
191
+ <CssVariables
192
+ colors={true}
193
+ elevations={false}
194
+ layers={false}
195
+ spacers={false}
196
+ theme={false}
197
+ />
198
+ <li
199
+ className="undefined"
200
+ name="Period"
201
+ onClick={[Function]}
202
+ onMouseLeave={[Function]}
203
+ onMouseOver={[Function]}
204
+ style={Object {}}
359
205
  >
360
206
  <div
361
- style={
362
- Object {
363
- "display": "flex",
364
- "flexDirection": "column",
365
- "padding": "3px 8px 0 8px",
366
- }
367
- }
368
- >
369
- <SvgClock16
370
- style={
371
- Object {
372
- "paddingBottom": "2px",
373
- "paddingLeft": "6px",
374
- }
375
- }
376
- />
377
- </div>
378
- <div
379
- style={
380
- Object {
381
- "padding": "2px 5px 2px 0",
382
- }
383
- }
207
+ data-test="undefined-button-pe"
208
+ tabIndex={0}
384
209
  >
385
- <span
386
- data-dimensionid="pe"
387
- style={
388
- Object {
389
- "color": "#212934",
390
- "fontSize": "14px",
391
- "userSelect": "none",
392
- "wordBreak": "break-word",
393
- }
394
- }
395
- >
396
- Period
397
- </span>
398
- <RecommendedIcon
399
- dataTest="undefined-recommended-icon"
400
- isRecommended={false}
401
- />
210
+ <div>
211
+ <SvgClock16 />
212
+ </div>
213
+ <div>
214
+ <span>
215
+ <span
216
+ data-dimensionid="pe"
217
+ >
218
+ Period
219
+ </span>
220
+ </span>
221
+ <RecommendedIcon
222
+ dataTest="undefined-recommended-icon"
223
+ isRecommended={false}
224
+ />
225
+ </div>
402
226
  </div>
403
- </div>
404
- </li>
227
+ </li>
228
+ </Fragment>
405
229
  `;
package/build/es/components/DimensionsPanel/List/styles/DimensionItem.module.css ADDED
@@ -0,0 +1,83 @@
1
+ .item {
2
+ color: var(--colors-grey900);
3
+ background-color: transparent;
4
+ fill: var(--colors-grey800);
5
+ display: flex;
6
+ outline: none;
7
+ justify-content: space-between;
8
+ padding: 0 0 0 4px;
9
+ margin: 0;
10
+ border-radius: 2px;
11
+ cursor: pointer;
12
+ min-height: 22px;
13
+ border: 1px solid transparent;
14
+ }
15
+
16
+ .item:not(.deactivated):not(.dragging):hover {
17
+ background-color: var(--colors-grey100);
18
+ border-color: var(--colors-grey400);
19
+ }
20
+
21
+ .label {
22
+ display: flex;
23
+ align-items: center;
24
+ }
25
+ .labelWrapper {
26
+ display: flex;
27
+ align-items: center;
28
+ }
29
+ .labelText {
30
+ font-size: 13px;
31
+ line-height: 15px;
32
+ margin-top: 1px;
33
+ }
34
+
35
+ .iconWrapper {
36
+ width: 16px;
37
+ height: 16px;
38
+ margin: 2px 4px 0 0;
39
+ flex: 0 0 auto;
40
+ align-self: flex-start;
41
+ }
42
+
43
+ .item.deactivated {
44
+ opacity: 0.5;
45
+ cursor: not-allowed;
46
+ }
47
+ .item.selected {
48
+ background-color: var(--colors-teal100);
49
+ border: 1px solid var(--colors-teal200);
50
+ color: var(--colors-teal900);
51
+ fill: var(--colors-teal800);
52
+ font-weight: 400;
53
+ }
54
+ .item.selected:not(.deactivated):hover {
55
+ background: #cdeae8;
56
+ border-color: #93c4bf;
57
+ box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
58
+ }
59
+
60
+ .optionsWrapper {
61
+ width: 20px;
62
+ height: 20px;
63
+ }
64
+
65
+ .lockWrapper svg path {
66
+ fill: var(--colors-grey800);
67
+ }
68
+
69
+ .lockWrapper {
70
+ background: var(--colors-grey300);
71
+ height: 20px;
72
+ padding: 0 1px 0 2px;
73
+ display: flex;
74
+ align-items: center;
75
+ justify-content: center;
76
+ }
77
+
78
+ .item.selected .lockWrapper {
79
+ background: #cbe7e5;
80
+ }
81
+ .item.selected .lockWrapper svg path {
82
+ fill: var(--colors-teal900);
83
+ }
package/build/es/components/DimensionsPanel/List/styles/DimensionList.style.js CHANGED
@@ -2,6 +2,6 @@ import { colors, spacers } from '@dhis2/ui';
2
2
  // Fix for vertical flex scrolling in Firefox/Safari:
3
3
  // Wrap the list in a div with position:relative (and flex:1 instead of on the list)
4
4
  // On the list, set position:absolute, width:100%, height:100%
5
- const _defaultExport = [".container.jsx-2067921157{position:relative;-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;min-height:30vh;}", ".wrapper.jsx-2067921157{position:absolute;width:100%;height:100%;overflow:auto;margin-top:0;padding:0;}", ".list.jsx-2067921157{margin:0;padding:0;}", `.header.jsx-2067921157{text-transform:uppercase;font-size:11px;color:${colors.grey700};margin:5px 0;-webkit-letter-spacing:0.3px;-moz-letter-spacing:0.3px;-ms-letter-spacing:0.3px;letter-spacing:0.3px;}`, `.section.jsx-2067921157:not(:last-child){margin-bottom:${spacers.dp24};}`];
6
- _defaultExport.__hash = "2067921157";
5
+ const _defaultExport = [".container.jsx-2040313368{position:relative;-webkit-flex:1 1 0%;-ms-flex:1 1 0%;flex:1 1 0%;min-height:30vh;}", ".wrapper.jsx-2040313368{position:absolute;width:100%;height:100%;overflow:auto;margin-top:0;padding:0;}", ".list.jsx-2040313368{margin:0;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:4px;}", `.header.jsx-2040313368{text-transform:uppercase;font-size:11px;color:${colors.grey600};margin:0 0 ${spacers.dp8} 0;-webkit-letter-spacing:0.3px;-moz-letter-spacing:0.3px;-ms-letter-spacing:0.3px;letter-spacing:0.3px;font-weight:400;}`, `.section.jsx-2040313368:not(:last-child){margin-bottom:${spacers.dp24};}`];
6
+ _defaultExport.__hash = "2040313368";
7
7
  export default _defaultExport;