categories and filters from different icons

src/components/CategoriesListPanel.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import Checkbox from './presentational/Checkbox'
+import copy from '../js/data/copy.json'
+
+export default (props) => {
+  function onClickCheckbox (obj, type) {
+    obj.active = !obj.active
+    props.onCategoryFilter(obj)
+  }
+
+  function renderCategoryTree () {
+    return (
+      <div>
+        <h2>{copy[props.language].toolbar.categories}</h2>
+        {props.categories.map(cat => {
+          return (<li
+            key={cat.category.replace(/ /g, '_')}
+            className={'tag-filter active'}
+            style={{ marginLeft: '20px' }}
+          >
+            <Checkbox
+              label={cat.category}
+              isActive={cat.active}
+              onClickCheckbox={() => onClickCheckbox(cat, 'category')}
+            />
+          </li>)
+        })}
+      </div>
+    )
+  }
+
+  return (
+    <div className='react-innertabpanel'>
+      <h2>{copy[props.language].toolbar.explore_by_category__title}</h2>
+      <p>{copy[props.language].toolbar.explore_by_category__description}</p>
+      {renderCategoryTree()}
+    </div>
+  )
+}

src/components/TagListPanel.jsx

@@ -22,8 +22,7 @@ class TagListPanel extends React.Component {
 
   onClickCheckbox (obj, type) {
     obj.active = !obj.active
-    if (type === 'category') this.props.onCategoryFilter(obj)
-    if (type === 'tag') this.props.onTagFilter(obj)
+    this.props.onTagFilter(obj)
   }
 
   createNodeComponent (node, depth) {
@@ -70,34 +69,11 @@ class TagListPanel extends React.Component {
     )
   }
 
-  renderCategoryTree () {
-    return (
-      <div>
-        <h2>{copy[this.props.language].toolbar.categories}</h2>
-        {this.props.categories.map(cat => {
-          return (<li
-            key={cat.category.replace(/ /g, '_')}
-            className={'tag-filter active'}
-            style={{ marginLeft: '20px' }}
-          >
-            <Checkbox
-              label={cat.category}
-              isActive={cat.active}
-              onClickCheckbox={() => this.onClickCheckbox(cat, 'category')}
-            />
-          </li>)
-        })
-        }
-      </div>
-    )
-  }
-
   render () {
     return (
       <div className='react-innertabpanel'>
         <h2>{copy[this.props.language].toolbar.explore_by_tag__title}</h2>
         <p>{copy[this.props.language].toolbar.explore_by_tag__description}</p>
-        {this.renderCategoryTree()}
         {this.renderTree()}
       </div>
     )

src/components/Toolbar.jsx

@@ -7,6 +7,7 @@ import * as selectors from '../selectors'
 import { Tabs, TabPanel } from 'react-tabs'
 import Search from './Search.jsx'
 import TagListPanel from './TagListPanel.jsx'
+import CategoriesListPanel from './CategoriesListPanel.jsx'
 import ToolbarBottomActions from './ToolbarBottomActions.jsx'
 import copy from '../js/data/copy.json'
 import { trimAndEllipse } from '../js/utilities.js'
@@ -71,6 +72,21 @@ class Toolbar extends React.Component {
     )
   }
 
+  renderToolbarCategoriesPanel () {
+    if (process.env.features.CATEGORIES_AS_TAGS) {
+      return (
+        <TabPanel>
+          <CategoriesListPanel
+            categories={this.props.categories}
+            categoryFilters={this.props.categoryFilters}
+            onCategoryFilter={this.props.methods.onCategoryFilter}
+            language={this.props.language}
+          />
+        </TabPanel>
+      )
+    }
+  }
+
   renderToolbarTagPanel () {
     if (process.env.features.USE_TAGS &&
       this.props.tags.children) {
@@ -78,17 +94,14 @@ class Toolbar extends React.Component {
         <TabPanel>
           <TagListPanel
             tags={this.props.tags}
-            categories={this.props.categories}
             tagFilters={this.props.tagFilters}
-            categoryFilters={this.props.categoryFilters}
             onTagFilter={this.props.methods.onTagFilter}
-            onCategoryFilter={this.props.methods.onCategoryFilter}
             language={this.props.language}
           />
         </TabPanel>
       )
     }
-    return ''
+    return null
   }
 
   renderToolbarTab (_selected, label, iconKey) {
@@ -110,6 +123,7 @@ class Toolbar extends React.Component {
         {this.renderClosePanel()}
         <Tabs selectedIndex={this.state._selected}>
           {this.renderToolbarNarrativePanel()}
+          {this.renderToolbarCategoriesPanel()}
           {this.renderToolbarTagPanel()}}
         </Tabs>
       </div>
@@ -130,7 +144,7 @@ class Toolbar extends React.Component {
         )
       })
     }
-    return ''
+    return null
   }
 
   renderToolbarTabs () {
@@ -138,14 +152,17 @@ class Toolbar extends React.Component {
     if (process.env.title) title = process.env.title
     const narrativesLabel = copy[this.props.language].toolbar.narratives_label
     const tagsLabel = copy[this.props.language].toolbar.tags_label
+    const categoriesLabel = 'Categories' // TODO:
     const isTags = this.props.tags && this.props.tags.children
+    const isCategories = true
 
     return (
       <div className='toolbar'>
         <div className='toolbar-header'><p>{title}</p></div>
         <div className='toolbar-tabs'>
           {this.renderToolbarTab(0, narrativesLabel, 'timeline')}
-          {(isTags) ? this.renderToolbarTab(1, tagsLabel, 'style') : ''}
+          {(isCategories) ? this.renderToolbarTab(1, categoriesLabel, 'category') : null}
+          {(isTags) ? this.renderToolbarTab(2, tagsLabel, 'filter_list') : null}
         </div>
         <ToolbarBottomActions
           sites={{

src/js/data/copy.json

@@ -111,10 +111,12 @@
       "narratives_label": "Narratives",
       "narrative_summary": "Here you can follow some curated stories we have found in the data.",
       "categories": "Categories",
-      "tags": "Tags",
-      "tags_label": "Tags",
-      "explore_by_tag__title": "Explore by tag or category",
-      "explore_by_tag__description": "Selecting tags or categories, you'll see only those events that are tagged accordingly. If you select nothing, as well as everything, all data will be displayed."
+      "tags": "Filters",
+      "tags_label": "Filters",
+      "explore_by_tag__title": "Explore by filter",
+      "explore_by_tag__description": "Selecting a filter will show you only those events that are annotated with the filter. If you select nothing, as well as everything, all data will be displayed.",
+      "explore_by_category__title": "Explore by category",
+      "explore_by_category__description": "Selecting a category will show you only the events in that category. If you select a filter on top, it will filter events only in the selected categories."
 
     },
     "timeline": {