@pingux/astro 1.26.1-alpha.5 → 1.26.1-alpha.6

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 (5) hide show
  1. package/lib/cjs/recipes/CollapsiblePanel.stories.js +30 -25
  2. package/lib/cjs/recipes/ConditionalFilter.stories.js +36 -55
  3. package/lib/recipes/CollapsiblePanel.stories.js +30 -25
  4. package/lib/recipes/ConditionalFilter.stories.js +35 -54
  5. package/package.json +1 -1
package/lib/cjs/recipes/CollapsiblePanel.stories.js CHANGED
@@ -138,6 +138,33 @@ var data = [{
138
138
  subtitle: '',
139
139
  chipValue: '29'
140
140
  }];
141
+ var sx = {
142
+ listViewItem: {
143
+ bg: 'white',
144
+ width: '100%',
145
+ justifyContent: 'space-between',
146
+ alignItems: 'center',
147
+ '&.is-hovered': {
148
+ bg: 'accent.99'
149
+ }
150
+ },
151
+ defaultSelectedBox: {
152
+ border: '1px solid',
153
+ borderColor: 'neutral.80',
154
+ borderRadius: 5,
155
+ minHeight: 22,
156
+ justifyContent: 'center',
157
+ alignItems: 'center',
158
+ p: 'xs',
159
+ maxWidth: '50%'
160
+ },
161
+ defaultSelectedTitle: {
162
+ fontSize: 'sm',
163
+ pl: 'xs',
164
+ maxHeight: 32,
165
+ overflow: 'hidden'
166
+ }
167
+ };
141
168
 
