Removing bootstrap from Config's collapsable sections (#16620)

* .

* updates

* update specs

* expand profile field before deleting

* expand auth section in rspec test

* expand smtp settings summary in rspec

* update user experience section specs

* more spec tweaks

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

app/views/admin/profile_fields/_grouped_profile_fields.html.erb

@@ -26,15 +26,9 @@
           <div> There are no profile fields configured for this group. </div>
         <% else %>
           <% group.profile_fields.each do |field| %>
-            <div id="profile-field-<%= field.id %>" class="card mt-3">
-              <%= render partial: "admin/shared/card_header",
-                         locals: {
-                           header: field.label,
-                           state: "collapse",
-                           target: "#{field.attribute_name}_container",
-                           expanded: "false"
-                         } %>
-              <div id="<%= field.attribute_name %>_container" class="card-body collapse hide" aria-labelledby="<%= field.attribute_name %>_container">
+            <details class="crayons-card mb-4" id="profile-field-<%= field.id %>">
+              <summary class="crayons-subtitle-2 p-5"><%= field.label %></summary>
+              <div id="<%= field.attribute_name %>_container" class="p-5 pt-0">
                 <div class="form-group grid p-6 mb-6 gap-1">
                   <%= form_for [:admin, field] do |form| %>
                     <%= render "profile_field_form", form: form, group: group %>
@@ -43,7 +37,7 @@
                   <%= button_to "Delete Profile Field", admin_profile_field_path(field), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-secondary mx-auto" %>
                 </div>
               </div>
-            </div>
+            </details>
           <% end %>
         <% end %>
       </div>

app/views/admin/profile_fields/_ungrouped_profile_fields.html.erb

@@ -1,14 +1,8 @@
 <% @ungrouped_profile_fields.each do |field| %>
   <div class="row my-3">
-    <div class="card w-100">
-      <%= render partial: "admin/shared/card_header",
-                 locals: {
-                   header: field.label,
-                   state: "collapse",
-                   target: "#{field.attribute_name}_container",
-                   expanded: "false"
-                 } %>
-      <div id="<%= field.attribute_name %>_container" class="card-body collapse hide" aria-labelledby="<%= field.attribute_name %>_container">
+    <details class="crayons-card mb-4">
+      <summary class="crayons-subtitle-2 p-5"><%= field.label %></summary>
+      <div id="<%= field.attribute_name %>_container" class="p-5 pt-0">
         <div class="form-group grid p-6 mb-6 gap-1">
           <%= form_for [:admin, field] do |form| %>
             <%= render "profile_field_form", form: form, group: nil %>
@@ -17,6 +11,6 @@
           <%= button_to "Delete Profile Field", admin_profile_field_path(field), data: { confirm: "Are you sure?" }, method: :delete, class: "btn btn-secondary" %>
         </div>
       </div>
-    </div>
+    </details>
   </div>
 <% end %>

app/views/admin/settings/_update_setting_button.html.erb

@@ -1,3 +1,3 @@
 <% if current_user.super_admin? %>
-  <%= f.submit "Update Settings", class: "crayons-btn mt-4", aria: { label: local_assigns[:aria_label] }, data: { disable_with: false } %>
+  <%= f.submit "Update Settings", class: "c-btn c-btn--primary mt-4", aria: { label: local_assigns[:aria_label] }, data: { disable_with: false } %>
 <% end %>

app/views/admin/settings/forms/_api_tokens.html.erb

