@pingux/astro 2.18.0 → 2.18.1-alpha.1

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/components/Icon/Icon.stories.js +1 -2
  2. package/lib/cjs/recipes/ConditionFilter.stories.js +131 -156
  3. package/lib/components/Icon/Icon.stories.js +1 -2
  4. package/lib/recipes/ConditionFilter.stories.js +127 -154
  5. package/package.json +1 -1
package/lib/cjs/components/Icon/Icon.stories.js CHANGED
@@ -88,8 +88,7 @@ var SVGIcons = function SVGIcons() {
88
88
  // SVGR can used to convert .svg files to components instead of doing this manually
89
89
  var SVGComponent = function SVGComponent(props) {
90
90
  var id = (0, _uuid.v4)();
91
- var _props$title = props.title,
92
- title = _props$title === void 0 ? 'User Icon' : _props$title;
91
+ var title = 'User Icon';
93
92
  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
94
93
  viewBox: "0 0 24 24"
95
94
  }, props, {
package/lib/cjs/recipes/ConditionFilter.stories.js CHANGED
@@ -12,7 +12,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
12
12
  _Object$defineProperty(exports, "__esModule", {
13
13
  value: true
14
14
  });
15
- exports["default"] = exports.Edit = exports.Display = void 0;
15
+ exports["default"] = exports.Edit = exports.DisplaySectionHeader = exports.DisplayRow = exports.Display = void 0;
16
16
  var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
17
17
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
18
18
  var _react = _interopRequireDefault(require("react"));
@@ -25,67 +25,77 @@ var _default = {
25
25
  title: 'Recipes/Condition Filter'
26
26
  };
27
27
  exports["default"] = _default;
28
- var customBadgeStyles = {
29
- marginRight: 'sm',
30
- '& > span': {
31
- fontWeight: 1,
32
- textTransform: 'none'
33
- },
34
- ml: '3px',
35
- minWidth: '65px',
36
- height: '20px',
37
- 'z-index': '1'
28
+ var borderBox = {
29
+ borderColor: 'neutral.80',
30
+ borderRadius: '3px 4px 4px 3px',
31
+ borderStyle: 'solid',
32
+ borderWidth: '1px 1px 1px 0px',
33
+ width: '100%',
34
+ '&::after': {
35
+ bg: 'decorative.4',
36
+ width: '2px'
37
+ }
38
38
  };
39
39
  var sx = {
40
- equalBadgeStyles: _objectSpread(_objectSpread({}, customBadgeStyles), {}, {
41
- bg: 'accent.95',
42
- textColor: 'neutral.10',
43
- alignSelf: 'center',
44
- height: '21px',
45
- minWidth: '51px'
46
- }),
47
- borderedBoxStyles: {
48
- '&::after': {
49
- bg: 'decorative.4',
50
- width: '2px',
51
- display: 'block'
40
+ badge: {
41
+ condition: {
42
+ height: '20px',
43
+ minWidth: '65px'
52
44
  },
53
- borderColor: 'neutral.80',
54
- borderRadius: '3px 4px 4px 3px',
55
- borderStyle: 'solid',
56
- borderWidth: '1px 1px 1px 0px',
57
- padding: 'sm',
58
- width: '100%'
45
+ equal: {
46
+ alignSelf: 'center',
47
+ bg: 'accent.95'
48
+ }
59
49
  },
60
- allConditionsBox: {
61
- '&::after': {
62
- bg: 'decorative.4',
63
- width: '2px'
50
+ borderedBoxStyles: _objectSpread(_objectSpread({}, borderBox), {}, {
51
+ padding: 'sm'
52
+ }),
53
+ display: {
54
+ borderBox: _objectSpread(_objectSpread({}, borderBox), {}, {
55
+ ml: '20px',
56
+ mt: 'md',
57
+ p: 'sm',
58
+ pl: 0
59
+ }),
60
+ bracket: {
61
+ position: 'absolute',
62
+ height: '56px'
63
+ },
64
+ container: {
65
+ bg: 'accent.99',
66
+ maxWidth: '318px',
67
+ p: 'sm',
68
+ pl: 0
64
69
  },
65
- alignItems: 'center',
66
- borderRadius: '4px',
67
- marginTop: 'md',
68
- fontWeight: 1
70
+ rowBox: {
71
+ alignItems: 'center',
72
+ bg: 'white',
73
+ borderRadius: '4px',
74
+ fontWeight: 1,
75
+ marginTop: 'md',
76
+ minHeight: '25px',
77
+ ml: '20px',
78
+ pl: '13px'
79
+ }
69
80
  },
70
81
  defaultText: {
71
- textTransform: 'none',
72
82
  color: 'inherit',
73
83
  fontSize: 'sm',
74
84
  fontWeight: '3'
75
- },
76
- textStyles: {
77
- pl: 'md',
78
- pr: 'sm'
79
85
  }
80
86
  };
81
87
  var allConditions = [{
82
88
  field1: 'Family Name',
89
+ field3: 'Smith',
90
+ key: 'familyNameField'
91
+ }, {
92
+ field1: 'Given Name',
83
93
  field3: 'John',
84
- key: 'FamilyNameField'
94
+ key: 'givenNameField'
85
95
  }, {
86
- field1: 'Full Name',
87
- field3: 'Alex Smith',
88
- key: 'FullNameField'
96
+ field1: 'Email',
97
+ field3: 'jsmith@company.com',
98
+ key: 'emailField'
89
99
  }];
90
100
  var anyConditions = [{
91
101
  field1: 'Group',
@@ -105,124 +115,89 @@ var noneConditions = [{
105
115
  field3: 'Banana',
106
116
  key: 'Miscellaneous2'
107
117
  }];
118
+ var ofTheConditionsAreTrueCopy = ' of the conditions are true';
108
119
  var Display = function Display() {
109
- return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
110
- bg: "accent.99",
111
- maxWidth: "318px",
112
- p: "sm"
113
- }, (0, _react2.jsx)(_index.Box, {
114
- isRow: true
115
- }), (0, _react2.jsx)(_index.Box, {
116
- isRow: true
117
- }, (0, _react2.jsx)(_index.Badge, {
118
- label: "All",
119
- bg: "decorative.4",
120
- sx: customBadgeStyles
121
- }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
122
- return (0, _react2.jsx)(_index.Box, {
123
- isRow: true,
120
+ return (0, _react2.jsx)(_index.Box, {
121
+ sx: sx.display.container
122
+ }, (0, _react2.jsx)(DisplaySectionHeader, null), (0, _map["default"])(allConditions).call(allConditions, function (item) {
123
+ return (0, _react2.jsx)(DisplayRow, {
124
+ item: item,
124
125
  key: item.key
125
- }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
126
- width: "100%"
127
- }, (0, _react2.jsx)(_index.Box, {
128
- variant: "forms.input.fieldControlWrapper",
129
- bg: "white",
130
- isRow: true,
131
- sx: sx.allConditionsBox
132
- }, (0, _react2.jsx)(_index.Text, {
133
- sx: sx.textStyles
134
- }, item.field1), (0, _react2.jsx)(_index.Badge, {
135
- label: "Equals",
136
- sx: sx.equalBadgeStyles,
137
- textColor: "neutral.10"
138
- }), (0, _react2.jsx)(_index.Text, null, item.field3))));
126
+ });
139
127
  }), (0, _react2.jsx)(_index.Box, {
140
- isRow: true
141
- }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
142
- variant: "forms.input.fieldControlWrapper",
143
- mt: "md",
144
- sx: sx.borderedBoxStyles
145
- }, (0, _react2.jsx)(_index.Box, {
146
- isRow: true
147
- }, (0, _react2.jsx)(_index.Badge, {
148
- label: "Any",
149
- bg: "decorative.7",
150
- sx: customBadgeStyles,
151
- alignSelf: "center"
152
- }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
128
+ isRow: true,
153
129
  ml: "xs"
154
- }, (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
155
- return (0, _react2.jsx)(_index.Box, {
156
- isRow: true,
157
- key: item.key
158
- }, (0, _react2.jsx)(_index.Bracket, {
159
- ml: 0,
160
- isLast: index === anyConditions.length - 1
161
- }), (0, _react2.jsx)(_index.Box, {
162
- mt: "md",
163
- variant: "forms.input.fieldControlWrapper",
164
- bg: "white",
165
- isRow: true,
166
- width: "100%",
167
- sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
168
- '&::after': {
169
- bg: 'decorative.7',
170
- width: '2px'
171
- }
172
- })
173
- }, (0, _react2.jsx)(_index.Text, {
174
- sx: sx.textStyles
175
- }, item.field1), (0, _react2.jsx)(_index.Badge, {
176
- label: "Equals",
177
- textColor: "neutral.10",
178
- sx: sx.equalBadgeStyles
179
- }), (0, _react2.jsx)(_index.Text, null, item.field3)));
180
- })))), (0, _react2.jsx)(_index.Box, {
181
- isRow: true
182
130
  }, (0, _react2.jsx)(_index.Bracket, {
131
+ sx: _objectSpread(_objectSpread({}, sx.display.bracket), {}, {
132
+ height: '148px'
133
+ }),
183
134
  isLast: true
184
135
  }), (0, _react2.jsx)(_index.Box, {
185
- variant: "forms.input.fieldControlWrapper",
186
- mt: "md",
187
- sx: sx.borderedBoxStyles
136
+ sx: sx.display.borderBox,
137
+ variant: "forms.input.fieldControlWrapper"
138
+ }, (0, _react2.jsx)(DisplaySectionHeader, {
139
+ badgeColor: "decorative.7",
140
+ label: "Any"
141
+ }), (0, _map["default"])(anyConditions).call(anyConditions, function (item, index) {
142
+ return (0, _react2.jsx)(DisplayRow, {
143
+ barColor: "decorative.7",
144
+ isLast: index === anyConditions.length - 1,
145
+ item: item,
146
+ key: item.key
147
+ });
148
+ }))));
149
+ };
150
+ exports.Display = Display;
151
+ var DisplayRow = function DisplayRow(_ref) {
152
+ var _ref$item = _ref.item,
153
+ item = _ref$item === void 0 ? allConditions[0] : _ref$item,
154
+ _ref$isLast = _ref.isLast,
155
+ isLast = _ref$isLast === void 0 ? false : _ref$isLast,
156
+ _ref$barColor = _ref.barColor,
157
+ barColor = _ref$barColor === void 0 ? 'decorative.4' : _ref$barColor;
158
+ return (0, _react2.jsx)(_index.Box, {
159
+ isRow: true,
160
+ ml: "xs"
161
+ }, (0, _react2.jsx)(_index.Bracket, {
162
+ sx: sx.display.bracket,
163
+ isLast: isLast
164
+ }), (0, _react2.jsx)(_index.Box, {
165
+ width: "100%"
188
166
  }, (0, _react2.jsx)(_index.Box, {
189
- isRow: true
167
+ gap: "sm",
168
+ isRow: true,
169
+ sx: _objectSpread(_objectSpread({}, sx.display.rowBox), {}, {
170
+ '&::after': {
171
+ bg: barColor,
172
+ width: '2px'
173
+ }
174
+ }),
175
+ variant: "forms.input.fieldControlWrapper"
176
+ }, (0, _react2.jsx)(_index.Text, null, item.field1), (0, _react2.jsx)(_index.Badge, {
177
+ label: "Equals",
178
+ sx: sx.badge.equal,
179
+ textColor: "neutral.10"
180
+ }), (0, _react2.jsx)(_index.Text, null, item.field3))));
181
+ };
182
+ exports.DisplayRow = DisplayRow;
183
+ var DisplaySectionHeader = function DisplaySectionHeader(_ref2) {
184
+ var _ref2$badgeColor = _ref2.badgeColor,
185
+ badgeColor = _ref2$badgeColor === void 0 ? 'decorative.4' : _ref2$badgeColor,
186
+ _ref2$label = _ref2.label,
187
+ label = _ref2$label === void 0 ? 'All' : _ref2$label;
188
+ return (0, _react2.jsx)(_index.Box, {
189
+ isRow: true,
190
+ ml: "sm"
190
191
  }, (0, _react2.jsx)(_index.Badge, {
191
- label: "None",
192
- bg: "accent.20",
193
- sx: customBadgeStyles,
192
+ bg: badgeColor,
193
+ label: label,
194
+ sx: sx.badge.condition
195
+ }), (0, _react2.jsx)(_index.Text, {
196
+ ml: "sm",
194
197
  alignSelf: "center"
195
- }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
196
- ml: "xs"
197
- }, (0, _map["default"])(noneConditions).call(noneConditions, function (item, index) {
198
- return (0, _react2.jsx)(_index.Box, {
199
- isRow: true,
200
- key: item.key
201
- }, (0, _react2.jsx)(_index.Bracket, {
202
- ml: 0,
203
- isLast: index === noneConditions.length - 1
204
- }), (0, _react2.jsx)(_index.Box, {
205
- mt: "md",
206
- variant: "forms.input.fieldControlWrapper",
207
- bg: "white",
208
- isRow: true,
209
- width: "100%",
210
- sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
211
- '&::after': {
212
- bg: 'accent.20',
213
- width: '2px'
214
- }
215
- })
216
- }, (0, _react2.jsx)(_index.Text, {
217
- sx: sx.textStyles
218
- }, item.field1), (0, _react2.jsx)(_index.Badge, {
219
- label: "Equals",
220
- textColor: "neutral.10",
221
- sx: sx.equalBadgeStyles
222
- }), (0, _react2.jsx)(_index.Text, null, item.field3)));
223
- }))))));
198
+ }, ofTheConditionsAreTrueCopy));
224
199
  };
