Badges in field preview

src/components/Badge.js

@@ -1,12 +1,26 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
-const Badge = ({ color, children }) => (
-  <div
-    className="badge"
-    style={{ backgroundColor: color }}
-  >
-    {children}
-  </div>
-);
+const Badge = ({ color, children }) => {
+  const style = color ?
+    { backgroundColor: color } :
+    {};
+
+  return (
+    <div className="badge" style={style}>
+      {children}
+    </div>
+  );
+};
+
+Badge.propTypes = {
+  color: PropTypes.string,
+  children: PropTypes.node,
+};
+
+Badge.defaultProps = {
+  color: null,
+  children: null,
+};
 
 export default Badge;

src/components/sections/Form/FieldPreview.js

@@ -3,23 +3,26 @@ import PropTypes from 'prop-types';
 import { Field } from 'redux-form';
 import Preview from '../../EditableList/Preview';
 import Badge from '../../Badge';
+import { getColorForType, getTypeForComponent } from './inputOptions';
 
-const getColorForType = (type) => {
-  switch (type) {
-    // return 'var(--color-mustard--dark)';
-    // return 'var(--color-sea-green)';
-    // return 'var(--color-sea-green--dark)';
-    default:
-      return 'var(--color-slate-blue--dark)';
-  }
+const PreviewFieldComponent = ({
+  input: {
+    value,
+  },
+}) => {
+  const type = getTypeForComponent(value.component);
+
+  return (
+    <div>
+      {value.prompt}
+      <Badge color={getColorForType(type)}>{value.component}:{type}</Badge>
+    </div>
+  );
 };
 
-const PreviewFieldComponent = ({ input: { value } }) => (
-  <div>
-    {value.prompt}
-    <Badge color={getColorForType()}>{value.component}</Badge>
-  </div>
-);
+PreviewFieldComponent.propTypes = {
+  input: PropTypes.object.isRequired,
+};
 
 class PromptPreview extends Preview {
   preview() {

src/components/sections/Form/Form.js

@@ -79,6 +79,7 @@ Form.propTypes = {
   handleChangeFields: PropTypes.func.isRequired,
   form: PropTypes.string.isRequired,
   disabled: PropTypes.bool,
+  nodeType: PropTypes.string.isRequired,
 };
 
 Form.defaultProps = {

src/components/sections/Form/inputOptions.js

@@ -99,12 +99,28 @@ const isVariableTypeWithOptions = variableType =>
 
 const inputOptions = values(COMPONENTS);
 
+const getColorForType = (type) => {
+  switch (type) {
+    case 'number':
+    case 'text':
+      return 'var(--color-mustard--dark)';
+    case 'boolean':
+      return 'var(--color-sea-green)';
+    case 'ordinal':
+    case 'categorical':
+      return 'var(--color-sea-green--dark)';
+    default:
+      return 'var(--color-slate-blue--dark)';
+  }
+};
+
 export {
   COMPONENTS,
   VARIABLE_TYPES_WITH_OPTIONS,
   inputOptions,
   getTypeForComponent,
   getComponentsForType,
+  getColorForType,
   isVariableTypeWithOptions,
 };
 

src/styles/components/_badge.scss

@@ -1,6 +1,6 @@
 .badge {
   display: inline-flex;
-  background-color: grey;
+  background-color: var(--color-mid-grey);
   border-radius: unit(.5);
   padding: unit(.5);
   margin: 0 unit(1);