Migrate EuiBottomBar, EuiHealth and EuiImage to TS

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added missing `compressed` styling to `EuiSwitch` ([#2327](https://github.com/elastic/eui/pull/2327))
+- Migrate `EuiBottomBar`, `EuiHealth` and `EuiImage` to TS ([#2328](https://github.com/elastic/eui/pull/2328))
 
 ## [`14.0.0`](https://github.com/elastic/eui/tree/v14.0.0)
 

src-docs/src/i18ntokens.json

@@ -85,15 +85,15 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 54,
+        "line": 70,
         "column": 12
       },
       "end": {
-        "line": 57,
+        "line": 73,
         "column": 14
       }
     },
-    "filepath": "src/components/bottom_bar/bottom_bar.js"
+    "filepath": "src/components/bottom_bar/bottom_bar.tsx"
   },
   {
     "token": "euiCardSelect.selected",

src/components/bottom_bar/bottom_bar.test.js → src/components/bottom_bar/bottom_bar.test.tsx

@@ -2,11 +2,13 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { keysOf } from '../common';
 
-import { EuiBottomBar, PADDING_SIZES } from './bottom_bar';
+import { EuiBottomBar, paddingSizeToClassNameMap } from './bottom_bar';
 
 // TODO: Temporary hack which we can remove once react-test-renderer supports portals.
 // More info at https://github.com/facebook/react/issues/11565.
+// @ts-ignore
 ReactDOM.createPortal = node => node;
 
 describe('EuiBottomBar', () => {
@@ -20,7 +22,7 @@ describe('EuiBottomBar', () => {
 
   describe('props', () => {
     describe('paddingSize', () => {
-      PADDING_SIZES.forEach(paddingSize => {
+      keysOf(paddingSizeToClassNameMap).forEach(paddingSize => {
         test(`${paddingSize} is rendered`, () => {
           const component = render(<EuiBottomBar paddingSize={paddingSize} />);
 

src/components/bottom_bar/bottom_bar.js → src/components/bottom_bar/bottom_bar.tsx

@@ -1,23 +1,40 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { CommonProps } from '../common';
 import { EuiPortal } from '../portal';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 
-const paddingSizeToClassNameMap = {
+type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l';
+
+// Exported for testing
+export const paddingSizeToClassNameMap: {
+  [value in BottomBarPaddingSize]: string | null
+} = {
   none: null,
   s: 'euiBottomBar--paddingSmall',
   m: 'euiBottomBar--paddingMedium',
   l: 'euiBottomBar--paddingLarge',
 };
 
-export const PADDING_SIZES = Object.keys(paddingSizeToClassNameMap);
+interface Props extends CommonProps {
+  /**
+   * Optional class applied to the body class
+   */
+  bodyClassName?: string;
+
+  /**
+   * Padding applied to the bar
+   */
+  paddingSize?: BottomBarPaddingSize;
+}
+
+export class EuiBottomBar extends Component<Props> {
+  private bar: HTMLDivElement | null = null;
 
-export class EuiBottomBar extends Component {
   componentDidMount() {
-    const height = this.bar.clientHeight;
+    const height = this.bar ? this.bar.clientHeight : -1;
     document.body.style.paddingBottom = `${height}px`;
     if (this.props.bodyClassName) {
       document.body.classList.add(this.props.bodyClassName);
@@ -35,8 +52,7 @@ export class EuiBottomBar extends Component {
     const {
       children,
       className,
-      paddingSize,
-      // eslint-disable-next-line no-unused-vars
+      paddingSize = 'm',
       bodyClassName,
       ...rest
     } = this.props;
@@ -69,23 +85,3 @@ export class EuiBottomBar extends Component {
     );
   }
 }
-
-EuiBottomBar.propTypes = {
-  children: PropTypes.node,
-  /**
-   * Optional class applied to the bar itself
-   */
-  className: PropTypes.string,
-  /**
-   * Optional class applied to the body class
-   */
-  bodyClassName: PropTypes.string,
-  /**
-   * Padding applied to the bar
-   */
-  paddingSize: PropTypes.oneOf(PADDING_SIZES),
-};
-
-EuiBottomBar.defaultProps = {
-  paddingSize: 'm',
-};

src/components/health/health.js → src/components/health/health.tsx

@@ -1,12 +1,22 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
+import { CommonProps, Omit } from '../common';
 
-import { EuiIcon } from '../icon';
+import { EuiIcon, IconColor } from '../icon';
 
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 
-export const EuiHealth = ({ children, className, color, ...rest }) => {
+type EuiHealthProps = CommonProps &
+  Omit<HTMLAttributes<HTMLDivElement>, 'color'> & {
+    color?: IconColor;
+  };
+
+export const EuiHealth: FunctionComponent<EuiHealthProps> = ({
+  children,
+  className,
+  color,
+  ...rest
+}) => {
   const classes = classNames('euiHealth', className);
 
   return (
@@ -20,8 +30,3 @@ export const EuiHealth = ({ children, className, color, ...rest }) => {
     </div>
   );
 };
-
-EuiHealth.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-};

src/components/image/__snapshots__/image.test.js.snap → src/components/image/__snapshots__/image.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`EuiImage is rendered 1`] = `
     <img
       alt="alt"
       class="euiImage__img"
+      src="/cat.jpg"
     />
   </figure>
 </button>

src/components/image/image.test.js → src/components/image/image.test.tsx

@@ -7,7 +7,7 @@ import { EuiImage } from './image';
 describe('EuiImage', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiImage alt="alt" size="l" {...requiredProps} />
+      <EuiImage alt="alt" size="l" url="/cat.jpg" {...requiredProps} />
     );
 
     expect(component).toMatchSnapshot();

src/components/image/image.js → src/components/image/image.tsx

@@ -1,7 +1,7 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../common';
 import { EuiOverlayMask } from '../overlay_mask';
 
 import { EuiIcon } from '../icon';
@@ -10,7 +10,9 @@ import { EuiFocusTrap } from '../focus_trap';
 
 import { keyCodes } from '../../services';
 
-const sizeToClassNameMap = {
+type ImageSize = 's' | 'm' | 'l' | 'xl' | 'fullWidth' | 'original';
+
+const sizeToClassNameMap: { [size in ImageSize]: string } = {
   s: 'euiImage--small',
   m: 'euiImage--medium',
   l: 'euiImage--large',
@@ -21,21 +23,33 @@ const sizeToClassNameMap = {
 
 export const SIZES = Object.keys(sizeToClassNameMap);
 
-const fullScreenIconColorMap = {
+type FullScreenIconColor = 'light' | 'dark';
+
+const fullScreenIconColorMap: { [color in FullScreenIconColor]: string } = {
   light: 'ghost',
   dark: 'default',
 };
 
-export class EuiImage extends Component {
-  constructor(props) {
-    super(props);
+interface EuiImageProps extends CommonProps, HTMLAttributes<HTMLElement> {
+  alt: string;
+  size?: ImageSize;
+  fullScreenIconColor?: FullScreenIconColor;
+  url: string;
+  caption?: string;
+  hasShadow?: boolean;
+  allowFullScreen?: boolean;
+}
 
-    this.state = {
-      isFullScreen: false,
-    };
-  }
+interface State {
+  isFullScreen: boolean;
+}
 
-  onKeyDown = event => {
+export class EuiImage extends Component<EuiImageProps, State> {
+  state: State = {
+    isFullScreen: false,
+  };
+
+  onKeyDown = (event: React.KeyboardEvent) => {
     if (event.keyCode === keyCodes.ESCAPE) {
       event.preventDefault();
       event.stopPropagation();
@@ -59,11 +73,11 @@ export class EuiImage extends Component {
     const {
       className,
       url,
-      size,
+      size = 'original',
       caption,
       hasShadow,
       allowFullScreen,
-      fullScreenIconColor,
+      fullScreenIconColor = 'light',
       alt,
       ...rest
     } = this.props;
@@ -107,11 +121,7 @@ export class EuiImage extends Component {
               type="button"
               onClick={this.closeFullScreen}
               onKeyDown={this.onKeyDown}>
-              <figure
-                ref={node => {
-                  this.figure = node;
-                }}
-                className="euiImageFullScreen">
+              <figure className="euiImageFullScreen">
                 <img src={url} className="euiImageFullScreen__img" alt={alt} />
                 {optionalCaption}
               </figure>
@@ -140,14 +150,3 @@ export class EuiImage extends Component {
     );
   }
 }
-
-EuiImage.propTypes = {
-  alt: PropTypes.string.isRequired,
-  size: PropTypes.string.isRequired,
-  fullScreenIconColor: PropTypes.string,
-};
-
-EuiImage.defaultProps = {
-  size: 'original',
-  fullScreenIconColor: 'light',
-};

src/components/index.d.ts

@@ -10,7 +10,6 @@
 /// <reference path="./filter_group/index.d.ts" />
 /// <reference path="./flyout/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" />