feat: create studio features announcement bar

cms/static/sass/_build-v1.scss

@@ -55,6 +55,7 @@
 @import 'elements/uploaded-assets'; // layout for asset tables
 @import 'elements/creative-commons';
 @import 'elements/tooltip';
+@import 'elements/feature-anouncement';
 
 // +Base - Specific Views
 // ====================

cms/static/sass/elements/_feature-anouncement.scss

@@ -0,0 +1,43 @@
+// studio - elements - announcement bar
+// ====================================
+
+.announcement-bar {
+    position: relative;
+    background: #03c7e8;
+    text-align: center;
+    color: $black;
+    padding: ($baseline*0.3) ($baseline*2.2);
+    font: 500 1.4rem/2rem $font-family-sans-serif;
+}
+
+.announcement-bar-link {
+    color: inherit;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus {
+        color: inherit;
+        text-decoration: none;
+    }
+}
+
+.announcement-bar-icon {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.announcement-bar-close {
+    @include right(0);
+
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: transparent url('#{$static-path}/images/close-icon.svg') center;
+    width: ($baseline*1.2);
+    height: ($baseline*1.2);
+    border: none;
+
+    &:hover {
+        opacity: 0.7;
+    }
+}

cms/templates/base.html

@@ -103,6 +103,8 @@
       <% online_help_token = self.online_help_token() if hasattr(self, 'online_help_token') else None %>
       <%include file="widgets/header.html" args="online_help_token=online_help_token" />
 
+      <%include file="widgets/feature-announcement.html" />
+
       <%
       banner_messages = list(PageLevelMessages.user_messages(request))
       %>

cms/templates/widgets/feature-announcement.html

@@ -0,0 +1,44 @@
+<!-- Feature Announcement bar -->
+<%page args="course=None" expression_filter="h" />
+<%namespace name='static' file='../static_content.html'/>
+<%! from django.utils.translation import gettext as _ %>
+
+<div class="announcement-bar is-hidden">
+    <div class="announcement-bar-content">
+        ${_("We’ve updated the library authoring experience with a fresh new look!")}
+        <a href="https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/course_components/libraries.html"
+           class="announcement-bar-link"
+           target="_blank">${_("Learn more")}</a>
+        <img class="announcement-bar-icon" src="${static.url('images/external-link-icon.svg')}" alt="${_('External link icon')}">
+    </div>
+    <button type="button" class="announcement-bar-close">
+        <span class="sr-only">${_("Close")}</span>
+    </button>
+</div>
+
+<script>
+    var $announcementBar = $('.announcement-bar');
+    var onLearnMoreAnalyticEvent = 'Learn more about the Studio announcement bar';
+    var onCloseAnalyticEvent = 'Close the Studio announcement bar';
+
+    $.cookie('openedx-studio-announcement')
+        ? $announcementBar.remove()
+        : $announcementBar.removeClass('is-hidden');
+
+    function closeBarAndFireAnalyticsEvent(message) {
+        $announcementBar.hide();
+        $.cookie('openedx-studio-announcement', 'false');
+
+        % if settings.CMS_SEGMENT_KEY:
+            window.analytics.track(message);
+        % endif
+    }
+
+    $('.announcement-bar-link').on('click', function () {
+        closeBarAndFireAnalyticsEvent(onLearnMoreAnalyticEvent);
+    });
+
+    $('.announcement-bar-close').on('click', function () {
+        closeBarAndFireAnalyticsEvent(onCloseAnalyticEvent);
+    });
+</script>