@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/FileInputField/FileItem.js

@@ -1,31 +1,28 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { useCallback, useRef } from 'react';
-import InsertDriveFileIcon from 'mdi-react/InsertDriveFileIcon';
-import ErrorIcon from 'mdi-react/ErrorIcon';
+import { useVisuallyHidden } from 'react-aria';
 import DeleteIcon from 'mdi-react/DeleteIcon';
+import ErrorIcon from 'mdi-react/ErrorIcon';
+import InsertDriveFileIcon from 'mdi-react/InsertDriveFileIcon';
 import PropTypes from 'prop-types';
-import { useVisuallyHidden } from '@react-aria/visually-hidden';
-import { Box, Button, IconButton, Icon, Text } from '../../index';
+import { Box, Button, Icon, IconButton, Text } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var FileItem = function FileItem(props) {
   var downloadLink = props.downloadLink,
-      handleFileDelete = props.handleFileDelete,
-      id = props.id,
-      isDisabled = props.isDisabled,
-      name = props.name,
-      status = props.status,
-      textProps = props.textProps,
-      helperTextId = props.helperTextId;
+    handleFileDelete = props.handleFileDelete,
+    id = props.id,
+    isDisabled = props.isDisabled,
+    name = props.name,
+    status = props.status,
+    textProps = props.textProps,
+    helperTextId = props.helperTextId;
   var handleDeleteButtonPress = useCallback(function (e) {
     return handleFileDelete(e, id);
   }, [id, handleFileDelete]);
-
   var _useVisuallyHidden = useVisuallyHidden(),
-      visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
-
+    visuallyHiddenProps = _useVisuallyHidden.visuallyHiddenProps;
   var downloadRef = useRef();
   var getFileIconProps = useCallback(function () {
     switch (status) {
@@ -35,7 +32,6 @@ var FileItem = function FileItem(props) {
           color: 'critical.dark',
           'data-testid': 'file-uploaded__file-icon--is-error'
         };
-
       default:
         return {
           icon: InsertDriveFileIcon,
@@ -43,11 +39,9 @@ var FileItem = function FileItem(props) {
         };
     }
   }, [status]);
-
   var handleDownloadPress = function handleDownloadPress() {
     downloadRef.current.click();
   };
-
   return ___EmotionJSX(Box, {
     isRow: true,
     alignItems: "center",
@@ -59,7 +53,7 @@ var FileItem = function FileItem(props) {
   }, getFileIconProps(), {
     isDisabled: isDisabled
   })), ___EmotionJSX(Button, {
-    variant: "fileInputField",
+    variant: "forms.fileInputField.button",
     mx: 5,
     isDisabled: isDisabled,
     "aria-label": name,
@@ -90,7 +84,6 @@ var FileItem = function FileItem(props) {
     tabIndex: -1
   })));
 };
