@pingux/astro 2.14.1-alpha.1 → 2.14.1-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 (5) hide show
  1. package/lib/cjs/components/Bracket/Bracket.js +16 -6
  2. package/lib/cjs/recipes/ConditionFilter.stories.js +105 -130
  3. package/lib/components/Bracket/Bracket.js +17 -7
  4. package/lib/recipes/ConditionFilter.stories.js +106 -132
  5. package/package.json +1 -1
package/lib/cjs/components/Bracket/Bracket.js CHANGED
@@ -13,6 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
13
13
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
14
14
  var _react = _interopRequireWildcard(require("react"));
15
15
  var _propTypes = _interopRequireDefault(require("prop-types"));
16
+ var _uuid = require("uuid");
16
17
  var _index = require("../../index");
17
18
  var _colors = require("../../styles/colors");
18
19
  var _react2 = require("@emotion/react");
@@ -29,6 +30,15 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
29
30
  (0, _react.useImperativeHandle)(ref, function () {
30
31
  return bracketRef.current;
31
32
  });
33
+ var bracketId = (0, _react.useMemo)(function () {
34
+ return (0, _uuid.v4)();
35
+ }, []);
36
+ var bracketFillOneId = (0, _react.useMemo)(function () {
37
+ return (0, _uuid.v4)();
38
+ }, []);
39
+ var bracketFillTwoId = (0, _react.useMemo)(function () {
40
+ return (0, _uuid.v4)();
41
+ }, []);
32
42
  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
33
43
  variant: "bracket.base"
