@pingux/astro 1.42.2 → 2.0.0-alpha.4

package/lib/components/IconButton/IconButton.js

@@ -9,22 +9,18 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 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", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp", "isDisabled"];
-
+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 React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import { mergeProps, useButton, useFocusRing } from 'react-aria';
+import { Pressable, useHover } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
-import { useButton } from '@react-aria/button';
-import { useFocusRing } from '@react-aria/focus';
-import { Pressable, useHover } from '@react-aria/interactions';
-import { mergeProps } from '@react-aria/utils';
-import { useAriaLabelWarning, useStatusClasses } from '../../hooks';
 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
@@ -33,122 +29,104 @@ 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,
-      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
 };
 IconButton.defaultProps = {
-  variant: 'iconButton',
+  variant: 'base',
   isDisabled: false
 };
 IconButton.displayName = 'Icon Button';

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',
@@ -39,9 +39,9 @@ export default {
     variant: {
       control: {
         type: 'select',
-        options: ['iconButton', 'inverted', 'square', 'invertedSquare']
+        options: ['base', 'inverted', 'invertedSquare', 'square']
       },
-      defaultValue: 'iconButton'
+      defaultValue: 'base'
     },
     size: {
       control: {
@@ -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

@@ -0,0 +1,155 @@
+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 { 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 { messageCloseButton } from '../Messages/Message.styles';
+import { modalCloseButton } from '../Modal/Modal.styles';
+import { button } from '../TooltipTrigger/Tooltip.styles';
+export var base = {
+  justifyContent: 'center',
+  appearance: 'none',
+  alignItems: 'center',
+  alignSelf: 'baseline',
+  display: 'inline-flex !important',
+  flexGrow: 0,
+  flexShrink: 0,
+  borderRadius: '100%',
+  cursor: 'pointer',
+  bg: 'transparent',
+  p: '3px',
+  width: 'inherit',
+  height: 'inherit',
+  path: {
+    fill: 'neutral.40'
+  },
+  outline: 'none',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    bg: 'accent.95'
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'white'
+    },
+    bg: 'active'
+  }
+};
+var bidirectional = {
+  border: '1px solid',
+  outline: 'none',
+  height: '24px',
+  width: '24px',
+  color: 'active',
+  borderRadius: '12px',
+  borderColor: 'active',
+  '&.is-hovered': {
+    color: 'accent.40',
+    borderColor: 'accent.40'
+  },
+  '&.is-pressed': {
+    color: 'accent.20',
+    borderColor: 'accent.20'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus)
+};
+var inverted = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'active',
+  borderColor: 'active',
+  'path': {
+    fill: 'white'
+  },
+  '&.is-hovered': {
+    bg: 'accent.40',
+    borderColor: 'accent.40',
+    color: 'white',
+    boxShadow: 'standard'
+  },
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-pressed': {
+    bg: 'accent.20',
+    borderColor: 'accent.20',
+    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),
+  '&.is-hovered': {
+    'path': {
+      fill: 'active'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'active'
+    }
+  }
+});
+var applicationPortalPinned = _objectSpread(_objectSpread({}, base), {}, {
+  'path': {
+    fill: 'success.bright'
+  },
+  background: 'transparent',
+  '&.is-focused': _objectSpread({}, defaultFocus),
+  '&.is-hovered': {
+    'path': {
+      fill: 'active'
+    }
+  },
+  '&.is-pressed': {
+    'path': {
+      fill: 'active'
+    }
+  }
+});
+export default {
+  base: base,
+  bidirectional: bidirectional,
+  badge: {
+    deleteButton: deleteButton
+  },
+  badgeWithSlotDeleteButton: badgeWithSlotDeleteButton,
+  copyButton: copyButton,
+  hintButton: _objectSpread(_objectSpread({}, base), hintButton),
+  inverted: inverted,
+  messageCloseButton: _objectSpread(_objectSpread({}, base), messageCloseButton),
+  modalCloseButton: _objectSpread(_objectSpread({}, base), modalCloseButton),
+  invertedSquare: invertedSquare,
+  square: square,
+  svgIconButton: svgIconButton,
+  toggle: toggle,
+  tooltip: {
+    button: _objectSpread(_objectSpread({}, base), button)
+  },
+  // Recipe related variants
+  applicationPortal: applicationPortal,
+  applicationPortalPinned: applicationPortalPinned
+};

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
 };

package/lib/components/IconButtonToggle/IconButtonToggle.stories.js

@@ -1,8 +1,8 @@
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React, { useState } from 'react';
-import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
+import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import IconButtonToggle from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -20,14 +20,12 @@ export var Default = function Default(args) {
 };
 export var Controlled = function Controlled(args) {
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isToggled = _useState2[0],
-      onToggledChange = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isToggled = _useState2[0],
+    onToggledChange = _useState2[1];
   var handleToggleChange = function handleToggleChange() {
     onToggledChange(!isToggled);
   };
-
   return ___EmotionJSX(IconButtonToggle, _extends({}, args, {
     toggledIcon: EyeIcon,
     defaultIcon: EyeOffIcon,

package/lib/components/IconButtonToggle/IconButtonToggle.test.js

@@ -1,25 +1,22 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import EyeOffIcon from 'mdi-react/EyeOffOutlineIcon';
+import EyeIcon from 'mdi-react/EyeOutlineIcon';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
 import IconButtonToggle from '.';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var iconTestId = 'test-icon';
-
 var OnIcon = function OnIcon(props) {
   return ___EmotionJSX(EyeIcon, _extends({
     "data-testid": iconTestId
   }, props));
 };
-
 var OffIcon = function OffIcon(props) {
   return ___EmotionJSX(EyeOffIcon, _extends({
     "data-testid": iconTestId
   }, props));
 };
-
 var testId = 'test-button';
 var defaultProps = {
   buttonProps: {
@@ -29,13 +26,12 @@ var defaultProps = {
   defaultIcon: OffIcon,
   toggledIcon: OnIcon
 };
-
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return render(___EmotionJSX(IconButtonToggle, _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();