From 0029340674437c27a3bc1b736ba0094b56314917 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 21 Aug 2019 09:50:18 -0500
Subject: [PATCH 1/5] convert euiswitch to ts

---
 src/components/form/index.d.ts                |  1 -
 ...itch.test.js.snap => switch.test.tsx.snap} | 10 ++-
 src/components/form/switch/index.d.ts         | 21 -----
 src/components/form/switch/index.js           |  1 -
 src/components/form/switch/index.ts           |  1 +
 src/components/form/switch/switch.js          | 86 -------------------
 .../{switch.test.js => switch.test.tsx}       | 12 ++-
 src/components/form/switch/switch.tsx         | 77 +++++++++++++++++
 src/components/form/switch/test.tsx           | 11 +++
 9 files changed, 107 insertions(+), 113 deletions(-)
 rename src/components/form/switch/__snapshots__/{switch.test.js.snap => switch.test.tsx.snap} (95%)
 delete mode 100644 src/components/form/switch/index.d.ts
 delete mode 100644 src/components/form/switch/index.js
 create mode 100644 src/components/form/switch/index.ts
 delete mode 100644 src/components/form/switch/switch.js
 rename src/components/form/switch/{switch.test.js => switch.test.tsx} (65%)
 create mode 100644 src/components/form/switch/switch.tsx
 create mode 100644 src/components/form/switch/test.tsx

diff --git a/src/components/form/index.d.ts b/src/components/form/index.d.ts
index 366419d36f9..a31e554069b 100644
--- a/src/components/form/index.d.ts
+++ b/src/components/form/index.d.ts
@@ -9,7 +9,6 @@ import { CommonProps } from '../common';
 /// <reference path="./range/index.d.ts" />
 /// <reference path="./select/index.d.ts" />
 /// <reference path="./super_select/index.d.ts" />
-/// <reference path="./switch/index.d.ts" />
 /// <reference path="./text_area/index.d.ts" />
 
 import { FunctionComponent, FormHTMLAttributes, ReactNode } from 'react';
diff --git a/src/components/form/switch/__snapshots__/switch.test.js.snap b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
similarity index 95%
rename from src/components/form/switch/__snapshots__/switch.test.js.snap
rename to src/components/form/switch/__snapshots__/switch.test.tsx.snap
index 642f2dce792..b05767ccc4d 100644
--- a/src/components/form/switch/__snapshots__/switch.test.js.snap
+++ b/src/components/form/switch/__snapshots__/switch.test.tsx.snap
@@ -5,6 +5,7 @@ exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
   class="euiSwitch"
 >
   <button
+    aria-checked="false"
     class="euiSwitch__button"
     id="generated-id"
     role="switch"
@@ -40,7 +41,9 @@ exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
   <label
     class="euiSwitch__label"
     for="generated-id"
-  />
+  >
+    Label
+  </label>
 </div>
 `;
 
@@ -49,6 +52,7 @@ exports[`EuiSwitch is rendered 1`] = `
   class="euiSwitch testClass1 testClass2"
 >
   <button
+    aria-checked="false"
     aria-label="aria-label"
     class="euiSwitch__button"
     data-test-subj="test subject string"
@@ -86,6 +90,8 @@ exports[`EuiSwitch is rendered 1`] = `
   <label
     class="euiSwitch__label"
     for="test"
-  />
+  >
+    Label
+  </label>
 </div>
 `;
