From 70002be0998b51ed11d658b6ec98c8b0400e7562 Mon Sep 17 00:00:00 2001
From: elviabth <ejbenedith@gmail.com>
Date: Tue, 6 Feb 2024 14:03:37 +0100
Subject: [PATCH] add tabs and accordions

---
 .../agenda_events_settings_form/scripts.erb   |  29 ---
 .../agenda_events_settings_form/show.erb      | 199 +++++++++---------
 2 files changed, 103 insertions(+), 125 deletions(-)
 delete mode 100644 app/cells/decidim/newsletter_templates/agenda_events_settings_form/scripts.erb

diff --git a/app/cells/decidim/newsletter_templates/agenda_events_settings_form/scripts.erb b/app/cells/decidim/newsletter_templates/agenda_events_settings_form/scripts.erb
deleted file mode 100644
index 29b2d76..0000000
--- a/app/cells/decidim/newsletter_templates/agenda_events_settings_form/scripts.erb
+++ /dev/null
@@ -1,29 +0,0 @@
-<script>
-    document.addEventListener('DOMContentLoaded', function () {
-        const accordionItems = document.querySelectorAll('.accordion-item');
-        accordionItems.forEach(function (item) {
-        const title = item.querySelector('.accordion-title');
-        let content = item.querySelector('.accordion-content');
-        content.style.display = 'none';
-
-        title.addEventListener('click', function () {
-
-            content = item.querySelector('.accordion-content');
-            content.style.display = content.style.display === 'none' ? 'block' : 'none';
-        });
-        });
-
-        const tabLinks = document.querySelectorAll('.tabs-title');
-        tabLinks.forEach(function(tabLink) {
-        tabLink.addEventListener('click', function() {
-            tabLinks.forEach(function(tab) {
-                tab.style.background = '#E8E8E8';
-                tab.style.color = '#039be5';
-            })
-            this.style.background = '#fff';
-            this.style.color = '#039be5';
-        });
-        tabLink.setAttribute('aria-selected', 'true');
-        });
-    });
-</script>
diff --git a/app/cells/decidim/newsletter_templates/agenda_events_settings_form/show.erb b/app/cells/decidim/newsletter_templates/agenda_events_settings_form/show.erb
index d36be67..497be06 100644
--- a/app/cells/decidim/newsletter_templates/agenda_events_settings_form/show.erb
+++ b/app/cells/decidim/newsletter_templates/agenda_events_settings_form/show.erb
@@ -7,110 +7,117 @@
   <%= settings_fields.text_field :font_color_over_bg, label: t(".font_color_over_bg"), type: "color" %>
 <% end %>
 
-<ul class="tabs flex items-center bg-gray-2 border border-solid border-transparent" data-tabs id="newsletter-tabs">
-  <li class="tabs-title is-active cursor-pointer focus:bg-white hover:bg-white py-5 px-6"><a href="#panel1" aria-selected="true" class="no-underline hover:underline focus:underline hover:text-secondary focus:text-secondary"><%= t(".introduction") %></a></li>
-  <li class="tabs-title cursor-pointer focus:bg-white hover:bg-white py-5 px-6"><a data-tabs-target="panel2" href="#panel2" class="no-underline hover:underline focus:underline hover:text-secondary focus:text-secondary"><%= t(".body") %></a></li>
-  <li class="tabs-title cursor-pointer focus:bg-white hover:bg-white py-5 px-6"><a data-tabs-target="panel3" href="#panel3" class="no-underline hover:underline focus:underline hover:text-secondary focus:text-secondary"><%= t(".footer") %></a></li>
-</ul>
+<div class="layout-main__section" data-component="accordion" data-multiselectable="false" data-collapsible="false">
+  <ul class="tab-x-container tabs-3">
+    <li><button id="trigger-introduction" class="tab-x" data-controls="panel-introduction" data-open="true"><%= t(".introduction") %></button></li>
+    <li><button id="trigger-body" class="tab-x" data-controls="panel-body" data-open=""><%= t(".body") %></button></li>
+    <li><button id="trigger-footer" class="tab-x" data-controls="panel-footer" data-open=""><%= t(".footer") %></button></li>
+  </ul>
 
