@pingux/astro 1.32.1-alpha.4 → 1.32.1-alpha.5

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/lib/cjs/recipes/ConditionalFilter.stories.js +187 -76
  2. package/lib/recipes/ConditionalFilter.stories.js +188 -75
  3. package/package.json +1 -1
package/lib/cjs/recipes/ConditionalFilter.stories.js CHANGED
@@ -18,14 +18,10 @@ var _react = _interopRequireDefault(require("react"));
18
18
 
19
19
  var _CreateIcon = _interopRequireDefault(require("mdi-react/CreateIcon"));
20
20
 
21
- var _DragVerticalIcon = _interopRequireDefault(require("mdi-react/DragVerticalIcon"));
22
-
23
21
  var _TrashIcon = _interopRequireDefault(require("mdi-react/TrashIcon"));
24
22
 
25
23
  var _index = require("../index");
26
24
 
27
- var _OverlayPanel = _interopRequireDefault(require("../components/OverlayPanel"));
28
-
29
25
  var _react2 = require("@emotion/react");
30
26
 
31
27
  var _default = {
@@ -86,6 +82,15 @@ var Default = function Default() {
86
82
  field3: 'UX Team',
87
83
  key: 'Group2Field'
88
84
  }];
85
+ var noneConditions = [{
86
+ field1: 'Miscellaneous',
87
+ field3: 'Apple',
88
+ key: 'Miscellaneous1Field'
89
+ }, {
90
+ field1: 'Miscellaneous',
91
+ field3: 'Banana',
92
+ key: 'Miscellaneous2Field'
93
+ }];
89
94
  var trashButton = (0, _react2.jsx)(_index.IconButton, {
90
95
  "aria-label": "deleteButton",
91
96
  sx: {
@@ -102,21 +107,12 @@ var Default = function Default() {
102
107
 
103
108
  var _React$useState = _react["default"].useState(false),
104
109
  _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
105
- staticOverviewVisible = _React$useState2[0],
106
- setStaticOverviewVisible = _React$useState2[1];
107
-
108
- var _React$useState3 = _react["default"].useState(false),
109
- _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
110
- editOverviewVisible = _React$useState4[0],
111
- setEditOverviewVisible = _React$useState4[1];
110
+ editOverviewVisible = _React$useState2[0],
111
+ setEditOverviewVisible = _React$useState2[1];
112
112
 
113
- return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
114
- onPress: function onPress() {
115
- return setStaticOverviewVisible(true);
116
- }
117
- }, "Open Panel"), staticOverviewVisible && (0, _react2.jsx)(_OverlayPanel["default"], {
118
- isOpen: staticOverviewVisible
119
- }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
113
+ return (0, _react2.jsx)(_index.Box, {
114
+ maxWidth: "800px"
115
+ }, !editOverviewVisible ? (0, _react2.jsx)(_index.Box, {
120
116
  bg: "accent.99",
121
117
  p: "md"
122
118
  }, (0, _react2.jsx)(_index.Box, {
@@ -137,7 +133,7 @@ var Default = function Default() {
137
133
  }))), (0, _react2.jsx)(_index.Box, {
138
134
  isRow: true
139
135
  }, (0, _react2.jsx)(_index.Chip, {
140
- label: "All",
136
+ label: "ALL",
141
137
  bg: "decorative.7",
142
138
  sx: sx.customChipStyles
143
139
  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
@@ -164,16 +160,14 @@ var Default = function Default() {
164
160
  }), (0, _react2.jsx)(_index.Text, null, item.field3))));
165
161
  }), (0, _react2.jsx)(_index.Box, {
166
162
  isRow: true
167
- }, (0, _react2.jsx)(_index.Bracket, {
168
- isLast: true
169
- }), (0, _react2.jsx)(_index.Box, {
163
+ }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
170
164
  variant: "forms.input.container",
171
165
  mt: "md",
172
166
  sx: sx.borderedBoxStyles
173
167
  }, (0, _react2.jsx)(_index.Box, {
174
168
  isRow: true
175
169
  }, (0, _react2.jsx)(_index.Chip, {
176
- label: "Any",
170
+ label: "ANY",
177
171
  bg: "decorative.4",
178
172
  sx: sx.customChipStyles,
179
173
  alignSelf: "center"
@@ -202,15 +196,47 @@ var Default = function Default() {
202
196
  sx: sx.customChipStyles,
203
197
  alignSelf: "center"
204
198
  }), (0, _react2.jsx)(_index.Text, null, item.field3)));
205
- })))))), (0, _react2.jsx)(_index.Button, {
206
- onPress: function onPress() {
207
- return setStaticOverviewVisible(false);
208
- },
209
- width: "fit-content",
210
- mt: "lg"
211
- }, "Close Panel")), editOverviewVisible && (0, _react2.jsx)(_OverlayPanel["default"], {
212
- isOpen: editOverviewVisible
199
+ })))), (0, _react2.jsx)(_index.Box, {
200
+ isRow: true
201
+ }, (0, _react2.jsx)(_index.Bracket, {
202
+ isLast: true
203
+ }), (0, _react2.jsx)(_index.Box, {
204
+ variant: "forms.input.container",
205
+ mt: "md",
206
+ sx: sx.borderedBoxStyles
213
207
  }, (0, _react2.jsx)(_index.Box, {
208
+ isRow: true
209
+ }, (0, _react2.jsx)(_index.Chip, {
210
+ label: "NONE",
211
+ bg: "accent.20",
212
+ sx: sx.customChipStyles,
213
+ alignSelf: "center"
214
+ }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
215
+ ml: "sm"
216
+ }, (0, _map["default"])(noneConditions).call(noneConditions, function (item, index) {
217
+ return (0, _react2.jsx)(_index.Box, {
218
+ isRow: true,
219
+ key: item.key
220
+ }, (0, _react2.jsx)(_index.Bracket, {
221
+ isLast: index === noneConditions.length - 1
222
+ }), (0, _react2.jsx)(_index.Box, {
223
+ mt: "md",
224
+ variant: "forms.input.container",
225
+ bg: "white",
226
+ isRow: true,
227
+ width: "100%",
228
+ sx: sx.allConditionsBox
229
+ }, (0, _react2.jsx)(_index.Text, {
230
+ pl: "md",
231
+ pr: "sm"
232
+ }, item.field1), (0, _react2.jsx)(_index.Chip, {
233
+ label: "Equals",
234
+ bg: "accent.90",
235
+ textColor: "neutral.10",
236
+ sx: sx.customChipStyles,
237
+ alignSelf: "center"
238
+ }), (0, _react2.jsx)(_index.Text, null, item.field3)));
239
+ }))))) : (0, _react2.jsx)(_index.Box, {
214
240
  bg: "accent.99",
215
241
  p: "md"
216
242
  }, (0, _react2.jsx)(_index.Text, {
@@ -222,33 +248,38 @@ var Default = function Default() {
222
248
  mb: "md"
223
249
  }, (0, _react2.jsx)(_index.RockerButtonGroup, {
224
250
  mr: "sm",
225
- selectedKey: "all",
226
- "aria-label": "temp-label"
251
+ defaultSelectedKey: "all"
227
252
  }, (0, _react2.jsx)(_index.RockerButton, {
253
+ name: "all",
254
+ key: "all",
255
+ selectedStyles: {
256
+ bg: 'decorative.7'
257
+ }
258
+ }, (0, _react2.jsx)(_index.Text, {
259
+ sx: sx.defaultText
260
+ }, "ALL")), (0, _react2.jsx)(_index.RockerButton, {
228
261
  name: "any",
229
262
  key: "any",
230
263
  selectedStyles: {
231
- bg: 'decorative.7'
232
- },
233
- "aria-label": "temp-label"
264
+ bg: 'decorative.4'
265
+ }
234
266
  }, (0, _react2.jsx)(_index.Text, {
235
267
  sx: sx.defaultText
236
- }, "Any")), (0, _react2.jsx)(_index.RockerButton, {
237
- name: "all",
238
- key: "all",
268
+ }, "ANY")), (0, _react2.jsx)(_index.RockerButton, {
269
+ name: "none",
270
+ key: "none",
239
271
  selectedStyles: {
240
- bg: 'decorative.7'
241
- },
242
- "aria-label": "temp-label"
272
+ bg: 'accent.20'
273
+ }
243
274
  }, (0, _react2.jsx)(_index.Text, {
244
275
  sx: sx.defaultText
245
- }, "All"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
276
+ }, "NONE"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
246
277
  variant: "inline",
247
278
  width: "fit-content",
248
279
  role: "button",
249
280
  title: "Add Field Button",
250
281
  ml: "auto",
251
- mr: "xl",
282
+ mr: "sm",
252
283
  "aria-label": "add"
253
284
  }, "+ Add")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