diff --git a/src/components/form/switch/index.d.ts b/src/components/form/switch/index.d.ts
deleted file mode 100644
index 8bd9f11e8c4..00000000000
--- a/src/components/form/switch/index.d.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { CommonProps } from '../../common';
-
-import { FunctionComponent, ButtonHTMLAttributes, ReactNode } from 'react';
-
-declare module '@elastic/eui' {
-  /**
-   * @see './switch.js'
-   */
-  export type EuiSwitchProps = CommonProps &
-    ButtonHTMLAttributes<HTMLButtonElement> & {
-      label: ReactNode;
-      checked: boolean;
-      onChange: (
-        event: React.FormEvent<HTMLButtonElement & { checked: boolean }>
-      ) => void;
-      disabled?: boolean;
-      compressed?: boolean;
-    };
-
-  export const EuiSwitch: FunctionComponent<EuiSwitchProps>;
-}
diff --git a/src/components/form/switch/index.js b/src/components/form/switch/index.js
deleted file mode 100644
index 893cd7f7f6c..00000000000
--- a/src/components/form/switch/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { EuiSwitch } from './switch';
diff --git a/src/components/form/switch/index.ts b/src/components/form/switch/index.ts
new file mode 100644
index 00000000000..7754954a2c6
--- /dev/null
+++ b/src/components/form/switch/index.ts
@@ -0,0 +1 @@
+export { EuiSwitch, EuiSwitchProps } from './switch';
diff --git a/src/components/form/switch/switch.js b/src/components/form/switch/switch.js
deleted file mode 100644
index 3395b8a97be..00000000000
--- a/src/components/form/switch/switch.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { Component } from 'react';
-
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import makeId from '../../form/form_row/make_id';
-import { EuiIcon } from '../../icon';
-
-export class EuiSwitch extends Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      switchId: props.id || makeId(),
-    };
-  }
-
-  onClick = e => {
-    e.target.checked = !this.props.checked;
-    this.props.onChange(e);
-  };
-
-  render() {
-    const {
-      label,
-      id,
-      name,
-      checked,
-      disabled,
-      compressed,
-      onChange,
-      className,
-      ...rest
-    } = this.props;
-
-    const { switchId } = this.state;
-
-    const classes = classNames(
-      'euiSwitch',
-      {
-        'euiSwitch--compressed': compressed,
-      },
-      className
-    );
-
-    return (
-      <div className={classes}>
-        <button
-          id={switchId}
-          aria-checked={checked}
-          className="euiSwitch__button"
-          role="switch"
-          disabled={disabled}
-          onClick={this.onClick}
-          {...rest}>
-          <span className="euiSwitch__body">
-            <span className="euiSwitch__thumb" />
-            <span className="euiSwitch__track">
-              <EuiIcon type="cross" size="m" className="euiSwitch__icon" />
-
-              <EuiIcon
-                type="check"
-                size="m"
-                className="euiSwitch__icon euiSwitch__icon--checked"
-              />
-            </span>
-          </span>
-        </button>
-
-        <label className="euiSwitch__label" htmlFor={switchId}>
-          {label}
-        </label>
-      </div>
-    );
-  }
-}
-
-EuiSwitch.propTypes = {
-  name: PropTypes.string,
-  id: PropTypes.string,
-  label: PropTypes.node,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  compressed: PropTypes.bool,
-};
diff --git a/src/components/form/switch/switch.test.js b/src/components/form/switch/switch.test.tsx
similarity index 65%
rename from src/components/form/switch/switch.test.js
rename to src/components/form/switch/switch.test.tsx
index 50927c7fa6e..a564df98ca1 100644
--- a/src/components/form/switch/switch.test.js
+++ b/src/components/form/switch/switch.test.tsx
@@ -4,17 +4,25 @@ import { requiredProps } from '../../../test/required_props';
 
 import { EuiSwitch } from './switch';
 
+const props = {
+  checked: false,
+  label: 'Label',
+  onChange: () => {},
+};
+
 jest.mock('../form_row/make_id', () => () => 'generated-id');
 
 describe('EuiSwitch', () => {
   test('is rendered', () => {
-    const component = render(<EuiSwitch id="test" {...requiredProps} />);
+    const component = render(
+      <EuiSwitch id="test" {...props} {...requiredProps} />
+    );
 
     expect(component).toMatchSnapshot();
   });
 
   test('assigns automatically generated ID to label', () => {
-    const component = render(<EuiSwitch />);
+    const component = render(<EuiSwitch {...props} />);
 
     expect(component).toMatchSnapshot();
   });
diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
new file mode 100644
index 00000000000..a27af52a27b
--- /dev/null
+++ b/src/components/form/switch/switch.tsx
@@ -0,0 +1,77 @@
+import React, {
+  ButtonHTMLAttributes,
+  FunctionComponent,
+  ReactNode,
+} from 'react';
+import classNames from 'classnames';
+
+import { CommonProps, Omit } from '../../common';
+import makeId from '../../form/form_row/make_id';
+import { EuiIcon } from '../../icon';
+
+export type EuiSwitchProps = CommonProps &
+  Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+    label: ReactNode;
+    checked: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    compressed?: boolean;
+  };
+
+export const EuiSwitch: FunctionComponent<EuiSwitchProps> = ({
+  label,
+  id,
+  name,
+  checked,
+  disabled,
+  compressed,
+  onChange,
+  className,
+  ...rest
+}) => {
+  const switchId = id || makeId();
+
+  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    const event = (e as unknown) as React.ChangeEvent<HTMLInputElement>;
+    event.target.checked = !checked;
+    onChange(event);
+  };
+
+  const classes = classNames(
+    'euiSwitch',
+    {
+      'euiSwitch--compressed': compressed,
+    },
+    className
+  );
+
+  return (
+    <div className={classes}>
+      <button
+        id={switchId}
+        aria-checked={checked}
+        className="euiSwitch__button"
+        role="switch"
+        disabled={disabled}
+        onClick={onClick}
+        {...rest}>
+        <span className="euiSwitch__body">
+          <span className="euiSwitch__thumb" />
+          <span className="euiSwitch__track">
+            <EuiIcon type="cross" size="m" className="euiSwitch__icon" />
+
+            <EuiIcon
+              type="check"
+              size="m"
+              className="euiSwitch__icon euiSwitch__icon--checked"
+            />
+          </span>
+        </span>
+      </button>
+
+      <label className="euiSwitch__label" htmlFor={switchId}>
+        {label}
+      </label>
+    </div>
+  );
+};
diff --git a/src/components/form/switch/test.tsx b/src/components/form/switch/test.tsx
new file mode 100644
index 00000000000..4bd354a2662
--- /dev/null
+++ b/src/components/form/switch/test.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+import { EuiSwitch } from './switch';
+
+export const Test = ({ checked }: { checked: boolean }) => (
+  <EuiSwitch
+    checked={checked}
+    label="Test"
+    onChange={e => console.log(e.target.checked)}
+  />
+);

