@pingux/astro 2.27.1-alpha.0 → 2.27.1-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 (5) hide show
  1. package/lib/cjs/recipes/TrialExperienceStatusBar.stories.js +66 -95
  2. package/lib/cjs/utils/designUtils/figmaLinks.js +3 -0
  3. package/lib/recipes/TrialExperienceStatusBar.stories.js +64 -94
  4. package/lib/utils/designUtils/figmaLinks.js +3 -0
  5. package/package.json +1 -1
package/lib/cjs/recipes/TrialExperienceStatusBar.stories.js CHANGED
@@ -1,35 +1,24 @@
1
1
  "use strict";
2
2
 
3
3
  var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
4
- var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
5
- var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
6
- var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
7
- var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
8
- var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
9
- var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
10
- var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
11
- var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
12
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");
13
7
  var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
14
8
  _Object$defineProperty(exports, "__esModule", {
15
9
  value: true
16
10
  });
17
11
  exports["default"] = exports.Default = void 0;
18
- var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
19
- var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
20
- var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
21
12
  var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
22
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
23
13
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
24
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
25
15
  var _react = _interopRequireWildcard(require("react"));
26
16
  var _CheckCircleIcon = _interopRequireDefault(require("@pingux/mdi-react/CheckCircleIcon"));
27
17
  var _index = require("../index");
18
+ var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
28
19
  var _react2 = require("@emotion/react");
29
20
  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); }
30
21
  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; }
31
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
32
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
33
22
  var _default = {
34
23
  title: 'Recipes/Trial Experience Nav'
35
24
  };
@@ -79,36 +68,53 @@ var EarthCircleIcon = function EarthCircleIcon() {
79
68
  };
80
69
  var RadioButtonIcon = function RadioButtonIcon(props) {
81
70
  return (0, _react2.jsx)("svg", (0, _extends2["default"])({
82
- "data-name": "Layer 1",
71
+ viewBox: "0 0 22 22",
72
+ fill: "none",
83
73
  xmlns: "http://www.w3.org/2000/svg",
84
- viewBox: "0 0 17.5 17.5",
85
74
  "aria-labelledby": "radio-button-icon-title"
86
75
  }, props), (0, _react2.jsx)("title", {
87
76
  id: "radio-button-icon-title"
88
77
  }, "Radio Button Icon"), (0, _react2.jsx)("path", {
89
- className: "cls-1",
90
- fill: "#B3BEE8",
91
- d: "M9,18.25A8.75,8.75,0,1,1,17.75,9.5,8.76,8.76,0,0,1,9,18.25ZM9,1.75A7.75,7.75,0,1,0,16.75,9.5,7.76,7.76,0,0,0,9,1.75Z",
92
- transform: "translate(-0.25 -0.75)"
78
+ d: "M11 18.3333C9.05508 18.3333 7.18982 17.5607 5.81455 16.1854C4.43928 14.8102 3.66667 12.9449 3.66667 11C3.66667 9.05507 4.43928 7.18981 5.81455 5.81455C7.18982 4.43928 9.05508 3.66666 11 3.66666C12.9449 3.66666 14.8102 4.43928 16.1854 5.81455C17.5607 7.18981 18.3333 9.05507 18.3333 11C18.3333 12.9449 17.5607 14.8102 16.1854 16.1854C14.8102 17.5607 12.9449 18.3333 11 18.3333ZM11 1.83333C9.79621 1.83333 8.60422 2.07043 7.49207 2.5311C6.37992 2.99177 5.36939 3.66698 4.51819 4.51818C2.7991 6.23727 1.83333 8.56884 1.83333 11C1.83333 13.4311 2.7991 15.7627 4.51819 17.4818C5.36939 18.333 6.37992 19.0082 7.49207 19.4689C8.60422 19.9296 9.79621 20.1667 11 20.1667C13.4311 20.1667 15.7627 19.2009 17.4818 17.4818C19.2009 15.7627 20.1667 13.4311 20.1667 11C20.1667 9.79621 19.9296 8.60421 19.4689 7.49206C19.0082 6.37991 18.333 5.36939 17.4818 4.51818C16.6306 3.66698 15.6201 2.99177 14.5079 2.5311C13.3958 2.07043 12.2038 1.83333 11 1.83333Z",
79
+ fill: "#B3BEE8"
93
80
  }), (0, _react2.jsx)("circle", {
94
- className: "cls-2",
95
- cx: "8.75",
96
- cy: "8.75",
97
- r: "8.05",
81
+ cx: "11",
82
+ cy: "11",
83
+ r: "8",
98
84
  fill: "white"
99
85
  }));
100
86
  };