225
- exports.Display = Display;
200
+ exports.DisplaySectionHeader = DisplaySectionHeader;
226
201
  var Edit = function Edit() {
227
202
  var trashButton = (0, _react2.jsx)(_index.IconButton, {
228
203
  "aria-label": "deleteButton",
@@ -277,7 +252,7 @@ var Edit = function Edit() {
277
252
  }
278
253
  }, (0, _react2.jsx)(_index.Text, {
279
254
  sx: sx.defaultText
280
- }, "NONE"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
255
+ }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
281
256
  variant: "inline",
282
257
  width: "fit-content",
283
258
  role: "button",
@@ -368,7 +343,7 @@ var Edit = function Edit() {
368
343
  }
369
344
  }, (0, _react2.jsx)(_index.Text, {
370
345
  sx: sx.defaultText
371
- }, "NONE"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
346
+ }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
372
347
  variant: "inline",
373
348
  width: "fit-content",
374
349
  role: "button",
@@ -464,7 +439,7 @@ var Edit = function Edit() {
464
439
  }
465
440
  }, (0, _react2.jsx)(_index.Text, {
466
441
  sx: sx.defaultText
467
- }, "NONE"))), (0, _react2.jsx)(_index.Text, null, " of the conditions are true"), (0, _react2.jsx)(_index.Button, {
442
+ }, "NONE"))), (0, _react2.jsx)(_index.Text, null, ofTheConditionsAreTrueCopy), (0, _react2.jsx)(_index.Button, {
468
443
  variant: "inline",
469
444
  width: "fit-content",
470
445
  role: "button",
package/lib/components/Icon/Icon.stories.js CHANGED
@@ -78,8 +78,7 @@ export var SVGIcons = function SVGIcons() {
78
78
  // SVGR can used to convert .svg files to components instead of doing this manually
79
79
  var SVGComponent = function SVGComponent(props) {
80
80
  var id = uuid();
81
- var _props$title = props.title,
82
- title = _props$title === void 0 ? 'User Icon' : _props$title;
81
+ var title = 'User Icon';
83
82
  return ___EmotionJSX("svg", _extends({
84
83
  viewBox: "0 0 24 24"
85
84
  }, props, {
package/lib/recipes/ConditionFilter.stories.js CHANGED
@@ -17,67 +17,77 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
17
17
  export default {
18
18
  title: 'Recipes/Condition Filter'
19
19
  };
20
- var customBadgeStyles = {
21
- marginRight: 'sm',
22
- '& > span': {
23
- fontWeight: 1,
24
- textTransform: 'none'
25
- },
26
- ml: '3px',
27
- minWidth: '65px',
28
- height: '20px',
29
- 'z-index': '1'
20
+ var borderBox = {
21
+ borderColor: 'neutral.80',
22
+ borderRadius: '3px 4px 4px 3px',
23
+ borderStyle: 'solid',
24
+ borderWidth: '1px 1px 1px 0px',
25
+ width: '100%',
26
+ '&::after': {
27
+ bg: 'decorative.4',
28
+ width: '2px'
29
+ }
30
30
  };
31
31
  var sx = {
32
- equalBadgeStyles: _objectSpread(_objectSpread({}, customBadgeStyles), {}, {
33
- bg: 'accent.95',
34
- textColor: 'neutral.10',
35
- alignSelf: 'center',
36
- height: '21px',
37
- minWidth: '51px'
38
- }),
39
- borderedBoxStyles: {
40
- '&::after': {
41
- bg: 'decorative.4',
42
- width: '2px',
43
- display: 'block'
32
+ badge: {
33
+ condition: {
34
+ height: '20px',
35
+ minWidth: '65px'
44
36
  },
45
- borderColor: 'neutral.80',
46
- borderRadius: '3px 4px 4px 3px',
47
- borderStyle: 'solid',
48
- borderWidth: '1px 1px 1px 0px',
49
- padding: 'sm',
50
- width: '100%'
37
+ equal: {
38
+ alignSelf: 'center',
39
+ bg: 'accent.95'
40
+ }
51
41
  },
52
- allConditionsBox: {
53
- '&::after': {
54
- bg: 'decorative.4',
55
- width: '2px'
42
+ borderedBoxStyles: _objectSpread(_objectSpread({}, borderBox), {}, {
43
+ padding: 'sm'
44
+ }),
45
+ display: {
46
+ borderBox: _objectSpread(_objectSpread({}, borderBox), {}, {
47
+ ml: '20px',
48
+ mt: 'md',
49
+ p: 'sm',
50
+ pl: 0
51
+ }),
52
+ bracket: {
53
+ position: 'absolute',
54
+ height: '56px'
55
+ },
56
+ container: {
57
+ bg: 'accent.99',
58
+ maxWidth: '318px',
59
+ p: 'sm',
60
+ pl: 0
56
61
  },
57
- alignItems: 'center',
58
- borderRadius: '4px',
59
- marginTop: 'md',
60
- fontWeight: 1
62
+ rowBox: {
63
+ alignItems: 'center',
64
+ bg: 'white',
65
+ borderRadius: '4px',
66
+ fontWeight: 1,
67
+ marginTop: 'md',
68
+ minHeight: '25px',
69
+ ml: '20px',
70
+ pl: '13px'
71
+ }
61
72
  },
62
73
  defaultText: {
63
- textTransform: 'none',
64
74
  color: 'inherit',
65
75
  fontSize: 'sm',
66
76
  fontWeight: '3'
67
- },
68
- textStyles: {
69
- pl: 'md',
70
- pr: 'sm'
71
77
  }
72
78
  };
73
79
  var allConditions = [{
74
80
  field1: 'Family Name',
81
+ field3: 'Smith',
82
+ key: 'familyNameField'
83
+ }, {
84
+ field1: 'Given Name',
75
85
  field3: 'John',
76
- key: 'FamilyNameField'
86
+ key: 'givenNameField'
77
87
  }, {
78
- field1: 'Full Name',
79
- field3: 'Alex Smith',
80
- key: 'FullNameField'
88
+ field1: 'Email',
89
+ field3: 'jsmith@company.com',
90
+ key: 'emailField'
81
91
  }];
82
92
  var anyConditions = [{
83
93
  field1: 'Group',
@@ -97,122 +107,85 @@ var noneConditions = [{
97
107
  field3: 'Banana',
98
108
  key: 'Miscellaneous2'
99
109
  }];
110
+ var ofTheConditionsAreTrueCopy = ' of the conditions are true';
100
111
  export var Display = function Display() {
101
- return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
102
- bg: "accent.99",
103
- maxWidth: "318px",
104
- p: "sm"
105
- }, ___EmotionJSX(Box, {
106
- isRow: true
107
- }), ___EmotionJSX(Box, {
108
- isRow: true
109
- }, ___EmotionJSX(Badge, {
110
- label: "All",
111
- bg: "decorative.4",
112
- sx: customBadgeStyles
113
- }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
114
- return ___EmotionJSX(Box, {
115
- isRow: true,
112
+ return ___EmotionJSX(Box, {
113
+ sx: sx.display.container
114
+ }, ___EmotionJSX(DisplaySectionHeader, null), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
115
+ return ___EmotionJSX(DisplayRow, {
116
+ item: item,
116
117
  key: item.key
117
- }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
118
- width: "100%"
119
- }, ___EmotionJSX(Box, {
120
- variant: "forms.input.fieldControlWrapper",
121
- bg: "white",
122
- isRow: true,
123
- sx: sx.allConditionsBox
124
- }, ___EmotionJSX(Text, {
125
- sx: sx.textStyles
126
- }, item.field1), ___EmotionJSX(Badge, {
127
- label: "Equals",
128
- sx: sx.equalBadgeStyles,
129
- textColor: "neutral.10"
130
- }), ___EmotionJSX(Text, null, item.field3))));
118
+ });
131
119
  }), ___EmotionJSX(Box, {
132
- isRow: true
133
- }, ___EmotionJSX(Bracket, null), ___EmotionJSX(Box, {
134
- variant: "forms.input.fieldControlWrapper",
135
- mt: "md",
136
- sx: sx.borderedBoxStyles
137
- }, ___EmotionJSX(Box, {
138
- isRow: true
139
- }, ___EmotionJSX(Badge, {
140
- label: "Any",
141
- bg: "decorative.7",
142
- sx: customBadgeStyles,
143
- alignSelf: "center"
144
- }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
120
+ isRow: true,
145
121
  ml: "xs"
146
- }, _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
147
- return ___EmotionJSX(Box, {
148
- isRow: true,
149
- key: item.key
150
- }, ___EmotionJSX(Bracket, {
151
- ml: 0,
152
- isLast: index === anyConditions.length - 1
153
- }), ___EmotionJSX(Box, {
154
- mt: "md",
155
- variant: "forms.input.fieldControlWrapper",
156
- bg: "white",
157
- isRow: true,
158
- width: "100%",
159
- sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
160
- '&::after': {
161
- bg: 'decorative.7',
162
- width: '2px'
163
- }
164
- })
165
- }, ___EmotionJSX(Text, {
166
- sx: sx.textStyles
167
- }, item.field1), ___EmotionJSX(Badge, {
168
- label: "Equals",
169
- textColor: "neutral.10",
170
- sx: sx.equalBadgeStyles
171
- }), ___EmotionJSX(Text, null, item.field3)));
172
- })))), ___EmotionJSX(Box, {
173
- isRow: true
174
122
  }, ___EmotionJSX(Bracket, {
123
+ sx: _objectSpread(_objectSpread({}, sx.display.bracket), {}, {
124
+ height: '148px'
125
+ }),
175
126
  isLast: true
176
127
  }), ___EmotionJSX(Box, {
177
- variant: "forms.input.fieldControlWrapper",
178
- mt: "md",
179
- sx: sx.borderedBoxStyles
128
+ sx: sx.display.borderBox,
129
+ variant: "forms.input.fieldControlWrapper"
130
+ }, ___EmotionJSX(DisplaySectionHeader, {
131
+ badgeColor: "decorative.7",
132
+ label: "Any"
133
+ }), _mapInstanceProperty(anyConditions).call(anyConditions, function (item, index) {
134
+ return ___EmotionJSX(DisplayRow, {
135
+ barColor: "decorative.7",
136
+ isLast: index === anyConditions.length - 1,
137
+ item: item,
138
+ key: item.key
139
+ });
140
+ }))));
141
+ };
142
+ export var DisplayRow = function DisplayRow(_ref) {
143
+ var _ref$item = _ref.item,
144
+ item = _ref$item === void 0 ? allConditions[0] : _ref$item,
145
+ _ref$isLast = _ref.isLast,
146
+ isLast = _ref$isLast === void 0 ? false : _ref$isLast,
147
+ _ref$barColor = _ref.barColor,
148
+ barColor = _ref$barColor === void 0 ? 'decorative.4' : _ref$barColor;
149
+ return ___EmotionJSX(Box, {
150
+ isRow: true,
151
+ ml: "xs"
152
+ }, ___EmotionJSX(Bracket, {
153
+ sx: sx.display.bracket,
154
+ isLast: isLast
155
+ }), ___EmotionJSX(Box, {
156
+ width: "100%"
180
157
  }, ___EmotionJSX(Box, {
181
- isRow: true
158
+ gap: "sm",
159
+ isRow: true,
160
+ sx: _objectSpread(_objectSpread({}, sx.display.rowBox), {}, {
161
+ '&::after': {
162
+ bg: barColor,
163
+ width: '2px'
164
+ }
165
+ }),
166
+ variant: "forms.input.fieldControlWrapper"
167
+ }, ___EmotionJSX(Text, null, item.field1), ___EmotionJSX(Badge, {
168
+ label: "Equals",
169
+ sx: sx.badge.equal,
170
+ textColor: "neutral.10"
171
+ }), ___EmotionJSX(Text, null, item.field3))));
172
+ };
173
+ export var DisplaySectionHeader = function DisplaySectionHeader(_ref2) {
174
+ var _ref2$badgeColor = _ref2.badgeColor,
175
+ badgeColor = _ref2$badgeColor === void 0 ? 'decorative.4' : _ref2$badgeColor,
176
+ _ref2$label = _ref2.label,
177
+ label = _ref2$label === void 0 ? 'All' : _ref2$label;
178
+ return ___EmotionJSX(Box, {
179
+ isRow: true,
180
+ ml: "sm"
182
181
  }, ___EmotionJSX(Badge, {
183
- label: "None",
184
- bg: "accent.20",
185
- sx: customBadgeStyles,
182
+ bg: badgeColor,
183
+ label: label,
184
+ sx: sx.badge.condition
185
+ }), ___EmotionJSX(Text, {
186
+ ml: "sm",
186
187
  alignSelf: "center"
187
- }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
188
- ml: "xs"
189
- }, _mapInstanceProperty(noneConditions).call(noneConditions, function (item, index) {
190
- return ___EmotionJSX(Box, {
191
- isRow: true,
192
- key: item.key
193
- }, ___EmotionJSX(Bracket, {
194
- ml: 0,
195
- isLast: index === noneConditions.length - 1
196
- }), ___EmotionJSX(Box, {
197
- mt: "md",
198
- variant: "forms.input.fieldControlWrapper",
199
- bg: "white",
200
- isRow: true,
201
- width: "100%",
202
- sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
203
- '&::after': {
204
- bg: 'accent.20',
205
- width: '2px'
206
- }
207
- })
208
- }, ___EmotionJSX(Text, {
209
- sx: sx.textStyles
210
- }, item.field1), ___EmotionJSX(Badge, {
211
- label: "Equals",
212
- textColor: "neutral.10",
213
- sx: sx.equalBadgeStyles
214
- }), ___EmotionJSX(Text, null, item.field3)));
215
- }))))));
188
+ }, ofTheConditionsAreTrueCopy));
216
189
  };
