all tags->filters

src/components/presentational/Card/Filters.js

@@ -0,0 +1,36 @@
+import React from 'react'
+
+import copy from '../../../common/data/copy.json'
+
+const CardFilters = ({ filters, language }) => {
+  const filtersLang = copy[language].cardstack.filters
+  const noFiltersLang = copy[language].cardstack.nofilters
+
+  if (filters.length > 0) {
+    return (
+      <div className='card-row card-cell filters'>
+        <h4>{filtersLang}:</h4>
+        <p>
+          {filters.map((filter, idx) => {
+            return (
+              <span className='filter'>
+                <small>{filter.name}</small>
+                {(idx < filters.length - 1)
+                  ? ','
+                  : ''}
+              </span>
+            )
+          })}
+        </p>
+      </div>
+    )
+  }
+  return (
+    <div className='card-row card-cell filters'>
+      <h4>{filtersLang}</h4>
+      <p><small>{noFiltersLang}</small></p>
+    </div>
+  )
+}
+
+export default CardFilters

src/components/presentational/Card/Tags.js

@@ -1,36 +0,0 @@
-import React from 'react'
-
-import copy from '../../../common/data/copy.json'
-
-const CardTags = ({ tags, language }) => {
-  const tagsLang = copy[language].cardstack.tags
-  const noTagsLang = copy[language].cardstack.notags
-
-  if (tags.length > 0) {
-    return (
-      <div className='card-row card-cell tags'>
-        <h4>{tagsLang}:</h4>
-        <p>
-          {tags.map((tag, idx) => {
-            return (
-              <span className='tag'>
-                <small>{tag.name}</small>
-                {(idx < tags.length - 1)
-                  ? ','
-                  : ''}
-              </span>
-            )
-          })}
-        </p>
-      </div>
-    )
-  }
-  return (
-    <div className='card-row card-cell tags'>
-      <h4>{tagsLang}</h4>
-      <p><small>{noTagsLang}</small></p>
-    </div>
-  )
-}
-
-export default CardTags

src/components/presentational/Map/Events.jsx

@@ -3,7 +3,17 @@ import { Portal } from 'react-portal'
 import colors from '../../../common/global.js'
 import { calcOpacity } from '../../../common/utilities'
 
-function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation, selected, narrative, onSelect, svg, locations }) {
+function MapEvents ({
+  getCategoryColor,
+  categories,
+  projectPoint,
+  styleLocation,
+  selected,
+  narrative,
+  onSelect,
+  svg,
+  locations
+}) {
   function getCoordinatesForPercent (radius, percent) {
     const x = radius * Math.cos(2 * Math.PI * percent)
     const y = radius * Math.sin(2 * Math.PI * percent)
@@ -38,7 +48,7 @@ function MapEvents ({ getCategoryColor, categories, projectPoint, styleLocation,
       ...extraStyles
     })
 
-    const colorSlices = location.events.map(e => getCategoryColor(e.category))
+    const colorSlices = location.events.map(e => e.colour ? e.colour : getCategoryColor(e.category))
 
     let cumulativeAngleSweep = 0
 

src/components/presentational/Timeline/Events.js

@@ -109,7 +109,7 @@ const TimelineEvents = ({
       y: eventY,
       onSelect: () => onSelect(event),
       dims,
-      highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.tags[features.HIGHLIGHT_GROUPS.tagIndexIndicatingGroup]) : [],
+      highlights: features.HIGHLIGHT_GROUPS ? getHighlights(event.filters[features.HIGHLIGHT_GROUPS.filterIndexIndicatingGroup]) : [],
       features
     })
   }