diff --git a/assets/css/instant-results.css b/assets/css/instant-results.css index 497fb56ec1..ba17c2b388 100644 --- a/assets/css/instant-results.css +++ b/assets/css/instant-results.css @@ -1,4 +1,5 @@ @import "instant-results/utilities.css"; +@import "instant-results/checkbox.css"; @import "instant-results/input.css"; @import "instant-results/modal.css"; @import "instant-results/options-list.css"; diff --git a/assets/css/instant-results/checkbox.css b/assets/css/instant-results/checkbox.css new file mode 100644 index 0000000000..1cc9ab456e --- /dev/null +++ b/assets/css/instant-results/checkbox.css @@ -0,0 +1,7 @@ +.ep-search-checkbox__count::before { + content: "("; +} + +.ep-search-checkbox__count::after { + content: ")"; +} diff --git a/assets/js/instant-results/components/common/checkbox-list.js b/assets/js/instant-results/components/common/checkbox-list.js index 374416017f..41ff712d96 100644 --- a/assets/js/instant-results/components/common/checkbox-list.js +++ b/assets/js/instant-results/components/common/checkbox-list.js @@ -122,7 +122,7 @@ export default ({ disabled, label, options, onChange, selected, sortBy }) => { * @param {Option} option Option. * @return {WPElement} Render function. */ - const displayOption = ({ id, label, value }) => { + const displayOption = ({ count, id, label, value }) => { const children = childOptions[value]; if (!showAll && optionsShown >= optionsLimit) { @@ -133,6 +133,7 @@ export default ({ disabled, label, options, onChange, selected, sortBy }) => {
  • { +export default ({ count, id, label, ...props }) => { return (
    - + {' '}
    ); diff --git a/assets/js/instant-results/components/facets/post-type-facet.js b/assets/js/instant-results/components/facets/post-type-facet.js index 6931b56a87..8204d3cdfe 100644 --- a/assets/js/instant-results/components/facets/post-type-facet.js +++ b/assets/js/instant-results/components/facets/post-type-facet.js @@ -41,13 +41,14 @@ export default ({ defaultIsOpen, label }) => { * @return {Array} Array of options. */ const reduceOptions = useCallback( - (options, { key }, index) => { + (options, { doc_count, key }, index) => { if (!Object.prototype.hasOwnProperty.call(postTypeLabels, key)) { return options; } options.push({ checked: selectedPostTypes.includes(key), + count: doc_count, id: `ep-search-post-type-${key}`, label: postTypeLabels[key].singular, order: index, diff --git a/assets/js/instant-results/components/facets/taxonomy-terms-facet.js b/assets/js/instant-results/components/facets/taxonomy-terms-facet.js index a69822f135..46b7214eeb 100644 --- a/assets/js/instant-results/components/facets/taxonomy-terms-facet.js +++ b/assets/js/instant-results/components/facets/taxonomy-terms-facet.js @@ -66,11 +66,12 @@ export default ({ defaultIsOpen, label, postTypes, taxonomy }) => { * @return {Array} Array of options. */ const reduceOptions = useCallback( - (options, { key }) => { + (options, { doc_count, key }) => { const { name, parent, term_id, term_order } = JSON.parse(key); options.push({ checked: selectedTerms.includes(term_id), + count: doc_count, id: `ep-search-${taxonomy}-${term_id}`, label: name, parent: parent.toString(),