@empathyco/x-components 3.0.0-alpha.82 → 3.0.0-alpha.85

package/docs/API-reference/components/next-queries/x-components.next-queries.md

@@ -34,20 +34,60 @@ of `shirts`.
 You don't need to pass any props, or slots. Simply add the component, and when it has any next
 queries it will show them
 
-```vue
-<NextQueries />
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <NextQueries />
+  </div>
+</template>
+
+<script>
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { NextQueries } from "@empathyco/x-components/next-queries";
+
+export default {
+  name: "NextQueriesDemo",
+  components: {
+    SearchInput,
+    NextQueries
+  }
+};
+</script>
 ```
 
 The component has three optional props. `animation` to render the component with an animation,
 `maxItemToRender` to limit the number of next queries will be rendered (by default it is 5) and
 `highlightCurated` to indicate if the curated Next Queries inside the list should be highlighted.
 
-```vue
-<NextQueries
-  :animation="FadeAndSlide"
-  :maxItemsToRender="10"
-  :highlightCurated="true"
-/>
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <NextQueries
+      :animation="'FadeAndSlide'"
+      :maxItemsToRender="10"
+      :highlightCurated="true"
+    />
+  </div>
+</template>
+
+<script>
+import Vue from "vue";
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { NextQueries } from "@empathyco/x-components/next-queries";
+import { FadeAndSlide } from "@empathyco/x-components";
+
+// Registering the animation as a global component
+Vue.component("FadeAndSlide", FadeAndSlide);
+export default {
+  name: "NextQueriesDemo",
+  components: {
+    SearchInput,
+    NextQueries
+  }
+};
+</script>
 ```
 
 ### Overriding Next Queries' Content
@@ -56,13 +96,33 @@ You can use your custom implementation of the Next Query's content. In the examp
 using the default Next Query's content, an icon is added, as well as a span with the query of the
 Next Query suggestion.
 
-```vue
-<NextQueries>
-  <template #suggestion-content="{suggestion}">
-    <img src="./next-query-icon.svg" class="x-next-query__icon"/>
-    <span class="x-next-query__query">{{ suggestion.query }}</span>
-  </template>
-</NextQueries>
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <NextQueries>
+      <template #suggestion-content="{ suggestion }">
+        <Nq1Icon />
+        <span class="x-next-query__query">{{ suggestion.query }}</span>
+      </template>
+    </NextQueries>
+  </div>
+</template>
+
+<script>
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { NextQueries } from "@empathyco/x-components/next-queries";
+import { Nq1Icon } from "@empathyco/x-components";
+
+export default {
+  name: "NextQueriesDemo",
+  components: {
+    SearchInput,
+    NextQueries,
+    Nq1Icon
+  }
+};
+</script>
 ```
 
 ### Adding a custom next query component
@@ -72,16 +132,37 @@ the `emitNextQuerySelected` function when the next query is selected. In the exa
 of using the default `button` tag for a next query, an icon is added, and the text of the next query
 is wrapped in a `span`
 
-```vue
-<NextQueries>
-  <template #suggestion="{suggestion}">
-    <NextQuery :suggestion="suggestion" class="x-next-queries__suggestion">
-      <template #default="{suggestion}">
-        <img src="./next-query-icon.svg" class="x-next-query__icon"/>
-        <span class="x-next-query__query">{{ suggestion.query }}</span>
+```vue live
+<template>
+  <div>
+    <SearchInput />
+    <NextQueries>
+      <template #suggestion="{ suggestion }">
+        <NextQuery :suggestion="suggestion" class="x-next-queries__suggestion">
+          <template #default="{ suggestion }">
+            <Nq1Icon />
+            <span class="x-next-query__query">{{ suggestion.query }}</span>
+          </template>
+        </NextQuery>
+        <button>Custom Behaviour</button>
       </template>
-    </NextQuery>
-    <button>Custom Behaviour</button>
-  </template>
-</NextQueries>
+    </NextQueries>
+  </div>
+</template>
+
+<script>
+import { SearchInput } from "@empathyco/x-components/search-box";
+import { NextQueries, NextQuery } from "@empathyco/x-components/next-queries";
+import { Nq1Icon } from "@empathyco/x-components";
+
+export default {
+  name: "NextQueriesDemo",
+  components: {
+    SearchInput,
+    NextQueries,
+    NextQuery,
+    Nq1Icon
+  }
+};
+</script>
 ```

package/docs/API-reference/components/next-queries/x-components.next-query.md

@@ -34,21 +34,69 @@ CSS class.
 
 Using default slot:
 
-```vue
-<NextQuery :suggestion="suggestion" />
+```vue live
+<template>
+  <NextQuery :suggestion="suggestion" />
+</template>
+
+<script>
+import { NextQuery } from "@empathyco/x-components/next-queries";
+
+export default {
+  name: "NextQueryDemo",
+  components: {
+    NextQuery
+  },
+  data() {
+    return {
+      suggestion: {
+        modelName: "NextQuery",
+        query: "tshirt",
+        facets: []
+      }
+    };
+  }
+};
+</script>
 ```
 
 ### Overriding default slot.
 
 The default slot allows you to replace the content of the suggestion button.
 
