@pingux/astro 2.105.1-alpha.0 → 2.106.0-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 (10) hide show
  1. package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.d.ts +1 -1
  2. package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js +145 -335
  3. package/lib/cjs/styles/themeOverrides/stories/OverlayPanel.chromatic.stories.d.ts +7 -0
  4. package/lib/cjs/styles/themeOverrides/stories/OverlayPanel.chromatic.stories.js +68 -0
  5. package/lib/cjs/utils/designUtils/figmaLinks.d.ts +3 -0
  6. package/lib/cjs/utils/designUtils/figmaLinks.js +3 -0
  7. package/lib/components/OverlayPanel/OverlayPanel.stories.js +143 -333
  8. package/lib/styles/themeOverrides/stories/OverlayPanel.chromatic.stories.js +53 -0
  9. package/lib/utils/designUtils/figmaLinks.js +3 -0
  10. package/package.json +1 -1
package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.d.ts CHANGED
@@ -3,6 +3,6 @@ import { OverlayPanelProps } from '../../types';
3
3
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
4
4
  export default _default;
5
5
  export declare const Default: StoryFn<OverlayPanelProps>;
6
- export declare const CustomWidth: StoryFn;
7
6
  export declare const Expandable: StoryFn;
8
7
  export declare const InnerPanel: StoryFn<OverlayPanelProps>;
8
+ export declare const Customization: StoryFn;
package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js CHANGED
@@ -8,24 +8,19 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
8
8
  _Object$defineProperty(exports, "__esModule", {
9
9
  value: true
10
10
  });
11
- exports["default"] = exports.InnerPanel = exports.Expandable = exports.Default = exports.CustomWidth = void 0;
12
- var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
11
+ exports["default"] = exports.InnerPanel = exports.Expandable = exports.Default = exports.Customization = void 0;
13
12
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
14
13
  var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectDestructuringEmpty"));
15
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
16
15
  var _react = _interopRequireWildcard(require("react"));
17
- var _reactStately = require("react-stately");
16
+ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
18
17
  var _ArrowCollapseIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowCollapseIcon"));
19
18
  var _ArrowTopRightBottomLeftIcon = _interopRequireDefault(require("@pingux/mdi-react/ArrowTopRightBottomLeftIcon"));
20
- var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
21
- var _CloseIcon = _interopRequireDefault(require("@pingux/mdi-react/CloseIcon"));
22
- var _CogIcon = _interopRequireDefault(require("@pingux/mdi-react/CogIcon"));
23
19
  var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
24
20
  var _hooks = require("../../hooks");
25
21
  var _index = require("../../index");
26
- var _images = require("../../utils/devUtils/constants/images");
22
+ var _figmaLinks = require("../../utils/designUtils/figmaLinks");
27
23
  var _panelSizes = require("../../utils/devUtils/constants/panelSizes");
28
- var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
29
24
  var _OverlayPanel = _interopRequireDefault(require("./OverlayPanel.mdx"));
30
25
  var _react2 = require("@emotion/react");
31
26
  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); }
@@ -72,62 +67,54 @@ var Default = function Default(_ref) {
72
67
  return (
73
68
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
74
69
  // readers when an overlay is open.
75
- (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
70
+ (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
71
+ sx: {
72
+ gap: '25px'
73
+ }
74
+ }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Button, {
76
75
  ref: triggerRef,
77
76
  onPress: state.open,
78
- "aria-expanded": state.isOpen
77
+ "aria-expanded": state.isOpen,
78
+ sx: {
79
+ maxWidth: 'fit-content'
80
+ }
79
81
  }, "Open Panel"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
80
82
  isOpen: state.isOpen,
81
83
  isTransitioning: state.isTransitioning,
82
84
  state: state
83
85
  }, args, {
84
- triggerRef: triggerRef
85
- }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
86
- onPress: function onPress() {
87
- onClose(state, triggerRef);
88
- },
89
- "aria-expanded": state.isOpen
90
- }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
91
- pt: "md"
92
- }, "Children render here."))))
93
- );
94
- };
95
- exports.Default = Default;
96
- var CustomWidth = function CustomWidth() {
97
- var _useOverlayPanelState2 = (0, _hooks.useOverlayPanelState)(),
98
- state = _useOverlayPanelState2.state,
99
- onClose = _useOverlayPanelState2.onClose;
100
- var triggerRef = (0, _react.useRef)(null);
101
- return (
102
- // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
103
- // readers when an overlay opens.
104
- (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
105
- ref: triggerRef,
106
- onPress: state.open,
107
- "aria-expanded": state.isOpen
108
- }, "Open Panel"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, {
109
- isTransitioning: state.isTransitioning,
110
- isOpen: state.isOpen,
111
- state: state,
112
86
  triggerRef: triggerRef,
113
87
  sx: {
114
- width: '720px'
88
+ p: 0
89
+ }
90
+ }), (0, _react2.jsx)(_index.PanelHeader, {
91
+ data: {
92
+ icon: _AccountIcon["default"],
93
+ text: 'Fons Vernall',
94
+ subtext: 'rad_developer@pingidentity.com'
115
95
  }
116
- }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
96
+ }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
117
97
  onPress: function onPress() {
118
98
  onClose(state, triggerRef);
119
- },
120
- "aria-expanded": state.isOpen
121
- }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
122
- pt: "md"
123
- }, "Children render here."))))
99
+ }
100
+ })), (0, _react2.jsx)(_index.Box, {
101
+ sx: {
102
+ p: 25
103
+ }
104
+ }, (0, _react2.jsx)(_index.Text, null, "Children render here.")))))
124
105
  );
125
106
  };
