global: update documentation and fix Toggle cmp

* fix Toggle cmp overridable name
* make Overridable params explicit and well defined
* update documentation

Author: ntarocco

docs/docs/components/active_filters.md

@@ -15,35 +15,32 @@ Each label has a `close` icon which can be clicked to remove the selected filter
 
 ## Props
 
-* **renderElement** `function` *optional*
+* **overridableId** `String` *optional*
 
-  An optional function to override the default rendered component.
+  An optional string to define a specific overridable id.
 
-## Usage when overriding template
+## Usage when overriding
 
 ```jsx
-<ActiveFilters renderElement={renderActiveFilters}/>
-```
-
-The function `renderElement` is called every time `results` or `filters` in query state change.
-
-```jsx
-renderActiveFilters = (filters, removeActiveFilter) => {
-  return filters.map(filter => {
-    const aggName = filter[0];
-    const value = filter[1];
-    const label = `${aggName}:${value}`;
-    return <div onClick={removeActiveFilter([aggName, value])}>{label}</div>
-  };
+const MyActiveFilters = ({ filters, removeActiveFilter, getLabel }) => {
+  ...
 }
+
+const overriddenComponents = {
+  "ActiveFilters.element": MyActiveFilters
+};
 ```
 
 ### Parameters
 
-* **filters** `array`
+* **filters** `Array`
 
   The `filters` `query` state. It contains the list of active filters selected by the user. Each element is a list `[ "<agg name>", "<value>" ]`.
 
-* **removeActiveFilter** `function`
+* **removeActiveFilter** `Function`
+
+  Function to be called with the active filter list as parameter if you want to remove one of the active filters `removeActiveFilter(<active filter>)`.
+
+* **getLabel** `Function`
 
-  A function to be called with the active filter list as parameter if you want to remove one of the active filters.
+  Function to be called to get a display label for the given active filter `getLabel(filter)`.

docs/docs/components/bucket_aggregation.md

@@ -13,11 +13,11 @@ By default it supports child aggregations. The user can select aggregations to f
 <BucketAggregation
   title="Employee Types"
   agg={{
-    field: 'employee_type.type',
-    aggName: 'type_agg',
+    field: "employee_type.type",
+    aggName: "type_agg",
     childAgg: {
-      field: 'employee_type.subtype',
-      aggName: 'subtype_agg',
+      field: "employee_type.subtype",
+      aggName: "subtype_agg",
     },
   }}
 />
@@ -29,91 +29,97 @@ By default it supports child aggregations. The user can select aggregations to f
 
   The title to display for the aggregation.
 
-* **agg** `object`
+* **agg** `Object`
 
   An object that describes the aggregation to look for in the `results`:
 
   * **field** `String`: the field name
 
   * **aggName** `String`: the aggregation name to look for in `results`
 
-  * **childAgg** `object`: a child aggregation with the same format as the `agg` prop
+  * **childAgg** `Object`: a child aggregation with the same format as the `agg` prop
 
-* **renderValuesContainerElement** `function` *optional*
+* **overridableId** `String` *optional*
 
-  An optional function to override the default rendered container component that wraps each value.
+  An optional string to define a specific overridable id.
 
-* **renderValueElement** `function` *optional*
-
-  An optional function to override the default rendered component for each of the value.
-
-## Usage when overriding template
-
-```jsx
-<BucketAggregation
-  renderValuesContainerElement={customAggValuesContainerCmp}
-  renderValueElement={customAggValueCmp}
-  />
-```
-
-Each `render*` function is called every time `results` `aggregations` value changes.
+## Usage when overriding
 
 ```jsx
-const customAggComp = (title, containerCmp) => {
-  return containerCmp ? (
+const MyBucketAggregation = ({title, containerCmp}) => {
+  return (
     <Menu vertical>
       <Menu.Item>
         <Menu.Header>{title}</Menu.Header>
         {containerCmp}
       </Menu.Item>
     </Menu>
-  ) : null;
+  );
+}
+
+const BucketAggregationContainer = ({ valuesCmp }) => {
+  ...
+}
+
+const MyBucketAggregationValues = ({ bucket, label, onFilterClicked, isSelected, childAggCmps }) => {
+  ...
+}
+
+const overriddenComponents = {
+  "BucketAggregation.element": MyBucketAggregation,
+  "BucketAggregationContainer.element": MyBucketAggregationContainer,
+  "BucketAggregationValues.element": MyBucketAggregationValues,
 };
 ```
 
-### renderValuesContainerElement parameters
+### BucketAggregation parameters
+
+Component that wraps the bucket aggregations and renders a title and the container of aggregations.
+
+* **title** `String`
+
+  The title to render.
+
+* **containerCmp** `React component`
+
+  The `BucketAggregationContainer` to render.
+
+* **agg** `Object`
+
+  Same object as in the props.
+
+* **updateQueryFilters** `Function`
+
+  A function to call to update the current selected filters.
+
+### BucketAggregationContainer parameters
+
+Component that wraps the list of aggregations.
 
 * **valuesCmp** `React component`
 
-  Component to render each of the aggregation values.
+  List of components of each aggregation value.
 
