added switch form component

public/app/core/components/Forms/Forms.tsx → public/app/core/components/Label/Label.tsx

@@ -19,3 +19,4 @@ export const Label: SFC<Props> = props => {
     </span>
   );
 };
+

public/app/core/components/Switch/Switch.tsx

+import React, { PureComponent } from 'react';
+import _ from 'lodash';
+
+export interface Props {
+  label: string;
+  checked: boolean;
+  labelClass?: string;
+  switchClass?: string;
+  onChange: (event) => any;
+}
+
+export interface State {
+  id: any;
+}
+
+export class Switch extends PureComponent<Props, State> {
+  state = {
+    id: _.uniqueId(),
+  };
+
+  internalOnChange = event => {
+    event.stopPropagation();
+    this.props.onChange(event);
+  };
+
+  render() {
+    const { labelClass, switchClass, label, checked } = this.props;
+    const labelId = `check-${this.state.id}`;
+    const labelClassName = `gf-form-label ${labelClass} pointer`;
+    const switchClassName = `gf-form-switch ${switchClass}`;
+
+    return (
+      <div className="gf-form">
+        {label && (
+          <label htmlFor={labelId} className={labelClassName}>
+            {label}
+          </label>
+        )}
+        <div className={switchClassName}>
+          <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />
+          <label htmlFor={labelId} />
+        </div>
+      </div>
+    );
+  }
+}

public/app/features/teams/TeamSettings.tsx

 import React from 'react';
 import { connect } from 'react-redux';
-import { Label } from 'app/core/components/Forms/Forms';
+import { Label } from 'app/core/components/Label/Label';
 import { Team } from '../../types';
 import { updateTeam } from './state/actions';
 import { getRouteParamsId } from '../../core/selectors/location';

public/app/plugins/panel/graph2/module.tsx

@@ -5,6 +5,7 @@ import React, { PureComponent } from 'react';
 // Components
 import Graph from 'app/viz/Graph';
 import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
+import { Switch } from 'app/core/components/Switch/Switch';
 
 // Types
 import { PanelProps, NullValueMode } from 'app/types';
@@ -35,10 +36,13 @@ export class Graph2 extends PureComponent<Props> {
 }
 
 export class TextOptions extends PureComponent<any> {
+  onChange = () => {};
+
   render() {
     return (
       <div className="section gf-form-group">
         <h5 className="section-heading">Draw Modes</h5>
+        <Switch label="Lines" checked={true} onChange={this.onChange} />
       </div>
     );
   }