126
- exports.CustomWidth = CustomWidth;
107
+ exports.Default = Default;
108
+ Default.parameters = {
109
+ design: {
110
+ type: 'figma',
111
+ url: _figmaLinks.FIGMA_LINKS.overlayPanel["default"]
112
+ }
113
+ };
127
114
  var Expandable = function Expandable() {
128
- var _useOverlayPanelState3 = (0, _hooks.useOverlayPanelState)(),
129
- state = _useOverlayPanelState3.state,
130
- onClose = _useOverlayPanelState3.onClose;
115
+ var _useOverlayPanelState2 = (0, _hooks.useOverlayPanelState)(),
116
+ state = _useOverlayPanelState2.state,
117
+ onClose = _useOverlayPanelState2.onClose;
131
118
  var triggerRef = (0, _react.useRef)(null);
132
119
  var _useState = (0, _react.useState)(false),
133
120
  _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -137,229 +124,26 @@ var Expandable = function Expandable() {
137
124
  overlayPanel: {
138
125
  padding: 0,
139
126
  transition: 'width 500ms, right 500ms'
140
- },
141
- header: {
142
- height: '110px',
143
- bg: '#F7F8FD',
144
- infoAndButtonsContainer: {
145
- justifyContent: 'space-between',
146
- padding: '20px 20px 0 20px'
147
- },
148
- pingOneAuthorizeContainer: {
149
- gap: '18px',
150
- alignItems: 'center',
151
- width: 'fit-content'
152
- },
153
- breadcrumbsContainer: {
154
- marginLeft: '78px',
155
- fontSize: 'md',
156
- fontWeight: 500
157
- }
158
- },
159
- contentContainer: {
160
- padding: '15px 25px 0 25px'
161
- },
162
- tabs: {
163
- justifyContent: 'center'
164
- },
165
- tabPanel: {
166
- height: 'calc(100vh - 255px)',
167
- overflow: 'scroll'
168
- },
169
- switchField: {
170
- rowGap: 'xs',
171
- display: 'grid !important',
172
- gridTemplateColumns: 'max-content auto',
173
- fontSize: 'sm',
174
- fontWeight: 500,
175
- color: 'text.secondary',
176
- '& > div:first-child': {
177
- order: 2
178
- }
179
- },
180
- colorField: {
181
- width: '30px',
182
- height: '20px'
183
- },
184
- tabContent: {
185
- gap: 'md',
186
- width: isExpanded ? '100%' : '400px',
187
- transition: 'width 500ms'
188
127
  }
189
128
  };
190
- var multivaluesFieldItems = [{
191
- id: 1,
192
- name: 'node 1',
193
- key: 'node1'
194
- }, {
195
- id: 2,
196
- name: 'node 2',
197
- key: 'node2'
198
- }];
199
- var onCloseHandler = function onCloseHandler() {
200
- return onClose(state, triggerRef);
129
+ var onCloseFunction = function onCloseFunction() {
130
+ onClose(state, triggerRef);
131
+ setIsExpanded(false);
201
132
  };
202
- var _useState3 = (0, _react.useState)('#EACE91'),
203
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
204
- color = _useState4[0],
205
- setColor = _useState4[1];
206
- var handleColorChange = (0, _react.useCallback)(function (colorVal) {
207
- if (typeof colorVal === 'string') {
208
- setColor(colorVal);
209
- } else if (colorVal.rgb) {
210
- var _context, _context2, _context3;
211
- var rgb = colorVal.rgb;
212
- var r = rgb.r,
213
- b = rgb.b,
214
- g = rgb.g,
215
- a = rgb.a;
216
- setColor((0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
217
- }
218
- }, []);
219
- var header = (0, _react2.jsx)(_index.Box, {
220
- sx: sx.header
221
- }, (0, _react2.jsx)(_index.Box, {
222
- isRow: true,
223
- sx: sx.header.infoAndButtonsContainer
224
- }, (0, _react2.jsx)(_index.Box, {
225
- isRow: true,
226
- sx: sx.header.pingOneAuthorizeContainer
227
- }, (0, _react2.jsx)(_index.Avatar, {
228
- src: _images.pingImg,
229
- sx: {
230
- width: '40px',
231
- height: '40px'
232
- }
233
- }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
234
- variant: "bodyStrong",
235
- fontSize: "md"
236
- }, "PingOne Authorize"), (0, _react2.jsx)(_index.Text, {
237
- variant: "subtitle",
238
- fontSize: "sm"
239
- }, "ID: kcdhaweyf2d"), (0, _react2.jsx)(_index.Text, {
240
- variant: "subtitle",
241
- fontSize: "sm"
242
- }, "ConnectionID: 234UI3fu4hj4itge35553rj3ty4gyeczcb90"))), (0, _react2.jsx)(_index.Box, {
243
- isRow: true
244
- }, (0, _react2.jsx)(_index.IconButton, {
245
- "aria-label": "settings-icon",
246
- size: 20
247
- }, (0, _react2.jsx)(_CogIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
248
- "aria-label": "expand-icon",
249
- size: 20,
250
- onPress: function onPress() {
251
- return setIsExpanded(!isExpanded);
252
- }
253
- }, isExpanded ? (0, _react2.jsx)(_ArrowCollapseIcon["default"], null) : (0, _react2.jsx)(_ArrowTopRightBottomLeftIcon["default"], null)), (0, _react2.jsx)(_index.IconButton, {
254
- "aria-label": "close-icon",
255
- size: 20,
256
- onPress: onCloseHandler
257
- }, (0, _react2.jsx)(_CloseIcon["default"], null)))), (0, _react2.jsx)(_index.Box, {
258
- sx: sx.header.breadcrumbsContainer
259
- }, (0, _react2.jsx)(_index.Breadcrumbs, {
260
- icon: _ChevronRightIcon["default"]
261
- }, (0, _react2.jsx)(_reactStately.Item, {
262
- key: "home",
263
- "data-id": "home"
264
- }, "Capability"), (0, _react2.jsx)(_reactStately.Item, {
265
- key: "editGroups",
266
- variant: "neutralText",
267
- "data-id": "editGroups"
268
- }, "Make Decision Request"))));
269
- var generalTabContent = (0, _react2.jsx)(_index.Box, {
270
- sx: sx.tabContent
271
- }, (0, _react2.jsx)(_index.TextField, {
272
- label: "Node Title",
273
- defaultValue: "The Value of the Text Input"
274
- }), (0, _react2.jsx)(_index.TextField, {
275
- label: "Node Description",
276
- defaultValue: "The Value of the Text Input"
277
- }), (0, _react2.jsx)(_index.ColorField, {
278
- value: color,
279
- label: "Node Background Color",
280
- buttonProps: {
281
- sx: sx.colorField
282
- },
283
- onChange: handleColorChange
284
- }), (0, _react2.jsx)(_index.SwitchField, {
285
- hintText: "Example Hint",
286
- labelProps: {
287
- sx: sx.switchField
288
- },
289
- label: "Expire Authentication Token",
290
- value: "expire-authentication-token"
291
- }), (0, _react2.jsx)(_index.SwitchField, {
292
- hintText: "Example Hint",
293
- labelProps: {
294
- sx: sx.switchField
295
- },
296
- label: "Expire Flow Instance Cache",
297
- value: "expire-flow-instance-cache"
298
- }), (0, _react2.jsx)(_index.MultivaluesField, {
299
- items: multivaluesFieldItems,
300
- label: "Expire Node Instance Cache List",
301
- inputProps: {
302
- hintText: 'Example Hint'
303
- }
304
- }, function (item) {
305
- return (0, _react2.jsx)(_reactStately.Item, {
306
- key: item.key,
307
- "data-id": item.name
308
- }, item.name);
309
- }));
310
- var settingsTabContent = (0, _react2.jsx)(_index.Box, {
311
- sx: sx.tabContent
312
- }, (0, _react2.jsx)(_index.SwitchField, {
313
- hintText: "Example Hint",
314
- labelProps: {
315
- sx: sx.switchField
316
- },
317
- label: "Expire Authentication Token",
318
- value: "expire-authentication-token"
319
- }), (0, _react2.jsx)(_index.SwitchField, {
320
- hintText: "Example Hint",
321
- labelProps: {
322
- sx: sx.switchField
323
- },
324
- label: "Expire Flow Instance Cache",
325
- value: "expire-flow-instance-cache"
326
- }), (0, _react2.jsx)(_index.SwitchField, {
327
- hintText: "Example Hint",
328
- labelProps: {
329
- sx: sx.switchField
330
- },
331
- label: "Expire Node Instance Cache",
332
- value: "expire-node-instance-cache"
333
- }));
334
- var schemaTabContent = (0, _react2.jsx)(_index.Box, {
335
- sx: sx.tabContent
336
- }, (0, _react2.jsx)(_index.TextField, {
337
- hintText: "Example Hint",
338
- label: "Log field Title",
339
- defaultValue: "The Value of the Text Input"
340
- }), (0, _react2.jsx)(_index.TextField, {
341
- hintText: "Example Hint",
342
- label: "Log field Description",
343
- defaultValue: "The Value of the Text Input"
344
- }));
345
- var footer = (0, _react2.jsx)(_index.ButtonBar, {
346
- sx: {
347
- backgroundColor: 'background.base'
348
- }
349
- }, (0, _react2.jsx)(_index.Button, {
350
- onPress: onCloseHandler,
351
- variant: "primary"
352
- }, "Save"), (0, _react2.jsx)(_index.Button, {
353
- onPress: onCloseHandler,
354
- variant: "link"
355
- }, "Cancel"));
356
133
  return (
357
134
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
358
135
  // readers when an overlay opens.
359
- (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
136
+ (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
137
+ sx: {
138
+ gap: '25px'
139
+ }
140
+ }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Button, {
360
141
  ref: triggerRef,
361
142
  onPress: state.open,
362
- "aria-expanded": state.isOpen
143
+ "aria-expanded": state.isOpen,
144
+ sx: {
145
+ maxWidth: 'fit-content'
146
+ }
363
147
  }, "Open Panel"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, {
364
148
  isTransitioning: state.isTransitioning,
365
149
  isOpen: state.isOpen,
@@ -367,41 +151,40 @@ var Expandable = function Expandable() {
367
151
  triggerRef: triggerRef,
368
152
  sx: sx.overlayPanel,
369
153
  size: isExpanded ? 'full' : 'medium'
370
- }, header, (0, _react2.jsx)(_index.Box, {
371
- sx: sx.contentContainer
372
- }, (0, _react2.jsx)(_index.Tabs, {
373
- tabListProps: sx.tabs,
374
- tabPanelProps: sx.tabPanel
375
- }, (0, _react2.jsx)(_index.Tab, {
376
- key: "tab1",
377
- title: "General"
378
- }, generalTabContent), (0, _react2.jsx)(_index.Tab, {
379
- key: "tab2",
380
- title: "Settings"
381
- }, settingsTabContent), (0, _react2.jsx)(_index.Tab, {
382
- key: "tab3",
383
- title: "Schema"
384
- }, schemaTabContent))), footer))
154
+ }, (0, _react2.jsx)(_index.PanelHeader, {
155
+ data: {
156
+ icon: _AccountIcon["default"],
157
+ text: 'Fons Vernall',
158
+ subtext: 'rad_developer@pingidentity.com'
159
+ }
160
+ }, (0, _react2.jsx)(_index.IconButton, {
161
+ "aria-label": "expand-icon",
162
+ size: 20,
163
+ onPress: function onPress() {
164
+ return setIsExpanded(!isExpanded);
165
+ }
166
+ }, isExpanded ? (0, _react2.jsx)(_ArrowCollapseIcon["default"], null) : (0, _react2.jsx)(_ArrowTopRightBottomLeftIcon["default"], null)), (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
167
+ onPress: function onPress() {
168
+ onCloseFunction();
169
+ }
170
+ })), (0, _react2.jsx)(_index.Box, {
171
+ sx: {
172
+ p: 25
173
+ }
174
+ }, (0, _react2.jsx)(_index.Text, null, "Children render here")))))
385
175
  );
