Changes requested in CR for the Map Card component

lib/assets/javascripts/new-dashboard/components/MapCard.vue

@@ -2,7 +2,7 @@
     <div class="grid-cell grid-cell--col4">
         <div class="card" v-bind:class="{selected: selected}">
             <span class="checkbox card-select">
-                <input class="checkbox-input" @click="selected = !selected" type="checkBox" name="contact" value="02">
+                <input class="checkbox-input" @click="toggleSelection" type="checkBox">
                 <span class="checkbox-decoration">
                     <svg viewBox="0 0 12 12" class="checkbox-decorationMedia">
                         <g fill="none">
@@ -18,7 +18,7 @@
                 <!-- {%include cards/card-dropdown.html%} -->
             </div>
             <div class="card-media">
-                <img :src=map.thumbnailUrl />
+                <img :src=mapThumbnailUrl />
             </div>
             <div class="card-text">
                 <h2 class="card-title">{{map.name}}</h2>
@@ -30,7 +30,7 @@
                     </li>
                     <li class="card-metadataItem">
                         <span class="icon"><img src="../assets/icons/maps/calendar.svg"></span>
-                        <p>{{map.updatedAt}}</p>
+                        <p>{{lastUpdated}}</p>
                     </li>
                     <li class="card-metadataItem">
                         <span class="icon"><img src="../assets/icons/maps/tag.svg"></span>
@@ -50,6 +50,8 @@
 </template>
 
 <script>
+import distanceInWordsStrict from 'date-fns/distance_in_words_strict';
+
 export default {
   name: 'CardMap',
   components: {
@@ -59,13 +61,22 @@ export default {
       selected: false
     };
   },
+  computed: {
+    lastUpdated: function () {
+      return `Updated ${distanceInWordsStrict(this.$props.map.updatedAt, new Date())} ago`;
+    },
+    mapThumbnailUrl: function () {
+      return this.$props.map.thumbnailUrl;
+    }
+  },
   methods: {
     toggleSelection () {
       this.selected = !this.selected;
     }
   },
   props: {
-    map: Object
+    map: Object,
+    size: String
   }
 };
 </script>

lib/assets/javascripts/new-dashboard/pages/Maps.vue

@@ -17,24 +17,22 @@ export default {
   computed: {
     test: () =>
       ({
-        size: 'large',
         thumbnailUrl: 'https://carto.com/help/images/building-maps/add-columns-from-second-dataset/join-columns.png',
         name: 'NYC Stores Sales Dashboard',
         description: 'Real-time comparison of Nordstrom stores sales numbers and more stuff related with business insights. Real-time comparison of Nordstrom stores sales numbers and more stuff related with business insights',
         privacy: 'Locked',
-        updatedAt: 'Updated yesterday',
+        updatedAt: new Date(2018, 9, 23),
         favorite: true,
         tagList: ['test', 'this is my test', 'first map', 'CARTO', 'Another tag to make a bit of space'],
         views: 23
       }),
     test2: () =>
       ({
-        size: 'small',
         thumbnailUrl: 'https://carto.com/help/images/building-maps/builder-viz-workshop/01-torque-04.png',
         name: 'Mi mapaza',
         description: 'This mapaza is just a test of a place holder 1, 2, 3 probando probando 1, 2',
         privacy: 'Locked',
-        updatedAt: 'Updated yesterday',
+        updatedAt: new Date(2018, 10, 23),
         favorite: true,
         tagList: [],
         views: 23

package.json

@@ -31,6 +31,7 @@
     "codemirror": "5.14.2",
     "d3-interpolate": "^1.1.6",
     "d3-queue": "^3.0.7",
+    "date-fns": "^1.29.0",
     "fastclick": "^1.0.6",
     "html-webpack-plugin": "^3.2.0",
     "internal-carto.js": "CartoDB/carto.js#v4.1.3",