From 3364423698851f6466bae7fe9bc6a2ae1007daae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sen=C3=A9n=20Rodero=20Rodr=C3=ADguez?=
 <senenrodero@gmail.com>
Date: Tue, 24 Nov 2020 18:05:44 +0100
Subject: [PATCH] Update SDG header component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add a header element as component markup wrapper
* Allow component to receive an optional block
* Add reusable styles for header links

Co-autored-by: Javi Martín <javim@elretirao.net>
---
 app/assets/stylesheets/admin.scss       | 10 ++++++++++
 app/assets/stylesheets/mixins.scss      | 11 +++++++++++
 app/components/sdg_management/header.rb | 10 ++++++++--
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index e6bab74a3..cd79a951b 100644
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -614,6 +614,16 @@ code {
   }
 }
 
+.admin-content > header {
+  align-items: flex-start;
+  display: flex;
+
+  a {
+    @include hollow-button;
+    margin-left: auto;
+  }
+}
+
 .admin-content .select-geozone,
 .admin-content .select-heading {
 
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 060e31d83..875a1b913 100644
--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -198,3 +198,14 @@
     transform: translateX(-50%);
   }
 }
+
+@mixin hollow-button($color: $link) {
+  @include button($style: hollow, $background: $color);
+  font-size: $base-font-size;
+  margin-bottom: 0;
+
+  &:focus,
+  &:hover {
+    text-decoration: none;
+  }
+}
diff --git a/app/components/sdg_management/header.rb b/app/components/sdg_management/header.rb
index 0a9370031..c9cb60d6e 100644
--- a/app/components/sdg_management/header.rb
+++ b/app/components/sdg_management/header.rb
@@ -1,11 +1,17 @@
 module SDGManagement::Header
   extend ActiveSupport::Concern
 
-  def header
+  def header(&block)
     provide(:title) do
       "#{t("sdg_management.header.title")} - #{title}"
     end
 
-    tag.h2 title
+    tag.header do
+      if block_given?
+        tag.h2(title) + capture(&block)
+      else
+        tag.h2(title)
+      end
+    end
   end
 end