386
176
  };
387
177
  exports.Expandable = Expandable;
388
178
  var InnerPanel = function InnerPanel(_ref2) {
389
179
  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
180
+ var _useOverlayPanelState3 = (0, _hooks.useOverlayPanelState)(),
181
+ state = _useOverlayPanelState3.state,
182
+ onClose = _useOverlayPanelState3.onClose;
390
183
  var _useOverlayPanelState4 = (0, _hooks.useOverlayPanelState)(),
391
- state = _useOverlayPanelState4.state,
392
- onClose = _useOverlayPanelState4.onClose;
393
- var _useOverlayPanelState5 = (0, _hooks.useOverlayPanelState)(),
394
- innerState = _useOverlayPanelState5.state,
395
- onCloseInner = _useOverlayPanelState5.onClose;
184
+ innerState = _useOverlayPanelState4.state,
185
+ onCloseInner = _useOverlayPanelState4.onClose;
396
186
  var outerTriggerRef = (0, _react.useRef)(null);
397
187
  var innerTriggerRef = (0, _react.useRef)(null);
398
- var _useState5 = (0, _react.useState)(false),
399
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
400
- messagesOpen = _useState6[0],
401
- setMessagesOpen = _useState6[1];
402
- var toggleMessagesOpen = function toggleMessagesOpen() {
403
- setMessagesOpen(!messagesOpen);
404
- };
405
188
  var closeOuterPanel = function closeOuterPanel() {
406
189
  if (innerState.isOpen) {
407
190
  innerState.close();
@@ -420,18 +203,7 @@ var InnerPanel = function InnerPanel(_ref2) {
420
203
  triggerRef: innerTriggerRef
421
204
  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Button, {
422
205
  onPress: closeInnerPanel
423
- }, "Close Inner Panel"), (0, _react2.jsx)(_index.Text, {
424
- pt: "md"
425
- }, "Children render here.")));
426
- var items = [{
427
- key: 'Form 1',
428
- id: 1,
429
- name: 'Form 1'
430
- }, {
431
- key: 'Form 2',
432
- id: 2,
433
- name: 'Form 2'
434
- }];
206
+ }, "Close Inner Panel")));
435
207
  var outer =
436
208
  // should have higher z-index applied
