Convert EuiSwitch to TS (elastic#2243)

* convert euiswitch to ts

* remove test file

* euiswitchevent; store id in state

* change interface to type

* CL

src-docs/src/views/form_controls/switch.js

@@ -11,9 +11,9 @@ export default class extends Component {
     };
   }
 
-  onChange = e => {
+  onChange = () => {
     this.setState({
-      checked: e.target.checked,
+      checked: !this.state.checked,
     });
   };
 

src/components/form/_variables.scss

@@ -31,3 +31,4 @@ $euiFormControlDisabledColor: $euiColorMediumShade !default;
 $euiFormControlBoxShadow: 0 1px 1px -1px transparentize($euiShadowColor, .8), 0 3px 2px -2px transparentize($euiShadowColor, .8) !default;
 $euiFormInputGroupLabelBackground: tintOrShade($euiColorLightShade, 65%, 40%) !default;
 $euiFormInputGroupBorder: 1px solid shadeOrTint($euiFormInputGroupLabelBackground, 6%, 8%) !default;
+$euiSwitchOffColor: lightOrDarkTheme(transparentize($euiColorMediumShade, .8), transparentize($euiColorMediumShade, .3)) !default;

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';

src/components/form/switch/__snapshots__/switch.test.tsx.snap

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiSwitch assigns automatically generated ID to label 1`] = `
+<div
+  class="euiSwitch"
+>
+  <button
+    aria-checked="false"
+    class="euiSwitch__button"
+    id="generated-id"
+    role="switch"
+  >
+    <span
+      class="euiSwitch__body"
+    >
+      <span
+        class="euiSwitch__thumb"
+      />
+      <span
+        class="euiSwitch__track"
+      >
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </span>
+    </span>
+  </button>
+  <label
+    class="euiSwitch__label"
+    for="generated-id"
+  >
+    Label
+  </label>
+</div>
+`;
+
+exports[`EuiSwitch is rendered 1`] = `
+<div
+  class="euiSwitch testClass1 testClass2"
+>
+  <button
+    aria-checked="false"
+    aria-label="aria-label"
+    class="euiSwitch__button"
+    data-test-subj="test subject string"
+    id="test"
+    role="switch"
+  >
+    <span
+      class="euiSwitch__body"
+    >
+      <span
+        class="euiSwitch__thumb"
+      />
+      <span
+        class="euiSwitch__track"
+      >
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+        <svg
+          class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+          focusable="false"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        />
+      </span>
+    </span>
+  </button>
+  <label
+    class="euiSwitch__label"
+    for="test"
+  >
+    Label
+  </label>
+</div>
+`;