decidim-comments 0.27.8 → 0.28.0.rc4

data/app/packs/src/decidim/comments/comments.component.test.js

@@ -1,5 +1,5 @@
 /* eslint-disable id-length, max-lines */
-/* global spyOn, jest */
+/* global jest */
 
 const $ = require("jquery");
 
@@ -8,14 +8,12 @@ const $ = require("jquery");
 // in order for them to define the $ variable correctly.
 window.$ = jest.fn().mockImplementation((...args) => $(...args));
 window.$.ajax = jest.fn().mockImplementation((...args) => $.ajax(...args));
-
-// Quill is expected by the input character counter
-import Quill from "quill"
-window.Quill = Quill
+window.$.extend = jest.fn().mockImplementation((...args) => $.extend(...args));
 
 // Rails.ajax is used by the fetching/polling of the comments
 import Rails from "@rails/ujs";
 jest.mock("@rails/ujs");
+window.Rails = Rails;
 
 // Fake timers for testing polling
 jest.useFakeTimers();
@@ -23,10 +21,9 @@ jest.useFakeTimers();
 import { createCharacterCounter } from "../../../../../../decidim-core/app/packs/src/decidim/input_character_counter";
 import Configuration from "../../../../../../decidim-core/app/packs/src/decidim/configuration";
 // Component is loaded with require because using import loads it before $ has been mocked
-// so tests aren't able to check the spied behaviours
+// so tests are not able to check the spied behaviours
 const CommentsComponent = require("./comments.component_for_testing.js");
 
-
 // Create a dummy foundation jQuery method for the comments component to call
 $.fn.foundation = () => {};
 