From 30a3bf6a84d5f14d4aef9477809710e57f09e649 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 21 Aug 2019 12:11:50 -0500
Subject: [PATCH 2/5] remove test file

---
 src/components/form/switch/test.tsx | 11 -----------
 1 file changed, 11 deletions(-)
 delete mode 100644 src/components/form/switch/test.tsx

diff --git a/src/components/form/switch/test.tsx b/src/components/form/switch/test.tsx
deleted file mode 100644
index 4bd354a2662..00000000000
--- a/src/components/form/switch/test.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { EuiSwitch } from './switch';
-
-export const Test = ({ checked }: { checked: boolean }) => (
-  <EuiSwitch
-    checked={checked}
-    label="Test"
-    onChange={e => console.log(e.target.checked)}
-  />
-);

From 9953c9d68d11af2658bcbb44ffb253c6be002841 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 21 Aug 2019 12:15:36 -0500
Subject: [PATCH 3/5] euiswitchevent; store id in state

---
 src/components/form/switch/index.ts   |  2 +-
 src/components/form/switch/switch.tsx | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/form/switch/index.ts b/src/components/form/switch/index.ts
index 7754954a2c6..6c4ce9a8635 100644
--- a/src/components/form/switch/index.ts
+++ b/src/components/form/switch/index.ts
@@ -1 +1 @@
-export { EuiSwitch, EuiSwitchProps } from './switch';
+export { EuiSwitch, EuiSwitchEvent, EuiSwitchProps } from './switch';
diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
index a27af52a27b..61dfabb7a3d 100644
--- a/src/components/form/switch/switch.tsx
+++ b/src/components/form/switch/switch.tsx
@@ -2,6 +2,7 @@ import React, {
   ButtonHTMLAttributes,
   FunctionComponent,
   ReactNode,
+  useState,
 } from 'react';
 import classNames from 'classnames';
 
@@ -9,11 +10,20 @@ import { CommonProps, Omit } from '../../common';
 import makeId from '../../form/form_row/make_id';
 import { EuiIcon } from '../../icon';
 
+export interface EuiSwitchEvent
+  extends React.BaseSyntheticEvent<
+    React.MouseEvent<HTMLButtonElement>,
+    HTMLButtonElement,
+    EventTarget & {
+      checked: boolean;
+    }
+  > {}
+
 export type EuiSwitchProps = CommonProps &
   Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & {
     label: ReactNode;
     checked: boolean;
-    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (event: EuiSwitchEvent) => void;
     disabled?: boolean;
     compressed?: boolean;
   };
@@ -29,10 +39,10 @@ export const EuiSwitch: FunctionComponent<EuiSwitchProps> = ({
   className,
   ...rest
 }) => {
-  const switchId = id || makeId();
+  const [switchId] = useState(id || makeId());
 
   const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    const event = (e as unknown) as React.ChangeEvent<HTMLInputElement>;
+    const event = (e as unknown) as EuiSwitchEvent;
     event.target.checked = !checked;
     onChange(event);
   };

From 68e650be178f9c2f468f9ff0e499af36051bf771 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 21 Aug 2019 12:25:56 -0500
Subject: [PATCH 4/5] change interface to type

---
 src/components/form/switch/switch.tsx | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/form/switch/switch.tsx b/src/components/form/switch/switch.tsx
index 61dfabb7a3d..334b7394bb6 100644
--- a/src/components/form/switch/switch.tsx
+++ b/src/components/form/switch/switch.tsx
@@ -10,14 +10,13 @@ import { CommonProps, Omit } from '../../common';
 import makeId from '../../form/form_row/make_id';
 import { EuiIcon } from '../../icon';
 
-export interface EuiSwitchEvent
-  extends React.BaseSyntheticEvent<
-    React.MouseEvent<HTMLButtonElement>,
-    HTMLButtonElement,
-    EventTarget & {
-      checked: boolean;
-    }
-  > {}
+export type EuiSwitchEvent = React.BaseSyntheticEvent<
+  React.MouseEvent<HTMLButtonElement>,
+  HTMLButtonElement,
+  EventTarget & {
+    checked: boolean;
+  }
+>;
 
 export type EuiSwitchProps = CommonProps &
   Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> & {

From d6bee5efcdac4f52041119b96ff7789f1730c8e7 Mon Sep 17 00:00:00 2001
From: Greg Thompson <thompson.glowe@gmail.com>
Date: Wed, 21 Aug 2019 12:27:38 -0500
Subject: [PATCH 5/5] CL

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 31f8fa0f268..91df2d6e522 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiSwitch` to TypeScript ([#2243](https://github.com/elastic/eui/pull/2243))
+
 **Bug fixes**
 
 - Added missing `viewBox` attribute to Docker, Kubernetes, and Redis logos ([#2240](https://github.com/elastic/eui/pull/2240))