-```jsx
-const customAggValueCmp = (
-  bucket,
-  isSelected,
-  onFilterClicked,
-  getChildAggCmps
-) => {
-  const childAggCmps = getChildAggCmps(bucket);
-  return (
-    <Menu.Item
-      key={bucket.key}
-      name={bucket.key}
-      active={isSelected}
-      onClick={() => onFilterClicked(bucket.key)}
-    >
-      <Label>{bucket.doc_count}</Label>
-      {bucket.key}
-      {childAggCmps}
-    </Menu.Item>
-  );
-};
-```
+### BucketAggregationValues parameters
 
-### renderValueElement parameters
+Component that renders each of the aggregation.
 
-* **bucket** `array`
+* **bucket** `Array`
 
   The bucket to display, which by default contains the `key` field with the value and the `doc_count` number.
 
-* **isSelected** `boolean`
+* **label** `String`
+
+  The label to display.
+
+* **isSelected** `Boolean`
 
   `true` if this value is active/selected, `false` otherwise.
 
-* **onFilterClicked** `function`
+* **onFilterClicked** `Function`
 
   The function to be called when the user click on this value to activate the filter. It should be called with the `bucket.key` parameter.
 
-* **getChildAggCmps** `function`
+* **getChildAggCmps** `Function`
 
   A function to be called to render child component. It accepts the current `bucket` as parameter and it will render recursively this component. It returns a list of child components.

docs/docs/components/count.md

@@ -17,27 +17,25 @@ The component is **not** displayed while executing the search query or if there
 
 ## Props
 
-* **renderElement** `function` *optional*
-
-  An optional function to override the default rendered component.
-
-- **label** `function` _optional_
+- **label** `Function` _optional_
 
   An optional function to wrap the component with a prefix and suffix string. <br />
   E.g. `label={(cmp) => <> Found {cmp} results</>} />`
 
-## Usage when overriding template
+* **overridableId** `String` *optional*
 
-```jsx
-<Count renderElement={renderCount} />
-```
+  An optional string to define a specific overridable id.
 
-The function `renderElement` is called every time the number of results changes.
+## Usage when overriding
 
 ```jsx
-renderCount = totalResults => {
+const MyCount = ({ totalResults }) => {
   return <div>Found {totalResults} results.</div>;
 }
+
+const overriddenComponents = {
+  "Count.element": MyCount
+};
 ```
 
 ### Parameters

docs/docs/components/empty_results.md

@@ -16,25 +16,20 @@ results is greater than 0.
 
 ## Props
 
-* **renderElement** `function` *optional*
+* **overridableId** `String` *optional*
 
-  An optional function to override the default rendered component.
+  An optional string to define a specific overridable id.
 
-## Usage when overriding template
+## Usage when overriding
 
 ```jsx
-<EmptyResults renderElement={renderEmptyResults} />
-```
-
-The function `renderElement` is called every time the number of results changes.
-
-```jsx
-renderEmptyResults = (queryString, resetQuery) => {
-  return (<div>
-    <em>No results found with query "{queryString}"</em>
-    <div><button onClick={() => resetQuery()}>Clear query</button></div>
-  </div>);
+const MyEmptyResults = ({ queryString, resetQuery, extraContent }) => {
+  ...
 }
+
+const overriddenComponents = {
+  "EmptyResults.element": MyEmptyResults
+};
 ```
 
 ### Parameters
@@ -43,6 +38,14 @@ renderEmptyResults = (queryString, resetQuery) => {
 
   The current value of the `queryString` `query` state.
 
-* **resetQuery** `function`
+* **resetQuery** `Function`
 
   A function to call to reset the current search query.
+
+* **extraContent** `React component`
+
+  Any extra React component to be rendered.
+
+* **userSelectionFilters** `Array`
+
+  List of the currently selected filters.

docs/docs/components/error.md

@@ -13,28 +13,20 @@ The component is **not** displayed while executing the search query or if there
 <Error />
 ```
 
-## Props
-
-* **renderElement** `function` *optional*
-
-  An optional function to override the default rendered component.
-
-## Usage when overriding template
-
-```jsx
-<Error renderElement={renderError} />
-```
-
-The function `renderElement` is called every time the results error object is not empty.
+## Usage when overriding
 
 ```jsx
-renderError = error => {
-  return <div>Error while performing the search. Message: {error.message}</div>;
+const MyError = ({ error }) => {
+  ...
 }
+
+const overriddenComponents = {
+  "Error.element": MyError
+};
 ```
 
 ### Parameters
 
-* **error** `object`
+* **error** `Object`
 
   The current value of the `error` `results` state, containing the error returned by the search API connector.

docs/docs/components/layout_switcher.md

@@ -22,22 +22,20 @@ there are no results.
 
   The default layout, one of `list` or `grid`. Default value: `list`.
 
-* **renderElement** `function` *optional*
+* **overridableId** `String` *optional*
 
-  An optional function to override the default rendered component.
+  An optional string to define a specific overridable id.
 
-## Usage when overriding template
+## Usage when overriding
 
 ```jsx
-<LayoutSwitcher renderElement={renderLayoutSwitcher} />
-```
-
-The function `renderElement` is called every time the number of results changes.
-
-```jsx
-renderLayoutSwitcher = (currentLayout, onLayoutChange) => {
-  return <a onClick={() => onLayoutChange('list')}>LIST</a>/<a onClick={() => onLayoutChange('grid')}>GRID</a>;
+const MyLayoutSwitcher = ({ currentLayout, onLayoutChange }) => {
+  ...
 }
+
+const overriddenComponents = {
+  "LayoutSwitcher.element": MyLayoutSwitcher
+};
 ```
 
 ### Parameters