@pingux/astro 1.17.0-alpha.0 → 1.17.0-alpha.3

package/lib/components/Box/Box.stories.js

@@ -1,249 +0,0 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React from 'react';
-import Box from '.';
-import { SelectField, Item, TextField } from '../../index';
-import { flatColorList } from '../../styles/colors.js';
-import { htmlElements } from '../../utils/devUtils/constants/htmlElements';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Box',
-  component: Box,
-  argTypes: {
-    bg: {
-      control: {
-        type: 'select',
-        options: _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref) {
-          var _ref2 = _slicedToArray(_ref, 1),
-              colorName = _ref2[0];
-
-          return colorName;
-        })
-      },
-      defaultValue: 'active'
-    },
-    gap: {
-      control: {
-        type: 'text'
-      },
-      description: 'Gap between items, whether in a row or column. Numeric value paired with a unit. https://www.w3schools.com/cssref/css_units.asp',
-      defaultValue: '10px'
-    },
-    as: {
-      control: {
-        type: 'select',
-        options: htmlElements
-      },
-      defaultValue: 'div'
-    }
-  }
-};
-export var Default = function Default(_ref3) {
-  var args = _extends({}, _ref3);
-
-  return ___EmotionJSX(Box, _extends({
-    bg: "active",
-    width: "100%",
-    p: "xl"
-  }, args), ___EmotionJSX(Box, {
-    width: 30,
-    height: 15,
-    m: "sm",
-    bg: "success.bright"
-  }), ___EmotionJSX(Box, {
-    width: 100,
-    height: 50,
-    m: "sm",
-    bg: "critical.bright"
-  }), ___EmotionJSX(Box, {
-    width: 190,
-    height: 45,
-    m: "sm",
-    bg: "warning.bright"
-  }));
-};
-export var Disabled = function Disabled(_ref4) {
-  var args = _extends({}, _ref4);
-
-  return ___EmotionJSX(Box, _extends({
-    bg: "white",
-    isDisabled: true,
-    sx: {
-      border: '1px solid',
-      borderColor: 'neutral.80'
-    },
-    width: "100%",
-    p: "xl"
-  }, args), ___EmotionJSX(TextField, {
-    id: "custom-id",
-    name: "custom-name",
-    label: "Example Label"
-  }), ___EmotionJSX("br", null), ___EmotionJSX(SelectField, {
-    label: "What's your favorite color?",
-    labelMode: "float"
-  }, ___EmotionJSX(Item, {
-    key: "red"
-  }, "Red"), ___EmotionJSX(Item, {
-    key: "blue"
-  }, "Blue"), ___EmotionJSX(Item, {
-    key: "yellow"
-  }, "Yellow")));
-};
-Disabled.args = {
-  isDisabled: {
-    defaultValue: true
-  },
-  bg: {
-    control: {
-      type: 'select',
-      options: _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref5) {
-        var _ref6 = _slicedToArray(_ref5, 1),
-            colorName = _ref6[0];
-
-        return colorName;
-      })
-    },
-    defaultValue: 'white'
-  }
-};
-export var BoxesWithGaps = function BoxesWithGaps() {
-  return ___EmotionJSX(Box, {
-    gap: "xs"
-  }, ___EmotionJSX(Box, {
-    bg: "accent.5",
-    isRow: true,
-    gap: "xl",
-    justifyContent: "center"
-  }, ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeLight.1"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeLight.2"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeLight.3"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeLight.4"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeLight.5"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeLight.6"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeLight.7"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeLight.8"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeLight.9"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeLight.10"
-  })), ___EmotionJSX(Box, {
-    bg: "accent.50",
-    isRow: true,
-    gap: "lg",
-    justifyContent: "center"
-  }, ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorative.1"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorative.2"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorative.3"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorative.4"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorative.5"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorative.6"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorative.7"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorative.8"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorative.9"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorative.10"
-  })), ___EmotionJSX(Box, {
-    bg: "accent.90",
-    isRow: true,
-    gap: "md",
-    justifyContent: "center"
-  }, ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeDark.1"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeDark.2"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeDark.3"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeDark.4"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeDark.5"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeDark.6"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeDark.7"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeDark.8"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeDark.9"
-  }), ___EmotionJSX(Box, {
-    width: 10,
-    height: 50,
-    bg: "decorativeDark.10"
-  })));
-};

package/lib/components/Box/Box.test.js