@@ -1,15 +1,10 @@
 <%= form_for(Settings::General.new,
              url: admin_settings_general_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "API Tokens",
-                 state: "collapse",
-                 target: "apiBodyContainer",
-                 expanded: false
-               } %>
-    <div id="apiBodyContainer" class="card-body collapse hide" aria-labelledby="apiBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">API Tokens</summary>
+
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :health_check_token %>
@@ -30,5 +25,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_authentication.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::Authentication.new,
              url: admin_settings_authentications_path,
              html: { data: { action: "submit->config#configUpdatePrecheck", "config-target": "authSectionForm", testid: "authSectionForm" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Authentication",
-                 state: "collapse",
-                 target: "authenticationBodyContainer",
-                 expanded: false
-               } %>
-    <div id="authenticationBodyContainer" class="card-body collapse hide" aria-labelledby="authenticationBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Authentication</summary>
+    <div class="p-6 pt-0">
       <section class="mb-6">
         <h3 class="crayons-subtitle-3 mb-3">
           General settings
@@ -217,6 +211,6 @@
 
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
+  <div data-config-target="configModalAnchor"></div>
 <% end %>
-<div data-config-target="configModalAnchor"></div>

app/views/admin/settings/forms/_campaign.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::Campaign.new,
              url: admin_settings_campaigns_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Campaign",
-                 state: "collapse",
-                 target: "campaignBodyContainer",
-                 expanded: false
-               } %>
-    <div id="campaignBodyContainer" class="card-body collapse hide" aria-labelledby="campaignBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Campaign</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :display_name, "Display Name" %>
@@ -95,5 +89,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_community.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::Community.new,
              url: admin_settings_communities_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Community Content",
-                 state: "collapse",
-                 target: "contentBodyContainer",
-                 expanded: false
-               } %>
-    <div id="contentBodyContainer" class="card-body collapse hide" aria-labelledby="contentBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Community Content</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :community_name, model: Settings::Community %>
@@ -76,5 +70,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_credits.html.erb

@@ -1,16 +1,9 @@
 <%= form_for(Settings::General.new,
              url: admin_settings_general_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Credits",
-                 state: "collapse",
-                 target: "creditsBodyContainer",
-                 expanded: false
-               } %>
-
-    <div id="creditsBodyContainer" class="card-body collapse hide" aria-labelledby="creditsBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Credits</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <%= f.fields_for :credit_prices_in_cents do |price_field| %>
           <div class="crayons-field">
@@ -47,5 +40,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_emails.html.erb

@@ -4,15 +4,9 @@
                action: "submit->config#updateConfigurationSettings",
                testid: "emailForm"
              } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Emails",
-                 state: "collapse",
-                 target: "emailBodyContainer",
-                 expanded: false
-               } %>
-    <div id="emailBodyContainer" class="card-body collapse hide" aria-labelledby="emailBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Emails</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :contact_email %>
@@ -34,5 +28,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_google_analytics.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::General.new,
              url: admin_settings_general_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Google Analytics",
-                 state: "collapse",
-                 target: "gaBodyContainer",
-                 expanded: false
-               } %>
-    <div id="gaBodyContainer" class="card-body collapse hide" aria-labelledby="gaBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Google Analytics</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :ga_tracking_id, "View ID" %>
@@ -21,5 +15,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_images.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::General.new,
              url: admin_settings_general_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3" id="images">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Images",
-                 state: "collapse",
-                 target: "imagesBodyContainer",
-                 expanded: false
-               } %>
-    <div id="imagesBodyContainer" class="card-body collapse hide" aria-labelledby="imagesBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Images</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <%= render partial: "admin/shared/logo_upload", locals: { f: f, allowed_types: logo_allowed_types, max_file_size: logo_max_file_size, logo: Settings::General.resized_logo } %>
 
@@ -50,5 +44,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f, aria_label: "Update image settings" %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_mascot.html.erb

@@ -4,15 +4,9 @@
                action: "submit->config#updateConfigurationSettings",
                testid: "mascotSectionForm"
              } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Mascot",
-                 state: "collapse",
-                 target: "mascotBodyContainer",
-                 expanded: false
-               } %>
-    <div id="mascotBodyContainer" class="card-body collapse hide" aria-labelledby="mascotBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Mascot</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :mascot_user_id, "Mascot user ID" %>
@@ -40,5 +34,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_meta_keywords.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::General.new,
              url: admin_settings_general_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Meta Keywords",
-                 state: "collapse",
-                 target: "metaKeywordsBodyContainer",
-                 expanded: false
-               } %>
-    <div id="metaKeywordsBodyContainer" class="card-body collapse hide" aria-labelledby="metaKeywordsBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Meta Keywords</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <%= f.fields_for :meta_keywords do |meta_keywords_field| %>
           <% Settings::General.meta_keywords.each do |area, keywords| %>
@@ -28,5 +22,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_monetization.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::General.new,
              url: admin_settings_general_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Monetization",
