@pingux/astro 1.8.0-alpha.2 → 1.8.0

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.8.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.7.0...@pingux/astro@1.8.0) (2022-04-14)
+
+
+### Bug Fixes
+
+* [UIP-5220] Add typography support props for Text component ([a22ad60](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a22ad6042a7600c8fd7d57a3eab13a575c1ddc41))
+* [UIP-5299] Nav bar fixes ([bacdcdb](https://gitlab.corp.pingidentity.com/ux/pingux/commit/bacdcdb0fee52cee35ee8a90a91d530ab69f0264))
+* [UIP-5335] TimezonePicker with  correct offset in GMT ([72451f2](https://gitlab.corp.pingidentity.com/ux/pingux/commit/72451f2bb9bad80ddff00ebbc82aa927bc6cb50e))
+* [UIP-5338] ComboBox Improvements ([e6d81f7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/e6d81f793432bdca9c44a42eb3ad3f8d68080e6a))
+* [UIP-5340] NumberField whitespace issue ([48fad9f](https://gitlab.corp.pingidentity.com/ux/pingux/commit/48fad9f2ad952aaec007426ab97b8ca6c934c8a8))
+* [UIP-5341] change input font size to 15 ([db80d09](https://gitlab.corp.pingidentity.com/ux/pingux/commit/db80d09c16c03e2c19ff4a43e8a913eee45506dc))
+* [UIP-5351] CodeView cannot import additional language ([5a74c5b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/5a74c5b21664e8bc43ef026efeb317f1bc640275))
+* [UIP-5352] Remove tooltip from delete button ([cfc9645](https://gitlab.corp.pingidentity.com/ux/pingux/commit/cfc9645f256ba498278c55f60e998a31e306310a))
+* [UIP-5356] Accordion button background transparency ([5cd3178](https://gitlab.corp.pingidentity.com/ux/pingux/commit/5cd31789511846b7cc27e4c47adb200f0bfbe788))
+
+
+### Features
+
+* [UIP-5060] Breadcrumb Component Improvements ([5f204e1](https://gitlab.corp.pingidentity.com/ux/pingux/commit/5f204e1072fee77ae3a963fb2015594d6222a954))
+* [UIP-5209] Add fallback functionality to Image ([f0f1fae](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f0f1faed4452a3bf69ae485c87f00716e074a655))
+* [UIP-5277] MultiSelect List Container Interactive Story ([381e9b7](https://gitlab.corp.pingidentity.com/ux/pingux/commit/381e9b7c2827518d4254c410c00fea66347d7850))
+
+
+
+
+
 # [1.7.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.6.0...@pingux/astro@1.7.0) (2022-04-04)
 
 

package/lib/cjs/components/Breadcrumbs/BreadcrumbItem.js

@@ -87,6 +87,13 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       case 'Text':
         return _index.Text;
 
+      case 'Link':
+        if (isCurrent) {
+          return _index.Text;
+        }
+
+        return _index.Link;
+
       case 'Fragment':
         return _react.Fragment;
 
@@ -109,7 +116,7 @@ var BreadcrumbItem = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
 
     if (isCurrent) {
-      elementTypeProps.className = elementTypeProps.className ? "".concat(elementTypeProps.className, " isCurrent") : 'isCurrent';
+      elementTypeProps.className = elementTypeProps.className ? "".concat(elementTypeProps.className, " is-current") : 'is-current';
     }
 
     return (0, _object.omit)(elementTypeProps, 'onClick', 'onKeyDown', 'onKeyUp');
@@ -135,7 +142,7 @@ BreadcrumbItem.propTypes = {
   onAction: _propTypes["default"].func
 };
 BreadcrumbItem.defaultProps = {
-  elementType: 'Button'
+  elementType: 'Link'
 };
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 var _default = BreadcrumbItem;

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

@@ -77,26 +77,34 @@ var Breadcrumbs = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   });
   var createBreadcrumb = (0, _react.useCallback)(function (child, idx) {
     var isCurrentItem = (0, _isArray["default"])(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
-    return (0, _react2.jsx)(_react.Fragment, {
-      key: "fragment-".concat(child.key)
+    return (0, _react2.jsx)(_index.Box, {
+      isRow: true,
+      sx: {
+        alignItems: 'center'
+      },
+      as: "li",
+      key: "li-".concat(child.key)
     }, (0, _react2.jsx)(_BreadcrumbItem["default"], (0, _extends2["default"])({
       "data-id": child['data-id'],
       isCurrent: isCurrentItem,
       onAction: onAction,
-      actionKey: child.key
+      actionKey: child.key,
+      variant: "text.breadcrumbLink"
     }, child.props), child.props.children), icon && !isCurrentItem && (0, _react2.jsx)(_index.Icon, (0, _extends2["default"])({
-      icon: icon
+      "aria-hidden": "true",
+      icon: icon,
+      mx: 5,
+      size: 16
     }, iconProps)));
   }, [children.length, filteredChildren, icon, iconProps, onAction]);
-  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  return (0, _react2.jsx)("nav", null, (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     ref: breadcrumbsRef,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
+    isRow: true,
     sx: {
       overflow: 'auto'
-    }
-  }, (0, _utils.mergeProps)(wrapperProps, others)), (0, _isArray["default"])(filteredChildren) ? (0, _map["default"])(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children));
+    },
+    as: "ol"
+  }, (0, _utils.mergeProps)(wrapperProps, others)), (0, _isArray["default"])(filteredChildren) ? (0, _map["default"])(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children)));
 });
 Breadcrumbs.propTypes = {
   /** The icon to render in between each node. */

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -8,9 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSpan = exports.WithOnAction = exports.WithIsCurrentItemClass = exports.WithHrefA = exports.WithDisabledLastItem = exports.Default = void 0;
-
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+exports["default"] = exports.WithSpan = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -52,7 +50,6 @@ var _default = {
   }
 };
 exports["default"] = _default;
-var foldersArr = ['Folder 1', 'Folder 2', 'Folder 3'];
 
 var Default = function Default(args) {
   var onAction = function onAction(key) {
@@ -63,104 +60,39 @@ var Default = function Default(args) {
     onAction: onAction
   }, args), (0, _react2.jsx)(_collections.Item, {
     key: "home",
-    variant: "link",
-    "data-id": "home"
+    "aria-label": "home",
+    variant: "buttons.link",
+    "data-id": "home",
+    href: "https://www.pingidentity.com"
   }, "Home"), (0, _react2.jsx)(_collections.Item, {
     key: "trendy",
-    variant: "link",
-    "data-id": "trendy"
+    "aria-label": "trendy",
+    variant: "buttons.link",
+    "data-id": "trendy",
+    href: "https://www.pingidentity.com"
   }, "Trendy"), (0, _react2.jsx)(_collections.Item, {
     key: "march 2020 assets",
-    variant: "link",
-    "data-id": "march"
+    "aria-label": "march-2020-assets",
+    variant: "buttons.link",
+    "data-id": "march",
+    href: "https://www.pingidentity.com"
   }, "March 2020 Assets"));
 };
 
 exports.Default = Default;
 
-var WithOnAction = function WithOnAction() {
-  // eslint-disable-next-line no-alert
-  var onAction = function onAction(key) {
-    return alert(key);
-  };
-
-  return (0, _react2.jsx)(_Breadcrumbs["default"], {
-    onAction: onAction,
-    icon: _ChevronRightIcon["default"]
-  }, (0, _react2.jsx)(_collections.Item, {
-    key: "home"
-  }, "Home"), (0, _react2.jsx)(_collections.Item, {
-    key: "trendy"
-  }, "Trendy"), (0, _react2.jsx)(_collections.Item, {
-    key: "march 2020 assets"
-  }, "March 2020 Assets"));
-};
-
-exports.WithOnAction = WithOnAction;
-
 var WithSpan = function WithSpan() {
   return (0, _react2.jsx)(_Breadcrumbs["default"], {
     icon: _ChevronRightIcon["default"]
   }, (0, _react2.jsx)(_collections.Item, {
     key: "Parent",
+    "aria-label": "parent",
     elementType: "span"
   }, "Parent"), (0, _react2.jsx)(_collections.Item, {
     key: "FonsVernall",
+    "aria-label": "fons-vernall",
     elementType: "span"
   }, "Fons Vernall"));
 };
 
-exports.WithSpan = WithSpan;
-
-var WithIsCurrentItemClass = function WithIsCurrentItemClass(args) {
-  var styles = {
-    color: 'blue',
-    '&.isCurrent': {
-      color: 'red'
-    }
-  };
-  return (0, _react2.jsx)(_Breadcrumbs["default"], args, (0, _react2.jsx)(_collections.Item, {
-    key: "home",
-    sx: styles
-  }, "Home"), (0, _react2.jsx)(_collections.Item, {
-    key: "trendy",
-    sx: styles
-  }, "Trendy"), (0, _react2.jsx)(_collections.Item, {
-    key: "march 2020 assets",
-    isCurrent: true,
-    sx: styles
-  }, "March 2020 Assets"));
-};
-
-exports.WithIsCurrentItemClass = WithIsCurrentItemClass;
-
-var WithDisabledLastItem = function WithDisabledLastItem(args) {
-  return (0, _react2.jsx)(_Breadcrumbs["default"], args, (0, _react2.jsx)(_collections.Item, {
-    key: "home",
-    elementType: "Button"
-  }, "Home"), (0, _react2.jsx)(_collections.Item, {
-    key: "trendy",
-    elementType: "Button"
-  }, "Trendy"), (0, _react2.jsx)(_collections.Item, {
-    key: "march 2020 assets",
-    elementType: "Button",
-    isDisabled: true
-  }, "March 2020 Assets"));
-};
-
-exports.WithDisabledLastItem = WithDisabledLastItem;
-
-var WithHrefA = function WithHrefA(args) {
-  return (0, _react2.jsx)(_Breadcrumbs["default"], args, (0, _map["default"])(foldersArr).call(foldersArr, function (folder) {
-    return (0, _react2.jsx)(_collections.Item, {
-      elementType: "a",
-      href: "#",
-      key: folder,
-      style: {
-        whiteSpace: 'nowrap'
-      }
-    }, folder);
-  }));
-};
-
-exports.WithHrefA = WithHrefA;
+exports.WithSpan = WithSpan;

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.test.js

@@ -94,7 +94,7 @@ test('breadcrumbItem should render breadcrumbItem as a html tag when appropriate
 test('breadcrumbs will use onAction if provided', function () {
   var mockOnAction = jest.fn();
   getComponent({}, {
-    elementType: 'Button',
+    elementType: 'Link',
     onAction: mockOnAction
   });
 

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -290,13 +290,15 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     onAction: handleOnAction,
     iconProps: {
       color: 'neutral.70',
-      mx: 10
+      mx: 5,
+      size: 16
     }
   }, others), (0, _react2.jsx)(_index.Item, {
     key: "name",
     variant: "environmentBreadcrumb.current",
     "data-testid": "name",
-    "aria-label": name
+    "aria-label": name,
+    elementType: "Button"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _HomeIcon["default"],
     mr: 7

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -66,7 +66,8 @@ var onSelectionChange = jest.fn();
 var getComponent = function getComponent(props) {
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultProps, props), function (item) {
     return (0, _react2.jsx)(_index.Item, {
-      key: item.name
+      key: item.name,
+      "data-testid": item.name
     }, item.name);
   })));
 };
@@ -115,10 +116,20 @@ afterAll(function () {
 test('should render environment breadcrumb component by default', function () {
   getComponent();
 
-  var imageUploadButton = _testWrapper.screen.getByTestId(testEnvBreadcrumb);
+  var breadcrumbList = _testWrapper.screen.getByTestId(testEnvBreadcrumb);
 
-  expect(imageUploadButton).toBeInstanceOf(HTMLDivElement);
-  expect(imageUploadButton).toBeInTheDocument();
+  expect(breadcrumbList).toBeInstanceOf(HTMLOListElement);
+  expect(breadcrumbList).toBeInTheDocument();
+
+  var firstButton = _testWrapper.screen.getByTestId('name');
+
+  expect(firstButton).toBeInstanceOf(HTMLButtonElement);
+  expect(firstButton).toBeInTheDocument();
+
+  var lastButton = _testWrapper.screen.getByText('test-selected-item');
+
+  expect(lastButton).toBeInstanceOf(HTMLButtonElement);
+  expect(lastButton).toBeInTheDocument();
 });
 test('should display name', function () {
   getComponent();

package/lib/cjs/components/TimeZonePicker/TimeZonePicker.js

@@ -97,6 +97,18 @@ var getLocaleTime = function getLocaleTime(_ref2) {
     timeZone: timeZone
   }, localeOptions));
 };
+
+var getTimezoneOffset = function getTimezoneOffset(timeZone) {
+  var now = new Date();
+  var tzString = now.toLocaleString('en-US', {
+    timeZone: timeZone
+  });
+  var localString = now.toLocaleString('en-US');
+  var diff = (Date.parse(localString) - Date.parse(tzString)) / 3600000;
+  var offset = -(diff + now.getTimezoneOffset() / 60);
+  var formattedString = "".concat(offset, ":00");
+  return offset > 0 ? "+".concat(formattedString) : formattedString;
+};
 /**
  *  Component allows users to choose a timezone from the list.
  *  You can checkout the default timezones list [here](https://github.com/yury-dymov/react-bootstrap-timezone-picker/blob/master/src/timezones.json).
@@ -143,7 +155,7 @@ var TimeZonePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         return (0, _map["default"])(_context5 = (0, _entries["default"])(extendedTimeZonesList)).call(_context5, function (item) {
           var _item$;
 
-          var gmt = item[0].substring(1, 10);
+          var gmt = "GMT".concat(getTimezoneOffset(item[1]));
           var gmtLabel = item[0].substring(12);
           var timeZone = (_item$ = item[1]) === null || _item$ === void 0 ? void 0 : _item$.replace(/_/g, ' ');
           var time = getLocaleTime({

package/lib/cjs/styles/variants/buttons.js

@@ -223,7 +223,7 @@ var close = _objectSpread(_objectSpread({}, iconButton), {}, {
 
 var accordionHeader = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
-  bg: 'white',
+  bg: 'transparent',
   color: 'neutral.10',
   paddingLeft: '5px',
   paddingRight: '5px',
@@ -394,7 +394,9 @@ var text = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-hovered': {
     textDecoration: 'underline'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': {
+    textDecoration: 'underline'
+  }
 });
 
 var quiet = {
@@ -496,9 +498,14 @@ var imageUpload = _objectSpread(_objectSpread({}, base), {}, {
 });
 
 var link = _objectSpread(_objectSpread({}, text), {}, {
+  textDecoration: 'none',
   display: 'flex',
   justifyContent: 'space-between',
-  width: 'max-content'
+  width: 'max-content',
+  '&.is-current': {
+    cursor: 'default',
+    color: 'text.primary'
+  }
 });
 
 var neutralText = _objectSpread(_objectSpread({}, link), {}, {

package/lib/cjs/styles/variants/text.js

@@ -141,6 +141,27 @@ var expandableRow = {
     }
   }
 };
+var breadcrumbLink = {
+  color: 'active',
+  fontFamily: 'standard',
+  fontSize: '15px',
+  textDecoration: 'none',
+  outline: 'none',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': {
+    textDecoration: 'underline'
+  },
+  '&.is-disabled': {
+    pointerEvents: 'none'
+  },
+  '&.is-current': _objectSpread(_objectSpread({
+    pointerEvents: 'none'
+  }, base), {}, {
+    fontWeight: 1
+  })
+};
 
 var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
   fontSize: 'sm',
@@ -234,6 +255,7 @@ var text = {
     color: 'text.secondary',
     fontFamily: 'standard'
   }),
+  breadcrumbLink: breadcrumbLink,
   buttonLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'md',
     fontWeight: 1,

package/lib/components/Breadcrumbs/BreadcrumbItem.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import { mergeProps } from '@react-aria/utils';
 import { omit } from 'lodash/object';
 import { usePropWarning } from '../../hooks/';
-import { Button, IconButton, Text } from '../../index';
+import { Button, IconButton, Text, Link } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
@@ -52,6 +52,13 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
       case 'Text':
         return Text;
 
+      case 'Link':
+        if (isCurrent) {
+          return Text;
+        }
+
+        return Link;
+
       case 'Fragment':
         return Fragment;
 
@@ -74,7 +81,7 @@ var BreadcrumbItem = /*#__PURE__*/forwardRef(function (props, ref) {
     }
 
     if (isCurrent) {
-      elementTypeProps.className = elementTypeProps.className ? "".concat(elementTypeProps.className, " isCurrent") : 'isCurrent';
+      elementTypeProps.className = elementTypeProps.className ? "".concat(elementTypeProps.className, " is-current") : 'is-current';
     }
 
     return omit(elementTypeProps, 'onClick', 'onKeyDown', 'onKeyUp');
@@ -100,7 +107,7 @@ BreadcrumbItem.propTypes = {
   onAction: PropTypes.func
 };
 BreadcrumbItem.defaultProps = {
-  elementType: 'Button'
+  elementType: 'Link'
 };
 BreadcrumbItem.displayName = 'BreadcrumbItem';
 export default BreadcrumbItem;

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -4,7 +4,7 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _Array$isArray from "@babel/runtime-corejs3/core-js-stable/array/is-array";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "icon", "iconProps", "onAction"];
-import React, { forwardRef, useRef, useImperativeHandle, Fragment, useCallback } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle, useCallback } from 'react';
 import { useBreadcrumbs } from '@react-aria/breadcrumbs';
 import PropTypes from 'prop-types';
 import { mergeProps } from '@react-aria/utils';
@@ -43,26 +43,34 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
   });
   var createBreadcrumb = useCallback(function (child, idx) {
     var isCurrentItem = _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
-    return ___EmotionJSX(Fragment, {
-      key: "fragment-".concat(child.key)
+    return ___EmotionJSX(Box, {
+      isRow: true,
+      sx: {
+        alignItems: 'center'
+      },
+      as: "li",
+      key: "li-".concat(child.key)
     }, ___EmotionJSX(BreadcrumbItem, _extends({
       "data-id": child['data-id'],
       isCurrent: isCurrentItem,
       onAction: onAction,
-      actionKey: child.key
+      actionKey: child.key,
+      variant: "text.breadcrumbLink"
     }, child.props), child.props.children), icon && !isCurrentItem && ___EmotionJSX(Icon, _extends({
-      icon: icon
+      "aria-hidden": "true",
+      icon: icon,
+      mx: 5,
+      size: 16
     }, iconProps)));
   }, [children.length, filteredChildren, icon, iconProps, onAction]);
-  return ___EmotionJSX(Box, _extends({
+  return ___EmotionJSX("nav", null, ___EmotionJSX(Box, _extends({
     ref: breadcrumbsRef,
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
+    isRow: true,
     sx: {
       overflow: 'auto'
-    }
-  }, mergeProps(wrapperProps, others)), _Array$isArray(filteredChildren) ? _mapInstanceProperty(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children));
+    },
+    as: "ol"
+  }, mergeProps(wrapperProps, others)), _Array$isArray(filteredChildren) ? _mapInstanceProperty(filteredChildren).call(filteredChildren, createBreadcrumb) : createBreadcrumb(children)));
 });
 Breadcrumbs.propTypes = {
   /** The icon to render in between each node. */

package/lib/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -1,4 +1,3 @@
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { action } from '@storybook/addon-actions';
@@ -31,7 +30,6 @@ export default {
     }
   }
 };
-var foldersArr = ['Folder 1', 'Folder 2', 'Folder 3'];
 export var Default = function Default(args) {
   var onAction = function onAction(key) {
     return action("onPress ".concat(key));
@@ -41,33 +39,22 @@ export var Default = function Default(args) {
     onAction: onAction
   }, args), ___EmotionJSX(Item, {
     key: "home",
-    variant: "link",
-    "data-id": "home"
+    "aria-label": "home",
+    variant: "buttons.link",
+    "data-id": "home",
+    href: "https://www.pingidentity.com"
   }, "Home"), ___EmotionJSX(Item, {
     key: "trendy",
-    variant: "link",
-    "data-id": "trendy"
+    "aria-label": "trendy",
+    variant: "buttons.link",
+    "data-id": "trendy",
+    href: "https://www.pingidentity.com"
   }, "Trendy"), ___EmotionJSX(Item, {
     key: "march 2020 assets",
-    variant: "link",
-    "data-id": "march"
-  }, "March 2020 Assets"));
-};
-export var WithOnAction = function WithOnAction() {
-  // eslint-disable-next-line no-alert
-  var onAction = function onAction(key) {
-    return alert(key);
-  };
-
-  return ___EmotionJSX(Breadcrumbs, {
-    onAction: onAction,
-    icon: ChevronRightIcon
-  }, ___EmotionJSX(Item, {
-    key: "home"
-  }, "Home"), ___EmotionJSX(Item, {
-    key: "trendy"
-  }, "Trendy"), ___EmotionJSX(Item, {
-    key: "march 2020 assets"
+    "aria-label": "march-2020-assets",
+    variant: "buttons.link",
+    "data-id": "march",
+    href: "https://www.pingidentity.com"
   }, "March 2020 Assets"));
 };
 export var WithSpan = function WithSpan() {
@@ -75,53 +62,11 @@ export var WithSpan = function WithSpan() {
     icon: ChevronRightIcon
   }, ___EmotionJSX(Item, {
     key: "Parent",
+    "aria-label": "parent",
     elementType: "span"
   }, "Parent"), ___EmotionJSX(Item, {
     key: "FonsVernall",
+    "aria-label": "fons-vernall",
     elementType: "span"
   }, "Fons Vernall"));
-};
-export var WithIsCurrentItemClass = function WithIsCurrentItemClass(args) {
-  var styles = {
-    color: 'blue',
-    '&.isCurrent': {
-      color: 'red'
-    }
-  };
-  return ___EmotionJSX(Breadcrumbs, args, ___EmotionJSX(Item, {
-    key: "home",
-    sx: styles
-  }, "Home"), ___EmotionJSX(Item, {
-    key: "trendy",
-    sx: styles
-  }, "Trendy"), ___EmotionJSX(Item, {
-    key: "march 2020 assets",
-    isCurrent: true,
-    sx: styles
-  }, "March 2020 Assets"));
-};
-export var WithDisabledLastItem = function WithDisabledLastItem(args) {
-  return ___EmotionJSX(Breadcrumbs, args, ___EmotionJSX(Item, {
-    key: "home",
-    elementType: "Button"
-  }, "Home"), ___EmotionJSX(Item, {
-    key: "trendy",
-    elementType: "Button"
-  }, "Trendy"), ___EmotionJSX(Item, {
-    key: "march 2020 assets",
-    elementType: "Button",
-    isDisabled: true
-  }, "March 2020 Assets"));
-};
-export var WithHrefA = function WithHrefA(args) {
-  return ___EmotionJSX(Breadcrumbs, args, _mapInstanceProperty(foldersArr).call(foldersArr, function (folder) {
-    return ___EmotionJSX(Item, {
-      elementType: "a",
-      href: "#",
-      key: folder,
-      style: {
-        whiteSpace: 'nowrap'
-      }
-    }, folder);
-  }));
 };

package/lib/components/Breadcrumbs/Breadcrumbs.test.js

@@ -78,7 +78,7 @@ test('breadcrumbItem should render breadcrumbItem as a html tag when appropriate
 test('breadcrumbs will use onAction if provided', function () {
   var mockOnAction = jest.fn();
   getComponent({}, {
-    elementType: 'Button',
+    elementType: 'Link',
     onAction: mockOnAction
   });
   userEvent.click(screen.getByText(testItemsArr[0]));

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -240,13 +240,15 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     onAction: handleOnAction,
     iconProps: {
       color: 'neutral.70',
-      mx: 10
+      mx: 5,
+      size: 16
     }
   }, others), ___EmotionJSX(Item, {
     key: "name",
     variant: "environmentBreadcrumb.current",
     "data-testid": "name",
-    "aria-label": name
+    "aria-label": name,
+    elementType: "Button"
   }, ___EmotionJSX(Icon, {
     icon: HomeIcon,
     mr: 7

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -52,7 +52,8 @@ var onSelectionChange = jest.fn();
 var getComponent = function getComponent(props) {
   return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultProps, props), function (item) {
     return ___EmotionJSX(Item, {
-      key: item.name
+      key: item.name,
+      "data-testid": item.name
     }, item.name);
   })));
 };
@@ -100,9 +101,15 @@ afterAll(function () {
 });
 test('should render environment breadcrumb component by default', function () {
   getComponent();
-  var imageUploadButton = screen.getByTestId(testEnvBreadcrumb);
-  expect(imageUploadButton).toBeInstanceOf(HTMLDivElement);
-  expect(imageUploadButton).toBeInTheDocument();
+  var breadcrumbList = screen.getByTestId(testEnvBreadcrumb);
+  expect(breadcrumbList).toBeInstanceOf(HTMLOListElement);
+  expect(breadcrumbList).toBeInTheDocument();
+  var firstButton = screen.getByTestId('name');
+  expect(firstButton).toBeInstanceOf(HTMLButtonElement);
+  expect(firstButton).toBeInTheDocument();
+  var lastButton = screen.getByText('test-selected-item');
+  expect(lastButton).toBeInstanceOf(HTMLButtonElement);
+  expect(lastButton).toBeInTheDocument();
 });
 test('should display name', function () {
   getComponent();

package/lib/components/TimeZonePicker/TimeZonePicker.js

@@ -54,6 +54,18 @@ var getLocaleTime = function getLocaleTime(_ref2) {
     timeZone: timeZone
   }, localeOptions));
 };
