format templates to follow Drupal practices

css/localgov-alert-banner.css

@@ -4,52 +4,74 @@
  */
 
 /* Default */
-.localgov_alert_banner {
+.localgov-alert-banner {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
   background-color: #00856A;
 }
-.localgov_alert_banner,
-.localgov_alert_banner a {
+.localgov-alert-banner,
+.localgov-alert-banner a {
   color: #fefefe;
 }
-.localgov_alert_banner button {
-  color: #121212;
+.localgov-alert-banner__close {
+  padding: .5rem .9375rem;
+  line-height: 1.5;
+  border: 1px solid #fff;
+  font-weight: 700;
+  text-align: center;
+  border-radius: 0;
+  color: #fff;
+  background-color: transparent;
+}
+
+.localgov-alert-banner--minor .localgov-alert-banner__close {
+  color: #0b0c0c;
+  border-color: #0b0c0c;
+}
+
+.localgov-alert-banner__close:focus,
+.localgov-alert-banner__close:hover {
+  text-decoration: underline;
+  background-color: #fff;
+  border-color: #fff;
+  color: #0b0c0c;
 }
 
 /* Announcement */
-.localgov_alert_banner--announcement {
+.localgov-alert-banner--announcement {
   background-color: #00856A;
 }
 
 /* Minor */
-.localgov_alert_banner--minor {
+.localgov-alert-banner--minor {
   background-color: #fc3;
   color: #121212;
 }
-.localgov_alert_banner--minor a {
+.localgov-alert-banner--minor a {
   color: #121212;
 }
 
 /* Major */
-.localgov_alert_banner--major {
+.localgov-alert-banner--major {
   background-color: #C00010;
 }
 
 /* Death of a notable person */
-.localgov_alert_banner--notable-person {
+.localgov-alert-banner--notable-person {
   background-color: #000;
 }
 
-.localgov_alert_banner .wrapper {
-  margin: 0 auto;
+.localgov-alert-banner__wrapper {
   max-width: 73.125rem;
+  margin: 0 auto;
 }
-.localgov_alert_banner--inner {
+.localgov-alert-banner__inner {
   display: flex;
   justify-content: space-between;
   margin: 0 0.9375rem;
   padding: 0.625rem 0;
 }
-.localgov_alert_banner--actions {
+.localgov-alert-banner__actions {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;

js/alert_banner.js

@@ -20,17 +20,17 @@
     var cookie = $.cookie('hide-alert-banner-token');
     var cookie_tokens = typeof cookie !== 'undefined' ? cookie.split('+') : [];
 
-    $('.js-alert-banner').each(function() {
+    $('.js-localgov-alert-banner').each(function() {
       $(this).removeClass('hidden');
       var token = $(this).data('dismiss-alert-token');
       if ($.inArray(token, cookie_tokens) > -1) {
         $(this).hide();
       }
     });
 
-    $('.js-alert-banner-close').click(function(e) {
+    $('.js-localgov-alert-banner__close').click(function(e) {
       e.preventDefault();
-      var banner = $(this).closest('.js-alert-banner');
+      var banner = $(this).closest('.js-localgov-alert-banner');
       banner.attr("aria-hidden", "true").slideUp('fast');
       setAlertBannerHideCookie(cookie_tokens, banner.data('dismiss-alert-token'));
     });

localgov_alert_banner.module

@@ -73,7 +73,7 @@ function localgov_alert_banner_theme() {
   $theme['localgov_alert_banner'] = [
     'render element' => 'elements',
     'file' => 'localgov_alert_banner.page.inc',
-    'template' => 'localgov_alert_banner',
+    'template' => 'localgov-alert-banner',
   ];
   $theme['localgov_alert_banner_content_add_list'] = [
     'render element' => 'content',

templates/localgov-alert-banner.html.twig

@@ -0,0 +1,68 @@
+{#
+/**
+ * @file localgov_alert_banner.html.twig
+ * Default theme implementation to present Alert banner data.
+ *
+ * This template is used when viewing Alert banner pages.
+ *
+ *
+ * Available variables:
+ * - content: A list of content items. Use 'content' to print all content, or
+ * - attributes: HTML attributes for the container element.
+ * - display_title: Boolean indicating if alert banner title should be displayed
+ * - remove_hide_link: Boolean indicating if the link to close the banner should be hidden
+ * - type_of_alert: Type of alert banner
+ *
+ * @see template_preprocess_localgov_alert_banner()
+ *
+ * @ingroup themeable
+ */
+#}
+
+{{ attach_library('localgov_alert_banner/alert_banner') }}
+
+{% set has_link = content.link.0 is not empty %}
+{% set type_of_alert =  type_of_alert|split('--')[1]|clean_class %}
+{% set classes = [
+    'js-localgov-alert-banner',
+    'localgov-alert-banner',
+    type_of_alert ? 'localgov-alert-banner--' ~ type_of_alert,
+    is_front ? 'localgov-alert-banner--homepage',
+    has_link ? 'localgov-alert-banner--has-link' : 'localgov-alert-banner--no-link'
+  ]
+%}
+
+<article {{ attributes.addClass(classes) }} role="alert">
+  {# Begin Wrapper #}
+  <div class="localgov-alert-banner__wrapper">
+    {# Begin Inner #}
+    <div class="localgov-alert-banner__inner">
+      {# Begin Content #}
+      <div class="localgov-alert-banner__content">
+        {% if display_title %}
+          <h2 class="localgov-alert-banner__title">
+            {{ content.title }}
+          </h2>
+        {% endif %}
+
+        {% if content.short_description.0['#text'] %}
+          <div class="localgov-alert-banner__body">
+            {{ content.short_description }}
+          </div>
+        {% endif %}
+
+        {% if has_link %}
+          <div class="localgov-alert-banner--content-link">{{ content.link }}</div>
+        {% endif %}
+      </div> {# End Content #}
+
+      {% if not remove_hide_link %}
+        <div class="localgov-alert-banner__actions">
+          <div class="localgov-alert-banner__dismiss">
+            <button class="localgov-alert-banner__close js-localgov-alert-banner__close" aria-label="{{ 'Hide alert'|t }}">{{ 'Hide'|t }}</button>
+          </div>
+        </div>
+      {% endif %}
+    </div> {# End Inner #}
+  </div> {# End Wrapper #}
+</article>