-                 state: "collapse",
-                 target: "monetizationBodyContainer",
-                 expanded: false
-               } %>
-    <div id="monetizationBodyContainer" class="card-body collapse hide" aria-labelledby="monetizationBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Monetization</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
 
         <div class="crayons-field">
@@ -41,5 +35,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_newsletter.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::General.new,
              url: admin_settings_general_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Newsletter",
-                 state: "collapse",
-                 target: "newsletterBodyContainer",
-                 expanded: false
-               } %>
-    <div id="newsletterBodyContainer" class="card-body collapse hide" aria-labelledby="newsletterBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Newsletter</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :mailchimp_api_key, "Mailchimp API Key" %>
@@ -53,5 +47,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_onboarding.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::General.new,
              url: admin_settings_general_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Onboarding",
-                 state: "collapse",
-                 target: "onboardingBodyContainer",
-                 expanded: false
-               } %>
-    <div id="onboardingBodyContainer" class="card-body collapse hide" aria-labelledby="onboardingBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Onboarding</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :onboarding_background_image %>
@@ -55,5 +49,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_rate_limit.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::RateLimit.new,
              url: admin_settings_rate_limits_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Rate limits and anti-spam",
-                 state: "collapse",
-                 target: "rateLimitsBodyContainer",
-                 expanded: false
-               } %>
-    <div id="rateLimitsBodyContainer" class="card-body collapse hide" aria-labelledby="rateLimitsBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Rate limits and anti-spam</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :user_considered_new_days, model: Settings::RateLimit %>
@@ -45,21 +39,15 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>
 
 <%= form_for(Settings::General.new,
              url: admin_settings_general_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Social Media",
-                 state: "collapse",
-                 target: "socialMediaBodyContainer",
-                 expanded: false
-               } %>
-    <div id="socialMediaBodyContainer" class="card-body collapse hide" aria-labelledby="socialMediaBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Social Media</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :twitter_hashtag %>
@@ -86,5 +74,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_smtp.html.erb

@@ -6,10 +6,9 @@
                action: "submit->config#updateConfigurationSettings",
                testid: "emailServerSettings"
              } }) do |f| %>
-  <div class="card mt-3" id="smtp-section">
-    <%= render partial: "admin/shared/card_header",
-               locals: { header: "Email Server Settings (SMTP)", state: "collapse", target: "smtpSettingsBodyContainer", expanded: false } %>
-    <div id="smtpSettingsBodyContainer" class="card-body collapse hide" aria-labelledby="smtpSettingsBodyContainer">
+  <details class="crayons-card" id="smtp-section">
+    <summary class="crayons-subtitle-2 p-6">Email Server Settings (SMTP)</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
 
         <% if ForemInstance.sendgrid_enabled? %>
@@ -45,5 +44,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_sponsors.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::General.new,
              url: admin_settings_general_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Sponsors",
-                 state: "collapse",
-                 target: "sponsorsContainer",
-                 expanded: false
-               } %>
-    <div id="sponsorsContainer" class="card-body collapse hide" aria-labelledby="sponsorsContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Sponsors</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :sponsor_headline %>
@@ -22,5 +16,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_tags.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::General.new,
              url: admin_settings_general_settings_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class="card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "Tags",
-                 state: "collapse",
-                 target: "tagsBodyContainer",
-                 expanded: false
-               } %>
-    <div id="tagsBodyContainer" class="card-body collapse hide" aria-labelledby="tagsBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">Tags</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-field">
           <%= admin_config_label :sidebar_tags %>
@@ -23,5 +17,5 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>

app/views/admin/settings/forms/_user_experience.html.erb

@@ -1,15 +1,9 @@
 <%= form_for(Settings::UserExperience.new,
              url: admin_settings_user_experiences_path,
              html: { data: { action: "submit->config#updateConfigurationSettings" } }) do |f| %>
-  <div class=" card mt-3">
-    <%= render partial: "admin/shared/card_header",
-               locals: {
-                 header: "User Experience and Brand",
-                 state: "collapse",
-                 target: "uxBodyContainer",
-                 expanded: false
-               } %>
-    <div id="uxBodyContainer" class="card-body collapse hide" aria-labelledby="uxBodyContainer">
+  <details class="crayons-card">
+    <summary class="crayons-subtitle-2 p-6">User Experience and Brand</summary>
+    <div class="p-6 pt-0">
       <fieldset class="grid gap-4">
         <div class="crayons-fieldx">
           <%= admin_config_label :feed_style, model: Settings::UserExperience %>
