EuiHeaderLogo converted to TS (#1892)

* `EuiHeaderLogo` converted to TS

* `EuiHeaderLogo` exported types

* `EuiHeaderLogo` code review

* `EuiHeaderLogo` snapshots

src/components/header/__snapshots__/header_logo.test.js.snap → 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"

src/components/header/header_logo.test.js → 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();
   });
 });

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

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

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" />