Resolving conflict with merge for 8.x-3.x-ISTWCMS-3831 branch (Who's online block)

source/_meta/_01-foot.twig

@@ -13,6 +13,7 @@
     <script src="../../../js/dist/scripts.min.js?{{ cacheBuster }}"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js?{{ cacheBuster }}"></script>
     <script src="../../../../js/component_scripts.min.js"></script>
+    <script src="../../../source/_patterns/04-components/whos-online/whos-online.js?{{ cacheBuster }}"></script>
 
     <!--DO NOT REMOVE-->
     {{ patternLabFoot | raw }}

source/_patterns/04-components/whos-online/_whos-online.scss

+.uw-whos-online-block {
+  h3 {
+    font-size: 15px;
+    margin: 0 0 0 -5px;
+  }
+
+  span {
+    display: inline;
+
+    &:last-child {
+      display: inline;
+      font-size: 80%;
+      font-weight: bold;
+    }
+  }
+
+  button {
+    background: none;
+    border: 0;
+    color: inherit;
+    cursor: pointer;
+    font-family: inherit;
+    font-size: inherit;
+    margin: 0;
+    padding: 0;
+
+    &:focus {
+      border-bottom: 1px dotted #000;
+      margin-bottom: -1px;
+    }
+  }
+}

source/_patterns/04-components/whos-online/whos-online.js

+(function($) {
+  Drupal.behaviors.responsive_menu_combined = {
+    attach: function (context, settings) {
+      'use strict';
+
+      // Close "other users" by default.
+      $('.uw_other h3 span:first-child').html('▸');
+      $('.uw_other ul').hide();
+      // Since we're making the headers visible, wrap them in a button.
+      $('.uw-whos-online-block h3').wrapInner('<button></button>');
+      // Add appropriate ARIA attributes for default states.
+      $('.uw_privileged button').attr('aria-expanded', 'true');
+      $('.uw_other button').attr('aria-expanded', 'false');
+      // Handle show/hide.
+      $('.uw-whos-online-block button').on('click', function() {
+        let $list = $(this).closest('div').find('ul');
+        if ($list.is(":visible")) {
+          $list.hide();
+          $('span:first-child',this).html('&#9656;');
+          $(this).attr('aria-expanded', 'false');
+        } else {
+          $list.show();
+          $('span:first-child',this).html('&#9662;');
+          $(this).attr('aria-expanded', 'true');
+        }
+      });
+    }
+  };
+})(jQuery);

source/_patterns/04-components/whos-online/whos-online.md

+---
+el: .whos-online
+title: Who's online
+---
+
+__Variables:__
+* privileged [list] List of users with privileged roles.
+* others [list] List of users with all other roles.

source/_patterns/04-components/whos-online/whos-online.twig

+<div class="uw-whos-online-block">
+  {% if privileged or others %}
+    <div class="uw_privileged">
+      <h3><span>&#9662;</span> Privileged users <span>({{ privileged|length }})</span></h3>
+      <ul>
+        {% if privileged %}
+          {% for name in privileged %}
+            <li>{{ name }}</li>
+          {% endfor %}
+        {% else %}
+          {{ 'No online users.'|t }}
+        {% endif %}
+      </ul>
+    </div>
+    <div class="uw_other">
+      <h3><span>&#9662;</span> Other users <span>({{ others|length }})</span></h3>
+      <ul>
+        {% if others %}
+          {% for name in others %}
+            <li>{{ name }}</li>
+          {% endfor %}
+        {% else %}
+          <li>None</li>
+        {% endif %}
+      </ul>
+    </div>
+  {% else %}
+    {{ 'No online users.'|t }}
+  {% endif %}
+</div>

source/_patterns/04-components/whos-online/whos-online.yml

+privileged:
+  - user1
+  - user3
+
+others:
+  - user2