-<div class="tabs-content" data-tabs-content="newsletter-tabs">
-  <div class="tabs-panel is-active" id="panel1">
-    <fieldset class="fieldset">
-      <% form.fields_for :settings, settings do |settings_fields| %>
-        <%= settings_fields.translated :text_field, :intro_title, label: t(".intro_title") %>
-        <%= settings_fields.translated :editor, :intro_text, label: t(".intro_text") %>
-        <%= settings_fields.translated :text_field, :intro_link_text, label: t(".intro_link_text") if theme == :capitalitat %>
-        <%= settings_fields.text_field :intro_link_url, label: t(".intro_link_url") if theme == :capitalitat %>
-      <% end %>
-      <% form.fields_for :images, form.object.images do |images_fields| %>
-        <%= images_fields.upload :main_image, label: t(".main_image") %>
-      <% end %>
-    </fieldset>
-  </div>
+    <div class="py-8" id="panel-introduction">
+      <fieldset class="fieldset">
+        <% form.fields_for :settings, settings do |settings_fields| %>
+          <%= settings_fields.translated :text_field, :intro_title, label: t(".intro_title") %>
+          <%= settings_fields.translated :editor, :intro_text, label: t(".intro_text") %>
+          <%= settings_fields.translated :text_field, :intro_link_text, label: t(".intro_link_text") if theme == :capitalitat %>
+          <%= settings_fields.text_field :intro_link_url, label: t(".intro_link_url") if theme == :capitalitat %>
+        <% end %>
+        <% form.fields_for :images, form.object.images do |images_fields| %>
+          <%= images_fields.upload :main_image, label: t(".main_image") %>
+        <% end %>
+      </fieldset>
+    </div>
 
-  <div class="tabs-panel" id="panel2">
-    <p><%= t(".tab_body_description") %></p>
-    <fieldset class="fieldset">
-      <% form.fields_for :settings, settings do |settings_fields| %>
-        <%= settings_fields.translated :text_field, :body_title, label: t(".body_title") unless theme == :capitalitat %>
-        <%= settings_fields.translated :text_field, :body_subtitle, label: t(".body_subtitle") unless theme == :capitalitat %>
-        <ul id="box-container" class="accordion p-4" data-accordion data-multi-expand="true" data-allow-all-closed="true">
-          <% (1..4).each do |num| %>
-            <li class="box accordion-item cursor-pointer" id="box<%= num %>" data-accordion-item>
-              <a href="#" class="accordion-title body-box-title"><%= t(".boxes_number_title", number: num) %>:</a>
-              <div class="accordion-content" data-tab-content>
-                <%= settings_fields.translated :text_field, "body_box_title_#{num}", label: t(".body_box_title") %>
-                <%= settings_fields.translated :text_field, "body_box_date_time_#{num}", label: t(".body_box_date_time") %>
-                <%= settings_fields.translated :text_field, "body_box_description_#{num}", label: t(".body_box_description"), maxlength: 250, class: "mb-0 !mb-0" %>
-                <%= settings_fields.translated :text_field, "body_box_link_text_#{num}", label: t(".body_box_link_text") %>
-                <%= settings_fields.translated :text_field, "body_box_link_url_#{num}", label: t(".body_box_link_url") %>
-                <% form.fields_for :images, form.object.images do |images_fields| %>
-                  <%= images_fields.upload :"body_box_image_#{num}", label: t(".body_box_image") %>
-                <% end %>
-              </div>
-            </li>
-          <% end %>
-        </ul>
-        <%= settings_fields.translated :text_field, :body_final_text, label: t(".body_final_text") unless theme == "capitalitat" %>
-      <% end %>
-    </fieldset>
-  </div>
+    <div class="py-8" id="panel-body">
+      <p><%= t(".tab_body_description") %></p>
+      <fieldset class="fieldset">
+        <% form.fields_for :settings, settings do |settings_fields| %>
+          <%= settings_fields.translated :text_field, :body_title, label: t(".body_title") unless theme == :capitalitat %>
+          <%= settings_fields.translated :text_field, :body_subtitle, label: t(".body_subtitle") unless theme == :capitalitat %>
+          <div class="c-accordion" data-component="accordion">
+            <% (1..4).each do |num| %>
+              <button role="heading" aria-level="3">
+                <a href="#" id="accordion-trigger-<%= num %>" class="c-accordion__trigger" data-controls="accordion-panel-<%= num %>"><%= t(".boxes_number_title", number: num) %>:</a>
+              </button>
+                <div id="accordion-panel-<%= num %>" class="c-accordion__panel">
+                  <%= settings_fields.translated :text_field, "body_box_title_#{num}", label: t(".body_box_title") %>
+                  <%= settings_fields.translated :text_field, "body_box_date_time_#{num}", label: t(".body_box_date_time") %>
+                  <%= settings_fields.translated :text_field, "body_box_description_#{num}", label: t(".body_box_description"), maxlength: 250, class: "mb-0 !mb-0" %>
+                  <%= settings_fields.translated :text_field, "body_box_link_text_#{num}", label: t(".body_box_link_text") %>
+                  <%= settings_fields.translated :text_field, "body_box_link_url_#{num}", label: t(".body_box_link_url") %>
+                  <% form.fields_for :images, form.object.images do |images_fields| %>
+                    <%= images_fields.upload :"body_box_image_#{num}", label: t(".body_box_image") %>
+                  <% end %>
+                </div>
+             
+            <% end %>
+          </div>
+          <%= settings_fields.translated :text_field, :body_final_text, label: t(".body_final_text") unless theme == "capitalitat" %>
+        <% end %>
+      </fieldset>
+    </div>
 