34
44
  }, others), !isLast && (0, _react2.jsx)(_index.Box, {
@@ -47,9 +57,9 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
47
57
  flexGrow: 1
48
58
  },
49
59
  "data-testid": "isLastLayer",
50
- "aria-labelledby": "bracket-fill-vertical-icon-title"
60
+ "aria-labelledby": "bracket-fill-vertical-icon-title-".concat(bracketId)
51
61
  }, (0, _react2.jsx)("title", {
52
- id: "bracket-fill-vertical-icon-title"
62
+ id: "bracket-fill-vertical-icon-title-".concat(bracketId)
53
63
  }, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 3"), (0, _react2.jsx)("line", {
54
64
  strokeLinecap: "undefined",
55
65
  strokeLinejoin: "undefined",
@@ -69,9 +79,9 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
69
79
  style: {
70
80
  flexGrow: 1
71
81
  },
72
- "aria-labelledby": "bracket-fill-1-icon-title"
82
+ "aria-labelledby": "bracket-fill-1-icon-title-".concat(bracketFillOneId)
73
83
  }, (0, _react2.jsx)("title", {
74
- id: "bracket-fill-1-icon-title"
84
+ id: "bracket-fill-1-icon-title-".concat(bracketFillOneId)
75
85
  }, "bracket-fill"), (0, _react2.jsx)("g", null, (0, _react2.jsx)("title", null, "Layer 1"), (0, _react2.jsx)("line", {
76
86
  strokeLinecap: "undefined",
77
87
  strokeLinejoin: "undefined",
@@ -85,9 +95,9 @@ var Bracket = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
85
95
  xmlns: "http://www.w3.org/2000/svg",
86
96
  version: "1.1",
87
97
  height: "15",
88
- "aria-labelledby": "bracket-fill-2-icon-title"
98
+ "aria-labelledby": "bracket-fill-2-icon-title-".concat(bracketFillTwoId)
89
99
  }, (0, _react2.jsx)("title", {
90
- id: "bracket-fill-2-icon-title"
100
+ id: "bracket-fill-2-icon-title-".concat(bracketFillTwoId)
91
101
  }, "bracket-fill"), (0, _react2.jsx)("g", {
92
102
  transform: "translate(-1, 0)"
93
103
  }, (0, _react2.jsx)("title", null, "Layer 2"), (0, _react2.jsx)("path", {
package/lib/cjs/recipes/ConditionFilter.stories.js CHANGED
@@ -12,12 +12,10 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
12
12
  _Object$defineProperty(exports, "__esModule", {
13
13
  value: true
14
14
  });
15
- exports["default"] = exports.Default = void 0;
15
+ exports["default"] = exports.Edit = 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
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
19
18
  var _react = _interopRequireDefault(require("react"));
20
- var _CreateIcon = _interopRequireDefault(require("@pingux/mdi-react/CreateIcon"));
21
19
  var _TrashIcon = _interopRequireDefault(require("@pingux/mdi-react/TrashIcon"));
22
20
  var _index = require("../index");
23
21
  var _react2 = require("@emotion/react");
@@ -27,24 +25,33 @@ var _default = {
27
25
  title: 'Recipes/Condition Filter'
28
26
  };
29
27
  exports["default"] = _default;
30
- var sx = {
31
- customBadgeStyles: {
32
- marginRight: 'sm',
33
- '& > span': {
34
- fontWeight: '500',
35
- textTransform: 'none'
36
- },
37
- ml: '3px',
38
- minWidth: '65px',
39
- 'z-index': '1'
28
+ var customBadgeStyles = {
29
+ marginRight: 'sm',
30
+ '& > span': {
31
+ fontWeight: 1,
32
+ textTransform: 'none'
40
33
  },
34
+ ml: '3px',
35
+ minWidth: '65px',
36
+ height: '20px',
37
+ 'z-index': '1'
38
+ };
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
+ }),
41
47
  borderedBoxStyles: {
42
48
  '&::after': {
43
- bg: 'decorative.7',
44
- width: '2px'
49
+ bg: 'decorative.4',
50
+ width: '2px',
51
+ display: 'block'
45
52
  },
46
53
  borderColor: 'neutral.80',
47
- borderRadius: '4px',
54
+ borderRadius: '3px 4px 4px 3px',
48
55
  borderStyle: 'solid',
49
56
  borderWidth: '1px 1px 1px 0px',
50
57
  padding: 'sm',
@@ -52,7 +59,7 @@ var sx = {
52
59
  },
53
60
  allConditionsBox: {
54
61
  '&::after': {
55
- bg: 'decorative.7',
62
+ bg: 'decorative.4',
56
63
  width: '2px'
57
64
  },
58
65
  alignItems: 'center',
@@ -65,86 +72,52 @@ var sx = {
65
72
  color: 'inherit',
66
73
  fontSize: 'sm',
67
74
  fontWeight: '3'
75
+ },
76
+ textStyles: {
77
+ pl: 'md',
78
+ pr: 'sm'
68
79
  }
69
80
  };
70
- var Default = function Default() {
71
- var allConditions = [{
72
- field1: 'Family Name',
73
- field3: 'John',
74
- key: 'FamilyNameField'
75
- }, {
76
- field1: 'Full Name',
77
- field3: 'Alex Smith',
78
- key: 'FullNameField'
79
- }];
80
- var anyConditions = [{
81
- field1: 'Group',
82
- field3: 'Marketing',
83
- key: 'Group1Field'
84
- }, {
85
- field1: 'Group',
86
- field3: 'UX Team',
87
- key: 'Group2Field'
88
- }];
89
- var noneConditions = [{
90
- field1: 'Misc',
91
- field3: 'Apple',
92
- key: 'Miscellaneous1'
93
- }, {
94
- field1: 'Misc',
95
- field3: 'Banana',
96
- key: 'Miscellaneous2'
97
- }];
98
- var trashButton = (0, _react2.jsx)(_index.IconButton, {
99
- "aria-label": "deleteButton",
100
- sx: {
101
- alignSelf: 'center'
102
- }
103
- }, (0, _react2.jsx)(_index.Icon, {
104
- icon: _TrashIcon["default"],
105
- sx: {
106
- '& > path': {
107
- fill: 'neutral.40'
108
- }
109
- },
110
- size: "md",
111
- title: {
112
- name: 'Trash Icon'
113
- }
114
- }));
115
- var _React$useState = _react["default"].useState(false),
116
- _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
117
- editOverviewVisible = _React$useState2[0],
118
- setEditOverviewVisible = _React$useState2[1];
119
- return (0, _react2.jsx)(_index.Box, null, !editOverviewVisible ? (0, _react2.jsx)(_index.Box, {
81
+ var allConditions = [{
82
+ field1: 'Family Name',
83
+ field3: 'John',
84
+ key: 'FamilyNameField'
85
+ }, {
86
+ field1: 'Full Name',
87
+ field3: 'Alex Smith',
88
+ key: 'FullNameField'
89
+ }];
90
+ var anyConditions = [{
91
+ field1: 'Group',
92
+ field3: 'Marketing',
93
+ key: 'Group1Field'
94
+ }, {
95
+ field1: 'Group',
96
+ field3: 'UX Team',
97
+ key: 'Group2Field'
98
+ }];
99
+ var noneConditions = [{
100
+ field1: 'Misc',
101
+ field3: 'Apple',
102
+ key: 'Miscellaneous1'
103
+ }, {
104
+ field1: 'Misc',
105
+ field3: 'Banana',
106
+ key: 'Miscellaneous2'
107
+ }];
108
+ var Display = function Display() {
109
+ return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
120
110
  bg: "accent.99",
121
111
  maxWidth: "318px",
122
112
  p: "sm"
123
113
  }, (0, _react2.jsx)(_index.Box, {
124
114
  isRow: true
125
- }, (0, _react2.jsx)(_index.Text, {
126
- variant: "itemTitle",
127
- fontWeight: "0",
128
- pb: "md"
129
- }, "Branch Condition"), (0, _react2.jsx)(_index.IconButton, {
130
- "aria-label": "edit",
131
- variant: "inverted",
132
- ml: "xs",
133
- onPress: function onPress() {
134
- return setEditOverviewVisible(true);
135
- }
136
- }, (0, _react2.jsx)(_index.Icon, {
137
- icon: _CreateIcon["default"],
138
- size: "xs",
139
- title: {
140
- name: 'Create Icon'
141
- }
142
- }))), (0, _react2.jsx)(_index.Box, {
115
+ }), (0, _react2.jsx)(_index.Box, {
143
116
  isRow: true
144
117
  }, (0, _react2.jsx)(_index.Badge, {
145
118
  label: "All",
146
119
  bg: "decorative.4",
147
- sx: sx.customBadgeStyles
120
+ sx: customBadgeStyles
148
121
  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _map["default"])(allConditions).call(allConditions, function (item) {
149
122
  return (0, _react2.jsx)(_index.Box, {
150
123
  isRow: true,
@@ -157,14 +130,11 @@ var Default = function Default() {
157
130
  isRow: true,
158
131
  sx: sx.allConditionsBox
159
132
  }, (0, _react2.jsx)(_index.Text, {
160
- pl: "md",
161
- pr: "sm"
133
+ sx: sx.textStyles
162
134
  }, item.field1), (0, _react2.jsx)(_index.Badge, {
163
135
  label: "Equals",
164
- bg: "accent.90",
165
- textColor: "neutral.10",
166
- sx: sx.customBadgeStyles,
167
- alignSelf: "center"
136
+ sx: sx.equalBadgeStyles,
137
+ textColor: "neutral.10"
168
138
  }), (0, _react2.jsx)(_index.Text, null, item.field3))));
169
139
  }), (0, _react2.jsx)(_index.Box, {
170
140
  isRow: true
@@ -177,7 +147,7 @@ var Default = function Default() {
177
147
  }, (0, _react2.jsx)(_index.Badge, {
178
148
  label: "Any",
179
149
  bg: "decorative.7",
180
- sx: sx.customBadgeStyles,
150
+ sx: customBadgeStyles,
181
151
  alignSelf: "center"
182
152
  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
183
153
  ml: "xs"
@@ -194,16 +164,18 @@ var Default = function Default() {
194
164
  bg: "white",
195
165
  isRow: true,
196
166
  width: "100%",
197
- sx: sx.allConditionsBox
167
+ sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
168
+ '&::after': {
169
+ bg: 'decorative.7',
170
+ width: '2px'
171
+ }
172
+ })
198
173
  }, (0, _react2.jsx)(_index.Text, {
199
- pl: "md",
200
- pr: "sm"
174
+ sx: sx.textStyles
201
175
  }, item.field1), (0, _react2.jsx)(_index.Badge, {
202
176
  label: "Equals",
203
- bg: "accent.90",
204
177
  textColor: "neutral.10",
205
- sx: sx.customBadgeStyles,
206
- alignSelf: "center"
178
+ sx: sx.equalBadgeStyles
207
179
  }), (0, _react2.jsx)(_index.Text, null, item.field3)));
208
180
  })))), (0, _react2.jsx)(_index.Box, {
209
181
  isRow: true
@@ -218,7 +190,7 @@ var Default = function Default() {
218
190
  }, (0, _react2.jsx)(_index.Badge, {
219
191
  label: "None",
220
192
  bg: "accent.20",
221
- sx: sx.customBadgeStyles,
193
+ sx: customBadgeStyles,
222
194
  alignSelf: "center"
223
195
  }), (0, _react2.jsx)(_index.Text, null, " of the conditions are true")), (0, _react2.jsx)(_index.Box, {
224
196
  ml: "xs"
@@ -235,26 +207,45 @@ var Default = function Default() {
235
207
  bg: "white",
236
208
  isRow: true,
237
209
  width: "100%",
238
- sx: sx.allConditionsBox
210
+ sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
211
+ '&::after': {
212
+ bg: 'accent.20',
213
+ width: '2px'
214
+ }
215
+ })
239
216
  }, (0, _react2.jsx)(_index.Text, {
240
- pl: "md",
241
- pr: "sm"
217
+ sx: sx.textStyles
242
218
  }, item.field1), (0, _react2.jsx)(_index.Badge, {
243
219
  label: "Equals",
244
- bg: "accent.90",
245
220
  textColor: "neutral.10",
246
- sx: sx.customBadgeStyles,
247
- alignSelf: "center"
221
+ sx: sx.equalBadgeStyles
248
222
  }), (0, _react2.jsx)(_index.Text, null, item.field3)));
249
- }))))) : (0, _react2.jsx)(_index.Box, {
223
+ }))))));
224
+ };
225
+ exports.Display = Display;
226
+ var Edit = function Edit() {
227
+ var trashButton = (0, _react2.jsx)(_index.IconButton, {
228
+ "aria-label": "deleteButton",
229
+ sx: {
230
+ alignSelf: 'center'
231
+ }
232
+ }, (0, _react2.jsx)(_index.Icon, {
233
+ icon: _TrashIcon["default"],
234
+ sx: {
235
+ '& > path': {
236
+ fill: 'neutral.40'
237
+ }
238
+ },
239
+ size: "md",
240
+ title: {
241
+ name: 'Trash Icon'
242
+ }
243
+ }));
244
+ return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
250
245
  bg: "accent.99",
251
246
  p: "md",
252
247
  maxWidth: "966px"
253
- }, (0, _react2.jsx)(_index.Text, {
254
- variant: "itemTitle",
255
- fontWeight: "0",
256
- pb: "md"
257
- }, "Branch Condition"), (0, _react2.jsx)(_index.Box, {
248
+ }, (0, _react2.jsx)(_index.Box, {
258
249
  isRow: true,
259
250
  alignItems: "center",
260
251
  mb: "sm",
@@ -526,22 +517,6 @@ var Default = function Default() {
526
517
  })), trashButton);
