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

spec/components/layout/cookies_consent/switch_component_spec.rb

@@ -0,0 +1,62 @@
+require "rails_helper"
+
+describe Layout::CookiesConsent::SwitchComponent do
+  let(:component) do
+    Layout::CookiesConsent::SwitchComponent.new(
+      "cookie_name",
+      label: "Accept Cookies",
+      description: "Enable or disable cookies for the site."
+    )
+  end
+
+  it "renders the switch component with the correct label and description" do
+    render_inline(component)
+
+    expect(page).to have_css ".name", text: "Accept Cookies"
+    expect(page).to have_css ".description", text: "Enable or disable cookies for the site."
+    expect(page).to have_css "input.switch-input[type='checkbox'][name='cookie_name']"
+    expect(page).not_to have_css "[type='checkbox'][checked]"
+    expect(page).not_to have_css "[type='checkbox'][disabled]"
+  end
+
+  it "renders the checkbox as checked when `checked` is true" do
+    render_inline(
+      Layout::CookiesConsent::SwitchComponent.new(
+        "cookie_name",
+        label: "Accept Cookies",
+        description: "Enable or disable cookies for the site.",
+        checked: true
+      )
+    )
+
+    expect(page).to have_css "input[type='checkbox'][checked]"
+  end
+
+  it "renders the checkbox as disabled when `disabled` is true" do
+    render_inline(
+      Layout::CookiesConsent::SwitchComponent.new(
+        "cookie_name",
+        label: "Accept Cookies",
+        description: "Enable or disable cookies for the site.",
+        disabled: true
+      )
+    )
+
+    expect(page).to have_css "input[type='checkbox'][disabled]"
+  end
+
+  it "renders the correct accessibility elements" do
+    render_inline(component)
+
+    expect(page).to have_field "Accept Cookies"
+    expect(page).to have_css "[aria-hidden]", exact_text: "Yes"
+    expect(page).to have_css "[aria-hidden]", exact_text: "No"
+  end
+
+  it "renders the yes and no states for the switch" do
+    render_inline(component)
+
+    expect(page).to have_css ".switch-active", text: "Yes"
+    expect(page).to have_css ".switch-inactive", text: "No"
+  end
+end