@pingux/astro 1.27.0-alpha.10 → 1.27.0-alpha.11

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 (9) hide show
  1. package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +8 -2
  2. package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js +35 -0
  3. package/lib/cjs/recipes/SelectedFieldOverlay.story.js +25 -21
  4. package/lib/cjs/recipes/TrialExperienceStatusBar.stories.js +81 -72
  5. package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js +7 -2
  6. package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js +25 -0
  7. package/lib/recipes/SelectedFieldOverlay.story.js +25 -21
  8. package/lib/recipes/TrialExperienceStatusBar.stories.js +81 -72
  9. package/package.json +1 -1
package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js CHANGED
@@ -58,6 +58,8 @@ var _overlays = require("@react-stately/overlays");
58
58
 
59
59
  var _overlays2 = require("@react-aria/overlays");
60
60
 
61
+ var _utils = require("@react-aria/utils");
62
+
61
63
  var _ArrowDropUpIcon = _interopRequireDefault(require("mdi-react/ArrowDropUpIcon"));
62
64
 
63
65
  var _ArrowDropDownIcon = _interopRequireDefault(require("mdi-react/ArrowDropDownIcon"));
@@ -74,7 +76,7 @@ var _index = require("../../index");
74
76
 
75
77
  var _react2 = require("@emotion/react");
76
78
 
77
- var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
79
+ var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
78
80
 
79
81
  function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
80
82
 
@@ -101,6 +103,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
101
103
  name = props.name,
102
104
  searchProps = props.searchProps,
103
105
  selectedItem = props.selectedItem,
106
+ popoverProps = props.popoverProps,
104
107
  others = (0, _objectWithoutProperties2["default"])(props, _excluded);
105
108
 
106
109
  var _useState = (0, _react.useState)(''),
@@ -267,7 +270,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
267
270
  "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