254
285
  return (0, _react2.jsx)(_index.Box, {
@@ -256,10 +287,7 @@ var Default = function Default() {
256
287
  alignItems: "center",
257
288
  mb: "md",
258
289
  key: item.key
259
- }, (0, _react2.jsx)(_index.Icon, {
260
- icon: _DragVerticalIcon["default"],
261
- mr: "sm"
262
- }), (0, _react2.jsx)(_index.Box, {
290
+ }, (0, _react2.jsx)(_index.Box, {
263
291
  isRow: true,
264
292
  width: "100%"
265
293
  }, (0, _react2.jsx)(_index.TextField, {
@@ -296,10 +324,7 @@ var Default = function Default() {
296
324
  })), trashButton);
297
325
  }), (0, _react2.jsx)(_index.Box, {
298
326
  isRow: true
299
- }, (0, _react2.jsx)(_index.Icon, {
300
- icon: _DragVerticalIcon["default"],
301
- mr: "sm"
302
- }), (0, _react2.jsx)(_index.Box, {
327
+ }, (0, _react2.jsx)(_index.Box, {
303
328
  variant: "forms.input.container",
304
329
  sx: sx.borderedBoxStyles
305
330
  }, (0, _react2.jsx)(_index.Box, {
@@ -308,32 +333,38 @@ var Default = function Default() {
308
333
  mb: "md"
309
334
  }, (0, _react2.jsx)(_index.RockerButtonGroup, {
310
335
  mr: "sm",
311
- "aria-label": "temp-label"
336
+ defaultSelectedKey: "any"
312
337
  }, (0, _react2.jsx)(_index.RockerButton, {
338
+ name: "all",
339
+ key: "all",
340
+ selectedStyles: {
341
+ bg: 'decorative.7'
342
+ }
343
+ }, (0, _react2.jsx)(_index.Text, {
344
+ sx: sx.defaultText
345
+ }, "ALL")), (0, _react2.jsx)(_index.RockerButton, {
313
346
  name: "any",
314
347
  key: "any",
315
348
  selectedStyles: {
316
349
  bg: 'decorative.4'
317
- },
318
- "aria-label": "any"
350
+ }
319
351
  }, (0, _react2.jsx)(_index.Text, {
320
352
  sx: sx.defaultText
321
- }, "Any")), (0, _react2.jsx)(_index.RockerButton, {
322
- name: "all",
323
- key: "all",
353
+ }, "ANY")), (0, _react2.jsx)(_index.RockerButton, {
354
+ name: "none",
355
+ key: "none",
324
356
  selectedStyles: {
325
- bg: 'decorative.4'
326
- },
327
- "aria-label": "all"
357
+ bg: 'accent.20'
358
+ }
328
359
  }, (0, _react2.jsx)(_index.Text, {
329
360
  sx: sx.defaultText
330
- }, "All"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
361
+ }, "NONE"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
331
362
  variant: "inline",
332
363
  width: "fit-content",
333
364
  role: "button",
334
365
  title: "Add Field Button",
335
366
  ml: "auto",
336
- mr: "xl",
367
+ mr: "sm",
337
368
  "aria-label": "add"
338
369
  }, "+ Add")), (0, _react2.jsx)(_index.Box, {
339
370
  ml: "lg"
@@ -343,10 +374,7 @@ var Default = function Default() {
343
374
  alignItems: "center",
344
375
  mb: "md",
345
376
  key: item.key
346
- }, (0, _react2.jsx)(_index.Icon, {
347
- icon: _DragVerticalIcon["default"],
348
- mr: "sm"
349
- }), (0, _react2.jsx)(_index.Box, {
377
+ }, (0, _react2.jsx)(_index.Box, {
350
378
  isRow: true,
351
379
  width: "100%"
352
380
  }, (0, _react2.jsx)(_index.TextField, {
@@ -381,16 +409,99 @@ var Default = function Default() {
381
409
  width: "40%",
382
410
  mr: "xs"
383
411
  })), trashButton);
384
- }))), (0, _react2.jsx)(_index.IconButton, {
385
- "aria-label": "my-label"
386
- }, (0, _react2.jsx)(_index.Icon, {
387
- icon: _TrashIcon["default"],
388
- sx: {
389
- '& > path': {
390
- fill: '#68747f !important'
391
- }
412
+ }))), (0, _react2.jsx)(_index.Box, {
413
+ alignSelf: "start"
414
+ }, trashButton)), (0, _react2.jsx)(_index.Box, {
415
+ isRow: true,
416
+ mt: "md"
417
+ }, (0, _react2.jsx)(_index.Box, {
418
+ variant: "forms.input.container",
419
+ sx: sx.borderedBoxStyles
420
+ }, (0, _react2.jsx)(_index.Box, {
421
+ isRow: true,
422
+ alignItems: "center",
423
+ mb: "md"
424
+ }, (0, _react2.jsx)(_index.RockerButtonGroup, {
425
+ mr: "sm",
426
+ defaultSelectedKey: "none"
427
+ }, (0, _react2.jsx)(_index.RockerButton, {
428
+ name: "all",
429
+ key: "all",
430
+ selectedStyles: {
431
+ bg: 'decorative.7'
392
432
  }
433
+ }, (0, _react2.jsx)(_index.Text, {
434
+ sx: sx.defaultText
435
+ }, "ALL")), (0, _react2.jsx)(_index.RockerButton, {
436
+ name: "any",
437
+ key: "any",
438
+ selectedStyles: {
439
+ bg: 'decorative.4'
440
+ }
441
+ }, (0, _react2.jsx)(_index.Text, {
442
+ sx: sx.defaultText
443
+ }, "ANY")), (0, _react2.jsx)(_index.RockerButton, {
444
+ name: "none",
445
+ key: "none",
446
+ selectedStyles: {
447
+ bg: 'accent.20'
448
+ }
449
+ }, (0, _react2.jsx)(_index.Text, {
450
+ sx: sx.defaultText
451
+ }, "NONE"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
452
+ variant: "inline",
453
+ width: "fit-content",
454
+ role: "button",
455
+ title: "Add Field Button",
456
+ ml: "auto",
457
+ mr: "sm",
458
+ "aria-label": "add"
459
+ }, "+ Add")), (0, _react2.jsx)(_index.Box, {
460
+ ml: "lg"
461
+ }, (0, _map["default"])(noneConditions).call(noneConditions, function (item) {
462
+ return (0, _react2.jsx)(_index.Box, {
463
+ isRow: true,
464
+ alignItems: "center",
465
+ mb: "md",
466
+ key: item.key
467
+ }, (0, _react2.jsx)(_index.Box, {
468
+ isRow: true,
469
+ width: "100%"
470
+ }, (0, _react2.jsx)(_index.TextField, {
471
+ "aria-label": "temp-label",
472
+ value: item.field1,
473
+ width: "40%",
474
+ mr: "md",
475
+ containerProps: {
476
+ sx: {
477
+ '& > div::after': {
478
+ bg: 'accent.20'
479
+ }
480
+ }
481
+ }
482
+ }), (0, _react2.jsx)(_index.SelectField, {
483
+ "aria-label": "temp-label",
484
+ hasNoStatusIndicator: true,
485
+ selectedKey: "Equals",
486
+ mr: "md"
487
+ }, (0, _react2.jsx)(_index.Item, {
488
+ key: "Equals",
489
+ textValue: "Equals",
490
+ "aria-label": "Equals"
491
+ }, "Equals"), (0, _react2.jsx)(_index.Item, {
492
+ key: "NotEquals",
493
+ textValue: "NotEqual",
494
+ "aria-label": "NotEqual"
495
+ }, "Not Equal")), (0, _react2.jsx)(_index.TextField, {
496
+ "aria-label": "temp-label",
497
+ hasNoStatusIndicator: true,
498
+ value: item.field3,
499
+ width: "40%",
500
+ mr: "xs"
501
+ })), trashButton);
393
502
  }))), (0, _react2.jsx)(_index.Box, {
503
+ alignSelf: "start"
504
+ }, trashButton)), (0, _react2.jsx)(_index.Box, {
394
505
  isRow: true,
395
506
  mt: "lg"
396
507
  }, (0, _react2.jsx)(_index.Button, {
@@ -406,7 +517,7 @@ var Default = function Default() {
406
517
  },
407
518
  variant: "link",
408
519
  "aria-label": "cancel"
409
- }, "Cancel"))))));
520
+ }, "Cancel"))));
410
521
  };
