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
|
%section
.crud.gl-bg-subtle.gl-border.gl-border-section.gl-rounded-base{ @options, class: ('js-toggle-container' if @toggle_text) }
%header.crud-header.gl-flex.gl-flex-wrap.gl-justify-between.gl-gap-x-5.gl-gap-y-2.gl-px-5.gl-py-4.gl-bg-section.gl-border-b.gl-border-section.gl-rounded-t-base
.gl-flex.gl-flex-col.gl-self-center
%h2.gl-text-base.gl-font-bold.gl-leading-normal.gl-inline-flex.gl-gap-3.gl-m-0{ data: { testid: 'crud-title' } }
= @title
- if @count
%span.gl-inline-flex.gl-items-center.gl-gap-2.gl-text-sm.gl-text-subtle{ data: { testid: 'crud-count' } }
- if @icon
= sprite_icon(@icon, css_class: @icon_class)
%span{ @count_options }
= @count
- if description? || @description
.gl-text-sm.gl-text-subtle.gl-leading-normal.gl-mt-2.gl-mb-0{ data: { testid: 'crud-description' } }
= description || @description
.gl-flex.gl-gap-3.gl-items-baseline{ data: { testid: 'crud-actions' } }
- if @toggle_text
= render Pajamas::ButtonComponent.new(size: :small, button_options: toggle_button_options_attrs) do
= @toggle_text
= actions
- if form?
.gl-p-5.gl-pt-4.gl-bg-section.gl-border-b.gl-border-section{ form_options_attrs }
= form
.crud-body.gl-mx-5.gl-my-4{ body_options_attrs }
= body
- if pagination?
.crud-pagination.gl-flex.gl-justify-center.gl-p-5.gl-border-t{ data: { testid: 'crud-pagination' } }
= pagination
- if footer?
.gl-px-5.gl-py-4.gl-bg-section.gl-border-t.gl-border-section.gl-rounded-b-base{ footer_options_attrs }
= footer
|
