Refactor SmallLabel into generic label with size prop

and apply to data loader button

modules/webgui/web/src/components/BottomBar/Origin/OriginPicker.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import SmallLabel from '../../common/SmallLabel/SmallLabel';
+import Label from '../../common/Label/Label';
 import Icon from '../../common/Icon/Icon';
 import LoadingString from '../../common/LoadingString/LoadingString';
 import Picker from '../Picker';
@@ -80,7 +80,7 @@ class OriginPicker extends Component {
                 { this.origin }
               </LoadingString>
             </span>
-            <SmallLabel>Focus</SmallLabel>
+            <Label>Focus</Label>
           </div>
         </Picker>
         { showPopover && (

modules/webgui/web/src/components/BottomBar/TfEditor/containers/TfEditor.jsx

@@ -12,7 +12,7 @@ import styles from '../style/TfEditor.scss';
 import ColorPicker from './ColorPicker';
 import Button from '../../../common/Input/Button/Button';
 import Select from '../../../common/Input/Select/Select';
-import SmallLabel from '../../../common/SmallLabel/SmallLabel';
+import Label from '../../../common/Label/Label';
 
 class TfEditor extends Component {
   constructor(props) {
@@ -86,7 +86,7 @@ class TfEditor extends Component {
             <Picker onClick={this.toggleTfEditor} className={(showTfEditor ? styles.Active : '')}>
               <div className={styles.FlexColumn}>
                 <TfIcon className={styles.iconImage} />
-                <SmallLabel>Tf-Editor</SmallLabel>
+                <Label size='small'>Tf-Editor</Label>
               </div>
             </Picker>
             <div>

modules/webgui/web/src/components/BottomBar/TimePicker.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import DataManager, { TopicTypes } from '../../api/DataManager';
 import LoadingString from '../common/LoadingString/LoadingString';
 import Popover from '../common/Popover/Popover';
-import SmallLabel from '../common/SmallLabel/SmallLabel';
+import Label from '../common/Label/Label';
 import Button from '../common/Input/Button/Button';
 import Calendar from '../common/Calendar/Calendar';
 import Picker from './Picker';
@@ -135,7 +135,7 @@ class TimePicker extends Component {
                 { this.time }
               </LoadingString>
             </span>
-            <SmallLabel>Date</SmallLabel>
+            <Label size='small'>Date</Label>
           </div>
         </Picker>
 

modules/webgui/web/src/components/BottomBar/ToggleDataLoader.jsx

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { toggleActivated } from '../../api/Actions/dataLoaderActions';
 
-import TabMenuItem from '../Sidebar/TabMenu/TabMenuItem';
+import TabMenuItem from '../common/TabMenu/TabMenuItem';
+import Label from '../common/Label/Label';
 
 import styles from './ToggleDataLoader.scss';
 
@@ -12,7 +13,9 @@ let ToggleDataLoader = (props) => {
 
   return (
     <TabMenuItem active={activated} onClick={() => props.toggleActivated(!activated)}>
-      <div className={`${styles.label}`}>DATA LOADER</div>
+      <div className={`${styles.container}`}>
+        <Label size='medium'>DATA LOADER</Label>
+      </div>
     </TabMenuItem>
   );
 };

modules/webgui/web/src/components/BottomBar/ToggleDataLoader.scss

@@ -1,4 +1,4 @@
 
-.loader {
-
+.container {
+  padding: 0 14px;
 }

modules/webgui/web/src/components/Sidebar/Sidebar.jsx

@@ -4,7 +4,7 @@ import TabMenu from '../common/TabMenu/TabMenu';
 import SystemMenu from '../SystemMenu/SystemMenu';
 import TabMenuItem from '../common/TabMenu/TabMenuItem';
 import Icon from '../common/Icon/Icon';
-import SmallLabel from '../common/SmallLabel/SmallLabel';
+import Label from '../common/Label/Label';
 import ScenePane from './ScenePane';
 import SettingsPane from './SettingsPane';
 
@@ -48,11 +48,11 @@ class Sidebar extends React.Component {
           <SystemMenu />
           <TabMenuItem active={this.isActive('scene')} onClick={this.selectView('scene')}>
             <Icon className={styles.icon} icon="layers" />
-            <SmallLabel>Scene</SmallLabel>
+            <Label>Scene</Label>
           </TabMenuItem>
           <TabMenuItem active={this.isActive('settings')} onClick={this.selectView('settings')}>
             <Icon className={styles.icon} icon="settings" />
-            <SmallLabel>Settings</SmallLabel>
+            <Label size='small'>Settings</Label>
           </TabMenuItem>
         </TabMenu>
       </section>

modules/webgui/web/src/components/common/Label/Label.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import styles from './Label.scss';
+
+// const validateSize = (size) => {
+//   const acceptedValues = ['small', 'medium', 'large'];
+//   acceptedValues.map(v, {
+//     
+//   })
+//   
+// }
+// 
+
+const getClassNames = (size) => {
+  let classes = styles.base
+
+  switch(size) {
+    case 'small':
+      classes += ` ${styles.smallLabel}`
+      break;
+    default:
+      break;
+    case 'medium':
+      classes += ` ${styles.mediumLabel}`
+      break;
+    case 'large':
+      classes += ` ${styles.largeLabel}`
+      break;
+  }
+
+  return classes
+}
+
+const Label = (props) => {
+  const { children, size } = props;
+
+  return (
+    <span {...props} className={getClassNames(size)}>
+      { children }
+    </span>
+  );
+};
+
+Label.propTypes = {
+  children: PropTypes.node,
+  size: PropTypes.oneOf(['small', 'medium', 'large'])
+};
+
+Label.defaultProps = {
+  children: [],
+  size: 'small'
+};
+
+export default Label;

modules/webgui/web/src/components/common/Label/Label.scss

@@ -0,0 +1,20 @@
+.base {
+  letter-spacing: 0.15em;
+  text-transform: uppercase;
+}
+
+.smallLabel {
+  font-size: 0.7rem;
+  line-height: 1;
+  padding-top: 0.3em;
+}
+.mediumLabel {
+  font-size: 0.9rem;
+  line-height: 1.2;
+  padding-top: 0.3em;
+}
+.largeLabel {
+  font-size: 1.1rem;
+  line-height: 1.4;
+  padding-top: 0.3em;
+}

modules/webgui/web/src/components/common/Label/Label.story.jsx

@@ -2,10 +2,10 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import SmallLabel from './SmallLabel';
+import Label from './Label';
 /* globals module */
 
-storiesOf('SmallLabel', module)
-  .add('no options', () => (<SmallLabel>Hello</SmallLabel>))
+storiesOf('Label', module)
+  .add('no options', () => (<Label>Hello</Label>))
   .add('with some props', () => (
-    <SmallLabel style={{ color: 'red' }} onClick={action('clicked')}>Click me!</SmallLabel>));
+    <Label style={{ color: 'red' }} onClick={action('clicked')}>Click me!</Label>));

modules/webgui/web/src/components/common/SmallLabel/SmallLabel.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import styles from './SmallLabel.scss';
-
-const SmallLabel = (props) => {
-  const { children } = props;
-  return (
-    <span {...props} className={styles.SmallLabel}>
-      { children }
-    </span>
-  );
-};
-
-SmallLabel.propTypes = {
-  children: PropTypes.node,
-};
-
-SmallLabel.defaultProps = {
-  children: [],
-};
-
-export default SmallLabel;

modules/webgui/web/src/components/common/SmallLabel/SmallLabel.scss

@@ -1,7 +0,0 @@
-.SmallLabel {
-  font-size: 0.7rem;
-  letter-spacing: 0.15em;
-  line-height: 1;
-  padding-top: 0.3em;
-  text-transform: uppercase;
-}