@empathyco/x-components 6.0.0-alpha.18 → 6.0.0-alpha.181

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

@@ -6,9 +6,9 @@ title: RelatedTag
 
 # RelatedTag
 
-This component renders a related tag for a query. A related tag is a descriptive keyword related to
-the current query to fine-tune the search. For example, if you are searching for _lego_, a related
-tag could be _city_, refining the search with _lego city_.
+This component renders a related tag for a query. A related tag is a descriptive keyword
+related to the current query to fine-tune the search. For example, if you are searching
+for _lego_, a related tag could be _city_, refining the search with _lego city_.
 
 ## Props
 
@@ -56,24 +56,24 @@ _Here you can see how the RelatedTag component is rendered._
 </template>
 
 <script>
-  import { RelatedTag } from '@empathyco/x-components/related-tags';
-
-  export default {
-    name: 'RelatedTagDemo',
-    components: {
-      RelatedTag
-    },
-    data() {
-      return {
-        tag: {
-          modelName: 'RelatedTag',
-          query: 'high heel',
-          isCurated: false,
-          tag: 'heel'
-        }
-      };
+import { RelatedTag } from '@empathyco/x-components/related-tags'
+
+export default {
+  name: 'RelatedTagDemo',
+  components: {
+    RelatedTag,
+  },
+  data() {
+    return {
+      tag: {
+        modelName: 'RelatedTag',
+        query: 'high heel',
+        isCurated: false,
+        tag: 'heel',
+      },
     }
-  };
+  },
+}
 </script>
 ```
 
@@ -91,24 +91,24 @@ _See how the related tag can be rendered._
 </template>
 
 <script>
-  import { RelatedTag } from '@empathyco/x-components/related-tags';
-
-  export default {
-    name: 'RelatedTagDemo',
-    components: {
-      RelatedTag
-    },
-    data() {
-      return {
-        tag: {
-          modelName: 'RelatedTag',
-          query: 'high heel',
-          isCurated: false,
-          tag: 'heel'
-        }
-      };
+import { RelatedTag } from '@empathyco/x-components/related-tags'
+
+export default {
+  name: 'RelatedTagDemo',
+  components: {
+    RelatedTag,
+  },
+  data() {
+    return {
+      tag: {
+        modelName: 'RelatedTag',
+        query: 'high heel',
+        isCurated: false,
+        tag: 'heel',
+      },
     }
-  };
+  },
+}
 </script>
 ```
 
@@ -125,28 +125,28 @@ _See how the event is triggered when the related tag is clicked._
 </template>
 
 <script>
-  import { RelatedTag } from '@empathyco/x-components/related-tags';
-
-  export default {
-    name: 'RelatedTagDemo',
-    components: {
-      RelatedTag
-    },
-    data() {
-      return {
-        tag: {
-          modelName: 'RelatedTag',
-          query: 'high heel',
-          isCurated: false,
-          tag: 'heel'
-        }
-      };
-    },
-    methods: {
-      alertRelatedTag(relatedTag) {
-        alert(`You have clicked the related tag: ${relatedTag.query}`);
-      }
+import { RelatedTag } from '@empathyco/x-components/related-tags'
+
+export default {
+  name: 'RelatedTagDemo',
+  components: {
+    RelatedTag,
+  },
+  data() {
+    return {
+      tag: {
+        modelName: 'RelatedTag',
+        query: 'high heel',
+        isCurated: false,
+        tag: 'heel',
+      },
     }
-  };
+  },
+  methods: {
+    alertRelatedTag(relatedTag) {
+      alert(`You have clicked the related tag: ${relatedTag.query}`)
+    },
+  },
+}
 </script>
 ```

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

@@ -6,10 +6,11 @@ title: RelatedTags
 
 # RelatedTags
 
-This component renders a set of [`RelatedTag`](./x-components.related-tag) components by default to
-select from after a query is performed to fine-tune search. For example, if you are searching for
-_lego_, different related tags could be _city_, _friends_, or _harry potter_, refining the search
-with _lego city_, _lego friends_, or _lego harry potter_.
+This component renders a set of [`RelatedTag`](./x-components.related-tag) components by
+default to select from after a query is performed to fine-tune search.
+For example, if you are searching for _lego_, different related tags could be _city_,
+friends*, or *harry potter*, refining the search with *lego city*, *lego friends*,
+or *lego harry potter\*.
 
 ## Props
 
@@ -48,16 +49,16 @@ _Search for a fashion term like "sandal" or "lipstick"._
 </template>
 
 <script>
-  import { SearchInput } from '@empathyco/x-components/search-box';
-  import { RelatedTags } from '@empathyco/x-components/related-tags';
-
-  export default {
-    name: 'RelatedTagsDemo',
-    components: {
-      SearchInput,
-      RelatedTags
-    }
-  };
+import { SearchInput } from '@empathyco/x-components/search-box'
+import { RelatedTags } from '@empathyco/x-components/related-tags'
+
+export default {
+  name: 'RelatedTagsDemo',
+  components: {
+    SearchInput,
+    RelatedTags,
+  },
+}
 </script>
 ```
 
@@ -77,20 +78,20 @@ _Search for a fashion term and see the related tags with the animation effect._
 </template>
 
 <script>
-  import Vue from 'vue';
-  import { SearchInput } from '@empathyco/x-components/search-box';
-  import { RelatedTags } from '@empathyco/x-components/related-tags';
-  import { StaggeredFadeAndSlide } from '@empathyco/x-components';
-
-  // Registering the animation as a global component
-  Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide);
-  export default {
-    name: 'RelatedTagsDemo',
-    components: {
-      SearchInput,
-      RelatedTags
-    }
-  };
+import Vue from 'vue'
+import { SearchInput } from '@empathyco/x-components/search-box'
+import { RelatedTags } from '@empathyco/x-components/related-tags'
+import { StaggeredFadeAndSlide } from '@empathyco/x-components'
+
+// Registering the animation as a global component
+Vue.component('StaggeredFadeAndSlide', StaggeredFadeAndSlide)
+export default {
+  name: 'RelatedTagsDemo',
+  components: {
+    SearchInput,
+    RelatedTags,
+  },
+}
 </script>
 ```
 
@@ -112,17 +113,17 @@ _Search for a fashion term and see how the related tags can be rendered._
 </template>
 
 <script>
-  import { SearchInput } from '@empathyco/x-components/search-box';
-  import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags';
-
-  export default {
-    name: 'RelatedTagsDemo',
-    components: {
-      SearchInput,
-      RelatedTags,
-      RelatedTag
-    }
-  };
+import { SearchInput } from '@empathyco/x-components/search-box'
+import { RelatedTags, RelatedTag } from '@empathyco/x-components/related-tags'
+
+export default {
+  name: 'RelatedTagsDemo',
+  components: {
+    SearchInput,
+    RelatedTags,
+    RelatedTag,
+  },
+}
 </script>
 ```
 
@@ -145,16 +146,16 @@ _Search for a fashion term and see how the related tags are rendered._
 </template>
 
 <script>
-  import { SearchInput } from '@empathyco/x-components/search-box';
-  import { RelatedTags } from '@empathyco/x-components/related-tags';
-
-  export default {
-    name: 'RelatedTagsDemo',
-    components: {
-      SearchInput,
-      RelatedTags
-    }
-  };
+import { SearchInput } from '@empathyco/x-components/search-box'
+import { RelatedTags } from '@empathyco/x-components/related-tags'
+
+export default {
+  name: 'RelatedTagsDemo',
+  components: {
+    SearchInput,
+    RelatedTags,
+  },
+}
 </script>
 ```
 
@@ -179,18 +180,18 @@ _Search for a fashion term and see how the related tags can be rendered._
 </template>
 
 <script>
-  import { SearchInput } from '@empathyco/x-components/search-box';
-  import { RelatedTags } from '@empathyco/x-components/related-tags';
-  import { ResultsList } from '@empathyco/x-components/search';
-
-  export default {
-    name: 'RelatedTagsDemo',
-    components: {
-      SearchInput,
-      RelatedTags,
-      ResultsList
-    }
-  };
+import { SearchInput } from '@empathyco/x-components/search-box'
+import { RelatedTags } from '@empathyco/x-components/related-tags'
+import { ResultsList } from '@empathyco/x-components/search'
+
+export default {
+  name: 'RelatedTagsDemo',
+  components: {
+    SearchInput,
+    RelatedTags,
+    ResultsList,
+  },
+}
 </script>
 ```
 
@@ -209,15 +210,15 @@ The `itemClass` prop can be used to add classes to the related tags.
 </template>
 
 <script>
-  import { SearchInput } from '@empathyco/x-components/search-box';
-  import { RelatedTags } from '@empathyco/x-components/related-tags';
-
-  export default {
-    name: 'RelatedTagsDemo',
-    components: {
-      SearchInput,
-      RelatedTags
-    }
-  };
+import { SearchInput } from '@empathyco/x-components/search-box'
+import { RelatedTags } from '@empathyco/x-components/related-tags'
+
+export default {
+  name: 'RelatedTagsDemo',
+  components: {
+    SearchInput,
+    RelatedTags,
+  },
+}
 </script>
 ```

package/docs/API-reference/components/scroll/x-components.main-scroll-item.md

@@ -6,7 +6,8 @@ title: MainScrollItem
 
 # MainScrollItem
 
-Wrapper for elements contained in the MainScroll that should store/restore its position.
+Wrapper for elements contained in the MainScroll that should store/restore its
+position.
 
 ## Props
 
@@ -58,21 +59,21 @@ of all of these components. The URL is modified as the user scrolls.
 </template>
 
 <script>
-  import { MainScroll, Scroll, MainScrollItem } from '@empathyco/x-components/scroll';
-  import { ResultsList } from '@empathyco/x-components/search';
-  import { SearchInput } from '@empathyco/x-components/search-box';
-  import { UrlHandler } from '@empathyco/x-components/url';
-
-  export default {
-    name: 'ScrollItemDemo',
-    components: {
-      Scroll,
-      ResultsList,
-      MainScroll,
-      MainScrollItem,
-      SearchInput,
-      UrlHandler
-    }
-  };
+import { MainScroll, Scroll, MainScrollItem } from '@empathyco/x-components/scroll'
+import { ResultsList } from '@empathyco/x-components/search'
+import { SearchInput } from '@empathyco/x-components/search-box'
+import { UrlHandler } from '@empathyco/x-components/url'
+
+export default {
+  name: 'ScrollItemDemo',
+  components: {
+    Scroll,
+    ResultsList,
+    MainScroll,
+    MainScrollItem,
+    SearchInput,
+    UrlHandler,
+  },
+}
 </script>
 ```

package/docs/API-reference/components/scroll/x-components.main-scroll.md

@@ -6,10 +6,11 @@ title: MainScroll
 
 # MainScroll
 
-Extends the scroll making it able to sync the first visible element, and allowing the children
-position to be restored.
+Extends the scroll making it able to sync the first visible element, and allowing
+the children position to be restored.
 
-Each child element that wants to have this support must be wrapped in a MainScrollItem component.
+Each child element that wants to have this support must be wrapped in a MainScrollItem
+component.
 
 ## Props
 
@@ -42,27 +43,27 @@ it injects the needed utilities to determine the first visible item.
 </template>
 
 <script>
-  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'MainScrollDemo',
-    components: {
-      MainScroll,
-      MainScrollItem
-    }
-  };
+import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'MainScrollDemo',
+  components: {
+    MainScroll,
+    MainScrollItem,
+  },
+}
 </script>
 
 <style lang="css" scoped>
