adding label to joystick

Author: nicolaskruchten

demo.py

@@ -50,7 +50,8 @@
 ################ Set up light layout ################
 controls = html.Div([
      Joystick(
-        id='demojoystick'
+        id='demojoystick',
+        label='Joystick',
      ),
      Knob(
         id='demoKnob',
@@ -239,6 +240,10 @@
 
 ################ Set up dark layout ################
 dark_controls = html.Div([
+     Joystick(
+        id='dark-demojoystick',
+        label='Joystick',
+     ),
      Knob(
         id='dark-demoKnob',
         label='Knob',

src/components/Joystick.react.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withTheme } from 'styled-components';
 import joystick from 'nipplejs';
 import { light } from '../styled/constants';
+import LabelContainer from '../styled/shared/LabelContainer.styled';
 
 /**
  * A joystick.
@@ -51,14 +52,16 @@ class Joystick extends Component {
 
     return (
       <div id={id} className={className} style={style}>
-        <div
-          ref={ref => (this.zoneRef = ref)}
-          style={{
-            position: 'relative',
-            width: size + 'px',
-            height: size + 'px'
-          }}
-        />
+        <LabelContainer {...this.props}>
+          <div
+            ref={ref => (this.zoneRef = ref)}
+            style={{
+              position: 'relative',
+              width: size + 'px',
+              height: size + 'px'
+            }}
+          />
+        </LabelContainer>
       </div>
     );
   }