feat(drawer): add rails expand/contract setup

docs/lib/sage_rails/app/sage_components/sage_drawer.rb

@@ -1,11 +1,16 @@
 class SageDrawer < SageComponent
   set_attribute_schema({
     active: [:optional, NilClass, TrueClass],
+    disable_background_blur: [:optional, NilClass, TrueClass],
+    disable_background_dismiss: [:optional, NilClass, TrueClass],
+    expanded: [:optional, NilClass, TrueClass],
+    expanded_size: [:optional, NilClass, String],
     id: [:optional, NilClass, String],
+    size: [:optional, NilClass, String],
     show_close: [:optional, TrueClass],
     title: [:optional, String],
   })
   def sections
-    %w(drawer_header)
+    %w(drawer_header, drawer_expanded_area)
   end
 end

docs/lib/sage_rails/app/sage_components/sage_modal.rb

@@ -5,7 +5,7 @@ class SageModal < SageComponent
     animate: [:optional, String, TrueClass, {
       direction: [:optional, String, Set.new(["bottom", "top", "left", "right"])]
     }],
-    disable_background_blur: [:optional, TrueClass],
+    disable_background_blur: [:optional, NilClass, TrueClass],
     disable_background_dismiss: [:optional, NilClass, TrueClass],
     disable_close: [:optional, TrueClass],
     fullscreen: [:optional, TrueClass],

docs/lib/sage_rails/app/views/sage_components/themes/legacy/_sage_drawer.html.erb

@@ -1,12 +1,29 @@
-// TODO: Add drawer expansion in Rails
+<%
+show_close = component.show_close.present? ? component.show_close : true
+styles = component.html_attributes[:style].present? ? styles : ""
 
-<% show_close = component.show_close.present? ? component.show_close : true %>
+if component.size
+  styles += " --sage-drawer-size: #{component.size};"
+end
+
+if component.expanded_size
+  styles += " --sage-drawer-expanded-size: #{component.expanded_size};"
+end
+
+html_attributes = component.html_attributes.present? ? html_attributes.merge!({ style: styles }) : { style: styles }
+%>
 <%= sage_component SageModal, {
   active: component.active,
   animate: { direction: "left" },
-  css_classes: "sage-drawer #{component.generated_css_classes}",
-  disable_background_dismiss: true,
+  css_classes: "
+    sage-drawer
+    #{"sage-drawer--expanded" if component.expanded}
+    #{component.generated_css_classes}
+  ",
+  disable_background_blur: component.disable_background_blur,
+  disable_background_dismiss: component.disable_background_blur,
   id: component.id,
+  html_attributes: html_attributes,
 } do %>
   <%= sage_component SageModalContent, { spacing: "panel", title: component.title } do %>
     <% if content_for?(:sage_drawer_header) %>

packages/sage-assets/lib/stylesheets/themes/legacy/components/_drawer.scss

@@ -13,6 +13,11 @@
   padding: 0;
 }
 
+[data-js-drawer-expanded-content].sage-drawer__hidden-content,
+[data-js-drawer-collapsed-content].sage-drawer__hidden-content {
+  @include visually-hidden();
+}
+
 .sage-drawer--no-screen {
   background: none;
 }

packages/sage-system/lib/drawer.js

