@pingux/astro 1.25.1-alpha.5 → 1.25.1-alpha.8

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/PopoverContainer/PopoverContainer.js +1 -1
  2. package/lib/cjs/recipes/ListAndPanel.stories.js +36 -13
  3. package/lib/components/PopoverContainer/PopoverContainer.js +1 -1
  4. package/lib/recipes/ListAndPanel.stories.js +36 -14
  5. package/package.json +1 -1
package/lib/cjs/components/PopoverContainer/PopoverContainer.js CHANGED
@@ -61,7 +61,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
61
61
  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) { (0, _defineProperty2["default"])(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; }
62
62
 
63
63
  /**
64
- * PopoverContainer component used for popover on SelectField, ComboBox, and PopoverMenu.
64
+ * PopoverContainer component used for popover on SelectField, ComboBox & PopoverMenu.
65
65
  */
66
66
  var PopoverContainer = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
67
67
  var children = props.children,
package/lib/cjs/recipes/ListAndPanel.stories.js CHANGED
@@ -26,6 +26,8 @@ var _focus = require("@react-aria/focus");
26
26
 
27
27
  var _collections = require("@react-stately/collections");
28
28
 
29
+ var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
30
+
29
31
  var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
30
32
 
31
33
  var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
@@ -52,7 +54,8 @@ var items = [{
52
54
  email: 'dburkitt5@columbia.edu',
53
55
  firstName: 'Nicola',
54
56
  lastName: 'Burkitt',
55
- avatar: _images.pingImg
57
+ hasIcon: true,
58
+ avatar: _AccountIcon["default"]
56
59
  }, {
57
60
  email: 'idixie2@elegantthemes.com',
58
61
  firstName: 'Cacilia',
@@ -67,52 +70,62 @@ var items = [{
67
70
  email: 'jgolde8@jimdo.com',
68
71
  firstName: 'Celisse',
69
72
  lastName: 'Golde',
70
- avatar: _images.pingImg
73
+ hasIcon: true,
74
+ avatar: _AccountIcon["default"]
71
75
  }, {
72
76
  email: 'shearst9@answers.com',
73
77
  firstName: 'Jeth',
74
78
  lastName: 'Hearst',
75
- avatar: _images.pingImg
79
+ hasIcon: true,
80
+ avatar: _AccountIcon["default"]
76
81
  }, {
77
82
  email: 'ajinaa@mapquest.com',
78
83
  firstName: 'Kaycee',
79
84
  lastName: 'Jina',
80
- avatar: _images.pingImg
85
+ hasIcon: true,
86
+ avatar: _AccountIcon["default"]
81
87
  }, {
82
88
  email: 'vmalster4@biblegateway.com',
83
89
  firstName: 'Lorry',
84
90
  lastName: 'Malster',
85
- avatar: _images.pingImg
91
+ hasIcon: true,
92
+ avatar: _AccountIcon["default"]
86
93
  }, {
87
94
  email: 'yphipp6@yellowpages.com',
88
95
  firstName: 'Stanley',
89
96
  lastName: 'Phipp',
90
- avatar: _images.pingImg
97
+ hasIcon: true,
98
+ avatar: _AccountIcon["default"]
91
99
  }, {
92
100
  email: 'mskilbeck3@bbc.co.uk',
93
101
  firstName: 'Gradey',
94
102
  lastName: 'Skilbeck',
95
- avatar: _images.pingImg
103
+ hasIcon: true,
104
+ avatar: _AccountIcon["default"]
96
105
  }, {
97
106
  email: 'dstebbing1@msu.edu',
98
107
  firstName: 'Marnia',
99
108
  lastName: 'Stebbing',
100
- avatar: _images.pingImg
109
+ hasIcon: true,
110
+ avatar: _AccountIcon["default"]
101
111
  }, {
102
112
  email: 'lsterley7@lulu.com',
103
113
  firstName: 'Joshua',
104
114
  lastName: 'Sterley',
105
- avatar: _images.pingImg
115
+ hasIcon: true,
116
+ avatar: _AccountIcon["default"]
106
117
  }, {
107
118
  email: 'luttleyb@hugedomains.com',
108
119
  firstName: 'Jarrod',
109
120
  lastName: 'Uttley',
110
- avatar: _images.pingImg
121
+ hasIcon: true,
122
+ avatar: _AccountIcon["default"]
111
123
  }, {
112
124
  email: 'lidelc@yelp.com',
113
125
  firstName: 'Andromache',
114
126
  lastName: 'Idel',
115
- avatar: _images.pingImg,
127
+ hasIcon: true,
128
+ avatar: _AccountIcon["default"],
116
129
  hasSeparator: false
117
130
  }];
118
131
 
@@ -126,7 +139,13 @@ var ListElement = function ListElement(_ref) {
126
139
  isRow: true,
127
140
  mr: "auto",
128
141
  alignItems: "center"
129
- }, (0, _react2.jsx)(_index.Avatar, {
142
+ }, item.hasIcon ? (0, _react2.jsx)(_index.Icon, {
143
+ icon: item.avatar,
144
+ alignSelf: "center",
145
+ size: 24,
146
+ mr: "sm",
147
+ color: "accent.40"
148
+ }) : (0, _react2.jsx)(_index.Avatar, {
130
149
  mr: "md",
131
150
  sx: {
132
151
  width: '25px',
@@ -205,8 +224,11 @@ var Default = function Default() {
205
224
  return (0, _react2.jsx)(_index.Box, {
206
225
  px: "lg",
207
226
  py: "lg",
208
- bg: "accent.99"
227
+ bg: "accent.99",
228
+ height: "900px",
229
+ overflowY: "scroll"
209
230
  }, (0, _react2.jsx)(_index.SearchField, {
231
+ position: "fixed",
210
232
  mb: "sm",
211
233
  width: "400px",
212
234
  placeholder: "Search",
@@ -262,6 +284,7 @@ var Default = function Default() {
262
284
  }, (0, _react2.jsx)(_index.Tab, {
263
285
  title: "Profile"
264
286
  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
287
+ variant: "inverted",
265
288
  sx: {
266
289
  position: 'absolute',
267
290
  top: 0,
package/lib/components/PopoverContainer/PopoverContainer.js CHANGED
@@ -24,7 +24,7 @@ import { mergeProps } from '@react-aria/utils';
24
24
  import { useStatusClasses } from '../../hooks';
25
25
  import Box from '../Box';
26
26
  /**
27
- * PopoverContainer component used for popover on SelectField, ComboBox, and PopoverMenu.
27
+ * PopoverContainer component used for popover on SelectField, ComboBox & PopoverMenu.
28
28
  */
29
29
 
30
30
  import { jsx as ___EmotionJSX } from "@emotion/react";
package/lib/recipes/ListAndPanel.stories.js CHANGED
@@ -3,10 +3,11 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
3
3
  import React, { useRef, useState } from 'react';
4
4
  import { FocusScope } from '@react-aria/focus';
5
5
  import { Item } from '@react-stately/collections';
6
+ import AccountIcon from 'mdi-react/AccountIcon';
6
7
  import CloseIcon from 'mdi-react/CloseIcon';
7
8
  import MoreVertIcon from 'mdi-react/MoreVertIcon';
8
9
  import PencilIcon from 'mdi-react/PencilIcon';
9
- import { Avatar, Box, IconButton, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
10
+ import { Avatar, Box, Icon, IconButton, ListView, Menu, OverlayPanel, PopoverMenu, SearchField, Separator, SwitchField, Tab, Tabs, Text } from '../index';
10
11
  import { useOverlayPanelState } from '../hooks';
11
12
  import { pingImg } from '../utils/devUtils/constants/images';
12
13
  import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -17,7 +18,8 @@ var items = [{
17
18
  email: 'dburkitt5@columbia.edu',
18
19
  firstName: 'Nicola',
19
20
  lastName: 'Burkitt',
20
- avatar: pingImg
21
+ hasIcon: true,
22
+ avatar: AccountIcon
21
23
  }, {
22
24
  email: 'idixie2@elegantthemes.com',
23
25
  firstName: 'Cacilia',
@@ -32,52 +34,62 @@ var items = [{
32
34
  email: 'jgolde8@jimdo.com',
33
35
  firstName: 'Celisse',
34
36
  lastName: 'Golde',
35
- avatar: pingImg
37
+ hasIcon: true,
38
+ avatar: AccountIcon
36
39
  }, {
37
40
  email: 'shearst9@answers.com',
38
41
  firstName: 'Jeth',
39
42
  lastName: 'Hearst',
40
- avatar: pingImg
43
+ hasIcon: true,
44
+ avatar: AccountIcon
41
45
  }, {
42
46
  email: 'ajinaa@mapquest.com',
43
47
  firstName: 'Kaycee',
44
48
  lastName: 'Jina',
45
- avatar: pingImg
49
+ hasIcon: true,
50
+ avatar: AccountIcon
46
51
  }, {
47
52
  email: 'vmalster4@biblegateway.com',
48
53
  firstName: 'Lorry',
49
54
  lastName: 'Malster',
50
- avatar: pingImg
55
+ hasIcon: true,
56
+ avatar: AccountIcon
51
57
  }, {
52
58
  email: 'yphipp6@yellowpages.com',
53
59
  firstName: 'Stanley',
54
60
  lastName: 'Phipp',
55
- avatar: pingImg
61
+ hasIcon: true,
62
+ avatar: AccountIcon
56
63
  }, {
57
64
  email: 'mskilbeck3@bbc.co.uk',
58
65
  firstName: 'Gradey',
59
66
  lastName: 'Skilbeck',
60
- avatar: pingImg
67
+ hasIcon: true,
68
+ avatar: AccountIcon
61
69
  }, {
62
70
  email: 'dstebbing1@msu.edu',
63
71
  firstName: 'Marnia',
64
72
  lastName: 'Stebbing',
65
- avatar: pingImg
73
+ hasIcon: true,
74
+ avatar: AccountIcon
66
75
  }, {
67
76
  email: 'lsterley7@lulu.com',
68
77
  firstName: 'Joshua',
69
78
  lastName: 'Sterley',
70
- avatar: pingImg
79
+ hasIcon: true,
80
+ avatar: AccountIcon
71
81
  }, {
72
82
  email: 'luttleyb@hugedomains.com',
73
83
  firstName: 'Jarrod',
74
84
  lastName: 'Uttley',
75
- avatar: pingImg
85
+ hasIcon: true,
86
+ avatar: AccountIcon
76
87
  }, {
77
88
  email: 'lidelc@yelp.com',
78
89
  firstName: 'Andromache',
79
90
  lastName: 'Idel',
80
- avatar: pingImg,
91
+ hasIcon: true,
92
+ avatar: AccountIcon,
81
93
  hasSeparator: false
82
94
  }];
83
95
 
@@ -91,7 +103,13 @@ var ListElement = function ListElement(_ref) {
91
103
  isRow: true,
92
104
  mr: "auto",
93
105
  alignItems: "center"
94
- }, ___EmotionJSX(Avatar, {
106
+ }, item.hasIcon ? ___EmotionJSX(Icon, {
107
+ icon: item.avatar,
108
+ alignSelf: "center",
109
+ size: 24,
110
+ mr: "sm",
111
+ color: "accent.40"
112
+ }) : ___EmotionJSX(Avatar, {
95
113
  mr: "md",
96
114
  sx: {
97
115
  width: '25px',
@@ -170,8 +188,11 @@ export var Default = function Default() {
170
188
  return ___EmotionJSX(Box, {
171
189
  px: "lg",
172
190
  py: "lg",
173
- bg: "accent.99"
191
+ bg: "accent.99",
192
+ height: "900px",
193
+ overflowY: "scroll"
174
194
  }, ___EmotionJSX(SearchField, {
195
+ position: "fixed",
175
196
  mb: "sm",
176
197
  width: "400px",
177
198
  placeholder: "Search",
@@ -227,6 +248,7 @@ export var Default = function Default() {
227
248
  }, ___EmotionJSX(Tab, {
228
249
  title: "Profile"
229
250
  }, selectedItemId >= 0 && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconButton, {
251
+ variant: "inverted",
230
252
  sx: {
231
253
  position: 'absolute',
232
254
  top: 0,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.25.1-alpha.5",
3
+ "version": "1.25.1-alpha.8",
4
4
  "description": "PingUX themeable React component library",
5
5
  "author": "ux-development@pingidentity.com",
6
6
  "license": "Apache-2.0",