Add switch to management component for essentials cookies

app/assets/stylesheets/layout/cookies_consent_management.scss

@@ -30,4 +30,34 @@
       }
     }
   }
+
+  .cookies-essentials {
+    ul {
+      list-style: none;
+      margin-#{$global-left}: 0;
+
+      li {
+        display: flex;
+        gap: $line-height;
+        justify-content: space-between;
+        padding: $line-height / 3;
+
+        &:nth-child(odd) {
+          background: #efefef;
+        }
+      }
+    }
+
+    .switch {
+      margin-top: $line-height / 3;
+
+      &:focus-within {
+        @include focus-outline;
+      }
+    }
+
+    p {
+      margin-bottom: 0;
+    }
+  }
 }

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

@@ -12,6 +12,17 @@
 
   <h3><%= t("cookies_management.essentials.title") %></h3>
   <p><%= t("cookies_management.essentials.description") %></p>
+  <div class="cookies-essentials">
+    <ul>
+      <li>
+        <%= render Layout::CookiesConsent::SwitchComponent.new(:essential_cookies,
+                                                               label: t("cookies_management.essentials.title"),
+                                                               description: t("cookies_management.essentials.hint"),
+                                                               checked: true,
+                                                               disabled: true) %>
+      </li>
+    </ul>
+  </div>
 
   <div class="buttons">
     <button type="button" class="accept-essential-cookies"><%= t("cookies_consent.accept_essential_cookies") %></button>

config/locales/en/general.yml

@@ -946,3 +946,4 @@ en:
     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.
+      hint: Without these, basic navigation functions will be impaired, so they should always be active.

config/locales/es/general.yml

@@ -946,3 +946,4 @@ es:
     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.
+      hint: Sin ellas, las funciones básicas de navegación se verán afectadas, por lo que deben estar siempre activas.

spec/components/layout/cookies_consent/management_component_spec.rb

@@ -20,6 +20,7 @@ describe Layout::CookiesConsent::ManagementComponent do
     expect(page).to have_css "h2", text: "Cookies management"
     expect(page).to have_link "More information about cookies", href: "/cookies_policy"
     expect(page).to have_css "h3", text: "Essential cookies"
+    expect(page).to have_css ".switch-input[type='checkbox'][name='essential_cookies'][disabled][checked]"
     expect(page).to have_button "Accept essential cookies"
   end