Style the StepperInput component

ui/app/components/stepper-input.js

@@ -2,13 +2,14 @@ import Component from '@ember/component';
 import { action } from '@ember/object';
 import { debounce } from '@ember/runloop';
 import { oneWay } from '@ember/object/computed';
-import { classNames } from '@ember-decorators/component';
+import { classNames, classNameBindings } from '@ember-decorators/component';
 import classic from 'ember-classic-decorator';
 
 const ESC = 27;
 
 @classic
 @classNames('stepper-input')
+@classNameBindings('class')
 export default class StepperInput extends Component {
   min = 0;
   max = 10;
@@ -21,13 +22,6 @@ export default class StepperInput extends Component {
   // On onChange which is debounced.
   @oneWay('value') internalValue;
 
-  // text change: debounce set value if value changed
-  //    debouncing here means when the text input blurs to click a button
-  //    things don't get weird and send two change events
-  // text focus ESC: revert value
-  //
-  // Also add the xsmall button to the existing button story
-
   @action
   increment() {
     if (this.internalValue < this.max) {

ui/app/styles/components.scss

@@ -27,6 +27,7 @@
 @import './components/search-box';
 @import './components/simple-list';
 @import './components/status-text';
+@import './components/stepper-input';
 @import './components/timeline';
 @import './components/toggle';
 @import './components/toolbar';

ui/app/styles/components/stepper-input.scss

@@ -0,0 +1,78 @@
+.stepper-input {
+  display: inline-flex;
+  font-weight: $weight-bold;
+  box-shadow: $button-box-shadow-standard;
+  border: 1px solid transparent;
+  text-decoration: none;
+  line-height: 1;
+  border-radius: $radius;
+  padding-left: 0.75em;
+  whitespace: nowrap;
+  height: 2.25em;
+
+  .stepper-input-label {
+    display: flex;
+    align-self: center;
+    padding-right: 0.75em;
+  }
+
+  .stepper-input-input {
+    display: flex;
+    text-align: center;
+    font-weight: bold;
+    -moz-appearance: textfield;
+    width: 3em;
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 1px $grey-light;
+    }
+  }
+
+  .stepper-input-input,
+  .stepper-input-stepper {
+    border: none;
+    border-left: 1px solid;
+  }
+
+  .stepper-input-stepper {
+    box-shadow: none;
+    display: flex;
+    height: 100%;
+    border-radius: 0;
+
+    &:last-child {
+      border-top-right-radius: $radius;
+      border-bottom-right-radius: $radius;
+    }
+  }
+
+  @each $name, $pair in $colors {
+    $color: nth($pair, 1);
+    $color-invert: nth($pair, 2);
+
+    &.is-#{$name} {
+      border-color: darken($color, 10%);
+      background: $color;
+      color: $color-invert;
+
+      .stepper-input-input,
+      .stepper-input-stepper {
+        border-left-color: darken($color, 5%);
+      }
+
+      .stepper-input-stepper.is-#{$name} {
+        &:focus {
+          outline: none;
+          box-shadow: inset 0 0 0 1px rgba($white, 0.4);
+        }
+      }
+    }
+  }
+}

ui/app/templates/components/stepper-input.hbs

@@ -1,21 +1,22 @@
-<label>{{yield}}</label>
+<label class="stepper-input-label">{{yield}}</label>
 <input
   type="number"
   min={{min}}
   max={{max}}
   value={{internalValue}}
+  class="stepper-input-input"
   onKeyDown={{action "resetTextInput"}}
   onChange={{action "setValue"}}>
 <button
   role="button"
-  class="button"
+  class="stepper-input-stepper button {{class}}"
   disabled={{lte internalValue min}}
   onclick={{action "decrement"}}>
   {{x-icon "minus-plain"}}
 </button>
 <button
   role="button"
-  class="button"
+  class="stepper-input-stepper button {{class}}"
   disabled={{gte internalValue max}}
   onclick={{action "increment"}}>
   {{x-icon "plus-plain"}}

ui/stories/components/stepper-input.stories.js

@@ -1,9 +1,27 @@
 import hbs from 'htmlbars-inline-precompile';
+import { withKnobs, optionsKnob } from '@storybook/addon-knobs';
 
 export default {
   title: 'Components|Stepper Input',
+  decorators: [withKnobs],
 };
 
+const variantKnob = () =>
+  optionsKnob(
+    'Variant',
+    {
+      Primary: 'is-primary',
+      Info: 'is-info',
+      Warning: 'is-warning',
+      Danger: 'is-danger',
+    },
+    'is-primary',
+    {
+      display: 'inline-radio',
+    },
+    'variant-id'
+  );
+
 export let Standard = () => {
   return {
     template: hbs`
@@ -12,9 +30,11 @@ export let Standard = () => {
           @value={{value}}
           @min={{min}}
           @max={{max}}
+          @class={{variant}}
           @onChange={{action (mut value)}}>
           Stepper
         </StepperInput>
+        <button class="button is-info">Button for Context</button>
       </p>
       <p class="mock-spacing"><strong>External Value:</strong> {{value}}</p>
     `,
@@ -22,6 +42,7 @@ export let Standard = () => {
       min: 0,
       max: 10,
       value: 5,
+      variant: variantKnob(),
     },
   };
 };