Fix breadcrumb being shown on mobile (#45)

* Fix breadcrumb being shown on mobile

* Remove content loader of filters on mobile

* Change from db-m to db-ns

* Get mobile flag from runtime context

* Fix tests

CHANGELOG.md

@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+- Fix breadcrumb being shown on mobile.
+
+### Removed
+- Content loader of filters on mobile.
 
 ## [1.5.1] - 2018-09-20
 ### Fixed

react/__tests__/components/FiltersContainer.test.js

@@ -20,6 +20,7 @@ describe('<FiltersContainer />', () => {
         params={{
           department: 'Eletronicos',
         }}
+        runtime={{ hints: { mobile: false } }}
       />
     )
 
@@ -73,6 +74,7 @@ describe('<FiltersContainer />', () => {
         params={{
           department: 'Livros',
         }}
+        runtime={{ hints: { mobile: false } }}
       />
     )
 
@@ -133,6 +135,7 @@ describe('<FiltersContainer />', () => {
         params={{
           department: 'livros',
         }}
+        runtime={{ hints: { mobile: false } }}
       />
     )
 

react/components/FiltersContainer.js

@@ -1,8 +1,8 @@
-/* global __RUNTIME__ */
 import React, { Component, Fragment } from 'react'
 import PropTypes from 'prop-types'
 import { flatten, path, identity, contains } from 'ramda'
 import ContentLoader from 'react-content-loader'
+import { withRuntimeContext } from 'render'
 
 import SelectedFilters from './SelectedFilters'
 import AvailableFilters from './AvailableFilters'
@@ -27,7 +27,7 @@ const PRICE_RANGES_TITLE = 'search.filter.title.price-ranges'
  * Wrapper around the filters (selected and available) as well
  * as the popup filters that appear on mobile devices
  */
-export default class FiltersContainer extends Component {
+class FiltersContainer extends Component {
   static propTypes = {
     /** Get the props to pass to render's Link */
     getLinkProps: PropTypes.func.isRequired,
@@ -54,7 +54,7 @@ export default class FiltersContainer extends Component {
     rest: PropTypes.string.isRequired,
     /** Loading indicator */
     loading: PropTypes.bool,
-    ...hiddenFacetsSchema
+    ...hiddenFacetsSchema,
   }
 
   static defaultProps = {
@@ -121,9 +121,10 @@ export default class FiltersContainer extends Component {
       getLinkProps,
       loading,
       hiddenFacets,
+      runtime: { hints: { mobile } },
     } = this.props
 
-    if (loading) {
+    if (loading && !mobile) {
       return (
         <ContentLoader
           style={{
@@ -178,7 +179,7 @@ export default class FiltersContainer extends Component {
       },
     ].filter(identity)
 
-    if (__RUNTIME__.hints.mobile) {
+    if (mobile) {
       return (
         <AccordionFilterContainer
           filters={filters}
@@ -206,3 +207,5 @@ export default class FiltersContainer extends Component {
     )
   }
 }
+
+export default withRuntimeContext(FiltersContainer)

react/components/SearchResult.js

@@ -38,7 +38,7 @@ export default class SearchResult extends Component {
 
     return (
       <div className="vtex-search-result vtex-page-padding pv5 ph9-l ph7-m ph5-s">
-        <div className="vtex-search-result__breadcrumb">
+        <div className="vtex-search-result__breadcrumb db-ns dn-s">
           <ExtensionPoint id="breadcrumb" {...breadcrumbsProps} />
         </div>
         <div className="vtex-search-result__total-products">

react/global.css

@@ -151,10 +151,6 @@ body.vtex-filter-popup-open {
       "gallery gallery gallery";
   }
 
-  .vtex-search-result__breadcrumb {
-    justify-self: center;
-  }
-
   .vtex-search-result__total-products {
     justify-self: stretch;
     text-align: center;