🌐 Use locale throughout layouts

src/common/card.js

@@ -1,16 +1,20 @@
+import copy from './data/copy.json';
+const {date_title, location_title, summary_title} = copy[process.env.store.app.language].cardstack;
+
 // Sensible defaults for generating a basic card layout
 // based on the example Timemap datasheet.
+
 const basic = ({ event }) => {
   return [
     [
       {
         kind: 'date',
-        title: 'Incident Date',
+        title: date_title || 'Incident Dates',
         value: event.datetime || event.date || ``
       },
       {
         kind: 'text',
-        title: 'Location',
+        title: location_title || 'Location',
         value: event.location || `—`
       }
     ],
@@ -18,7 +22,7 @@ const basic = ({ event }) => {
     [
       {
         kind: 'text',
-        title: 'Summary',
+        title: summary_title || 'Summary',
         value: event.description || ``,
         scaleFont: 1.1
       }

src/components/Timeline.jsx

@@ -341,6 +341,7 @@ class Timeline extends React.Component {
                 onDragEnd={() => { this.onDragEnd() }}
                 categories={categories.map(c => c.id)}
                 features={this.props.features}
+                fallbackLabel={copy[this.props.app.language].timeline.default_categories_label}
               />
               <Handles
                 dims={dims}

src/components/TimelineCategories.jsx

@@ -51,11 +51,11 @@ class TimelineCategories extends React.Component {
   }
 
   render () {
-    const { dims, categories } = this.props
+    const { dims, categories, fallbackLabel } = this.props
     const categoriesExist = categories && categories.length > 0
     const renderedCategories = categoriesExist
       ? this.props.categories.map((cat, idx) => this.renderCategory(cat, idx))
-      : this.renderCategory('Events', 0)
+      : this.renderCategory(fallbackLabel, 0)
 
     return (
       <g class='yAxis'>

src/store/initial.js

@@ -1,7 +1,9 @@
 import { mergeDeepLeft } from 'ramda'
 import global, { colors } from '../common/global'
 import generateCardLayout from '../common/card'
+import copy from '../common/data/copy.json';
 
+const language = process.env.store.app.language;
 const isSmallLaptop = window.innerHeight < 800
 const initial = {
   /*
@@ -77,7 +79,7 @@ const initial = {
       },
       range: [new Date(2001, 2, 23, 12), new Date(2021, 2, 23, 12)],
       rangeLimits: [new Date(1, 1, 1, 1), new Date()],
-      zoomLevels: [
+      zoomLevels: copy[language].timeline.zoomLevels || [
         { label: '20 years', duration: 10512000 },
         { label: '2 years', duration: 1051200 },
         { label: '3 months', duration: 129600 },