--- a/client/src/components/ProtocolSummary.js	Fri Nov 16 11:19:13 2018 +0100
+++ b/client/src/components/ProtocolSummary.js	Fri Nov 16 17:01:19 2018 +0100
@@ -1,29 +1,14 @@
-import React, { Component } from 'react';
-import '../App.css';
-import './SessionSummary.css'
+import React from 'react';
+import './ProtocolSummary.css'
 
 
-export default class ProtocolSummary extends Component {
-  render() {
-    return (
-      <div className="mt-5">
-        <div>
-        <span className="bg-primary">important</span>
-        <p className="text-primary">la métacatégorie important</p>
-        </div>
-        <div>
-        <span className="bg-primary">mot-clé</span>
-        <p className="text-primary">la métacatégorie mot-clé</p>
-        </div>
-        <div>
-        <span className="bg-primary">commentaire</span>
-        <p className="text-primary">la métacatégorie commentaire</p>
-        </div>
-        <div>
-        <span className="bg-primary">trouble</span>
-        <p className="text-primary">la métacatégorie trouble</p>
-        </div>
-      </div>
-    );
-  }
-}
+export default ({ annotationCategories }) => (
+  <div className="protocol-summary">
+  {annotationCategories.map((category) => (
+    <div className="protocol-summary-category" key={category.key} >
+      <span className="protocol-summary-category-name badge text-light" style={{ backgroundColor: category.color, fontSize: "1em" }} >{category.name}</span>
+      <p className="text-primary">{category.description}</p>
+    </div>
+  ))}
+  </div>
+);