Merge pull request #189 from forensic-architecture/bug/card-layout-template-ingestion

Use templates from our design-system for card layouts

package.json

@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@babel/core": "7.12.3",
-    "@forensic-architecture/design-system": "0.6.1",
+    "@forensic-architecture/design-system": "0.6.2",
     "@pmmmwh/react-refresh-webpack-plugin": "0.4.2",
     "@svgr/webpack": "5.4.0",
     "@typescript-eslint/eslint-plugin": "^4.5.0",

src/common/card.js

@@ -1,37 +0,0 @@
-import copy from "./data/copy.json";
-import { language } from "./utilities";
-
-const cardStack = copy[language].cardstack;
-
-// Sensible defaults for generating a basic card layout
-// based on the example Timemap datasheet.
-
-const basic = ({ event }) => {
-  return [
-    [
-      {
-        kind: "date",
-        title: cardStack.date_title || "Incident Dates",
-        value: event.datetime || event.date || "",
-      },
-      {
-        kind: "text",
-        title: cardStack.location_title || "Location",
-        value: event.location || "—",
-      },
-    ],
-    [{ kind: "line-break", times: 0.4 }],
-    [
-      {
-        kind: "text",
-        title: cardStack.summary_title || "Summary",
-        value: event.description || "",
-        scaleFont: 1.1,
-      },
-    ],
-  ];
-};
-
-export default {
-  basic,
-};

src/components/CardStack.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { connect } from "react-redux";
+import { generateCardLayout } from "@forensic-architecture/design-system/react";
 
 import * as selectors from "../selectors";
 import { getFilterIdxFromColorSet } from "../common/utilities";
@@ -61,6 +62,9 @@ class CardStack extends React.Component {
     }
     this.refs = [];
 
+    const generateTemplate =
+      generateCardLayout[this.props.cardUI.layout.template];
+
     return events.map((event, idx) => {
       const thisRef = React.createRef();
       this.refs[idx] = thisRef;
@@ -68,7 +72,7 @@ class CardStack extends React.Component {
       return (
         <Card
           ref={thisRef}
-          content={this.props.cardUI.layout({
+          content={generateTemplate({
             event,
             colors: this.props.colors,
             coloringSet: this.props.coloringSet,

src/store/initial.js

@@ -1,6 +1,6 @@
 import { mergeDeepLeft } from "ramda";
+
 import global, { colors } from "../common/global";
-import generateCardLayout from "../common/card";
 import copy from "../common/data/copy.json";
 import { language } from "../common/utilities";
 
@@ -136,7 +136,9 @@ const initial = {
       },
     },
     card: {
-      layout: ({ event }) => generateCardLayout.basic({ event }),
+      layout: {
+        template: "basic",
+      },
     },
     coloring: {
       maxNumOfColors: 4,