437
209
  (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, (0, _extends2["default"])({
@@ -443,29 +215,22 @@ var InnerPanel = function InnerPanel(_ref2) {
443
215
  }, args, {
444
216
  state: state,
445
217
  triggerRef: outerTriggerRef
446
- }), (0, _react2.jsx)(_index.Box, {
218
+ }), (0, _react2.jsx)(_index.PanelHeader, {
219
+ data: {
220
+ icon: _AccountIcon["default"],
221
+ text: 'Fons Vernall',
222
+ subtext: 'rad_developer@pingidentity.com'
223
+ }
224
+ }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
225
+ onPress: function onPress() {
226
+ closeOuterPanel();
227
+ }
228
+ })), (0, _react2.jsx)(_index.Box, {
447
229
  sx: {
448
- p: '12px'
230
+ p: '25px',
231
+ gap: '25px'
449
232
  }
450
- }, (0, _react2.jsx)(_index.Button, {
451
- onPress: closeOuterPanel,
452
- "aria-expanded": state.isOpen
453
- }, "Close Panel"), (0, _react2.jsx)(_index.Text, {
454
- pt: "md",
455
- mb: "24px"
456
- }, "Children render here."), (0, _react2.jsx)(_index.ListView, {
457
- items: items
458
- }, function (item) {
459
- return (0, _react2.jsx)(_reactStately.Item, {
460
- key: item.id
461
- }, (0, _react2.jsx)(_index.ListViewItem, {
462
- data: {
463
- text: item.name
464
- }
465
- }));
466
- }), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
467
- onPress: toggleMessagesOpen
468
- }, "Toggle Messages"), (0, _react2.jsx)("br", null), (0, _react2.jsx)(_index.Button, {
233
+ }, (0, _react2.jsx)(_index.Text, null, "Children render here."), (0, _react2.jsx)(_index.Button, {
469
234
  ref: innerTriggerRef,
470
235
  onPress: innerState.open,
471
236
  "aria-expanded": innerState.isOpen
@@ -473,19 +238,64 @@ var InnerPanel = function InnerPanel(_ref2) {
473
238
  return (
474
239
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
475
240
  // readers when an overlay opens.
476
- (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
241
+ (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
242
+ sx: {
243
+ gap: '25px'
244
+ }
245
+ }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Button, {
477
246
  ref: outerTriggerRef,
478
247
  onPress: state.open,
479
- "aria-expanded": state.isOpen
480
- }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
248
+ "aria-expanded": state.isOpen,
481
249
  sx: {
482
- zIndex: 11
483
- },
484
- onClose: toggleMessagesOpen
485
- }, (0, _react2.jsx)(_reactStately.Item, {
486
- key: "message2",
487
- status: _statuses["default"].SUCCESS
488
- }, "Z Index higher than inner pannel")))
250
+ maxWidth: 'fit-content'
251
+ }
252
+ }, "Open Panel"), outer))
253
+ );
254
+ };
255
+ exports.InnerPanel = InnerPanel;
256
+ var Customization = function Customization() {
257
+ var _useOverlayPanelState5 = (0, _hooks.useOverlayPanelState)(),
258
+ state = _useOverlayPanelState5.state,
259
+ onClose = _useOverlayPanelState5.onClose;
260
+ var triggerRef = (0, _react.useRef)(null);
261
+ return (
262
+ // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
263
+ // readers when an overlay opens.
264
+ (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
265
+ sx: {
266
+ gap: '25px'
267
+ }
268
+ }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Button, {
269
+ ref: triggerRef,
270
+ onPress: state.open,
271
+ "aria-expanded": state.isOpen,
272
+ sx: {
273
+ maxWidth: 'fit-content'
274
+ }
275
+ }, "Open Panel"), (state.isOpen || state.isTransitioning) && (0, _react2.jsx)(_index.OverlayPanel, {
276
+ isTransitioning: state.isTransitioning,
277
+ isOpen: state.isOpen,
278
+ state: state,
279
+ triggerRef: triggerRef,
280
+ sx: {
281
+ width: '720px',
282
+ p: 0
283
+ }
284
+ }, (0, _react2.jsx)(_index.PanelHeader, {
285
+ data: {
286
+ icon: _AccountIcon["default"],
287
+ text: 'Fons Vernall',
288
+ subtext: 'rad_developer@pingidentity.com'
289
+ }
290
+ }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
291
+ onPress: function onPress() {
292
+ onClose(state, triggerRef);
293
+ }
294
+ })), (0, _react2.jsx)(_index.Box, {
295
+ sx: {
296
+ p: 25
297
+ }
298
+ }, (0, _react2.jsx)(_index.Text, null, "Children render here.")))))
489
299
  );
490
300
  };