217
190
  export var Edit = function Edit() {
218
191
  var trashButton = ___EmotionJSX(IconButton, {
@@ -268,7 +241,7 @@ export var Edit = function Edit() {
268
241
  }
269
242
  }, ___EmotionJSX(Text, {
270
243
  sx: sx.defaultText
271
- }, "NONE"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
244
+ }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
272
245
  variant: "inline",
273
246
  width: "fit-content",
274
247
  role: "button",
@@ -359,7 +332,7 @@ export var Edit = function Edit() {
359
332
  }
360
333
  }, ___EmotionJSX(Text, {
361
334
  sx: sx.defaultText
362
- }, "NONE"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
335
+ }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
363
336
  variant: "inline",
364
337
  width: "fit-content",
365
338
  role: "button",
@@ -455,7 +428,7 @@ export var Edit = function Edit() {
455
428
  }
456
429
  }, ___EmotionJSX(Text, {
457
430
  sx: sx.defaultText
458
- }, "NONE"))), ___EmotionJSX(Text, null, " of the conditions are true"), ___EmotionJSX(Button, {
431
+ }, "NONE"))), ___EmotionJSX(Text, null, ofTheConditionsAreTrueCopy), ___EmotionJSX(Button, {
459
432
  variant: "inline",
460
433
  width: "fit-content",
461
434
  role: "button",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.18.0",
3
+ "version": "2.18.1-alpha.1",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",