Merge branch 'slack_landing_page-ce-backport' into 'master'

app/assets/javascripts/lib/utils/url_utility.js

@@ -100,6 +100,10 @@ export function visitUrl(url, external = false) {
   }
 }
 
+export function redirectTo(url) {
+  return window.location.assign(url);
+}
+
 window.gl = window.gl || {};
 window.gl.utils = {
   ...(window.gl.utils || {}),

app/assets/stylesheets/framework.scss

@@ -34,6 +34,7 @@
 @import "framework/modal";
 @import "framework/pagination";
 @import "framework/panels";
+@import "framework/popup";
 @import "framework/secondary-navigation-elements";
 @import "framework/selects";
 @import "framework/sidebar";

app/assets/stylesheets/framework/mixins.scss

@@ -180,3 +180,31 @@
     display: none;
   }
 }
+
+@mixin triangle($color, $border-color, $size, $border-size) {
+  &::before,
+  &::after {
+    bottom: 100%;
+    left: 50%;
+    border: solid transparent;
+    content: '';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  &::before {
+    border-color: transparent;
+    border-bottom-color: $border-color;
+    border-width: ($size + $border-size);
+    margin-left: -($size + $border-size);
+  }
+
+  &::after {
+    border-color: transparent;
+    border-bottom-color: $color;
+    border-width: $size;
+    margin-left: -$size;
+  }
+}

app/assets/stylesheets/framework/popup.scss

+.popup {
+  @include triangle(
+    $gray-lighter,
+    $gray-darker,
+    $popup-triangle-size,
+    $popup-triangle-border-size
+  );
+
+  padding: $gl-padding;
+  background-color: $gray-lighter;
+  border: 1px solid $gray-darker;
+  border-radius: $border-radius-default;
+  box-shadow: 0 5px 8px $popup-box-shadow-color;
+  position: relative;
+}

app/assets/stylesheets/framework/variables.scss

@@ -719,3 +719,10 @@ Image Commenting cursor
 */
 $image-comment-cursor-left-offset: 12;
 $image-comment-cursor-top-offset: 30;
+
+/*
+Popup
+*/
+$popup-triangle-size: 15px;
+$popup-triangle-border-size: 1px;
+$popup-box-shadow-color: rgba(90, 90, 90, 0.05);