491
- exports.InnerPanel = InnerPanel;
301
+ exports.Customization = Customization;
package/lib/cjs/styles/themeOverrides/stories/OverlayPanel.chromatic.stories.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ declare const _default: {
3
+ title: string;
4
+ component: React.ForwardRefExoticComponent<import("../../../index").OverlayPanelProps & React.RefAttributes<HTMLDivElement>>;
5
+ };
6
+ export default _default;
7
+ export declare const Default: () => React.JSX.Element;
package/lib/cjs/styles/themeOverrides/stories/OverlayPanel.chromatic.stories.js ADDED
@@ -0,0 +1,68 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
+ var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
5
+ var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
6
+ var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
7
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
8
+ _Object$defineProperty(exports, "__esModule", {
9
+ value: true
10
+ });
11
+ exports["default"] = exports.Default = void 0;
12
+ var _react = _interopRequireWildcard(require("react"));
13
+ var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
14
+ var _hooks = require("../../../hooks");
15
+ var _index = require("../../../index");
16
+ var _react2 = require("@emotion/react");
17
+ 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); }
18
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
+ var _default = {
20
+ title: 'Chromatic Only OverlayPanel',
21
+ component: _index.OverlayPanel
22
+ };
23
+ exports["default"] = _default;
24
+ var Default = function Default() {
25
+ var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)({
26
+ isDefaultOpen: true
27
+ }),
28
+ state = _useOverlayPanelState.state,
29
+ onClose = _useOverlayPanelState.onClose;
30
+ var triggerRef = (0, _react.useRef)(null);
31
+ return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
32
+ sx: {
33
+ gap: '25px'
34
+ }
35
+ }, (0, _react2.jsx)(_index.Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), (0, _react2.jsx)(_index.Button, {
36
+ ref: triggerRef,
37
+ onPress: state.open,
38
+ "aria-expanded": state.isOpen,
39
+ sx: {
40
+ maxWidth: 'fit-content'
41
+ }
42
+ }, "Open Panel"), (0, _react2.jsx)(_index.OverlayPanel, {
43
+ isOpen: true,
44
+ isTransitioning: state.isTransitioning,
45
+ state: state,
46
+ triggerRef: triggerRef,
47
+ sx: {
48
+ p: 0
49
+ }
50
+ }, (0, _react2.jsx)(_index.PanelHeader, {
51
+ data: {
52
+ icon: _AccountIcon["default"],
53
+ text: 'Fons Vernall',
54
+ subtext: 'rad_developer@pingidentity.com'
55
+ }
56
+ }, (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
57
+ onPress: function onPress() {
58
+ onClose(state, triggerRef);
59
+ }
60
+ })), (0, _react2.jsx)(_index.Box, {
61
+ sx: {
62
+ p: 25
63
+ }
64
+ }, (0, _react2.jsx)(_index.Text, {
65
+ pt: "md"
66
+ }, "Children render here.")))));
67
+ };
68
+ exports.Default = Default;
package/lib/cjs/utils/designUtils/figmaLinks.d.ts CHANGED
@@ -148,6 +148,9 @@ export declare const FIGMA_LINKS: {
148
148
  OnewayToBidirectionalArrow: {
149
149
  default: string;
150
150
  };
151
+ overlayPanel: {
152
+ default: string;
153
+ };
151
154
  panelContent: {
152
155
  displayPanel: string;
153
156
  editPanel: string;
package/lib/cjs/utils/designUtils/figmaLinks.js CHANGED
@@ -155,6 +155,9 @@ var FIGMA_LINKS = {
155
155
  OnewayToBidirectionalArrow: {
156
156
  "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43504-1214&mode=design&t=R4kdj0liRHxsqbV5-0'
157
157
  },
158
+ overlayPanel: {
159
+ "default": 'https://www.figma.com/proto/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58765-3123&t=qSq8hhXsmFeytcZL-1'
160
+ },
158
161
  panelContent: {
159
162
  displayPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43431%3A4249&mode=dev',
160
163
  editPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=5013%3A15377&mode=dev'
package/lib/components/OverlayPanel/OverlayPanel.stories.js CHANGED
@@ -1,20 +1,15 @@
1
1
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
2
2
  import _objectDestructuringEmpty from "@babel/runtime-corejs3/helpers/esm/objectDestructuringEmpty";
3
3
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
4
- import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
5
- import React, { useCallback, useRef, useState } from 'react';
6
- import { Item } from 'react-stately';
4
+ import React, { useRef, useState } from 'react';
5
+ import AccountIcon from '@pingux/mdi-react/AccountIcon';
7
6
  import ArrowCollapse from '@pingux/mdi-react/ArrowCollapseIcon';
8
7
  import ArrowTopRightBottomLeft from '@pingux/mdi-react/ArrowTopRightBottomLeftIcon';
9
- import ChevronRightIcon from '@pingux/mdi-react/ChevronRightIcon';
10
- import CloseIcon from '@pingux/mdi-react/CloseIcon';
11
- import CogIcon from '@pingux/mdi-react/CogIcon';
12
8
  import DocsLayout from '../../../.storybook/storybookDocsLayout';
13
9
  import { useOverlayPanelState } from '../../hooks';
14
- import { Avatar, Box, Breadcrumbs, Button, ButtonBar, ColorField, IconButton, ListView, ListViewItem, Messages, MultivaluesField, OverlayPanel, OverlayProvider, SwitchField, Tab, Tabs, Text, TextField } from '../../index';
15
- import { pingImg } from '../../utils/devUtils/constants/images';
10
+ import { Box, Button, IconButton, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, Text } from '../../index';
11
+ import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
16
12
  import { panelSizes } from '../../utils/devUtils/constants/panelSizes';
17
- import statuses from '../../utils/devUtils/constants/statuses';
18
13
  import OverlayPanelReadme from './OverlayPanel.mdx';
19
14
  import { jsx as ___EmotionJSX } from "@emotion/react";
20
15
  export default {
@@ -58,60 +53,53 @@ export var Default = function Default(_ref) {
58
53
  return (
59
54
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
60
55
  // readers when an overlay is open.
61
- ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
56
+ ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
57
+ sx: {
58
+ gap: '25px'
59
+ }
60
+ }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX(Button, {
62
61
  ref: triggerRef,
63
62
  onPress: state.open,
64
- "aria-expanded": state.isOpen
63
+ "aria-expanded": state.isOpen,
64
+ sx: {
65
+ maxWidth: 'fit-content'
66
+ }
65
67
  }, "Open Panel"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, _extends({
66
68
  isOpen: state.isOpen,
67
69
  isTransitioning: state.isTransitioning,
68
70
  state: state
69
71
  }, args, {
70
- triggerRef: triggerRef
71
- }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
72
- onPress: function onPress() {
73
- onClose(state, triggerRef);
74
- },
75
- "aria-expanded": state.isOpen
76
- }, "Close Panel"), ___EmotionJSX(Text, {
77
- pt: "md"
78
- }, "Children render here."))))
79
- );
80
- };
81
- export var CustomWidth = function CustomWidth() {
82
- var _useOverlayPanelState2 = useOverlayPanelState(),
83
- state = _useOverlayPanelState2.state,
84
- onClose = _useOverlayPanelState2.onClose;
85
- var triggerRef = useRef(null);
86
- return (
87
- // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
88
- // readers when an overlay opens.
89
- ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
90
- ref: triggerRef,
91
- onPress: state.open,
92
- "aria-expanded": state.isOpen
93
- }, "Open Panel"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, {
94
- isTransitioning: state.isTransitioning,
95
- isOpen: state.isOpen,
96
- state: state,
97
72
  triggerRef: triggerRef,
98
73
  sx: {
99
- width: '720px'
74
+ p: 0
100
75
  }
101
- }, ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
76
+ }), ___EmotionJSX(PanelHeader, {
77
+ data: {
78
+ icon: AccountIcon,
79
+ text: 'Fons Vernall',
80
+ subtext: 'rad_developer@pingidentity.com'
81
+ }
82
+ }, ___EmotionJSX(PanelHeaderCloseButton, {
102
83
  onPress: function onPress() {
103
84
  onClose(state, triggerRef);
104
- },
105
- "aria-expanded": state.isOpen
106
- }, "Close Panel"), ___EmotionJSX(Text, {
107
- pt: "md"
108
- }, "Children render here."))))
85
+ }
86
+ })), ___EmotionJSX(Box, {
87
+ sx: {
88
+ p: 25
89
+ }
90
+ }, ___EmotionJSX(Text, null, "Children render here.")))))
109
91
  );
110
92
  };