@@ -48,28 +45,28 @@ describe("CommentsComponent", () => {
   const spyOnAddComment = (methodToSpy) => {
     addComment.each((i) => {
       addComment[i].$ = $(addComment[i]);
-      addComment[i].opinionToggles = $(".opinion-toggle .button", addComment[i].$);
+      addComment[i].opinionToggles = $(".opinion-toggle button", addComment[i].$);
       addComment[i].commentForm = $("form", addComment[i].$);
       addComment[i].commentTextarea = $("textarea", addComment[i].commentForm);
 
       if (methodToSpy) {
-        spyOn(addComment[i].opinionToggles, methodToSpy);
-        spyOn(addComment[i].commentForm, methodToSpy);
-        spyOn(addComment[i].commentTextarea, methodToSpy);
+        jest.spyOn(addComment[i].opinionToggles, methodToSpy);
+        jest.spyOn(addComment[i].commentForm, methodToSpy);
+        jest.spyOn(addComment[i].commentTextarea, methodToSpy);
       }
     });
 
-    spyOn(window, "$").mockImplementation((...args) => {
+    jest.spyOn(window, "$").mockImplementation((...args) => {
       const jqSelector = args[0];
       const parent = args[1];
 
       if (jqSelector === document) {
         return $doc;
-      } else if (jqSelector === ".order-by__dropdown .is-submenu-item a" && parent.is(subject.$element)) {
+      } else if (jqSelector === ".comment-order-by a.comment-order-by__item" && parent.is(subject.$element)) {
         return orderLinks;
       } else if (jqSelector === ".add-comment" && parent.is(subject.$element)) {
         return addComment;
-      } else if (jqSelector === ".add-comment .opinion-toggle .button" && parent.is(subject.$element)) {
+      } else if (jqSelector === ".add-comment .opinion-toggle button" && parent.is(subject.$element)) {
         return allToggles;
       } else if (jqSelector === ".add-comment textarea" && parent.is(subject.$element)) {
         return allTextareas;
@@ -78,7 +75,7 @@ describe("CommentsComponent", () => {
       }
       const addCommentsArray = addComment.toArray();
       for (let i = 0; i < addCommentsArray.length; i += 1) {
-        if (jqSelector === ".opinion-toggle .button" && parent.is(addCommentsArray[i].$)) {
+        if (jqSelector === ".opinion-toggle button" && parent.is(addCommentsArray[i].$)) {
           return addCommentsArray[i].opinionToggles;
         } else if (jqSelector === "form" && parent.is(addCommentsArray[i].$)) {
           return addCommentsArray[i].commentForm;
@@ -93,162 +90,186 @@ describe("CommentsComponent", () => {
   const generateCommentForm = (modelName, modelId) => {
     return `
       <form class="new_comment" id="new_comment_for_${modelName}_${modelId}" action="/comments?order=older" accept-charset="UTF-8" data-remote="true" method="post">
-        <input name="utf8" type="hidden" value="✓" />
-        <input type="hidden" value="commentable-gid" name="comment[commentable_gid]" />
-        <input class="alignment-input" type="hidden" value="0" name="comment[alignment]" />
-        <div class="field">
-          <label for="add-comment-${modelName}-${modelId}-user-group-id">
-            Comment as
-          </label>
-          <select id="add-comment-${modelName}-${modelId}-user-group-id" name="comment[user_group_id]">
-            <option value="">Dwain Oberbrunner</option>
-            <option value="4">Schmidt, Adams and Cassin</option>
-          </select>
+      <input class="alignment-input" autocomplete="off" type="hidden" value="0" name="comment[alignment]">
+      <div class="comment__as">
+      <label for="add-comment-${modelName}-${modelId}-user-group-id">
+        Comment as
+      </label>
+      <select id="add-comment-${modelName}-${modelId}-user-group-id" name="comment[user_group_id]">
+        <option value="">Renetta Okuneva</option>
+        <option value="6">Pollich-Ratke</option>
+      </select>
+    </div>
+
+      <div class="form__wrapper gap-2">
+        <label class="show-for-sr" for="add-comment-${modelName}-${modelId}">
+          Comment
+        </label>
+        <span class="emoji__container">
+          <textarea
+            required="required"
+            maxlength="1000"
+            id="add-comment-${modelName}-${modelId}"
+            class="w-full rounded border min-h-[160px] border-text-gray-2"
+            placeholder="What do you think about this?"
+            data-remaining-characters="#add-comment-${modelName}-${modelId}-remaining-characters"
+            data-input-emoji="true"
+            name="comment[body]"
+            aria-describedby="add-comment-${modelName}-${modelId}-remaining-characters_sr"
+            data-input-emoji-initialized="true"
+            data-tribute="true">
+          </textarea>
+          <span class="emoji__trigger">
+            <button class="emoji__button" type="button" aria-label="Add emoji">
+              <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
+                <path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z">
+                </path>
+              </svg>
+           </button>
+          </span>
+          <span class="emoji__reference" style="position: absolute; display: block; bottom: -8px; right: -16px;"></span>
+          <span class="form-error">There is an error in this field.</span>
+        </span>
+        <span role="status" id="add-comment-${modelName}-${modelId}-remaining-characters_sr" class="sr-only remaining-character-count-sr">1000 characters left</span>
+        <span id="add-comment-${modelName}-${modelId}-remaining-characters" class="remaining-character-count show-erb-comment" aria-hidden="true">1000 characters left</span>
+        <div class="w-full text-right">
+          <button type="submit" class="button button__sm button__secondary" disabled="disabled">
+            <span>Publish comment</span>
+            <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-chat-1-line" tabindex="-1"></use></svg>
+          </button>
         </div>
+      </div>
+    </form>
+    `;
+  };
 
-        <div class="field">
-          <label class="show-for-sr" for="add-comment-${modelName}-${modelId}">
-            Comment
-          </label>
-          <div class="hashtags__container">
-            <label for="comment_body">
-              Body
-              <span
-                  title=""
-                  data-tooltip="true"
-                  data-disable-hover="false"
-                  data-keep-on-hover="true"
-                  class="label-required has-tip"
-              >
-                <span aria-hidden="true">*</span><span class="show-for-sr">Required field</span>
+  const generateFlagModalForm = (commentId) => {
+    return `
+      <div id="flagModalComment${commentId}" data-dialog="flagModalComment${commentId}" role="dialog" tabindex="-1" aria-hidden="true" aria-labelledby="dialog-title-flagModalComment${commentId}" aria-modal="true"><div id="flagModalComment${commentId}-content"><button type="button" data-dialog-close="flagModalComment${commentId}" data-dialog-closable="" aria-label="Close modal">×</button>
+        <form class="modal__report form-defaults" novalidate="novalidate" data-abide="true" data-live-validate="true" data-validate-on-blur="true" action="/report?sgid=BAh7CEkiCGdpZAY6BkVUSSJBZ2lkOi8vZGVjaWRpbS1kZXZlbG9wbWVudC1hcHAvRGVjaWRpbTo6Q29tbWVudHM6OkNvbW1lbnQvODMyBjsAVEkiDHB1cnBvc2UGOwBUSSIMZGVmYXVsdAY7AFRJIg9leHBpcmVzX2F0BjsAVEkiHTIwMjMtMDEtMTlUMDM6MzA6MzMuNDM2WgY7AFQ%3D--7b3754f17d4b3f13b7065d98eba5b44a0d9af373" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="4gZ0SkWxuyZ0SyUWhphWwAju8XO4c44aOJr1zGRfbGC19ZssM1mhifceP4zjs8e6UQbOWGO921OMR_XxS4PBxw" autocomplete="off">
+          <div data-dialog-container="">
+            <svg width="1em" height="1em" role="img" aria-hidden="true" class="inline-block align-middle"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-flag-line" tabindex="-1"></use></svg>
+            <h3 data-dialog-title="" id="dialog-title-flagModalComment${commentId}">
+              Report inappropriate content
+            </h3>
+            <div>
+              <p class="modal__report-text">
+                Is this content inappropriate?
+              </p>
+              <fieldset>
+                <legend>Reason</legend>
+                <input type="hidden" name="report[reason]" value="" autocomplete="off">
+                  <div class="modal__report-container__radio">
+                    <input id="spam" type="radio" value="spam" checked="checked" name="report[reason]">
+                    <label for="spam">
+                      Contains clickbait, advertising, scams or script bots.
+                    </label>
+                  </div>
+
+                  <div class="modal__report-container__radio">
+                    <input id="offensive" type="radio" value="offensive" name="report[reason]">
+                    <label for="offensive">
+                      Contains racism, sexism, slurs, personal attacks, death threats, suicide requests or any form of hate speech.
+                    </label>
+                  </div>
+
+                  <div class="modal__report-container__radio">
+                    <input id="does_not_belong" type="radio" value="does_not_belong" name="report[reason]">
+                    <label for="does_not_belong">
+                      Contains illegal activity, suicide threats, personal information, or something else you think does not belong on Reichel, Bernhard and Glover.
+                    </label>
+                  </div>
+              </fieldset>
+              <label for="flagModalComment${commentId}" class="text-gray-2">Additional comments<textarea class="w-full rounded border min-h-[160px] border-text-gray-2 mt-2" id="flagModalComment${commentId}" name="report[details]"></textarea></label>
+            </div>
+          </div>
+          <div data-dialog-actions="">
+            <button type="submit" class="button button__lg button__secondary">
+              <span>
+                Report
               </span>
-              <textarea
-                required="required"
-                maxlength="1000"
-                id="add-comment-Comment-${modelId}"
-                rows="4"
-                placeholder="What do you think about this?"
-                data-tribute="true"
-                data-remaining-characters="#add-comment-${modelName}-${modelId}-remaining-characters"
-                name="comment[body]"
-              ></textarea>
-              <span class="form-error">There's an error in this field.</span>
-            </label>
+              <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-arrow-right-line" tabindex="-1"></use></svg>
+            </button>
           </div>
-          <button type="submit" class="button button--sc" disabled="disabled">Send</button>
-          <span id="add-comment-${modelName}-${modelId}-remaining-characters" class="remaining-character-count">1000 characters left</span>
-        </div>
-      </form>
+        </form>
+      </div>
     `;
-  };
+  }
 
   const generateSingleComment = (commentId, content, replies = "") => {
     return `
-      <div id="comment_${commentId}" class="comment comment--nested" data-comment-id="${commentId}">
+      <div id="comment_${commentId}" class="comment" data-comment-id="${commentId}">
         <div class="comment__header">
-          <div class="author-data">
-            <div class="author-data__main">
-              <div class="author author--inline">
-                <a href="/profiles/eusebio_rempel">
-                  <span class="author__avatar">
-                    <img alt="Avatar" src="/assets/decidim/default-avatar-123.svg" />
-                  </span>
-                  <span
-                    class="author__name m-none has-tip"
-                    data-position="top"
-                    data-show-on="medium"
-                    data-alignment="center"
-                    data-click-open="false"
-                    data-keep-on-hover="true"
-                    data-allow-html="true"
-                    data-template-classes="light expanded"
-                    data-tip-text="Tip text"
-                    title=""
-                  >Dwain Oberbrunner</span>
-                </a>
-              </div>
-
-              <span>
-                <time datetime="2020-09-28T17:15:08Z">28/09/2020 17:15</time>
+          <span class="font-bold">
+            <a class="flex items-center gap-2.5" href="/profiles/kathline">
+              <span class="rounded-full overflow-hidden inline-block w-6 h-6">
+                <img alt="Avatar: Buster Hammes" class="w-full h-full object-cover" src="/decidim-packs/media/images/default-avatar-aaa9e55bac5d7159b847.svg">
               </span>
-            </div>
-            <div class="author-data__extra">
-                <button type="button" class="link-alt" data-open="flagModalComment${commentId}" title="Report inappropriate content" aria-controls="flagModalComment${commentId}" aria-haspopup="dialog" tabindex="0">
-                  <svg role="img" aria-hidden="true" class="icon--flag icon icon--small">
-                    <title></title>
-                    <use href="/assets/decidim/icons-123.svg#icon-flag"></use>
-                  </svg>
-                  <span class="show-for-sr">Report inappropriate content</span>
+              <span>Buster Hammes</span>
+            </a>
+          </span>
+          <span class="text-gray-2 text-sm"><time datetime="2022-12-15T11:19:22Z">4 days ago</time></span>
+          <details class="ml-auto">
+            <summary class="button button__sm button__text-secondary" aria-controls="toggle-context-menu-${commentId}">
+              <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-more-line" tabindex="-1"></use></svg>
+            </summary>
+            <ul id="toggle-context-menu-${commentId}" class="dropdown dropdown__bottom divide-y divide-gray-3 px-4">
+              <li>
+                <button type="button" class="dropdown__item" data-dialog-open="flagModalComment${commentId}" title="Report" aria-controls="flagModalComment${commentId}" aria-haspopup="dialog" tabindex="0">
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-flag-line" tabindex="-1"></use></svg>
+                  <span>Report</span>
                 </button>
-
-                <a title="Get link to single comment" href="/path/to/dummy/123?commentId=${commentId}#comment_${commentId}">
-                  <span class="show-for-sr">Get link to single comment</span>
-                  <svg role="img" aria-hidden="true" class="icon--link-intact icon icon--small">
-                    <title></title>
-                    <use href="/assets/decidim/icons-123.svg#icon-link-intact"></use>
-                  </svg>
-                </a>
-            </div>
-          </div>
+              </li>
+              <li>
+                <a target="_blank" data-external-link="false" class="dropdown__item" title="Get link" tabindex="1" href="/processes/enim-consectetur/f/9/posts/2?commentId=${commentId}#comment_${commentId}">
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-share-line" tabindex="-1"></use></svg>
+                  <span>Get link</span>
+                <span class="inline-block mx-0.5"><svg class="icon icon--external-link w-2 h-2 fill-current" role="img" aria-hidden="true"><title>external-link</title><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#icon-external-link"></use></svg><span class="sr-only">(External link)</span></span></a>
+              </li>
+            </ul>
+          </details>
+          ${generateFlagModalForm(commentId)}
         </div>
         <div class="comment__content">
-          <p>${content}</p>
+          <div><p>${content}</p></div>
         </div>
-        <div class="comment__footer">
+        <div class="comment__footer" data-component="accordion" role="presentation">
+          <div class="comment__footer-grid">
             <div class="comment__actions">
-              <button class="comment__reply muted-link" aria-controls="comment${commentId}-reply" data-toggle="comment${commentId}-reply" aria-expanded="true">
-                <svg role="img" aria-hidden="true" class="icon--pencil icon icon--small">
-                  <title></title>
-                  <use href="/assets/decidim/icons-123.svg#icon-pencil"></use>
-                </svg>
-                &nbsp;Reply
+              <button class="button button__sm button__text-secondary" data-controls="panel-comment${commentId}-reply" role="button" tabindex="0" aria-controls="panel-comment${commentId}-reply" aria-expanded="false" aria-disabled="false">
+                <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-chat-1-line" tabindex="-1"></use></svg>
+                <span class="font-normal">Reply</span>
+                <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-close-circle-line" tabindex="-1"></use></svg>
+                <span class="font-normal">Cancel reply</span>
               </button>
             </div>
-
             <div class="comment__votes">
               <form class="button_to" method="post" action="/comments/${commentId}/votes?weight=1" data-remote="true">
-                <button class="comment__votes--up" title="I agree with this comment" type="submit">
-                  <span class="show-for-sr">I agree with this comment</span>
-                  <svg role="img" aria-hidden="true" class="icon--chevron-top icon icon--small">
-                    <title></title>
-                    <use href="/assets/decidim/icons-123.svg#icon-chevron-top"></use>
-                  </svg>
-                  <span class="comment__votes--count">0</span>
+                <button class="button button__sm button__text-secondary js-comment__votes--up" title="I agree with this comment" type="submit">
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-up-line" tabindex="-1"></use></svg>
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-up-fill" tabindex="-1"></use></svg>
+                  <span>0</span>
                 </button>
-                <input type="hidden" name="authenticity_token" value="xyz123" />
+                <input type="hidden" name="authenticity_token" value="knr7y99HXbKv5sdm5OlghBlFsjIX7KOnIvHZ5-vXThb87Qszlh8j_CPxdbhsiqcIPAwvofsM9zR0vWFgojq6dA" autocomplete="off">
               </form>
-
               <form class="button_to" method="post" action="/comments/${commentId}/votes?weight=-1" data-remote="true">
-                <button class="comment__votes--down" title="I disagree with this comment" type="submit">
-                  <span class="show-for-sr">I disagree with this comment</span>
-                  <svg role="img" aria-hidden="true" class="icon--chevron-bottom icon icon--small">
-                    <title></title>
-                    <use href="/assets/decidim/icons-123.svg#icon-chevron-bottom"></use>
-                  </svg>
-                  <span class="comment__votes--count">0</span>
+                <button class="button button__sm button__text-secondary js-comment__votes--down" title="I disagree with this comment" type="submit">
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-down-line" tabindex="-1"></use></svg>
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-down-fill" tabindex="-1"></use></svg>
+                  <span>0</span>
                 </button>
-                <input type="hidden" name="authenticity_token" value="xyz123" />
+                <input type="hidden" name="authenticity_token" value="OOIZTq0QSU1CB6OXV1D6j337zCgOA6al6xDOmy_qlZpWdem25Eg3A84QEUnfMz0DWLJRu-Lj8ja9XHYcZgdh-A" autocomplete="off">
               </form>
             </div>
+          </div>
+          <div id="panel-comment${commentId}-reply" class="add-comment" role="region" tabindex="-1" aria-labelledby="" aria-hidden="true">
+            ${generateCommentForm("Comment", commentId)}
+          </div>
         </div>
         <div id="comment-${commentId}-replies">${replies}</div>
-
-        <div class="comment__additionalreply hide">
-          <button class="comment__reply muted-link" aria-controls="comment${commentId}-reply" data-toggle="comment${commentId}-reply" aria-expanded="true">
-            <svg role="img" aria-hidden="true" class="icon--pencil icon icon--small">
-              <title></title>
-              <use href="/assets/decidim/icons-123.svg#icon-pencil"></use>
-            </svg>
-            &nbsp;Reply
-          </button>
-        </div>
-
-        <div class="add-comment hide" id="comment${commentId}-reply" data-toggler=".hide">
-          ${generateCommentForm("Comment", commentId)}
-        </div>
       </div>
     `;
-  };
+  }
 
   const generateCommentThread = (commentId, content, replies = "") => {
     return `
@@ -262,33 +283,23 @@ describe("CommentsComponent", () => {
 
   beforeEach(() => {
     let orderSelector = `
-      <ul id="comments-order-menu" class="dropdown menu" data-dropdown-menu="data-dropdown-menu" data-autoclose="false" data-disable-hover="true" data-click-open="true" data-close-on-click="true" tabindex="-1" role="menubar">
-        <li class="is-dropdown-submenu-parent opens-right" tabindex="-1" role="none">
-          <a href="#" id="comments-order-menu-control" aria-label="Order by:" aria-controls="comments-order-menu" aria-haspopup="menu" role="menuitem">Older</a>
-          <ul class="menu is-dropdown-submenu submenu first-sub vertical" id="comments-order-chooser-menu" role="menu" aria-labelledby="comments-order-menu-control" tabindex="-1" data-submenu="">
-            <li role="none" class="is-submenu-item is-dropdown-submenu-item">
-              <a tabindex="-1" role="menuitem" data-remote="true" href="/comments?commentable_gid=commentable-gid&amp;order=best_rated&amp;reload=1">
-                Best rated
-              </a>
-            </li>
-            <li role="none" class="is-submenu-item is-dropdown-submenu-item">
-              <a tabindex="-1" role="menuitem" data-remote="true" href="/comments?commentable_gid=commentable-gid&amp;order=recent&amp;reload=1">
-                Recent
-              </a>
-            </li>
-            <li role="none" class="is-submenu-item is-dropdown-submenu-item">
-              <a tabindex="-1" role="menuitem" data-remote="true" href="/comments?commentable_gid=commentable-gid&amp;order=older&amp;reload=1">
-                Older
-              </a>
-            </li>
-            <li role="none" class="is-submenu-item is-dropdown-submenu-item">
-              <a tabindex="-1" role="menuitem" data-remote="true" href="/comments?commentable_gid=commentable-gid&amp;order=most_discussed&amp;reload=1">
-                Most discussed
-              </a>
-            </li>
-          </ul>
-        </li>
-      </ul>
+      <div class="comment-order-by">
+        <div class="text-center">
+          <a class="button button__sm button__text-secondary only:m-auto comment-order-by__item inline-block " data-remote="true" href="/comments?commentable_gid=commentable-gid&amp;order=best_rated&amp;reload=1">Best rated</a>
+        </div>
+
+        <div class="text-center">
+          <a class="button button__sm button__text-secondary only:m-auto comment-order-by__item inline-block " data-remote="true" href="/comments?commentable_gid=commentable-gid&amp;order=recent&amp;reload=1">Recent</a>
+        </div>
+
+        <div class="text-center">
+          <a class="button button__sm button__text-secondary only:m-auto comment-order-by__item inline-block underline font-bold" data-remote="true" href="/comments?commentable_gid=commentable-gid&amp;order=older&amp;reload=1">Older</a>
+        </div>
+
+        <div class="text-center">
+          <a class="button button__sm button__text-secondary only:m-auto comment-order-by__item inline-block " data-remote="true" href="/comments?commentable_gid=commentable-gid&amp;order=most_discussed&amp;reload=1">Most discussed</a>
+        </div>
+      </div>
     `;
 
     let reply = generateSingleComment(451, "This is a reply.");
@@ -297,14 +308,14 @@ describe("CommentsComponent", () => {
 
     let comments = `
       <div id="comments-for-Dummy-123" data-decidim-comments='{"singleComment":false,"toggleTranslations":false,"commentableGid":"commentable-gid","commentsUrl":"/comments","rootDepth":0,"lastCommentId":456,"order":"older"}'>
-        <div class="columns large-9 comments-container" id="comments">
+        <div id="comments">
           <div class="comments">
-            <div class="row collapse order-by">
-              <h2 class="order-by__text section-heading">3 comments</h2>
-              <div class="order-by__dropdown order-by__dropdown--right">
-                <span class="order-by__text">Order by:</span>
-                ${orderSelector}
-              </div>
+            <div class="comments__header">
+              <h2 class="h4">
+              <svg width="1em" height="1em" role="img" aria-hidden="true" class="fill-tertiary w-6 h-6 inline-block align-middle"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-chat-1-line" tabindex="-1"></use></svg>
+                <span class="comments-count inline-block align-middle">3 comments</span>
+              </h2>
+              ${orderSelector}
             </div>
 
             <div class="comment-threads">
@@ -312,38 +323,35 @@ describe("CommentsComponent", () => {
               ${secondThread}
             </div>
             <div class="add-comment">
-              <h4 class="section-heading">Add your comment</h4>
-
-              <div class="opinion-toggle button-group">
-                <button aria-pressed="false" class="button tiny button--muted opinion-toggle--ok" data-selected-label="Your opinion about this topic is positive">
-                  <svg role="img" aria-hidden="true" class="icon--thumb-up icon">
-                    <title></title>
-                    <use href="/assets/decidim/icons-2ba788b32e181c1a7197f7a54a0f03101c146dd434b9e56191690c7c2d7bdae3.svg#icon-thumb-up"></use>
-                  </svg>
+              <div class="opinion-toggle button-group comment__opinion-container">
+                <span class="show-for-sr py-1.5">Your opinion about this topic</span>
+                <button aria-pressed="false" class="button button__sm button__text-secondary opinion-toggle--ok" data-selected-label="Your opinion about this topic is positive">
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-up-line" tabindex="-1"></use></svg>
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-up-fill" tabindex="-1"></use></svg>
                   <span class="show-for-sr">Positive</span>
                 </button>
-                <button aria-pressed="true" class="button tiny button--muted opinion-toggle--meh is-active" data-selected-label="Your opinion about this topic is neutral">
-                  Neutral
+                <button aria-pressed="true" class="button button__sm button__text-secondary opinion-toggle--meh is-active" data-selected-label="Your opinion about this topic is neutral">
+                  <span class="show-for-sr">Neutral
+                  </span>
                 </button>
-                <button aria-pressed="false" class="button tiny button--muted opinion-toggle--ko" data-selected-label="Your opinion about this topic is negative">
-                  <svg role="img" aria-hidden="true" class="icon--thumb-down icon">
-                    <title></title>
-                    <use href="/assets/decidim/icons-2ba788b32e181c1a7197f7a54a0f03101c146dd434b9e56191690c7c2d7bdae3.svg#icon-thumb-down"></use>
-                  </svg>
+                <button aria-pressed="false" class="button button__sm button__text-secondary opinion-toggle--ko" data-selected-label="Your opinion about this topic is negative">
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-down-line" tabindex="-1"></use></svg>
+                  <svg width="1em" height="1em" role="img" aria-hidden="true"><use href="/decidim-packs/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-thumb-down-fill" tabindex="-1"></use></svg>
                   <span class="show-for-sr">Negative</span>
                 </button>
-                <div role="alert" aria-live="assertive" aria-atomic="true" class="selected-state shot-for-sr"></div>
+                <div role="alert" aria-live="assertive" aria-atomic="true" class="selected-state sr-only"></div>
               </div>
-
               ${generateCommentForm("Dummy", 123)}
             </div>
-          </div>
-          <div class="callout primary loading-comments hide">
-            <p>Loading comments ...</p>
-          </div>
+            <div class="flash primary loading-comments hidden">
+              <span class="flash__message">
+                Loading comments ...
+              </span>
+            </div>
         </div>
       </div>
     `;
+
     $("body").append(comments);
 
     $container = $(document).find(selector);
@@ -361,7 +369,7 @@ describe("CommentsComponent", () => {
 
     $doc = $(document);
     addComment = $(".add-comment", subject.$element);
-    orderLinks = $(".order-by__dropdown .is-submenu-item a", subject.$element);
+    orderLinks = $(".comment-order-by a.comment-order-by__item", subject.$element);
 
     allToggles = $(".add-comment .opinion-toggle .button", subject.$element);
     allTextareas = $(".add-comment textarea", subject.$element);
@@ -377,7 +385,7 @@ describe("CommentsComponent", () => {
   });
 
   it("initializes the comments element with the given selector", () => {
-    expect(subject.$element).toEqual($(selector));
+    expect(subject.$element[0]).toEqual($(selector)[0]);
   });
 
   it("loads the comments through AJAX", () => {
@@ -411,6 +419,7 @@ describe("CommentsComponent", () => {
   });
 
   it("starts polling for new comments", () => {
+    jest.spyOn(window, "setTimeout");
     Rails.ajax.mockImplementationOnce((options) => options.success());
 
     subject.mountComponent();
@@ -426,7 +435,7 @@ describe("CommentsComponent", () => {
     // Delay the success call 2s after the polling has happened to test that
     // the textarea is still enabled when the polling is happening.
     Rails.ajax.mockImplementationOnce((options) => {
-      setTimeout(options.success(), 2000);
+      setTimeout(() => options.success(), 2000);
     });
     jest.advanceTimersByTime(1500);
 
@@ -436,8 +445,8 @@ describe("CommentsComponent", () => {
   describe("when mounted", () => {
     beforeEach(() => {
       spyOnAddComment("on");
-      spyOn(orderLinks, "on");
-      spyOn($doc, "trigger");
+      jest.spyOn(orderLinks, "on");
+      jest.spyOn($doc, "trigger");
 
       subject.mountComponent();
     });
@@ -450,13 +459,6 @@ describe("CommentsComponent", () => {
       expect(subject.mounted).toBeTruthy();
     });
 
-    it("binds the order selector events", () => {
-      expect(orderLinks.on).toHaveBeenCalledWith(
-        "click.decidim-comments",
-        expect.any(Function)
-      );
-    });
-
     it("binds the add comment element events", () => {
       addComment.each((i) => {
         expect(addComment[i].opinionToggles.on).toHaveBeenCalledWith(
@@ -519,7 +521,7 @@ describe("CommentsComponent", () => {
       });
 
       it("disables the submit button on submit and stops polling", () => {
-        spyOn(window, "clearTimeout");
+        jest.spyOn(window, "clearTimeout");
 
         commentText.html("This is a test comment")
         commentText.trigger("input");
@@ -633,7 +635,7 @@ describe("CommentsComponent", () => {
       });
 
       it("does not clear the reply comment form text area", () => {
-        const commentSection = $("#comment450-reply", subject.$element);
+        const commentSection = $("#comment-450-replies", subject.$element);
         const textArea = $("textarea", commentSection);
         textArea.val("I am writing a new comment...");
 
@@ -642,18 +644,9 @@ describe("CommentsComponent", () => {
         expect(textArea.val()).toEqual("I am writing a new comment...");
       });
 
-      it("does not hide the reply form", () => {
-        const commentSection = $("#comment450-reply", subject.$element);
-        commentSection.removeClass("hide");
-
-        subject.addReply(450, newReply);
-
-        expect(commentSection.hasClass("hide")).toBeFalsy();
-      });
-
       describe("as the current user", () => {
         it("clears the comment form text area", () => {
-          const commentSection = $("#comment450-reply", subject.$element);
+          const commentSection = $(".add-comment", subject.$element);
           const textArea = $("textarea", commentSection);
           textArea.val("I am writing a new comment...");
 
@@ -661,25 +654,16 @@ describe("CommentsComponent", () => {
 
           expect(textArea.val()).toEqual("");
         });
-
-        it("hides the reply form", () => {
-          const commentSection = $("#comment450-reply", subject.$element);
-          commentSection.removeClass("hide");
-
-          subject.addReply(450, newReply, true);
-
-          expect(commentSection.hasClass("hide")).toBeTruthy();
-        });
       });
     });
   });
 
   describe("when unmounted", () => {
     beforeEach(() => {
-      spyOn(orderLinks, "off");
-      spyOn(allToggles, "off");
-      spyOn(allTextareas, "off");
-      spyOn(allForms, "off");
+      jest.spyOn(orderLinks, "off");
+      jest.spyOn(allToggles, "off");
+      jest.spyOn(allTextareas, "off");
+      jest.spyOn(allForms, "off");
 
       subject.mountComponent();
       subject.unmountComponent();
@@ -689,12 +673,6 @@ describe("CommentsComponent", () => {
       expect(subject.mounted).toBeFalsy();
     });
 
-    it("unbinds the order selector events", () => {
-      expect(orderLinks.off).toHaveBeenCalledWith(
-        "click.decidim-comments"
-      );
-    });
-
     it("unbinds the add comment element events", () => {
       expect(allToggles.off).toHaveBeenCalledWith("click.decidim-comments");
       expect(allTextareas.off).toHaveBeenCalledWith("input.decidim-comments");