-
 export default FileItem;
 FileItem.propTypes = {
   downloadLink: PropTypes.string,

package/lib/components/FileInputField/FileSelect.js

@@ -10,27 +10,21 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["buttonText", "handleFileSelect", "isDisabled", "textProps"];
-
 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 from 'react';
 import PropTypes from 'prop-types';
-import { Button, Text } from '../../';
+import { Button, Text } from '../..';
 import { ariaAttributesBasePropTypes, getAriaAttributeProps } from '../../utils/devUtils/props/ariaAttributes';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var FileSelect = function FileSelect(_ref) {
   var buttonText = _ref.buttonText,
-      handleFileSelect = _ref.handleFileSelect,
-      isDisabled = _ref.isDisabled,
-      textProps = _ref.textProps,
-      others = _objectWithoutProperties(_ref, _excluded);
-
+    handleFileSelect = _ref.handleFileSelect,
+    isDisabled = _ref.isDisabled,
+    textProps = _ref.textProps,
+    others = _objectWithoutProperties(_ref, _excluded);
   var _getAriaAttributeProp = getAriaAttributeProps(others),
-      ariaProps = _getAriaAttributeProp.ariaProps;
-
+    ariaProps = _getAriaAttributeProp.ariaProps;
   return ___EmotionJSX(Button, _extends({
     "aria-label": buttonText,
     "data-testid": "file-input-field__file-select",
@@ -38,12 +32,11 @@ var FileSelect = function FileSelect(_ref) {
     mx: 15,
     my: 5,
     onPress: handleFileSelect,
-    variant: "fileInputField"
+    variant: "forms.fileInputField.button"
   }, ariaProps), ___EmotionJSX(Text, _extends({
     color: "active"
   }, textProps), buttonText));
 };
-
 export default FileSelect;
 FileSelect.propTypes = _objectSpread({
   buttonText: PropTypes.string,

package/lib/components/HelpHint/HelpHint.js

@@ -4,11 +4,10 @@ var _excluded = ["children", "tooltipProps", "iconButtonProps"];
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
+import { Icon } from '../..';
 import IconButton from '../IconButton';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
-import Icon from '../Icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var HelpIcon = function HelpIcon() {
   return ___EmotionJSX("svg", {
     width: "7",
@@ -21,24 +20,21 @@ var HelpIcon = function HelpIcon() {
     fill: "#3B4A58"
   }));
 };
-
 var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      tooltipProps = props.tooltipProps,
-      iconButtonProps = props.iconButtonProps,
-      others = _objectWithoutProperties(props, _excluded);
-
+    tooltipProps = props.tooltipProps,
+    iconButtonProps = props.iconButtonProps,
+    others = _objectWithoutProperties(props, _excluded);
   var tooltipId = uuid();
   return ___EmotionJSX(TooltipTrigger, _extends({
     ref: ref,
     direction: "top"
   }, others, tooltipProps), ___EmotionJSX(IconButton, _extends({
-    variant: "helpHint",
+    variant: "hintButton",
     "aria-label": "label help hint",
-    "data-testid": "help-hint__button"
-  }, iconButtonProps, {
+    "data-testid": "help-hint__button",
     "aria-describedby": tooltipId
-  }), ___EmotionJSX(Icon, {
+  }, iconButtonProps), ___EmotionJSX(Icon, {
     icon: HelpIcon
   })), ___EmotionJSX(Tooltip, _extends({}, tooltipProps, {
     role: "tooltip",
@@ -49,7 +45,6 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
 HelpHint.propTypes = {
   /** Props object that is spread directly into the tooltip element. */
   tooltipProps: PropTypes.shape({}),
-
   /** Props object that is spread directly into the IconButton element. */
   iconButtonProps: PropTypes.shape({})
 };

package/lib/components/HelpHint/HelpHint.stories.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import HelpHint from '.';
-import Box from '../Box';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import Box from '../Box';
 import HelpHintReadme from './HelpHint.mdx';
+import HelpHint from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/HelpHint',

package/lib/components/HelpHint/HelpHint.styles.js

@@ -0,0 +1,50 @@
+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 _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+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 _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+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 { defaultFocus } from '../Button/Buttons.styles';
+export var hintButton = {
+  bg: 'neutral.90',
+  borderColor: 'active',
+  mt: 'auto',
+  mb: 'auto',
+  ml: '5px',
+  maxWidth: '13px',
+  maxHeight: '14px',
+  borderRadius: '5.5px',
+  'svg': {
+    'height': '100%',
+    mb: 0.75
+  },
+  'path': {
+    fill: 'neutral.20'
+  },
+  '&.is-hovered': {
+    bg: 'accent.20',
+    borderColor: 'accent.20',
+    'path': {
+      fill: 'white'
+    },
+    color: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20',
+    color: 'white'
+  },
+  ':focus': {
+    outline: 'none'
+  }
+};
+export default {
+  hintButton: hintButton
+};

package/lib/components/HelpHint/HelpHint.test.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import userEvent from '@testing-library/user-event';
-import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import axeTest from '../../utils/testUtils/testAxe';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import HelpHint from './HelpHint';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'help-hint__button';
@@ -10,13 +10,12 @@ var tooltipValue = 'Some text';
 var defaultProps = {
   children: tooltipValue
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(HelpHint, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('renders HelpHint component', function () {
   getComponent();

package/lib/components/Icon/Icon.js

@@ -8,24 +8,19 @@ import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/obje
 import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-
 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 } from 'react';
 import PropTypes from 'prop-types';
-import Box from '../Box';
 import { useTShirtSize } from '../../hooks';
+import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
   var color = props.color,
-      IconComponent = props.icon,
-      sx = props.sx;
-
+    IconComponent = props.icon,
+    sx = props.sx;
   var _useTShirtSize = useTShirtSize(props),
-      sizeProps = _useTShirtSize.sizeProps;
-
+    sizeProps = _useTShirtSize.sizeProps;
   return ___EmotionJSX(Box, _extends({
     as: IconComponent,
     ref: ref
@@ -40,13 +35,11 @@ var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
 Icon.propTypes = {
   /** The icon to render. */
   icon: PropTypes.elementType.isRequired,
-
   /**
    * The size of the icon container. If given a number value, it will be converted to pixels.
    * Tshirt sizing is recommended and can be passed to the size prop as 'xs', 'sm' , 'md'
    * rendering 15, 20, and 25 pixel svg containers.  */
   size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
   /** A theme-aware prop to set the icon's color. */
   color: PropTypes.string
 };

package/lib/components/Icon/Icon.stories.js

@@ -3,16 +3,16 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React from 'react';
-import AccountIcon from 'mdi-react/AccountIcon';
 import AccountGroupIcon from 'mdi-react/AccountGroupIcon';
+import AccountIcon from 'mdi-react/AccountIcon';
 import LockIcon from 'mdi-react/LockIcon';
 import SearchIcon from 'mdi-react/SearchIcon';
 import TagIcon from 'mdi-react/TagIcon';
 import { v4 as uuid } from 'uuid';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { Box, Icon, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
 import { flatColorList } from '../../styles/colors';
 import { tShirtSizes } from '../../utils/devUtils/constants/tShirtSizes';
-import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import IconReadme from './Icon.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -48,8 +48,7 @@ export default {
         type: 'select',
         options: _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref) {
           var _ref2 = _slicedToArray(_ref, 1),
-              colorName = _ref2[0];
-
+            colorName = _ref2[0];
           return colorName;
         })
       },
@@ -65,7 +64,7 @@ export var SVGIcons = function SVGIcons() {
   var SVGComponent = function SVGComponent(props) {
     var id = uuid();
     var _props$title = props.title,
-        title = _props$title === void 0 ? 'User Icon' : _props$title;
+      title = _props$title === void 0 ? 'User Icon' : _props$title;
     return ___EmotionJSX("svg", _extends({
       viewBox: "0 0 24 24"
     }, props, {
@@ -77,11 +76,10 @@ export var SVGIcons = function SVGIcons() {
       d: "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
     }));
   };
-
   return ___EmotionJSX(Icon, {
     icon: SVGComponent,
     color: "active",
-    size: "sm"
+    size: 40
   });
 };
 var rowHeadings = ['SVG Size', 'Code Example', 'Icon Example'];

package/lib/components/Icon/Icon.test.js

@@ -2,21 +2,20 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import Earth from 'mdi-react/EarthIcon';
-import Icon from '../Icon';
 import axeTest from '../../utils/testUtils/testAxe';
+import Icon from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-icon';
 var defaultProps = {
   'data-testid': testId,
   icon: Earth
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(Icon, _extends({}, defaultProps, props)));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default icon', function () {
   getComponent();

package/lib/components/Icon/NoticeIcon.js

@@ -2,9 +2,7 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 var _excluded = ["status"];
-
 var _noticeIcons;
-
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React from 'react';
 import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
@@ -30,9 +28,8 @@ export var noticeIcons = (_noticeIcons = {}, _defineProperty(_noticeIcons, statu
 }), _noticeIcons);
 export var NoticeIcon = function NoticeIcon(_ref) {
   var _ref$status = _ref.status,
-      status = _ref$status === void 0 ? statuses.DEFAULT : _ref$status,
-      others = _objectWithoutProperties(_ref, _excluded);
-
+    status = _ref$status === void 0 ? statuses.DEFAULT : _ref$status,
+    others = _objectWithoutProperties(_ref, _excluded);
   return ___EmotionJSX(Icon, _extends({
     "data-testid": noticeIcons[status].testid,
     icon: noticeIcons[status].icon

package/lib/components/Icon/NoticeIcon.test.js

@@ -4,12 +4,10 @@ import statuses from '../../utils/devUtils/constants/statuses';
 import { render } from '../../utils/testUtils/testWrapper';
 import { NoticeIcon, noticeIcons } from './NoticeIcon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(NoticeIcon, props));
 };
-
 describe('NoticeIcon', function () {
   test('renders', function () {
     getComponent();

package/lib/components/IconBadge/IconBadge.js

@@ -11,29 +11,23 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "sx", "circleColor", "baseSize", "circleSize"];
-
 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 from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var IconBadge = function IconBadge(props) {
   var children = props.children,
-      sx = props.sx,
-      circleColor = props.circleColor,
-      baseSize = props.baseSize,
-      circleSize = props.circleSize,
-      others = _objectWithoutProperties(props, _excluded);
-
+    sx = props.sx,
+    circleColor = props.circleColor,
+    baseSize = props.baseSize,
+    circleSize = props.circleSize,
+    others = _objectWithoutProperties(props, _excluded);
   var _React$Children$toArr = React.Children.toArray(children),
-      _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
-      firstIcon = _React$Children$toArr2[0],
-      secondIcon = _React$Children$toArr2[1];
-
+    _React$Children$toArr2 = _slicedToArray(_React$Children$toArr, 2),
+    firstIcon = _React$Children$toArr2[0],
+    secondIcon = _React$Children$toArr2[1];
   return ___EmotionJSX(Box, _extends({
     as: "span",
     sx: _objectSpread({
@@ -58,21 +52,17 @@ var IconBadge = function IconBadge(props) {
     }
   }, secondIcon));
 };
-
 IconBadge.propTypes = {
   /** JSX styling that is passed into the component. */
   sx: PropTypes.shape({}),
-
   /** Color that is applied to the circular background.
    * Default is white.
    */
   circleColor: PropTypes.string,
-
   /**
    * The size of the base Icon. When given a number value, it will be converted to pixels.
    */
   baseSize: PropTypes.number,
-
   /**
    * The size of the Icon within the circle.
    * When given a number value, it will be converted to pixels.

package/lib/components/IconBadge/IconBadge.stories.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import ArrowIcon from 'mdi-react/ArrowTopRightThickIcon';
 import GroupIcon from 'mdi-react/AccountGroupIcon';
+import ArrowIcon from 'mdi-react/ArrowTopRightThickIcon';
+import { Box, Icon } from '../../index';
 import IconBadge from '.';
-import { Icon, Box } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/IconBadge',

package/lib/components/IconBadge/IconBadge.test.js

@@ -1,14 +1,13 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { IconBadge, Icon } from '../../index';
+import { Icon, IconBadge } from '../../index';
 import axeTest from '../../utils/testUtils/testAxe';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-icon';
 var defaultProps = {
   'data-testid': testId
 };
-
 var ThisIcon = function ThisIcon(args) {
   return ___EmotionJSX("svg", _extends({
     fill: "none",
@@ -18,7 +17,6 @@ var ThisIcon = function ThisIcon(args) {
     fill: "currentColor"
   }));
 };
-
 var ThisSecondIcon = function ThisSecondIcon(args) {
   return ___EmotionJSX("svg", _extends({
     fill: "none",
@@ -28,7 +26,6 @@ var ThisSecondIcon = function ThisSecondIcon(args) {
     fill: "currentColor"
   }));
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(IconBadge, _extends({}, props, {
@@ -42,9 +39,9 @@ var getComponent = function getComponent() {
     size: "9px",
     color: "accent.40"
   })));
-}; // Need to be added to each test file to test accessibility using axe.
-
+};
 
+// Need to be added to each test file to test accessibility using axe.
 axeTest(getComponent);
 test('default iconbadge render', function () {
   getComponent();