@pingux/astro 2.0.0-alpha.1 → 2.0.0-alpha.4

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,7 +76,6 @@ 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",

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();

package/lib/components/IconButton/IconButton.js

@@ -10,19 +10,17 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "className", "title", "variant", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
-
 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, useRef, useImperativeHandle, useContext } from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useButton, useFocusRing } from 'react-aria';
-import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { Pressable, useHover } from '@react-aria/interactions';
-import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
+import PropTypes from 'prop-types';
+import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { BadgeContext } from '../../context/BadgeContext';
+import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
+
 /**
  * Convenience wrapper for a Button + Icon. This component applies specific styles necessary for
  * icons and changes the behavior pattern for Button. This ensures compatibility across browsers
@@ -31,119 +29,99 @@ import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
  * In addition to the props below, `IconButton` accepts the same props available to the normal
  * `Button` component.
  */
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      className = props.className,
-      title = props.title,
-      variant = props.variant,
-      onPress = props.onPress,
-      onPressStart = props.onPressStart,
-      onPressEnd = props.onPressEnd,
-      onPressChange = props.onPressChange,
-      onPressUp = props.onPressUp,
-      isDisabled = props.isDisabled,
-      others = _objectWithoutProperties(props, _excluded);
-
+    className = props.className,
+    title = props.title,
+    variant = props.variant,
+    onPress = props.onPress,
+    onPressStart = props.onPressStart,
+    onPressEnd = props.onPressEnd,
+    onPressChange = props.onPressChange,
+    onPressUp = props.onPressUp,
+    isDisabled = props.isDisabled,
+    others = _objectWithoutProperties(props, _excluded);
   var buttonRef = useRef();
   /* istanbul ignore next */
-
   useImperativeHandle(ref, function () {
     return buttonRef.current;
   });
-
   var _useButton = useButton(_objectSpread({}, props), buttonRef),
-      buttonProps = _useButton.buttonProps,
-      isPressed = _useButton.isPressed;
-
+    buttonProps = _useButton.buttonProps,
+    isPressed = _useButton.isPressed;
   var _useContext = useContext(BadgeContext),
-      chipBg = _useContext.bg;
-
+    chipBg = _useContext.bg;
   var _useHover = useHover(props),
-      hoverProps = _useHover.hoverProps,
-      isHovered = _useHover.isHovered;
-
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
   var _useFocusRing = useFocusRing(),
-      isFocusVisible = _useFocusRing.isFocusVisible,
-      focusProps = _useFocusRing.focusProps;
-
+    isFocusVisible = _useFocusRing.isFocusVisible,
+    focusProps = _useFocusRing.focusProps;
   var _useStatusClasses = useStatusClasses(className, {
-    isHovered: isHovered,
-    isPressed: isPressed,
-    isFocused: isFocusVisible,
-    isDisabled: isDisabled
-  }),
-      classNames = _useStatusClasses.classNames;
-
+      isHovered: isHovered,
+      isPressed: isPressed,
+      isFocused: isFocusVisible,
+      isDisabled: isDisabled
+    }),
+    classNames = _useStatusClasses.classNames;
   var ariaLabel = props['aria-label'] || title;
   useAriaLabelWarning('IconButton', ariaLabel);
-
-  var button = ___EmotionJSX(ThemeUIIconButton, _extends({
+  var button = ___EmotionJSX(Pressable, _extends({
+    ref: buttonRef
+  }, mergeProps(buttonProps, others, hoverProps, focusProps)), ___EmotionJSX(ThemeUIIconButton, {
     tabIndex: 0,
-    ref: buttonRef,
     className: classNames,
     "aria-label": ariaLabel,
     sx: chipBg && isHovered && {
       'path': {
         fill: chipBg
       }
-    }
-  }, mergeProps(buttonProps, others, hoverProps, focusProps), {
+    },
     variant: "iconButtons.".concat(variant),
     onPointerOver: hoverProps.onPointerEnter
-  }), children);
-
+  }, children));
   if (title) {
     return ___EmotionJSX(TooltipTrigger, {
       isDisabled: !title
-    }, ___EmotionJSX(Pressable, null, button), title && ___EmotionJSX(Tooltip, null, title));
+    }, button, title && ___EmotionJSX(Tooltip, null, title));
   }
