Merge branch 'develop' into feature/redesign-conferences

* develop:
  Redesign: pages (#9457)
  Add "no-reply" notification at the email footers (#9668)
  merge layout center into one-col, allowing 3 variations (#9755)
  Fix form error overlap with character counter in the admin panel (#9683)
  Change the custom public port ENV variable name to HTTP_PORT (#9598)
  Redesign: login & signup (#9455)
  Fix redundant notification on comments with linked proposals (#9676)

decidim-admin/app/packs/stylesheets/decidim/admin/modules/_forms.scss

@@ -116,6 +116,12 @@ label,
   margin-bottom: $input-margin;
 }
 
+.form-input-extra-before{
+  margin-bottom: $form-spacing * 1.5;
+  display: block;
+  margin-top: $form-spacing * -1;
+}
+
 .custom-error{
   @extend .form-error;
 }

decidim-admin/spec/shared/manage_impersonations_examples.rb

@@ -39,7 +39,7 @@
       let(:document_number) { "123456789Y" }
 
       it "shows the errors in the form" do
-        expect(page).to have_selector("label", text: "Document number*\nRequired field\nis invalid")
+        expect(page).to have_selector("label", text: "Document number*Required field\nis invalid")
       end
     end
 

decidim-admin/spec/system/static_pages_spec.rb

@@ -14,6 +14,7 @@
 
   describe "Showing pages" do
     let!(:decidim_pages) { create_list(:static_page, 5, :with_topic, organization:) }
+    let(:decidim_page) { decidim_pages.first }
 
     it_behaves_like "editable content for admins" do
       let(:target_path) { decidim.pages_path }
@@ -24,11 +25,24 @@
         visit decidim.pages_path
       end
 
-      it "shows the list of all the pages" do
+      it "shows the list of topics" do
         decidim_pages.each do |decidim_page|
+          topic_title = decidim_page.topic.title[I18n.locale.to_s]
+
+          expect(page).to have_content(topic_title)
+        end
+      end
+
+      it "expands the topics" do
+        topic_title = decidim_page.topic.title[I18n.locale.to_s]
+        page_title = decidim_page.title[I18n.locale.to_s]
+
+        within(".page__accordion", text: topic_title) do
+          find("button").click
+
           expect(page).to have_css(
             "a[href=\"#{decidim.page_path(decidim_page)}\"]",
-            text: decidim_page.title[I18n.locale.to_s]
+            text: page_title
           )
         end
       end

decidim-core/app/cells/decidim/announcement/show.erb

@@ -1,11 +1,9 @@
-<div class="row column">
-  <%= content_tag :div, class: "callout announcement mb-sm #{callout_class} cell-announcement" do %>
-    <% if has_title? %>
-      <p class="heading5"><%= clean_title %></p>
+<%= content_tag :div, class: "callout #{callout_class}", data: { announcement: "" } do %>
+  <% if has_title? %>
+    <div class="h4"><%= clean_title %></div>
 
-      <%= clean_body %>
-    <% else %>
-      <%= clean_announcement %>
-    <% end %>
+    <%= clean_body %>
+  <% else %>
+    <%= clean_announcement %>
   <% end %>
-</div>
+<% end %>

decidim-core/app/cells/decidim/announcement_cell.rb

@@ -16,7 +16,7 @@ module Decidim
   # or a value accepted by the `translated_attribute` method.
   #
   # As options, the cell accepts a Hash with these keys:
-  #   - `callout_class`: The Css class to apply. Default to `"secondary"`
+  #   - `callout_class`: The Css class to apply
   #
   class AnnouncementCell < Decidim::ViewModel
     include Decidim::SanitizeHelper
@@ -34,7 +34,7 @@ def has_title?
     end
 
     def callout_class
-      options[:callout_class] ||= "secondary"
+      options[:callout_class]
     end
 
     def announcement

decidim-core/app/cells/decidim/tos_page/form.erb

@@ -1,19 +1,13 @@
-<div class="columns small-12">
-  <div class="card">
-    <div class="card__content">
-      <div class="card__header">
-        <h5 class="card__title text-center">
-          <%= t("form.legend", scope: "decidim.pages.terms_and_conditions") %>
-        </h5>
-      </div>
+<div class="tos">
+  <h2 class="h5 text-center">
+    <%= t("form.legend", scope: "decidim.pages.terms_and_conditions") %>
+  </h2>
 
-      <div class="row column flex-center">
-        <%= cell "decidim/tos_page", :refuse_btn_modal %>
+  <div class="tos__buttons">
+    <%= cell "decidim/tos_page", :refuse_btn_modal %>
 
-        <%= button_to decidim.accept_tos_path, method: :put, class: "button button--nomargin small" do %>
-          <%= t("form.agreement", scope: "decidim.pages.terms_and_conditions") %>
-        <% end %>
-      </div>
-    </div>
+    <%= button_to decidim.accept_tos_path, method: :put, class: "button button__sm button__secondary" do %>
+      <%= t("form.agreement", scope: "decidim.pages.terms_and_conditions") %>
+    <% end %>
   </div>
 </div>

decidim-core/app/cells/decidim/tos_page/refuse_btn_modal.erb

@@ -1,7 +1,8 @@
-<button class="clear button secondary button--nomargin small" type="button" data-open="tos-refuse-modal">
+<button class="button button__sm button__transparent-secondary" type="button" data-open="tos-refuse-modal">
   <%= t("refuse.modal_button", scope: "decidim.pages.terms_and_conditions") %>
 </button>
 
+<%# REDESIGN_PENDING: missing design modal %>
 <div id="tos-refuse-modal" class="reveal" data-reveal aria-labelledby="<%= t("refuse.modal_title", scope: "decidim.pages.terms_and_conditions") %>" aria-hidden="true" role="dialog">
   <div class="reveal__header">
     <h3 class="reveal__title">

decidim-core/app/controllers/concerns/decidim/devise_controllers.rb

@@ -22,7 +22,7 @@ module DeviseControllers
       include UserBlockedChecker
 
       include RedesignLayout
-      redesign active: false
+      redesign active: true
 
       helper Decidim::TranslationsHelper
       helper Decidim::MetaTagsHelper

decidim-core/app/helpers/decidim/passwords_helper.rb

@@ -27,7 +27,8 @@ def password_field_options_for(user)
         required: true,
         help_text:,
         minlength: min_length,
-        maxlength: ::PasswordValidator::MAX_LENGTH
+        maxlength: ::PasswordValidator::MAX_LENGTH,
+        placeholder: "••••••"
       }
     end
 

decidim-core/app/packs/entrypoints/redesigned_decidim_core.js

@@ -59,7 +59,6 @@ import "src/decidim/gallery"
 import "src/decidim/direct_uploads/upload_field"
 import "src/decidim/sw"
 import "src/decidim/back_to_list"
-import "src/decidim/dropdowns_handler"
 
 // CSS
 import "entrypoints/redesigned_decidim_core.scss"

decidim-core/app/packs/src/decidim/dropdowns_handler.js

@@ -1,12 +1,23 @@
 /**
+ * =====================
+ * REDESIGN_PENDING
+ * Remove this element, once all details-summary blocks have been replaced
+ * =====================
+ *
  * Handler to allow ONLY ONE dropdown (details HTML tag) open at once.
  * To click outside or open a different dropdown will close the others.
+ *
+ * Adding the HTML5 attribute data-autoclose="false" to the details tag, will bypass this behaviour
  */
 document.addEventListener("DOMContentLoaded", () => {
-  const details = [...document.querySelectorAll("details")];
+  const details = [...document.querySelectorAll('details:not([data-autoclose="false"])')];
 
   document.addEventListener("click", ({ target }) => {
-    if (details.some((element) => element.contains(target)).length !== 0) {
+    if (details.some((element) => element.contains(target))) {
+      // click inside handler: close everything but the cliked one
+      details.forEach((element) => !element.contains(target) && element.removeAttribute("open"));
+    } else {
+      // click outside handler: close everything
       details.forEach((element) => element.removeAttribute("open"));
     }
   });

decidim-core/app/packs/src/decidim/index.js

@@ -16,6 +16,9 @@ import addInputEmoji from "src/decidim/input_emoji"
 import dialogMode from "src/decidim/dialog_mode"
 import FocusGuard from "src/decidim/focus_guard"
 import backToListLink from "src/decidim/back_to_list"
+import Accordions from "a11y-accordion-component";
+import Dropdowns from "a11y-dropdown-component";
+import Dialogs from "a11y-dialog-component";
 
 window.Decidim = window.Decidim || {};
 window.Decidim.config = new Configuration()
@@ -82,4 +85,12 @@ $(() => {
   addInputEmoji()
 
   backToListLink(document.querySelectorAll(".js-back-to-list"));
+
+  Accordions.init();
+  Dropdowns.init();
+  // eslint-disable-next-line no-unused-vars
+  const dialog = new Dialogs("[data-dialog]", {
+    openingSelector: "[data-dialog-open]",
+    closingSelector: "[data-dialog-close]"
+  })
 });

decidim-core/app/packs/stylesheets/decidim/_decidim.scss

@@ -17,3 +17,9 @@
 @import "stylesheets/decidim/layouts/layouts";
 @import "stylesheets/decidim/extras/extras";
 @import "stylesheets/decidim/vizzs/vizzs";
+
+/*
+  REDESIGN_PENDING: remove this import
+  It include only to pass the tests of the new a11y components
+*/
+@import "stylesheets/decidim/redesigned_accordion.scss";

decidim-core/app/packs/stylesheets/decidim/_redesigned_accordion.scss

@@ -0,0 +1,4 @@
+[data-component="accordion"] [id*="panel"][aria-hidden="true"],
+[data-component="accordion"] [id*="panel"][aria-hidden="true"] *{
+  display: none;
+}

decidim-core/app/packs/stylesheets/decidim/_redesigned_buttons.scss

@@ -31,6 +31,18 @@
 
   &.transparent{
     @apply bg-transparent text-white border border-white;
+
+    &.primary{
+      @apply border-primary text-primary;
+    }
+
+    &.secondary{
+      @apply border-secondary text-secondary;
+    }
+
+    &.tertiary{
+      @apply border-tertiary text-tertiary;
+    }
   }
 
   &.white:hover,

decidim-core/app/packs/stylesheets/decidim/_redesigned_callout.scss

@@ -0,0 +1,15 @@
+.callout{
+  @apply rounded p-4 border-l-4 border-secondary bg-secondary/5;
+
+  &.success{
+    @apply border-success bg-success/5;
+  }
+
+  &.alert{
+    @apply border-alert bg-alert/5;
+  }
+
+  &.warning{
+    @apply border-warning bg-warning/5;
+  }
+}

decidim-core/app/packs/stylesheets/decidim/_redesigned_forms.scss

@@ -14,7 +14,7 @@
   input[type="week"],
   textarea{
     &:not(.reset-defaults){
-      @apply inline-block px-4 py-2 border border-gray outline outline-1 outline-transparent rounded bg-background-2 text-black placeholder:text-gray focus:border-0 focus:outline-2 focus:outline-secondary invalid:border-0 invalid:outline-2 invalid:outline-alert disabled:bg-background-3 disabled:text-gray-2;
+      @apply inline-block px-4 py-2 border border-gray outline outline-1 outline-transparent rounded bg-background-2 text-black font-normal placeholder:text-gray focus:outline-2 focus:outline-secondary invalid:border-0 invalid:outline-2 invalid:outline-alert disabled:bg-background-3 disabled:text-gray-2;
 
       &.sm{
         /* stylelint-disable-next-line number-leading-zero */
@@ -36,3 +36,7 @@
     }
   }
 }
+
+.help-text{
+  @apply block text-md text-gray-2 font-normal prose-a:text-secondary prose-a:underline;
+}

decidim-core/app/packs/stylesheets/decidim/_redesigned_layout.scss

@@ -1,5 +1,17 @@
 .layout-1col{
-  @apply grow container grid grid-cols-12 [&>*]:col-span-12 md:[&>*]:col-start-2 md:[&>*]:col-span-10 lg:[&>*]:col-start-3 lg:[&>*]:col-span-8;
+  @apply container grid grid-cols-12;
+
+  .cols-6{
+    @apply col-span-12 md:col-start-2 md:col-span-10 lg:col-start-3 lg:col-span-8 grid grid-cols-8 [&>*]:col-span-8 lg:[&>*:not(.grow)]:col-start-2 lg:[&>*:not(.grow)]:col-span-6;
+  }
+
+  .cols-8{
+    @apply col-span-12 md:col-start-2 md:col-span-10 lg:col-start-3 lg:col-span-8;
+  }
+
+  .cols-10{
+    @apply col-span-12 lg:col-start-2 lg:col-span-10;
+  }
 }
 
 .layout-2col{
@@ -27,7 +39,3 @@
     }
   }
 }
-
-.layout-center{
-  @apply grid grid-cols-8 [&>*]:col-span-8 lg:[&>*:not(.grow)]:col-start-2 lg:[&>*:not(.grow)]:col-span-6 mb-28;
-}

decidim-core/app/packs/stylesheets/decidim/_redesigned_login.scss

@@ -0,0 +1,60 @@
+.login{
+  &__info{
+    @apply text-gray-2 text-lg space-y-4 mb-10 prose-a:text-secondary prose-a:underline last:[&>*]:font-semibold;
+  }
+
+  &__info-required{
+    @apply mb-10 text-gray-2 text-sm;
+  }
+
+  &__omniauth{
+    @apply flex flex-col items-center gap-8 py-10 text-gray-2 font-semibold;
+
+    &-button{
+      @apply border border-gray shadow-[0_4px_6px_rgba(211,211,211,0.25)] justify-start gap-8 text-lg min-w-[50%];
+
+      svg{
+        @apply w-6 h-6 fill-current;
+      }
+    }
+
+    &-separator{
+      @apply flex items-center justify-center gap-12 after:content-[''] before:content-[''] after:h-px before:h-px after:bg-background before:bg-background after:grow before:grow;
+    }
+  }
+
+  &__form{
+    @apply flex flex-col py-10 gap-10;
+
+    &-block{
+      @apply py-10 border-t-2 border-background flex flex-col py-10 gap-4 only:[&_button]:ml-auto [&_p]:text-gray-2;
+    }
+
+    &-checkbox-label{
+      @apply text-md text-gray-2 font-normal prose-a:text-secondary prose-a:underline cursor-pointer;
+    }
+
+    & label:not(&-checkbox-label),
+    &-block label:not(&-checkbox-label){
+      @apply font-semibold text-lg;
+    }
+
+    .help-text{
+      @apply mt-4;
+    }
+
+    input[type="text"],
+    input[type="email"],
+    input[type="password"]{
+      @apply w-full block mt-4;
+    }
+  }
+
+  &__links{
+    @apply flex flex-col gap-4 py-10 border-t-2 border-background;
+
+    a{
+      @apply w-fit text-secondary hover:underline;
+    }
+  }
+}