Add modal management for show essential cookies information

Note that in order to avoid display duplicated vertical scroll when
render a modal, we are add an `overflow: unset` rule. This rule
overwrite a vendor rule both in the modal we are adding and in the
modal we already have when creating a budget in admin section.

app/assets/stylesheets/layout.scss

@@ -35,6 +35,11 @@
 
 html {
   font-size: calc(0.25em + Max(0.75em, 0.75vw));
+
+  &.is-reveal-open.zf-has-scroll,
+  &.is-reveal-open {
+    overflow: unset;
+  }
 }
 
 html,

app/assets/stylesheets/layout/cookies_consent_management.scss

@@ -0,0 +1,16 @@
+.cookies-consent-management {
+  border-radius: 0.75rem;
+
+  @include breakpoint(medium) {
+    width: 50%;
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .close-button {
+    @include modal-close-button;
+  }
+}

app/components/layout/cookies_consent/banner_component.rb

@@ -1,8 +1,8 @@
-class Layout::CookiesConsent::BannerComponent < ApplicationComponent
+class Layout::CookiesConsent::BannerComponent < Layout::CookiesConsent::BaseComponent
   delegate :cookies, to: :helpers
 
   def render?
-    feature?(:cookies_consent) && cookies_consent_unset?
+    super && cookies_consent_unset?
   end
 
   def more_info_link

app/components/layout/cookies_consent/base_component.rb

@@ -0,0 +1,5 @@
+class Layout::CookiesConsent::BaseComponent < ApplicationComponent
+  def render?
+    feature?(:cookies_consent)
+  end
+end

app/components/layout/cookies_consent/management_component.html.erb

@@ -0,0 +1,12 @@
+<section id="cookies_consent_management" class="cookies-consent-management reveal" data-reveal aria-labelledby="modal_heading">
+  <header>
+    <h2 id="modal_heading"><%= t("cookies_management.title") %></h2>
+    <button class="close-button" aria-label="<%= t("admin.shared.close_modal") %>" type="button" data-close>
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </header>
+  <p><%= t("cookies_management.description") %><p>
+
+  <h3><%= t("cookies_management.essentials.title") %></h3>
+  <p><%= t("cookies_management.essentials.description") %></p>
+</section>

app/components/layout/cookies_consent/management_component.rb

@@ -0,0 +1,2 @@
+class Layout::CookiesConsent::ManagementComponent < Layout::CookiesConsent::BaseComponent
+end

config/locales/en/general.yml

@@ -938,3 +938,9 @@ en:
     message: "Cookies help us deliver our services. By using our services, you agree to our use of cookies."
     more_info_link: "More information about cookies"
     title: "Cookies policy"
+  cookies_management:
+    title: Cookies management
+    description: This website uses own cookies for its proper functioning.
+    essentials:
+      title: Essential cookies
+      description: They are used for many different purposes, such as recognising you as a user, choosing the language or customising the way in which content is displayed.

config/locales/es/general.yml

@@ -938,3 +938,9 @@ es:
     message: "Las cookies nos ayudan a ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso de cookies."
     more_info_link: "Más información sobre cookies"
     title: "Política de cookies"
+  cookies_management:
+    title: Configuración de cookies
+    description: Esta web utiliza cookies propias para su correcto funcionamiento.
+    essentials:
+      title: Cookies esenciales
+      description: Utilizadas para finalidades muy diversas, como por ejemplo, reconocerte como usuario, elegir el idioma o personalizar la forma en la que se muestra el contenido.

spec/components/layout/cookies_consent/management_component_spec.rb

@@ -0,0 +1,21 @@
+require "rails_helper"
+
+describe Layout::CookiesConsent::ManagementComponent do
+  before { Setting["feature.cookies_consent"] = true }
+
+  it "is not rendered when the cookies consent feature is disabled" do
+    Setting["feature.cookies_consent"] = false
+
+    render_inline Layout::CookiesConsent::ManagementComponent.new
+
+    expect(page).not_to be_rendered
+  end
+
+  it "is rendered with essential cookies content when the cookies consent is enabled" do
+    render_inline Layout::CookiesConsent::ManagementComponent.new
+
+    expect(page).to be_rendered
+    expect(page).to have_css "h2", text: "Cookies management"
+    expect(page).to have_css "h3", text: "Essential cookies"
+  end
+end