-
   return button;
 });
 IconButton.propTypes = {
   /** Styling to apply to the IconButton. */
   variant: PropTypes.string,
-
   /** Defines a string value that labels the current element. */
   'aria-label': PropTypes.string,
-
   /** Content will be displayed in a tooltip on hover or focus. */
   title: PropTypes.string,
-
   /**
    * Handler that is called when the press is released over the target.
    * (e: PressEvent) => void
    */
   onPress: PropTypes.func,
-
   /**
    * Handler that is called when a press interaction starts.
    * (e: PressEvent) => void
    */
   onPressStart: PropTypes.func,
-
   /**
    * Handler that is called when a press interaction ends, either over the target or when the
    * pointer leaves the target.
    * (e: PressEvent) => void
    */
   onPressEnd: PropTypes.func,
-
   /**
    * Handler that is called when the press state changes.
    * (isPressed: boolean) => void
    */
   onPressChange: PropTypes.func,
-
   /**
    * Handler that is called when a press is released over the target, regardless of whether it
    * started on the target or not.
    * (e: PressEvent) => void
    */
   onPressUp: PropTypes.func,
-
   /** Whether the icon is disabled. */
   isDisabled: PropTypes.bool
 };

package/lib/components/IconButton/IconButton.stories.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import CreateIcon from 'mdi-react/CreateIcon';
-import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
 import DeleteIcon from 'mdi-react/DeleteIcon';
-import PlusIcon from 'mdi-react/PlusIcon';
+import DotsVerticalIcon from 'mdi-react/DotsVerticalIcon';
 import PencilIcon from 'mdi-react/PencilIcon';
-import { Box, Icon, IconButton, Table, TableHead, TableRow, TableCell, TableBody, Text } from '../../index';
+import PlusIcon from 'mdi-react/PlusIcon';
+import { Box, Icon, IconButton, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/IconButton',
@@ -97,7 +97,7 @@ export var Sizes = function Sizes() {
     width: "40%"
   }, ___EmotionJSX(Text, null, "XS | 21px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, " ", "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
+  }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, "<Icon icon={CreateIcon} size='xs'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
@@ -116,7 +116,7 @@ export var Sizes = function Sizes() {
     width: "40%"
   }, ___EmotionJSX(Text, null, "SM | 26px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, " ", "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
+  }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, "<Icon icon={CreateIcon} size='sm'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
@@ -135,7 +135,7 @@ export var Sizes = function Sizes() {
     width: "40%"
   }, ___EmotionJSX(Text, null, "MD | 31px")), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
     fontFamily: "monospace"