93
+ Default.parameters = {
94
+ design: {
95
+ type: 'figma',
96
+ url: FIGMA_LINKS.overlayPanel["default"]
97
+ }
98
+ };
111
99
  export var Expandable = function Expandable() {
112
- var _useOverlayPanelState3 = useOverlayPanelState(),
113
- state = _useOverlayPanelState3.state,
114
- onClose = _useOverlayPanelState3.onClose;
100
+ var _useOverlayPanelState2 = useOverlayPanelState(),
101
+ state = _useOverlayPanelState2.state,
102
+ onClose = _useOverlayPanelState2.onClose;
115
103
  var triggerRef = useRef(null);
116
104
  var _useState = useState(false),
117
105
  _useState2 = _slicedToArray(_useState, 2),
@@ -121,229 +109,26 @@ export var Expandable = function Expandable() {
121
109
  overlayPanel: {
122
110
  padding: 0,
123
111
  transition: 'width 500ms, right 500ms'
124
- },
125
- header: {
126
- height: '110px',
127
- bg: '#F7F8FD',
128
- infoAndButtonsContainer: {
129
- justifyContent: 'space-between',
130
- padding: '20px 20px 0 20px'
131
- },
132
- pingOneAuthorizeContainer: {
133
- gap: '18px',
134
- alignItems: 'center',
135
- width: 'fit-content'
136
- },
137
- breadcrumbsContainer: {
138
- marginLeft: '78px',
139
- fontSize: 'md',
140
- fontWeight: 500
141
- }
142
- },
143
- contentContainer: {
144
- padding: '15px 25px 0 25px'
145
- },
146
- tabs: {
147
- justifyContent: 'center'
148
- },
149
- tabPanel: {
150
- height: 'calc(100vh - 255px)',
151
- overflow: 'scroll'
152
- },
153
- switchField: {
154
- rowGap: 'xs',
155
- display: 'grid !important',
156
- gridTemplateColumns: 'max-content auto',
157
- fontSize: 'sm',
158
- fontWeight: 500,
159
- color: 'text.secondary',
160
- '& > div:first-child': {
161
- order: 2
162
- }
163
- },
164
- colorField: {
165
- width: '30px',
166
- height: '20px'
167
- },
168
- tabContent: {
169
- gap: 'md',
170
- width: isExpanded ? '100%' : '400px',
171
- transition: 'width 500ms'
172
112
  }
173
113
  };
174
- var multivaluesFieldItems = [{
175
- id: 1,
176
- name: 'node 1',
177
- key: 'node1'
178
- }, {
179
- id: 2,
180
- name: 'node 2',
181
- key: 'node2'
182
- }];
183
- var onCloseHandler = function onCloseHandler() {
184
- return onClose(state, triggerRef);
114
+ var onCloseFunction = function onCloseFunction() {
115
+ onClose(state, triggerRef);
116
+ setIsExpanded(false);
185
117
  };
186
- var _useState3 = useState('#EACE91'),
187
- _useState4 = _slicedToArray(_useState3, 2),
188
- color = _useState4[0],
189
- setColor = _useState4[1];
190
- var handleColorChange = useCallback(function (colorVal) {
191
- if (typeof colorVal === 'string') {
192
- setColor(colorVal);
193
- } else if (colorVal.rgb) {
194
- var _context, _context2, _context3;
195
- var rgb = colorVal.rgb;
196
- var r = rgb.r,
197
- b = rgb.b,
198
- g = rgb.g,
199
- a = rgb.a;
200
- setColor(_concatInstanceProperty(_context = _concatInstanceProperty(_context2 = _concatInstanceProperty(_context3 = "rgba(".concat(r, ", ")).call(_context3, g, ", ")).call(_context2, b, ", ")).call(_context, a, ")"));
201
- }
202
- }, []);
203
- var header = ___EmotionJSX(Box, {
204
- sx: sx.header
205
- }, ___EmotionJSX(Box, {
206
- isRow: true,
207
- sx: sx.header.infoAndButtonsContainer
208
- }, ___EmotionJSX(Box, {
209
- isRow: true,
210
- sx: sx.header.pingOneAuthorizeContainer
211
- }, ___EmotionJSX(Avatar, {
212
- src: pingImg,
213
- sx: {
214
- width: '40px',
215
- height: '40px'
216
- }
217
- }), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
218
- variant: "bodyStrong",
219
- fontSize: "md"
220
- }, "PingOne Authorize"), ___EmotionJSX(Text, {
221
- variant: "subtitle",
222
- fontSize: "sm"
223
- }, "ID: kcdhaweyf2d"), ___EmotionJSX(Text, {
224
- variant: "subtitle",
225
- fontSize: "sm"
226
- }, "ConnectionID: 234UI3fu4hj4itge35553rj3ty4gyeczcb90"))), ___EmotionJSX(Box, {
227
- isRow: true
228
- }, ___EmotionJSX(IconButton, {
229
- "aria-label": "settings-icon",
230
- size: 20
231
- }, ___EmotionJSX(CogIcon, null)), ___EmotionJSX(IconButton, {
232
- "aria-label": "expand-icon",
233
- size: 20,
234
- onPress: function onPress() {
235
- return setIsExpanded(!isExpanded);
236
- }
237
- }, isExpanded ? ___EmotionJSX(ArrowCollapse, null) : ___EmotionJSX(ArrowTopRightBottomLeft, null)), ___EmotionJSX(IconButton, {
238
- "aria-label": "close-icon",
239
- size: 20,
240
- onPress: onCloseHandler
241
- }, ___EmotionJSX(CloseIcon, null)))), ___EmotionJSX(Box, {
242
- sx: sx.header.breadcrumbsContainer
243
- }, ___EmotionJSX(Breadcrumbs, {
244
- icon: ChevronRightIcon
245
- }, ___EmotionJSX(Item, {
246
- key: "home",
247
- "data-id": "home"
248
- }, "Capability"), ___EmotionJSX(Item, {
249
- key: "editGroups",
250
- variant: "neutralText",
251
- "data-id": "editGroups"
252
- }, "Make Decision Request"))));
253
- var generalTabContent = ___EmotionJSX(Box, {
254
- sx: sx.tabContent
255
- }, ___EmotionJSX(TextField, {
256
- label: "Node Title",
257
- defaultValue: "The Value of the Text Input"
258
- }), ___EmotionJSX(TextField, {
259
- label: "Node Description",
260
- defaultValue: "The Value of the Text Input"
261
- }), ___EmotionJSX(ColorField, {
262
- value: color,
263
- label: "Node Background Color",
264
- buttonProps: {
265
- sx: sx.colorField
266
- },
267
- onChange: handleColorChange
268
- }), ___EmotionJSX(SwitchField, {
269
- hintText: "Example Hint",
270
- labelProps: {
271
- sx: sx.switchField
272
- },
273
- label: "Expire Authentication Token",
274
- value: "expire-authentication-token"
275
- }), ___EmotionJSX(SwitchField, {
276
- hintText: "Example Hint",
277
- labelProps: {
278
- sx: sx.switchField
279
- },
280
- label: "Expire Flow Instance Cache",
281
- value: "expire-flow-instance-cache"
282
- }), ___EmotionJSX(MultivaluesField, {
283
- items: multivaluesFieldItems,
284
- label: "Expire Node Instance Cache List",
285
- inputProps: {
286
- hintText: 'Example Hint'
287
- }
288
- }, function (item) {
289
- return ___EmotionJSX(Item, {
290
- key: item.key,
291
- "data-id": item.name
292
- }, item.name);
293
- }));
294
- var settingsTabContent = ___EmotionJSX(Box, {
295
- sx: sx.tabContent
296
- }, ___EmotionJSX(SwitchField, {
297
- hintText: "Example Hint",
298
- labelProps: {
299
- sx: sx.switchField
300
- },
301
- label: "Expire Authentication Token",
302
- value: "expire-authentication-token"
303
- }), ___EmotionJSX(SwitchField, {
304
- hintText: "Example Hint",
305
- labelProps: {
306
- sx: sx.switchField
307
- },
308
- label: "Expire Flow Instance Cache",
309
- value: "expire-flow-instance-cache"
310
- }), ___EmotionJSX(SwitchField, {
311
- hintText: "Example Hint",
312
- labelProps: {
313
- sx: sx.switchField
314
- },
315
- label: "Expire Node Instance Cache",
316
- value: "expire-node-instance-cache"
317
- }));
318
- var schemaTabContent = ___EmotionJSX(Box, {
319
- sx: sx.tabContent
320
- }, ___EmotionJSX(TextField, {
321
- hintText: "Example Hint",
322
- label: "Log field Title",
323
- defaultValue: "The Value of the Text Input"
324
- }), ___EmotionJSX(TextField, {
325
- hintText: "Example Hint",
326
- label: "Log field Description",
327
- defaultValue: "The Value of the Text Input"
328
- }));
329
- var footer = ___EmotionJSX(ButtonBar, {
330
- sx: {
331
- backgroundColor: 'background.base'
332
- }
333
- }, ___EmotionJSX(Button, {
334
- onPress: onCloseHandler,
335
- variant: "primary"
336
- }, "Save"), ___EmotionJSX(Button, {
337
- onPress: onCloseHandler,
338
- variant: "link"
339
- }, "Cancel"));
340
118
  return (
341
119
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
342
120
  // readers when an overlay opens.
343
- ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
121
+ ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
122
+ sx: {
123
+ gap: '25px'
124
+ }
125
+ }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX(Button, {
344
126
  ref: triggerRef,
345
127
  onPress: state.open,
346
- "aria-expanded": state.isOpen
128
+ "aria-expanded": state.isOpen,
129
+ sx: {
130
+ maxWidth: 'fit-content'
131
+ }
347
132
  }, "Open Panel"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, {
348
133
  isTransitioning: state.isTransitioning,
349
134
  isOpen: state.isOpen,
@@ -351,40 +136,39 @@ export var Expandable = function Expandable() {
351
136
  triggerRef: triggerRef,
352
137
  sx: sx.overlayPanel,
353
138
  size: isExpanded ? 'full' : 'medium'
354
- }, header, ___EmotionJSX(Box, {
355
- sx: sx.contentContainer
356
- }, ___EmotionJSX(Tabs, {
357
- tabListProps: sx.tabs,
358
- tabPanelProps: sx.tabPanel
359
- }, ___EmotionJSX(Tab, {
360
- key: "tab1",
361
- title: "General"
362
- }, generalTabContent), ___EmotionJSX(Tab, {
363
- key: "tab2",
364
- title: "Settings"
365
- }, settingsTabContent), ___EmotionJSX(Tab, {
366
- key: "tab3",
367
- title: "Schema"
368
- }, schemaTabContent))), footer))
139
+ }, ___EmotionJSX(PanelHeader, {
140
+ data: {
141
+ icon: AccountIcon,
142
+ text: 'Fons Vernall',
143
+ subtext: 'rad_developer@pingidentity.com'
144
+ }
145
+ }, ___EmotionJSX(IconButton, {
146
+ "aria-label": "expand-icon",
147
+ size: 20,
148
+ onPress: function onPress() {
149
+ return setIsExpanded(!isExpanded);
150
+ }
151
+ }, isExpanded ? ___EmotionJSX(ArrowCollapse, null) : ___EmotionJSX(ArrowTopRightBottomLeft, null)), ___EmotionJSX(PanelHeaderCloseButton, {
152
+ onPress: function onPress() {
153
+ onCloseFunction();
154
+ }
155
+ })), ___EmotionJSX(Box, {
156
+ sx: {
157
+ p: 25
158
+ }
159
+ }, ___EmotionJSX(Text, null, "Children render here")))))
369
160
  );
