From 4be2b42fe1d2b29116629c9104047de513820dc3 Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 12 Feb 2021 17:14:00 +0100
Subject: [PATCH] create a new directive: question mark with tooltip

 - Display a rounded blue question mark icon
 - Show (hide) on click a blue tooltip on top of the question mark icon
---
 .../question_mark_tooltip.js.coffee           | 17 +++++++++++
 .../question_mark_with_tooltip.html.haml      |  8 +++++
 .../question_mark_with_tooltip_icon.html.haml |  1 +
 .../stylesheets/darkswarm/branding.scss       |  1 +
 .../darkswarm/question-mark-icon.scss         | 30 ++++++++++++++++++-
 .../stylesheets/darkswarm/variables.scss      |  2 ++
 6 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/darkswarm/directives/question_mark_tooltip.js.coffee
 create mode 100644 app/assets/javascripts/templates/question_mark_with_tooltip.html.haml
 create mode 100644 app/assets/javascripts/templates/question_mark_with_tooltip_icon.html.haml

diff --git a/app/assets/javascripts/darkswarm/directives/question_mark_tooltip.js.coffee b/app/assets/javascripts/darkswarm/directives/question_mark_tooltip.js.coffee
new file mode 100644
index 0000000000..b1693369af
--- /dev/null
+++ b/app/assets/javascripts/darkswarm/directives/question_mark_tooltip.js.coffee
@@ -0,0 +1,17 @@
+Darkswarm.directive "questionMarkWithTooltip", ($tooltip)->
+  # We use the $tooltip service from Angular foundation to give us boilerplate
+  # Subsequently we patch the scope, template and restrictions
+  tooltip = $tooltip 'questionMarkWithTooltip', 'questionMarkWithTooltip', 'click'
+  tooltip.scope =
+    variant: "="
+  tooltip.templateUrl = "question_mark_with_tooltip_icon.html"
+  tooltip.replace = true
+  tooltip.restrict = 'E'
+  tooltip
+
+# This is automatically referenced via naming convention in $tooltip
+Darkswarm.directive 'questionMarkWithTooltipPopup', ->
+  restrict: 'EA'
+  replace: true
+  templateUrl: 'question_mark_with_tooltip.html'
+  scope: false
diff --git a/app/assets/javascripts/templates/question_mark_with_tooltip.html.haml b/app/assets/javascripts/templates/question_mark_with_tooltip.html.haml
new file mode 100644
index 0000000000..b3892d436b
--- /dev/null
+++ b/app/assets/javascripts/templates/question_mark_with_tooltip.html.haml
@@ -0,0 +1,8 @@
+.joyride-tip-guide.question-mark-tooltip{ng: {class: "{ in: tt_isOpen, fade: tt_animation }", show: "tt_isOpen"}}
+  .background{ng: {click: "tt_isOpen = false"}}
+  .joyride-content-wrapper
+    This is the unit price of this item. 
+    %br/
+    It allows you to compare the price of products across varying sizes and weights.
+  %span.joyride-nub.bottom
+  
\ No newline at end of file
diff --git a/app/assets/javascripts/templates/question_mark_with_tooltip_icon.html.haml b/app/assets/javascripts/templates/question_mark_with_tooltip_icon.html.haml
new file mode 100644
index 0000000000..18ea4c771d
--- /dev/null
+++ b/app/assets/javascripts/templates/question_mark_with_tooltip_icon.html.haml
@@ -0,0 +1 @@
+%button.question-mark-icon{"ng-class" => "{open: tt_isOpen}", type: 'button'}
diff --git a/app/assets/stylesheets/darkswarm/branding.scss b/app/assets/stylesheets/darkswarm/branding.scss
index 29b52436d8..1ca4224cee 100644
--- a/app/assets/stylesheets/darkswarm/branding.scss
+++ b/app/assets/stylesheets/darkswarm/branding.scss
@@ -56,6 +56,7 @@ $grey-700: #555;
 $grey-800: #333;
 
 $tiny-blue: #80b2e1;
+$dynamic-blue: #3d8dd1;
 
 $teal-300: #80d3df;
 $teal-400: #4cb5c5;
diff --git a/app/assets/stylesheets/darkswarm/question-mark-icon.scss b/app/assets/stylesheets/darkswarm/question-mark-icon.scss
index e7028a3430..5a04ebbb3f 100644
--- a/app/assets/stylesheets/darkswarm/question-mark-icon.scss
+++ b/app/assets/stylesheets/darkswarm/question-mark-icon.scss
@@ -15,4 +15,32 @@
     font-weight: bold;
     font-size: 1rem;
   }
-}
\ No newline at end of file
+}
+
+.joyride-tip-guide.question-mark-tooltip {
+  width: 16rem;
+  max-width: 65%;
+  // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
+  margin-left: -7.4rem;
+  margin-top: 0.1rem;
+  background-color: transparent;
+
+  .joyride-content-wrapper {
+    background-color: $dynamic-blue;
+    padding: $padding-small;
+    border-radius: $radius-small;
+    color: $white;
+    width: 100%;
+    font-size: 0.8rem;
+  }
+
+  .joyride-nub.bottom {
+    // Need to rewrite all with !important as it's marked as !important in the original file
+    border-color: $dynamic-blue !important;
+    border-bottom-color: transparent !important;
+    border-left-color: transparent !important;
+    border-right-color: transparent !important;
+    left: 7.4rem;
+    z-index: -1;
+  }
+}
diff --git a/app/assets/stylesheets/darkswarm/variables.scss b/app/assets/stylesheets/darkswarm/variables.scss
index 08930efd76..b5039804e1 100644
--- a/app/assets/stylesheets/darkswarm/variables.scss
+++ b/app/assets/stylesheets/darkswarm/variables.scss
@@ -43,3 +43,5 @@ $radius-medium: 0.5em;
 
 $shop-sidebar-overlay: rgba(0, 0, 0, 0.5);
 $transition-sidebar: 250ms ease-in-out 0s;
+
+$padding-small: 0.5rem;