From f19c19ec8297ddaa1125c14b504202ba2192ddb0 Mon Sep 17 00:00:00 2001
From: csubira <cillas@cartodb.com>
Date: Wed, 9 Oct 2019 18:31:31 +0200
Subject: [PATCH] Add close button to free embed banner

---
 .../stylesheets/deep-insights/map/_embed.scss | 50 ++++++++++++++++---
 .../builder/embed/embed-banner-view.js        |  8 +++
 .../builder/embed/embed-banner.tpl            |  9 ++--
 3 files changed, 56 insertions(+), 11 deletions(-)

diff --git a/assets/stylesheets/deep-insights/map/_embed.scss b/assets/stylesheets/deep-insights/map/_embed.scss
index 9ea233eca2..eadb096eee 100644
--- a/assets/stylesheets/deep-insights/map/_embed.scss
+++ b/assets/stylesheets/deep-insights/map/_embed.scss
@@ -313,16 +313,9 @@ $cEmbedTabs-Shadow: rgba(0, 0, 0, 0.24);
 
 .CDB-Embed-banner {
   position: absolute;
-  z-index: 10;
+  z-index: 2;
   right: 24px;
   bottom: 24px;
-  box-sizing: border-box;
-  width: 140px;
-  height: auto;
-  padding: 16px 20px 12px;
-  border-radius: 4px;
-  background: white;
-  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.16);
 
   @media (max-width: $sMedia-xl) {
     bottom: 54px;
@@ -334,9 +327,50 @@ $cEmbedTabs-Shadow: rgba(0, 0, 0, 0.24);
 
   &--inner {
     display: flex;
+    position: relative;
+    box-sizing: border-box;
     flex-direction: column;
     align-items: center;
     justify-content: center;
+    width: 140px;
+    height: auto;
+    padding: 16px 20px 12px;
+    border-radius: 4px;
+    background: white;
+    box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.16);
+  }
+
+  &__close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 20px;
+    height: 20px;
+    opacity: 0.3;
+    cursor: pointer;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &::before,
+    &::after {
+      content: ' ';
+      position: absolute;
+      top: 8px;
+      right: 12px;
+      width: 1px;
+      height: 10px;
+      background-color: #162945;
+    }
+
+    &::before {
+      transform: rotate(45deg);
+    }
+
+    &::after {
+      transform: rotate(-45deg);
+    }
   }
 
   &__title {
diff --git a/lib/assets/javascripts/builder/embed/embed-banner-view.js b/lib/assets/javascripts/builder/embed/embed-banner-view.js
index 0d76d9c49f..d3956f39b8 100644
--- a/lib/assets/javascripts/builder/embed/embed-banner-view.js
+++ b/lib/assets/javascripts/builder/embed/embed-banner-view.js
@@ -8,6 +8,10 @@ var EmbedBannerView = CoreView.extend({
 
   className: 'CDB-Embed-banner--inner',
 
+  events: {
+    'click .js-close': '_close'
+  },
+
   initialize: function () {
     this.template = template;
 
@@ -32,6 +36,10 @@ var EmbedBannerView = CoreView.extend({
     '?utm_source=' + this._getEmbedUrl() +
     '&utm_medium=referral' +
     '&utm_campaing=Free_Public_Map_Banner';
+  },
+
+  _close: function () {
+    this.hide();
   }
 });
 
diff --git a/lib/assets/javascripts/builder/embed/embed-banner.tpl b/lib/assets/javascripts/builder/embed/embed-banner.tpl
index 8211575c65..ef60ae8aa9 100644
--- a/lib/assets/javascripts/builder/embed/embed-banner.tpl
+++ b/lib/assets/javascripts/builder/embed/embed-banner.tpl
@@ -1,3 +1,6 @@
-<p class="CDB-Embed-banner__title">Want to create maps like this?</p>
-<a class="CDB-Embed-banner__button" href="<%= startNowUrl %>" target="_blank"><span>Start now</span></a>
-<a class="CDB-Embed-banner__link" href="<%= removeBannerUrl %>" target="_blank">Remove this banner</a>
+<div <div class="CDB-Embed-banner__inner">
+  <div class="CDB-Embed-banner__close js-close"></div>
+  <p class="CDB-Embed-banner__title">Want to create maps like this?</p>
+  <a class="CDB-Embed-banner__button" href="<%= startNowUrl %>" target="_blank"><span>Start now</span></a>
+  <a class="CDB-Embed-banner__link" href="<%= removeBannerUrl %>" target="_blank">Remove this banner</a>
+</div>
\ No newline at end of file