@@ -1,61 +0,0 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { CacheProvider } from '@emotion/react';
-import createCache from '@emotion/cache';
-import Box from '.';
-import axeTest from '../../utils/testUtils/testAxe'; // Emotion Cache added as test fails otherwise, root cause of this failure is unknown.
-// Failure occured with ThemeUI refactor.
-// https://github.com/emotion-js/emotion/issues/1105#issuecomment-557726922
-
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var emotionCache = createCache({
-  key: 'box-test'
-});
-emotionCache.compat = true;
-var testId = 'test-box';
-var defaultProps = {
-  'data-testid': testId
-};
-
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(CacheProvider, {
-    value: emotionCache
-  }, ___EmotionJSX(Box, _extends({}, defaultProps, props))));
-}; // Need to be added to each test file to test accessibility using axe.
-
-
-axeTest(getComponent);
-test('default box', function () {
-  getComponent();
-  var box = screen.getByTestId(testId);
-  expect(box).toBeInstanceOf(HTMLDivElement);
-  expect(box).toBeInTheDocument();
-});
-test('box as a row', function () {
-  getComponent({
-    isRow: true
-  });
-  var box = screen.getByTestId(testId);
-  expect(box).toHaveStyleRule('flex-direction', 'row');
-});
-test('box with default gap', function () {
-  getComponent({
-    gap: '30px'
-  });
-  var box = screen.getByTestId(testId);
-  expect(box).toHaveStyle('margin-top: 0px', {
-    target: '> * + *'
-  });
-});
-test('box as row with gap', function () {
-  getComponent({
-    isRow: true,
-    gap: '30px'
-  });
-  var box = screen.getByTestId(testId);
-  expect(box).toHaveStyle('margin-left: 0px', {
-    target: '> * + *'
-  });
-});

package/lib/components/Box/index.js

@@ -1 +0,0 @@
-export { default } from './Box';

package/lib/components/Breadcrumbs/BreadcrumbItem.js