-  ul {
-    overflow: auto;
-    max-height: 200px;
-  }
-
-  li {
-    height: 50px;
-    line-height: 50px;
-  }
+ul {
+  overflow: auto;
+  max-height: 200px;
+}
+
+li {
+  height: 50px;
+  line-height: 50px;
+}
 </style>
 ```
 
@@ -83,15 +84,15 @@ default browser scroll, you can do so by using the `useWindow` prop:
 </template>
 
 <script>
-  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'MainScrollDemo',
-    components: {
-      MainScroll,
-      MainScrollItem
-    }
-  };
+import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'MainScrollDemo',
+  components: {
+    MainScroll,
+    MainScrollItem,
+  },
+}
 </script>
 ```
 
@@ -115,15 +116,15 @@ when combined with the URL X Module.
 </template>
 
 <script>
-  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'MainScrollDemo',
-    components: {
-      MainScroll,
-      MainScrollItem
-    }
-  };
+import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'MainScrollDemo',
+  components: {
+    MainScroll,
+    MainScrollItem,
+  },
+}
 </script>
 ```
 
@@ -146,14 +147,14 @@ and adjusting the element to be at least 75% intersecting.
 </template>
 
 <script>
-  import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'MainScrollDemo',
-    components: {
-      MainScroll,
-      MainScrollItem
-    }
-  };
+import { MainScroll, MainScrollItem } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'MainScrollDemo',
+  components: {
+    MainScroll,
+    MainScrollItem,
+  },
+}
 </script>
 ```

package/docs/API-reference/components/scroll/x-components.scroll-to-top.md

@@ -6,8 +6,8 @@ title: ScrollToTop
 
 # ScrollToTop
 
-The `ScrollToTop` component is a button that the user can click to make a container scroll up to its
-initial position.
+The `ScrollToTop` component is a button that the user can click to make a container scroll
+up to its initial position.
 
 ## Props
 
@@ -54,13 +54,13 @@ the scroll.
 </template>
 
 <script>
-  import { ScrollToTop } from '@empathyco/x-components/scroll';
-
-  export default {
-    name: 'ScrollToTopTest',
-    components: {
-      ScrollToTop
-    }
-  };
+import { ScrollToTop } from '@empathyco/x-components/scroll'
+
+export default {
+  name: 'ScrollToTopTest',
+  components: {
+    ScrollToTop,
+  },
+}
 </script>
 ```