Create the InputField and SearchBar components

.storybook/decorators/with-rtl.js

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 
-import { ref, watch, useContext } from '@nuxtjs/composition-api'
+import { ref, watch, useContext, onMounted } from '@nuxtjs/composition-api'
 import { useEffect } from '@storybook/client-api'
 
 const languageDirection = Vue.observable({ value: 'ltr' })
@@ -16,15 +16,19 @@ export const WithRTL = (story, context) => {
     setup() {
       const element = ref()
       const { i18n } = useContext()
+      const setLanguage = (direction) => {
+        element.value.ownerDocument.documentElement.setAttribute(
+          'dir',
+          direction?.value ?? 'ltr'
+        )
+      }
       watch(languageDirection, (direction) => {
         i18n.localeProperties.dir = direction.value
         if (element.value) {
-          element.value.ownerDocument.documentElement.setAttribute(
-            'dir',
-            direction.value
-          )
+          setLanguage(direction)
         }
       })
+      onMounted(setLanguage)
       return { element }
     },
   }

jest.config.js

@@ -1,4 +1,9 @@
 module.exports = {
+  globals: {
+    'vue-jest': {
+      experimentalCSSCompile: false,
+    },
+  },
   moduleFileExtensions: ['js', 'vue', 'json'],
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1',

package.json

@@ -61,6 +61,7 @@
     "nuxt": "^2.15.4",
     "nuxt-ssr-cache": "^1.5.2",
     "patch-package": "^6.4.7",
+    "reakit-utils": "^0.15.2",
     "sass": "^1.34.0",
     "sass-loader": "^10.1.1",
     "uuid": "^8.3.2",

src/components/Header/SearchBar/SearchBar.vue

@@ -0,0 +1,85 @@
+<template>
+  <form class="search-bar group flex flex-row">
+    <InputField
+      v-model="text"
+      class="flex-grow input-field"
+      :connection-sides="['end']"
+      input-id="search-bar"
+      type="search"
+      name="q"
+    >
+      {{ extraText }}
+    </InputField>
+    <SearchButton @click="handleSearch" />
+  </form>
+</template>
+
+<script>
+import { computed } from '@nuxtjs/composition-api'
+
+import InputField from '~/components/InputField/InputField.vue'
+import SearchButton from '~/components/Header/SearchBar/SearchButton.vue'
+
+/**
+ * Displays a text field for a search query and is attached to an action button
+ * that fires a search request. The loading state and number of hits are also
+ * displayed in the bar itself.
+ */
+export default {
+  name: 'SearchBar',
+  components: {
+    InputField,
+    SearchButton,
+  },
+  model: {
+    prop: 'value',
+    event: 'input',
+  },
+  props: {
+    /**
+     * the search query given as input to the field
+     */
+    value: {
+      type: String,
+      default: '',
+    },
+    /**
+     * the extra text to display inside the text field; This can be a status
+     * message like 'Loading' or info such as the number of search results.
+     */
+    extraText: {
+      type: String,
+    },
+  },
+  setup(props, { emit }) {
+    const text = computed({
+      get() {
+        return props.value
+      },
+      set(value) {
+        emit('input', value)
+      },
+    })
+
+    const handleSearch = () => {
+      emit('search')
+    }
+
+    return {
+      text,
+
+      handleSearch,
+    }
+  },
+}
+</script>
+
+<style>
+/* Removes the cross icon to clear the field */
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  -webkit-appearance: none;
+}
+</style>

src/components/Header/SearchBar/SearchButton.vue

@@ -0,0 +1,40 @@
+<template>
+  <button
+    :type="type"
+    class="search-button flex items-center justify-center h-12 w-12 hover:text-white hover:bg-pink p-0.5px ps-1.5px focus:p-0 border border-s-0 focus:border-1.5 border-dark-charcoal-20 hover:border-pink focus:border-pink rounded-e-sm focus:outline-none"
+    v-on="$listeners"
+  >
+    <svg
+      class="h-6 w-6"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <use :href="`${searchIcon}#icon`" />
+    </svg>
+  </button>
+</template>
+
+<script>
+import searchIcon from '~/assets/icons/search.svg'
+
+export default {
+  name: 'SearchButton',
+  setup(props, { attrs }) {
+    const type = attrs['type'] ?? 'button'
+
+    return {
+      searchIcon,
+
+      type,
+    }
+  },
+}
+</script>
+
+<style scoped>
+.search-button:hover:focus {
+  box-shadow: 0 0 0 1px inset white;
+}
+</style>

src/components/Header/SearchBar/meta/SearchBar.stories.mdx

@@ -0,0 +1,71 @@
+import {
+  ArgsTable,
+  Canvas,
+  Description,
+  Meta,
+  Story,
+} from '@storybook/addon-docs'
+import SearchBar from '~/components/Header/SearchBar/SearchBar.vue'
+
+<Meta
+  title="Components/Header/Search bar"
+  component={SearchBar}
+  argTypes={{
+    input: {
+      action: 'input',
+    },
+    searched: {
+      action: 'searched',
+    },
+  }}
+/>
+
+export const Template = (args, { argTypes }) => ({
+  template: `<SearchBar v-bind="$props" v-on="$props" />`,
+  components: { SearchBar },
+  props: Object.keys(argTypes),
+})
+
+# Search bar
+
+<Description of={SearchBar} />
+
+<ArgsTable of={SearchBar} />
+
+The component emits an `input` event with the new contents of the field whenever
+the field receives an input. It also emits the `search` event when the search
+button is clicked.
+
+<Canvas>
+  <Story
+    name="Default"
+    args={{
+      value: 'Search query',
+      extraText: '12,345 results',
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+The recommended way to use it is with `v-model` mapping to a `String`
+representing the search query.
+
+export const vModelTemplate = () => ({
+  template: `
+    <div>
+      <SearchBar v-model="text" :extra-text="text.length" />
+      {{ text }}
+    </div>
+  `,
+  components: { SearchBar },
+  data() {
+    return {
+      text: 'Hello, World!',
+    }
+  },
+})
+
+<Canvas>
+  <Story name="v-model">{vModelTemplate.bind({})}</Story>
+</Canvas>