Displaying results counts for facet options in Instant Results

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";

assets/css/instant-results/checkbox.css

@@ -0,0 +1,7 @@
+.ep-search-checkbox__count::before {
+	content: "(";
+}
+
+.ep-search-checkbox__count::after {
+	content: ")";
+}

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 }) => {
 			<li className="ep-search-options-list__item" key={value}>
 				<Checkbox
 					checked={selected.includes(value)}
+					count={count}
 					disabled={disabled}
 					id={id}
 					label={label}

assets/js/instant-results/components/common/checkbox.js

@@ -7,17 +7,18 @@ import { WPElement } from '@wordpress/element';
  * Checkbox component.
  *
  * @param {Option} props       Component props.
+ * @param {string} props.count Checkbox count.
  * @param {string} props.id    Checkbox ID.
  * @param {string} props.label Checkbox label.
  *
  * @return {WPElement} Component element.
  */
-export default ({ id, label, ...props }) => {
+export default ({ count, id, label, ...props }) => {
 	return (
 		<div className="ep-search-checkbox">
-			<input className="ep-search-checkbox__input" id={id} type="checkbox" {...props} />
+			<input className="ep-search-checkbox__input" id={id} type="checkbox" {...props} />{' '}
 			<label className="ep-search-checkbox__label" htmlFor={id}>
-				{label}
+				{label} {count && <span className="ep-search-checkbox__count">{count}</span>}
 			</label>
 		</div>
 	);

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,

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(),