OpenProject Lookbook

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div data-view-component="true" class="Box">
  <div id="header-02c5627e-6dda-4aba-8422-17930a065dd1" data-view-component="true" class="Box-header">
    <collapsible-header data-action="click:collapsible-header#toggle" data-collapsed="false" data-view-component="true" class="CollapsibleHeader">
      <div data-view-component="true" class="d-flex flex-column">
        <div data-view-component="true">
          <span data-view-component="true" class="mr-2">Backlog</span>
          <svg data-target="collapsible-header.arrowUp" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-up">
            <path d="M3.22 10.53a.749.749 0 0 1 0-1.06l4.25-4.25a.749.749 0 0 1 1.06 0l4.25 4.25a.749.749 0 1 1-1.06 1.06L8 6.811 4.28 10.53a.749.749 0 0 1-1.06 0Z"></path>
          </svg>
          <svg data-target="collapsible-header.arrowDown" aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down d-none">
            <path d="M12.78 5.22a.749.749 0 0 1 0 1.06l-4.25 4.25a.749.749 0 0 1-1.06 0L3.22 6.28a.749.749 0 1 1 1.06-1.06L8 8.939l3.72-3.719a.749.749 0 0 1 1.06 0Z"></path>
          </svg>
        </div>
        <div data-view-component="true">
          <span data-target="collapsible-header.description" data-view-component="true" class="color-fg-subtle">This backlog is unique to this one-time meeting. You can drag items in and out to add or remove them from the meeting agenda.</span>
        </div>
      </div>
    </collapsible-header>
  </div>
  <div data-view-component="true" class="Box-body">Body</div>
  <ul aria-labelledby="header-02c5627e-6dda-4aba-8422-17930a065dd1" data-view-component="true">
    <li data-view-component="true" class="Box-row">Row 1</li>
    <li data-view-component="true" class="Box-row">Row 2</li>
    <li data-view-component="true" class="Box-row">Row 3</li>
  </ul>
  
  <div data-view-component="true" class="Box-footer">Footer</div>
</div>

No notes provided.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%= render(Primer::Beta::BorderBox.new) do |component| %>
  <% component.with_header do %>
    <%= render(Primer::OpenProject::BorderBox::CollapsibleHeader.new(box: component,
                                                                     title: title,
                                                                     description: description,
                                                                     count: count,
                                                                     collapsed: collapsed)) %>
  <% end %>
  <% component.with_body { "Body" } %>
  <% component.with_row { "Row 1" } %>
  <% component.with_row { "Row 2" } %>
  <% component.with_row { "Row 3" } %>
  <% component.with_footer { "Footer" } %>
<% end %>

No params configured.