decidim-core 0.29.1 → 0.30.0.rc1

data/app/packs/src/decidim/direct_uploads/upload_field.js

@@ -21,6 +21,7 @@ const updateActiveUploads = (modal) => {
   const files = document.querySelector(`[data-active-uploads=${modal.modal.id}]`)
   const previousId = Array.from(files.querySelectorAll("[type=hidden][id]"))
   const isMultiple = modal.options.multiple
+  const isTitled = modal.options.titled
 
   // fastest way to clean children nodes
   files.textContent = ""
@@ -34,16 +35,26 @@ const updateActiveUploads = (modal) => {
     let hidden = ""
     if (file.hiddenField) {
       // if there is hiddenField, this file is new
-      const fileField = isMultiple
-        ? `${modal.options.resourceName}[${modal.options.addAttribute}][${ix}][file]`
-        : `${modal.options.resourceName}[${modal.options.addAttribute}]`
+      let fileField = null;
+      if (isMultiple) {
+        fileField = `${modal.options.resourceName}[${modal.options.addAttribute}][${ix}][file]`
+      } else if (isTitled) {
+        fileField = `${modal.options.resourceName}[${modal.options.addAttribute}][file]`
+      } else {
+        fileField = `${modal.options.resourceName}[${modal.options.addAttribute}]`;
+      }
 
       hidden = `<input type="hidden" name="${fileField}" value="${file.hiddenField}" />`
     } else {
       // otherwise, we keep the attachmentId
-      const fileField = isMultiple
-        ? `${modal.options.resourceName}[${modal.options.addAttribute}][${ix}][id]`
-        : `${modal.options.resourceName}[${modal.options.addAttribute}]`
+      let fileField = null;
+      if (isMultiple) {
+        fileField = `${modal.options.resourceName}[${modal.options.addAttribute}][${ix}][id]`;
+      } else if (isTitled) {
+        fileField = `${modal.options.resourceName}[${modal.options.addAttribute}][id]`;
+      } else {
+        fileField = `${modal.options.resourceName}[${modal.options.addAttribute}]`;
+      }
 
       // convert all node attributes to string
       const attributes = Array.from(previousId.find(({ id }) => id === file.attachmentId).attributes).reduce((acc, { name, value }) => `${acc} ${name}="${value}"`, "")
@@ -51,10 +62,12 @@ const updateActiveUploads = (modal) => {
       hidden += `<input type="hidden" name="${fileField}" value="${file.attachmentId}" />`
     }
 
-    if (modal.options.titled) {
+    if (isTitled) {
       const titleValue = modal.modal.querySelectorAll('input[type="text"]')[ix].value
       // NOTE - Renaming the attachment is not supported when multiple uploader is disabled
-      const titleField = `${modal.options.resourceName}[${modal.options.addAttribute}][${ix}][title]`
+      const titleField = isMultiple
+        ? `${modal.options.resourceName}[${modal.options.addAttribute}][${ix}][title]`
+        : `${modal.options.resourceName}[${modal.options.addAttribute}][title]`
       hidden += `<input type="hidden" name="${titleField}" value="${escapeQuotes(titleValue)}" />`
 
       title = titleValue

data/app/packs/src/decidim/form_remote.js

@@ -1,4 +1,4 @@
-import Rails from "@rails/ujs";
+const { Rails } = window;
 
 // Make the remote form submit buttons disabled when the form is being
 // submitted to avoid multiple submits.

data/app/packs/src/decidim/geocoding/reverse_geocoding.js

@@ -0,0 +1,60 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const info = (target, msg) => {
+    const label = target.closest("label");
+    label.querySelectorAll(".form-error").forEach((el) => el.remove());
+    if (msg) {
+      const error = document.createElement("span");
+      error.className = "form-error";
+      error.textContent = msg;
+      label.appendChild(error);
+      error.style.display = "block";
+    }
+  };
+
+  const setLocating = (button, enable) => {
+    if (enable) {
+      button.setAttribute("disabled", true);
+    } else {
+      button.removeAttribute("disabled");
+    }
+  };
+
+  document.querySelectorAll(".user-device-location button").forEach((button) => {
+    button.addEventListener("click", (event) => {
+      const target = event.target;
+      if (target.disabled) {
+        return;
+      }
+
+      const input = document.getElementById(target.dataset.input);
+      const errorNoLocation = target.dataset.errorNoLocation;
+      const errorUnsupported = target.dataset.errorUnsupported;
+      const url = target.dataset.url;
+
+      if (navigator.geolocation) {
+        setLocating(target, true);
+        navigator.geolocation.getCurrentPosition((position) => {
+          const coordinates = [position.coords.latitude, position.coords.longitude];
+
+          // reverse geolocation
+          $.post(url, { latitude: coordinates[0], longitude: coordinates[1] }, (data) => {
+            input.value = data.address;
+            $(input).trigger("geocoder-suggest-coordinates.decidim", [coordinates]);
+          }).fail((xhr, status, error) => {
+            info(input, `${errorNoLocation} ${error}`);
+          });
+
+          setLocating(target, false);
+
+        }, (evt) => {
+          info(input, `${errorNoLocation} ${evt.message}`);
+          target.removeAttribute("disabled");
+        }, {
+          enableHighAccuracy: true
+        });
+      } else {
+        info(input, errorUnsupported);
+      }
+    });
+  });
+});

data/app/packs/src/decidim/impersonation.js

@@ -15,7 +15,7 @@ $(() => {
     }, 1000);
 
     // Prevent reload when page is already unloading, otherwise it may cause infinite reloads.
-    window.addEventListener("beforeunload", () => {
+    window.addEventListener("pagehide", () => {
       clearInterval(exitInterval);
       return;
     });

data/app/packs/src/decidim/index.js

@@ -8,6 +8,7 @@
 import "core-js/stable";
 import "regenerator-runtime/runtime";
 import "jquery"
+import "chartkick/chart.js"
 
 // REDESIGN_PENDING: deprecated
 import "foundation-sites";
@@ -41,7 +42,6 @@ import "src/decidim/vizzs"
 import "src/decidim/responsive_horizontal_tabs"
 import "src/decidim/security/selfxss_warning"
 import "src/decidim/session_timeouter"
-import "src/decidim/confirm"
 import "src/decidim/results_listing"
 import "src/decidim/impersonation"
 import "src/decidim/gallery"
@@ -50,9 +50,11 @@ import "src/decidim/data_consent"
 import "src/decidim/abide_form_validator_fixer"
 import "src/decidim/sw"
 import "src/decidim/sticky_header"
+import "src/decidim/sticky_footer"
 import "src/decidim/attachments"
 
 // local deps that require initialization
+import ConfirmDialog, { initializeConfirm } from "src/decidim/confirm"
 import formDatePicker from "src/decidim/datepicker/form_datepicker"
 import Configuration from "src/decidim/configuration"
 import ExternalLink from "src/decidim/external_link"
@@ -69,6 +71,7 @@ import handleNotificationActions from "src/decidim/notifications_actions"
 import RemoteModal from "src/decidim/remote_modal"
 import selectActiveIdentity from "src/decidim/identity_selector_dialog"
 import createTooltip from "src/decidim/tooltips"
+import fetchRemoteTooltip from "src/decidim/remote_tooltips"
 import createToggle from "src/decidim/toggle"
 import {
   createAccordion,
@@ -78,6 +81,7 @@ import {
   Dialogs
 } from "src/decidim/a11y"
 import changeReportFormBehavior from "src/decidim/change_report_form_behavior"
+import setOnboardingAction from "src/decidim/onboarding_pending_action"
 
 // bad practice: window namespace should avoid be populated as much as possible
 // rails-translations could be referenced through a single Decidim.I18n object
@@ -89,6 +93,7 @@ window.Decidim = window.Decidim || {
   addInputEmoji,
   EmojiButton,
   Dialogs,
+  ConfirmDialog,
   announceForScreenReader
 };
 
@@ -121,6 +126,8 @@ window.initFoundation = (element) => {
   });
 };
 
+// Confirm initialization needs to happen before Rails.start()
+initializeConfirm();
 Rails.start()
 
 /**
@@ -195,7 +202,13 @@ const initializer = (element = document) => {
   // Initialize data-toggles
   element.querySelectorAll("[data-toggle]").forEach((elem) => createToggle(elem))
 
+  element.querySelectorAll("[data-remote-tooltip]").forEach((elem) => fetchRemoteTooltip(elem))
+
   element.querySelectorAll(".new_report").forEach((elem) => changeReportFormBehavior(elem))
+
+  element.querySelectorAll("[data-onboarding-action]").forEach((elem) => setOnboardingAction(elem))
+
+  document.dispatchEvent(new CustomEvent("decidim:loaded", { detail: { element } }));
 }
 
 // If no jQuery is used the Tribute feature used in comments to autocomplete

data/app/packs/src/decidim/onboarding_pending_action.js

@@ -0,0 +1,24 @@
+import Cookies from "js-cookie";
+
+const ONBOARDING_COOKIE_EXPIRY = 365;
+
+// The same key is set in the Decidim::OnboardingManager class to retrieve the data from the cookie and store it in the extended data attribute
+const DATA_KEY = "onboarding";
+
+/**
+ * @param {DOMElement} element Element which provides the information for cookie about action to perform.
+ * @return {Void} Nothing
+ */
+export default function setOnboardingAction(element) {
+  // the dialog-open data attribute is stealing the click event
+  element.addEventListener("mousedown", () => {
+    const action = element.dataset.onboardingAction;
+    const model = element.dataset.onboardingModel;
+    const permissionsHolder = element.dataset.onboardingPermissionsHolder;
+    const redirectPath = element.dataset.onboardingRedirectPath;
+
+    Cookies.set(DATA_KEY, JSON.stringify({ action, model, permissionsHolder, redirectPath }), {
+      expires: ONBOARDING_COOKIE_EXPIRY
+    });
+  });
+}

data/app/packs/src/decidim/remote_tooltips.js

@@ -0,0 +1,38 @@
+import createTooltip from "src/decidim/tooltips"
+
+/**
+ * Given the following HTML structure,
+ * <span data-remote-tooltip="true" tooltip-url="some url" data-author="true">
+ *   <span></span>
+ * </span>
+ *
+ * This function will check if the HTMLElement where is attached to has a child, and will add a data tooltip attribute
+ * to the respective child in order to attach the fetched HTML content fetched under a json key as the content of the
+ * HTML tooltip. The DOM structure is expected to be like follows:
+ *
+ * <span data-remote-tooltip="true" tooltip-url="some url" data-author="true">
+ *   <span data-tooltip="HTML content from json data field"></span>
+ * </span>
+ *
+ * @param {HTMLElement} node The element holding the initialization data
+ * @returns {void}
+ */
+export default async function(node) {
+  const container = node.firstElementChild;
+
+  if (container) {
+    const response = await fetch(node.dataset.tooltipUrl, {
+      headers: {
+        "Content-Type": "application/json"
+      }
+    });
+    if (response.ok) {
+      const json = await response.json();
+
+      container.dataset.tooltip = json.data;
+      createTooltip(container);
+    } else {
+      console.error(response.status, response.statusText);
+    }
+  }
+}

data/app/packs/src/decidim/session_timeouter.js

@@ -127,7 +127,7 @@ $(() => {
     setTimer(timeoutInSeconds);
   });
 
-  window.addEventListener("beforeunload", () => {
+  window.addEventListener("pagehide", () => {
     clearInterval(exitInterval);
     return;
   });

data/app/packs/src/decidim/sticky_footer.js

@@ -0,0 +1,29 @@
+// This script add margin to the footer when the sticky CTA Buttons are shown on mobile devices,
+// so the footer is always visible.
+//
+// The sticky buttons show some of the main Call to Actions (CTAs) so that they remain accessible on the
+// screen as the participant scrolls through the detailed view of the Meetings, Proposals, Surveys, and Budgets
+// components.
+//
+
+const footer = document.querySelector("footer");
+const stickyButtons = document.querySelector("[data-sticky-buttons]");
+
+const adjustCtasButtons = () => {
+  if (!stickyButtons) {
+    return;
+  }
+
+  const marginBottom = stickyButtons.offsetHeight;
+  footer.style.marginBottom = `${marginBottom}px`;
+};
+
+if (stickyButtons) {
+  document.addEventListener("scroll", () => {
+    adjustCtasButtons();
+  });
+
+  document.addEventListener("on:toggle", () => {
+    adjustCtasButtons();
+  });
+}

data/app/packs/src/decidim/sticky_header.js

@@ -1,33 +1,14 @@
-// This script implements the sticky header and the sticky buttons. The sticky header hides when participants scroll down and shows when they scroll up.
-// Sticky headers allow users to quickly access the navigation, search, and utility-navigation elements without scrolling up to the top of the page. They increase the discoverability of the elements in the header.
-// The sticky buttons in the other hand, those are some of the main Call to Actions (CTAs) that remain accessible on the screen as the user scrolls through the detailed view of the Meetings, Proposals, Surveys, and Budgets components.
+// This script implements the sticky header on mobile devices.
+//
+// The sticky header hides when participants scroll down and shows when they scroll up.
+// Sticky headers allow users to quickly access the navigation, search, and utility-navigation
+// elements without scrolling up to the top of the page. They increase the discoverability of the elements in the header.
+//
 
 import { screens } from "tailwindcss/defaultTheme"
 
 let prevScroll = window.scrollY;
 const stickyHeader = document.querySelector("[data-sticky-header]");
-const footer = document.querySelector("footer");
-const stickyButtons = document.querySelectorAll("[data-sticky-buttons]");
-
-const isElementInViewport = (element) => {
-  const rect = element.getBoundingClientRect();
-  return rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight);
-};
-
-const adjustCtasButtons = () => {
-  if (!stickyButtons || !stickyButtons.length) {
-    return;
-  }
-
-  let visibleButtons = Array.from(stickyButtons).filter(isElementInViewport);
-
-  if (visibleButtons.length > 0) {
-    const marginBottom = Math.max(...visibleButtons.map((ctasButton) => ctasButton.offsetHeight));
-    footer.style.marginBottom = `${marginBottom}px`;
-  } else {
-    footer.style.marginBottom = 0;
-  }
-};
 
 // Fix the menu bar container margin top when there are multiple elements in the sticky header
 // As there could be different heights and we cannot know beforehand, we need to adjust this in a dynamic way
@@ -76,12 +57,6 @@ if (stickyHeader) {
         }
         prevScroll = currentScroll;
       }
-
-      adjustCtasButtons();
     }
   });
-
-  document.addEventListener("on:toggle", () => {
-    adjustCtasButtons();
-  });
 };

