@pingux/astro 1.35.0-alpha.0 → 1.35.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -120,12 +120,12 @@ var Sizes = function Sizes() {
120
120
  width: "40%"
121
121
  }, (0, _react2.jsx)(_index.Text, null, "XS | 21px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
122
122
  fontFamily: "monospace"
123
- }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
123
+ }, " ", "<IconButton aria-label='create button' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
124
124
  fontFamily: "monospace"
125
125
  }, "<Icon icon={CreateIcon} size='xs'/>"), (0, _react2.jsx)(_index.Text, {
126
126
  fontFamily: "monospace"
127
127
  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
128
- "aria-label": "create buton",
128
+ "aria-label": "create button",
129
129
  variant: "inverted",
130
130
  sx: {
131
131
  width: 'unset'
@@ -139,12 +139,12 @@ var Sizes = function Sizes() {
139
139
  width: "40%"
140
140
  }, (0, _react2.jsx)(_index.Text, null, "SM | 26px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
141
141
  fontFamily: "monospace"
142
- }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
142
+ }, " ", "<IconButton aria-label='create button' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
143
143
  fontFamily: "monospace"
144
144
  }, "<Icon icon={CreateIcon} size='sm'/>"), (0, _react2.jsx)(_index.Text, {
145
145
  fontFamily: "monospace"
146
146
  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
147
- "aria-label": "create buton",
147
+ "aria-label": "create button",
148
148
  variant: "inverted",
149
149
  sx: {
150
150
  width: 'unset'
@@ -158,12 +158,12 @@ var Sizes = function Sizes() {
158
158
  width: "40%"
159
159
  }, (0, _react2.jsx)(_index.Text, null, "MD | 31px")), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.Text, {
160
160
  fontFamily: "monospace"
161
- }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
161
+ }, " ", "<IconButton aria-label='create button' variant='inverted'/>"), (0, _react2.jsx)(_index.Text, {
162
162
  fontFamily: "monospace"
163
163
  }, "<Icon icon={CreateIcon} size='md'/>"), (0, _react2.jsx)(_index.Text, {
164
164
  fontFamily: "monospace"
165
165
  }, '</IconButton>')), (0, _react2.jsx)(_index.TableCell, null, (0, _react2.jsx)(_index.IconButton, {
166
- "aria-label": "create buton",
166
+ "aria-label": "create button",
167
167
  variant: "inverted",
168
168
  sx: {
169
169
  width: 'unset'
@@ -14,34 +14,34 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
14
14
 
15
15
  var _react = _interopRequireDefault(require("react"));
16
16
 
17
- var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
18
-
19
- var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
20
-
21
17
  var _AccountMultipleIcon = _interopRequireDefault(require("mdi-react/AccountMultipleIcon"));
22
18
 
23
- var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/TransitConnectionVariantIcon"));
19
+ var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
24
20
 
25
21
  var _EmoticonHappyOutlineIcon = _interopRequireDefault(require("mdi-react/EmoticonHappyOutlineIcon"));
26
22
 
27
23
  var _FingerprintIcon = _interopRequireDefault(require("mdi-react/FingerprintIcon"));
28
24
 
25
+ var _GlobeIcon = _interopRequireDefault(require("mdi-react/GlobeIcon"));
26
+
29
27
  var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIcon"));
30
28
 
31
- var _EarthIcon = _interopRequireDefault(require("mdi-react/EarthIcon"));
29
+ var _TransitConnectionVariantIcon = _interopRequireDefault(require("mdi-react/TransitConnectionVariantIcon"));
30
+
31
+ var _ViewDashboardIcon = _interopRequireDefault(require("mdi-react/ViewDashboardIcon"));
32
32
 
33
33
  var _index = require("../../index");
34
34
 
35
35
  var _react2 = require("@emotion/react");
36
36
 
37
37
  var _default = {
38
- title: 'NavBar',
39
38
  component: _index.NavBar,
40
39
  subcomponents: {
41
40
  NavBarSection: _index.NavBarSection,
42
41
  NavBarItemLink: _index.NavBarItemLink,
43
42
  NavBarItemButton: _index.NavBarItemButton
44
- }
43
+ },
44
+ title: 'NavBar'
45
45
  };
46
46
  exports["default"] = _default;
47
47
 
@@ -150,36 +150,138 @@ var data = [{
150
150
  id: "Identities Link Users",
151
151
  href: "https://pingidentity.com/"
152
152
  }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
153
- key: "Identities Link Group",
154
- id: "Identities Link Group",
153
+ key: "Identities Link Groups",
154
+ id: "Identities Link Groups",
155
155
  href: "https://pingidentity.com/"
156
- }, "Group")]
156
+ }, "Groups"), (0, _react2.jsx)(_index.NavBarItemLink, {
157
+ key: "Identities Link Populations",
158
+ id: "Identities Link Populations",
159
+ href: "https://pingidentity.com/"
160
+ }, "Populations"), (0, _react2.jsx)(_index.NavBarItemLink, {
161
+ key: "Identities Link Attributes",
162
+ id: "Identities Link Attributes",
163
+ href: "https://pingidentity.com/"
164
+ }, "Attributes"), (0, _react2.jsx)(_index.NavBarItemLink, {
165
+ key: "Identities Link Roles",
166
+ id: "Identities Link Roles",
167
+ href: "https://pingidentity.com/"
168
+ }, "Roles")]
157
169
  }, {
158
170
  icon: _TransitConnectionVariantIcon["default"],
159
171
  key: 'Connections',
160
172
  heading: 'Connections',
161
- children: [(0, _react2.jsx)(_index.NavBarItemLink, {
162
- key: "Connection Link Users",
163
- id: "Connection Link Users",
173
+ children: [{
174
+ hasSeparator: false,
175
+ subTitle: 'Applications'
176
+ }, (0, _react2.jsx)(_index.NavBarItemLink, {
177
+ key: "Connections Applications",
178
+ id: "Connections Applications",
164
179
  href: "https://pingidentity.com/"
165
- }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
166
- key: "Connections Link Group",
167
- id: "Connections Link Group",
180
+ }, "Applications"), (0, _react2.jsx)(_index.NavBarItemLink, {
181
+ key: "Connections Application Catalog",
182
+ id: "Connections Application Catalog",
168
183
  href: "https://pingidentity.com/"
169
- }, "Group")]
184
+ }, "Application Catalog"), (0, _react2.jsx)(_index.NavBarItemLink, {
185
+ key: "Connections Application Portal",
186
+ id: "Connections Application Portal",
187
+ href: "https://pingidentity.com/"
188
+ }, "Application Portal"), {
189
+ subTitle: 'Identity Providers'
190
+ }, (0, _react2.jsx)(_index.NavBarItemLink, {
191
+ key: "Connections External IDPs",
192
+ id: "Connections External IDPs",
193
+ href: "https://pingidentity.com/"
194
+ }, "External IDPs"), {
195
+ subTitle: 'Ping Products'
196
+ }, (0, _react2.jsx)(_index.NavBarItemLink, {
197
+ key: "Connections PingFederate",
198
+ id: "Connections PingFederate",
199
+ href: "https://pingidentity.com/"
200
+ }, "PingFederate"), (0, _react2.jsx)(_index.NavBarItemLink, {
201
+ key: "Connections PingIntelligence",
202
+ id: "Connections PingIntelligence",
203
+ href: "https://pingidentity.com/"
204
+ }, "PingIntelligence"), (0, _react2.jsx)(_index.Separator, {
205
+ variant: "separator.navBarSubtitleSeparator"
206
+ }), (0, _react2.jsx)(_index.NavBarItemLink, {
207
+ key: "Connections Provisioning",
208
+ id: "Connections Provisioning",
209
+ href: "https://pingidentity.com/"
210
+ }, "Provisioning"), (0, _react2.jsx)(_index.NavBarItemLink, {
211
+ key: "Connections WebHooks",
212
+ id: "Connections WebHooks",
213
+ href: "https://pingidentity.com/"
214
+ }, "WebHooks"), (0, _react2.jsx)(_index.NavBarItemLink, {
215
+ key: "Connections Gateways",
216
+ id: "Connections Gateways",
217
+ href: "https://pingidentity.com/"
218
+ }, "Gateways"), (0, _react2.jsx)(_index.NavBarItemLink, {
219
+ key: "Connections Certificates & Key Pairs",
220
+ id: "Connections Certificates & Key Pairs",
221
+ href: "https://pingidentity.com/"
222
+ }, "Certificates & Key Pairs"), (0, _react2.jsx)(_index.NavBarItemLink, {
223
+ key: "Connections Resources",
224
+ id: "Connections Resources",
225
+ href: "https://pingidentity.com/"
226
+ }, "Resources")]
170
227
  }, {
171
228
  icon: _EmoticonHappyOutlineIcon["default"],
172
229
  key: 'Experiences',
173
230
  heading: 'Experiences',
174
- children: [(0, _react2.jsx)(_index.NavBarItemLink, {
175
- key: "Experiences Link Attributes",
176
- id: "Experiences Link Attributes",
231
+ children: [{
232
+ hasSeparator: false,
233
+ subTitle: 'Policies'
234
+ }, (0, _react2.jsx)(_index.NavBarItemLink, {
235
+ key: "Experiences Authentication",
236
+ id: "Experiences Authentication",
177
237
  href: "https://pingidentity.com/"
178
- }, "Attributes"), (0, _react2.jsx)(_index.NavBarItemLink, {
179
- key: "Experiences Link Roles",
180
- id: "Experiences Link Roles",
238
+ }, "Authentication"), (0, _react2.jsx)(_index.NavBarItemLink, {
239
+ key: "Experiences MFA",
240
+ id: "Experiences MFA",
181
241
  href: "https://pingidentity.com/"
182
- }, "Roles")]
242
+ }, "MFA"), (0, _react2.jsx)(_index.NavBarItemLink, {
243
+ key: "Experiences Password",
244
+ id: "Experiences Password",
245
+ href: "https://pingidentity.com/"
246
+ }, "Password"), (0, _react2.jsx)(_index.Separator, {
247
+ variant: "separator.navBarSubtitleSeparator"
248
+ }), (0, _react2.jsx)(_index.NavBarItemLink, {
249
+ key: "Experiences Risk",
250
+ id: "Experiences Risk",
251
+ href: "https://pingidentity.com/"
252
+ }, "Risk"), (0, _react2.jsx)(_index.NavBarItemLink, {
253
+ key: "Experiences Flows",
254
+ id: "Experiences Flows",
255
+ href: "https://pingidentity.com/"
256
+ }, "Flows"), (0, _react2.jsx)(_index.NavBarItemLink, {
257
+ key: "Experiences Forms",
258
+ id: "Experiences Forms",
259
+ href: "https://pingidentity.com/"
260
+ }, "Forms"), (0, _react2.jsx)(_index.NavBarItemLink, {
261
+ key: "Experiences Languages",
262
+ id: "Experiences Languages",
263
+ href: "https://pingidentity.com/"
264
+ }, "Languages"), (0, _react2.jsx)(_index.NavBarItemLink, {
265
+ key: "Experiences Agreements",
266
+ id: "Experiences Agreements",
267
+ href: "https://pingidentity.com/"
268
+ }, "Agreements"), (0, _react2.jsx)(_index.NavBarItemLink, {
269
+ key: "Experiences Branding & Themes",
270
+ id: "Experiences Branding & Themes",
271
+ href: "https://pingidentity.com/"
272
+ }, "Branding & Themes"), (0, _react2.jsx)(_index.NavBarItemLink, {
273
+ key: "Experiences Notifications",
274
+ id: "Experiences Notifications",
275
+ href: "https://pingidentity.com/"
276
+ }, "Notifications"), (0, _react2.jsx)(_index.NavBarItemLink, {
277
+ key: "Experiences Vanity Domains",
278
+ id: "Experiences Vanity Domains",
279
+ href: "https://pingidentity.com/"
280
+ }, "Vanity Domains"), (0, _react2.jsx)(_index.NavBarItemLink, {
281
+ key: "Experiences Sender",
282
+ id: "Experiences Sender",
283
+ href: "https://pingidentity.com/"
284
+ }, "Sender")]
183
285
  }];