411
522
 
412
523
  exports.Default = Default;
package/lib/recipes/ConditionalFilter.stories.js CHANGED
@@ -2,10 +2,8 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
2
2
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
3
3
  import React from 'react';
4
4
  import CreateIcon from 'mdi-react/CreateIcon';
5
- import DragVerticalIcon from 'mdi-react/DragVerticalIcon';
6
5
  import TrashIcon from 'mdi-react/TrashIcon';
7
- import { Box, Bracket, Button, Chip, IconButton, Icon, Item, OverlayProvider, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
8
- import OverlayPanel from '../components/OverlayPanel';
6
+ import { Box, Bracket, Button, Chip, IconButton, Icon, Item, RockerButtonGroup, RockerButton, SelectField, Text, TextField } from '../index';
9
7
  import { jsx as ___EmotionJSX } from "@emotion/react";
10
8
  export default {
11
9
  title: 'Recipes/Conditional Filter'
@@ -63,6 +61,15 @@ export var Default = function Default() {
63
61
  field3: 'UX Team',
64
62
  key: 'Group2Field'
65
63
  }];
64
+ var noneConditions = [{
65
+ field1: 'Miscellaneous',
66
+ field3: 'Apple',
67
+ key: 'Miscellaneous1Field'
68
+ }, {
69
+ field1: 'Miscellaneous',
70
+ field3: 'Banana',
71
+ key: 'Miscellaneous2Field'
72
+ }];
66
73
 
67
74
  var trashButton = ___EmotionJSX(IconButton, {
68
75
  "aria-label": "deleteButton",
@@ -80,21 +87,12 @@ export var Default = function Default() {
80
87
 
81
88
  var _React$useState = React.useState(false),
82
89
  _React$useState2 = _slicedToArray(_React$useState, 2),
83
- staticOverviewVisible = _React$useState2[0],
84
- setStaticOverviewVisible = _React$useState2[1];
85
-
86
- var _React$useState3 = React.useState(false),
87
- _React$useState4 = _slicedToArray(_React$useState3, 2),
88
- editOverviewVisible = _React$useState4[0],
89
- setEditOverviewVisible = _React$useState4[1];
90
+ editOverviewVisible = _React$useState2[0],
91
+ setEditOverviewVisible = _React$useState2[1];
90
92
 
91
- return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
92
- onPress: function onPress() {
93
- return setStaticOverviewVisible(true);
94
- }
95
- }, "Open Panel"), staticOverviewVisible && ___EmotionJSX(OverlayPanel, {
96
- isOpen: staticOverviewVisible
97
- }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
93
+ return ___EmotionJSX(Box, {
94
+ maxWidth: "800px"
95
+ }, !editOverviewVisible ? ___EmotionJSX(Box, {
98
96
  bg: "accent.99",
99
97
  p: "md"
100
98
  }, ___EmotionJSX(Box, {
@@ -115,7 +113,7 @@ export var Default = function Default() {
115
113
  }))), ___EmotionJSX(Box, {
116
114
  isRow: true
117
115
  }, ___EmotionJSX(Chip, {
118
- label: "All",
116
+ label: "ALL",
119
117
  bg: "decorative.7",
120
118
  sx: sx.customChipStyles
121
119
  }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
@@ -142,16 +140,14 @@ export var Default = function Default() {
142
140
  }), ___EmotionJSX(Text, null, item.field3))));
143
141
  }), ___EmotionJSX(Box, {
144
142
  isRow: true
145
- }, ___EmotionJSX(Bracket, {
146
- isLast: true
147
- }), ___EmotionJSX(Box, {
143
+ }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
148
144
  variant: "forms.input.container",
149
145
  mt: "md",
150
146
  sx: sx.borderedBoxStyles
151
147
  }, ___EmotionJSX(Box, {
152
148
  isRow: true
153
149
  }, ___EmotionJSX(Chip, {
154
- label: "Any",
150
+ label: "ANY",
155
151
  bg: "decorative.4",
156
152
  sx: sx.customChipStyles,
157
153
  alignSelf: "center"
@@ -180,15 +176,47 @@ export var Default = function Default() {
180
176
  sx: sx.customChipStyles,
181
177
  alignSelf: "center"
182
178
  }), ___EmotionJSX(Text, null, item.field3)));
183
- })))))), ___EmotionJSX(Button, {
184
- onPress: function onPress() {
185
- return setStaticOverviewVisible(false);
186
- },
187
- width: "fit-content",
188
- mt: "lg"
189
- }, "Close Panel")), editOverviewVisible && ___EmotionJSX(OverlayPanel, {
190
- isOpen: editOverviewVisible
179
+ })))), ___EmotionJSX(Box, {
180
+ isRow: true
181
+ }, ___EmotionJSX(Bracket, {
182
+ isLast: true
183
+ }), ___EmotionJSX(Box, {
184
+ variant: "forms.input.container",
185
+ mt: "md",
186
+ sx: sx.borderedBoxStyles
191
187
  }, ___EmotionJSX(Box, {
188
+ isRow: true
189
+ }, ___EmotionJSX(Chip, {
190
+ label: "NONE",
191
+ bg: "accent.20",
192
+ sx: sx.customChipStyles,
193
+ alignSelf: "center"
194
+ }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
195
+ ml: "sm"
196
+ }, _mapInstanceProperty(noneConditions).call(noneConditions, function (item, index) {
197
+ return ___EmotionJSX(Box, {
198
+ isRow: true,
199
+ key: item.key
200
+ }, ___EmotionJSX(Bracket, {
201
+ isLast: index === noneConditions.length - 1
202
+ }), ___EmotionJSX(Box, {
203
+ mt: "md",
204
+ variant: "forms.input.container",
205
+ bg: "white",
206
+ isRow: true,
207
+ width: "100%",
208
+ sx: sx.allConditionsBox
209
+ }, ___EmotionJSX(Text, {
210
+ pl: "md",
211
+ pr: "sm"
212
+ }, item.field1), ___EmotionJSX(Chip, {
213
+ label: "Equals",
214
+ bg: "accent.90",
215
+ textColor: "neutral.10",
216
+ sx: sx.customChipStyles,
217
+ alignSelf: "center"
218
+ }), ___EmotionJSX(Text, null, item.field3)));
219
+ }))))) : ___EmotionJSX(Box, {
192
220
  bg: "accent.99",
193
221
  p: "md"
194
222
  }, ___EmotionJSX(Text, {
@@ -200,33 +228,38 @@ export var Default = function Default() {
200
228
  mb: "md"
201
229
  }, ___EmotionJSX(RockerButtonGroup, {
202
230
  mr: "sm",
203
- selectedKey: "all",
204
- "aria-label": "temp-label"
231
+ defaultSelectedKey: "all"
205
232
  }, ___EmotionJSX(RockerButton, {
233
+ name: "all",
234
+ key: "all",
235
+ selectedStyles: {
236
+ bg: 'decorative.7'
237
+ }
238
+ }, ___EmotionJSX(Text, {
239
+ sx: sx.defaultText
240
+ }, "ALL")), ___EmotionJSX(RockerButton, {
206
241
  name: "any",
207
242
  key: "any",
208
243
  selectedStyles: {
209
- bg: 'decorative.7'
210
- },
211
- "aria-label": "temp-label"
244
+ bg: 'decorative.4'
245
+ }
212
246
  }, ___EmotionJSX(Text, {
213
247
  sx: sx.defaultText
214
- }, "Any")), ___EmotionJSX(RockerButton, {
215
- name: "all",
216
- key: "all",
248
+ }, "ANY")), ___EmotionJSX(RockerButton, {
249
+ name: "none",
250
+ key: "none",
217
251
  selectedStyles: {
218
- bg: 'decorative.7'
219
- },
220
- "aria-label": "temp-label"
252
+ bg: 'accent.20'
253
+ }
221
254
  }, ___EmotionJSX(Text, {
222
255
  sx: sx.defaultText
223
- }, "All"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
256
+ }, "NONE"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
224
257
  variant: "inline",
225
258
  width: "fit-content",
226
259
  role: "button",
227
260
  title: "Add Field Button",
228
261
  ml: "auto",
229
- mr: "xl",
262
+ mr: "sm",
230
263
  "aria-label": "add"
231
264
  }, "+ Add")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