@@ -100,7 +94,7 @@
       </fieldset>
       <%= render "update_setting_button", f: f %>
     </div>
-  </div>
+  </details>
 <% end %>
 </div>
 <%= javascript_packs_with_chunks_tag "enhanceColorPickers", defer: true %>

app/views/admin/settings/show.html.erb

@@ -1,52 +1,28 @@
-<div class="grid gap-6" data-controller="config">
+<h1 class="crayons-title mb-4">Config</h1>
+
+<div class="flex flex-col gap-4" data-controller="config">
   <% unless current_user.super_admin? %>
-    <div class="crayons-notice crayons-notice--info" role="alert">
-      <p class="mb-1">
-        Only users with <strong>Super Admin</strong> privileges may edit this page.
-      </p>
+    <div class="crayons-notice crayons-notice--warning" role="alert">
+      Only users with <strong>Super Admin</strong> privileges may edit this page.
     </div>
   <% end %>
 
-  <div id="settings">
-    <div class="card w-100">
-      <div
-        id="settingsHeader"
-        class="card-header"
-        data-toggle="collapse"
-        data-target="#settingsBodyContainer"
-        aria-expanded="true"
-        aria-controls="settingsBodyContainer">
-
-        <h2 class="d-inline">All Settings</h2>
-
-        <button
-          class="crayons-btn crayons-btn--secondary float-right"
-          type="button"
-          data-action="click->config#toggleAccordionButtonLabel">
-          Hide Settings
-        </button>
-      </div>
-
-      <div id="settingsBodyContainer" class="show expand p-3" aria-labelledby="settingsHeader">
-        <%= render partial: "forms/api_tokens" %>
-        <%= render partial: "forms/authentication" %>
-        <%= render partial: "forms/campaign" %>
-        <%= render partial: "forms/community" %>
-        <%= render partial: "forms/credits" %>
-        <%= render partial: "forms/emails" %>
-        <%= render partial: "forms/smtp" %>
-        <%= render partial: "forms/google_analytics" %>
-        <%= render partial: "forms/images", locals: { logo_allowed_types: @logo_allowed_types, logo_max_file_size: @logo_max_file_size } %>
-        <%= render partial: "forms/mascot" %>
-        <%= render partial: "forms/meta_keywords" %>
-        <%= render partial: "forms/monetization" %>
-        <%= render partial: "forms/newsletter" %>
-        <%= render partial: "forms/onboarding" %>
-        <%= render partial: "forms/rate_limit" %>
-        <%= render partial: "forms/sponsors" %>
-        <%= render partial: "forms/tags" %>
-        <%= render partial: "forms/user_experience" %>
-      </div>
-    </div>
-  </div>
+  <%= render partial: "forms/api_tokens" %>
+  <%= render partial: "forms/authentication" %>
+  <%= render partial: "forms/campaign" %>
+  <%= render partial: "forms/community" %>
+  <%= render partial: "forms/credits" %>
+  <%= render partial: "forms/emails" %>
+  <%= render partial: "forms/smtp" %>
+  <%= render partial: "forms/google_analytics" %>
+  <%= render partial: "forms/images", locals: { logo_allowed_types: @logo_allowed_types, logo_max_file_size: @logo_max_file_size } %>
+  <%= render partial: "forms/mascot" %>
+  <%= render partial: "forms/meta_keywords" %>
+  <%= render partial: "forms/monetization" %>
+  <%= render partial: "forms/newsletter" %>
+  <%= render partial: "forms/onboarding" %>
+  <%= render partial: "forms/rate_limit" %>
+  <%= render partial: "forms/sponsors" %>
+  <%= render partial: "forms/tags" %>
+  <%= render partial: "forms/user_experience" %>
 </div>

app/views/admin/shared/_card_header.html.erb

