Add basicVariationSwitch, drumSwitch, and IFVariationSwitch components

.gitignore

@@ -2,4 +2,5 @@
 node_modules
 npm-debug.log
 dist
-.idea
+.idea
+.vscode

.storybook/config.js

@@ -12,6 +12,9 @@ function loadStories() {
   require('../src/components/modeKnob/modeKnobStory');
   require('../src/components/instrumentSelectorKnob/instrumentSelectorKnobStory');
   require('../src/components/masterVolumeKnob/masterVolumeKnobStory');
+  require('../src/components/IFVariationSwtich/IFVariationSwitchStory');
+  require('../src/components/basicVariationSwitch/basicVariationSwitchStory');
+  require('../src/components/drumSwitch/drumSwitchStory');
 }
 
 configure(loadStories, module);

jsconfig.json

@@ -0,0 +1,5 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true
+  }
+}

src/components/IFVariationSwtich/IFVariationSwitch.js

@@ -0,0 +1,90 @@
+import React from 'react';
+import Radium from 'radium';
+
+import Light from '../light/light';
+import Switch from '../switch/switch';
+
+import { grey, darkBlack, silver } from '../../theme/variables';
+import { labelDarkGrey } from '../../theme/mixins';
+
+@Radium
+class IFVariationSwitch extends React.Component {
+  static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
+    position: React.PropTypes.number.isRequired
+  }
+
+  render() {
+    const { onChange, position } = this.props;
+
+    const thickness = 35;
+    const length = 65;
+
+    const styles = {
+      wrapper: {
+        width: length * 1.8, height: 87.5,
+
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      },
+
+      switchTitle: labelDarkGrey,
+
+      label: labelDarkGrey,
+
+      switchWrapper: {
+        width: length,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+      },
+
+      labelWrapper: {
+        width: length - 15,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingTop: 5
+      },
+
+      switchOuter: {
+        backgroundColor: darkBlack,
+        borderRadius: thickness * .475
+      },
+
+      switchInner: {
+        backgroundColor: silver,
+        borderRadius: '50%',
+        border: `solid ${grey} 2px`
+      }
+    };
+
+    return (
+      <div style={styles.wrapper}>
+        <div style={styles.switchTitle}>I / F - VARIATION</div>
+        <div style={styles.switchWrapper}>
+          <Switch
+            position={position}
+            onChange={onChange}
+            direction='horizontal'
+            numPositions={2}
+            thickness={thickness}
+            length={length}
+            padding={5}
+            innerThickness={thickness - 10}
+            outerStyle={styles.switchOuter}
+            innerStyle={styles.switchInner} />
+          <div style={styles.labelWrapper}>
+            <div style={styles.label}>A</div>
+            <div style={styles.label}>B</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default IFVariationSwitch;

src/components/IFVariationSwtich/IFVariationSwitchStory.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import IFVariationSwitch from './IFVariationSwitch';
+
+import { grey } from '../../theme/variables';
+
+class SwitchWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      switchPosition: 0
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value) {
+    this.setState({
+      switchPosition: value
+    });
+  }
+
+  render() {
+    const style = {
+      width: '100%', height: '100%',
+      backgroundColor: grey,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+
+    return (
+      <div style={style}>
+        <IFVariationSwitch
+          onChange={this.handleChange}
+          position={this.state.switchPosition} />
+      </div>
+    );
+  }
+}
+
+storiesOf('IFVariationSwitch', module)
+  .add('default', () => (
+    <SwitchWrapper />
+  ));

src/components/basicVariationSwitch/basicVariationSwitch.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import Radium from 'radium';
+
+import Light from '../light/light';
+import Switch from '../switch/switch';
+
+import { grey, darkBlack, silver } from '../../theme/variables';
+import { labelDarkGrey } from '../../theme/mixins';
+
+@Radium
+class BasicVariationSwitch extends React.Component {
+  static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
+    position: React.PropTypes.number.isRequired,
+    aActive: React.PropTypes.bool.isRequired,
+    bActive: React.PropTypes.bool.isRequired,
+  }
+
+  render() {
+    const { onChange, position, aActive, bActive } = this.props;
+
+    const thickness = 35;
+    const length = 100;
+
+    const styles = {
+      wrapper: {
+        width: length * 1.8, height: 130,
+
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'space-between'
+      },
+
+      switchTitle: labelDarkGrey,
+
+      label: labelDarkGrey,
+
+      switchWrapper: {
+        width: length,
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+      },
+
+      labelWrapper: {
+        width: length - 15,
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingTop: 10,
+        borderRadius: 1
+      },
+
+      lightsWrapper: {
+        width: length,
+        height: thickness - 5,
+        backgroundColor: darkBlack,
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        padding: 4
+      },
+
+      switchOuter: {
+        backgroundColor: darkBlack,
+        borderRadius: thickness * .475
+      },
+
+      switchInner: {
+        backgroundColor: silver,
+        borderRadius: '50%',
+        border: `solid ${grey} 2px`
+      }
+    };
+
+    return (
+      <div style={styles.wrapper}>
+        <div style={styles.switchTitle}>BASIC VARIATION</div>
+        <div style={styles.switchWrapper}>
+          <Switch
+            position={position}
+            onChange={onChange}
+            direction='horizontal'
+            numPositions={3}
+            thickness={thickness}
+            length={length}
+            padding={5}
+            innerThickness={thickness - 10}
+            outerStyle={styles.switchOuter}
+            innerStyle={styles.switchInner} />
+          <div style={styles.labelWrapper}>
+            <div style={styles.label}>A</div>
+            <div style={styles.label}>AB</div>
+            <div style={styles.label}>B</div>
+          </div>
+        </div>
+        <div style={styles.lightsWrapper}>
+          <Light active={aActive} />
+          <Light active={bActive} />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default BasicVariationSwitch;

src/components/basicVariationSwitch/basicVariationSwitchStory.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import BasicVariationSwitch from './BasicVariationSwitch';
+
+import { grey } from '../../theme/variables';
+
+class SwitchWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      switchPosition: 0,
+      aActive: true,
+      bActive: false
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(value) {
+    let aActive, bActive;
+
+    switch (value) {
+      case 0:
+        aActive = true;
+        bActive = false;
+        break;
+      case 1:
+        aActive = true;
+        bActive = true;
+        break;
+      case 2:
+        aActive = false;
+        bActive = true;
+        break;
+    }
+
+    this.setState({
+      switchPosition: value,
+      aActive, bActive
+    });
+  }
+
+  render() {
+    const style = {
+      width: '100%', height: '100%',
+      backgroundColor: grey,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+
+    return (
+      <div style={style}>
+        <BasicVariationSwitch
+          onChange={this.handleChange}
+          position={this.state.switchPosition}
+          aActive={this.state.aActive}
+          bActive={this.state.bActive} />
+      </div>
+    );
+  }
+}
+
+storiesOf('BasicVariationSwitch', module)
+  .add('default', () => (
+    <SwitchWrapper />
+  ));

src/components/drumSwitch/drumSwitch.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import Radium from 'radium';
+
+import Switch from '../switch/switch';
+
+import { darkBlack, slightlyDarkerBlack } from '../../theme/variables';
+
+const borderRadius = 2;
+
+@Radium
+class DrumSwitch extends React.Component {
+  static propTypes = {
+    onChange: React.PropTypes.func.isRequired,
+    position: React.PropTypes.number.isRequired
+  }
+
+  render() {
+    const styles = {
+      inner: {
+        backgroundColor: darkBlack,
+        borderRadius: borderRadius
+      },
+
+      outer: {
+        backgroundColor: slightlyDarkerBlack,
+        borderRadius: borderRadius
+      }
+    };
+
+    return (
+      <Switch
+        {...this.props}
+        direction='vertical'
+        numPositions={2}
+        thickness={30}
+        length={50}
+        padding={4}
+        innerThickness={22}
+        outerStyle={styles.outer}
+        innerStyle={styles.inner} />
+    );
+  }
+}
+
+export default DrumSwitch;