Merge #146

146: Add layout option and style r=bidoubiwa a=mdubus

## What's wrong ?

**Problem 1:** 

[docs-searchbar](https://github.com/meilisearch/docs-searchbar.js) provides an option to choose between 2 layouts : "simple" and "columns".
But the plugin `vuepress-plugin-meilisearch` doesn't provide access to this existing option.

**Problem 2:** 

After making this option available, the design looks horrific: 
![before simple layout](https://user-images.githubusercontent.com/30866152/120343835-54c87280-c2f9-11eb-8cb8-0748c3c1c4ff.png)


## What's inside this PR

This PR makes the `layout` option available.
It also adapts the style to match the existing one in docs-searchbar.

Style in `docs-searchbar` (simple layout): 
![reference docs searchbar](https://user-images.githubusercontent.com/30866152/120344347-caccd980-c2f9-11eb-8412-4837569338f7.png)


Style in `vuepress-plugin-meilisearch` after this PR (simple layout): 
![after simple layout](https://user-images.githubusercontent.com/30866152/120345811-1af86b80-c2fb-11eb-8119-c12529a2248f.png)



## How to test

Go to the file `playground/.vuepress/config.js` and add `"layout": "simple"` in the options:
![Capture d’écran 2021-06-01 à 16 55 06](https://user-images.githubusercontent.com/30866152/120344750-28f9bc80-c2fa-11eb-9d65-7b1e8c8ff62c.png)

Note that you might need to restart your server.

Please make sure to test that it doesn't break the "columns" layout 🙏


Co-authored-by: Morgane Dubus <morgane.d@meilisearch.com>
Co-authored-by: Morgane Dubus <30866152+mdubus@users.noreply.github.com>

Author: bors[bot]

.eslintrc.js

@@ -17,7 +17,8 @@ module.exports = {
     MAX_SUGGESTIONS: 'readonly',
     CROP_LENGTH: 'readonly',
     HOT_KEYS: 'readonly',
-    PLACEHOLDER: 'readonly'
+    PLACEHOLDER: 'readonly',
+    LAYOUT: 'readonly'
   },
   parserOptions: {
     parser: 'babel-eslint',

MeiliSearchBox.vue

@@ -36,7 +36,8 @@ export default {
       },
       autocompleteOptions: {
         keyboardShortcuts: HOT_KEYS
-      }
+      },
+      layout: LAYOUT
     }
     this.initialize(options)
     this.placeholder = PLACEHOLDER || this.$site.themeConfig.searchPlaceholder || ''
@@ -101,11 +102,11 @@ export default {
 .meilisearch-search-wrapper
   & > span
     vertical-align middle
+  .dsb-cursor
+    background rgba($accentColor, 0.05)
   .meilisearch-autocomplete
     line-height 2
-    .docs-searchbar-suggestion--highlight
-      color darken($accentColor, 20%)
-    .docs-searchbar-suggestion
+    .docs-searchbar-suggestion:not(.suggestion-layout-simple)
       border-color $borderColor
       .docs-searchbar-suggestion--category-header
         background #f1f3f5
@@ -115,10 +116,12 @@ export default {
         font-weight 600
         color #fff
         .docs-searchbar-suggestion--highlight
-          background rgba(255, 255, 255, 0.6)
           box-shadow none
+          background lighten($accentColor, 70%)
       .docs-searchbar-suggestion--wrapper
         padding 0
+        .docs-searchbar-suggestion--highlight
+          color darken($accentColor, 20%)
       .docs-searchbar-suggestion--title
         margin-bottom 0
         color $textColor
@@ -129,6 +132,22 @@ export default {
       .docs-searchbar-suggestion--text
         .docs-searchbar-suggestion--highlight
           box-shadow inset 0 -2px 0 0 lighten($accentColor, 20%)
+          color: inherit
+    .suggestion-layout-simple
+      .docs-searchbar-suggestion--title
+        color: $accentColor
+        &:before
+          color: darken($accentColor, 20%)
+      .docs-searchbar-suggestion--category-header
+        .docs-searchbar-suggestion--highlight
+          box-shadow unset
+          color: darken($accentColor, 20%)
+          background-color rgba($accentColor, 0.05)
+      .docs-searchbar-suggestion--category-header-lvl0, .docs-searchbar-suggestion--category-header-lvl1
+        .docs-searchbar-suggestion--highlight
+          background-color: transparent
+          box-shadow inset 0 -2px 0 0 lighten($accentColor, 20%)
+          color inherit
     .docs-searchbar-footer
       display flex !important
       justify-content space-between !important

README.md

@@ -110,7 +110,8 @@ module.exports = {
         "placeholder": "Search as you type...", // Default: ""
         "maxSuggestions": 10,                   // Default: 5
         "hotKeys": [],                          // Default: ['s', '/']
-        "cropLength": 50                        // Default: 30
+        "cropLength": 50,                       // Default: 30
+        "layout": "simple"                      // Default: "columns"
       }
     ],
   ],

index.js

@@ -12,7 +12,8 @@ module.exports = (options) => {
       PLACEHOLDER: options.placeholder || null,
       MAX_SUGGESTIONS: options.maxSuggestions || null,
       HOT_KEYS: options.hotKeys || ['s', '/'],
-      CROP_LENGTH: options.cropLength || 30
+      CROP_LENGTH: options.cropLength || 30,
+      LAYOUT: options.layout || 'columns'
     }
   }
 }

jest.config.js

@@ -10,6 +10,7 @@ module.exports = {
     PLACEHOLDER: null,
     MAX_SUGGESTIONS: null,
     HOT_KEYS: ['s', '/'],
-    CROP_LENGTH: 30
+    CROP_LENGTH: 30,
+    LAYOUT: 'columns'
   }
 }