527
518
  }))), (0, _react2.jsx)(_index.Box, {
528
519
  alignSelf: "start"
529
- }, trashButton)), (0, _react2.jsx)(_index.Box, {
530
- isRow: true,
531
- mt: "lg"
532
- }, (0, _react2.jsx)(_index.Button, {
533
- onPress: function onPress() {
534
- return setEditOverviewVisible(false);
535
- },
536
- variant: "primary",
537
- mr: "md",
538
- "aria-label": "save"
539
- }, "Save"), (0, _react2.jsx)(_index.Button, {
540
- onPress: function onPress() {
541
- return setEditOverviewVisible(false);
542
- },
543
- variant: "link",
544
- "aria-label": "cancel"
545
- }, "Cancel"))));
520
+ }, trashButton))));
546
521
  };
547
- exports.Default = Default;
522
+ exports.Edit = Edit;
package/lib/components/Bracket/Bracket.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
2
2
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
3
3
  var _excluded = ["isLast", "color"];
4
- import React, { forwardRef, useImperativeHandle, useRef } from 'react';
4
+ import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
5
5
  import PropTypes from 'prop-types';
6
+ import { v4 as uuid } from 'uuid';
6
7
  import { Box } from '../../index';
7
8
  import { line } from '../../styles/colors';
8
9
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -16,6 +17,15 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
16
17
  useImperativeHandle(ref, function () {
17
18
  return bracketRef.current;
18
19
  });
