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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<nav aria-labelledby="heading-92cc9be3-37d4-484e-8b11-7415c26db654" data-view-component="true">
  <h2 id="heading-92cc9be3-37d4-484e-8b11-7415c26db654" data-view-component="true" class="ActionListHeader">Repository settings</h2>
  <nav-list>
    <ul data-target="nav-list.topLevelList" data-view-component="true" class="ActionListWrap">
      <li data-item-id="" data-targets="nav-list.items" data-view-component="true" class="ActionListItem ActionListItem--hasSubItem">
        <tool-tip id="tooltip-79572cdc-1a0a-4149-8747-391312f7eb7d" for="item-cdd3bf5a-b0c6-4d91-bd6b-2ea0e2549c9d" popover="manual" data-direction="ne" data-type="description" data-view-component="true" class="ActionListItem-truncationTooltip sr-only position-absolute">Really really long label that may wrap, truncate, or appear as a tooltip</tool-tip>
        <button id="item-cdd3bf5a-b0c6-4d91-bd6b-2ea0e2549c9d" type="button" aria-expanded="false" data-action="
            click:nav-list#handleItemWithSubItemClick
            keydown:nav-list#handleItemWithSubItemKeydown
          " data-view-component="true" class="ActionListContent ActionListContent--visual16">
          <span class="ActionListItem-visual ActionListItem-visual--leading">
            <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-comment-discussion">
              <path d="M1.75 1h8.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 10.25 10H7.061l-2.574 2.573A1.458 1.458 0 0 1 2 11.543V10h-.25A1.75 1.75 0 0 1 0 8.25v-5.5C0 1.784.784 1 1.75 1ZM1.5 2.75v5.5c0 .138.112.25.25.25h1a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h3.5a.25.25 0 0 0 .25-.25v-5.5a.25.25 0 0 0-.25-.25h-8.5a.25.25 0 0 0-.25.25Zm13 2a.25.25 0 0 0-.25-.25h-.5a.75.75 0 0 1 0-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0 1 14.25 12H14v1.543a1.458 1.458 0 0 1-2.487 1.03L9.22 12.28a.749.749 0 0 1 .326-1.275.749.749 0 0 1 .734.215l2.22 2.22v-2.19a.75.75 0 0 1 .75-.75h1a.25.25 0 0 0 .25-.25Z"></path>
            </svg>
          </span>
          <span data-view-component="true" class="ActionListItem-label ActionListItem-label--truncate">
            Really really long label that may wrap, truncate, or appear as a tooltip
          </span>
          <span class="ActionListItem-visual ActionListItem-action--trailing">
            <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-chevron-down ActionListItem-collapseIcon">
              <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>
          </span>
        </button>
        <ul role="list" data-action="keydown:nav-list#handleItemWithSubItemKeydown" aria-labelledby="item-cdd3bf5a-b0c6-4d91-bd6b-2ea0e2549c9d" data-view-component="true" class="ActionList ActionList--subGroup">
          <li data-item-id="interaction_limits" data-targets="nav-list.items" data-view-component="true" class="ActionListItem--subItem ActionListItem">
            <a id="item-89bf2c99-0995-4be8-a6d6-c4e0529320f6" href="/interaction-limits" data-view-component="true" class="ActionListContent">
              <span data-view-component="true" class="ActionListItem-label">
                Interaction limits
              </span>
            </a>
          </li>
          <li data-item-id="code_review_limits" data-targets="nav-list.items" data-view-component="true" class="ActionListItem--subItem ActionListItem">
            <a id="item-b46bb12e-bebf-4422-b956-bca408846350" href="/review-limits" data-view-component="true" class="ActionListContent">
              <span data-view-component="true" class="ActionListItem-label">
                Code review limits
              </span>
            </a>
          </li>
          <li data-item-id="reported_content" data-targets="nav-list.items" data-view-component="true" class="ActionListItem--subItem ActionListItem">
            <a id="item-317ea228-f605-4aae-9f43-67a92ecf09b2" href="/reported-content" data-view-component="true" class="ActionListContent">
              <span data-view-component="true" class="ActionListItem-label">
                Reported content
              </span>
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </nav-list>
</nav>

No notes provided.

1
2
3
4
5
6
7
8
9
10
11
render(Primer::Beta::NavList.new) do |list|
  list.with_heading(title: "Repository settings")
  list.with_item(label: "Really really long label that may wrap, truncate, or appear as a tooltip", truncate_label: :show_tooltip) do |item|
    item.with_leading_visual_icon(icon: :"comment-discussion")
    item.with_item(label: "Interaction limits", href: "/interaction-limits", selected_by_ids: :interaction_limits)
    item.with_item(label: "Code review limits", href: "/review-limits", selected_by_ids: :code_review_limits)
    item.with_item(label: "Reported content", href: "/reported-content", selected_by_ids: :reported_content)
  end
end

No params configured.