-  <div class="tabs-panel" id="panel3">
-    <p><%= t(".tab_footer_description") %></p>
-    <fieldset class="fieldset">
-      <% form.fields_for :settings, settings do |settings_fields| %>
-        <%= settings_fields.translated :text_field, :footer_title, label: t(".footer_title") %>
+    <div class="py-8" id="panel-footer">
+      <p><%= t(".tab_footer_description") %></p>
+      <fieldset class="fieldset">
+        <% form.fields_for :settings, settings do |settings_fields| %>
+          <%= settings_fields.translated :text_field, :footer_title, label: t(".footer_title") %>
 
-        <ul id="footer-container" class="accordion p-4" data-accordion data-multi-expand="true" data-allow-all-closed="true">
-          <% (1..3).each do |num| %>
-            <li class="box accordion-item" id="box<%= num %>" data-accordion-item>
-              <a href="#" class="accordion-title body-box-title"><%= t(".boxes_number_title", number: num) %>:</a>
-              <div class="accordion-content" data-tab-content>
-                <%= settings_fields.translated :text_field, "footer_box_date_time_#{num}", label: t(".footer_box_date_time") %>
-                <%= settings_fields.translated :text_field, "footer_box_title_#{num}", label: t(".footer_box_title") %>
-                <%= settings_fields.translated :text_field, "footer_box_description_#{num}", label: t(".footer_box_description"), maxlength: 250 if theme == "capitalitat" %>
-                <%= settings_fields.translated :text_field, "footer_box_link_text_#{num}", label: t(".footer_box_link_text") %>
-                <%= settings_fields.translated :text_field, "footer_box_link_url_#{num}", label: t(".footer_box_link_url") %>
-                <% form.fields_for :images, form.object.images do |images_fields| %>
-                  <%= images_fields.upload :"footer_box_image_#{num}", label: t(".footer_box_image") %>
-                <% end %>
-              </div>
-            </li>
-          <% end %>
-        </ul>
-        <%= settings_fields.editor :footer_address_text, label: t(".footer_address") unless theme == :capitalitat %>
-        <%= settings_fields.translated :text_field, :footer_social_links_title, label: t(".footer_social_links_title") %>
-        <%= settings_fields.translated :text_field, :footer_additional_text if theme == :capitalitat %>
+          <div class="c-accordion" data-component="accordion">
+            <% (1..3).each do |num| %>
+              <button ole="heading" aria-level="3">
+                <a href="#" id="accordion-trigger-<%= num %>" class="c-accordion__trigger" data-controls="accordion-panel-<%= num %>"><%= t(".boxes_number_title", number: num) %>:</a>
+              </button>
 