370
161
  };
371
162
  export var InnerPanel = function InnerPanel(_ref2) {
372
163
  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
164
+ var _useOverlayPanelState3 = useOverlayPanelState(),
165
+ state = _useOverlayPanelState3.state,
166
+ onClose = _useOverlayPanelState3.onClose;
373
167
  var _useOverlayPanelState4 = useOverlayPanelState(),
374
- state = _useOverlayPanelState4.state,
375
- onClose = _useOverlayPanelState4.onClose;
376
- var _useOverlayPanelState5 = useOverlayPanelState(),
377
- innerState = _useOverlayPanelState5.state,
378
- onCloseInner = _useOverlayPanelState5.onClose;
168
+ innerState = _useOverlayPanelState4.state,
169
+ onCloseInner = _useOverlayPanelState4.onClose;
379
170
  var outerTriggerRef = useRef(null);
380
171
  var innerTriggerRef = useRef(null);
381
- var _useState5 = useState(false),
382
- _useState6 = _slicedToArray(_useState5, 2),
383
- messagesOpen = _useState6[0],
384
- setMessagesOpen = _useState6[1];
385
- var toggleMessagesOpen = function toggleMessagesOpen() {
386
- setMessagesOpen(!messagesOpen);
387
- };
388
172
  var closeOuterPanel = function closeOuterPanel() {
389
173
  if (innerState.isOpen) {
390
174
  innerState.close();
@@ -403,18 +187,7 @@ export var InnerPanel = function InnerPanel(_ref2) {
403
187
  triggerRef: innerTriggerRef
404
188
  }), ___EmotionJSX(Box, null, ___EmotionJSX(Button, {
405
189
  onPress: closeInnerPanel
406
- }, "Close Inner Panel"), ___EmotionJSX(Text, {
407
- pt: "md"
408
- }, "Children render here.")));
409
- var items = [{
410
- key: 'Form 1',
411
- id: 1,
412
- name: 'Form 1'
413
- }, {
414
- key: 'Form 2',
415
- id: 2,
416
- name: 'Form 2'
417
- }];
190
+ }, "Close Inner Panel")));
418
191
  var outer =
419
192
  // should have higher z-index applied
