From 27fd99828520524168d429feee3a88cb3ffe4153 Mon Sep 17 00:00:00 2001
From: Theofanis Despoudis <theo.despoudis@teckro.com>
Date: Fri, 3 May 2019 16:59:43 +0100
Subject: [PATCH] `EuiHeaderLogo` converted to TS (#1892)

* `EuiHeaderLogo` converted to TS

* `EuiHeaderLogo` exported types

* `EuiHeaderLogo` code review

* `EuiHeaderLogo` snapshots
---
 ...test.js.snap => header_logo.test.tsx.snap} |  3 --
 src/components/header/header_logo.js          | 38 -------------------
 ...ader_logo.test.js => header_logo.test.tsx} | 19 +++-------
 src/components/header/header_logo.tsx         | 33 ++++++++++++++++
 src/components/header/index.d.ts              | 14 +++++++
 src/components/index.d.ts                     |  1 +
 6 files changed, 54 insertions(+), 54 deletions(-)
 rename src/components/header/__snapshots__/{header_logo.test.js.snap => header_logo.test.tsx.snap} (98%)
 delete mode 100644 src/components/header/header_logo.js
 rename src/components/header/{header_logo.test.js => header_logo.test.tsx} (54%)
 create mode 100644 src/components/header/header_logo.tsx
 create mode 100644 src/components/header/index.d.ts

diff --git a/src/components/header/__snapshots__/header_logo.test.js.snap b/src/components/header/__snapshots__/header_logo.test.tsx.snap
similarity index 98%
rename from src/components/header/__snapshots__/header_logo.test.js.snap
rename to src/components/header/__snapshots__/header_logo.test.tsx.snap
index d530543d1a1..7df0a8debb6 100644
--- a/src/components/header/__snapshots__/header_logo.test.js.snap
+++ b/src/components/header/__snapshots__/header_logo.test.tsx.snap
@@ -10,7 +10,6 @@ exports[`EuiHeaderLogo is rendered 1`] = `
     class="euiIcon euiIcon--large euiHeaderLogo__icon"
     focusable="false"
     height="32"
-    title="Elastic"
     viewBox="0 0 32 32"
     width="32"
     xmlns="http://www.w3.org/2000/svg"
@@ -56,7 +55,6 @@ exports[`EuiHeaderLogo renders href 1`] = `
     class="euiIcon euiIcon--large euiHeaderLogo__icon"
     focusable="false"
     height="32"
-    title="Elastic"
     viewBox="0 0 32 32"
     width="32"
     xmlns="http://www.w3.org/2000/svg"
@@ -102,7 +100,6 @@ exports[`EuiHeaderLogo renders optional props 1`] = `
     class="euiIcon euiIcon--large euiHeaderLogo__icon"
     focusable="false"
     height="16"
-    title="Moby Dick"
     viewBox="0 0 16 16"
     width="16"
     xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/header/header_logo.js b/src/components/header/header_logo.js
deleted file mode 100644
index c918cb223bb..00000000000
--- a/src/components/header/header_logo.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import {
-  EuiIcon,
-} from '../icon';
-
-export const EuiHeaderLogo = ({ iconType, iconTitle, href, children, className, ...rest }) => {
-  const classes = classNames('euiHeaderLogo', className);
-
-  return (
-    <a href={href} className={classes} {...rest}>
-      <EuiIcon
-        className="euiHeaderLogo__icon"
-        size="l"
-        type={iconType}
-        title={iconTitle}
-      />
-
-      {children &&
-        <span className="euiHeaderLogo__text">{children}</span>
-      }
-    </a>
-  );
-};
-
-EuiHeaderLogo.propTypes = {
-  href: PropTypes.string,
-  children: PropTypes.node,
-  iconType: PropTypes.string,
-  iconTitle: PropTypes.string,
-};
-
-EuiHeaderLogo.defaultProps = {
-  iconType: 'logoElastic',
-  iconTitle: 'Elastic',
-};
diff --git a/src/components/header/header_logo.test.js b/src/components/header/header_logo.test.tsx
similarity index 54%
rename from src/components/header/header_logo.test.js
rename to src/components/header/header_logo.test.tsx
index ac831c10e0b..579e53f3bc3 100644
--- a/src/components/header/header_logo.test.js
+++ b/src/components/header/header_logo.test.tsx
@@ -1,26 +1,20 @@
 import React from 'react';
 import { render } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../test';
 
 import { EuiHeaderLogo } from './header_logo';
 
 describe('EuiHeaderLogo', () => {
   test('is rendered', () => {
-    const component = render(
-      <EuiHeaderLogo {...requiredProps} />
-    );
+    const component = render(<EuiHeaderLogo {...requiredProps} />);
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   test('renders href', () => {
-    const component = render(
-      <EuiHeaderLogo href="#" />
-    );
+    const component = render(<EuiHeaderLogo href="#" />);
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 
   test('renders optional props', () => {
@@ -32,7 +26,6 @@ describe('EuiHeaderLogo', () => {
       />
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });
diff --git a/src/components/header/header_logo.tsx b/src/components/header/header_logo.tsx
new file mode 100644
index 00000000000..3aa397bdc69
--- /dev/null
+++ b/src/components/header/header_logo.tsx
@@ -0,0 +1,33 @@
+import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
+import classNames from 'classnames';
+
+import { EuiIcon, IconType } from '../icon';
+import { CommonProps } from '../common';
+
+export interface EuiHeaderLogoProps {
+  href?: string;
+  iconType?: IconType;
+  iconTitle?: string;
+  children?: ReactNode;
+}
+
+export const EuiHeaderLogo: FunctionComponent<
+  CommonProps & HTMLAttributes<HTMLAnchorElement> & EuiHeaderLogoProps
+> = ({
+  iconType = 'logoElastic',
+  iconTitle = 'Elastic',
+  href,
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('euiHeaderLogo', className);
+
+  return (
+    <a href={href} className={classes} {...rest}>
+      <EuiIcon className="euiHeaderLogo__icon" size="l" type={iconType} />
+
+      {children && <span className="euiHeaderLogo__text">{children}</span>}
+    </a>
+  );
+};
diff --git a/src/components/header/index.d.ts b/src/components/header/index.d.ts
new file mode 100644
index 00000000000..68df664fc81
--- /dev/null
+++ b/src/components/header/index.d.ts
@@ -0,0 +1,14 @@
+import {
+  EuiHeaderLogoProps as HeaderLogoProps,
+  EuiHeaderLogo as HeaderLogo,
+} from './header_logo';
+
+declare module '@elastic/eui' {
+  /**
+   * header logo type defs
+   *
+   * @see './header_logo.js'
+   */
+  export interface EuiHeaderLogoProps extends HeaderLogoProps {}
+  export const EuiHeaderLogo: typeof HeaderLogo;
+}
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index f5f8145c2d6..61f167dde41 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -15,6 +15,7 @@
 /// <reference path="./focus_trap/index.d.ts" />
 /// <reference path="./form/index.d.ts" />
 /// <reference path="./health/index.d.ts" />
+/// <reference path="./header/index.d.ts" />
 /// <reference path="./key_pad_menu/index.d.ts" />
 /// <reference path="./link/index.d.ts" />
 /// <reference path="./modal/index.d.ts" />