-  }, " ", "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
+  }, ' ', "<IconButton aria-label='create button' variant='inverted'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
   }, "<Icon icon={CreateIcon} size='md'/>"), ___EmotionJSX(Text, {
     fontFamily: "monospace"
@@ -151,7 +151,8 @@ export var Sizes = function Sizes() {
   }))))));
 };
 export var CommonlyUsed = function CommonlyUsed() {
-  return (// please note these are intentionally not mapped for story transparency
+  return (
+    // please note these are intentionally not mapped for story transparency
     ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
       fontFamily: "monospace",
       mb: "md"

package/lib/components/IconButton/IconButton.styles.js

@@ -7,18 +7,15 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 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 { badgeWithSlotDeleteButton, deleteButton } from '../Badge/Badge.styles';
 import { defaultFocus } from '../Button/Buttons.styles';
 import { toggle } from '../CollapsiblePanel/CollapsiblePanel.styles';
 import { copyButton } from '../CopyText/CopyText.styles';
 import { hintButton } from '../HelpHint/HelpHint.styles';
-import { deleteButton, badgeWithSlotDeleteButton } from '../Badge/Badge.styles';
-import { modalCloseButton } from '../Modal/Modal.styles';
 import { messageCloseButton } from '../Messages/Message.styles';
+import { modalCloseButton } from '../Modal/Modal.styles';
 import { button } from '../TooltipTrigger/Tooltip.styles';
 export var base = {
   justifyContent: 'center',
@@ -67,7 +64,6 @@ var bidirectional = {
   },
   '&.is-focused': _objectSpread({}, defaultFocus)
 };
-
 var inverted = _objectSpread(_objectSpread({}, base), {}, {
   bg: 'active',
   borderColor: 'active',
@@ -87,25 +83,22 @@ var inverted = _objectSpread(_objectSpread({}, base), {}, {
     color: 'white'
   }
 });
-
 var invertedSquare = _objectSpread(_objectSpread({}, inverted), {}, {
   borderRadius: '2px'
 });
-
 export var square = _objectSpread(_objectSpread({}, base), {}, {
   borderRadius: '2px'
 });
-
 var svgIconButton = _objectSpread(_objectSpread({}, base), {}, {
   path: {
     fill: 'default'
   }
 });
+
 /**
  * Recipe related variants below
  */
 
-
 var applicationPortal = _objectSpread(_objectSpread({}, base), {}, {
   background: 'transparent',
   '&.is-focused': _objectSpread({}, defaultFocus),
@@ -120,7 +113,6 @@ var applicationPortal = _objectSpread(_objectSpread({}, base), {}, {
     }
   }
 });
-
 var applicationPortalPinned = _objectSpread(_objectSpread({}, base), {}, {
   'path': {
     fill: 'success.bright'
@@ -138,7 +130,6 @@ var applicationPortalPinned = _objectSpread(_objectSpread({}, base), {}, {
     }
   }
 });
-
 export default {
   base: base,
   bidirectional: bidirectional,

package/lib/components/IconButton/IconButton.test.js

@@ -7,26 +7,23 @@ import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import IconButton from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var iconTestId = 'test-icon';
-
 var Icon = function Icon(props) {
   return ___EmotionJSX(CreateIcon, _extends({
     "data-testid": iconTestId
   }, props));
 };
-
 var testId = 'test-button';
 var defaultProps = {
   'data-testid': testId,
   icon: Icon,
   'aria-label': 'Create'
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(IconButton, _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 button', function () {
   getComponent();
@@ -50,11 +47,13 @@ test('icon button press', function () {
     onPress: onPress
   });
   var button = screen.getByRole('button');
-  expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
+  expect(onPress).not.toHaveBeenCalled();
 
+  // Hold down the button to see pressed styles
   fireEvent.mouseDown(button);
-  expect(button).toHaveClass('is-pressed'); // Finish the click to fire the event handler
+  expect(button).toHaveClass('is-pressed');
 
+  // Finish the click to fire the event handler
   fireEvent.mouseUp(button);
   expect(button).not.toHaveClass('is-pressed');
   expect(onPress).toHaveBeenCalledTimes(1);

package/lib/components/IconButtonToggle/IconButtonToggle.js

@@ -1,30 +1,27 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import PropTypes from 'prop-types';
-import IconButton from '../IconButton';
-import Icon from '../Icon';
 import { useComponentToggle } from '../../hooks';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-
 var IconButtonToggle = function IconButtonToggle(props) {
   var toggledIcon = props.toggledIcon,
-      defaultIcon = props.defaultIcon,
-      buttonProps = props.buttonProps,
-      iconProps = props.iconProps,
-      isToggled = props.isToggled,
-      onToggle = props.onToggle,
-      title = props.title;
+    defaultIcon = props.defaultIcon,
+    buttonProps = props.buttonProps,
+    iconProps = props.iconProps,
+    isToggled = props.isToggled,
+    onToggle = props.onToggle,
+    title = props.title;
   var conditionalRenderProps = {
     ComponentToRenderIfTrue: toggledIcon,
     ComponentToRenderIfFalse: defaultIcon,
     condition: isToggled,
     onConditionChange: onToggle
   };
-
   var _useComponentToggle = useComponentToggle(conditionalRenderProps),
-      handleConditionChange = _useComponentToggle.handleConditionChange,
-      RenderedComponent = _useComponentToggle.RenderedComponent;
-
+    handleConditionChange = _useComponentToggle.handleConditionChange,
+    RenderedComponent = _useComponentToggle.RenderedComponent;
   return ___EmotionJSX(IconButton, _extends({
     onPress: handleConditionChange
   }, buttonProps, {
@@ -33,26 +30,19 @@ var IconButtonToggle = function IconButtonToggle(props) {
     icon: RenderedComponent
   }, iconProps)));
 };
-
 IconButtonToggle.propTypes = {
   /** Props object that is spread into the icon element. */
   iconProps: PropTypes.shape({}),
-
   /** Props object that is spread into the button element. */
   buttonProps: PropTypes.shape({}),
-
   /** The icon that will render by default. */
   defaultIcon: PropTypes.elementType.isRequired,
-
   /** The icon that will render after toggling the icon. */
   toggledIcon: PropTypes.elementType.isRequired,
-
   /** Whether or not the icon is toggled. (use only when controlled) */
   isToggled: PropTypes.bool,
-
   /** Function that is passed into the IconButton within this component. */
   onToggle: PropTypes.func,
-
   /** Content will be displayed in a tooltip on hover or focus. */
   title: PropTypes.string
 };