diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..83b694704
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+CHANGELOG.md
\ No newline at end of file
diff --git a/CHANGELOG.md b/CHANGELOG.md
index a36a56c68..fe29fe36f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,8 @@ 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]
+### Added
+- CSS class `filterItem--selected` for selected filter items.
## [3.22.2] - 2019-06-24
diff --git a/README.md b/README.md
index e2d9837b1..e580c6ef9 100644
--- a/README.md
+++ b/README.md
@@ -13,6 +13,7 @@ The VTEX Search Result app is a store component that handles with the result of
We ask for users, from now on, to use the `filter-navigator.v2` block if you want to keep updated with the most up to date Filter Navigator in your search-result.
The correct way to use it is setting it in your `blocks.json` like:
+
```
json
"search-result": {
@@ -132,43 +133,44 @@ The gallery has as a required block the `product-summary`. So, any gallery block
### Configuration
#### Layout API
+
These properties can be changed in the `blocks.json` file of your theme.
-| Prop name | Type | Description | Default value |
-| --- | --- | --- | --- |
-| `querySchema` | `QuerySchema` | Query made when there's no context | N/A |
-| `hiddenFacets` | `HiddenFacets` | Indicates which facets will be hidden | N/A |
-| `pagination` | `Enum` | Pagination type (values: 'show-more' or 'infinite-scroll') | `infinity-scroll` |
-| `mobileLayout` | `MobileLayout` | Control mobile layout | N/A |
-| `showFacetQuantity` | `Boolean` | If quantity of items filtered by facet should appear besides its name on `filter-navigator` | `false` |
-| `blockClass` | `String` | Unique class name to be appended to block classes | `""` |
+| Prop name | Type | Description | Default value |
+| ------------------- | -------------- | ------------------------------------------------------------------------------------------- | ----------------- |
+| `querySchema` | `QuerySchema` | Query made when there's no context | N/A |
+| `hiddenFacets` | `HiddenFacets` | Indicates which facets will be hidden | N/A |
+| `pagination` | `Enum` | Pagination type (values: 'show-more' or 'infinite-scroll') | `infinity-scroll` |
+| `mobileLayout` | `MobileLayout` | Control mobile layout | N/A |
+| `showFacetQuantity` | `Boolean` | If quantity of items filtered by facet should appear besides its name on `filter-navigator` | `false` |
+| `blockClass` | `String` | Unique class name to be appended to block classes | `""` |
QuerySchema
-| Prop name | Type | Description | Default value |
-| --- | --- | --- | --- |
-| `maxItemsPerPage` | `Number` | Maximum number of items per search page | 10 |
-| `queryField` | `String` | Query field | N/A |
-| `mapField` | `String` | Map field | N/A |
-| `restField` | `String` | Other Query Strings | N/A |
-| `orderByField` | `Enum` | Order by field (values: 'OrderByTopSaleDESC', 'OrderByReleaseDateDESC', 'OrderByBestDiscountDESC', 'OrderByPriceDESC', 'OrderByPriceASC', 'OrderByNameASC' or 'OrderByNameDESC') | `OrderByReleaseDateDESC` |
-| `hideUnavailableItems` | `Boolean` | Set if unavailable items should show on search | `false` |
+| Prop name | Type | Description | Default value |
+| ---------------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| `maxItemsPerPage` | `Number` | Maximum number of items per search page | 10 |
+| `queryField` | `String` | Query field | N/A |
+| `mapField` | `String` | Map field | N/A |
+| `restField` | `String` | Other Query Strings | N/A |
+| `orderByField` | `Enum` | Order by field (values: 'OrderByTopSaleDESC', 'OrderByReleaseDateDESC', 'OrderByBestDiscountDESC', 'OrderByPriceDESC', 'OrderByPriceASC', 'OrderByNameASC' or 'OrderByNameDESC') | `OrderByReleaseDateDESC` |
+| `hideUnavailableItems` | `Boolean` | Set if unavailable items should show on search | `false` |
HiddenFacets
-| Prop name | Type | Description | Default value |
-| --- | --- | --- | --- |
-| `brands` | `Boolean` | Hide Brands filter | false |
-| `categories` | `Boolean` | Hide Categories filter | false |
-| `priceRange` | `Boolean` | Hide Price filter | false |
-| `specificationFilters` | `SpecificationFilters` | Hide Specifications filters | N/A |
+| Prop name | Type | Description | Default value |
+| ---------------------- | ---------------------- | --------------------------- | ------------- |
+| `brands` | `Boolean` | Hide Brands filter | false |
+| `categories` | `Boolean` | Hide Categories filter | false |
+| `priceRange` | `Boolean` | Hide Price filter | false |
+| `specificationFilters` | `SpecificationFilters` | Hide Specifications filters | N/A |
SpecificationFilters
-| Prop name | Type | Description | Default value |
-| --- | --- | --- | --- |
-| `hideAll` | `Boolean` | Hide specifications filters | false |
-| `hiddenFilters` | `Array(HiddenFilterUnit)` | Array of specifications filters that should be hidden | N/A |
+| Prop name | Type | Description | Default value |
+| --------------- | ------------------------- | ----------------------------------------------------- | ------------- |
+| `hideAll` | `Boolean` | Hide specifications filters | false |
+| `hiddenFilters` | `Array(HiddenFilterUnit)` | Array of specifications filters that should be hidden | N/A |
HiddenFilterUnit
| Prop name | Type | Description | Default value |
@@ -209,50 +211,51 @@ To use this CSS API, you must add the `styles` builder and create an app styling
Below, we describe the namespaces that are defined in the search-result.
-| Token name | Description | Component Source |
-| --- | --- | --- |
-| `container` | The main container of search-result | [SearchResult](/react/components/SearchResult.js) |
-| `buttonShowMore` | Show the see more button | [ShowMoreLoaderResult](/react/components/loaders/ShowMoreLoaderResult.js) |
-| `switch` | Layout mode switcher container | [SearchResult](/react/components/SearchResult.js) |
-| `breadcrumb` | Breadcrumb container | [SearchResult](/react/components/SearchResult.js) |
-| `filter` | Filter option container | [FilterOptionTemplate](/react/components/FilterOptionTemplate.js) |
-| `resultGallery` | Gallery result container | [SearchResult](/react/components/SearchResult.js) |
-| `border` | Order by container border | [SearchResult](/react/components/SearchResult.js) |
-| `gallery` | The main container of gallery | [Gallery](/react/Gallery.js) |
-| `filterPopupButton` | Filter pop-up button | [FilterSideBar](/react/components/FilterSideBar.js) |
-| `accordionFilter` | Accordion filter container | [AccordionFilterContainer](/react/components/AccordionFilterContainer.js) |
-| `filterAccordionItemBox` | Accordion filter item container | [AccordionFilterItem](/react/components/AccordionFilterItem.js) |
-| `filterAccordionBreadcrumbs` | Filter accordion breadcrumbs container | [AccordionFilterContainer](/react/components/AccordionFilterContainer.js) |
-| `filterButtonsBox` | Filter buttons container | [FilterSidebar](/react/components/FilterSidebar.js) |
-| `filterPopupFooter` | Filter pop-up footer container | [Popup](/react/components/Popup.js) |
-| `accordionFilterItemOptions` | Accordion filter item options container | [AccordionFilterItem](/react/components/AccordionFilterItem.js) |
-| `dropdownMobile` | The main container of drop-down on mobile | [SelectionListOrderBy](/react/components/SelectionListOrderBy.js) |
-| `accordionFilterItemActive` | Container of the accordion filter item when it is active | [AccordionFilterItem](/react/components/AccordionFilterItem.js) |
-| `totalProducts` | The main container of total-products | [TotalProducts](/react/TotalProducts.js) |
-| `orderBy` | The main container of order-by | [OrderBy](/react/OrderBy.js) |
-| `accordionFilterItemHidden` | Accordion filter item container when it is hidden | [AccordionFilterItem](/react/compoents/AccordionFilterItem.js) |
-| `accordionFilterItem` | Accordion filter item container | [AccordionFilterItem](/react/compoents/AccordionFilterItem.js) |
-| `accordionFilterItemBox` | Accordion filter item box | [AccordionFilterItem](/react/compoents/AccordionFilterItem.js) |
-| `accordionFilterItemTitle` | Accordion filter item title container | [AccordionFilterItem](/react/compoents/AccordionFilterItem.js) |
-| `accordionFilterItemIcon` | Accordion filter item icon container | [AccordionFilterItem](/react/compoents/AccordionFilterItem.js) |
-| `filterAvailable` | Filter option template main container when it is available | [FilterOptionTemplate](/react/compoents/AccordionFilterItem.js) |
-| `filterSelected` | Filter option template main container when it is selected | [FilterOptionTemplate](/react/compoents/AccordionFilterItem.js) |
-| `filterPopupTitle` | Filter pop-up title label | [FilterSidebar](/react/compoents/FilterSidebar.js) |
-| `filterPopupArrowIcon` | Filter pop-up arrow icon container | [FilterSidebar](/react/compoents/FilterSidebar.js) |
-| `footerButton` | Footer button | [FooterButton](/react/components/FooterButton.js) |
-| `layoutSwitcher` | Layout mode switcher container | [LayoutModeSwitcher](/react/components/LayoutModeSwitcher.js) |
-| `filterPopup` | Main container of filter pop-up | [FilterPopup](/react/components/FilterPopup.js) |
-| `filterPopupOpen` | Main container of filter pop-up when it is open | [FilterPopup](/react/components/FilterPopup.js) |
-| `filterPopupContent` | Filter pop-up content | [Popup](/react/components/Popup.js) |
-| `filterPopupContentContainer` | Filter pop-up content container | [Popup](/react/components/Popup.js) |
-| `filterPopupContentContainerOpen` | Filter pop-up content container when it is open | [Popup](/react/components/Popup.js) |
-| `galleryItem` | Gallery item container | [Gallery](/react/Gallery.js) |
-| `searchNotFound` | Main container of Search Not Found | [NotFoundSearch](/react/NotFoundSearch.js) |
-| `filterTitle` | Filter title container | [FilterOptionTemplate](/react/components/FilterOptionTemplate.js) |
-| `filterIcon` | Filter icon container | [FilterOptionTemplate](/react/components/FilterOptionTemplate.js) |
-| `galleryTitle` | Category name or search term title | [Title](/react/Title.js) |
-| `filterItem` | Checkbox and label for Filters (desktop only) | [SearchFilter](/react/components/SearchFilter.js) |
-| `selectedFilterItem` | Checkbox and label for selected Filters (desktop only) | [SelectedFilters](/react/components/SelectedFilters.js) |
+| Token name | Description | Component Source |
+| --------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------- |
+| `container` | The main container of search-result | [SearchResult](/react/components/SearchResult.js) |
+| `buttonShowMore` | Show the see more button | [ShowMoreLoaderResult](/react/components/loaders/ShowMoreLoaderResult.js) |
+| `switch` | Layout mode switcher container | [SearchResult](/react/components/SearchResult.js) |
+| `breadcrumb` | Breadcrumb container | [SearchResult](/react/components/SearchResult.js) |
+| `filter` | Filter option container | [FilterOptionTemplate](/react/components/FilterOptionTemplate.js) |
+| `resultGallery` | Gallery result container | [SearchResult](/react/components/SearchResult.js) |
+| `border` | Order by container border | [SearchResult](/react/components/SearchResult.js) |
+| `gallery` | The main container of gallery | [Gallery](/react/Gallery.js) |
+| `filterPopupButton` | Filter pop-up button | [FilterSideBar](/react/components/FilterSideBar.js) |
+| `accordionFilter` | Accordion filter container | [AccordionFilterContainer](/react/components/AccordionFilterContainer.js) |
+| `filterAccordionItemBox` | Accordion filter item container | [AccordionFilterItem](/react/components/AccordionFilterItem.js) |
+| `filterAccordionBreadcrumbs` | Filter accordion breadcrumbs container | [AccordionFilterContainer](/react/components/AccordionFilterContainer.js) |
+| `filterButtonsBox` | Filter buttons container | [FilterSidebar](/react/components/FilterSidebar.js) |
+| `filterPopupFooter` | Filter pop-up footer container | [Popup](/react/components/Popup.js) |
+| `accordionFilterItemOptions` | Accordion filter item options container | [AccordionFilterItem](/react/components/AccordionFilterItem.js) |
+| `dropdownMobile` | The main container of drop-down on mobile | [SelectionListOrderBy](/react/components/SelectionListOrderBy.js) |
+| `accordionFilterItemActive` | Container of the accordion filter item when it is active | [AccordionFilterItem](/react/components/AccordionFilterItem.js) |
+| `totalProducts` | The main container of total-products | [TotalProducts](/react/TotalProducts.js) |
+| `orderBy` | The main container of order-by | [OrderBy](/react/OrderBy.js) |
+| `accordionFilterItemHidden` | Accordion filter item container when it is hidden | [AccordionFilterItem](/react/compoents/AccordionFilterItem.js) |
+| `accordionFilterItem` | Accordion filter item container | [AccordionFilterItem](/react/compoents/AccordionFilterItem.js) |
+| `accordionFilterItemBox` | Accordion filter item box | [AccordionFilterItem](/react/compoents/AccordionFilterItem.js) |
+| `accordionFilterItemTitle` | Accordion filter item title container | [AccordionFilterItem](/react/compoents/AccordionFilterItem.js) |
+| `accordionFilterItemIcon` | Accordion filter item icon container | [AccordionFilterItem](/react/compoents/AccordionFilterItem.js) |
+| `filterAvailable` | Filter option template main container when it is available | [FilterOptionTemplate](/react/compoents/AccordionFilterItem.js) |
+| `filterSelected` | Filter option template main container when it is selected | [FilterOptionTemplate](/react/compoents/AccordionFilterItem.js) |
+| `filterPopupTitle` | Filter pop-up title label | [FilterSidebar](/react/compoents/FilterSidebar.js) |
+| `filterPopupArrowIcon` | Filter pop-up arrow icon container | [FilterSidebar](/react/compoents/FilterSidebar.js) |
+| `footerButton` | Footer button | [FooterButton](/react/components/FooterButton.js) |
+| `layoutSwitcher` | Layout mode switcher container | [LayoutModeSwitcher](/react/components/LayoutModeSwitcher.js) |
+| `filterPopup` | Main container of filter pop-up | [FilterPopup](/react/components/FilterPopup.js) |
+| `filterPopupOpen` | Main container of filter pop-up when it is open | [FilterPopup](/react/components/FilterPopup.js) |
+| `filterPopupContent` | Filter pop-up content | [Popup](/react/components/Popup.js) |
+| `filterPopupContentContainer` | Filter pop-up content container | [Popup](/react/components/Popup.js) |
+| `filterPopupContentContainerOpen` | Filter pop-up content container when it is open | [Popup](/react/components/Popup.js) |
+| `galleryItem` | Gallery item container | [Gallery](/react/Gallery.js) |
+| `searchNotFound` | Main container of Search Not Found | [NotFoundSearch](/react/NotFoundSearch.js) |
+| `filterTitle` | Filter title container | [FilterOptionTemplate](/react/components/FilterOptionTemplate.js) |
+| `filterIcon` | Filter icon container | [FilterOptionTemplate](/react/components/FilterOptionTemplate.js) |
+| `galleryTitle` | Category name or search term title | [Title](/react/Title.js) |
+| `filterItem` | Checkbox and label for Filters (desktop only) | [SearchFilter](/react/components/SearchFilter.js) |
+| `filterItem--selected` | Checkbox and label for selected Filters (desktop only) | [SearchFilter](/react/components/SearchFilter.js) |
+| `selectedFilterItem` | Checkbox and label for selected Filters (desktop only) | [SelectedFilters](/react/components/SelectedFilters.js) |
| `categoriesContainer` | The container for the department filters | [DepartmentFilters](/react/components/DepartmentFilters.js) |
| `categoryGroup` | Container for each category group in the department filters | [CategoryFilter](/react/components/CategoryFilter.js) |
@@ -264,7 +267,7 @@ You can check if others are experiencing similar issues [here](https://github.co
## Contributing
-Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.
+Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.
## Tests
diff --git a/react/components/SearchFilter.js b/react/components/SearchFilter.js
index 63a02341f..6d9604e4d 100644
--- a/react/components/SearchFilter.js
+++ b/react/components/SearchFilter.js
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types'
import React from 'react'
import { injectIntl, intlShape } from 'react-intl'
+import classNames from 'classnames'
import FilterOptionTemplate from './FilterOptionTemplate'
import FacetItem from './FacetItem'
@@ -21,7 +22,15 @@ const SearchFilter = ({ title = 'Default Title', facets = [], intl }) => {
title={getFilterTitle(title, intl)}
filters={filtersWithSelected}
>
- {facet => }
+ {facet => (
+
+ )}
)
}