@pingux/astro 2.0.4-alpha.1 → 2.0.4-alpha.2

package/lib/cjs/recipes/TrialExperienceStatusBar.stories.js

@@ -1,9 +1,15 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty2 = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
@@ -13,6 +19,7 @@ var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-s
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
@@ -21,6 +28,8 @@ var _index = require("../index");
 var _react2 = require("@emotion/react");
 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); }
 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; }
+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; }
+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; }
 var _default = {
   title: 'Recipes/Trial Experience Nav'
 };
@@ -139,6 +148,8 @@ var sx = {
     maxWidth: '195px'
   },
   linkRowIconButton: {
+    height: '23.5px',
+    width: '23.5px',
     '&.is-pressed': {
       backgroundColor: 'transparent'
     },
@@ -164,10 +175,9 @@ var sx = {
   linkRowSeparator: {
     flexGrow: 1,
     backgroundColor: 'accent.30',
-    maxHeight: '100%',
     width: '1px !important',
     zIndex: 2,
-    m: '-5px 5px -5px 11.5px !important'
+    m: '-4px 5px -5px 11.5px !important'
   },
   linkRowText: {
     fontSize: 'md',
@@ -186,11 +196,11 @@ var sx = {
     boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
   }
 };
-var Stage = function Stage(props) {
-  var title = props.title,
-    icon = props.icon,
-    links = props.links,
-    isLastStage = props.isLastStage;
+var Stage = function Stage(_ref) {
+  var title = _ref.title,
+    icon = _ref.icon,
+    links = _ref.links,
+    isLastStage = _ref.isLastStage;
   var _useState = (0, _react.useState)([]),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selectedLinks = _useState2[0],
@@ -239,43 +249,57 @@ var Stage = function Stage(props) {
     }));
   }))));
 };
-var LinkRow = function LinkRow(props) {
-  var title = props.title,
-    index = props.index,
-    onSelectionChange = props.onSelectionChange,
-    isLinkSelected = props.isLinkSelected,
-    isLastLink = props.isLastLink;
+var LinkRow = function LinkRow(_ref2) {
+  var index = _ref2.index,
+    isLastLink = _ref2.isLastLink,
+    isLinkSelected = _ref2.isLinkSelected,
+    onSelectionChange = _ref2.onSelectionChange,
+    title = _ref2.title;
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     isSelected = _useState4[0],
     handleSelectionChange = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+    verticalSeparatorHeight = _useState6[0],
+    setVerticalSeparatorHeight = _useState6[1];
+  var iconRef = (0, _react.useRef)();
+  var rowRef = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    var _rowRef$current$getBo = rowRef.current.getBoundingClientRect(),
+      height = _rowRef$current$getBo.height;
+    var _iconRef$current$getB = iconRef.current.getBoundingClientRect(),
+      iconRefHeight = _iconRef$current$getB.height;
+    var marginAccommodation = 4;
+    var halfIconHeight = iconRefHeight / 2;
+    setVerticalSeparatorHeight(height - halfIconHeight - marginAccommodation);
+  }, [iconRef, rowRef]);
   var onIconPress = function onIconPress() {
     handleSelectionChange(!isSelected);
     onSelectionChange(index);
   };
   return (0, _react2.jsx)(_index.Box, {
-    isRow: true
-  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-    sx: {
-      height: '23.5px',
-      width: '23.5px'
-    }
-  }, (0, _react2.jsx)(_index.IconButton, {
+    isRow: true,
+    ref: rowRef
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "completed step icon indicator",
     onPress: onIconPress,
-    sx: sx.linkRowIconButton,
-    "aria-label": "completed step icon indicator"
+    ref: iconRef,
+    sx: sx.linkRowIconButton
   }, (0, _react2.jsx)(_index.Icon, {
     icon: isSelected ? _CheckCircleIcon["default"] : RadioButtonIcon,
     size: "sm",
     sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
-  }))), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
-    sx: sx.linkRowSeparator,
-    orientation: "vertical"
-  })), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Link, {
+  })), !isLastLink && isLinkSelected && (0, _react2.jsx)(_index.Separator, {
+    orientation: "vertical",
+    sx: _objectSpread(_objectSpread({}, sx.linkRowSeparator), {}, {
+      maxHeight: verticalSeparatorHeight
+    })
+  })), (0, _react2.jsx)(_index.Link, {
     href: "https://www.pingidentity.com",
-    target: "_blank",
-    sx: sx.linkRowText
-  }, title)));
+    sx: sx.linkRowText,
+    target: "_blank"
+  }, title));
 };
 var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.

package/lib/recipes/TrialExperienceStatusBar.stories.js