184
286
  var secondData = [{
185
287
  icon: _FingerprintIcon["default"],
@@ -189,7 +291,7 @@ var secondData = [{
189
291
  id: "MFA Button Users",
190
292
  key: "MFA Button Users"
191
293
  }, "Users"), {
192
- isSubTitle: true,
294
+ hasSeparator: false,
193
295
  subTitle: 'PingOne Services'
194
296
  }, (0, _react2.jsx)(_index.NavBarItemButton, {
195
297
  key: "MFA Button Group",
@@ -203,7 +305,7 @@ var secondData = [{
203
305
  key: "Risk Button Users",
204
306
  id: "Risk Button Users"
205
307
  }, "Users"), {
206
- isSubTitle: true,
308
+ hasSeparator: false,
207
309
  subTitle: 'PingOne Services'
208
310
  }, (0, _react2.jsx)(_index.NavBarItemButton, {
209
311
  key: "Risk Button Group",
@@ -217,7 +319,7 @@ var secondData = [{
217
319
  key: "Verify Button Users",
218
320
  id: "Verify Button Users"
219
321
  }, "Users"), {
220
- isSubTitle: true,
322
+ hasSeparator: false,
221
323
  subTitle: 'PingOne Services'
222
324
  }, (0, _react2.jsx)(_index.NavBarItemButton, {
223
325
  key: "Verify Button Group",
@@ -231,7 +333,7 @@ var secondData = [{
231
333
  key: "Credentials Button Users",
232
334
  id: "Credentials Button Users"
233
335
  }, "Users"), {
234
- isSubTitle: true,
336
+ hasSeparator: false,
235
337
  subTitle: 'PingOne Services'
236
338
  }, (0, _react2.jsx)(_index.NavBarItemButton, {
237
339
  key: "Credentials Button Group",
@@ -24,14 +24,14 @@ var _ScaleBalanceIcon = _interopRequireDefault(require("mdi-react/ScaleBalanceIc
24
24
 
25
25
  var _VerifiedIcon = _interopRequireDefault(require("mdi-react/VerifiedIcon"));
26
26
 
27
+ var _ = require("../../");
28
+
27
29
  var _NavBar = _interopRequireDefault(require("./NavBar"));
28
30
 
29
31
  var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
30
32
 
31
33
  var _testWrapper = require("../../utils/testUtils/testWrapper");
32
34
 
33
- var _index = require("../../index");
34
-
35
35
  var _react2 = require("@emotion/react");
36
36
 
37
37
  var DATA_ID = 'data-id';
@@ -39,11 +39,11 @@ var data = [{
39
39
  icon: _GlobeIcon["default"],
40
40
  key: 'Overview',
41
41
  heading: 'Overview',
42
- children: [(0, _react2.jsx)(_index.NavBarItemButton, {
42
+ children: [(0, _react2.jsx)(_.NavBarItemButton, {
43
43
  key: "Credentials Button Users",
44
44
  id: "Credentials Button Users",
45
45
  "data-testid": "navItemButton"
46
- }, "Users"), (0, _react2.jsx)(_index.NavBarItemLink, {
46
+ }, "Users"), (0, _react2.jsx)(_.NavBarItemLink, {
47
47
  key: "Experiences Link Roles",
48
48
  id: "Experiences Link Roles",
49
49
  href: "https://pingidentity.com/",
@@ -91,21 +91,21 @@ var secondData = [{
91
91
 
92
92
  var getComponent = function getComponent() {
93
93
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
94
- return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_index.Box, {
94
+ return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_.Box, {
95
95
  sx: {
96
96
  height: '100%',
97
97
  maxHeight: '100%',
98
98
  overflowY: 'overlay !important'
99
99
  }
100
- }, (0, _react2.jsx)(_index.NavBarSection, {
100
+ }, (0, _react2.jsx)(_.NavBarSection, {
101
101
  items: data,
102
102
  hasSeparator: true,
103
103
  "data-testid": DATA_ID,
104
104
  "data-id": DATA_ID
105
- }), (0, _react2.jsx)(_index.NavBarSection, {
105
+ }), (0, _react2.jsx)(_.NavBarSection, {
106
106
  items: secondData,
107
107
  title: "test_title"
108
- }), (0, _react2.jsx)(_index.NavBarItem, {
108
+ }), (0, _react2.jsx)(_.NavBarItem, {
109
109
  id: "Overview",
110
110
  key: "Overview",
111
111
  text: "Overview",
@@ -116,12 +116,12 @@ var getComponent = function getComponent() {
116
116
 
117
117
  var getComponentWithMultipleChildren = function getComponentWithMultipleChildren() {
118
118
  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
119
- return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
119
+ return (0, _testWrapper.render)((0, _react2.jsx)(_NavBar["default"], props, (0, _react2.jsx)(_.Box, null, (0, _react2.jsx)(_.Link, {
120
120
  href: "https://pingidentity.com",
121
121
  target: "_blank",
122
122
  "aria-label": "home link",
123
123
  "data-testid": "navLink"
124
- }, "home")), (0, _react2.jsx)(_index.Button, {
124
+ }, "home")), (0, _react2.jsx)(_.Button, {
125
125
  "data-testid": "navButton"
126
126
  }, "test button")));
127
127
  };
@@ -34,39 +34,48 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
34
34
 
35
35
  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; }
36
36
 
37
- var NavBarItemBody = function NavBarItemBody(props) {
37
+ var NavBarItemBody = function NavBarItemBody(_ref) {
38
38
  var _context;
39
39
 
40
- var item = props.item,
41
- onKeyDown = props.onKeyDown;
42
- return (0, _react2.jsx)(_index.Box, {
43
- sx: {
44
- alignItems: 'flex-start',
45
- mb: '15px'
46
- }
47
- }, (0, _map["default"])(_context = item.children).call(_context, function (child) {
48
- return child.subTitle ? (0, _react2.jsx)(_react.Fragment, {
49
- key: "fragment".concat(child.subTitle)
50
- }, (0, _react2.jsx)(_index.Separator, {
51
- variant: "separator.navBarSubtitleSeparator",
52
- key: "separator".concat(child.subTitle)
40
+ var item = _ref.item,
41
+ onKeyDown = _ref.onKeyDown;
42
+
43
+ var renderSubTitle = function renderSubTitle(child) {
44
+ var hasSeparator = child.hasSeparator,
45
+ subTitle = child.subTitle;
46
+ return (0, _react2.jsx)(_react.Fragment, {
47
+ key: "fragment".concat(subTitle)
48
+ }, (hasSeparator || hasSeparator === undefined) && (0, _react2.jsx)(_index.Separator, {
49
+ variant: "separator.navBarSubtitleSeparator"
53
50
  }), (0, _react2.jsx)(_index.Text, {
54
- key: "text".concat(child.subTitle),
55
- variant: "text.navBarSubtitle",
51
+ key: "text".concat(subTitle),
56
52
  sx: {
57
- mb: '10px',
58
- ml: '45px'
59
- }
60
- }, child.subTitle)) : (0, _react2.jsx)(ChildItemWrapper, {
53
+ mb: 'sm',
54
+ ml: '45px',
55
+ mt: 'md'
56
+ },
57
+ variant: "text.navBarSubtitle"
58
+ }, subTitle));
59
+ };
60
+
61
+ var renderChild = function renderChild(child) {
62
+ return child.subTitle ? renderSubTitle(child) : (0, _react2.jsx)(ChildItemWrapper, {
61
63
  onKeyDown: onKeyDown,
62
64
  key: "item".concat(child.key || child)
63
65
  }, child);
64
- }));
66
+ };
67
+
68
+ return (0, _react2.jsx)(_index.Box, {
69
+ sx: {
70
+ alignItems: 'flex-start',
71
+ mb: '15px'
72
+ }
73
+ }, (0, _map["default"])(_context = item.children).call(_context, renderChild));
65
74
  };
66
75
 
67
- var ChildItemWrapper = function ChildItemWrapper(props) {
68
- var children = props.children,
69
- _onKeyDown = props.onKeyDown;
76
+ var ChildItemWrapper = function ChildItemWrapper(_ref2) {
77
+ var children = _ref2.children,
78
+ _onKeyDown = _ref2.onKeyDown;
70
79
  var childrenKey = children.key || children;
71
80
 
72
81
  var _useKeyboard = (0, _interactions.useKeyboard)({
@@ -0,0 +1,54 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
4
+
5
+ var _react = _interopRequireDefault(require("react"));
6
+
7
+ var _NavBarItemBody = _interopRequireDefault(require("./NavBarItemBody"));
8
+
9
+ var _ = require("../../");
10
+
11
+ var _testWrapper = require("../../utils/testUtils/testWrapper");
12
+
13
+ var _react2 = require("@emotion/react");
14
+
15
+ var getComponent = function getComponent(item) {
16
+ return (0, _testWrapper.render)((0, _react2.jsx)(_NavBarItemBody["default"], {
17
+ item: {
18
+ children: [item]
19
+ }
20
+ }));
21
+ };
22
+
23
+ var SUBTITLE = 'subtitle';
24
+ var TEXT = 'text';
25
+ describe('NavBarItemBody', function () {
26
+ describe('when its passed a component', function () {
27
+ it('renders the component', function () {
28
+ var childItem = (0, _react2.jsx)(_.Text, null, TEXT);
29
+ getComponent(childItem);
30
+ expect(_testWrapper.screen.getByText(TEXT));
31
+ });
32
+ });
33
+ describe('when its passed an object', function () {
34
+ describe('when it has a subTitle', function () {
35
+ it('renders the subTitle and the separator', function () {
36
+ getComponent({
37
+ subTitle: SUBTITLE
38
+ });
39
+ expect(_testWrapper.screen.getByText(SUBTITLE));
40
+ expect(_testWrapper.screen.getByRole('separator'));
41
+ });
42
+ });
43
+ describe('when it has a subTitle and hasSeparator is false', function () {
44
+ it('renders the subTitle and no separator', function () {
45
+ getComponent({
46
+ subTitle: SUBTITLE,
47
+ hasSeparator: false
48
+ });
49
+ expect(_testWrapper.screen.getByText(SUBTITLE));
50
+ expect(_testWrapper.screen.queryByRole('separator')).not.toBeInTheDocument();
51
+ });
52
+ });
53
+ });
54
+ });
@@ -61,8 +61,8 @@ var NavBarSection = function NavBarSection(_ref) {
61
61
  items = _ref.items,
62
62
  others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
63
63
  var ref = (0, _react.useRef)();
64
- var childrenItems = (0, _filter["default"])(items).call(items, function (i) {
65
- return i.children;
64
+ var childrenItems = (0, _filter["default"])(items).call(items, function (item) {
65
+ return item.children;
66
66
  });
67
67
  return (0, _react2.jsx)(_react["default"].Fragment, null, title && (0, _react2.jsx)(_.Text, {
68
68
  variant: "text.navBarSubtitle"
@@ -50,7 +50,6 @@ var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
50
50
 
51
51
  var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
52
52
  mt: '15px',
53
- mb: '15px',
54
53
  ml: '45px',
55
54
  width: 'calc(100% - 60px)',
56
55
  backgroundColor: 'neutral.60'
@@ -88,12 +88,12 @@ export var Sizes = function Sizes() {
88
88
  width: "40%"
89
89
  }, ___EmotionJSX(Text, null, "XS | 21px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
90
90
  fontFamily: "monospace"
91
- }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), ___EmotionJSX(Text, {
91
+ }, " ", "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
92
92
  fontFamily: "monospace"
93
93
  }, "<Icon icon={CreateIcon} size='xs'/>"), ___EmotionJSX(Text, {
94
94
  fontFamily: "monospace"
95
95
  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
96
- "aria-label": "create buton",
96
+ "aria-label": "create button",
97
97
  variant: "inverted",
98
98
  sx: {
99
99
  width: 'unset'
@@ -107,12 +107,12 @@ export var Sizes = function Sizes() {
107
107
  width: "40%"
108
108
  }, ___EmotionJSX(Text, null, "SM | 26px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
109
109
  fontFamily: "monospace"
110
- }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), ___EmotionJSX(Text, {
110
+ }, " ", "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
111
111
  fontFamily: "monospace"
112
112
  }, "<Icon icon={CreateIcon} size='sm'/>"), ___EmotionJSX(Text, {
113
113
  fontFamily: "monospace"
114
114
  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
115
- "aria-label": "create buton",
115
+ "aria-label": "create button",
116
116
  variant: "inverted",
117
117
  sx: {
118
118
  width: 'unset'
@@ -126,12 +126,12 @@ export var Sizes = function Sizes() {
126
126
  width: "40%"
127
127
  }, ___EmotionJSX(Text, null, "MD | 31px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
128
128
  fontFamily: "monospace"
129
- }, " ", "<IconButton aria-label='create buton' variant='inverted'/>"), ___EmotionJSX(Text, {
129
+ }, " ", "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
130
130
  fontFamily: "monospace"
131
131
  }, "<Icon icon={CreateIcon} size='md'/>"), ___EmotionJSX(Text, {
132
132
  fontFamily: "monospace"
133
133
  }, '</IconButton>')), ___EmotionJSX(TableCell, null, ___EmotionJSX(IconButton, {
134
- "aria-label": "create buton",
134
+ "aria-label": "create button",
135
135
  variant: "inverted",
136
136
  sx: {
137
137
  width: 'unset'
@@ -1,23 +1,23 @@
1
1
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
2
2
  import React from 'react';
3
- import GlobeIcon from 'mdi-react/GlobeIcon';
4
- import ViewDashboard from 'mdi-react/ViewDashboardIcon';
5
3
  import AccountMultiple from 'mdi-react/AccountMultipleIcon';
6
- import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
4
+ import Earth from 'mdi-react/EarthIcon';
7
5
  import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
8
6
  import Fingerprint from 'mdi-react/FingerprintIcon';
7
+ import GlobeIcon from 'mdi-react/GlobeIcon';
9
8
  import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
10
- import Earth from 'mdi-react/EarthIcon';
11
- import { Separator, Box, Link, NavBar, NavBarSection, NavBarItemButton, NavBarItemLink, NavBarItem } from '../../index';
9
+ import TransitConnection from 'mdi-react/TransitConnectionVariantIcon';
10
+ import ViewDashboard from 'mdi-react/ViewDashboardIcon';
11
+ import { Box, Link, NavBar, NavBarItem, NavBarItemButton, NavBarItemLink, NavBarSection, Separator } from '../../index';
12
12
  import { jsx as ___EmotionJSX } from "@emotion/react";
13
13
  export default {
14
- title: 'NavBar',
15
14
  component: NavBar,
16
15
  subcomponents: {
17
16
  NavBarSection: NavBarSection,
18
17
  NavBarItemLink: NavBarItemLink,
19
18
  NavBarItemButton: NavBarItemButton
20
- }
19
+ },
20
+ title: 'NavBar'
21
21
  };
22
22
 
23
23
  var Credentials = function Credentials(props) {
@@ -126,36 +126,138 @@ var data = [{
126
126
  id: "Identities Link Users",
127
127
  href: "https://pingidentity.com/"
128
128
  }, "Users"), ___EmotionJSX(NavBarItemLink, {
129
- key: "Identities Link Group",
130
- id: "Identities Link Group",
129
+ key: "Identities Link Groups",
130
+ id: "Identities Link Groups",
131
131
  href: "https://pingidentity.com/"
132
- }, "Group")]
132
+ }, "Groups"), ___EmotionJSX(NavBarItemLink, {
133
+ key: "Identities Link Populations",
134
+ id: "Identities Link Populations",
135
+ href: "https://pingidentity.com/"
136
+ }, "Populations"), ___EmotionJSX(NavBarItemLink, {
137
+ key: "Identities Link Attributes",
138
+ id: "Identities Link Attributes",
139
+ href: "https://pingidentity.com/"
140
+ }, "Attributes"), ___EmotionJSX(NavBarItemLink, {
141
+ key: "Identities Link Roles",
142
+ id: "Identities Link Roles",
143
+ href: "https://pingidentity.com/"
144
+ }, "Roles")]
133
145
  }, {
134
146
  icon: TransitConnection,
135
147
  key: 'Connections',
136
148
  heading: 'Connections',
137
- children: [___EmotionJSX(NavBarItemLink, {
138
- key: "Connection Link Users",
139
- id: "Connection Link Users",
149
+ children: [{
150
+ hasSeparator: false,
151
+ subTitle: 'Applications'
152
+ }, ___EmotionJSX(NavBarItemLink, {
153
+ key: "Connections Applications",
154
+ id: "Connections Applications",
140
155
  href: "https://pingidentity.com/"
141
- }, "Users"), ___EmotionJSX(NavBarItemLink, {
142
- key: "Connections Link Group",
143
- id: "Connections Link Group",
156
+ }, "Applications"), ___EmotionJSX(NavBarItemLink, {
157
+ key: "Connections Application Catalog",
158
+ id: "Connections Application Catalog",
144
159
  href: "https://pingidentity.com/"
145
- }, "Group")]
160
+ }, "Application Catalog"), ___EmotionJSX(NavBarItemLink, {
161
+ key: "Connections Application Portal",
162
+ id: "Connections Application Portal",
163
+ href: "https://pingidentity.com/"
164
+ }, "Application Portal"), {
165
+ subTitle: 'Identity Providers'
166
+ }, ___EmotionJSX(NavBarItemLink, {
167
+ key: "Connections External IDPs",
168
+ id: "Connections External IDPs",
169
+ href: "https://pingidentity.com/"
170
+ }, "External IDPs"), {
171
+ subTitle: 'Ping Products'
172
+ }, ___EmotionJSX(NavBarItemLink, {
173
+ key: "Connections PingFederate",
174
+ id: "Connections PingFederate",
175
+ href: "https://pingidentity.com/"
176
+ }, "PingFederate"), ___EmotionJSX(NavBarItemLink, {
177
+ key: "Connections PingIntelligence",
178
+ id: "Connections PingIntelligence",
179
+ href: "https://pingidentity.com/"
180
+ }, "PingIntelligence"), ___EmotionJSX(Separator, {
181
+ variant: "separator.navBarSubtitleSeparator"
182
+ }), ___EmotionJSX(NavBarItemLink, {
183
+ key: "Connections Provisioning",
184
+ id: "Connections Provisioning",
185
+ href: "https://pingidentity.com/"
186
+ }, "Provisioning"), ___EmotionJSX(NavBarItemLink, {
187
+ key: "Connections WebHooks",
188
+ id: "Connections WebHooks",
189
+ href: "https://pingidentity.com/"
190
+ }, "WebHooks"), ___EmotionJSX(NavBarItemLink, {
191
+ key: "Connections Gateways",
192
+ id: "Connections Gateways",
193
+ href: "https://pingidentity.com/"
194
+ }, "Gateways"), ___EmotionJSX(NavBarItemLink, {
195
+ key: "Connections Certificates & Key Pairs",
196
+ id: "Connections Certificates & Key Pairs",
197
+ href: "https://pingidentity.com/"
198
+ }, "Certificates & Key Pairs"), ___EmotionJSX(NavBarItemLink, {
199
+ key: "Connections Resources",
200
+ id: "Connections Resources",
201
+ href: "https://pingidentity.com/"
202
+ }, "Resources")]
146
203
  }, {
147
204
  icon: EmoticonHappy,
148
205
  key: 'Experiences',
149
206
  heading: 'Experiences',
150
- children: [___EmotionJSX(NavBarItemLink, {
151
- key: "Experiences Link Attributes",
152
- id: "Experiences Link Attributes",
207
+ children: [{
208
+ hasSeparator: false,
209
+ subTitle: 'Policies'
210
+ }, ___EmotionJSX(NavBarItemLink, {
211
+ key: "Experiences Authentication",
212
+ id: "Experiences Authentication",
153
213
  href: "https://pingidentity.com/"
154
- }, "Attributes"), ___EmotionJSX(NavBarItemLink, {
155
- key: "Experiences Link Roles",
156
- id: "Experiences Link Roles",
214
+ }, "Authentication"), ___EmotionJSX(NavBarItemLink, {
215
+ key: "Experiences MFA",
216
+ id: "Experiences MFA",
157
217
  href: "https://pingidentity.com/"
158
- }, "Roles")]
218
+ }, "MFA"), ___EmotionJSX(NavBarItemLink, {
219
+ key: "Experiences Password",
220
+ id: "Experiences Password",
221
+ href: "https://pingidentity.com/"
222
+ }, "Password"), ___EmotionJSX(Separator, {
223
+ variant: "separator.navBarSubtitleSeparator"
224
+ }), ___EmotionJSX(NavBarItemLink, {
225
+ key: "Experiences Risk",
226
+ id: "Experiences Risk",
227
+ href: "https://pingidentity.com/"
228
+ }, "Risk"), ___EmotionJSX(NavBarItemLink, {
229
+ key: "Experiences Flows",
230
+ id: "Experiences Flows",
231
+ href: "https://pingidentity.com/"
232
+ }, "Flows"), ___EmotionJSX(NavBarItemLink, {
233
+ key: "Experiences Forms",
234
+ id: "Experiences Forms",
235
+ href: "https://pingidentity.com/"
236
+ }, "Forms"), ___EmotionJSX(NavBarItemLink, {
237
+ key: "Experiences Languages",
238
+ id: "Experiences Languages",
239
+ href: "https://pingidentity.com/"
240
+ }, "Languages"), ___EmotionJSX(NavBarItemLink, {
241
+ key: "Experiences Agreements",
242
+ id: "Experiences Agreements",
243
+ href: "https://pingidentity.com/"
244
+ }, "Agreements"), ___EmotionJSX(NavBarItemLink, {
245
+ key: "Experiences Branding & Themes",
246
+ id: "Experiences Branding & Themes",
247
+ href: "https://pingidentity.com/"
248
+ }, "Branding & Themes"), ___EmotionJSX(NavBarItemLink, {
249
+ key: "Experiences Notifications",
250
+ id: "Experiences Notifications",
251
+ href: "https://pingidentity.com/"
252
+ }, "Notifications"), ___EmotionJSX(NavBarItemLink, {
253
+ key: "Experiences Vanity Domains",
254
+ id: "Experiences Vanity Domains",
255
+ href: "https://pingidentity.com/"
256
+ }, "Vanity Domains"), ___EmotionJSX(NavBarItemLink, {
257
+ key: "Experiences Sender",
258
+ id: "Experiences Sender",
259
+ href: "https://pingidentity.com/"
260
+ }, "Sender")]
159
261
  }];
160
262
  var secondData = [{
161
263
  icon: Fingerprint,
@@ -165,7 +267,7 @@ var secondData = [{
165
267
  id: "MFA Button Users",
166
268
  key: "MFA Button Users"
167
269
  }, "Users"), {
168
- isSubTitle: true,
270
+ hasSeparator: false,
169
271
  subTitle: 'PingOne Services'
170
272
  }, ___EmotionJSX(NavBarItemButton, {
171
273
  key: "MFA Button Group",
@@ -179,7 +281,7 @@ var secondData = [{
179
281
  key: "Risk Button Users",
180
282
  id: "Risk Button Users"
181
283
  }, "Users"), {
182
- isSubTitle: true,
284
+ hasSeparator: false,
183
285
  subTitle: 'PingOne Services'
184
286
  }, ___EmotionJSX(NavBarItemButton, {
185
287
  key: "Risk Button Group",
@@ -193,7 +295,7 @@ var secondData = [{
193
295
  key: "Verify Button Users",
194
296
  id: "Verify Button Users"
195
297
  }, "Users"), {
196
- isSubTitle: true,
298
+ hasSeparator: false,
197
299
  subTitle: 'PingOne Services'
198
300
  }, ___EmotionJSX(NavBarItemButton, {
199
301
  key: "Verify Button Group",
@@ -207,7 +309,7 @@ var secondData = [{
207
309
  key: "Credentials Button Users",
208
310
  id: "Credentials Button Users"
209
311
  }, "Users"), {
210
- isSubTitle: true,
312
+ hasSeparator: false,
211
313
  subTitle: 'PingOne Services'
212
314
  }, ___EmotionJSX(NavBarItemButton, {
213
315
  key: "Credentials Button Group",
@@ -9,10 +9,10 @@ import EmoticonHappy from 'mdi-react/EmoticonHappyOutlineIcon';
9
9
  import Fingerprint from 'mdi-react/FingerprintIcon';
10
10
  import ScaleBalance from 'mdi-react/ScaleBalanceIcon';
11
11
  import Verify from 'mdi-react/VerifiedIcon';
12
+ import { Box, NavBarSection, NavBarItem, NavBarItemButton, NavBarItemLink, Link, Button } from '../../';
12
13
  import NavBar from './NavBar';
13
14
  import axeTest from '../../utils/testUtils/testAxe';
14
15
  import { render, screen, fireEvent } from '../../utils/testUtils/testWrapper';
15
- import { Box, NavBarSection, NavBarItem, NavBarItemButton, NavBarItemLink, Link, Button } from '../../index';
16
16
  import { jsx as ___EmotionJSX } from "@emotion/react";
17
17
  var DATA_ID = 'data-id';
18
18
  var data = [{
@@ -6,39 +6,48 @@ import PropTypes from 'prop-types';
6
6
  import { Separator, Box, Text } from '../../index';
7
7
  import { jsx as ___EmotionJSX } from "@emotion/react";
8
8
 
9
- var NavBarItemBody = function NavBarItemBody(props) {
9
+ var NavBarItemBody = function NavBarItemBody(_ref) {
10
10
  var _context;
11
11
 
12
- var item = props.item,
13
- onKeyDown = props.onKeyDown;
14
- return ___EmotionJSX(Box, {
15
- sx: {
16
- alignItems: 'flex-start',
17
- mb: '15px'
18
- }
19
- }, _mapInstanceProperty(_context = item.children).call(_context, function (child) {
20
- return child.subTitle ? ___EmotionJSX(Fragment, {
21
- key: "fragment".concat(child.subTitle)
22
- }, ___EmotionJSX(Separator, {
23
- variant: "separator.navBarSubtitleSeparator",
24
- key: "separator".concat(child.subTitle)
12
+ var item = _ref.item,
13
+ onKeyDown = _ref.onKeyDown;
14
+
15
+ var renderSubTitle = function renderSubTitle(child) {
16
+ var hasSeparator = child.hasSeparator,
17
+ subTitle = child.subTitle;
18
+ return ___EmotionJSX(Fragment, {
19
+ key: "fragment".concat(subTitle)
20
+ }, (hasSeparator || hasSeparator === undefined) && ___EmotionJSX(Separator, {
21
+ variant: "separator.navBarSubtitleSeparator"
25
22
  }), ___EmotionJSX(Text, {
26
- key: "text".concat(child.subTitle),
27
- variant: "text.navBarSubtitle",
23
+ key: "text".concat(subTitle),
28
24
  sx: {
29
- mb: '10px',
30
- ml: '45px'
31
- }
32
- }, child.subTitle)) : ___EmotionJSX(ChildItemWrapper, {
25
+ mb: 'sm',
26
+ ml: '45px',
27
+ mt: 'md'
28
+ },
29
+ variant: "text.navBarSubtitle"
30
+ }, subTitle));
31
+ };
32
+
33
+ var renderChild = function renderChild(child) {
34
+ return child.subTitle ? renderSubTitle(child) : ___EmotionJSX(ChildItemWrapper, {
33
35
  onKeyDown: onKeyDown,
34
36
  key: "item".concat(child.key || child)
35
37
  }, child);
36
- }));
38
+ };
39
+
40
+ return ___EmotionJSX(Box, {
41
+ sx: {
42
+ alignItems: 'flex-start',
43
+ mb: '15px'
44
+ }
45
+ }, _mapInstanceProperty(_context = item.children).call(_context, renderChild));
37
46
  };
38
47
 
39
- var ChildItemWrapper = function ChildItemWrapper(props) {
40
- var children = props.children,
41
- _onKeyDown = props.onKeyDown;
48
+ var ChildItemWrapper = function ChildItemWrapper(_ref2) {
49
+ var children = _ref2.children,
50
+ _onKeyDown = _ref2.onKeyDown;
42
51
  var childrenKey = children.key || children;
43
52
 
44
53
  var _useKeyboard = useKeyboard({
@@ -0,0 +1,47 @@
1
+ import React from 'react';
2
+ import NavBarItemBody from './NavBarItemBody';
3
+ import { Text } from '../../';
4
+ import { render, screen } from '../../utils/testUtils/testWrapper';
5
+ import { jsx as ___EmotionJSX } from "@emotion/react";
6
+
7
+ var getComponent = function getComponent(item) {
8
+ return render(___EmotionJSX(NavBarItemBody, {
9
+ item: {
10
+ children: [item]
11
+ }
12
+ }));
13
+ };
14
+
15
+ var SUBTITLE = 'subtitle';
16
+ var TEXT = 'text';
17
+ describe('NavBarItemBody', function () {
18
+ describe('when its passed a component', function () {
19
+ it('renders the component', function () {
20
+ var childItem = ___EmotionJSX(Text, null, TEXT);
21
+
22
+ getComponent(childItem);
23
+ expect(screen.getByText(TEXT));
24
+ });
25
+ });
26
+ describe('when its passed an object', function () {
27
+ describe('when it has a subTitle', function () {
28
+ it('renders the subTitle and the separator', function () {
29
+ getComponent({
30
+ subTitle: SUBTITLE
31
+ });
32
+ expect(screen.getByText(SUBTITLE));
33
+ expect(screen.getByRole('separator'));
34
+ });
35
+ });
36
+ describe('when it has a subTitle and hasSeparator is false', function () {
37
+ it('renders the subTitle and no separator', function () {
38
+ getComponent({
39
+ subTitle: SUBTITLE,
40
+ hasSeparator: false
41
+ });
42
+ expect(screen.getByText(SUBTITLE));
43
+ expect(screen.queryByRole('separator')).not.toBeInTheDocument();
44
+ });
45
+ });
46
+ });
47
+ });
@@ -28,8 +28,8 @@ var NavBarSection = function NavBarSection(_ref) {
28
28
 
29
29
  var ref = useRef();
30
30
 
31
- var childrenItems = _filterInstanceProperty(items).call(items, function (i) {
32
- return i.children;
31
+ var childrenItems = _filterInstanceProperty(items).call(items, function (item) {
32
+ return item.children;
33
33
  });
34
34
 
35
35
  return ___EmotionJSX(React.Fragment, null, title && ___EmotionJSX(Text, {
@@ -32,7 +32,6 @@ var navBarSeparator = _objectSpread(_objectSpread({}, base), {}, {
32
32
 
33
33
  var navBarSubtitleSeparator = _objectSpread(_objectSpread({}, base), {}, {
34
34
  mt: '15px',
35
- mb: '15px',
36
35
  ml: '45px',
37
36
  width: 'calc(100% - 60px)',
38
37
  backgroundColor: 'neutral.60'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "1.35.0-alpha.0",
3
+ "version": "1.35.0-alpha.2",
4
4
  "description": "PingUX themeable React component library",
5
5
  "repository": {
6
6
  "type": "git",