-```vue
-<NextQuery :suggestion="suggestion">
-  <template #default="{ suggestion }">
-    <img class="x-next-query__icon" src="./next-query.svg" />
-    <span class="x-next-query__query" :aria-label="suggestion.query">{{ suggestion.query }}</span>
-  </template>
-</NextQuery>
+```vue live
+<template>
+  <NextQuery :suggestion="suggestion">
+    <template #default="{ suggestion }">
+      <Nq1Icon />
+      <span class="x-next-query__query" :aria-label="suggestion.query">{{
+        suggestion.query
+      }}</span>
+    </template>
+  </NextQuery>
+</template>
+
+<script>
+import { NextQuery } from "@empathyco/x-components/next-queries";
+import { Nq1Icon } from "@empathyco/x-components";
+
+export default {
+  name: "NextQueryDemo",
+  components: {
+    NextQuery,
+    Nq1Icon
+  },
+  data() {
+    return {
+      suggestion: {
+        modelName: "NextQuery",
+        query: "tshirt",
+        facets: []
+      }
+    };
+  }
+};
+</script>
 ```
 
 ## Dynamic Classes

package/docs/API-reference/components/popular-searches/x-components.popular-search.md

@@ -29,21 +29,64 @@ content. By default, it renders the suggestion query of the popular search.
 
 ### Basic Usage
 
-```vue
-<PopularSearch :suggestion="suggestion" />
+```vue live
+<template>
+  <PopularSearch :suggestion="suggestion" />
+</template>
+
+<script>
+import { PopularSearch } from "@empathyco/x-components/popular-searches";
+export default {
+  name: "PopularSearchDemo",
+  components: {
+    PopularSearch
+  },
+  data() {
+    return {
+      suggestion: {
+        modelName: "PopularSearch",
+        query: "tshirt",
+        facets: []
+      }
+    };
+  }
+};
+</script>
 ```
 
 ### Custom Usage
 
-```vue
-<PopularSearch :suggestion="suggestion">
-  <template #default="{ suggestion }">
-    <svg height="10" width="10">
-      <circle cx="5" cy="5" r="4" stroke="black" />
-    </svg>
-    <span :aria-label="suggestion.query">{{ suggestion.query }}</span>
-  </template>
-</PopularSearch>
+```vue live
+<template>
+  <PopularSearch :suggestion="suggestion">
+    <template #default="{ suggestion }">
+      <TrendingIcon />
+      <span :aria-label="suggestion.query">{{ suggestion.query }}</span>
+    </template>
+  </PopularSearch>
+</template>
+
+<script>
+import { PopularSearch } from "@empathyco/x-components/popular-searches";
+import { TrendingIcon } from "@empathyco/x-components";
+
+export default {
+  name: "PopularSearchDemo",
+  components: {
+    PopularSearch,
+    TrendingIcon
+  },
+  data() {
+    return {
+      suggestion: {
+        modelName: "PopularSearch",
+        query: "tshirt",
+        facets: []
+      }
+    };
+  }
+};
+</script>
 ```
 
 ## Events

package/docs/API-reference/components/popular-searches/x-components.popular-searches.md

@@ -32,15 +32,45 @@ optionally have associated a set of filters.
 You don't need to pass any props, or slots. Simply add the component, and when it has any popular
 searches it will show them.
 
-```vue
-<PopularSearches />
+```vue live
+<template>
+  <PopularSearches />
+</template>
+
+<script>
+import { PopularSearches } from "@empathyco/x-components/popular-searches";
+export default {
+  name: "PopularSearchesDemo",
+  components: {
+    PopularSearches
+  }
+};
+</script>
 ```
 
 The component has two optional props. `animation` to render the component with an animation and
 `maxItemToRender` to limit the number of popular searches will be rendered (by default it is 5).
 