420
193
  (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, _extends({
@@ -426,29 +199,22 @@ export var InnerPanel = function InnerPanel(_ref2) {
426
199
  }, args, {
427
200
  state: state,
428
201
  triggerRef: outerTriggerRef
429
- }), ___EmotionJSX(Box, {
202
+ }), ___EmotionJSX(PanelHeader, {
203
+ data: {
204
+ icon: AccountIcon,
205
+ text: 'Fons Vernall',
206
+ subtext: 'rad_developer@pingidentity.com'
207
+ }
208
+ }, ___EmotionJSX(PanelHeaderCloseButton, {
209
+ onPress: function onPress() {
210
+ closeOuterPanel();
211
+ }
212
+ })), ___EmotionJSX(Box, {
430
213
  sx: {
431
- p: '12px'
214
+ p: '25px',
215
+ gap: '25px'
432
216
  }
433
- }, ___EmotionJSX(Button, {
434
- onPress: closeOuterPanel,
435
- "aria-expanded": state.isOpen
436
- }, "Close Panel"), ___EmotionJSX(Text, {
437
- pt: "md",
438
- mb: "24px"
439
- }, "Children render here."), ___EmotionJSX(ListView, {
440
- items: items
441
- }, function (item) {
442
- return ___EmotionJSX(Item, {
443
- key: item.id
444
- }, ___EmotionJSX(ListViewItem, {
445
- data: {
446
- text: item.name
447
- }
448
- }));
449
- }), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
450
- onPress: toggleMessagesOpen
451
- }, "Toggle Messages"), ___EmotionJSX("br", null), ___EmotionJSX(Button, {
217
+ }, ___EmotionJSX(Text, null, "Children render here."), ___EmotionJSX(Button, {
452
218
  ref: innerTriggerRef,
453
219
  onPress: innerState.open,
454
220
  "aria-expanded": innerState.isOpen
@@ -456,18 +222,62 @@ export var InnerPanel = function InnerPanel(_ref2) {
456
222
  return (
457
223
  // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
458
224
  // readers when an overlay opens.
459
- ___EmotionJSX(React.Fragment, null, ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Button, {
225
+ ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
226
+ sx: {
227
+ gap: '25px'
228
+ }
229
+ }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX(Button, {
460
230
  ref: outerTriggerRef,
461
231
  onPress: state.open,
462
- "aria-expanded": state.isOpen
463
- }, "Open Panel"), outer), messagesOpen && ___EmotionJSX(Messages, {
232
+ "aria-expanded": state.isOpen,
464
233
  sx: {
465
- zIndex: 11
466
- },
467
- onClose: toggleMessagesOpen
468
- }, ___EmotionJSX(Item, {
469
- key: "message2",
470
- status: statuses.SUCCESS
471
- }, "Z Index higher than inner pannel")))
234
+ maxWidth: 'fit-content'
235
+ }
236
+ }, "Open Panel"), outer))
237
+ );
238
+ };
239
+ export var Customization = function Customization() {
240
+ var _useOverlayPanelState5 = useOverlayPanelState(),
241
+ state = _useOverlayPanelState5.state,
242
+ onClose = _useOverlayPanelState5.onClose;
243
+ var triggerRef = useRef(null);
244
+ return (
245
+ // Application must be wrapped in an OverlayProvider so that it can be hidden from screen
246
+ // readers when an overlay opens.
247
+ ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
248
+ sx: {
249
+ gap: '25px'
250
+ }
251
+ }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX(Button, {
252
+ ref: triggerRef,
253
+ onPress: state.open,
254
+ "aria-expanded": state.isOpen,
255
+ sx: {
256
+ maxWidth: 'fit-content'
257
+ }
258
+ }, "Open Panel"), (state.isOpen || state.isTransitioning) && ___EmotionJSX(OverlayPanel, {
259
+ isTransitioning: state.isTransitioning,
260
+ isOpen: state.isOpen,
261
+ state: state,
262
+ triggerRef: triggerRef,
263
+ sx: {
264
+ width: '720px',
265
+ p: 0
266
+ }
267
+ }, ___EmotionJSX(PanelHeader, {
268
+ data: {
269
+ icon: AccountIcon,
270
+ text: 'Fons Vernall',
271
+ subtext: 'rad_developer@pingidentity.com'
272
+ }
273
+ }, ___EmotionJSX(PanelHeaderCloseButton, {
274
+ onPress: function onPress() {
275
+ onClose(state, triggerRef);
276
+ }
277
+ })), ___EmotionJSX(Box, {
278
+ sx: {
279
+ p: 25
280
+ }
281
+ }, ___EmotionJSX(Text, null, "Children render here.")))))
472
282
  );
473
283
  };
package/lib/styles/themeOverrides/stories/OverlayPanel.chromatic.stories.js ADDED
@@ -0,0 +1,53 @@
1
+ import React, { useRef } from 'react';
2
+ import AccountIcon from '@pingux/mdi-react/AccountIcon';
3
+ import { useOverlayPanelState } from '../../../hooks';
4
+ import { Box, Button, OverlayPanel, OverlayProvider, PanelHeader, PanelHeaderCloseButton, Text } from '../../../index';
5
+ import { jsx as ___EmotionJSX } from "@emotion/react";
6
+ export default {
7
+ title: 'Chromatic Only OverlayPanel',
8
+ component: OverlayPanel
9
+ };
10
+ export var Default = function Default() {
11
+ var _useOverlayPanelState = useOverlayPanelState({
12
+ isDefaultOpen: true
13
+ }),
14
+ state = _useOverlayPanelState.state,
15
+ onClose = _useOverlayPanelState.onClose;
16
+ var triggerRef = useRef(null);
17
+ return ___EmotionJSX(OverlayProvider, null, ___EmotionJSX(Box, {
18
+ sx: {
19
+ gap: '25px'
20
+ }
21
+ }, ___EmotionJSX(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."), ___EmotionJSX(Button, {
22
+ ref: triggerRef,
23
+ onPress: state.open,
24
+ "aria-expanded": state.isOpen,
25
+ sx: {
26
+ maxWidth: 'fit-content'
27
+ }
28
+ }, "Open Panel"), ___EmotionJSX(OverlayPanel, {
29
+ isOpen: true,
30
+ isTransitioning: state.isTransitioning,
31
+ state: state,
32
+ triggerRef: triggerRef,
33
+ sx: {
34
+ p: 0
35
+ }
36
+ }, ___EmotionJSX(PanelHeader, {
37
+ data: {
38
+ icon: AccountIcon,
39
+ text: 'Fons Vernall',
40
+ subtext: 'rad_developer@pingidentity.com'
41
+ }
42
+ }, ___EmotionJSX(PanelHeaderCloseButton, {
43
+ onPress: function onPress() {
44
+ onClose(state, triggerRef);
45
+ }
46
+ })), ___EmotionJSX(Box, {
47
+ sx: {
48
+ p: 25
49
+ }
50
+ }, ___EmotionJSX(Text, {
51
+ pt: "md"
52
+ }, "Children render here.")))));
53
+ };
package/lib/utils/designUtils/figmaLinks.js CHANGED
@@ -148,6 +148,9 @@ export var FIGMA_LINKS = {
148
148
  OnewayToBidirectionalArrow: {
149
149
  "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=43504-1214&mode=design&t=R4kdj0liRHxsqbV5-0'
150
150
  },
151
+ overlayPanel: {
152
+ "default": 'https://www.figma.com/proto/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=58765-3123&t=qSq8hhXsmFeytcZL-1'
153
+ },
151
154
  panelContent: {
152
155
  displayPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43431%3A4249&mode=dev',
153
156
  editPanel: 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=5013%3A15377&mode=dev'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.105.1-alpha.0",
3
+ "version": "2.106.0-alpha.1",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",