@@ -1,10 +1,20 @@
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+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; }
+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; }
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useState } from 'react';
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import React, { useEffect, useRef, useState } from 'react';
 import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
 import { Box, Icon, IconButton, Link, Separator, Text } from '../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -125,6 +135,8 @@ var sx = {
     maxWidth: '195px'
   },
   linkRowIconButton: {
+    height: '23.5px',
+    width: '23.5px',
     '&.is-pressed': {
       backgroundColor: 'transparent'
     },
@@ -150,10 +162,9 @@ var sx = {
   linkRowSeparator: {
     flexGrow: 1,
     backgroundColor: 'accent.30',
-    maxHeight: '100%',
     width: '1px !important',
     zIndex: 2,
-    m: '-5px 5px -5px 11.5px !important'
+    m: '-4px 5px -5px 11.5px !important'
   },
   linkRowText: {
     fontSize: 'md',
@@ -172,11 +183,11 @@ var sx = {
     boxShadow: '3px 8px 4px rgba(202, 206, 211, 0.36)'
   }
 };
-var Stage = function Stage(props) {
-  var title = props.title,
-    icon = props.icon,
-    links = props.links,
-    isLastStage = props.isLastStage;
+var Stage = function Stage(_ref) {
+  var title = _ref.title,
+    icon = _ref.icon,
+    links = _ref.links,
+    isLastStage = _ref.isLastStage;
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     selectedLinks = _useState2[0],
@@ -225,43 +236,57 @@ var Stage = function Stage(props) {
     }));
   }))));
 };
-var LinkRow = function LinkRow(props) {
-  var title = props.title,
-    index = props.index,
-    onSelectionChange = props.onSelectionChange,
-    isLinkSelected = props.isLinkSelected,
-    isLastLink = props.isLastLink;
+var LinkRow = function LinkRow(_ref2) {
+  var index = _ref2.index,
+    isLastLink = _ref2.isLastLink,
+    isLinkSelected = _ref2.isLinkSelected,
+    onSelectionChange = _ref2.onSelectionChange,
+    title = _ref2.title;
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isSelected = _useState4[0],
     handleSelectionChange = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    verticalSeparatorHeight = _useState6[0],
+    setVerticalSeparatorHeight = _useState6[1];
+  var iconRef = useRef();
+  var rowRef = useRef();
+  useEffect(function () {
+    var _rowRef$current$getBo = rowRef.current.getBoundingClientRect(),
+      height = _rowRef$current$getBo.height;
+    var _iconRef$current$getB = iconRef.current.getBoundingClientRect(),
+      iconRefHeight = _iconRef$current$getB.height;
+    var marginAccommodation = 4;
+    var halfIconHeight = iconRefHeight / 2;
+    setVerticalSeparatorHeight(height - halfIconHeight - marginAccommodation);
+  }, [iconRef, rowRef]);
   var onIconPress = function onIconPress() {
     handleSelectionChange(!isSelected);
     onSelectionChange(index);
   };
   return ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(Box, null, ___EmotionJSX(Box, {
-    sx: {
-      height: '23.5px',
-      width: '23.5px'
-    }
-  }, ___EmotionJSX(IconButton, {
+    isRow: true,
+    ref: rowRef
+  }, ___EmotionJSX(Box, null, ___EmotionJSX(IconButton, {
+    "aria-label": "completed step icon indicator",
     onPress: onIconPress,
-    sx: sx.linkRowIconButton,
-    "aria-label": "completed step icon indicator"
+    ref: iconRef,
+    sx: sx.linkRowIconButton
   }, ___EmotionJSX(Icon, {
     icon: isSelected ? CheckCircleIcon : RadioButtonIcon,
     size: "sm",
     sx: isSelected ? sx.linkRowIconButton : sx.linkRowIconNotSelected
-  }))), !isLastLink && isLinkSelected && ___EmotionJSX(Separator, {
-    sx: sx.linkRowSeparator,
-    orientation: "vertical"
-  })), ___EmotionJSX(Box, null, ___EmotionJSX(Link, {
+  })), !isLastLink && isLinkSelected && ___EmotionJSX(Separator, {
+    orientation: "vertical",
+    sx: _objectSpread(_objectSpread({}, sx.linkRowSeparator), {}, {
+      maxHeight: verticalSeparatorHeight
+    })
+  })), ___EmotionJSX(Link, {
     href: "https://www.pingidentity.com",
-    target: "_blank",
-    sx: sx.linkRowText
-  }, title)));
+    sx: sx.linkRowText,
+    target: "_blank"
+  }, title));
 };
 export var Default = function Default() {
   // Open the `Story` addons tab to view the source code for full context.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.0.4-alpha.1",
+  "version": "2.0.4-alpha.2",
   "description": "PingUX themeable React component library",
   "repository": {
     "type": "git",