feat: numbers

src/client/components/types/number.raw.scss

@@ -0,0 +1,20 @@
+:scope {
+  display: flex;
+}
+
+input {
+  max-width: 5em;
+}
+
+.controls {
+  display: flex;
+  flex-direction: column;
+}
+
+button {
+  border-left: none;
+
+  &:first-child {
+    border-bottom: none;
+  }
+}

src/client/components/types/number.type-renderer.jsx

@@ -1,8 +1,14 @@
+import {compose} from '@avocado/core';
+import contempo from 'contempo';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 import propertyPropTypes from './property-prop-types';
 
+const decorate = compose(
+  contempo(require('./number.raw.scss')),
+);
+
 const Number = ({
   options,
   value,
@@ -17,7 +23,19 @@ const Number = ({
             ))}
           </select>
         )
-        : <input type="text" value={value} />
+        : (
+          <>
+            <input
+              onWheel={(e) => (e.preventDefault(), false)}
+              type="text"
+              value={value}
+            />
+            <div className="controls">
+              <button type="button">+</button>
+              <button type="button">-</button>
+            </div>
+          </>
+        )
     }
   </span>
 );
@@ -29,5 +47,5 @@ Number.propTypes = {
 
 export default {
   type: 'number',
-  component: Number,
+  component: decorate(Number),
 };

src/client/index.scss

@@ -119,6 +119,12 @@ fieldset {
   width: 100%;
 }
 
+button {
+  background: #222222;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
 button, input[type="checkbox"], input[type="checkbox"] + label {
   cursor: pointer;
 }