Merge pull request #850 from cfpb/update-sidebar-alert

Add update-in-progress alert to sidebar of all regulation pages

regulations/static/regulations/css/less/module/sidebar.less

@@ -434,6 +434,26 @@ Styles for the UI help slide down
     border-top: 1px solid @gray-40;
 }
 
+/*
+Sidebar alert
+===============
+The alert that appears in the sidebar of any reg we're working on updating
+*/
+
+.sidebar-inner {
+    .alert {
+        border-top: none;
+        border-right: none;
+        border-bottom: 1px solid @gray-20;
+        border-left: none;
+    }
+
+    .effective-alert {
+        padding-left: 12px;
+        padding-right: 25px;
+    }
+}
+
 /*
 Small screens
 ---------------
@@ -478,6 +498,13 @@ Small screens
         border-top: 1px solid @neutral-40;
     }
 
+    .sidebar-inner {
+        .alert {
+            border-top: 1px solid @gray-20;
+            border-bottom: none;
+        }
+    }
+
     /*
     Definitions
     ------------
@@ -531,6 +558,14 @@ Small screens
             }
         }
     }
+
+    /* Match sidebar alert margins to the expandables */
+    .sidebar-inner {
+        .effective-alert {
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+    }
 }
 
 @media only screen and ( max-width: 1100px ) {

regulations/static/regulations/css/less/module/sxs.less

@@ -165,6 +165,14 @@ Metadata info for the SxS Analysis
         font-size: 14px;
         text-transform: none;
     }