-```vue
-<PopularSearches :animation="FadeAndSlide" :maxItemsToRender="10" />
+```vue live
+<template>
+  <PopularSearches :animation="'FadeAndSlide'" :maxItemsToRender="10" />
+</template>
+
+<script>
+import Vue from "vue";
+import { PopularSearches } from "@empathyco/x-components/popular-searches";
+import FadeAndSlide from "@empathyco/x-components";
+
+// Registering the animation as a global component
+Vue.component("FadeAndSlide", FadeAndSlide);
+export default {
+  name: "PopularSearchesDemo",
+  components: {
+    PopularSearches,
+    FadeAndSlide
+  }
+};
+</script>
 ```
 
 ### Overriding Popular Search's Content
@@ -49,13 +79,28 @@ You can use your custom implementation of the Popular Search's content. In the e
 instead of using the default Popular Search's content, an icon is added, as well as a span with the
 query of the Popular Search's suggestion.
 
-```vue
-<PopularSearches>
-  <template #suggestion-content="{ suggestion }">
-    <img class="x-popular-search__icon" src="./popular-search-icon.svg" />
-    <span class="x-popular-search__query">{{ suggestion.query }}</span>
-  </template>
-</PopularSearches>
+```vue live
+<template>
+  <PopularSearches>
+    <template #suggestion-content="{ suggestion }">
+      <TrendingIcon />
+      <span class="x-popular-search__query">{{ suggestion.query }}</span>
+    </template>
+  </PopularSearches>
+</template>
+
+<script>
+import { PopularSearches } from "@empathyco/x-components/popular-searches";
+import { TrendingIcon } from "@empathyco/x-components";
+
+export default {
+  name: "PopularSearchesDemo",
+  components: {
+    PopularSearches,
+    TrendingIcon
+  }
+};
+</script>
 ```
 
 ### Adding a Custom Popular Search Item
