From 98539d2d0a8640dbe60983836c6b353ce923b38d Mon Sep 17 00:00:00 2001
From: Jonathan Grangien <jonathan.grangien@gmail.com>
Date: Tue, 29 May 2018 15:29:36 -0400
Subject: [PATCH] Refactor SmallLabel into generic label with size prop

and apply to data loader button
---
 .../BottomBar/Origin/OriginPicker.jsx         |  4 +-
 .../TfEditor/containers/TfEditor.jsx          |  4 +-
 .../src/components/BottomBar/TimePicker.jsx   |  4 +-
 .../components/BottomBar/ToggleDataLoader.jsx |  7 ++-
 .../BottomBar/ToggleDataLoader.scss           |  4 +-
 .../web/src/components/Sidebar/Sidebar.jsx    |  6 +-
 .../web/src/components/common/Label/Label.jsx | 55 +++++++++++++++++++
 .../src/components/common/Label/Label.scss    | 20 +++++++
 .../Label.story.jsx}                          |  8 +--
 .../common/SmallLabel/SmallLabel.jsx          | 23 --------
 .../common/SmallLabel/SmallLabel.scss         |  7 ---
 11 files changed, 95 insertions(+), 47 deletions(-)
 create mode 100644 modules/webgui/web/src/components/common/Label/Label.jsx
 create mode 100644 modules/webgui/web/src/components/common/Label/Label.scss
 rename modules/webgui/web/src/components/common/{SmallLabel/SmallLabel.story.jsx => Label/Label.story.jsx} (50%)
 delete mode 100644 modules/webgui/web/src/components/common/SmallLabel/SmallLabel.jsx
 delete mode 100644 modules/webgui/web/src/components/common/SmallLabel/SmallLabel.scss

diff --git a/modules/webgui/web/src/components/BottomBar/Origin/OriginPicker.jsx b/modules/webgui/web/src/components/BottomBar/Origin/OriginPicker.jsx
index 64aed1df2a..fb58951795 100644
--- a/modules/webgui/web/src/components/BottomBar/Origin/OriginPicker.jsx
+++ b/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 && (
diff --git a/modules/webgui/web/src/components/BottomBar/TfEditor/containers/TfEditor.jsx b/modules/webgui/web/src/components/BottomBar/TfEditor/containers/TfEditor.jsx
index b698e58490..423e64d494 100644
--- a/modules/webgui/web/src/components/BottomBar/TfEditor/containers/TfEditor.jsx
+++ b/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>
diff --git a/modules/webgui/web/src/components/BottomBar/TimePicker.jsx b/modules/webgui/web/src/components/BottomBar/TimePicker.jsx
index 2086731b14..66a2ebfbfa 100644
--- a/modules/webgui/web/src/components/BottomBar/TimePicker.jsx
+++ b/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>
 
diff --git a/modules/webgui/web/src/components/BottomBar/ToggleDataLoader.jsx b/modules/webgui/web/src/components/BottomBar/ToggleDataLoader.jsx
index a1d0dbec06..5f37cfee66 100644
--- a/modules/webgui/web/src/components/BottomBar/ToggleDataLoader.jsx
+++ b/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>
   );
 };
diff --git a/modules/webgui/web/src/components/BottomBar/ToggleDataLoader.scss b/modules/webgui/web/src/components/BottomBar/ToggleDataLoader.scss
index 474bae13f2..b0def70fbd 100644
--- a/modules/webgui/web/src/components/BottomBar/ToggleDataLoader.scss
+++ b/modules/webgui/web/src/components/BottomBar/ToggleDataLoader.scss
@@ -1,4 +1,4 @@
 
-.loader {
-
+.container {
+  padding: 0 14px;
 }
\ No newline at end of file
diff --git a/modules/webgui/web/src/components/Sidebar/Sidebar.jsx b/modules/webgui/web/src/components/Sidebar/Sidebar.jsx
index ca9b70b183..8778ad8001 100644
--- a/modules/webgui/web/src/components/Sidebar/Sidebar.jsx
+++ b/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>
diff --git a/modules/webgui/web/src/components/common/Label/Label.jsx b/modules/webgui/web/src/components/common/Label/Label.jsx
new file mode 100644
index 0000000000..676c7fb35d
--- /dev/null
+++ b/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;
diff --git a/modules/webgui/web/src/components/common/Label/Label.scss b/modules/webgui/web/src/components/common/Label/Label.scss
new file mode 100644
index 0000000000..e573a8ef5d
--- /dev/null
+++ b/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;
+}
diff --git a/modules/webgui/web/src/components/common/SmallLabel/SmallLabel.story.jsx b/modules/webgui/web/src/components/common/Label/Label.story.jsx
similarity index 50%
rename from modules/webgui/web/src/components/common/SmallLabel/SmallLabel.story.jsx
rename to modules/webgui/web/src/components/common/Label/Label.story.jsx
index d6c07ff593..f45bf4cc8d 100644
--- a/modules/webgui/web/src/components/common/SmallLabel/SmallLabel.story.jsx
+++ b/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>));
diff --git a/modules/webgui/web/src/components/common/SmallLabel/SmallLabel.jsx b/modules/webgui/web/src/components/common/SmallLabel/SmallLabel.jsx
deleted file mode 100644
index 349255e645..0000000000
--- a/modules/webgui/web/src/components/common/SmallLabel/SmallLabel.jsx
+++ /dev/null
@@ -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;
diff --git a/modules/webgui/web/src/components/common/SmallLabel/SmallLabel.scss b/modules/webgui/web/src/components/common/SmallLabel/SmallLabel.scss
deleted file mode 100644
index 45a6525ff5..0000000000
--- a/modules/webgui/web/src/components/common/SmallLabel/SmallLabel.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.SmallLabel {
-  font-size: 0.7rem;
-  letter-spacing: 0.15em;
-  line-height: 1;
-  padding-top: 0.3em;
-  text-transform: uppercase;
-}