+
+    .alert {
+        margin-top: 14px;
+
+        & + h3 {
+            margin-top: 30px;
+        }
+    }
 }
 
 .further-analysis {

regulations/static/regulations/js/source/views/sidebar/alert-view.js

@@ -0,0 +1,11 @@
+'use strict';
+var $ = require( 'jquery' );
+var _ = require( 'underscore' );
+var Backbone = require( 'backbone' );
+Backbone.$ = $;
+
+var AlertView = Backbone.View.extend( {
+  el: '#update-alert'
+} );
+
+module.exports = AlertView;

regulations/static/regulations/js/source/views/sidebar/sidebar-view.js

@@ -5,6 +5,7 @@ var Backbone = require( 'backbone' );
 var RegModel = require( '../../models/reg-model' );
 var SxSList = require( './sxs-list-view' );
 var HelpView = require( './help-view' );
+var AlertView = require( './alert-view' );
 var SidebarModel = require( '../../models/sidebar-model' );
 var DefinitionModel = require( '../../models/definition-model' );
 var Breakaway = require( '../breakaway/breakaway-view' );
@@ -115,6 +116,7 @@ var SidebarView = Backbone.View.extend( {
     // new views to bind to new html
     this.childViews.sxs = new SxSList();
     this.childViews.help = new HelpView();
+    this.childViews.alert = new AlertView();
 
     this.loaded();
   },
@@ -124,6 +126,10 @@ var SidebarView = Backbone.View.extend( {
   },
 
   createPlaceholders: function() {
+    if ( this.$el.find( '#update-alert' ).length === 0 ) {
+      this.$el.append( '<section id="update-alert" class="regs-meta"></section>' );
+    }
+
     if ( this.$el.find( '#sxs-list' ).length === 0 ) {
       this.$el.append( '<section id="sxs-list" class="regs-meta"></section>' );
     }

regulations/static/regulations/js/unittests/specs/views/sidebar/alert-view-spec.js

@@ -0,0 +1,22 @@
+require('../../../setup');
+var sinon = require( 'sinon' );
+
+describe('Alert View:', function() {
+
+  var view, definition, $, AlertView;
+
+  before(function() {
+    $ = require('jquery');
+    AlertView = require('../../../../source/views/sidebar/alert-view');
+  });
+
+  beforeEach(function(){
+    // create a new instance of the view
+    view = new AlertView();
+  });
+
+  it('should construct a view', function() {
+    expect(view).to.be.defined;
+  });
+
+});

regulations/templates/regulations/chrome-empty-sidebar.html

@@ -1,14 +1,24 @@
 {% extends "regulations/chrome.html" %}
 {% load static from staticfiles %}
+{% load reg_updates %}
 
 {% comment %}
 Search results (and perhaps other pages) need a sidebar containing only help text
 {% endcomment %}
 
 {% block reg_sidebar %}
 
+{% update_in_progress label_id as reg_update_in_progress %}
+{% if reg_update_in_progress %}
+<section id="update-alert" class="regs-meta">
+    <div class="alert effective-alert group">
+        {% include "regulations/update-alert.html" %}
+    </div>
+</section>
+{% endif %}
+
 <section id="help" class="regs-meta">
-    {% include "regulations/generic_help.html" %} 
+    {% include "regulations/generic_help.html" %}
 
         {% comment %}
         The help-subsection block is used to offer contextual content in different

regulations/templates/regulations/generic_landing.html

@@ -6,7 +6,7 @@
             {% block reg_title %}
             {% endblock %}
 
-            {% update_in_progress reg_part as reg_update_in_progress %}
+            {% update_in_progress label_id as reg_update_in_progress %}
             {% if new_version or reg_update_in_progress %}
                 <div class="alert effective-alert group">
                     {% if new_version %}
@@ -22,14 +22,7 @@
                         </div>
                     {% endif %}
                     {% if reg_update_in_progress %}
-                        <div class="alert_section group">
-                            <strong>
-                                We’re working on incorporating amendments to this regulation.
-                            </strong>
-                            In the meantime, please review
-                            <a href="https://www.consumerfinance.gov/policy-compliance/rulemaking/final-rules/" class="standard">
-                                CFPB rules recently published in the Federal Register</a>.
-                        </div>
+                        {% include "regulations/update-alert.html" %}
                     {% endif %}
                 </div><!--/.alert-->
             {% endif %}

regulations/templates/regulations/paragraph-sxs.html

@@ -1,3 +1,5 @@
+{% load reg_updates %}
+
 {% if sxs.label %}
     <div class="sxs-header">
         <a class="sxs-back-button" href="{{ back_url }}"><span class="cf-icon cf-icon-arrow-left-round"></span> {{sxs.header}}</a>
@@ -42,6 +44,13 @@ <h4 class="footnote-title">Footnotes</h4>
 {% if sxs.label %}
 <div id="metadata-{{sxs.label}}" class="sxs-metadata">
 
+    {% update_in_progress label_id as reg_update_in_progress %}
+    {% if reg_update_in_progress %}
+    <div class="alert effective-alert group">
+        {% include "regulations/update-alert.html" %}
+    </div>
+    {% endif %}
+
     <h3>ANALYSIS TAKEN FROM:</h3>
 
         <h4>Document Number:</h4>

regulations/templates/regulations/sidebar.html

@@ -1,4 +1,14 @@
 {% load static from staticfiles %}
+{% load reg_updates %}
+
+{% update_in_progress label_id as reg_update_in_progress %}
+{% if reg_update_in_progress %}
+<section id="update-alert" class="regs-meta">
+    <div class="alert effective-alert group">
+        {% include "regulations/update-alert.html" %}
+    </div>
+</section>
+{% endif %}
 
 <section id="sxs-list" class="regs-meta">
     <header id="sxs-expandable-header" class="expandable sxs-expand group" data-expandable="sxs-expandable">

regulations/templates/regulations/update-alert.html

@@ -0,0 +1,12 @@
+{% comment %}
+    The alert displayed on all pages of a regulation while updates are in progress.
+{% endcomment %}
+
+<div class="alert_section group">
+    <strong>
+        We’re working on incorporating amendments to this regulation.
+    </strong>
+    In the meantime, please review
+    <a href="https://www.consumerfinance.gov/policy-compliance/rulemaking/final-rules/" class="standard">
+        CFPB rules recently published in the Federal Register</a>.
+</div>

regulations/templatetags/reg_updates.py

@@ -6,7 +6,7 @@
 
 
 @register.assignment_tag
-def update_in_progress(reg_part):
+def update_in_progress(label_id):
     """Given a regulation, is there an update currently in progress?
 
     This template tag checks for a list in the Django setting
@@ -15,10 +15,11 @@ def update_in_progress(reg_part):
 
     Use it in a template like:
 
-        {% update_in_progress reg_part as reg_update_in_progress %}
+        {% update_in_progress label_id as reg_update_in_progress %}
         {% if reg_update_in_progress %}
         <p>An update is in progress to this regulation.</p>
         {% endif %}
     """
     regulation_updates = getattr(settings, 'EREGS_REGULATION_UPDATES', [])
+    reg_part = label_id.split('-')[0]
     return reg_part in regulation_updates

regulations/tests/templatetags_reg_updates_tests.py

@@ -4,24 +4,24 @@
 
 
 class RegUpdatesTemplateTagsTestCase(SimpleTestCase):
-    def render(self, reg_part):
+    def render(self, label_id):
         template = Template(
             "{% load reg_updates %}"
-            "{% update_in_progress reg_part as reg_update %}"
+            "{% update_in_progress label_id as reg_update %}"
             "{{ reg_update }}"
         )
-        context = Context({'reg_part': reg_part})
+        context = Context({'label_id': label_id})
         return template.render(context)
 
     @override_settings()
     def test_no_setting_reg_not_being_updated_returns_false(self):
         del settings.EREGS_REGULATION_UPDATES
-        self.assertEqual(self.render('1099'), 'False')
+        self.assertEqual(self.render('1099-1'), 'False')
 
     @override_settings(EREGS_REGULATION_UPDATES=['1098', '1099'])
     def test_setting_includes_reg_returns_true(self):
-        self.assertEqual(self.render('1099'), 'True')
+        self.assertEqual(self.render('1099-1'), 'True')
 
     @override_settings(EREGS_REGULATION_UPDATES=['1001', '1002'])
     def test_setting_doesnt_include_reg_returns_false(self):
-        self.assertEqual(self.render('1099'), 'False')
+        self.assertEqual(self.render('1099-1'), 'False')