@@ -1,17 +0,0 @@
-<div
-  class="card-header flex items-center"
-  data-toggle="<%= state %>"
-  data-target="#<%= target %>"
-  aria-expanded="<%= expanded %>"
-  aria-controls="<%= target %>">
-
-  <h6 class="mb-0"><%= header %></h6>
-
-  <button
-    class="card-header__toggle crayons-btn crayons-btn--secondary ml-auto"
-    type="button"
-    data-action="click->config#toggleAccordionButtonLabel">
-
-    <%= expanded ? "Hide info" : "Show info" %>
-  </button>
-</div>

cypress/integration/creatorOnboardingFlows/creatorSettings.spec.js

@@ -201,7 +201,7 @@ describe('Admin -> Customization -> Config -> Images', () => {
   it('should upload an image from the admin -> customization -> config -> images section', () => {
     cy.visit(`/admin/customization/config`);
 
-    cy.findByRole('heading', { name: /Images/i }).click();
+    cy.findByText('Images').click();
     cy.findByLabelText(/^Logo$/i).attachFile('/images/admin-image.png');
     cy.findByRole('button', { name: /Update image settings/i }).click();
 
@@ -229,7 +229,7 @@ describe('Admin -> Customization -> Config -> Images', () => {
   it('should not upload an image from the admin -> customization -> config -> images section', () => {
     cy.visit(`/admin/customization/config`);
 
-    cy.findByRole('heading', { name: /Images/i }).click();
+    cy.findByText('Images').click();
     cy.findByRole('button', { name: /Update image settings/i }).click();
 
     cy.findByTestId('snackbar')

cypress/integration/seededFlows/adminFlows/config/authenticationSection.spec.js

@@ -23,9 +23,8 @@ describe('Authentication Section', () => {
           cy.visit('/admin/customization/config');
           cy.findByTestId('authSectionForm').as('authSectionForm');
 
-          cy.get('@authSectionForm')
-            .findByRole('heading', { name: 'Authentication' })
-            .click();
+          cy.get('@authSectionForm').findByText('Authentication').click();
+
           cy.get('@authSectionForm')
             .findByRole('checkbox', { name: 'Invite-only mode' })
             .should('not.be.checked')
@@ -47,9 +46,7 @@ describe('Authentication Section', () => {
           // Page reloaded so need to get a new reference to the form.
           cy.findByTestId('authSectionForm').as('authSectionForm');
 
-          cy.get('@authSectionForm')
-            .findByRole('heading', { name: 'Authentication' })
-            .click();
+          cy.get('@authSectionForm').findByText('Authentication').click();
           cy.get('@authSectionForm')
             .findByRole('checkbox', { name: 'Invite-only mode' })
             .should('be.checked');
@@ -107,11 +104,6 @@ describe('Authentication Section', () => {
         cy.url().should('contains', '/admin/customization/config');
 
         cy.findByText('Successfully updated settings.').should('be.visible');
-
-        // Page reloaded so need to get a new reference to the form.
-        cy.findByTestId('authSectionForm').as('authSectionForm');
-        cy.get('@authSectionForm').findByText('Authentication').click();
-
         cy.findByLabelText('Facebook enabled').should('be.visible');
       });
     });

cypress/integration/seededFlows/adminFlows/config/emailServerSettingsSection.spec.js

@@ -12,10 +12,6 @@ describe('Email Server Settings Section', () => {
     it('updates the smtp fields', () => {
       cy.findByTestId('emailServerSettings').as('emailServerSettings');
 
-      cy.get('@emailServerSettings')
-        .findByText('Email Server Settings (SMTP)')
-        .click();
-
       cy.get('@emailServerSettings').within(() => {
         cy.findByText('Email Server Settings (SMTP)').click();
         cy.findByLabelText('User name').clear().type('jane_doe');

cypress/integration/seededFlows/adminFlows/config/userExperienceSection.spec.js

@@ -12,7 +12,7 @@ describe('User experience Section', () => {
     cy.get('#new_settings_user_experience').as('userExperienceSectionForm');
 
     cy.get('#new_settings_user_experience').within(() => {
-      cy.findByRole('button', { name: 'Show info' }).click();
+      cy.findByText('User Experience and Brand').click();
 
       cy.findByRole('combobox', { name: 'Default font' }).select(
         'open-dyslexic',
@@ -40,7 +40,7 @@ describe('User experience Section', () => {
 
   it('Should change the primary brand color hex if contrast is sufficient', () => {
     cy.get('#new_settings_user_experience').within(() => {
-      cy.findByRole('button', { name: 'Show info' }).click();
+      cy.findByText('User Experience and Brand').click();
 
       // Both a button and an input should exist for the brand color
       cy.findByRole('button', { name: 'Primary brand color hex' });
@@ -61,7 +61,7 @@ describe('User experience Section', () => {
 
   it('should not update brand color if contrast is insufficient', () => {
     cy.get('#new_settings_user_experience').within(() => {
-      cy.findByRole('button', { name: 'Show info' }).click();
+      cy.findByText('User Experience and Brand').click();
 
       // Both a button and an input should exist for the brand color
       cy.findByRole('button', { name: 'Primary brand color hex' });

cypress/integration/seededFlows/adminFlows/pages/landingPage.spec.js

@@ -10,7 +10,7 @@ describe('Set a landing page from the admin portal', () => {
         // long-term.
 
         cy.get('@userExperienceSectionForm')
-          .findByRole('heading', { name: 'User Experience and Brand' })
+          .findByText('User Experience and Brand')
           .click();
         cy.get('@userExperienceSectionForm')
           .findByRole('checkbox', { name: 'Public' })

spec/system/admin/admin_manages_profile_fields_spec.rb

@@ -41,6 +41,8 @@ RSpec.describe "Admin manages profile fields", type: :system do
   it "deletes a profile_field" do
     profile_field = ProfileField.find_by(label: label)
     expect(page).to have_text(profile_field.label.to_s)
+    find("summary", text: profile_field.label.to_s).click
+
     find("#profile-field-#{profile_field.id}").click_button("Delete Profile Field")
     expect(page).to have_text("Profile field #{label} deleted")
   end

spec/system/admin/config/admin_updates_smtp_settings_spec.rb

@@ -16,6 +16,8 @@ RSpec.describe "Admin updates SMTP Settings", type: :system do
       allow(Settings::SMTP).to receive(:user_name).and_return(nil)
       allow(Settings::SMTP).to receive(:password).and_return(nil)
       visit admin_config_path
+
+      find("summary", text: "Email Server Settings (SMTP)").click
     end
 
     it "does not show the 'Use my own email server' checkbox" do
@@ -40,6 +42,7 @@ RSpec.describe "Admin updates SMTP Settings", type: :system do
       allow(Settings::SMTP).to receive(:user_name).and_return(nil)
       allow(Settings::SMTP).to receive(:password).and_return(nil)
       visit admin_config_path
+      find("summary", text: "Email Server Settings (SMTP)").click
     end
 
     it "shows the checkbox to allow one to toggle ones own server" do
@@ -70,6 +73,7 @@ RSpec.describe "Admin updates SMTP Settings", type: :system do
       allow(Settings::SMTP).to receive(:user_name).and_return("jane_doe")
       allow(Settings::SMTP).to receive(:password).and_return("abc123456")
       visit admin_config_path
+      find("summary", text: "Email Server Settings (SMTP)").click
     end
 
     it "does not show the 'Use my own email server' checkbox" do
@@ -93,6 +97,7 @@ RSpec.describe "Admin updates SMTP Settings", type: :system do
       allow(Settings::SMTP).to receive(:user_name).and_return("jane_doe")
       allow(Settings::SMTP).to receive(:password).and_return("abc123456")
       visit admin_config_path
+      find("summary", text: "Email Server Settings (SMTP)").click
     end
 
     it "shows the 'Use my own email server' checkbox" do

spec/system/authentication/creator_config_edit_spec.rb

@@ -11,10 +11,7 @@ RSpec.describe "Creator config edit", type: :system, js: true do
 
     it "presents all available OAuth providers" do
       visit admin_config_path
-
-      within("div[data-target='#authenticationBodyContainer']") do
-        click_on("Show info", match: :first)
-      end
+      find("summary", text: "Authentication").click
 
       Authentication::Providers.available_providers.each do |provider|
         element = find(".config-authentication__item--label", text: /#{provider.official_name}/i)