87
+ var IntegrateYourAppIcon = function IntegrateYourAppIcon(props) {
88
+ return (0, _react2.jsx)("svg", (0, _extends2["default"])({
89
+ width: "24",
90
+ height: "24",
91
+ viewBox: "0 0 24 24",
92
+ fill: "none",
93
+ xmlns: "http://www.w3.org/2000/svg",
94
+ "aria-labelledby": "integrate-your-app-icon-title"
95
+ }, props), (0, _react2.jsx)("title", {
96
+ id: "integrate-your-app-icon-title"
97
+ }, "Integrate Your App Icon"), (0, _react2.jsx)("path", {
98
+ d: "M2 5H5V8H2V5ZM8.98124 9.18922C8.40906 8.51487 7.5878 8 6 8V5C8.4122 5 10.0909 5.86013 11.2688 7.24828C12.3198 8.48703 12.8987 10.0806 13.3691 11.3758L13.4097 11.4874C13.9318 12.9231 14.3502 14.0229 15.0188 14.8108C15.5909 15.4851 16.4122 16 18 16V19H6V16H11.0563C10.9745 15.8905 10.8976 15.7846 10.8245 15.6841L10.7869 15.6323C10.2778 14.9323 9.93844 14.4905 9.36346 14.1517C8.79448 13.8164 7.83564 13.5 6 13.5V10.5C7.7039 10.5 9.02155 10.73 10.0813 11.1674C9.7558 10.3671 9.42315 9.71004 8.98124 9.18922ZM5 10.5H2V13.5H5V10.5ZM2 16H5V19H2V16ZM22 16H19V19H22V16Z",
99
+ fill: "#FF8324"
100
+ }));
101
+ };
101
102
  var data = [{
102
103
  title: 'Design a Solution',
103
104
  icon: ArtIcon,
104
105
  iconTitle: 'Art Icon',
105
106
  key: 0,
106
107
  links: [{
108
+ isLinkSelected: true,
107
109
  title: 'Registration'
108
110
  }, {
111
+ isLinkSelected: true,
109
112
  title: 'Authentication'
110
113
  }, {
114
+ isLinkSelected: true,
111
115
  title: 'Profile management'
116
+ }, {
117
+ title: 'Account recovery'
112
118
  }, {
113
119
  title: 'Experience your solution'
114
120
  }]
@@ -132,6 +138,9 @@ var data = [{
132
138
  iconTitle: 'Earth Circle Icon',
133
139
  key: 2,
134
140
  links: [{
141
+ customIcon: IntegrateYourAppIcon,
142
+ title: 'Integrate your app'
143
+ }, {
135
144
  title: 'Learn about DaVinci'
136
145
  }, {
137
146
  title: 'View a workflow'
@@ -144,7 +153,11 @@ var sx = {
144
153
  justifyContent: 'center',
145
154
  mr: 'sm',
146
155
  borderRadius: '50%',
147
- zIndex: 3
156
+ zIndex: 3,
157
+ '& > svg ': {
158
+ width: '28px',
159
+ height: '28px'
160
+ }
148
161
  },
149
162
  headingSeparator: {
150
163
  flexGrow: 1,
@@ -159,7 +172,7 @@ var sx = {
159
172
  color: 'accent.30',
160
173
  lineHeight: '18px',
161
174
  fontWeight: '3',
162
- m: '12px 0px 28px 5px',
175
+ m: '12px 0px 28px 0px',
163
176
  maxWidth: '195px'
164
177
  },
165
178
  linkRowIconButton: {
@@ -187,19 +200,12 @@ var sx = {
187
200
  fill: 'accent.80'
188
201
  }
189
202
  },
190
- linkRowSeparator: {
191
- flexGrow: 1,
192
- backgroundColor: 'accent.30',
193
- width: '1px !important',
194
- zIndex: 2,
195
- m: '-4px 5px -5px 11.5px !important'
196
- },
197
203
  linkRowText: {
198
204
  fontSize: 'md',
199
205
  color: '#163CE3',
200
206
  lineHeight: '18px',
201
207
  fontWeight: '0',
202
- m: '3px 0px 20px 10px',
208
+ m: '3px 0px 15px 10px',
203
209
  maxWidth: '140px'
204
210
  },
205
211
  container: {
@@ -217,26 +223,11 @@ var Stage = function Stage(_ref) {
217
223
  iconTitle = _ref.iconTitle,
218
224
  links = _ref.links,
219
225
  isLastStage = _ref.isLastStage;
220
- var _useState = (0, _react.useState)([]),
221
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
222
- selectedLinks = _useState2[0],
223
- updateSelectedLinks = _useState2[1];
224
- var onSelectionChange = function onSelectionChange(thisIndex) {
225
- var _context2;
226
- var newArray = [];
227
- if ((0, _includes["default"])(selectedLinks).call(selectedLinks, thisIndex)) {
228
- newArray = (0, _filter["default"])(selectedLinks).call(selectedLinks, function (link) {
229
- return link !== thisIndex;
230
- });
231
- } else {
232
- var _context;
233
- newArray = (0, _concat["default"])(_context = []).call(_context, selectedLinks, [thisIndex]);
234
- }
235
- updateSelectedLinks((0, _concat["default"])(_context2 = []).call(_context2, newArray));
236
- };
237
226
  return (0, _react2.jsx)(_index.Box, {
238
227
  isRow: true
239
- }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
228
+ }, (0, _react2.jsx)(_index.Box, {
229
+ mr: "xs"
230
+ }, (0, _react2.jsx)(_index.Box, {
240
231
  minWidth: "39.5px",
241
232
  minHeight: "39.5px",
242
233
  sx: sx.iconContainer
@@ -246,7 +237,7 @@ var Stage = function Stage(_ref) {
246
237
  name: iconTitle
247
238
  },
248
239
  color: "accent.40",
249
- size: "24px",
240
+ size: "15px",
250
241
  sx: {
251
242
  zIndex: 3
252
243
  }
@@ -258,66 +249,40 @@ var Stage = function Stage(_ref) {
258
249
  }, title), (0, _react2.jsx)(_index.Box, {
259
250
  pl: "0px",
260
251
  mb: "25px"
261
- }, (0, _map["default"])(links).call(links, function (link, index) {
252
+ }, (0, _map["default"])(links).call(links, function (link) {
262
253
  return (0, _react2.jsx)(LinkRow, (0, _extends2["default"])({}, link, {
263
- onSelectionChange: onSelectionChange,
264
- index: index,
265
- isLinkSelected: selectedLinks.length !== 0,
266
- isLastLink: index === links.length - 1,
267
254
  key: link.title
268
255
  }));
269
256
  }))));
270
257
  };
271
258
  var LinkRow = function LinkRow(_ref2) {
272
- var index = _ref2.index,
273
- isLastLink = _ref2.isLastLink,
259
+ var title = _ref2.title,
274
260
  isLinkSelected = _ref2.isLinkSelected,
275
- onSelectionChange = _ref2.onSelectionChange,
276
- title = _ref2.title;
277
- var _useState3 = (0, _react.useState)(false),
278
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
279
- isSelected = _useState4[0],
280
- handleSelectionChange = _useState4[1];
281
- var _useState5 = (0, _react.useState)(0),
282
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
283
- verticalSeparatorHeight = _useState6[0],
284
- setVerticalSeparatorHeight = _useState6[1];
285
- var iconRef = (0, _react.useRef)();
286
- var rowRef = (0, _react.useRef)();
287
- (0, _react.useEffect)(function () {
288
- var _rowRef$current$getBo = rowRef.current.getBoundingClientRect(),
289
- height = _rowRef$current$getBo.height;
290
- var _iconRef$current$getB = iconRef.current.getBoundingClientRect(),
291
- iconRefHeight = _iconRef$current$getB.height;
292
- var marginAccommodation = 4;
293
- var halfIconHeight = iconRefHeight / 2;
294
- setVerticalSeparatorHeight(height - halfIconHeight - marginAccommodation);
295
- }, [iconRef, rowRef]);
261
+ customIcon = _ref2.customIcon;
262
+ var _useState = (0, _react.useState)(isLinkSelected),
263
+ _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
264
+ isSelected = _useState2[0],
265
+ handleSelectionChange = _useState2[1];
296
266
  var onIconPress = function onIconPress() {
297
267
  handleSelectionChange(!isSelected);
298
- onSelectionChange(index);
299
268
  };
300
269
  return (0, _react2.jsx)(_index.Box, {
301
- isRow: true,
302
- ref: rowRef
303
- }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
270
+ isRow: true
271
+ }, (0, _react2.jsx)(_index.Box, null, customIcon ? (0, _react2.jsx)(_index.Icon, {
272
+ icon: customIcon,
273
+ size: "22px"
274
+ }) : (0, _react2.jsx)(_index.IconButton, {
304
275
  "aria-label": "completed step icon indicator",
305
276
  onPress: onIconPress,
306
- ref: iconRef,
307
277
  sx: sx.linkRowIconButton
308
278
  }, (0, _react2.jsx)(_index.Icon, {
309
279
  icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
310
- size: "sm",
311
- sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected,
280
+ size: "22px",
281
+ sx: isSelected ? sx.linkRowIconSelected : sx.linkRowIconNotSelected,
312
282
  title: {
313
283
  name: 'Check Circle Icon'
314
284
  }
315
- })), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
316
- orientation: "vertical",
317
- sx: _objectSpread(_objectSpread({}, sx.linkRowSeparator), {}, {
318
- maxHeight: verticalSeparatorHeight
319
- })
320
- })), (0, _react2.jsx)(_index.Link, {
285
+ }))), (0, _react2.jsx)(_index.Link, {
321
286
  href: "https://www.pingidentity.com",
322
287
  sx: sx.linkRowText,
323
288
  target: "_blank"
@@ -341,4 +306,10 @@ var Default = function Default() {
341
306
  });
342
307
  })));
343
308
  };
344
- exports.Default = Default;
309
+ exports.Default = Default;
310
+ Default.parameters = {
311
+ design: {
312
+ type: 'figma',
313
+ url: _figmaLinks.FIGMA_LINKS.trialExperienceNav["default"]
314
+ }
315
+ };
package/lib/cjs/utils/designUtils/figmaLinks.js CHANGED
@@ -121,6 +121,9 @@ var FIGMA_LINKS = {
121
121
  slider: {
122
122
  "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43112%3A1773&mode=dev'
123
123
  },
124
+ trialExperienceNav: {
125
+ "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43368%3A159&mode=dev'
126
+ },
124
127
  trialExperienceButtons: {
125
128
  "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43369%3A445'
126
129
  },
package/lib/recipes/TrialExperienceStatusBar.stories.js CHANGED
@@ -1,22 +1,10 @@
1
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
2
1
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
3
2
  import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
4
- function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
5
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
6
- import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
7
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
8
- import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
9
3
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
10
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
11
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
12
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
13
- import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
14
- import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
15
- import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
16
- import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
17
- import React, { useEffect, useRef, useState } from 'react';
4
+ import React, { useState } from 'react';
18
5
  import CheckCircleIcon from '@pingux/mdi-react/CheckCircleIcon';
19
6
  import { Box, Icon, IconButton, Link, Separator, Text } from '../index';
7
+ import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
20
8
  import { jsx as ___EmotionJSX } from "@emotion/react";
21
9
  export default {
22
10
  title: 'Recipes/Trial Experience Nav'
@@ -66,36 +54,53 @@ var EarthCircleIcon = function EarthCircleIcon() {
66
54
  };
67
55
  var RadioButtonIcon = function RadioButtonIcon(props) {
68
56
  return ___EmotionJSX("svg", _extends({
69
- "data-name": "Layer 1",
57
+ viewBox: "0 0 22 22",
58
+ fill: "none",
70
59
  xmlns: "http://www.w3.org/2000/svg",
71
- viewBox: "0 0 17.5 17.5",
72
60
  "aria-labelledby": "radio-button-icon-title"
73
61
  }, props), ___EmotionJSX("title", {
74
62
  id: "radio-button-icon-title"
75
63
  }, "Radio Button Icon"), ___EmotionJSX("path", {
76
- className: "cls-1",
77
- fill: "#B3BEE8",
78
- d: "M9,18.25A8.75,8.75,0,1,1,17.75,9.5,8.76,8.76,0,0,1,9,18.25ZM9,1.75A7.75,7.75,0,1,0,16.75,9.5,7.76,7.76,0,0,0,9,1.75Z",
79
- transform: "translate(-0.25 -0.75)"
64
+ d: "M11 18.3333C9.05508 18.3333 7.18982 17.5607 5.81455 16.1854C4.43928 14.8102 3.66667 12.9449 3.66667 11C3.66667 9.05507 4.43928 7.18981 5.81455 5.81455C7.18982 4.43928 9.05508 3.66666 11 3.66666C12.9449 3.66666 14.8102 4.43928 16.1854 5.81455C17.5607 7.18981 18.3333 9.05507 18.3333 11C18.3333 12.9449 17.5607 14.8102 16.1854 16.1854C14.8102 17.5607 12.9449 18.3333 11 18.3333ZM11 1.83333C9.79621 1.83333 8.60422 2.07043 7.49207 2.5311C6.37992 2.99177 5.36939 3.66698 4.51819 4.51818C2.7991 6.23727 1.83333 8.56884 1.83333 11C1.83333 13.4311 2.7991 15.7627 4.51819 17.4818C5.36939 18.333 6.37992 19.0082 7.49207 19.4689C8.60422 19.9296 9.79621 20.1667 11 20.1667C13.4311 20.1667 15.7627 19.2009 17.4818 17.4818C19.2009 15.7627 20.1667 13.4311 20.1667 11C20.1667 9.79621 19.9296 8.60421 19.4689 7.49206C19.0082 6.37991 18.333 5.36939 17.4818 4.51818C16.6306 3.66698 15.6201 2.99177 14.5079 2.5311C13.3958 2.07043 12.2038 1.83333 11 1.83333Z",
65
+ fill: "#B3BEE8"
80
66
  }), ___EmotionJSX("circle", {
81
- className: "cls-2",
82
- cx: "8.75",
83
- cy: "8.75",
84
- r: "8.05",
67
+ cx: "11",
68
+ cy: "11",
69
+ r: "8",
85
70
  fill: "white"
86
71
  }));
87
72
  };
73
+ var IntegrateYourAppIcon = function IntegrateYourAppIcon(props) {
74
+ return ___EmotionJSX("svg", _extends({
75
+ width: "24",
76
+ height: "24",
77
+ viewBox: "0 0 24 24",
78
+ fill: "none",
79
+ xmlns: "http://www.w3.org/2000/svg",
80
+ "aria-labelledby": "integrate-your-app-icon-title"
81
+ }, props), ___EmotionJSX("title", {
82
+ id: "integrate-your-app-icon-title"
83
+ }, "Integrate Your App Icon"), ___EmotionJSX("path", {
84
+ d: "M2 5H5V8H2V5ZM8.98124 9.18922C8.40906 8.51487 7.5878 8 6 8V5C8.4122 5 10.0909 5.86013 11.2688 7.24828C12.3198 8.48703 12.8987 10.0806 13.3691 11.3758L13.4097 11.4874C13.9318 12.9231 14.3502 14.0229 15.0188 14.8108C15.5909 15.4851 16.4122 16 18 16V19H6V16H11.0563C10.9745 15.8905 10.8976 15.7846 10.8245 15.6841L10.7869 15.6323C10.2778 14.9323 9.93844 14.4905 9.36346 14.1517C8.79448 13.8164 7.83564 13.5 6 13.5V10.5C7.7039 10.5 9.02155 10.73 10.0813 11.1674C9.7558 10.3671 9.42315 9.71004 8.98124 9.18922ZM5 10.5H2V13.5H5V10.5ZM2 16H5V19H2V16ZM22 16H19V19H22V16Z",
85
+ fill: "#FF8324"
86
+ }));
87
+ };
88
88
  var data = [{
89
89
  title: 'Design a Solution',
90
90
  icon: ArtIcon,
91
91
  iconTitle: 'Art Icon',
92
92
  key: 0,
93
93
  links: [{
94
+ isLinkSelected: true,
94
95
  title: 'Registration'
95
96
  }, {
97
+ isLinkSelected: true,
96
98
  title: 'Authentication'
97
99
  }, {
100
+ isLinkSelected: true,
98
101
  title: 'Profile management'
102
+ }, {
103
+ title: 'Account recovery'
99
104
  }, {
100
105
  title: 'Experience your solution'
101
106
  }]
@@ -119,6 +124,9 @@ var data = [{
119
124
  iconTitle: 'Earth Circle Icon',
120
125
  key: 2,
121
126
  links: [{
127
+ customIcon: IntegrateYourAppIcon,
128
+ title: 'Integrate your app'
129
+ }, {
122
130
  title: 'Learn about DaVinci'
123
131
  }, {
124
132
  title: 'View a workflow'
@@ -131,7 +139,11 @@ var sx = {
131
139
  justifyContent: 'center',
132
140
  mr: 'sm',
133
141
  borderRadius: '50%',
134
- zIndex: 3
142
+ zIndex: 3,
143
+ '& > svg ': {
144
+ width: '28px',
145
+ height: '28px'
146
+ }
135
147
  },
136
148
  headingSeparator: {
137
149
  flexGrow: 1,
@@ -146,7 +158,7 @@ var sx = {
146
158
  color: 'accent.30',
147
159
  lineHeight: '18px',
148
160
  fontWeight: '3',
149
- m: '12px 0px 28px 5px',
161
+ m: '12px 0px 28px 0px',
150
162
  maxWidth: '195px'
151
163
  },
152
164
  linkRowIconButton: {
@@ -174,19 +186,12 @@ var sx = {
174
186
  fill: 'accent.80'
175
187
  }
176
188
  },
177
- linkRowSeparator: {
178
- flexGrow: 1,
179
- backgroundColor: 'accent.30',
180
- width: '1px !important',
181
- zIndex: 2,
182
- m: '-4px 5px -5px 11.5px !important'
183
- },
184
189
  linkRowText: {
185
190
  fontSize: 'md',
186
191
  color: '#163CE3',
187
192
  lineHeight: '18px',
188
193
  fontWeight: '0',
189
- m: '3px 0px 20px 10px',
194
+ m: '3px 0px 15px 10px',
190
195
  maxWidth: '140px'
191
196
  },
192
197
  container: {
@@ -204,26 +209,11 @@ var Stage = function Stage(_ref) {
204
209
  iconTitle = _ref.iconTitle,
205
210
  links = _ref.links,
206
211
  isLastStage = _ref.isLastStage;
207
- var _useState = useState([]),
208
- _useState2 = _slicedToArray(_useState, 2),
209
- selectedLinks = _useState2[0],
210
- updateSelectedLinks = _useState2[1];
211
- var onSelectionChange = function onSelectionChange(thisIndex) {
212
- var _context2;
213
- var newArray = [];
214
- if (_includesInstanceProperty(selectedLinks).call(selectedLinks, thisIndex)) {
215
- newArray = _filterInstanceProperty(selectedLinks).call(selectedLinks, function (link) {
216
- return link !== thisIndex;
217
- });
218
- } else {
219
- var _context;
220
- newArray = _concatInstanceProperty(_context = []).call(_context, selectedLinks, [thisIndex]);
221
- }
222
- updateSelectedLinks(_concatInstanceProperty(_context2 = []).call(_context2, newArray));
223
- };
224
212
  return ___EmotionJSX(Box, {
225
213
  isRow: true
226
- }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
214
+ }, ___EmotionJSX(Box, {
215
+ mr: "xs"
216
+ }, ___EmotionJSX(Box, {
227
217
  minWidth: "39.5px",
228
218
  minHeight: "39.5px",
229
219
  sx: sx.iconContainer
@@ -233,7 +223,7 @@ var Stage = function Stage(_ref) {
233
223
  name: iconTitle
234
224
  },
235
225
  color: "accent.40",
236
- size: "24px",
226
+ size: "15px",
237
227
  sx: {
238
228
  zIndex: 3
239
229
  }
@@ -245,66 +235,40 @@ var Stage = function Stage(_ref) {
245
235
  }, title), ___EmotionJSX(Box, {
246
236
  pl: "0px",
247
237
  mb: "25px"
248
- }, _mapInstanceProperty(links).call(links, function (link, index) {
238
+ }, _mapInstanceProperty(links).call(links, function (link) {
249
239
  return ___EmotionJSX(LinkRow, _extends({}, link, {
250
- onSelectionChange: onSelectionChange,
251
- index: index,
252
- isLinkSelected: selectedLinks.length !== 0,
253
- isLastLink: index === links.length - 1,
254
240
  key: link.title
255
241
  }));
256
242
  }))));
257
243
  };
258
244
  var LinkRow = function LinkRow(_ref2) {
259
- var index = _ref2.index,
260
- isLastLink = _ref2.isLastLink,
245
+ var title = _ref2.title,
261
246
  isLinkSelected = _ref2.isLinkSelected,
262
- onSelectionChange = _ref2.onSelectionChange,
263
- title = _ref2.title;
264
- var _useState3 = useState(false),
265
- _useState4 = _slicedToArray(_useState3, 2),
266
- isSelected = _useState4[0],
267
- handleSelectionChange = _useState4[1];
268
- var _useState5 = useState(0),
269
- _useState6 = _slicedToArray(_useState5, 2),
270
- verticalSeparatorHeight = _useState6[0],
271
- setVerticalSeparatorHeight = _useState6[1];
272
- var iconRef = useRef();
273
- var rowRef = useRef();
274
- useEffect(function () {
275
- var _rowRef$current$getBo = rowRef.current.getBoundingClientRect(),
276
- height = _rowRef$current$getBo.height;
277
- var _iconRef$current$getB = iconRef.current.getBoundingClientRect(),
278
- iconRefHeight = _iconRef$current$getB.height;
279
- var marginAccommodation = 4;
280
- var halfIconHeight = iconRefHeight / 2;
281
- setVerticalSeparatorHeight(height - halfIconHeight - marginAccommodation);
282
- }, [iconRef, rowRef]);
247
+ customIcon = _ref2.customIcon;
248
+ var _useState = useState(isLinkSelected),
249
+ _useState2 = _slicedToArray(_useState, 2),
250
+ isSelected = _useState2[0],
251
+ handleSelectionChange = _useState2[1];
283
252
  var onIconPress = function onIconPress() {
284
253
  handleSelectionChange(!isSelected);
285
- onSelectionChange(index);
286
254
  };
287
255
  return ___EmotionJSX(Box, {
288
- isRow: true,
289
- ref: rowRef
290
- }, ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
256
+ isRow: true
257
+ }, ___EmotionJSX(Box, null, customIcon ? ___EmotionJSX(Icon, {
258
+ icon: customIcon,
259
+ size: "22px"
260
+ }) : ___EmotionJSX(IconButton, {
291
261
  "aria-label": "completed step icon indicator",
292
262
  onPress: onIconPress,
293
- ref: iconRef,
294
263
  sx: sx.linkRowIconButton
295
264
  }, ___EmotionJSX(Icon, {
296
265
  icon: isSelected ? CheckCircleIcon : RadioButtonIcon,
297
- size: "sm",
298
- sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected,
266
+ size: "22px",
267
+ sx: isSelected ? sx.linkRowIconSelected : sx.linkRowIconNotSelected,
299
268
  title: {
300
269
  name: 'Check Circle Icon'
301
270
  }
302
- })), !isLastLink && isLinkSelected && ___EmotionJSX(Separator, {
303
- orientation: "vertical",
304
- sx: _objectSpread(_objectSpread({}, sx.linkRowSeparator), {}, {
305
- maxHeight: verticalSeparatorHeight
306
- })
307
- })), ___EmotionJSX(Link, {
271
+ }))), ___EmotionJSX(Link, {
308
272
  href: "https://www.pingidentity.com",
309
273
  sx: sx.linkRowText,
310
274
  target: "_blank"
@@ -327,4 +291,10 @@ export var Default = function Default() {
327
291
  key: stage.title
328
292
  });
329
293
  })));
294
+ };
295
+ Default.parameters = {
296
+ design: {
297
+ type: 'figma',
298
+ url: FIGMA_LINKS.trialExperienceNav["default"]
299
+ }
330
300
  };
package/lib/utils/designUtils/figmaLinks.js CHANGED
@@ -114,6 +114,9 @@ export var FIGMA_LINKS = {
114
114
  slider: {
115
115
  "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43112%3A1773&mode=dev'
116
116
  },
117
+ trialExperienceNav: {
118
+ "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43368%3A159&mode=dev'
119
+ },
117
120
  trialExperienceButtons: {
118
121
  "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43369%3A445'
119
122
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pingux/astro",
3
- "version": "2.27.1-alpha.0",
3
+ "version": "2.27.1-alpha.1",
4
4
  "description": "React component library for Ping Identity's design system",
5
5
  "repository": {
6
6
  "type": "git",