@@ -66,16 +111,35 @@ implementation is added, it has an image and a span as content (as in the previo
 button with a user customized behaviour is added at the same hierarchical level as the Popular
 Search component.
 
-```vue
-<PopularSearches>
-  <template #suggestion="{suggestion}">
-    <PopularSearch :suggestion="suggestion">
-      <template #default="{suggestion}">
-        <img class="x-popular-search__icon" src="./popular-search-icon.svg" />
-        <span class="x-popular-search__query">{{ suggestion.query }}</span>
-      </template>
-    </PopularSearch>
-    <button>Custom Behaviour</button>
-  </template>
-</PopularSearches>
+```vue live
+<template>
+  <PopularSearches>
+    <template #suggestion="{ suggestion }">
+      <PopularSearch :suggestion="suggestion">
+        <template #default="{ suggestion }">
+          <TrendingIcon />
+          <span class="x-popular-search__query">{{ suggestion.query }}</span>
+        </template>
+      </PopularSearch>
+      <button>Custom Behaviour</button>
+    </template>
+  </PopularSearches>
+</template>
+
+<script>
+import {
+  PopularSearches,
+  PopularSearch
+} from "@empathyco/x-components/popular-searches";
+import { TrendingIcon } from "@empathyco/x-components";
+
+export default {
+  name: "PopularSearchesDemo",
+  components: {
+    PopularSearches,
+    PopularSearch,
+    TrendingIcon
+  }
+};
+</script>
 ```

package/docs/API-reference/components/query-suggestions/x-components.query-suggestion.md

@@ -39,7 +39,7 @@ implemented.
 
 Here you can see how a single query suggestion is rendered using the `suggestion` prop.
 
-```vue
+```vue live
 <template>
   <QuerySuggestion :suggestion="suggestion" />
 </template>
@@ -55,7 +55,7 @@ export default {
     return {
       suggestion: {
         modelName: "QuerySuggestion",
-        query: "beer",
+        query: "tshirt",
         facets: []
       }
     };
@@ -69,7 +69,7 @@ export default {
 In this example, the query suggestion is painted in blue by passing a color style in the HTML span
 element.
 
-```vue
+```vue live
 <template>
   <QuerySuggestion :suggestion="suggestion" #default="{ queryHTML }">
     <span v-html="queryHTML" style="color: blue;" />
@@ -87,7 +87,7 @@ export default {
     return {
       suggestion: {
         modelName: "QuerySuggestion",
-        query: "beer",
+        query: "tshirt",
         facets: []
       }
     };
@@ -101,7 +101,7 @@ export default {
 In this example, when you click on the query suggestion, a message is displayed to illustrate that
 the `UserSelectedAQuerySuggestion` event has been triggered.
 
-```vue
+```vue live
 <template>
   <QuerySuggestion
     :suggestion="suggestion"
@@ -120,7 +120,7 @@ export default {
     return {
       suggestion: {
         modelName: "QuerySuggestion",
-        query: "beer",
+        query: "tshirt",
         facets: []
       }
     };

package/docs/API-reference/components/query-suggestions/x-components.query-suggestions.md

@@ -34,12 +34,12 @@ implemented.
 <!-- prettier-ignore-end -->
 
 In this example, a list of query suggestions is displayed. See how the suggestions change as you
-type “puzzle”. If you click on a suggestion, the search term in the search input is updated and the
+type “sandal”. If you click on a suggestion, the search term in the search input is updated and the
 query suggestions are changed to reflect the new search term.
 
-_Type “puzzle” or another toy in the input field to try it out!_
+_Type “sandal” or another fashion term in the input field to try it out!_
 
-```vue
+```vue live
 <template>
   <div>
     <SearchInput />
@@ -66,22 +66,23 @@ export default {
 In this example, an `StaggeredFadeAndSlide` animation component has been passed as prop, so that the
 matching query suggestions are shuffled with a slight delay as more letters of the term are typed.
 
-_Type “puzzle” or another toy in the input field to try it out!_
+_Type “lipstick” or another fashion term in the input field to try it out!_
 
-```vue
+```vue live
 <template>
   <div>
     <SearchInput />
-    <QuerySuggestions animation="StaggeredFadeAndSlide" />
+    <QuerySuggestions :animation="'StaggeredFadeAndSlide'" />
   </div>
 </template>
 
 <script>
+import Vue from "vue";
 import { QuerySuggestions } from "@empathyco/x-components/query-suggestions";
 import { SearchInput } from "@empathyco/x-components/search-box";
 import { StaggeredFadeAndSlide } from "@empathyco/x-components";
 
-// Register the animation as a global component
+// Registering the animation as a global component
 Vue.component("StaggeredFadeAndSlide", StaggeredFadeAndSlide);
 export default {
   name: "QuerySuggestionsDemo",
@@ -97,9 +98,9 @@ export default {
 
 Here, the `suggestion` binding property passes the suggestion data.
 
-_Type “puzzle” or another toy in the input field to try it out!_
+_Type “bag” or another fashion term in the input field to try it out!_
 
-```vue
+```vue live
 <template>
   <div>
     <SearchInput />
@@ -133,7 +134,7 @@ If you're not using the [`QuerySuggestion`](./query-suggestion.md) component, th
 you must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` events in
 `QuerySuggestions`.
 
-```vue
+```vue live
 <template>
   <div>
     <SearchInput />
@@ -180,9 +181,9 @@ you must implement the `UserAcceptedAQuery` and `UserSelectedAQuerySuggestion` e
 In this example, the `suggestion` and `queryHTML` bindings have been passed in the
 `suggestion-content` slot to paint the resulting query suggestions in blue.
 
-_Type “puzzle” or another toy in the input field to try it out!_
+_Type “trousers” or another toy in the input field to try it out!_
 
-```vue
+```vue live
 <template>
   <div>
     <SearchInput />
@@ -216,9 +217,9 @@ Components can be combined and communicate with each other. Commonly, the `Query
 component communicates with the [`SearchInput`](../search-box/x-components.search-input.md),
 updating the term in the search input.
 
-_Type “puzzle” or another toy in the input field to try it out!_
+_Type “pants” or another toy in the input field to try it out!_
 
-```vue
+```vue live
 <template>
   <div>
     <SearchInput />

package/docs/API-reference/components/related-tags/x-components.related-tag.md

@@ -50,9 +50,9 @@ In this example related tag data is passed as a prop.
 
 _Here you can see how the RelatedTag component is rendered._
 
-```vue
+```vue live
 <template>
-  <RelatedTag :relatedTag="tag"></RelatedTag>
+  <RelatedTag :relatedTag="tag" />
 </template>
 
 <script>
@@ -67,10 +67,9 @@ export default {
     return {
       tag: {
         modelName: "RelatedTag",
-        previous: "toy",
-        query: "toy story",
-        selected: false,
-        tag: "story"
+        query: "high heel",
+        isCurated: false,
+        tag: "heel"
       }
     };
   }
@@ -84,7 +83,7 @@ In this example, an HTML span element is passed in the `default` slot.
 
 _See how the related tag can be rendered._
 
-```vue
+```vue live
 <template>
   <RelatedTag :relatedTag="tag" #default="{ relatedTag }">
     <span :aria-label="relatedTag.tag">{{ relatedTag.tag }}</span>
@@ -103,10 +102,9 @@ export default {
     return {
       tag: {
         modelName: "RelatedTag",
-        previous: "toy",
-        query: "toy story",
-        selected: false,
-        tag: "story"
+        query: "high heel",
+        isCurated: false,
+        tag: "heel"
       }
     };
   }
@@ -121,12 +119,9 @@ event is implemented, as illustrated by the “Tag” message returned.
 
 _See how the event is triggered when the related tag is clicked._
 
-```vue
+```vue live
 <template>
-  <RelatedTag
-    :relatedTag="tag"
-    @UserSelectedARelatedTag="alertRelatedTag"
-  ></RelatedTag>
+  <RelatedTag :relatedTag="tag" @UserSelectedARelatedTag="alertRelatedTag" />
 </template>
 
 <script>
@@ -141,10 +136,9 @@ export default {
     return {
       tag: {
         modelName: "RelatedTag",
-        previous: "toy",
-        query: "toy story",
-        selected: false,
-        tag: "story"
+        query: "high heel",
+        isCurated: false,
+        tag: "heel"
       }
     };
   },