20
+ var bracketId = useMemo(function () {
21
+ return uuid();
22
+ }, []);
23
+ var bracketFillOneId = useMemo(function () {
24
+ return uuid();
25
+ }, []);
26
+ var bracketFillTwoId = useMemo(function () {
27
+ return uuid();
28
+ }, []);
19
29
  return ___EmotionJSX(Box, _extends({
20
30
  variant: "bracket.base"
21
31
  }, others), !isLast && ___EmotionJSX(Box, {
@@ -34,9 +44,9 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
34
44
  flexGrow: 1
35
45
  },
36
46
  "data-testid": "isLastLayer",
37
- "aria-labelledby": "bracket-fill-vertical-icon-title"
47
+ "aria-labelledby": "bracket-fill-vertical-icon-title-".concat(bracketId)
38
48
  }, ___EmotionJSX("title", {
39
- id: "bracket-fill-vertical-icon-title"
49
+ id: "bracket-fill-vertical-icon-title-".concat(bracketId)
40
50
  }, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 3"), ___EmotionJSX("line", {
41
51
  strokeLinecap: "undefined",
42
52
  strokeLinejoin: "undefined",
@@ -56,9 +66,9 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
56
66
  style: {
57
67
  flexGrow: 1
58
68
  },
59
- "aria-labelledby": "bracket-fill-1-icon-title"
69
+ "aria-labelledby": "bracket-fill-1-icon-title-".concat(bracketFillOneId)
60
70
  }, ___EmotionJSX("title", {
61
- id: "bracket-fill-1-icon-title"
71
+ id: "bracket-fill-1-icon-title-".concat(bracketFillOneId)
62
72
  }, "bracket-fill"), ___EmotionJSX("g", null, ___EmotionJSX("title", null, "Layer 1"), ___EmotionJSX("line", {
63
73
  strokeLinecap: "undefined",
64
74
  strokeLinejoin: "undefined",
@@ -72,9 +82,9 @@ var Bracket = /*#__PURE__*/forwardRef(function (props, ref) {
72
82
  xmlns: "http://www.w3.org/2000/svg",
73
83
  version: "1.1",
74
84
  height: "15",
75
- "aria-labelledby": "bracket-fill-2-icon-title"
85
+ "aria-labelledby": "bracket-fill-2-icon-title-".concat(bracketFillTwoId)
76
86
  }, ___EmotionJSX("title", {
77
- id: "bracket-fill-2-icon-title"
87
+ id: "bracket-fill-2-icon-title-".concat(bracketFillTwoId)
78
88
  }, "bracket-fill"), ___EmotionJSX("g", {
79
89
  transform: "translate(-1, 0)"
80
90
  }, ___EmotionJSX("title", null, "Layer 2"), ___EmotionJSX("path", {
package/lib/recipes/ConditionFilter.stories.js CHANGED
@@ -1,8 +1,3 @@
1
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
2
- import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
3
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
4
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
5
- import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
6
1
  import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
7
2
  import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
8
3
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
@@ -11,32 +6,44 @@ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/inst
11
6
  import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
12
7
  import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
13
8
  import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
9
+ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
+ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
11
+ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
12
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
14
13
  import React from 'react';
15
- import CreateIcon from '@pingux/mdi-react/CreateIcon';
16
14
  import TrashIcon from '@pingux/mdi-react/TrashIcon';
17
15
  import { Badge, Box, Bracket, Button, Icon, IconButton, Item, RockerButton, RockerButtonGroup, SelectField, Text, TextField } from '../index';
18
16
  import { jsx as ___EmotionJSX } from "@emotion/react";
19
17
  export default {
20
18
  title: 'Recipes/Condition Filter'
21
19
  };
22
- var sx = {
23
- customBadgeStyles: {
24
- marginRight: 'sm',
25
- '& > span': {
26
- fontWeight: '500',
27
- textTransform: 'none'
28
- },
29
- ml: '3px',
30
- minWidth: '65px',
31
- 'z-index': '1'
20
+ var customBadgeStyles = {
21
+ marginRight: 'sm',
22
+ '& > span': {
23
+ fontWeight: 1,
24
+ textTransform: 'none'
32
25
  },
26
+ ml: '3px',
27
+ minWidth: '65px',
28
+ height: '20px',
29
+ 'z-index': '1'
30
+ };
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
+ }),
33
39
  borderedBoxStyles: {
34
40
  '&::after': {
35
- bg: 'decorative.7',
36
- width: '2px'
41
+ bg: 'decorative.4',
42
+ width: '2px',
43
+ display: 'block'
37
44
  },
38
45
  borderColor: 'neutral.80',
39
- borderRadius: '4px',
46
+ borderRadius: '3px 4px 4px 3px',
40
47
  borderStyle: 'solid',
41
48
  borderWidth: '1px 1px 1px 0px',
42
49
  padding: 'sm',
@@ -44,7 +51,7 @@ var sx = {
44
51
  },
45
52
  allConditionsBox: {
46
53
  '&::after': {
47
- bg: 'decorative.7',
54
+ bg: 'decorative.4',
48
55
  width: '2px'
49
56
  },
50
57
  alignItems: 'center',
@@ -57,86 +64,52 @@ var sx = {
57
64
  color: 'inherit',
58
65
  fontSize: 'sm',
59
66
  fontWeight: '3'
67
+ },
68
+ textStyles: {
69
+ pl: 'md',
70
+ pr: 'sm'
60
71
  }
61
72
  };
62
- export var Default = function Default() {
63
- var allConditions = [{
64
- field1: 'Family Name',
65
- field3: 'John',
66
- key: 'FamilyNameField'
67
- }, {
68
- field1: 'Full Name',
69
- field3: 'Alex Smith',
70
- key: 'FullNameField'
71
- }];
72
- var anyConditions = [{
73
- field1: 'Group',
74
- field3: 'Marketing',
75
- key: 'Group1Field'
76
- }, {
77
- field1: 'Group',
78
- field3: 'UX Team',
79
- key: 'Group2Field'
80
- }];
81
- var noneConditions = [{
82
- field1: 'Misc',
83
- field3: 'Apple',
84
- key: 'Miscellaneous1'
85
- }, {
86
- field1: 'Misc',
87
- field3: 'Banana',
88
- key: 'Miscellaneous2'
89
- }];
90
- var trashButton = ___EmotionJSX(IconButton, {
91
- "aria-label": "deleteButton",
92
- sx: {
93
- alignSelf: 'center'
94
- }
95
- }, ___EmotionJSX(Icon, {
96
- icon: TrashIcon,
97
- sx: {
98
- '& > path': {
99
- fill: 'neutral.40'
100
- }
101
- },
102
- size: "md",
103
- title: {
104
- name: 'Trash Icon'
105
- }
106
- }));
107
- var _React$useState = React.useState(false),
108
- _React$useState2 = _slicedToArray(_React$useState, 2),
109
- editOverviewVisible = _React$useState2[0],
110
- setEditOverviewVisible = _React$useState2[1];
111
- return ___EmotionJSX(Box, null, !editOverviewVisible ? ___EmotionJSX(Box, {
73
+ var allConditions = [{
74
+ field1: 'Family Name',
75
+ field3: 'John',
76
+ key: 'FamilyNameField'
77
+ }, {
78
+ field1: 'Full Name',
79
+ field3: 'Alex Smith',
80
+ key: 'FullNameField'
81
+ }];
82
+ var anyConditions = [{
83
+ field1: 'Group',
84
+ field3: 'Marketing',
85
+ key: 'Group1Field'
86
+ }, {
87
+ field1: 'Group',
88
+ field3: 'UX Team',
89
+ key: 'Group2Field'
90
+ }];
91
+ var noneConditions = [{
92
+ field1: 'Misc',
93
+ field3: 'Apple',
94
+ key: 'Miscellaneous1'
95
+ }, {
96
+ field1: 'Misc',
97
+ field3: 'Banana',
98
+ key: 'Miscellaneous2'
99
+ }];
100
+ export var Display = function Display() {
101
+ return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
112
102
  bg: "accent.99",
113
103
  maxWidth: "318px",
114
104
  p: "sm"
115
105
  }, ___EmotionJSX(Box, {
116
106
  isRow: true
117
- }, ___EmotionJSX(Text, {
118
- variant: "itemTitle",
119
- fontWeight: "0",
120
- pb: "md"
121
- }, "Branch Condition"), ___EmotionJSX(IconButton, {
122
- "aria-label": "edit",
123
- variant: "inverted",
124
- ml: "xs",
125
- onPress: function onPress() {
126
- return setEditOverviewVisible(true);
127
- }
128
- }, ___EmotionJSX(Icon, {
129
- icon: CreateIcon,
130
- size: "xs",
131
- title: {
132
- name: 'Create Icon'
133
- }
134
- }))), ___EmotionJSX(Box, {
107
+ }), ___EmotionJSX(Box, {
135
108
  isRow: true
136
109
  }, ___EmotionJSX(Badge, {
137
110
  label: "All",
138
111
  bg: "decorative.4",
139
- sx: sx.customBadgeStyles
112
+ sx: customBadgeStyles
140
113
  }), ___EmotionJSX(Text, null, " of the conditions are true")), _mapInstanceProperty(allConditions).call(allConditions, function (item) {
141
114
  return ___EmotionJSX(Box, {
142
115
  isRow: true,
@@ -149,14 +122,11 @@ export var Default = function Default() {
149
122
  isRow: true,
150
123
  sx: sx.allConditionsBox
151
124
  }, ___EmotionJSX(Text, {
152
- pl: "md",
153
- pr: "sm"
125
+ sx: sx.textStyles
154
126
  }, item.field1), ___EmotionJSX(Badge, {
155
127
  label: "Equals",
156
- bg: "accent.90",
157
- textColor: "neutral.10",
158
- sx: sx.customBadgeStyles,
159
- alignSelf: "center"
128
+ sx: sx.equalBadgeStyles,
129
+ textColor: "neutral.10"
160
130
  }), ___EmotionJSX(Text, null, item.field3))));
161
131
  }), ___EmotionJSX(Box, {
162
132
  isRow: true
@@ -169,7 +139,7 @@ export var Default = function Default() {
169
139
  }, ___EmotionJSX(Badge, {
170
140
  label: "Any",
171
141
  bg: "decorative.7",
172
- sx: sx.customBadgeStyles,
142
+ sx: customBadgeStyles,
173
143
  alignSelf: "center"
174
144
  }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
175
145
  ml: "xs"
@@ -186,16 +156,18 @@ export var Default = function Default() {
186
156
  bg: "white",
187
157
  isRow: true,
188
158
  width: "100%",
189
- sx: sx.allConditionsBox
159
+ sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
160
+ '&::after': {
161
+ bg: 'decorative.7',
162
+ width: '2px'
163
+ }
164
+ })
190
165
  }, ___EmotionJSX(Text, {
191
- pl: "md",
192
- pr: "sm"
166
+ sx: sx.textStyles
193
167
  }, item.field1), ___EmotionJSX(Badge, {
194
168
  label: "Equals",
195
- bg: "accent.90",
196
169
  textColor: "neutral.10",
197
- sx: sx.customBadgeStyles,
198
- alignSelf: "center"
170
+ sx: sx.equalBadgeStyles
199
171
  }), ___EmotionJSX(Text, null, item.field3)));
200
172
  })))), ___EmotionJSX(Box, {
201
173
  isRow: true
@@ -210,7 +182,7 @@ export var Default = function Default() {
210
182
  }, ___EmotionJSX(Badge, {
211
183
  label: "None",
212
184
  bg: "accent.20",
213
- sx: sx.customBadgeStyles,
185
+ sx: customBadgeStyles,
214
186
  alignSelf: "center"
215
187
  }), ___EmotionJSX(Text, null, " of the conditions are true")), ___EmotionJSX(Box, {
216
188
  ml: "xs"
@@ -227,26 +199,44 @@ export var Default = function Default() {
227
199
  bg: "white",
228
200
  isRow: true,
229
201
  width: "100%",
230
- sx: sx.allConditionsBox
202
+ sx: _objectSpread(_objectSpread({}, sx.allConditionsBox), {}, {
203
+ '&::after': {
204
+ bg: 'accent.20',
205
+ width: '2px'
206
+ }
207
+ })
231
208
  }, ___EmotionJSX(Text, {
232
- pl: "md",
233
- pr: "sm"
209
+ sx: sx.textStyles
234
210
  }, item.field1), ___EmotionJSX(Badge, {
235
211
  label: "Equals",
236
- bg: "accent.90",
237
212
  textColor: "neutral.10",
238
- sx: sx.customBadgeStyles,
239
- alignSelf: "center"
213
+ sx: sx.equalBadgeStyles
240
214
  }), ___EmotionJSX(Text, null, item.field3)));
241
- }))))) : ___EmotionJSX(Box, {
215
+ }))))));
216
+ };
217
+ export var Edit = function Edit() {
218
+ var trashButton = ___EmotionJSX(IconButton, {
219
+ "aria-label": "deleteButton",
220
+ sx: {
221
+ alignSelf: 'center'
222
+ }
223
+ }, ___EmotionJSX(Icon, {
224
+ icon: TrashIcon,
225
+ sx: {
226
+ '& > path': {
227
+ fill: 'neutral.40'
228
+ }
229
+ },
230
+ size: "md",
231
+ title: {
232
+ name: 'Trash Icon'
233
+ }
234
+ }));
235
+ return ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
242
236
  bg: "accent.99",
243
237
  p: "md",
244
238
  maxWidth: "966px"
245
- }, ___EmotionJSX(Text, {
246
- variant: "itemTitle",
247
- fontWeight: "0",
248
- pb: "md"
249
- }, "Branch Condition"), ___EmotionJSX(Box, {
239
+ }, ___EmotionJSX(Box, {
250
240
  isRow: true,
251
241
  alignItems: "center",
252
242
  mb: "sm",
@@ -518,21 +508,5 @@ export var Default = function Default() {
518
508
  })), trashButton);
519
509
  }))), ___EmotionJSX(Box, {
520
510
  alignSelf: "start"
521
- }, trashButton)), ___EmotionJSX(Box, {
522
- isRow: true,
523
- mt: "lg"
524
- }, ___EmotionJSX(Button, {
525
- onPress: function onPress() {
526
- return setEditOverviewVisible(false);
527
- },
528
- variant: "primary",
529
- mr: "md",
530
- "aria-label": "save"
531
- }, "Save"), ___EmotionJSX(Button, {
532
- onPress: function onPress() {
533
- return setEditOverviewVisible(false);
534
- },
535
- variant: "link",
536
- "aria-label": "cancel"
537
- }, "Cancel"))));
511
+ }, trashButton))));
538
512
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.14.1-alpha.1",
3
+ "version": "2.14.1-alpha.2",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",