Merge branch 'oja-sfl-survey'

guardian · Jul 3, 2015 · 4895a1a · 4895a1a
2 parents e660e1b + a1c7f34
commit 4895a1a
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 0 deletions.
diff --git a/static/src/javascripts/projects/common/modules/experiments/tests/save-for-later.js b/static/src/javascripts/projects/common/modules/experiments/tests/save-for-later.js
@@ -6,6 +6,7 @@ define([
     'common/utils/config',
     'common/utils/mediator',
     'common/utils/template',
+    'common/modules/ui/message',
     'common/modules/identity/api',
     'common/modules/save-for-later',
     'Promise'
@@ -17,6 +18,7 @@ define([
     config,
     mediator,
     template,
+    Message,
     Id,
     SaveForLater,
     Promise
@@ -43,6 +45,37 @@ define([
         var init = function () {
             var saveForLater = new SaveForLater();
             saveForLater.init();
+
+            var templateStr =
+                '<div class="site-message__message" id="site-message__message">' +
+                    '<%=messageTextHeader%>' +
+                    '<p class="site-message__description"><%=messageText%></p>' +
+                '</div>' +
+                '<ul class="site-message__actions u-unstyled">' +
+                    '<li class="site-message__actions__item">' +
+                        '<i class="i i-arrow-white-right"></i>' +
+                        '<a href="<%=panelLink%>" target="_blank" data-link-name="read more"><%=linkText%></a>' +
+                    '</li>' +
+                '</ul>';
+
+            var panelLinks = {
+                mobile: 'https://s.userzoom.com/m/MSBDMTBTMjI5',
+                tablet: 'https://s.userzoom.com/m/MSBDMTBTMjI5',
+                desktop: 'https://s.userzoom.com/m/MSBDMTBTMjI5',
+                wide: 'https://s.userzoom.com/m/MSBDMTBTMjI5'
+            };
+
+            new Message('save-for-later', {
+                pinOnHide: false
+            }).show(template(
+                templateStr,
+                {
+                    panelLink: panelLinks[detect.getBreakpoint()],
+                    messageTextHeader: 'Tell us about your experience using the Guardian site',
+                    messageText: 'Complete a quick survey (10 min) and get involved in the development of the site.',
+                    linkText: 'Open survey'
+                }
+            ));
         };
 
         this.variants = [

diff --git a/static/src/stylesheets/facia.scss b/static/src/stylesheets/facia.scss
@@ -28,3 +28,6 @@
 @import 'module/business/_stocks';
 @import 'module/live-pulse';
 @import 'module/facia/snaps/_facia';
+// This icon currently lives in global (aka "global - facia"). Add it to facia
+// for the test
+@import 'module/save-for-later-test'
diff --git a/static/src/stylesheets/module/_release-message.scss b/static/src/stylesheets/module/_release-message.scss
@@ -101,6 +101,20 @@
     @include mq(wide) {
         max-width: none;
     }
+
+    .site-message--save-for-later & {
+        font-weight: bold;
+        padding-top: 10px;
+
+        @include mq(mobile) {
+            padding-left: 14px;
+        }
+    }
+}
+
+.site-message__description {
+    font-size: 14px;
+    font-weight: normal;
 }
 
 .site-message__message--tall {
@@ -117,6 +131,12 @@
         vertical-align: middle;
         margin-top: 0;
     }
+
+    .site-message--save-for-later & {
+        @include mq(mobile) {
+            padding-left: 14px;
+        }
+    }
 }
 
 $btn-height: gs-height(1) - $gs-baseline/2; //30px

diff --git a/static/src/stylesheets/module/_save-for-later-test.scss b/static/src/stylesheets/module/_save-for-later-test.scss
@@ -0,0 +1,10 @@
+@if ($svg-support) {
+    %svg-i-arrow-white-right,
+    .svg-i-arrow-white-right {
+        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIyLjggMTQuNkwxNS4yIDdsLS43LjcgNS41IDYuNkg2djEuNWgxNGwtNS41IDYuNi43LjcgNy42LTcuNnYtLjkiLz48L3N2Zz4=);
+        background-position: 0 0;
+    }
+    .svg .i-arrow-white-right {
+        @extend %svg-i-arrow-white-right !optional;
+    }
+}