@@ -1,113 +0,0 @@
-import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
-import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
-import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
-import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
-import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
-import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
-import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "elementType", "onAction", "actionKey", "isCurrent"];
-
-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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import React, { forwardRef, Fragment, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { useBreadcrumbItem } from '@react-aria/breadcrumbs';
-import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
-import { omit } from 'lodash/object';
-import { usePropWarning } from '../../hooks/';
-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,
-      elementType = props.elementType,
-      onAction = props.onAction,
-      actionKey = props.actionKey,
-      isCurrent = props.isCurrent,
-      others = _objectWithoutProperties(props, _excluded);
-
-  var itemRef = useRef();
-  usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-
-  useImperativeHandle(ref, function () {
-    return itemRef.current;
-  });
-
-  var _useBreadcrumbItem = useBreadcrumbItem(_objectSpread({}, props), itemRef),
-      itemProps = _useBreadcrumbItem.itemProps;
-
-  var ElementType = useMemo(function () {
-    switch (elementType) {
-      case 'Button':
-        return Button;
-
-      case 'IconButton':
-        return IconButton;
-
-      case 'Text':
-        return Text;
-
-      case 'Link':
-        if (isCurrent) {
-          return Text;
-        }
-
-        return Link;
-
-      case 'Fragment':
-        return Fragment;
-
-      default:
-        return elementType;
-    }
-  }, [elementType]);
-  var onPressHandler = useCallback(function () {
-    if (onAction) {
-      onAction(actionKey);
-    }
-  }, [onAction, actionKey]);
-  var elementProps = useMemo(function () {
-    var _ElementType$propType;
-
-    var elementTypeProps = _objectSpread({}, mergeProps(itemProps, others));
-
-    if ((_ElementType$propType = ElementType.propTypes) !== null && _ElementType$propType !== void 0 && _ElementType$propType.onPress) {
-      elementTypeProps.onPress = onPressHandler;
-    }
-
-    if (isCurrent) {
-      elementTypeProps.className = elementTypeProps.className ? "".concat(elementTypeProps.className, " is-current") : 'is-current';
-    }
-
-    return omit(elementTypeProps, 'onClick', 'onKeyDown', 'onKeyUp');
-  }, [elementType, itemProps, others, onPressHandler]);
-  return /*#__PURE__*/React.cloneElement(___EmotionJSX(ElementType, null), _objectSpread(_objectSpread({}, elementProps), {}, {
-    ref: ref
-  }), children);
-});
-BreadcrumbItem.propTypes = {
-  actionKey: PropTypes.string,
-
-  /** Whether the breadcrumb item represents the current page. */
-  isCurrent: PropTypes.bool,
-
-  /** The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'.
-   * Also can be passed 'Button', 'Icon', 'IconButton', 'Text' - will be used
-   * appropriate component from Astro library.
-   * */
-  elementType: PropTypes.elementType,
-
-  /** Whether the breadcrumb item is disabled. */
-  isDisabled: PropTypes.bool,
-  onAction: PropTypes.func
-};
-BreadcrumbItem.defaultProps = {
-  elementType: 'Link'
-};
-BreadcrumbItem.displayName = 'BreadcrumbItem';
-export default BreadcrumbItem;

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -1,96 +0,0 @@
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
-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, useCallback } from 'react';
-import { useBreadcrumbs } from '@react-aria/breadcrumbs';
-import PropTypes from 'prop-types';
-import { mergeProps } from '@react-aria/utils';
-import { Box, Icon } from '../../index';
-import { usePropWarning } from '../../hooks/';
-import BreadcrumbItem from './BreadcrumbItem';
-/**
- * Breadcrumbs component wrapping an array of `BreadcrumbItem` elements and icon,
- * which will be rendered between each node, sans last-child
- *
- * Utilizes [useBreadcrumbs](https://react-spectrum.adobe.com/react-aria/useBreadcrumbs.html) from React-Aria.
- * */
-
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
-  var children = props.children,
-      icon = props.icon,
-      iconProps = props.iconProps,
-      onAction = props.onAction,
-      others = _objectWithoutProperties(props, _excluded); // the following filters undefined values passed as a child
-
-
-  var filteredChildren = _Array$isArray(children) ? _filterInstanceProperty(children).call(children, function (child) {
-    return child;
-  }) : children;
-
-  var _useBreadcrumbs = useBreadcrumbs(props),
-      wrapperProps = _useBreadcrumbs.navProps;
-
-  var breadcrumbsRef = useRef();
-  usePropWarning(props, 'disabled', 'isDisabled');
-  /* istanbul ignore next */
-
-  useImperativeHandle(ref, function () {
-    return breadcrumbsRef.current;
-  });
-  var createBreadcrumb = useCallback(function (child, idx) {
-    var isCurrentItem = _Array$isArray(filteredChildren) && filteredChildren.length > 1 ? idx === children.length - 1 : true;
-    return ___EmotionJSX(Box, {
-      isRow: true,
-      sx: {
-        alignItems: 'center',
-        minHeight: 42
-      },
-      as: "li",
-      key: "li-".concat(child.key)
-    }, ___EmotionJSX(BreadcrumbItem, _extends({
-      "data-id": child['data-id'],
-      isCurrent: isCurrentItem,
-      onAction: onAction,
-      actionKey: child.key,
-      variant: "text.breadcrumbLink"
-    }, child.props), child.props.children), icon && !isCurrentItem && ___EmotionJSX(Icon, _extends({
-      "aria-hidden": "true",
-      icon: icon,
-      mx: 5,
-      size: 16
-    }, iconProps)));
-  }, [children.length, filteredChildren, icon, iconProps, onAction]);
-  return ___EmotionJSX("nav", null, ___EmotionJSX(Box, _extends({
-    ref: breadcrumbsRef,
-    isRow: true,
-    sx: {
-      overflow: 'auto',
-      paddingInlineStart: 'unset'
-    },
-    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. */
-  icon: PropTypes.elementType,
-
-  /** Props object passed along to the Icon component. */
-  iconProps: PropTypes.shape({}),
-
-  /** Whether the Breadcrumbs are disabled. */
-  isDisabled: PropTypes.bool,
-
-  /** Defines a string value that labels the current element. */
-  'aria-label': PropTypes.string,
-
-  /** Called when an item is acted upon (usually selection via press). */
-
-  /** (key: Key) => void. */
-  onAction: PropTypes.func
-};
-Breadcrumbs.displayName = 'Breadcrumbs';
-export default Breadcrumbs;

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

@@ -1,72 +0,0 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import { Item } from '@react-stately/collections';
-import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
-import Breadcrumbs from './Breadcrumbs';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Breadcrumbs',
-  component: Breadcrumbs,
-  parameters: {
-    docs: {
-      source: {
-        type: 'code'
-      }
-    }
-  },
-  argTypes: {
-    icon: {
-      control: {
-        type: 'none'
-      },
-      defaultValue: ChevronRightIcon,
-      description: 'The icon to render. List of icons at https://materialdesignicons.com/'
-    },
-    iconProps: {
-      control: {
-        type: 'none'
-      }
-    }
-  }
-};
-export var Default = function Default(args) {
-  var onAction = function onAction(key) {
-    return action("onPress ".concat(key));
-  };
-
-  return ___EmotionJSX(Breadcrumbs, _extends({
-    onAction: onAction
-  }, args), ___EmotionJSX(Item, {
-    key: "home",
-    "aria-label": "home",
-    variant: "buttons.link",
-    "data-id": "home",
-    href: "https://www.pingidentity.com"
-  }, "Home"), ___EmotionJSX(Item, {
-    key: "trendy",
-    "aria-label": "trendy",
-    variant: "buttons.link",
-    "data-id": "trendy",
-    href: "https://www.pingidentity.com"
-  }, "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() {
-  return ___EmotionJSX(Breadcrumbs, {
-    icon: ChevronRightIcon
-  }, ___EmotionJSX(Item, {
-    key: "Parent",
-    "aria-label": "parent",
-    elementType: "span"
-  }, "Parent"), ___EmotionJSX(Item, {
-    key: "FonsVernall",
-    "aria-label": "fons-vernall",
-    elementType: "span"
-  }, "Fons Vernall"));
-};

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

@@ -1,101 +0,0 @@
-import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React from 'react';
-import { mergeProps } from '@react-aria/utils';
-import CreateIcon from 'mdi-react/CreateIcon';
-import { Item } from '@react-stately/collections';
-import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
-import userEvent from '@testing-library/user-event';
-import Breadcrumbs from './Breadcrumbs';
-import axeTest from '../../utils/testUtils/testAxe';
-import { render, screen } from '../../utils/testUtils/testWrapper';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-var testId = 'test-breadcrumbs';
-var testItemId = 'test-breadcrumb-item';
-var testIconId = 'test-icon-item';
-var defaultProps = {
-  'data-testid': testId,
-  icon: ChevronRightIcon
-};
-var testItemsArr = ['item1', 'item2', 'item3'];
-
-var getComponent = function getComponent() {
-  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var itemProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  return render(___EmotionJSX(Breadcrumbs, mergeProps(defaultProps, props), _mapInstanceProperty(testItemsArr).call(testItemsArr, function (testItem, idx) {
-    return ___EmotionJSX(Item, _extends({
-      key: testItem,
-      "data-id": testItem
-    }, itemProps, {
-      isCurrent: idx === testItemsArr.length - 1
-    }), testItem);
-  })));
-}; // Need to be added to each test file to test accessibility using axe.
-
-
-axeTest(getComponent);
-test('default breadcrumbs', function () {
-  getComponent();
-  expect(screen.getByTestId(testId)).toBeInTheDocument();
-});
-test('should render nodes from the children', function () {
-  getComponent();
-  expect(screen.getByText(testItemsArr[0])).toBeInTheDocument();
-  expect(screen.getByText(testItemsArr[1])).toBeInTheDocument();
-  expect(screen.getByText(testItemsArr[2])).toBeInTheDocument();
-});
-test('should render correct amount of icons', function () {
-  getComponent({
-    iconProps: {
-      'data-testid': testIconId
-    }
-  });
-  expect(screen.getAllByTestId(testIconId).length).toBe(testItemsArr.length - 1);
-});
-test('breadcrumbItem should render breadcrumbItem as a Text component when appropriate elementType passed', function () {
-  getComponent({}, {
-    elementType: 'Text',
-    'data-testid': testItemId
-  });
-  expect(screen.getAllByTestId(testItemId)[0]).toBeInstanceOf(HTMLSpanElement);
-});
-test('breadcrumbItem should render breadcrumbItem as a IconButton component when appropriate elementType passed', function () {
-  getComponent({}, {
-    elementType: 'IconButton',
-    'data-testid': testItemId,
-    icon: CreateIcon
-  });
-  expect(screen.getAllByTestId(testItemId)[0]).toBeInstanceOf(HTMLButtonElement);
-});
-test('breadcrumbItem should render breadcrumbItem as a html tag when appropriate elementType passed', function () {
-  getComponent({}, {
-    elementType: 'a',
-    'data-testid': testItemId,
-    icon: CreateIcon
-  });
-  expect(screen.getAllByTestId(testItemId)[0]).toBeInstanceOf(HTMLAnchorElement);
-});
-test('breadcrumbs will use onAction if provided', function () {
-  var mockOnAction = jest.fn();
-  getComponent({}, {
-    elementType: 'Link',
-    onAction: mockOnAction
-  });
-  userEvent.click(screen.getByText(testItemsArr[0]));
-  expect(mockOnAction).toHaveBeenCalled();
-});
-test('Item accepts a data-id and the data-id can be found in the DOM', function () {
-  getComponent();
-  var item = screen.getByText(testItemsArr[0]);
-  expect(item).toBeInTheDocument();
-  expect(item).toHaveAttribute('data-id', testItemsArr[0]);
-});
-test('will render correctly with single child item', function () {
-  render(___EmotionJSX(Breadcrumbs, mergeProps(defaultProps), ___EmotionJSX(Item, {
-    key: testItemsArr[0],
-    "data-id": testItemsArr[0],
-    isCurrent: true
-  }, testItemsArr[0])));
-  expect(screen.getByTestId(testId)).toBeInTheDocument();
-  expect(screen.getByText(testItemsArr[0])).toBeInTheDocument();
-});