Drawer

A drawer is a component that animates in, over content, to provide more information. A drawer is composed of a header and a content area.

React Component

Sage Component

SageDrawer

<%
heading_specs = "#{SageClassnames::TYPE::HEADING_4} #{SageClassnames::TYPE_COLORS::GREY_950}"
modal_primary_content = %(
  <h3 class="#{heading_specs}">
    Drawer
  </h3>
  <p>👋  Any content can go here.</p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Esse quam assumenda a ut, architecto rerum vel quisquam, repellendus nemo quo saepe at voluptatem eveniet earum laudantium nostrum quibusdam?
    Repellendus, repudiandae.
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Eum in deleniti doloribus sequi ipsam unde pariatur perspiciatis ex molestias temporibus accusantium fuga debitis, voluptates hic eos ab perferendis ad quo.
  </p>
).html_safe

modal_additional_content = %(
  <h3 class="#{heading_specs}">
    Drawer Expanded area
  </h3>
  <p>👋  Any content can go here.</p>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Esse quam assumenda a ut, architecto rerum vel quisquam, repellendus nemo quo saepe at voluptatem eveniet earum laudantium nostrum quibusdam?
    Repellendus, repudiandae.
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Eum in deleniti doloribus sequi ipsam unde pariatur perspiciatis ex molestias temporibus accusantium fuga debitis, voluptates hic eos ab perferendis ad quo.
  </p>
).html_safe
%>

<%= sage_component SageButton, {
  value: "Open Drawer",
  style: "primary",
  html_attributes: {
    "data-js-modaltrigger": "test-drawer",
  },
} %>

<% content_for :sage_docs_modals do %>
  <%= sage_component SageDrawer, {
    id: "test-drawer",
    show_close: true,
    size: "33vw",
    expanded_size: "100vw",
    disable_background_dismiss: false,
  } do %>
    <% content_for :sage_drawer_header do %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        value: "Expand",
        icon: { name: "move-left", style: "left" },
        attributes: {
          "data-js-drawer-expand": "test-drawer",
          "data-js-drawer-collapsed-content": true,
        }
      } %>
      <%= sage_component SageButton, {
        style: "secondary",
        subtle: true,
        value: "Collapse",
        icon: { name: "move-right", style: "left" },
        attributes: {
          "data-js-drawer-collapse": "test-drawer",
          "data-js-drawer-expanded-content": true,
        }
      } %>
    <% end %>

    <div data-js-drawer-collapsed-content>
      <%= modal_primary_content %>
    </div>

    <%= sage_component SageGridRow, { html_attributes: { "data-js-drawer-expanded-content": true }} do %>
      <%= sage_component SageGridCol, { size: 4 } do %>
        <%= modal_primary_content %>
      <% end %>
      <%= sage_component SageGridCol, { size: 8 } do %>
        <%= modal_additional_content %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Property	Description	Type	Default
`active`	Whether or not the Drawer should load active by default.	Boolean	`false`
`disable_background_dismiss`	Whether or not the background behind the Drawer should function as a "dismiss" area that, when clicked, closes the Drawer.	Boolean	`true`
`expanded`	Whether or not the Drawer should start as larger/expanded	Boolean	`false`
`expanded_size`	Sets the size of the Drawer when it is in larger/expanded mode.	String	`nil` (CSS default is `300px`)
`id`	Unique identifier for the Drawer that is used to trigger actions on the Drawer, similar to Modal.	String	`nil`
`size`	Sets the size of the Drawer when it is in smaller/collapsed mode (default after first activated).	String	`nil` (CSS default is `100vw`
`show_close`	Toggles whether or not to show the default Close button including built-in dismiss functionality.	Boolean	`true`
`title`	Sets a title to use for the drawer. Note that the `drawer_header` slot can be used instead to provide custom content for the header area if desired.	String	`nil`
Events
This component implements the `SageModal` behind the scenes so all events from `SageModal` are in play here too.
Sections	`Element`
`sage_drawer_header`	Provide custom content for the header instead of a simple title.
Custom HTML Attributes	Description		Value
`data-js-drawer-expand`	Place on an interactive element, which, when clicked, should trigger expanding a particular drawer to its larger/expanded size.		`string` matching the `id` for a corresponding `SageDrawer`
`data-js-drawer-collapse`	Place on an interactive element, which, when clicked, should trigger collapsing a particular drawer to its smaller/collapsed size.		`string` matching the `id` for a corresponding `SageDrawer`
`data-js-drawer-expanded-content`	Place on an element or group of elements you want to be visible only when the drawer is in its larger/expanded size.		`string` matching the `id` for a corresponding `SageDrawer`
`data-js-drawer-collapsed-content`	Place on an element or group of elements you want to be visible only when the drawer is in its smaller/collapsed size.		`true \| ""`