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
<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">My custom component</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-477155fb-97d4-4cb7-95f7-404f98bcccef" aria-labelledby="tooltip-83aa3e7e-6d83-448e-a755-7ef88a97d4bf" 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-83aa3e7e-6d83-448e-a755-7ef88a97d4bf" for="icon-button-477155fb-97d4-4cb7-95f7-404f98bcccef" 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">Some text here</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>
  </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
<%=
  clazz = Class.new(ViewComponent::Base) do
    def self.name
      "CustomComponent"
    end
    def call
      render(Primer::OpenProject::SidePanel::Section.new) do |section|
        section.with_title { "My custom component" }
        section.with_counter(count: 5)
        section.with_description do
          "Some text here"
        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
    end
  end
  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(clazz.new)
      end
    end
  end
%>

No params configured.