Convert Icon to TypeScript

client/src/components/Draftail/__snapshots__/index.test.js.snap

@@ -52,8 +52,6 @@ Object {
 
 exports[`Draftail #wrapWagtailIcon works 1`] = `
 <Icon
-  className={null}
   name="media"
-  title={null}
 />
 `;

client/src/components/Draftail/decorators/__snapshots__/Document.test.js.snap

@@ -55,9 +55,7 @@ exports[`Document no data 1`] = `
   entityKey="2"
   icon={
     <Icon
-      className={null}
       name="warning"
-      title={null}
     />
   }
   label="Missing document"
@@ -124,9 +122,7 @@ exports[`Document works 1`] = `
   entityKey="1"
   icon={
     <Icon
-      className={null}
       name="doc-full"
-      title={null}
     />
   }
   label="example.pdf"

client/src/components/Draftail/decorators/__snapshots__/Link.test.js.snap

@@ -55,9 +55,7 @@ exports[`Link works 1`] = `
   entityKey="1"
   icon={
     <Icon
-      className={null}
       name="link"
-      title={null}
     />
   }
   label="www.example.com"

client/src/components/Explorer/__snapshots__/ExplorerHeader.test.js.snap

@@ -15,7 +15,6 @@ exports[`ExplorerHeader #depth at root 1`] = `
       <Icon
         className="icon--explorer-header"
         name="home"
-        title={null}
       />
       <span>
         Pages
@@ -40,7 +39,6 @@ exports[`ExplorerHeader #page 1`] = `
       <Icon
         className="icon--explorer-header"
         name="arrow-left"
-        title={null}
       />
       <span>
         test
@@ -65,7 +63,6 @@ exports[`ExplorerHeader basic 1`] = `
       <Icon
         className="icon--explorer-header"
         name="arrow-left"
-        title={null}
       />
       <span>
         Pages

client/src/components/Explorer/__snapshots__/ExplorerItem.test.js.snap

@@ -11,7 +11,6 @@ exports[`ExplorerItem children 1`] = `
     <Icon
       className="icon--menuitem"
       name="folder-inverse"
-      title={null}
     />
     <h3
       className="c-explorer__item__title"
@@ -81,7 +80,6 @@ exports[`ExplorerItem should show a publication status if not live 1`] = `
     <Icon
       className="icon--menuitem"
       name="folder-inverse"
-      title={null}
     />
     <h3
       className="c-explorer__item__title"
@@ -137,7 +135,6 @@ exports[`ExplorerItem should show a publication status with unpublished changes
     <Icon
       className="icon--menuitem"
       name="folder-inverse"
-      title={null}
     />
     <h3
       className="c-explorer__item__title"

client/src/components/Explorer/__snapshots__/ExplorerToggle.test.js.snap

@@ -8,7 +8,6 @@ exports[`ExplorerToggle basic 1`] = `
   <Icon
     className="icon--menuitem"
     name="folder-open-inverse"
-    title={null}
   />
   <span>
     To infinity and beyond!
@@ -16,7 +15,6 @@ exports[`ExplorerToggle basic 1`] = `
   <Icon
     className="icon--submenu-trigger"
     name="arrow-right"
-    title={null}
   />
 </Button>
 `;

client/src/components/Explorer/__snapshots__/PageCount.test.js.snap

@@ -10,9 +10,7 @@ exports[`PageCount plural 1`] = `
      5 pages
   </span>
   <Icon
-    className={null}
     name="arrow-right"
-    title={null}
   />
 </a>
 `;
@@ -27,9 +25,7 @@ exports[`PageCount works 1`] = `
      1 page
   </span>
   <Icon
-    className={null}
     name="arrow-right"
-    title={null}
   />
 </a>
 `;

client/src/components/Icon/Icon.js

@@ -1,31 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-/**
- * Provide a `title` as an accessible label intended for screen readers.
- */
-const Icon = ({ name, className, title }) => (
-  <span>
-    <svg className={`icon icon-${name} ${className || ''}`} aria-hidden="true">
-      <use href={`#icon-${name}`}></use>
-    </svg>
-    {title ? (
-      <span className="visuallyhidden">
-        {title}
-      </span>
-    ) : null}
-  </span>
-);
-
-Icon.propTypes = {
-  name: PropTypes.string.isRequired,
-  className: PropTypes.string,
-  title: PropTypes.string,
-};
-
-Icon.defaultProps = {
-  className: null,
-  title: null,
-};
-
-export default Icon;

client/src/components/Icon/__snapshots__/Icon.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Icon #className 1`] = `
-<span>
+<Fragment>
   <svg
     aria-hidden="true"
     className="icon icon-test u-test"
@@ -10,11 +10,11 @@ exports[`Icon #className 1`] = `
       href="#icon-test"
     />
   </svg>
-</span>
+</Fragment>
 `;
 
 exports[`Icon #name 1`] = `
-<span>
+<Fragment>
   <svg
     aria-hidden="true"
     className="icon icon-test "
@@ -23,11 +23,11 @@ exports[`Icon #name 1`] = `
       href="#icon-test"
     />
   </svg>
-</span>
+</Fragment>
 `;
 
 exports[`Icon #title 1`] = `
-<span>
+<Fragment>
   <svg
     aria-hidden="true"
     className="icon icon-test "
@@ -41,5 +41,5 @@ exports[`Icon #title 1`] = `
   >
     Test title
   </span>
-</span>
+</Fragment>
 `;

client/src/components/LoadingSpinner/__snapshots__/LoadingSpinner.test.js.snap

@@ -5,7 +5,6 @@ exports[`LoadingSpinner basic 1`] = `
   <Icon
     className="c-spinner"
     name="spinner"
-    title={null}
   />
    Loading…
 </span>

client/src/components/Sidebar/Sidebar.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import Icon from './common/Icon';
+import Icon from '../Icon/Icon';
 
 export interface Strings {
   DASHBOARD: string;

client/src/components/Sidebar/menu/LinkMenuItem.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import Icon from '../common/Icon';
+import Icon from '../../Icon/Icon';
 import { MenuItemDefinition, MenuItemProps } from './MenuItem';
 
 export const LinkMenuItem: React.FunctionComponent<MenuItemProps<LinkMenuItemDefinition>> = (

client/src/components/Sidebar/menu/PageExplorerMenuItem.tsx

@@ -2,8 +2,8 @@
 
 import * as React from 'react';
 
-import Button from '../common/Button';
-import Icon from '../common/Icon';
+import Button from '../../Button/Button';
+import Icon from '../../Icon/Icon';
 import { MenuItemProps } from './MenuItem';
 import { LinkMenuItemDefinition } from './LinkMenuItem';
 

client/src/components/Sidebar/menu/SubMenuItem.tsx

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import Icon from '../common/Icon';
+import Icon from '../../Icon/Icon';
 
 import { renderMenu } from '../modules/MainMenu';
 import { MenuItemDefinition, MenuItemProps } from './MenuItem';