268
271
  }), selectedItem, (0, _react2.jsx)(_index.Icon, {
269
272
  icon: popoverState.isOpen ? _ArrowDropUpIcon["default"] : _ArrowDropDownIcon["default"]
270
- })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, {
273
+ })), (0, _react2.jsx)(_index.PopoverContainer, (0, _extends2["default"])({}, overlayProps, positionProps, (0, _utils.mergeProps)(overlayProps, positionProps, popoverProps), {
271
274
  ref: overlayRef,
272
275
  isOpen: popoverState.isOpen,
273
276
  scrollRef: scrollBoxRef,
@@ -355,6 +358,9 @@ EnvironmentBreadcrumb.propTypes = {
355
358
  /** Callback function that fires when the dropdown is closed. */
356
359
  onPopoverClose: _propTypes["default"].func,
357
360
 
361
+ /** Props object that is spread directly into the popover container component. */
362
+ popoverProps: _propTypes["default"].shape({}),
363
+
358
364
  /** Props object that is spread directly into the SearchField element. */
359
365
  searchProps: _propTypes["default"].shape({}),
360
366
 
package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js CHANGED
@@ -2,10 +2,28 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
4
 
5
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+
7
+ var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
8
+
9
+ var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
10
+
11
+ var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
12
+
13
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
14
+
15
+ var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
16
+
17
+ var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
18
+
19
+ var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
20
+
5
21
  var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
6
22
 
7
23
  var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
8
24
 
25
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
26
+
9
27
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
10
28
 
11
29
  var _react = _interopRequireDefault(require("react"));
@@ -22,6 +40,10 @@ var _index = require("../../index");
22
40
 
23
41
  var _react2 = require("@emotion/react");
24
42
 
43
+ 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; }
44
+
45
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
46
+
25
47
  var testEnvBreadcrumb = 'test-env-breadcrumb';
26
48
  var testName = 'test-name';
27
49
  var testSelectedItem = 'test-selected-item';
@@ -52,6 +74,10 @@ var defaultProps = {
52
74
  },
53
75
  items: items
54
76
  };
77
+ var popoverProps = {
78
+ maxWidth: '100px',
79
+ 'data-testid': 'popover-container'
80
+ };
55
81
  var defaultWithSectionsProps = {
56
82
  'data-testid': testEnvBreadcrumb,
57
83
  name: testName,
@@ -135,6 +161,15 @@ test('should display name', function () {
135
161
  getComponent();
136
162
  expect(_testWrapper.screen.getByText(testName)).toBeInTheDocument();
137
163
  });
164
+ test('should spread props into popover container', function () {
165
+ getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
166
+ isDefaultOpen: true
167
+ }));
168
+
169
+ _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
170
+
171
+ expect(_testWrapper.screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
172
+ });
138
173
  test('should display selectedItem', function () {
139
174
  getComponent();
140
175
  expect(_testWrapper.screen.getByText(testSelectedItem)).toBeInTheDocument();
package/lib/cjs/recipes/SelectedFieldOverlay.story.js CHANGED
@@ -26,36 +26,40 @@ var _default = {
26
26
  title: 'Recipes/Selected Field Overlay'
27
27
  };
28
28
  exports["default"] = _default;
29
+ var sx = {
30
+ container: {
31
+ padding: 'md',
32
+ position: 'relative',
33
+ borderWidth: 2,
34
+ borderStyle: 'solid',
35
+ borderColor: 'active',
36
+ borderRadius: 4,
37
+ cursor: 'pointer'
38
+ },
39
+ overlay: {
40
+ position: 'absolute',
41
+ width: '100%',
42
+ height: '100%',
43
+ top: 0,
44
+ left: 0,
45
+ alignItems: 'center',
46
+ justifyContent: 'center',
47
+ '&:focus': {
48
+ outline: 'none'
49
+ }
50
+ }
51
+ };
29
52
 
30
53
  var Default = function Default() {
31
54
  return (0, _react2.jsx)(_Box["default"], {
32
- p: 15,
33
- sx: {
34
- position: 'relative',
35
- borderWidth: 2,
36
- borderStyle: 'solid',
37
- borderColor: 'active',
38
- borderRadius: 4,
39
- cursor: 'pointer'
40
- }
55
+ sx: sx.container
41
56
  }, (0, _react2.jsx)(_TextField["default"], {
42
57
  label: "Name",
43
58
  controlProps: {
44
59
  tabIndex: '-1'
45
60
  }
46
61
  }), (0, _react2.jsx)(_Box["default"], {
47
- sx: {
48
- position: 'absolute',
49
- width: '100%',
50
- height: '100%',
51
- top: 0,
52
- left: 0,
53
- alignItems: 'center',
54
- justifyContent: 'center',
55
- '&:focus': {
56
- outline: 'none'
57
- }
58
- },
62
+ sx: sx.overlay,
59
63
  tabIndex: "0"
60
64
  }, (0, _react2.jsx)(_Icon["default"], {
61
65
  icon: _VisibilityOffOutlineIcon["default"],
package/lib/cjs/recipes/TrialExperienceStatusBar.stories.js CHANGED
@@ -137,6 +137,79 @@ var data = [{
137
137
  title: 'View a workflow'
138
138
  }]
139
139
  }];
140
+ var sx = {
141
+ iconContainer: {
142
+ backgroundColor: 'accent.80',
143
+ alignItems: 'center',
144
+ justifyContent: 'center',
145
+ mr: 'sm',
146
+ borderRadius: '50%',
147
+ zIndex: 3
148
+ },
149
+ headingSeparator: {
150
+ flexGrow: 1,
151
+ backgroundColor: 'accent.80',
152
+ maxHeight: '100%',
153
+ width: '6px !important',
154
+ zIndex: 2,
155
+ m: '0px 5px 0px 17px !important'
156
+ },
157
+ title: {
158
+ fontSize: 'md',
159
+ color: 'accent.30',
160
+ lineHeight: '18px',
161
+ fontWeight: '3',
162
+ m: '12px 0px 28px 5px',
163
+ maxWidth: '195px'
164
+ },
165
+ linkRowIconButton: {
166
+ '&.is-pressed': {
167
+ backgroundColor: 'transparent'
168
+ },
169
+ '&.is-pressed > svg > path': {
170
+ fill: 'accent.30'
171
+ },
172
+ '&.is-hovered': {
173
+ backgroundColor: 'transparent'
174
+ }
175
+ },
176
+ linkRowIconSelected: {
177
+ zIndex: 3,
178
+ 'path': {
179
+ fill: 'accent.30'
180
+ }
181
+ },
182
+ linkRowIconNotSelected: {
183
+ zIndex: 3,
184
+ 'path': {
185
+ fill: 'accent.80'
186
+ }
187
+ },
188
+ linkRowSeparator: {
189
+ flexGrow: 1,
190
+ backgroundColor: 'accent.30',
191
+ maxHeight: '100%',
192
+ width: '1px !important',
193
+ zIndex: 2,
194
+ m: '-5px 5px -5px 11.5px !important'
195
+ },
196
+ linkRowText: {
197
+ fontSize: 'md',
198
+ color: '#163CE3',
199
+ lineHeight: '18px',
200
+ fontWeight: '0',
201
+ m: '3px 0px 20px 10px',
202
+ maxWidth: '140px'
203
+ },
204
+ container: {
205
+ p: '15px 15px 0px 15px',
206
+ width: '280px',
207
+ backgroundColor: 'accent.95',
208
+ borderRadius: '8px',
209
+ zIndex: 1,
210
+ boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
211
+ }
212
+ };
140
213
 
141
214
  var Stage = function Stage(props) {
142
215
  var title = props.title,
@@ -172,14 +245,7 @@ var Stage = function Stage(props) {
172
245
  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
173
246
  minWidth: "39.5px",
174
247
  minHeight: "39.5px",
175
- sx: {
176
- backgroundColor: 'accent.80',
177
- alignItems: 'center',
178
- justifyContent: 'center',
179
- mr: '10px',
180
- borderRadius: '50%',
181
- zIndex: 3
182
- }
248
+ sx: sx.iconContainer
183
249
  }, (0, _react2.jsx)(_index.Icon, {
184
250
  icon: icon,
185
251
  color: "accent.40",
@@ -188,24 +254,10 @@ var Stage = function Stage(props) {
188
254
  zIndex: 3
189
255
  }
190
256
  })), !isLastStage && (0, _react2.jsx)(_index.Separator, {
191
- sx: {
192
- flexGrow: 1,
193
- backgroundColor: 'accent.80',
194
- maxHeight: '100%',
195
- width: '6px !important',
196
- zIndex: 2,
197
- m: '0px 5px 0px 17px !important'
198
- },
257
+ sx: sx.headingSeparator,
199
258
  orientation: "vertical"
200
259
  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
201
- sx: {
202
- fontSize: '15px',
203
- color: 'accent.30',
204
- lineHeight: '18px',
205
- fontWeight: '3',
206
- m: '12px 0px 28px 5px',
207
- maxWidth: '195px'
208
- }
260
+ sx: sx.title
209
261
  }, title), (0, _react2.jsx)(_index.Box, {
210
262
  pl: "0px",
211
263
  mb: "25px"
@@ -246,53 +298,19 @@ var LinkRow = function LinkRow(props) {
246
298
  }
247
299
  }, (0, _react2.jsx)(_index.IconButton, {
248
300
  onPress: onIconPress,
249
- sx: {
250
- '&.is-pressed': {
251
- backgroundColor: 'transparent'
252
- },
253
- '&.is-pressed > svg > path': {
254
- fill: 'accent.30'
255
- },
256
- '&.is-hovered': {
257
- backgroundColor: 'transparent'
258
- }
259
- },
301
+ sx: sx.linkRowIconButton,
260
302
  "aria-label": "completed step icon indicator"
261
303
  }, (0, _react2.jsx)(_index.Icon, {
262
304
  icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
263
305
  size: isSelected ? '20px' : '18px',
264
- sx: isSelected ? {
265
- zIndex: 3,
266
- 'path': {
267
- fill: 'accent.30'
268
- }
269
- } : {
270
- zIndex: 3,
271
- 'path': {
272
- fill: 'accent.80'
273
- }
274
- }
306
+ sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
275
307
  }))), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
276
- sx: {
277
- flexGrow: 1,
278
- backgroundColor: 'accent.30',
279
- maxHeight: '100%',
280
- width: '1px !important',
281
- zIndex: 2,
282
- m: '-5px 5px -5px 11.5px !important'
283
- },
308
+ sx: sx.linkRowSeparator,
284
309
  orientation: "vertical"
285
310
  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
286
311
  href: "https://www.pingidentity.com",
287
312
  target: "_blank",
288
- sx: {
289
- fontSize: '15px',
290
- color: '#163CE3',
291
- lineHeight: '18px',
292
- fontWeight: '0',
293
- m: '3px 0px 20px 10px',
294
- maxWidth: '140px'
295
- }
313
+ sx: sx.linkRowText
296
314
  }, title)));
297
315
  };
298
316
 
@@ -300,16 +318,7 @@ var Default = function Default() {
300
318
  // Open the `Story` addons tab to view the source code for full context.
301
319
  return (0, _react2.jsx)(_index.Box, {
302
320
  as: "nav",
303
- backgroundColor: "accent.95",
304
- width: "280px",
305
- sx: {
306
- p: '15px 15px 0px 15px',
307
- width: '280px',
308
- backgroundColor: 'accent.95',
309
- borderRadius: '8px',
310
- zIndex: 1,
311
- boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
312
- }
321
+ sx: sx.container
313
322
  }, (0, _react2.jsx)(_index.Box, {
314
323
  paddingLeft: "0px"
315
324
  }, (0, _map["default"])(data).call(data, function (stage, index) {
package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js CHANGED
@@ -12,7 +12,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
12
12
  import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
13
13
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
14
14
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
15
- var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
15
+ var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem", "popoverProps"];
16
16
 
17
17
  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; }
18
18
 
@@ -25,6 +25,7 @@ import HomeIcon from 'mdi-react/HomeIcon';
25
25
  import PropTypes from 'prop-types';
26
26
  import { useOverlayTriggerState } from '@react-stately/overlays';
27
27
  import { useOverlayPosition, useOverlayTrigger } from '@react-aria/overlays';
28
+ import { mergeProps } from '@react-aria/utils';
28
29
  import ArrowDropUpIcon from 'mdi-react/ArrowDropUpIcon';
29
30
  import ArrowDropDownIcon from 'mdi-react/ArrowDropDownIcon';
30
31
  import { FocusScope } from '@react-aria/focus';
@@ -51,6 +52,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
51
52
  name = props.name,
52
53
  searchProps = props.searchProps,
53
54
  selectedItem = props.selectedItem,
55
+ popoverProps = props.popoverProps,
54
56
  others = _objectWithoutProperties(props, _excluded);
55
57
 
56
58
  var _useState = useState(''),
@@ -215,7 +217,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
215
217
  "aria-label": "".concat((typeof selectedItem === 'string' ? selectedItem : selectedValue) || 'Selected Item')
216
218
  }), selectedItem, ___EmotionJSX(Icon, {
217
219
  icon: popoverState.isOpen ? ArrowDropUpIcon : ArrowDropDownIcon
218
- })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, {
220
+ })), ___EmotionJSX(PopoverContainer, _extends({}, overlayProps, positionProps, mergeProps(overlayProps, positionProps, popoverProps), {
219
221
  ref: overlayRef,
220
222
  isOpen: popoverState.isOpen,
221
223
  scrollRef: scrollBoxRef,
@@ -303,6 +305,9 @@ EnvironmentBreadcrumb.propTypes = {
303
305
  /** Callback function that fires when the dropdown is closed. */
304
306
  onPopoverClose: PropTypes.func,
305
307
 
308
+ /** Props object that is spread directly into the popover container component. */
309
+ popoverProps: PropTypes.shape({}),
310
+
306
311
  /** Props object that is spread directly into the SearchField element. */
307
312
  searchProps: PropTypes.shape({}),
308
313
 
package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js CHANGED
@@ -1,6 +1,20 @@
1
+ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
2
+ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
3
+ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
4
+ import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
5
+ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
6
+ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
7
+ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
8
+ import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
1
9
  import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
2
10
  import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
11
+ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
3
12
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
13
+
14
+ 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; }
15
+
16
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
17
+
4
18
  import React from 'react';
5
19
  import userEvent from '@testing-library/user-event';
6
20
  import { Section } from '@react-stately/collections';
@@ -38,6 +52,10 @@ var defaultProps = {
38
52
  },
39
53
  items: items
40
54
  };
55
+ var popoverProps = {
56
+ maxWidth: '100px',
57
+ 'data-testid': 'popover-container'
58
+ };
41
59
  var defaultWithSectionsProps = {
42
60
  'data-testid': testEnvBreadcrumb,
43
61
  name: testName,
@@ -115,6 +133,13 @@ test('should display name', function () {
115
133
  getComponent();
116
134
  expect(screen.getByText(testName)).toBeInTheDocument();
117
135
  });
136
+ test('should spread props into popover container', function () {
137
+ getComponent(_objectSpread(_objectSpread({}, popoverProps), {}, {
138
+ isDefaultOpen: true
139
+ }));
140
+ userEvent.click(screen.getByText(testSelectedItem));
141
+ expect(screen.queryByTestId('popover-container')).toHaveStyle('max-width: 100px');
142
+ });
118
143
  test('should display selectedItem', function () {
119
144
  getComponent();
120
145
  expect(screen.getByText(testSelectedItem)).toBeInTheDocument();
package/lib/recipes/SelectedFieldOverlay.story.js CHANGED
@@ -7,35 +7,39 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
7
7
  export default {
8
8
  title: 'Recipes/Selected Field Overlay'
9
9
  };
10
+ var sx = {
11
+ container: {
12
+ padding: 'md',
13
+ position: 'relative',
14
+ borderWidth: 2,
15
+ borderStyle: 'solid',
16
+ borderColor: 'active',
17
+ borderRadius: 4,
18
+ cursor: 'pointer'
19
+ },
20
+ overlay: {
21
+ position: 'absolute',
22
+ width: '100%',
23
+ height: '100%',
24
+ top: 0,
25
+ left: 0,
26
+ alignItems: 'center',
27
+ justifyContent: 'center',
28
+ '&:focus': {
29
+ outline: 'none'
30
+ }
31
+ }
32
+ };
10
33
  export var Default = function Default() {
11
34
  return ___EmotionJSX(Box, {
12
- p: 15,
13
- sx: {
14
- position: 'relative',
15
- borderWidth: 2,
16
- borderStyle: 'solid',
17
- borderColor: 'active',
18
- borderRadius: 4,
19
- cursor: 'pointer'
20
- }
35
+ sx: sx.container
21
36
  }, ___EmotionJSX(TextField, {
22
37
  label: "Name",
23
38
  controlProps: {
24
39
  tabIndex: '-1'
25
40
  }
26
41
  }), ___EmotionJSX(Box, {
27
- sx: {
28
- position: 'absolute',
29
- width: '100%',
30
- height: '100%',
31
- top: 0,
32
- left: 0,
33
- alignItems: 'center',
34
- justifyContent: 'center',
35
- '&:focus': {
36
- outline: 'none'
37
- }
38
- },
42
+ sx: sx.overlay,
39
43
  tabIndex: "0"
40
44
  }, ___EmotionJSX(Icon, {
41
45
  icon: VisibilityOffOutlineIcon,
package/lib/recipes/TrialExperienceStatusBar.stories.js CHANGED
@@ -104,6 +104,79 @@ var data = [{
104
104
  title: 'View a workflow'
105
105
  }]
106
106
  }];
107
+ var sx = {
108
+ iconContainer: {
109
+ backgroundColor: 'accent.80',
110
+ alignItems: 'center',
111
+ justifyContent: 'center',
112
+ mr: 'sm',
113
+ borderRadius: '50%',
114
+ zIndex: 3
115
+ },
116
+ headingSeparator: {
117
+ flexGrow: 1,
118
+ backgroundColor: 'accent.80',
119
+ maxHeight: '100%',
120
+ width: '6px !important',
121
+ zIndex: 2,
122
+ m: '0px 5px 0px 17px !important'
123
+ },
124
+ title: {
125
+ fontSize: 'md',
126
+ color: 'accent.30',
127
+ lineHeight: '18px',
128
+ fontWeight: '3',
129
+ m: '12px 0px 28px 5px',
130
+ maxWidth: '195px'
131
+ },
132
+ linkRowIconButton: {
133
+ '&.is-pressed': {
134
+ backgroundColor: 'transparent'
135
+ },
136
+ '&.is-pressed > svg > path': {
137
+ fill: 'accent.30'
138
+ },
139
+ '&.is-hovered': {
140
+ backgroundColor: 'transparent'
141
+ }
142
+ },
143
+ linkRowIconSelected: {
144
+ zIndex: 3,
145
+ 'path': {
146
+ fill: 'accent.30'
147
+ }
148
+ },
149
+ linkRowIconNotSelected: {
150
+ zIndex: 3,
151
+ 'path': {
152
+ fill: 'accent.80'
153
+ }
154
+ },
155
+ linkRowSeparator: {
156
+ flexGrow: 1,
157
+ backgroundColor: 'accent.30',
158
+ maxHeight: '100%',
159
+ width: '1px !important',
160
+ zIndex: 2,
161
+ m: '-5px 5px -5px 11.5px !important'
162
+ },
163
+ linkRowText: {
164
+ fontSize: 'md',
165
+ color: '#163CE3',
166
+ lineHeight: '18px',
167
+ fontWeight: '0',
168
+ m: '3px 0px 20px 10px',
169
+ maxWidth: '140px'
170
+ },
171
+ container: {
172
+ p: '15px 15px 0px 15px',
173
+ width: '280px',
174
+ backgroundColor: 'accent.95',
175
+ borderRadius: '8px',
176
+ zIndex: 1,
177
+ boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
178
+ }
179
+ };
107
180
 
108
181
  var Stage = function Stage(props) {
109
182
  var title = props.title,
@@ -139,14 +212,7 @@ var Stage = function Stage(props) {
139
212
  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
140
213
  minWidth: "39.5px",
141
214
  minHeight: "39.5px",
142
- sx: {
143
- backgroundColor: 'accent.80',
144
- alignItems: 'center',
145
- justifyContent: 'center',
146
- mr: '10px',
147
- borderRadius: '50%',
148
- zIndex: 3
149
- }
215
+ sx: sx.iconContainer
150
216
  }, ___EmotionJSX(Icon, {
151
217
  icon: icon,
152
218
  color: "accent.40",
@@ -155,24 +221,10 @@ var Stage = function Stage(props) {
155
221
  zIndex: 3
156
222
  }
157
223
  })), !isLastStage && ___EmotionJSX(Separator, {
158
- sx: {
159
- flexGrow: 1,
160
- backgroundColor: 'accent.80',
161
- maxHeight: '100%',
162
- width: '6px !important',
163
- zIndex: 2,
164
- m: '0px 5px 0px 17px !important'
165
- },
224
+ sx: sx.headingSeparator,
166
225
  orientation: "vertical"
167
226
  })), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
168
- sx: {
169
- fontSize: '15px',
170
- color: 'accent.30',
171
- lineHeight: '18px',
172
- fontWeight: '3',
173
- m: '12px 0px 28px 5px',
174
- maxWidth: '195px'
175
- }
227
+ sx: sx.title
176
228
  }, title), ___EmotionJSX(Box, {
177
229
  pl: "0px",
178
230
  mb: "25px"
@@ -213,53 +265,19 @@ var LinkRow = function LinkRow(props) {
213
265
  }
214
266
  }, ___EmotionJSX(IconButton, {
215
267
  onPress: onIconPress,
216
- sx: {
217
- '&.is-pressed': {
218
- backgroundColor: 'transparent'
219
- },
220
- '&.is-pressed > svg > path': {
221
- fill: 'accent.30'
222
- },
223
- '&.is-hovered': {
224
- backgroundColor: 'transparent'
225
- }
226
- },
268
+ sx: sx.linkRowIconButton,
227
269
  "aria-label": "completed step icon indicator"
228
270
  }, ___EmotionJSX(Icon, {
229
271
  icon: isSelected ? CheckCircleIcon : RadioButtonIcon,
230
272
  size: isSelected ? '20px' : '18px',
231
- sx: isSelected ? {
232
- zIndex: 3,
233
- 'path': {
234
- fill: 'accent.30'
235
- }
236
- } : {
237
- zIndex: 3,
238
- 'path': {
239
- fill: 'accent.80'
240
- }
241
- }
273
+ sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
242
274
  }))), !isLastLink && isLinkSelected && ___EmotionJSX(Separator, {
243
- sx: {
244
- flexGrow: 1,
245
- backgroundColor: 'accent.30',
246
- maxHeight: '100%',
247
- width: '1px !important',
248
- zIndex: 2,
249
- m: '-5px 5px -5px 11.5px !important'
250
- },
275
+ sx: sx.linkRowSeparator,
251
276
  orientation: "vertical"
252
277
  })), ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
253
278
  href: "https://www.pingidentity.com",
254
279
  target: "_blank",
255
- sx: {
256
- fontSize: '15px',
257
- color: '#163CE3',
258
- lineHeight: '18px',
259
- fontWeight: '0',
260
- m: '3px 0px 20px 10px',
261
- maxWidth: '140px'
262
- }
280
+ sx: sx.linkRowText
263
281
  }, title)));
264
282
  };
265
283
 
@@ -267,16 +285,7 @@ export var Default = function Default() {
267
285
  // Open the `Story` addons tab to view the source code for full context.
268
286
  return ___EmotionJSX(Box, {
269
287
  as: "nav",
270
- backgroundColor: "accent.95",
271
- width: "280px",
272
- sx: {
273
- p: '15px 15px 0px 15px',
274
- width: '280px',
275
- backgroundColor: 'accent.95',
276
- borderRadius: '8px',
277
- zIndex: 1,
278
- boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
279
- }
288
+ sx: sx.container
280
289
  }, ___EmotionJSX(Box, {
281
290
  paddingLeft: "0px"
282
291
  }, _mapInstanceProperty(data).call(data, function (stage, index) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.27.0-alpha.10",
3
+ "version": "1.27.0-alpha.11",
4
4
  "description": "PingUX themeable React component library",
5
5
  "author": "ux-development@pingidentity.com",
6
6
  "license": "Apache-2.0",