@pingux/astro 1.8.0-alpha.3 → 1.8.0-alpha.4

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/styles/variants/buttons.js

@@ -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/styles/variants/buttons.js

@@ -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.3",
+  "version": "1.8.0-alpha.4",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",