Create a new component to render checkboxes as switches

https://get.foundation/sites/docs/switch.html

app/assets/stylesheets/_consul_settings.scss

@@ -14,6 +14,7 @@
 
 $black: #222 !default;
 $white: #fdfdfd !default;
+$dark-gray: #8a8a8a !default;
 
 $body-background: $white;
 $body-font-family: "Source Sans Pro", "Helvetica", "Arial", sans-serif !important !default;
@@ -51,6 +52,8 @@ $orbit-caption-background: #eee;
 
 $show-header-for-stacked: true !default;
 
+$switch-background: $dark-gray !default;
+
 // 2. CONSUL DEMOCRACY variables
 // -----------------------------
 

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

@@ -0,0 +1,11 @@
+<div>
+  <p class="name"><strong><%= label %></strong></p>
+  <div class="description"><%= simple_format(description) %></div>
+</div>
+<div class="switch large">
+  <%= check_box_tag name, "1", checked?, class: "switch-input", disabled: disabled?, "aria-label": label %>
+  <label class="switch-paddle" for="<%= name %>">
+    <span class="switch-active" aria-hidden="true"><%= t("shared.yes") %></span>
+    <span class="switch-inactive" aria-hidden="true"><%= t("shared.no") %></span>
+  </label>
+</div>

app/components/layout/cookies_consent/switch_component.rb

@@ -0,0 +1,21 @@
+class Layout::CookiesConsent::SwitchComponent < ApplicationComponent
+  attr_reader :checked, :disabled, :name, :label, :description
+
+  def initialize(name, label:, description:, checked: false, disabled: false)
+    @name = name
+    @label = label
+    @description = description
+    @checked = checked
+    @disabled = disabled
+  end
+
+  private
+
+    def checked?
+      checked == true
+    end
+
+    def disabled?
+      disabled == true
+    end
+end