Creates an event type called TIMELINE_ONLY which doesnt get filtered by filter panel; allowing for panel copy to be read in via the config

src/components/Toolbar.js

@@ -17,6 +17,7 @@ import {
   addToColoringSet,
   removeFromColoringSet,
 } from "../common/utilities.js";
+import { DEFAULT_TAB_ICONS } from "../common/constants";
 
 class Toolbar extends React.Component {
   constructor(props) {
@@ -108,7 +109,15 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarCategoriesPanel() {
-    if (this.props.features.CATEGORIES_AS_FILTERS) {
+    const { panels } = this.props.toolbarCopy;
+    const panelTitle = panels.categories.label
+      ? panels.categories.label
+      : copy[this.props.language].toolbar.categories;
+    const panelDescription = panels.categories.description
+      ? panels.categories.description
+      : copy[this.props.language].toolbar.explore_by_category__description;
+
+    if (this.props.features.USE_CATEGORIES) {
       return (
         <TabPanel>
           <CategoriesListPanel
@@ -116,6 +125,8 @@ class Toolbar extends React.Component {
             activeCategories={this.props.activeCategories}
             onCategoryFilter={this.props.methods.onCategoryFilter}
             language={this.props.language}
+            title={panelTitle}
+            description={panelDescription}
           />
         </TabPanel>
       );
@@ -165,9 +176,7 @@ class Toolbar extends React.Component {
           {narratives && narratives.length !== 0
             ? this.renderToolbarNarrativePanel()
             : null}
-          {features.CATEGORIES_AS_FILTERS
-            ? this.renderToolbarCategoriesPanel()
-            : null}
+          {features.USE_CATEGORIES ? this.renderToolbarCategoriesPanel() : null}
           {features.USE_ASSOCIATIONS ? this.renderToolbarFilterPanel() : null}
         </Tabs>
       </div>
@@ -197,13 +206,26 @@ class Toolbar extends React.Component {
   }
 
   renderToolbarTabs() {
-    const { features, narratives } = this.props;
+    const { features, narratives, toolbarCopy } = this.props;
     const narrativesExist = narratives && narratives.length !== 0;
     let title = copy[this.props.language].toolbar.title;
     if (process.env.display_title) title = process.env.display_title;
+
+    const { panels } = toolbarCopy;
     const narrativesLabel = copy[this.props.language].toolbar.narratives_label;
-    const filtersLabel = copy[this.props.language].toolbar.filters_label;
-    const categoriesLabel = "Categories"; // TODO:
+    const filtersLabel = panels.filters.label
+      ? panels.filters.label
+      : copy[this.props.language].toolbar.filters_label;
+    const categoriesLabel = panels.categories.label
+      ? panels.categories.label
+      : copy[this.props.language].toolbar.categories_label;
+
+    const filterIcon = panels.filters.icon
+      ? panels.filters.icon
+      : DEFAULT_TAB_ICONS.FILTER;
+    const categoriesIcon = panels.categories.icon
+      ? panels.categories.icon
+      : DEFAULT_TAB_ICONS.CATEGORY;
 
     const narrativesIdx = 0;
     const categoriesIdx = narrativesExist ? 1 : 0;
@@ -223,10 +245,14 @@ class Toolbar extends React.Component {
             ? this.renderToolbarTab(narrativesIdx, narrativesLabel, "timeline")
             : null}
           {features.CATEGORIES_AS_FILTERS
-            ? this.renderToolbarTab(categoriesIdx, categoriesLabel, "widgets")
+            ? this.renderToolbarTab(
+                categoriesIdx,
+                categoriesLabel,
+                categoriesIcon
+              )
             : null}
           {features.USE_ASSOCIATIONS
-            ? this.renderToolbarTab(filtersIdx, filtersLabel, "filter_list")
+            ? this.renderToolbarTab(filtersIdx, filtersLabel, filterIcon)
             : null}
         </div>
         <BottomActions
@@ -268,6 +294,7 @@ function mapStateToProps(state) {
     categories: selectors.getCategories(state),
     narratives: selectors.selectNarratives(state),
     language: state.app.language,
+    toolbarCopy: state.app.toolbar,
     activeFilters: selectors.getActiveFilters(state),
     activeCategories: selectors.getActiveCategories(state),
     viewFilters: state.app.associations.views,

src/components/controls/CategoriesListPanel.js

@@ -1,13 +1,14 @@
 import React from "react";
 import marked from "marked";
 import Checkbox from "../atoms/Checkbox";
-import copy from "../../common/data/copy.json";
 
 const CategoriesListPanel = ({
   categories,
   activeCategories,
   onCategoryFilter,
   language,
+  title,
+  description,
 }) => {
   function renderCategoryTree() {
     return (
@@ -33,12 +34,10 @@ const CategoriesListPanel = ({
 
   return (
     <div className="react-innertabpanel">
-      <h2>{copy[language].toolbar.categories}</h2>
+      <h2>{title}</h2>
       <p
         dangerouslySetInnerHTML={{
-          __html: marked(
-            copy[language].toolbar.explore_by_category__description
-          ),
+          __html: marked(description),
         }}
       />
       {renderCategoryTree()}