data/app/packs/src/decidim/toggle.js

@@ -9,7 +9,7 @@ export default function createToggle(component) {
   const { toggle } = component.dataset
 
   if (!component.id) {
-    // when component has no id, we enforce to have it one
+    // when component has no id, we enforce it to have one
     component.id = `toggle-${Math.random().toString(36).substring(7)}`
   }
 

data/app/packs/src/decidim/tooltips.js

@@ -63,9 +63,32 @@ export default function(node) {
   // append to dom hidden, to apply css transitions
   tooltip.setAttribute("aria-hidden", true)
 
-  const append = () => {
-    // do nothing if the tooltip is already present at the DOM
+  // used to detect if the user is on a mobile device by checking the user agent
+  const useMobile = (/Mobi|Android/i).test(navigator.userAgent);
+
+  // used not to collapse tooltip
+  let removeTooltip = () => {
+    tooltip.setAttribute("aria-hidden", "true");
+  }
+
+  // used to allow clicks outside the tooltip to take place on the page or device
+  const OutsideClick = (event) => {
+    if (!tooltip.contains(event.target) && event.target !== node) {
+      removeTooltip();
+    }
+  }
+
+  // function called again to allow clicks outside the tooltip to collapse the tooltip
+  removeTooltip = () => {
+    tooltip.setAttribute("aria-hidden", "true");
+    document.removeEventListener("click", OutsideClick)
+  }
+
+  const toggleTooltip = (event) => {
+    event.preventDefault();
+    // if the tooltip is visible in the DOM, hide it otherwise display
     if (tooltip.getAttribute("aria-hidden") === "false") {
+      tooltip.setAttribute("aria-hidden", "true");
       return
     }
 
@@ -106,27 +129,24 @@ export default function(node) {
     tooltip.style.left = `${positionX}px`
 
     tooltip.setAttribute("aria-hidden", false)
-  }
-
-  // in order to revoke the remove event when the mouse is over the trigger/tooltip
-  let cancelRemove = false
 
-  const remove = () => {
-    cancelRemove = false
-    // give some sleep time before hiding the element from the DOM
-    setTimeout(() => !cancelRemove && tooltip.setAttribute("aria-hidden", true), 500);
+    // sleep time before hiding the element from the DOM
+    setTimeout(() => document.addEventListener("click", OutsideClick))
   }
 
-  // keyboard listener is at root-level
-  window.addEventListener("keydown", (event) => event.key === "Escape" && remove())
-
-  node.addEventListener("mouseenter", append)
-  node.addEventListener("mouseleave", remove)
-  node.addEventListener("focus", append)
-  node.addEventListener("blur", remove)
-  tooltip.addEventListener("mouseenter", () => tooltip.setAttribute("aria-hidden", false))
-  tooltip.addEventListener("mouseleave", remove)
-
-  node.addEventListener("mouseover", () => (cancelRemove = true))
-  tooltip.addEventListener("mouseover", () => (cancelRemove = true))
+  if (useMobile) {
+    // mobile use to click and toggle the tooltip
+    node.addEventListener("click", toggleTooltip);
+    window.addEventListener("keydown", (event) => event.key === "Escape" && removeTooltip())
+  } else {
+    // desktop use for hover and blur over tooltip
+    node.addEventListener("mouseenter", toggleTooltip)
+    node.addEventListener("mouseleave", removeTooltip)
+    node.addEventListener("focus", toggleTooltip)
+    node.addEventListener("blur", removeTooltip)
+
+    // tooltip hover listeners to prevent hiding when hovered
+    tooltip.addEventListener("mouseenter", () => tooltip.setAttribute("aria-hidden", false))
+    tooltip.addEventListener("mouseleave", removeTooltip)
+  }
 }

data/app/packs/src/decidim/user_registrations.js

@@ -2,6 +2,7 @@ import PasswordToggler from "src/decidim/password_toggler";
 
 $(() => {
   const $userRegistrationForm = $("#register-form");
+  const $userOmniauthRegistrationForm = $("#omniauth-register-form");
   const $userGroupFields      = $userRegistrationForm.find(".user-group-fields");
   const userPassword         =  document.querySelector(".user-password");
   const inputSelector         = 'input[name="user[sign_up_as]"]';
@@ -19,9 +20,11 @@ $(() => {
 
   const checkNewsletter = (check) => {
     $userRegistrationForm.find(newsletterSelector).prop("checked", check);
+    $userOmniauthRegistrationForm.find(newsletterSelector).prop("checked", check);
     $newsletterModal.data("continue", true);
     window.Decidim.currentDialogs["sign-up-newsletter-modal"].close()
     $userRegistrationForm.submit();
+    $userOmniauthRegistrationForm.submit();
   }
 
   setGroupFieldsVisibility($userRegistrationForm.find(`${inputSelector}:checked`).val());
@@ -42,6 +45,16 @@ $(() => {
     }
   });
 
+  $userOmniauthRegistrationForm.on("submit", (event) => {
+    const newsletterChecked = $userOmniauthRegistrationForm.find(newsletterSelector);
+    if (!$newsletterModal.data("continue")) {
+      if (!newsletterChecked.prop("checked")) {
+        event.preventDefault();
+        window.Decidim.currentDialogs["sign-up-newsletter-modal"].open()
+      }
+    }
+  });
+
   $newsletterModal.find("[data-check]").on("click", (event) => {
     checkNewsletter($(event.target).data("check"));
   });

data/app/packs/src/decidim/utilities/dom.js

@@ -0,0 +1,148 @@
+import confirmAction from "src/decidim/confirm"
+import { getMessages } from "src/decidim/i18n"
+
+const { Rails } = window;
+
+const createUnloadPreventer = () => {
+  const preventUnloadConditions = [];
+
+  const confirmMessage = getMessages("confirmUnload") || "Are you sure you want to leave this page?";
+
+  const canUnload = (event) => !preventUnloadConditions.some((condition) => condition(event));
+
+  // TLDR:
+  // The beforeunload event does not work during tests due to the deprecation of
+  // the unload event and ChromeDriver automatically accepting these dialogs.
+  // ---
+  //
+  // Even when there are custom listeners on links and forms, the beforeunload
+  // event is to ensure that the user does not accidentally reload the page or
+  // close the browser or the tab. Note that this does not work during the tests
+  // with ChromeDriver due to the deprecation of the unload event and
+  // ChromeDriver automatically accepting these dialogs. For the time being,
+  // this should work when a real user interacts with the browser along with the
+  // "Permissions-Policy" header set by the backend. For more information about
+  // the header, see Decidim::Headers::BrowserFeaturePermissions).
+  const unloadListener = (event) => {
+    if (canUnload(event)) {
+      return;
+    }
+
+    // According to:
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
+    //
+    // > [...] best practice is to trigger the dialog by invoking
+    // > preventDefault() on the event object, while also setting returnValue to
+    // > support legacy cases.
+    event.preventDefault();
+    event.returnValue = true;
+  };
+
+  // The beforeunload event listener has to be registered AFTER a user
+  // interaction which is why it is wrapped around the next click event that
+  // happens after the first unload listener was registered. Otherwise it might
+  // not work due to the deprecation of the unload APIs in Chromium based
+  // browsers and possibly in the web standards in the future.
+  //
+  // According to:
+  // https://developer.chrome.com/docs/web-platform/page-lifecycle-api#the_beforeunload_event
+  //
+  // > Never add a beforeunload listener unconditionally or use it as an
+  // > end-of-session signal. Only add it when a user has unsaved work, and
+  // > remove it as soon as that work has been saved.
+  const registerBeforeUnload = () => {
+    window.removeEventListener("click", registerBeforeUnload);
+    window.addEventListener("beforeunload", unloadListener);
+  };
+
+  const disableBeforeUnload = () => {
+    window.removeEventListener("click", registerBeforeUnload);
+    window.removeEventListener("beforeunload", unloadListener);
+  };
+
+  const linkClickListener = (ev) => {
+    const link = ev.target?.closest("a");
+    if (!link) {
+      return;
+    }
+
+    if (canUnload(ev)) {
+      disableBeforeUnload();
+      document.removeEventListener("click", linkClickListener);
+      return;
+    }
+
+    window.exitUrl = link.href;
+
+    ev.preventDefault();
+    ev.stopPropagation();
+
+    confirmAction(confirmMessage, link).then((answer) => {
+      if (!answer) {
+        return;
+      }
+
+      disableBeforeUnload();
+      document.removeEventListener("click", linkClickListener);
+      link.click();
+    });
+  };
+
+  const formSubmitListener = (ev) => {
+    const source = ev.target?.closest("form");
+    if (!source) {
+      return;
+    }
+
+    if (canUnload(ev)) {
+      disableBeforeUnload();
+      document.removeEventListener("submit", formSubmitListener);
+      return;
+    }
+
+    const button = source.closest(Rails.formSubmitSelector);
+    if (!button) {
+      return;
+    }
+
+    ev.preventDefault();
+    ev.stopImmediatePropagation();
+    ev.stopPropagation();
+
+    confirmAction(confirmMessage, button).then((answer) => {
+      if (!answer) {
+        return;
+      }
+
+      disableBeforeUnload();
+      document.removeEventListener("submit", formSubmitListener);
+      source.submit();
+    });
+  };
+
+  const registerPreventUnloadListeners = () => {
+    window.addEventListener("click", registerBeforeUnload);
+    document.addEventListener("click", linkClickListener);
+    document.addEventListener("submit", formSubmitListener);
+  };
+
+  return {
+    addPreventCondition: (condition) => {
+      if (typeof condition !== "function") {
+        return;
+      }
+
+      if (preventUnloadConditions.length < 1) {
+        // The unload listeners are global, so only the first call to this
+        // function should result to registering these listeners.
+        registerPreventUnloadListeners();
+      }
+
+      preventUnloadConditions.push(condition);
+    }
+  };
+};
+
+const unloadPreventer = createUnloadPreventer();
+
+export const preventUnload = (condition) => unloadPreventer.addPreventCondition(condition);

data/app/packs/stylesheets/decidim/_accordion.scss

@@ -11,3 +11,33 @@
   [id*="comment"][class="comment-reply"][aria-hidden="false"] {
   display: block;
 }
+
+.card-accordion {
+  @apply border-b border-gray-3 mt-6;
+
+  &-title {
+    @apply text-primary font-semibold text-xl inline-block;
+  }
+
+  &-divider-button {
+    @apply flex items-center justify-between items-end w-full;
+
+    svg {
+      @apply inline-block w-6 h-6 fill-primary;
+    }
+
+    &[aria-expanded="true"] {
+      svg {
+        @apply rotate-180 transition-transform;
+      }
+    }
+  }
+
+  &-section {
+    @apply pb-8;
+
+    ul {
+      @apply mb-0;
+    }
+  }
+}