142
169
  var Default = function Default() {
143
170
  var _useState = (0, _react.useState)(data),
@@ -257,15 +284,7 @@ var Default = function Default() {
257
284
  "data-id": item.key,
258
285
  listItemProps: {
259
286
  isRow: true,
260
- sx: {
261
- bg: 'white',
262
- width: '100%',
263
- justifyContent: 'space-between',
264
- alignItems: 'center',
265
- '&.is-hovered': {
266
- bg: 'accent.99'
267
- }
268
- }
287
+ sx: sx.listViewItem
269
288
  }
270
289
  }, (0, _react2.jsx)(_.Box, {
271
290
  isRow: true
@@ -293,16 +312,7 @@ var Default = function Default() {
293
312
  variant: "listSubtitle"
294
313
  }, item.subtitle))), item.isDefaultSelected ? (0, _react2.jsx)(_.Box, {
295
314
  isRow: true,
296
- sx: {
297
- border: '1px solid',
298
- borderColor: 'neutral.80',
299
- borderRadius: 5,
300
- minHeight: 22,
301
- justifyContent: 'center',
302
- alignItems: 'center',
303
- p: 'xs',
304
- maxWidth: '50%'
305
- }
315
+ sx: sx.defaultSelectedBox
306
316
  }, (0, _react2.jsx)(_.Icon, {
307
317
  icon: _CheckIcon["default"],
308
318
  color: "neutral.20",
@@ -311,12 +321,7 @@ var Default = function Default() {
311
321
  flexShrink: 0
312
322
  }
313
323
  }), (0, _react2.jsx)(_.Text, {
314
- sx: {
315
- fontSize: 'sm',
316
- pl: 'xs',
317
- maxHeight: 32,
318
- overflow: 'hidden'
319
- }
324
+ sx: sx.defaultSelectedTitle
320
325
  }, "Added by Filter")) : (0, _react2.jsx)(_.CheckboxField, {
321
326
  controlProps: {
322
327
  color: 'neutral.10',
package/lib/cjs/recipes/ConditionalFilter.stories.js CHANGED
@@ -32,25 +32,42 @@ var _default = {
32
32
  title: 'Recipes/ConditionalFilter'
33
33
  };
34
34
  exports["default"] = _default;
35
-
36
- var Default = function Default() {
37
- var customChipStyles = {
35
+ var sx = {
36
+ customChipStyles: {
37
+ marginRight: 'sm',
38
38
  '& > span': {
39
39
  textTransform: 'none',
40
40
  fontWeight: '500'
41
41
  },
42
42
  minWidth: '65px',
43
43
  'z-index': '1'
44
- };
45
- var borderedBoxStyles = {
44
+ },
45
+ borderedBoxStyles: {
46
46
  '&::after': {
47
47
  bg: 'decorative.7'
48
48
  },
49
49
  borderWidth: 1,
50
50
  borderStyle: 'solid',
51
51
  borderColor: 'neutral.80',
52
- borderRadius: '4px'
53
- };
52
+ borderRadius: '4px',
53
+ padding: 'sm',
54
+ width: '100%'
55
+ },
56
+ allConditionsBox: {
57
+ '&::after': {
58
+ bg: 'decorative.7'
59
+ },
60
+ alignItems: 'center',
61
+ borderRadius: '4px',
62
+ marginTop: 'md'
63
+ },
64
+ defaultText: {
65
+ textTransform: 'none',
66
+ color: 'inherit'
67
+ }
68
+ };
69
+
70
+ var Default = function Default() {
54
71
  var allConditions = [{
55
72
  field1: 'Family Name',
56
73
  field3: 'John',
@@ -122,8 +139,7 @@ var Default = function Default() {
122
139
  }, (0, _react2.jsx)(_index.Chip, {
123
140
  label: "All",
124
141
  bg: "decorative.7",
125
- mr: "sm",
126
- sx: customChipStyles
142
+ sx: sx.customChipStyles
127
143
  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
128
144
  return (0, _react2.jsx)(_index.Box, {
129
145
  isRow: true,
@@ -135,14 +151,7 @@ var Default = function Default() {
135
151
  variant: "forms.input.container",
136
152
  bg: "white",
137
153
  isRow: true,
138
- alignItems: "center",
139
- borderRadius: "4px",
140
- sx: {
141
- '&::after': {
142
- bg: 'decorative.7'
143
- }
144
- },
145
- mt: "15px"
154
+ sx: sx.allConditionsBox
146
155
  }, (0, _react2.jsx)(_index.Text, {
147
156
  pl: "md",
148
157
  pr: "sm"
@@ -150,8 +159,7 @@ var Default = function Default() {
150
159
  label: "Equals",
151
160
  bg: "accent.90",
152
161
  textColor: "neutral.10",
153
- sx: customChipStyles,
154
- mr: "sm",
162
+ sx: sx.customChipStyles,
155
163
  alignSelf: "center"
156
164
  }), (0, _react2.jsx)(_index.Text, null, item.field3))));
157
165
  }), (0, _react2.jsx)(_index.Box, {
@@ -160,18 +168,14 @@ var Default = function Default() {
160
168
  isLast: true
161
169
  }), (0, _react2.jsx)(_index.Box, {
162
170
  variant: "forms.input.container",
163
- borderRadius: "4px",
164
- p: "sm",
165
171
  mt: "md",
166
- sx: borderedBoxStyles,
167
- width: "100%"
172
+ sx: sx.borderedBoxStyles
168
173
  }, (0, _react2.jsx)(_index.Box, {
169
174
  isRow: true
170
175
  }, (0, _react2.jsx)(_index.Chip, {
171
176
  label: "Any",
172
177
  bg: "decorative.4",
173
- mr: "sm",
174
- sx: customChipStyles,
178
+ sx: sx.customChipStyles,
175
179
  alignSelf: "center"
176
180
  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
177
181
  ml: "sm"
@@ -186,14 +190,8 @@ var Default = function Default() {
186
190
  variant: "forms.input.container",
187
191
  bg: "white",
188
192
  isRow: true,
189
- alignItems: "center",
190
- borderRadius: "4px",
191
193
  width: "100%",
192
- sx: {
193
- '&::after': {
194
- bg: 'decorative.4'
195
- }
196
- }
194
+ sx: sx.allConditionsBox
197
195
  }, (0, _react2.jsx)(_index.Text, {
198
196
  pl: "md",
199
197
  pr: "sm"
@@ -201,8 +199,7 @@ var Default = function Default() {
201
199
  label: "Equals",
202
200
  bg: "accent.90",
203
201
  textColor: "neutral.10",
204
- sx: customChipStyles,
205
- mr: "sm",
202
+ sx: sx.customChipStyles,
206
203
  alignSelf: "center"
207
204
  }), (0, _react2.jsx)(_index.Text, null, item.field3)));
208
205
  })))))), (0, _react2.jsx)(_index.Button, {
@@ -235,10 +232,7 @@ var Default = function Default() {
235
232
  },
236
233
  "aria-label": "temp-label"
237
234
  }, (0, _react2.jsx)(_index.Text, {
238
- sx: {
239
- textTransform: 'none',
240
- color: 'inherit'
241
- }
235
+ sx: sx.defaultText
242
236
  }, "Any")), (0, _react2.jsx)(_index.RockerButton, {
243
237
  name: "all",
244
238
  key: "all",
@@ -247,10 +241,7 @@ var Default = function Default() {
247
241
  },
248
242
  "aria-label": "temp-label"
249
243
  }, (0, _react2.jsx)(_index.Text, {
250
- sx: {
251
- textTransform: 'none',
252
- color: 'inherit'
253
- }
244
+ sx: sx.defaultText
254
245
  }, "All"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
255
246
  variant: "inline",
256
247
  width: "fit-content",
@@ -310,11 +301,7 @@ var Default = function Default() {
310
301
  mr: "sm"
311
302
  }), (0, _react2.jsx)(_index.Box, {
312
303
  variant: "forms.input.container",
313
- borderRadius: "4px",
314
- p: "sm",
315
- width: "100%",
316
- sx: borderedBoxStyles,
317
- mr: "xs"
304
+ sx: sx.borderedBoxStyles
318
305
  }, (0, _react2.jsx)(_index.Box, {
319
306
  isRow: true,
320
307
  alignItems: "center",
@@ -330,10 +317,7 @@ var Default = function Default() {
330
317
  },
331
318
  "aria-label": "any"
332
319
  }, (0, _react2.jsx)(_index.Text, {
333
- sx: {
334
- textTransform: 'none',
335
- color: 'inherit'
336
- }
320
+ sx: sx.defaultText
337
321
  }, "Any")), (0, _react2.jsx)(_index.RockerButton, {
338
322
  name: "all",
339
323
  key: "all",
@@ -342,10 +326,7 @@ var Default = function Default() {
342
326
  },
343
327
  "aria-label": "all"
344
328
  }, (0, _react2.jsx)(_index.Text, {
345
- sx: {
346
- textTransform: 'none',
347
- color: 'inherit'
348
- }
329
+ sx: sx.defaultText
349
330
  }, "All"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
350
331
  variant: "inline",
351
332
  width: "fit-content",
package/lib/recipes/CollapsiblePanel.stories.js CHANGED
@@ -95,6 +95,33 @@ var data = [{
95
95
  subtitle: '',
96
96
  chipValue: '29'
97
97
  }];
98
+ var sx = {
99
+ listViewItem: {
100
+ bg: 'white',
101
+ width: '100%',
102
+ justifyContent: 'space-between',
103
+ alignItems: 'center',
104
+ '&.is-hovered': {
105
+ bg: 'accent.99'
106
+ }
107
+ },
108
+ defaultSelectedBox: {
109
+ border: '1px solid',
110
+ borderColor: 'neutral.80',
111
+ borderRadius: 5,
112
+ minHeight: 22,
113
+ justifyContent: 'center',
114
+ alignItems: 'center',
115
+ p: 'xs',
116
+ maxWidth: '50%'
117
+ },
118
+ defaultSelectedTitle: {
119
+ fontSize: 'sm',
120
+ pl: 'xs',
121
+ maxHeight: 32,
122
+ overflow: 'hidden'
123
+ }
124
+ };
98
125
  export var Default = function Default() {
99
126
  var _useState = useState(data),
100
127
  _useState2 = _slicedToArray(_useState, 2),
@@ -213,15 +240,7 @@ export var Default = function Default() {
213
240
  "data-id": item.key,
214
241
  listItemProps: {
215
242
  isRow: true,
216
- sx: {
217
- bg: 'white',
218
- width: '100%',
219
- justifyContent: 'space-between',
220
- alignItems: 'center',
221
- '&.is-hovered': {
222
- bg: 'accent.99'
223
- }
224
- }
243
+ sx: sx.listViewItem
225
244
  }
226
245
  }, ___EmotionJSX(Box, {
227
246
  isRow: true
@@ -249,16 +268,7 @@ export var Default = function Default() {
249
268
  variant: "listSubtitle"
250
269
  }, item.subtitle))), item.isDefaultSelected ? ___EmotionJSX(Box, {
251
270
  isRow: true,
252
- sx: {
253
- border: '1px solid',
254
- borderColor: 'neutral.80',
255
- borderRadius: 5,
256
- minHeight: 22,
257
- justifyContent: 'center',
258
- alignItems: 'center',
259
- p: 'xs',
260
- maxWidth: '50%'
261
- }
271
+ sx: sx.defaultSelectedBox
262
272
  }, ___EmotionJSX(Icon, {
263
273
  icon: CheckIcon,
264
274
  color: "neutral.20",
@@ -267,12 +277,7 @@ export var Default = function Default() {
267
277
  flexShrink: 0
268
278
  }
269
279
  }), ___EmotionJSX(Text, {
270
- sx: {
271
- fontSize: 'sm',
272
- pl: 'xs',
273
- maxHeight: 32,
274
- overflow: 'hidden'
275
- }
280
+ sx: sx.defaultSelectedTitle
276
281
  }, "Added by Filter")) : ___EmotionJSX(CheckboxField, {
277
282
  controlProps: {
278
283
  color: 'neutral.10',
package/lib/recipes/ConditionalFilter.stories.js CHANGED
@@ -10,24 +10,41 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
10
10
  export default {
11
11
  title: 'Recipes/ConditionalFilter'
12
12
  };
13
- export var Default = function Default() {
14
- var customChipStyles = {
13
+ var sx = {
14
+ customChipStyles: {
15
+ marginRight: 'sm',
15
16
  '& > span': {
16
17
  textTransform: 'none',
17
18
  fontWeight: '500'
18
19
  },
19
20
  minWidth: '65px',
20
21
  'z-index': '1'
21
- };
22
- var borderedBoxStyles = {
22
+ },
23
+ borderedBoxStyles: {
23
24
  '&::after': {
24
25
  bg: 'decorative.7'
25
26
  },
26
27
  borderWidth: 1,
27
28
  borderStyle: 'solid',
28
29
  borderColor: 'neutral.80',
29
- borderRadius: '4px'
30
- };
30
+ borderRadius: '4px',
31
+ padding: 'sm',
32
+ width: '100%'
33
+ },
34
+ allConditionsBox: {
35
+ '&::after': {
36
+ bg: 'decorative.7'
37
+ },
38
+ alignItems: 'center',
39
+ borderRadius: '4px',
40
+ marginTop: 'md'
41
+ },
42
+ defaultText: {
43
+ textTransform: 'none',
44
+ color: 'inherit'
45
+ }
46
+ };
47
+ export var Default = function Default() {
31
48
  var allConditions = [{
32
49
  field1: 'Family Name',
33
50
  field3: 'John',
@@ -100,8 +117,7 @@ export var Default = function Default() {
100
117
  }, ___EmotionJSX(Chip, {
101
118
  label: "All",
102
119
  bg: "decorative.7",
103
- mr: "sm",
104
- sx: customChipStyles
120
+ sx: sx.customChipStyles
105
121
  }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
106
122
  return ___EmotionJSX(Box, {
107
123
  isRow: true,
@@ -113,14 +129,7 @@ export var Default = function Default() {
113
129
  variant: "forms.input.container",
114
130
  bg: "white",
115
131
  isRow: true,
116
- alignItems: "center",
117
- borderRadius: "4px",
118
- sx: {
119
- '&::after': {
120
- bg: 'decorative.7'
121
- }
122
- },
123
- mt: "15px"
132
+ sx: sx.allConditionsBox
124
133
  }, ___EmotionJSX(Text, {
125
134
  pl: "md",
126
135
  pr: "sm"
@@ -128,8 +137,7 @@ export var Default = function Default() {
128
137
  label: "Equals",
129
138
  bg: "accent.90",
130
139
  textColor: "neutral.10",
131
- sx: customChipStyles,
132
- mr: "sm",
140
+ sx: sx.customChipStyles,
133
141
  alignSelf: "center"
134
142
  }), ___EmotionJSX(Text, null, item.field3))));
135
143
  }), ___EmotionJSX(Box, {
@@ -138,18 +146,14 @@ export var Default = function Default() {
138
146
  isLast: true
139
147
  }), ___EmotionJSX(Box, {
140
148
  variant: "forms.input.container",
141
- borderRadius: "4px",
142
- p: "sm",
143
149
  mt: "md",
144
- sx: borderedBoxStyles,
145
- width: "100%"
150
+ sx: sx.borderedBoxStyles
146
151
  }, ___EmotionJSX(Box, {
147
152
  isRow: true
148
153
  }, ___EmotionJSX(Chip, {
149
154
  label: "Any",
150
155
  bg: "decorative.4",
151
- mr: "sm",
152
- sx: customChipStyles,
156
+ sx: sx.customChipStyles,
153
157
  alignSelf: "center"
154
158
  }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
155
159
  ml: "sm"
@@ -164,14 +168,8 @@ export var Default = function Default() {
164
168
  variant: "forms.input.container",
165
169
  bg: "white",
166
170
  isRow: true,
167
- alignItems: "center",
168
- borderRadius: "4px",
169
171
  width: "100%",
170
- sx: {
171
- '&::after': {
172
- bg: 'decorative.4'
173
- }
174
- }
172
+ sx: sx.allConditionsBox
175
173
  }, ___EmotionJSX(Text, {
176
174
  pl: "md",
177
175
  pr: "sm"
@@ -179,8 +177,7 @@ export var Default = function Default() {
179
177
  label: "Equals",
180
178
  bg: "accent.90",
181
179
  textColor: "neutral.10",
182
- sx: customChipStyles,
183
- mr: "sm",
180
+ sx: sx.customChipStyles,
184
181
  alignSelf: "center"
185
182
  }), ___EmotionJSX(Text, null, item.field3)));
186
183
  })))))), ___EmotionJSX(Button, {
@@ -213,10 +210,7 @@ export var Default = function Default() {
213
210
  },
214
211
  "aria-label": "temp-label"
215
212
  }, ___EmotionJSX(Text, {
216
- sx: {
217
- textTransform: 'none',
218
- color: 'inherit'
219
- }
213
+ sx: sx.defaultText
220
214
  }, "Any")), ___EmotionJSX(RockerButton, {
221
215
  name: "all",
222
216
  key: "all",
@@ -225,10 +219,7 @@ export var Default = function Default() {
225
219
  },
226
220
  "aria-label": "temp-label"
227
221
  }, ___EmotionJSX(Text, {
228
- sx: {
229
- textTransform: 'none',
230
- color: 'inherit'
231
- }
222
+ sx: sx.defaultText
232
223
  }, "All"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
233
224
  variant: "inline",
234
225
  width: "fit-content",
@@ -288,11 +279,7 @@ export var Default = function Default() {
288
279
  mr: "sm"
289
280
  }), ___EmotionJSX(Box, {
290
281
  variant: "forms.input.container",
291
- borderRadius: "4px",
292
- p: "sm",
293
- width: "100%",
294
- sx: borderedBoxStyles,
295
- mr: "xs"
282
+ sx: sx.borderedBoxStyles
296
283
  }, ___EmotionJSX(Box, {
297
284
  isRow: true,
298
285
  alignItems: "center",
@@ -308,10 +295,7 @@ export var Default = function Default() {
308
295
  },
309
296
  "aria-label": "any"
310
297
  }, ___EmotionJSX(Text, {
311
- sx: {
312
- textTransform: 'none',
313
- color: 'inherit'
314
- }
298
+ sx: sx.defaultText
315
299
  }, "Any")), ___EmotionJSX(RockerButton, {
316
300
  name: "all",
317
301
  key: "all",
@@ -320,10 +304,7 @@ export var Default = function Default() {
320
304
  },
321
305
  "aria-label": "all"
322
306
  }, ___EmotionJSX(Text, {
323
- sx: {
324
- textTransform: 'none',
325
- color: 'inherit'
326
- }
307
+ sx: sx.defaultText
327
308
  }, "All"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
328
309
  variant: "inline",
329
310
  width: "fit-content",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.26.1-alpha.5",
3
+ "version": "1.26.1-alpha.6",
4
4
  "description": "PingUX themeable React component library",
5
5
  "author": "ux-development@pingidentity.com",
6
6
  "license": "Apache-2.0",