232
265
  return ___EmotionJSX(Box, {
@@ -234,10 +267,7 @@ export var Default = function Default() {
234
267
  alignItems: "center",
235
268
  mb: "md",
236
269
  key: item.key
237
- }, ___EmotionJSX(Icon, {
238
- icon: DragVerticalIcon,
239
- mr: "sm"
240
- }), ___EmotionJSX(Box, {
270
+ }, ___EmotionJSX(Box, {
241
271
  isRow: true,
242
272
  width: "100%"
243
273
  }, ___EmotionJSX(TextField, {
@@ -274,10 +304,7 @@ export var Default = function Default() {
274
304
  })), trashButton);
275
305
  }), ___EmotionJSX(Box, {
276
306
  isRow: true
277
- }, ___EmotionJSX(Icon, {
278
- icon: DragVerticalIcon,
279
- mr: "sm"
280
- }), ___EmotionJSX(Box, {
307
+ }, ___EmotionJSX(Box, {
281
308
  variant: "forms.input.container",
282
309
  sx: sx.borderedBoxStyles
283
310
  }, ___EmotionJSX(Box, {
@@ -286,32 +313,38 @@ export var Default = function Default() {
286
313
  mb: "md"
287
314
  }, ___EmotionJSX(RockerButtonGroup, {
288
315
  mr: "sm",
289
- "aria-label": "temp-label"
316
+ defaultSelectedKey: "any"
290
317
  }, ___EmotionJSX(RockerButton, {
318
+ name: "all",
319
+ key: "all",
320
+ selectedStyles: {
321
+ bg: 'decorative.7'
322
+ }
323
+ }, ___EmotionJSX(Text, {
324
+ sx: sx.defaultText
325
+ }, "ALL")), ___EmotionJSX(RockerButton, {
291
326
  name: "any",
292
327
  key: "any",
293
328
  selectedStyles: {
294
329
  bg: 'decorative.4'
295
- },
296
- "aria-label": "any"
330
+ }
297
331
  }, ___EmotionJSX(Text, {
298
332
  sx: sx.defaultText
299
- }, "Any")), ___EmotionJSX(RockerButton, {
300
- name: "all",
301
- key: "all",
333
+ }, "ANY")), ___EmotionJSX(RockerButton, {
334
+ name: "none",
335
+ key: "none",
302
336
  selectedStyles: {
303
- bg: 'decorative.4'
304
- },
305
- "aria-label": "all"
337
+ bg: 'accent.20'
338
+ }
306
339
  }, ___EmotionJSX(Text, {
307
340
  sx: sx.defaultText
308
- }, "All"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
341
+ }, "NONE"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
309
342
  variant: "inline",
310
343
  width: "fit-content",
311
344
  role: "button",
312
345
  title: "Add Field Button",
313
346
  ml: "auto",
314
- mr: "xl",
347
+ mr: "sm",
315
348
  "aria-label": "add"
316
349
  }, "+ Add")), ___EmotionJSX(Box, {
317
350
  ml: "lg"
@@ -321,10 +354,7 @@ export var Default = function Default() {
321
354
  alignItems: "center",
322
355
  mb: "md",
323
356
  key: item.key
324
- }, ___EmotionJSX(Icon, {
325
- icon: DragVerticalIcon,
326
- mr: "sm"
327
- }), ___EmotionJSX(Box, {
357
+ }, ___EmotionJSX(Box, {
328
358
  isRow: true,
329
359
  width: "100%"
330
360
  }, ___EmotionJSX(TextField, {
@@ -359,16 +389,99 @@ export var Default = function Default() {
359
389
  width: "40%",
360
390
  mr: "xs"
361
391
  })), trashButton);
362
- }))), ___EmotionJSX(IconButton, {
363
- "aria-label": "my-label"
364
- }, ___EmotionJSX(Icon, {
365
- icon: TrashIcon,
366
- sx: {
367
- '& > path': {
368
- fill: '#68747f !important'
369
- }
392
+ }))), ___EmotionJSX(Box, {
393
+ alignSelf: "start"
394
+ }, trashButton)), ___EmotionJSX(Box, {
395
+ isRow: true,
396
+ mt: "md"
397
+ }, ___EmotionJSX(Box, {
398
+ variant: "forms.input.container",
399
+ sx: sx.borderedBoxStyles
400
+ }, ___EmotionJSX(Box, {
401
+ isRow: true,
402
+ alignItems: "center",
403
+ mb: "md"
404
+ }, ___EmotionJSX(RockerButtonGroup, {
405
+ mr: "sm",
406
+ defaultSelectedKey: "none"
407
+ }, ___EmotionJSX(RockerButton, {
408
+ name: "all",
409
+ key: "all",
410
+ selectedStyles: {
411
+ bg: 'decorative.7'
370
412
  }
413
+ }, ___EmotionJSX(Text, {
414
+ sx: sx.defaultText
415
+ }, "ALL")), ___EmotionJSX(RockerButton, {
416
+ name: "any",
417
+ key: "any",
418
+ selectedStyles: {
419
+ bg: 'decorative.4'
420
+ }
421
+ }, ___EmotionJSX(Text, {
422
+ sx: sx.defaultText
423
+ }, "ANY")), ___EmotionJSX(RockerButton, {
424
+ name: "none",
425
+ key: "none",
426
+ selectedStyles: {
427
+ bg: 'accent.20'
428
+ }
429
+ }, ___EmotionJSX(Text, {
430
+ sx: sx.defaultText
431
+ }, "NONE"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
432
+ variant: "inline",
433
+ width: "fit-content",
434
+ role: "button",
435
+ title: "Add Field Button",
436
+ ml: "auto",
437
+ mr: "sm",
438
+ "aria-label": "add"
439
+ }, "+ Add")), ___EmotionJSX(Box, {
440
+ ml: "lg"
441
+ }, _mapInstanceProperty(noneConditions).call(noneConditions, function (item) {
442
+ return ___EmotionJSX(Box, {
443
+ isRow: true,
444
+ alignItems: "center",
445
+ mb: "md",
446
+ key: item.key
447
+ }, ___EmotionJSX(Box, {
448
+ isRow: true,
449
+ width: "100%"
450
+ }, ___EmotionJSX(TextField, {
451
+ "aria-label": "temp-label",
452
+ value: item.field1,
453
+ width: "40%",
454
+ mr: "md",
455
+ containerProps: {
456
+ sx: {
457
+ '& > div::after': {
458
+ bg: 'accent.20'
459
+ }
460
+ }
461
+ }
462
+ }), ___EmotionJSX(SelectField, {
463
+ "aria-label": "temp-label",
464
+ hasNoStatusIndicator: true,
465
+ selectedKey: "Equals",
466
+ mr: "md"
467
+ }, ___EmotionJSX(Item, {
468
+ key: "Equals",
469
+ textValue: "Equals",
470
+ "aria-label": "Equals"
471
+ }, "Equals"), ___EmotionJSX(Item, {
472
+ key: "NotEquals",
473
+ textValue: "NotEqual",
474
+ "aria-label": "NotEqual"
475
+ }, "Not Equal")), ___EmotionJSX(TextField, {
476
+ "aria-label": "temp-label",
477
+ hasNoStatusIndicator: true,
478
+ value: item.field3,
479
+ width: "40%",
480
+ mr: "xs"
481
+ })), trashButton);
371
482
  }))), ___EmotionJSX(Box, {
483
+ alignSelf: "start"
484
+ }, trashButton)), ___EmotionJSX(Box, {
372
485
  isRow: true,
373
486
  mt: "lg"
374
487
  }, ___EmotionJSX(Button, {
@@ -384,5 +497,5 @@ export var Default = function Default() {
384
497
  },
385
498
  variant: "link",
386
499
  "aria-label": "cancel"
387
- }, "Cancel"))))));
500
+ }, "Cancel"))));
388
501
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.32.1-alpha.4",
3
+ "version": "1.32.1-alpha.5",
4
4
  "description": "PingUX themeable React component library",
5
5
  "repository": {
6
6
  "type": "git",