+
+var getTimezoneOffset = function getTimezoneOffset(timeZone) {
+  var now = new Date();
+  var tzString = now.toLocaleString('en-US', {
+    timeZone: timeZone
+  });
+  var localString = now.toLocaleString('en-US');
+  var diff = (Date.parse(localString) - Date.parse(tzString)) / 3600000;
+  var offset = -(diff + now.getTimezoneOffset() / 60);
+  var formattedString = "".concat(offset, ":00");
+  return offset > 0 ? "+".concat(formattedString) : formattedString;
+};
 /**
  *  Component allows users to choose a timezone from the list.
  *  You can checkout the default timezones list [here](https://github.com/yury-dymov/react-bootstrap-timezone-picker/blob/master/src/timezones.json).
@@ -100,7 +112,7 @@ var TimeZonePicker = /*#__PURE__*/forwardRef(function (props, ref) {
         return _mapInstanceProperty(_context5 = _Object$entries(extendedTimeZonesList)).call(_context5, function (item) {
           var _item$;
 
-          var gmt = item[0].substring(1, 10);
+          var gmt = "GMT".concat(getTimezoneOffset(item[1]));
           var gmtLabel = item[0].substring(12);
           var timeZone = (_item$ = item[1]) === null || _item$ === void 0 ? void 0 : _item$.replace(/_/g, ' ');
           var time = getLocaleTime({

package/lib/styles/variants/buttons.js

@@ -203,7 +203,7 @@ var close = _objectSpread(_objectSpread({}, iconButton), {}, {
 
 var accordionHeader = _objectSpread(_objectSpread({}, base), {}, {
   display: 'inline-flex',
-  bg: 'white',
+  bg: 'transparent',
   color: 'neutral.10',
   paddingLeft: '5px',
   paddingRight: '5px',
@@ -374,7 +374,9 @@ var text = _objectSpread(_objectSpread({}, base), {}, {
   '&.is-hovered': {
     textDecoration: 'underline'
   },
-  '&.is-focused': _objectSpread({}, defaultFocus)
+  '&.is-focused': {
+    textDecoration: 'underline'
+  }
 });
 
 var quiet = {
@@ -476,9 +478,14 @@ var imageUpload = _objectSpread(_objectSpread({}, base), {}, {
 });
 
 var link = _objectSpread(_objectSpread({}, text), {}, {
+  textDecoration: 'none',
   display: 'flex',
   justifyContent: 'space-between',
-  width: 'max-content'
+  width: 'max-content',
+  '&.is-current': {
+    cursor: 'default',
+    color: 'text.primary'
+  }
 });
 
 var neutralText = _objectSpread(_objectSpread({}, link), {}, {

package/lib/styles/variants/text.js

@@ -123,6 +123,27 @@ var expandableRow = {
     }
   }
 };
+var breadcrumbLink = {
+  color: 'active',
+  fontFamily: 'standard',
+  fontSize: '15px',
+  textDecoration: 'none',
+  outline: 'none',
+  '&.is-hovered': {
+    textDecoration: 'underline'
+  },
+  '&.is-focused': {
+    textDecoration: 'underline'
+  },
+  '&.is-disabled': {
+    pointerEvents: 'none'
+  },
+  '&.is-current': _objectSpread(_objectSpread({
+    pointerEvents: 'none'
+  }, base), {}, {
+    fontWeight: 1
+  })
+};
 
 var environmentBreadcrumb = _objectSpread(_objectSpread({}, base), {}, {
   fontSize: 'sm',
@@ -216,6 +237,7 @@ export var text = {
     color: 'text.secondary',
     fontFamily: 'standard'
   }),
+  breadcrumbLink: breadcrumbLink,
   buttonLabel: _objectSpread(_objectSpread({}, wordWrap), {}, {
     fontSize: 'md',
     fontWeight: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.8.0-alpha.2",
+  "version": "1.8.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",