@@ -0,0 +1,92 @@
+import { forEach } from "lodash";
+
+Sage.drawerExpandCollapse = (() => {
+  // ==================================================
+  // Variables
+  // ==================================================
+
+  const DRAWER_ANIMATION_TIMEOUT = 500;
+  const CLASSNAME_DRAWER_EXPANDED = "sage-drawer--expanded";
+  const CLASSNAME_DRAWER_HIDDEN_CONTENT = "sage-drawer__hidden-content";
+  const SELECTOR_COLLAPSED_CONTENT = "[data-js-drawer-collapsed-content]";
+  const SELECTOR_EXPANDED_CONTENT = "[data-js-drawer-expanded-content]";
+
+  // ==================================================
+  // Functions
+  // ==================================================
+
+  // Select the modal targeted by an expand or contract trigger
+  const getTargetModal = (modalTarget) => document.querySelector(`[data-js-modal="${modalTarget}"`);
+
+  // After a timer expires reveal elements within a given modal
+  const showContentAfterTimer = ($elModal, selector) => {
+    setTimeout(
+      () => $elModal.querySelectorAll(selector).forEach(
+        el => el.classList.remove(CLASSNAME_DRAWER_HIDDEN_CONTENT)
+      ),
+      DRAWER_ANIMATION_TIMEOUT
+    );
+  };
+
+  // Immediately hide elements with a given a given modal
+  const hideContentImmediately = ($elModal, selector) => $elModal
+    .querySelectorAll(selector)
+    .forEach(
+      el => el.classList.add(CLASSNAME_DRAWER_HIDDEN_CONTENT)
+    );
+
+  // Process click on a expand trigger
+  const expandDrawer = (evt) => {
+    // Retrieve the modal target from the trigger
+    const $elModal = getTargetModal(evt.target.dataset.jsDrawerExpand);
+
+    // Add expanded class to the modal
+    $elModal.classList.add(CLASSNAME_DRAWER_EXPANDED);
+
+    // Immediately hide collapsed-only content
+    hideContentImmediately($elModal, SELECTOR_COLLAPSED_CONTENT);
+
+    // After animation finishes, reveal expanded-only content
+    showContentAfterTimer($elModal, SELECTOR_EXPANDED_CONTENT);
+  };
+
+  // Process click on a collapse trigger
+  const collapseDrawer = (evt) => {
+    // Retrieve the modal target from the trigger
+    const $elModal = getTargetModal(evt.target.dataset.jsDrawerCollapse);
+
+    // Remove expanded class from the modal
+    $elModal.classList.remove(CLASSNAME_DRAWER_EXPANDED);
+
+    // Immediately hide expanded-only content
+    hideContentImmediately($elModal, SELECTOR_EXPANDED_CONTENT);
+
+    // After animation finishes, reveal collapsed-only content
+    showContentAfterTimer($elModal, SELECTOR_COLLAPSED_CONTENT);
+  };
+
+  // Hides all expanded-only content right away
+  const initExpandCollapse = (el) => {
+    el.classList.add(CLASSNAME_DRAWER_HIDDEN_CONTENT);
+  };
+
+  // Listens for clicks on expand triggers
+  const initExpand = (el) => el.addEventListener("click", expandDrawer);
+
+  // Removes listener for clicks on expand triggers
+  const unbindExpand = (el) => el.removeEventListener("click", expandDrawer);
+
+  // Listens for clicks on collapse triggers
+  const initCollapse = (el) => el.addEventListener("click", collapseDrawer);
+
+  // Removes listener for clicks on collapse triggers
+  const unbindCollapse = (el) => el.removeEventListener("click", collapseDrawer);
+
+  return {
+    initExpandCollapse,
+    initExpand,
+    unbindExpand,
+    initCollapse,
+    unbindCollapse,
+  };
+})();

packages/sage-system/lib/index.js

@@ -26,5 +26,6 @@ require('./popover')
 require('./search')
 require('./dynamicSelect')
 require('./carousel')
+require('./drawer')
 
 require('./init')

packages/sage-system/lib/init.js

@@ -54,6 +54,9 @@ Sage.init = function(elementNamesToInitLegacy) {
   initDocumentPresenceListener('[data-js-carousel]',                             Sage.carousel.init,      false);
   initDocumentPresenceListener('[data-js-alert]', Sage.alert.init, false);
   initDocumentPresenceListener('[data-js-list-sortable]', Sage.sortableList.init, Sage.sortableList.unbind);
+  initDocumentPresenceListener('[data-js-drawer-expand]', Sage.drawerExpandCollapse.initExpand, Sage.drawerExpandCollapse.unbindExpand);
+  initDocumentPresenceListener('[data-js-drawer-collapse]', Sage.drawerExpandCollapse.initCollapse, Sage.drawerExpandCollapse.unbindCollapse);
+  initDocumentPresenceListener('[data-js-drawer-expanded-content]', Sage.drawerExpandCollapse.initExpandCollapse, false);
 
   // ==================================================
   // Event Listeners