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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<div data-view-component="true" class="Layout Layout--flowRow-until-md Layout--sidebarPosition-end Layout--sidebarPosition-flowRow-start">
  <div data-view-component="true" class="Layout-sidebar">
    <div data-view-component="true" class="SidePanel BorderGrid">
      <div data-view-component="true" class="BorderGrid-row">
        <div data-view-component="true" class="BorderGrid-cell">
          <section data-view-component="true">
            <div class="SidePanel-sectionHeader">
              <h4 data-view-component="true">Attributes</h4>
              <div class="SidePanel-sectionCounter">
                <span title="5" data-view-component="true" class="Counter">5</span>
              </div>
              <div class="SidePanel-sectionAction">
                <button id="icon-button-753a8f5f-0fe8-4cfa-b682-3c5ac2a7bf0a" aria-labelledby="tooltip-f3edb6dd-42c0-42d2-ba24-14fa449583fe" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil Button-visual">
                    <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path>
                  </svg>
                </button><tool-tip id="tooltip-f3edb6dd-42c0-42d2-ba24-14fa449583fe" for="icon-button-753a8f5f-0fe8-4cfa-b682-3c5ac2a7bf0a" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Edit</tool-tip>
              </div>
            </div>
            <div class="SidePanel-sectionDescription">
              <span data-view-component="true" class="color-fg-subtle">Attached files are available to all meeting participants. You can also drag and drop these into agenda item notes.</span>
            </div>
            <div class="SidePanel-sectionContent">
              Section content
            </div>
            <a href="#" data-view-component="true" class="SidePanel-sectionFooter Button--link Button--medium Button color-fg-default text-bold no-underline">  <span class="Button-content">
                <span class="Button-visual Button-leadingVisual">
                  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-pencil">
                    <path d="M11.013 1.427a1.75 1.75 0 0 1 2.474 0l1.086 1.086a1.75 1.75 0 0 1 0 2.474l-8.61 8.61c-.21.21-.47.364-.756.445l-3.251.93a.75.75 0 0 1-.927-.928l.929-3.25c.081-.286.235-.547.445-.758l8.61-8.61Zm.176 4.823L9.75 4.81l-6.286 6.287a.253.253 0 0 0-.064.108l-.558 1.953 1.953-.558a.253.253 0 0 0 .108-.064Zm1.238-3.763a.25.25 0 0 0-.354 0L10.811 3.75l1.439 1.44 1.263-1.263a.25.25 0 0 0 0-.354Z"></path>
                  </svg>
                </span>
                <span class="Button-label">Additional action</span>
              </span>
            </a>
          </section>
        </div>
      </div>
    
      <div data-view-component="true" class="BorderGrid-row">
        <div data-view-component="true" class="BorderGrid-cell">
          <section data-view-component="true">
            <div class="SidePanel-sectionHeader">
              <h4 data-view-component="true">Without counter</h4>
              <div class="SidePanel-sectionAction">
                <button id="icon-button-61822217-d63d-47ec-bc93-4f2152aefa00" aria-labelledby="tooltip-3398cce9-6e4e-456a-8ec8-3898fd9aab2b" type="button" data-view-component="true" class="Button Button--iconOnly Button--invisible Button--medium">  <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-gear Button-visual">
                    <path d="M8 0a8.2 8.2 0 0 1 .701.031C9.444.095 9.99.645 10.16 1.29l.288 1.107c.018.066.079.158.212.224.231.114.454.243.668.386.123.082.233.09.299.071l1.103-.303c.644-.176 1.392.021 1.82.63.27.385.506.792.704 1.218.315.675.111 1.422-.364 1.891l-.814.806c-.049.048-.098.147-.088.294.016.257.016.515 0 .772-.01.147.038.246.088.294l.814.806c.475.469.679 1.216.364 1.891a7.977 7.977 0 0 1-.704 1.217c-.428.61-1.176.807-1.82.63l-1.102-.302c-.067-.019-.177-.011-.3.071a5.909 5.909 0 0 1-.668.386c-.133.066-.194.158-.211.224l-.29 1.106c-.168.646-.715 1.196-1.458 1.26a8.006 8.006 0 0 1-1.402 0c-.743-.064-1.289-.614-1.458-1.26l-.289-1.106c-.018-.066-.079-.158-.212-.224a5.738 5.738 0 0 1-.668-.386c-.123-.082-.233-.09-.299-.071l-1.103.303c-.644.176-1.392-.021-1.82-.63a8.12 8.12 0 0 1-.704-1.218c-.315-.675-.111-1.422.363-1.891l.815-.806c.05-.048.098-.147.088-.294a6.214 6.214 0 0 1 0-.772c.01-.147-.038-.246-.088-.294l-.815-.806C.635 6.045.431 5.298.746 4.623a7.92 7.92 0 0 1 .704-1.217c.428-.61 1.176-.807 1.82-.63l1.102.302c.067.019.177.011.3-.071.214-.143.437-.272.668-.386.133-.066.194-.158.211-.224l.29-1.106C6.009.645 6.556.095 7.299.03 7.53.01 7.764 0 8 0Zm-.571 1.525c-.036.003-.108.036-.137.146l-.289 1.105c-.147.561-.549.967-.998 1.189-.173.086-.34.183-.5.29-.417.278-.97.423-1.529.27l-1.103-.303c-.109-.03-.175.016-.195.045-.22.312-.412.644-.573.99-.014.031-.021.11.059.19l.815.806c.411.406.562.957.53 1.456a4.709 4.709 0 0 0 0 .582c.032.499-.119 1.05-.53 1.456l-.815.806c-.081.08-.073.159-.059.19.162.346.353.677.573.989.02.03.085.076.195.046l1.102-.303c.56-.153 1.113-.008 1.53.27.161.107.328.204.501.29.447.222.85.629.997 1.189l.289 1.105c.029.109.101.143.137.146a6.6 6.6 0 0 0 1.142 0c.036-.003.108-.036.137-.146l.289-1.105c.147-.561.549-.967.998-1.189.173-.086.34-.183.5-.29.417-.278.97-.423 1.529-.27l1.103.303c.109.029.175-.016.195-.045.22-.313.411-.644.573-.99.014-.031.021-.11-.059-.19l-.815-.806c-.411-.406-.562-.957-.53-1.456a4.709 4.709 0 0 0 0-.582c-.032-.499.119-1.05.53-1.456l.815-.806c.081-.08.073-.159.059-.19a6.464 6.464 0 0 0-.573-.989c-.02-.03-.085-.076-.195-.046l-1.102.303c-.56.153-1.113.008-1.53-.27a4.44 4.44 0 0 0-.501-.29c-.447-.222-.85-.629-.997-1.189l-.289-1.105c-.029-.11-.101-.143-.137-.146a6.6 6.6 0 0 0-1.142 0ZM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0ZM9.5 8a1.5 1.5 0 1 0-3.001.001A1.5 1.5 0 0 0 9.5 8Z"></path>
                  </svg>
                </button><tool-tip id="tooltip-3398cce9-6e4e-456a-8ec8-3898fd9aab2b" for="icon-button-61822217-d63d-47ec-bc93-4f2152aefa00" popover="manual" data-direction="s" data-type="label" data-view-component="true" class="sr-only position-absolute">Manage</tool-tip>
              </div>
            </div>
            <div class="SidePanel-sectionContent">
              Some more content here
            </div>
          </section>
        </div>
      </div>
    
      <div data-view-component="true" class="BorderGrid-row">
        <div data-view-component="true" class="BorderGrid-cell">
          <section data-view-component="true">
            <div class="SidePanel-sectionHeader">
              <h4 data-view-component="true">Without action</h4>
            </div>
            <div class="SidePanel-sectionContent">
              Even more content here
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <div data-view-component="true" class="Layout-main">Main content</div>
</div>

No notes provided.

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
<%=
  render(Primer::Alpha::Layout.new) do |component|
    component.with_main do
      "Main content"
    end
    component.with_sidebar(row_placement: :start, col_placement: :end) do
      render(Primer::OpenProject::SidePanel.new) do |panel|
        panel.with_section do |section|
          section.with_title { "Attributes" }
          section.with_counter(count: 5)
          section.with_description do
            "Attached files are available to all meeting participants. You can also drag and drop these into agenda item notes."
          end
          section.with_action_icon(icon: :pencil, 'aria-label': 'Edit')
          section.with_footer_button(tag: :a, href: '#') do |button|
            button.with_leading_visual_icon(icon: :pencil)
            "Additional action"
          end
          "Section content"
        end
        panel.with_section do |section|
          section.with_title { "Without counter" }
          section.with_action_icon(icon: :gear, 'aria-label': 'Manage')
          "Some more content here"
        end
        panel.with_section do |section|
          section.with_title { "Without action" }
          "Even more content here"
        end
      end
    end
  end
%>

No params configured.