Merge pull request #4759 from freelawproject/4750-feat-add-banner-for…

…-givingtuesday

feat(assets): Adds GivingTuesday banner

cl/assets/templates/base.html

@@ -84,7 +84,7 @@ <h1>You did not supply the "private" variable to your template.
   <header class="row">
     <!-- Donate Banner -->
     {% if FUNDRAISING_MODE %}
-      {% include 'includes/dismissible_nav_banner.html' with link="https://free.law/2024/01/18/new-recap-archive-search-is-live" text="A year in the making, today we are launching a huge new search engine for the RECAP Archive" emoji="&#127873;" cookie_name="no_banner"%}
+      {% include 'includes/dismissible_nav_banner.html' with link="https://donate.free.law/forms/givingtuesday" text="<strong>Today is GivingTuesday.</strong> Your support of Free Law Project helps make the justice system more transparent and accessible to all." cookie_name="giving_tuesday" button_text="Donate Today!"%}
     {% endif %}
 
     <!-- Broken Email Banner -->

cl/assets/templates/includes/dismissible_nav_banner.html

@@ -3,12 +3,16 @@
   available and takes up to four keyword arguments described below:
 
   Parameters:
-    link: The URL for the "Learn More" button.
-    text: Text of the banner.
-    cookie_name: Name of the cookie used to remember if the user has already dismissed
-    the banner. This prevents them from seeing the same message repeatedly.
-    emoji: Insert an emoji next to your banner message using its decimal HTML entity
-    code (like 👍).
+    - text: Text of the banner.
+    - link: The URL for the button.
+    - cookie_name: Name of the cookie used to remember if the user has already
+    dismissed the banner. This prevents them from seeing the same message
+    repeatedly.
+    - button_text (optional): Text for the button. Defaults to "Learn More".
+    - button_emoji (optional): An Idiomatic Text element (<i></i>) to display
+    inside the button.
+    - emoji (optional): An HTML entity code (e.g., &#128077;) to insert an
+    emoji next to the banner message.
 
   It's advisable to wrap this template within an if tag and use the parent element to add
   extra conditions to handle the visibility of the banner. The current template only checks
@@ -36,14 +40,14 @@
       </div>
     </div>
     <div class="row flex flex-column flex-sm-row align-items-center justify-content-between">
-      <div class="col-xs-12 col-sm-9 navbar-text lead">
+      <div class="col-xs-12 col-sm-10 navbar-text lead">
         <p>{% if emoji %}{{emoji}}{% endif %} {{text}}</p>
       </div>
-      <div class="col-xs-3 flex justify-content-center justify-content-sm-end">
+      <div class="col-xs-2 flex justify-content-center justify-content-sm-end">
         <a href="{{link}}"
-            class="btn btn-primary btn-lg hidden-xs"><i class="fa fa-search"></i>&nbsp;Learn More</a>
+            class="btn btn-primary btn-lg hidden-xs">{% if button_emoji %}{{button_emoji}}{% endif %}&nbsp;{% if button_text %}{{button_text}}{% else %}Learn More{% endif %}</a>
         <a href="{{link}}"
-            class="btn btn-primary btn-sm hidden-sm hidden-md hidden-lg"><i class="fa fa-search"></i>&nbsp;Learn More</a>
+            class="btn btn-primary btn-sm hidden-sm hidden-md hidden-lg">{% if button_emoji %}{{button_emoji}}{% endif %}&nbsp;{% if button_text %}{{button_text}}{% else %}Learn More{% endif %}</a>
       </div>
     </div>
   </div>