components: adds toggle filter component

docs/docs/components/toggle.md

@@ -0,0 +1,31 @@
+---
+id: toggle
+title: Toggle
+---
+
+`Toggle` renders a Toggle Checkbox in a Card element providing a filter for the performed search.
+
+## Usage
+
+```jsx
+<Toggle
+    title="Versions"
+    label="View all versions"
+    filterValue={['all_versions', 'true']}
+/>
+```
+
+## Props
+
+* **title** `String` *optional*
+
+  The optional title for the Card element.
+
+* **label** `label` *optional*
+
+  An optional label to for the Checkbox element.
+
+- **filterValue** `Array` 
+
+  An array containing the filter to be applied to the search query when active.
+

src/lib/components/Toggle/Toggle.js

@@ -0,0 +1,70 @@
+/*
+ * This file is part of React-SearchKit.
+ * Copyright (C) 2020 CERN.
+ *
+ * React-SearchKit is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import React, { Component } from 'react';
+import { Checkbox } from 'semantic-ui-react';
+import Overridable from 'react-overridable';
+import _get from 'lodash/get';
+import { Card } from 'semantic-ui-react';
+import PropTypes from 'prop-types';
+
+class ToggleComponent extends Component{
+
+      _isChecked = (userSelectionFilters) => {
+        const isFilterActive = userSelectionFilters.filter(
+            (filter) => filter[0] === this.props.filterValue[0]
+          ).length > 0
+        return isFilterActive
+      };
+
+      onToggleClicked = () => {
+        this.props.updateQueryFilters(this.props.filterValue);
+      };
+
+      render() {
+        const {
+            userSelectionFilters,
+            overridableId,
+            ...props
+          } = this.props;
+        var isChecked = this._isChecked(userSelectionFilters);
+        return(
+        <Overridable id={'SearchFilters.ToggleComponent', this.props.overridableId} {...this.props}>
+
+            <Card>
+                <Card.Content>
+                    <Card.Header>{this.props.title}</Card.Header>
+                </Card.Content>
+                <Card.Content>
+                    <Checkbox
+                        toggle
+                        label={this.props.label}
+                        onClick={this.onToggleClicked}
+                        checked={isChecked}
+                    />
+                </Card.Content>
+            </Card>
+        </Overridable>
+        )
+      }
+}
+
+ToggleComponent.propTypes = {
+    title: PropTypes.string,
+    label: PropTypes.string,
+    userSelectionFilters: PropTypes.array.isRequired,
+    updateQueryFilters: PropTypes.func.isRequired,
+    overridableId: PropTypes.string,
+  };
+
+  ToggleComponent.defaultProps = {
+    overridableId: '',
+  };
+
+export default Overridable.component(
+    'SearchFilters.ToggleComponent', ToggleComponent);

src/lib/components/Toggle/index.js

@@ -0,0 +1,22 @@
+/*
+ * This file is part of React-SearchKit.
+ * Copyright (C) 2020 CERN.
+ *
+ * React-SearchKit is free software; you can redistribute it and/or modify it
+ * under the terms of the MIT License; see LICENSE file for more details.
+ */
+
+import { connect } from '../../store';
+import { updateQueryFilters } from '../../state/actions';
+import ToggleComponent from './Toggle';
+
+const mapDispatchToProps = dispatch => ({
+  updateQueryFilters: filter => dispatch(updateQueryFilters(filter)),
+});
+
+export const Toggle = connect(
+  state => ({
+    userSelectionFilters: state.query.filters
+  }),
+  mapDispatchToProps,
+)(ToggleComponent);

src/lib/components/index.js

@@ -8,6 +8,7 @@
 
 export { ActiveFilters } from './ActiveFilters';
 export { BucketAggregation } from './BucketAggregation';
+export { Toggle } from './Toggle';
 export { AutocompleteSearchBar } from './AutocompleteSearchBar';
 export { Count } from './Count';
 export { EmptyResults } from './EmptyResults';