From f09d3ed6856dfc46cfe8ab84c0eb36d67d3300da Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Sat, 2 Feb 2019 17:22:40 -0200
Subject: [PATCH] Write steps, start implemenation of search input component

---
 components/SearchInput.vue            | 179 ++++++++++++++++++++++++++
 cypress/integration/06.Search.feature |   4 +-
 cypress/integration/common/search.js  |  11 ++
 layouts/default.vue                   |  13 +-
 4 files changed, 204 insertions(+), 3 deletions(-)
 create mode 100644 components/SearchInput.vue
 create mode 100644 cypress/integration/common/search.js

diff --git a/components/SearchInput.vue b/components/SearchInput.vue
new file mode 100644
index 000000000..b3c2b161b
--- /dev/null
+++ b/components/SearchInput.vue
@@ -0,0 +1,179 @@
+<template>
+  <div
+    class="search"
+    aria-label="search"
+    role="search"
+    :class="{ 'is-active': isActive }"
+  >
+    <div class="field">
+      <div class="control has-icons-left has-icons-right">
+        <input
+          :id="id"
+          ref="input"
+          v-model="searchValue"
+          v-focus="focus"
+          class="input"
+          name="search"
+          type="text"
+          placeholder="Search..."
+          @keyup.exact="onInput"
+          @keyup.enter="onEnter"
+        >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isEmpty } from 'lodash'
+
+export default {
+  name: 'HcSearchInput',
+  props: {
+    id: {
+      type: String,
+      default: 'nav-search'
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    delay: {
+      type: Number,
+      default: 700
+    },
+    focus: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      searchValue: '',
+      searchProcess: null,
+      searching: false
+    }
+  },
+  computed: {
+    isActive() {
+      return !isEmpty(this.searchValue)
+    }
+  },
+  watch: {
+    value(value) {
+      this.$nextTick(() => {
+        this.updateValue()
+      })
+    }
+  },
+  mounted() {
+    this.updateValue()
+  },
+  methods: {
+    updateValue() {
+      if (!this.value) {
+        this.searchValue = ''
+      } else if (this.value.toString() !== this.searchValue.toString()) {
+        this.searchValue = this.value.toString()
+      }
+    },
+    onInput() {
+      clearTimeout(this.searchProcess)
+      this.searching = true
+      // skip on less then three letters
+      if (this.searchValue && this.searchValue.toString().length < 3) {
+        return
+      }
+      // skip if nothing changed
+      if (this.searchValue === this.value) {
+        return
+      }
+      this.searchProcess = setTimeout(() => {
+        this.searching = false
+        this.$emit('search', this.searchValue.toString())
+      }, this.delay)
+    },
+    onEnter() {
+      clearTimeout(this.searchProcess)
+      this.$nextTick(() => {
+        clearTimeout(this.searchProcess)
+      })
+      this.searching = false
+      this.$emit('search', this.searchValue.toString())
+    },
+    clear() {
+      clearTimeout(this.searchProcess)
+      this.searching = false
+      this.searchValue = ''
+      if (this.value !== this.searchValue) {
+        this.$emit('search', '')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.search {
+  display: flex;
+  width: 100%;
+  position: relative;
+
+  .field {
+    width: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .control {
+    width: 100%;
+    input {
+      width: 100%;
+      border-radius: 2px;
+      height: 2.5em;
+      padding-left: 2em;
+      padding-right: 1em;
+      font-size: 1em;
+      transition-duration: 0.15s;
+      transition-timing-function: ease-out;
+      transition-property: border, background-color;
+
+      & {
+        border-color: hsl(0, 0%, 96%);
+      }
+    }
+  }
+
+  input {
+    padding-right: 2em !important;
+    background-color: hsl(0, 0%, 96%);
+  }
+
+  input:hover {
+    background-color: hsl(0, 0%, 98%);
+  }
+
+  input:focus,
+  &.is-active input.input {
+    background-color: hsl(0, 0%, 98%);
+  }
+
+  .icon {
+    height: 2.5em;
+    font-size: 1em;
+
+    &.btn-clear {
+      position: absolute;
+      right: 0.25rem;
+      cursor: pointer !important;
+      z-index: 10;
+      padding-left: 1em;
+      padding-right: 1em;
+    }
+  }
+
+  &.is-active .icon {
+    color: hsl(0, 0%, 71%);
+  }
+}
+</style>
diff --git a/cypress/integration/06.Search.feature b/cypress/integration/06.Search.feature
index 16078ede3..a3fc69dae 100644
--- a/cypress/integration/06.Search.feature
+++ b/cypress/integration/06.Search.feature
@@ -10,5 +10,5 @@ Feature: Search
 
   Scenario: Search for specific words
     Given I am logged in as "user"
-    And I search for a specific word
-    Then I should posts with that word included 
+    When I search for a specific word
+    Then I should see posts with that word included 
diff --git a/cypress/integration/common/search.js b/cypress/integration/common/search.js
new file mode 100644
index 000000000..af46becf0
--- /dev/null
+++ b/cypress/integration/common/search.js
@@ -0,0 +1,11 @@
+import { When, Then } from 'cypress-cucumber-preprocessor/steps'
+
+When('I search for a specific word', () => {
+  cy.get('#nav-search').type('Essays')
+})
+
+Then('I should see posts with that word included', () => {
+  cy.get('.ds-card-header:first').then(() => {
+    cy.title().should('include', 'Essays')
+  })
+})
diff --git a/layouts/default.vue b/layouts/default.vue
index 7283bf308..4e33a1755 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -10,6 +10,9 @@
             <ds-logo />
           </a>
         </div>
+        <div class="main-navigation-center hc-navbar-search">
+          <search-input />
+        </div>
         <div class="main-navigation-right">
           <no-ssr>
             <locale-switch
@@ -105,6 +108,7 @@
 import { mapGetters } from 'vuex'
 import LocaleSwitch from '~/components/LocaleSwitch'
 import Dropdown from '~/components/Dropdown'
+import SearchInput from '~/components/SearchInput.vue'
 import ReportModal from '~/components/ReportModal'
 import seo from '~/components/mixins/seo'
 
@@ -112,7 +116,8 @@ export default {
   components: {
     Dropdown,
     ReportModal,
-    LocaleSwitch
+    LocaleSwitch,
+    SearchInput
   },
   mixins: [seo],
   computed: {
@@ -183,6 +188,12 @@ export default {
   display: flex;
   margin-right: auto;
 }
+
+.main-navigation-center {
+  display: flex;
+  margin-right: auto;
+}
+
 .main-navigation-right {
   display: flex;
   margin-left: auto;