Migrate EuiFacetGroup, EuiKeyPadMenu and EuiCallOut to TS (#2382)

Migrate EuiFacetGroup, EuiKeyPadMenu and EuiCallOut to TypeScript.

CHANGELOG.md

@@ -8,6 +8,7 @@
 - Set `textOnly={true}` for expanded rows in `EuiBasicTable` ([#2376](https://github.com/elastic/eui/pull/2376))
 - Added `visAreaStacked`, `visBarVerticalStacked`, and `visBarHorizontalStacked` icons to glyph set ([#2379](https://github.com/elastic/eui/pull/2379))
 - Adjusted style of beta badge on `EuiKeyPadMenuItem` ([#2375](https://github.com/elastic/eui/pull/2375))
+- Migrate `EuiFacetGroup`, `EuiKeyPadMenu` and `EuiCallOut` to TS ([#2382](https://github.com/elastic/eui/pull/2382))
 
 **Bug fixes**
 

src/components/call_out/call_out.js → src/components/call_out/call_out.tsx

@@ -1,32 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
 
 import classNames from 'classnames';
 
-import { IconPropType, EuiIcon } from '../icon';
+import { CommonProps, Omit, keysOf } from '../common';
+import { IconType, EuiIcon } from '../icon';
 
 import { EuiText } from '../text';
 
-const colorToClassNameMap = {
+type Color = 'primary' | 'success' | 'warning' | 'danger';
+type Size = 's' | 'm';
+
+export type EuiCallOutProps = CommonProps &
+  Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title?: ReactNode;
+    iconType?: IconType;
+    color?: Color;
+    size?: Size;
+  };
+
+const colorToClassNameMap: { [color in Color]: string } = {
   primary: 'euiCallOut--primary',
   success: 'euiCallOut--success',
   warning: 'euiCallOut--warning',
   danger: 'euiCallOut--danger',
 };
 
-export const COLORS = Object.keys(colorToClassNameMap);
+export const COLORS = keysOf(colorToClassNameMap);
 
-const sizeToClassNameMap = {
+const sizeToClassNameMap: { [size in Size]: string } = {
   s: 'euiCallOut--small',
   m: '',
 };
 
-export const SIZES = Object.keys(sizeToClassNameMap);
-
-export const EuiCallOut = ({
+export const EuiCallOut: FunctionComponent<EuiCallOutProps> = ({
   title,
-  color,
-  size,
+  color = 'primary',
+  size = 'm',
   iconType,
   children,
   className,
@@ -71,17 +80,3 @@ export const EuiCallOut = ({
     </div>
   );
 };
-
-EuiCallOut.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  title: PropTypes.node,
-  iconType: IconPropType,
-  color: PropTypes.oneOf(COLORS),
-  size: PropTypes.oneOf(SIZES),
-};
-
-EuiCallOut.defaultProps = {
-  color: 'primary',
-  size: 'm',
-};

src/components/call_out/index.ts

@@ -0,0 +1 @@
+export { EuiCallOut, EuiCallOutProps } from './call_out';

src/components/facet/facet_group.js → src/components/facet/facet_group.tsx

@@ -1,16 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
+
+import { CommonProps } from '../common';
 import { EuiFlexGroup } from '../flex';
 
-const layoutToClassNameMap = {
+type FacetGroupLayout = 'vertical' | 'horizontal';
+
+const layoutToClassNameMap: { [layout in FacetGroupLayout]: string } = {
   vertical: 'euiFacetGroup--vertical',
   horizontal: 'euiFacetGroup--horizontal',
 };
 
-export const LAYOUTS = Object.keys(layoutToClassNameMap);
+export type EuiFacetGroupProps = CommonProps &
+  HTMLAttributes<HTMLDivElement> & {
+    layout?: FacetGroupLayout;
+  };
 
-export const EuiFacetGroup = ({ children, className, layout, ...rest }) => {
+export const EuiFacetGroup: FunctionComponent<EuiFacetGroupProps> = ({
+  children,
+  className,
+  layout = 'vertical',
+  ...rest
+}) => {
   const classes = classNames(
     'euiFacetGroup',
     layoutToClassNameMap[layout],
@@ -30,13 +41,3 @@ export const EuiFacetGroup = ({ children, className, layout, ...rest }) => {
     </EuiFlexGroup>
   );
 };
-
-EuiFacetGroup.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  layout: PropTypes.oneOf(LAYOUTS),
-};
-
-EuiFacetGroup.defaultProps = {
-  layout: 'vertical',
-};

src/components/facet/index.ts

@@ -0,0 +1,3 @@
+export { EuiFacetButton, EuiFacetButtonProps } from './facet_button';
+
+export { EuiFacetGroup, EuiFacetGroupProps } from './facet_group';

src/components/index.d.ts

@@ -1,16 +1,13 @@
-/// <reference path="./call_out/index.d.ts" />
 /// <reference path="./code/index.d.ts" />
 /// <reference path="./card/index.d.ts" />
 /// <reference path="./combo_box/index.d.ts" />
 /// <reference path="./date_picker/index.d.ts" />
 /// <reference path="./empty_prompt/index.d.ts" />
 /// <reference path="./error_boundary/index.d.ts" />
-/// <reference path="./facet/index.d.ts" />
 /// <reference path="./filter_group/index.d.ts" />
 /// <reference path="./flyout/index.d.ts" />
 /// <reference path="./form/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" />
 /// <reference path="./page/index.d.ts" />

src/components/key_pad_menu/key_pad_menu.tsx

@@ -0,0 +1,20 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import classNames from 'classnames';
+
+import { CommonProps } from '../common';
+
+export type EuiKeyPadMenuProps = CommonProps & HTMLAttributes<HTMLDivElement>;
+
+export const EuiKeyPadMenu: FunctionComponent<EuiKeyPadMenuProps> = ({
+  children,
+  className,
+  ...rest
+}) => {
+  const classes = classNames('euiKeyPadMenu', className);
+
+  return (
+    <div className={classes} role="menu" {...rest}>
+      {children}
+    </div>
+  );
+};

src/components/key_pad_menu/key_pad_menu_item.test.js → src/components/key_pad_menu/key_pad_menu_item.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { render, shallow } from 'enzyme';
-import sinon from 'sinon';
-import { requiredProps } from '../../test/required_props';
+import { requiredProps } from '../../test';
 
 import {
   EuiKeyPadMenuItem,
@@ -43,19 +42,19 @@ describe('EuiKeyPadMenuItemButton', () => {
 
   describe('onClick', () => {
     test("isn't called upon instantiation", () => {
-      const onClickHandler = sinon.stub();
+      const onClickHandler = jest.fn();
 
       shallow(
         <EuiKeyPadMenuItemButton label="Label" onClick={onClickHandler}>
           Icon
         </EuiKeyPadMenuItemButton>
       );
 
-      sinon.assert.notCalled(onClickHandler);
+      expect(onClickHandler).not.toBeCalled();
     });
 
     test('is called when the button is clicked', () => {
-      const onClickHandler = sinon.stub();
+      const onClickHandler = jest.fn();
 
       const $button = shallow(
         <EuiKeyPadMenuItemButton label="Label" onClick={onClickHandler}>
@@ -65,7 +64,7 @@ describe('EuiKeyPadMenuItemButton', () => {
 
       $button.simulate('click');
 
-      sinon.assert.calledOnce(onClickHandler);
+      expect(onClickHandler).toBeCalledTimes(1);
     });
   });
 });