-        <div class="label--tabs">
-          <label for="organization_social_handlers">
-            <%= t(".social_handlers") %>
-          </label>
-          <ul class="flex flex-row list-none text-gray" data-tabs id="organization_social_handlers">
-            <% social_handlers&.each do |handler| %>
-              <li class="tabs-title <%= 'is-active' if handler == social_handlers.first %> px-2 border-l border-gray-300">
-                <a href="#<%= handler %>" <%= 'aria-selected="true"' if handler == social_handlers.first %> class="hover:underline focus:underline hover:text-secondary focus:text-secondary">
-                  <%= t(".#{handler}") %>
-                </a>
-              </li>
+                <div  id="accordion-panel-<%= num %>" class="c-accordion__panel">
+                  <div class="c-accordion__inner">
+                    <%= settings_fields.translated :text_field, "footer_box_date_time_#{num}", label: t(".footer_box_date_time") %>
+                    <%= settings_fields.translated :text_field, "footer_box_title_#{num}", label: t(".footer_box_title") %>
+                    <%= settings_fields.translated :text_field, "footer_box_description_#{num}", label: t(".footer_box_description"), maxlength: 250 if theme == "capitalitat" %>
+                    <%= settings_fields.translated :text_field, "footer_box_link_text_#{num}", label: t(".footer_box_link_text") %>
+                    <%= settings_fields.translated :text_field, "footer_box_link_url_#{num}", label: t(".footer_box_link_url") %>
+                    <% form.fields_for :images, form.object.images do |images_fields| %>
+                      <%= images_fields.upload :"footer_box_image_#{num}", label: t(".footer_box_image") %>
+                    <% end %>
+                  </div>
+                </div>
             <% end %>
-          </ul>
-        </div>
-        <div class="tabs-content" data-tabs-content="organization_social_handlers">
-          <% social_handlers&.each do |handler| %>
-            <div class="tabs-panel <% if handler == social_handlers.first %> is-active <% end %>" id="<%= handler %>">
-              <%= settings_fields.text_field "#{handler}_handler", placeholder: t(".wont_show"), label: false %>
-            </div>
+          </div>
+          <%= settings_fields.editor :footer_address_text, label: t(".footer_address") unless theme == :capitalitat %>
+          <%= settings_fields.translated :text_field, :footer_social_links_title, label: t(".footer_social_links_title") %>
+          <%= settings_fields.translated :text_field, :footer_additional_text if theme == :capitalitat %>
+
+          <div class="layout-main__section" data-component="accordion" data-multiselectable="false" data-collapsible="false">
+            <label for="organization_social_handlers">
+              <%= t(".social_handlers") %>
+            </label>
+            <ul class="tab-x-container tabs-8" id="organization_social_handlers">
+              <% social_handlers&.each do |handler| %>
+                <li>
+                  <a href="#<%= handler %>" data-open="<%= handler == social_handlers.first ? 'true' : "" %>" class="tab-x" data-controls="panel-<%= handler %>" id="trigger-<%= handler %>">
+                    <%= t(".#{handler}") %>
+                  </a>
+                </li>
+              <% end %>
+            </ul>
+          
+            
+              <% social_handlers&.each do |handler| %>
+                <div class="pt-4 pb-px" id="panel-<%= handler %>">
+                  <%= settings_fields.text_field "#{handler}_handler", placeholder: t(".wont_show"), label: false %>
+                </div>
+              <% end %>
+            
+          </div>
           <% end %>
-        </div>
-        <% end %>
-    </fieldset>
+      </fieldset>
+    </div>
+
+
+  <div class="row column">
+    <%= t(".interpolations_hint") %>
   </div>
-</div>
 
-<div class="row column">
-  <%= t(".interpolations_hint") %>
 </div>
 
-<%= render :scripts %>
+