IconButton: update to interface and named export

Author: clairep94

client/common/IconButton.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '../test-utils';
-import IconButton from './IconButton';
+import { IconButton } from './IconButton';
 
 const MockIcon = (props: React.SVGProps<SVGSVGElement>) => (
   <svg data-testid="mock-icon" {...props} />

client/common/IconButton.tsx

@@ -11,14 +11,12 @@ const ButtonWrapper = styled(Button)`
   }
 `;
 
-export type IconButtonProps = Omit<
-  ButtonProps,
-  'iconBefore' | 'display' | 'focusable'
-> & {
+export interface IconButtonProps
+  extends Omit<ButtonProps, 'iconBefore' | 'display' | 'focusable'> {
   icon?: ComponentType<{ 'aria-label'?: string }>;
-};
+}
 
-const IconButton = ({ icon: Icon, ...otherProps }: IconButtonProps) => (
+export const IconButton = ({ icon: Icon, ...otherProps }: IconButtonProps) => (
   <ButtonWrapper
     iconBefore={Icon ? <Icon /> : undefined}
     iconOnly
@@ -27,5 +25,3 @@ const IconButton = ({ icon: Icon, ...otherProps }: IconButtonProps) => (
     {...otherProps}
   />
 );
-
-export default IconButton;

client/components/Dropdown.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { remSize, prop } from '../theme';
-import IconButton from '../common/IconButton';
+import { IconButton } from '../common/IconButton';
 
 export const DropdownWrapper = styled.ul`
   background-color: ${prop('Modal.background')};

client/modules/IDE/components/Editor/index.jsx

@@ -71,7 +71,7 @@ import EditorAccessibility from '../EditorAccessibility';
 import UnsavedChangesIndicator from '../UnsavedChangesIndicator';
 import { EditorContainer, EditorHolder } from './MobileEditor';
 import { FolderIcon } from '../../../../common/icons';
-import IconButton from '../../../../common/IconButton';
+import { IconButton } from '../../../../common/IconButton';
 
 emmet(CodeMirror);
 

client/modules/IDE/components/Header/MobileNav.jsx

@@ -11,7 +11,7 @@ import { useMenuProps } from '../../../../components/Menubar/MenubarSubmenu';
 import { ButtonOrLink } from '../../../../common/ButtonOrLink';
 import { prop, remSize } from '../../../../theme';
 import AsteriskIcon from '../../../../images/p5-asterisk.svg';
-import IconButton from '../../../../common/IconButton';
+import { IconButton } from '../../../../common/IconButton';
 import {
   AccountIcon,
   AddIcon,

client/modules/User/components/DashboardTabSwitcher.jsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import styled from 'styled-components';
 import { FilterIcon } from '../../../common/icons';
-import IconButton from '../../../common/IconButton';
+import { IconButton } from '../../../common/IconButton';
 import { RouterTab } from '../../../common/RouterTab';
 import { Options } from '../../IDE/components/Header/MobileNav';
 import { toggleDirectionForField } from '../../IDE/actions/sorting';