web/satellite: create select input component to capture employee count in registration

The current input dropdown solution allowed users to input their own text for employee count.
We want them to be limited to 3 choices, with a default value if none are chosen

Change-Id: I0fb2ab58fc756967efeac5f67e0f7001ef19c66f

web/satellite/src/components/common/SelectInput.vue

@@ -0,0 +1,131 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+<template>
+    <div class="input-wrap">
+        <div class="label-container">
+            <p class="label-container__label" v-if="label" :style="style.labelStyle">{{label}}</p>
+        </div>
+        <InputCaret v-if="optionsList.length > 0" class="select-input__caret" />
+        <select
+            :style="style.inputStyle"
+            class="select-input"
+            v-model="value"
+            @change="onInput"
+        >
+            <option
+                class="select-input__option"
+                v-for="(option, index) in optionsList"
+                :key="index"
+                :value="option"
+            >
+                {{option}}
+            </option>
+        </select>
+    </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+import InputCaret from '@/../static/images/common/caret.svg';
+
+// Custom input component for login page
+@Component({
+    components: {
+        InputCaret,
+    },
+})
+export default class SelectInput extends Vue {
+
+    protected value: string = '';
+
+    @Prop({default: ''})
+    protected readonly label: string;
+    @Prop({default: '48px'})
+    protected readonly height: string;
+    @Prop({default: '100%'})
+    protected readonly width: string;
+    @Prop({default: () => []})
+    protected readonly optionsList: string[];
+
+    @Prop({default: false})
+    private readonly isWhite: boolean;
+
+    public constructor() {
+        super();
+
+        this.value = this.optionsList ? this.optionsList[0] : '';
+        this.$emit('setData', this.value);
+    }
+
+    /**
+     * triggers on input.
+     */
+    public onInput({ target }): void {
+        this.$emit('setData', target.value);
+    }
+
+    /**
+     * Returns style objects depends on props.
+     */
+    protected get style(): object {
+        return {
+            inputStyle: {
+                width: this.width,
+                height: this.height,
+            },
+            labelStyle: {
+                color: this.isWhite ? 'white' : '#354049',
+            },
+        };
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    .input-wrap {
+        position: relative;
+        width: 100%;
+        font-family: 'font_regular', sans-serif;
+
+        .select-input {
+            font-size: 16px;
+            line-height: 21px;
+            resize: none;
+            height: 46px;
+            padding: 0 30px 0 0;
+            text-indent: 20px;
+            border: 1px solid rgba(56, 75, 101, 0.4);
+            border-radius: 6px;
+            -webkit-box-sizing: border-box;
+            -moz-box-sizing: border-box;
+            box-sizing: border-box;
+            -webkit-appearance: none;
+            -moz-appearance: none;
+            appearance: none;
+
+            &__caret {
+                position: absolute;
+                right: 28px;
+                bottom: 18px;
+            }
+        }
+    }
+
+    .label-container {
+        display: flex;
+        justify-content: flex-start;
+        align-items: flex-end;
+        padding-bottom: 8px;
+        flex-direction: row;
+
+        &__label {
+            font-size: 16px;
+            line-height: 21px;
+            color: #354049;
+            margin-bottom: 0;
+        }
+    }
+
+</style>

web/satellite/src/views/register/RegisterArea.vue

@@ -10,6 +10,7 @@ import AddCouponCodeInput from '@/components/common/AddCouponCodeInput.vue';
 import HeaderlessInput from '@/components/common/HeaderlessInput.vue';
 import PasswordStrength from '@/components/common/PasswordStrength.vue';
 import RegistrationSuccess from '@/components/common/RegistrationSuccess.vue';
+import SelectInput from '@/components/common/SelectInput.vue';
 
 import AuthIcon from '@/../static/images/AuthImage.svg';
 import BottomArrowIcon from '@/../static/images/common/lightBottomArrow.svg';
@@ -36,6 +37,7 @@ import { Validator } from '@/utils/validation';
         InfoIcon,
         PasswordStrength,
         AddCouponCodeInput,
+        SelectInput,
     },
 })
 export default class RegisterArea extends Vue {

web/satellite/src/views/register/registerArea.html

@@ -94,11 +94,9 @@
                     />
                 </div>
                 <div class="register-area__input-wrapper">
-                    <HeaderlessInput
+                    <SelectInput
                         class="full-input"
                         label="Employees"
-                        placeholder="Employees"
-                        :error="employeeCountError"
                         @setData="setEmployeeCount"
                         width="calc(100% - 2px)"
                         height="46px"