diff options
Diffstat (limited to 'app/components/pajamas')
-rw-r--r-- | app/components/pajamas/banner_component.html.haml | 2 | ||||
-rw-r--r-- | app/components/pajamas/banner_component.rb | 2 | ||||
-rw-r--r-- | app/components/pajamas/empty_state_component.html.haml | 29 | ||||
-rw-r--r-- | app/components/pajamas/empty_state_component.rb | 35 |
4 files changed, 66 insertions, 2 deletions
diff --git a/app/components/pajamas/banner_component.html.haml b/app/components/pajamas/banner_component.html.haml index 4fa2ed09cd3..c2eeae2d8c9 100644 --- a/app/components/pajamas/banner_component.html.haml +++ b/app/components/pajamas/banner_component.html.haml @@ -14,7 +14,7 @@ - if primary_action? = primary_action - else - = link_to @button_text, @button_link, { **@button_options, class: 'btn btn-md btn-confirm gl-button js-close-callout' } + = link_button_to @button_text, @button_link, **@button_options, class: 'js-close-callout', variant: :confirm - actions.each do |action| = action diff --git a/app/components/pajamas/banner_component.rb b/app/components/pajamas/banner_component.rb index 6082762f22c..1a03f3fdd58 100644 --- a/app/components/pajamas/banner_component.rb +++ b/app/components/pajamas/banner_component.rb @@ -49,7 +49,7 @@ module Pajamas end end - delegate :sprite_icon, to: :helpers + delegate :sprite_icon, :link_button_to, to: :helpers renders_one :title renders_one :illustration diff --git a/app/components/pajamas/empty_state_component.html.haml b/app/components/pajamas/empty_state_component.html.haml new file mode 100644 index 00000000000..ecd3498c5cd --- /dev/null +++ b/app/components/pajamas/empty_state_component.html.haml @@ -0,0 +1,29 @@ +- empty_state_class = @compact ? 'gl-flex-direction-row gl-align-items-center' : 'gl-text-center gl-flex-direction-column' + +%section.gl-display-flex.empty-state{ **@empty_state_options, class: empty_state_class } + - if @svg_path.present? + - image_class = @compact ? 'gl-display-none gl-sm-display-block gl-px-4' : 'gl-max-w-full' + %div{ class: image_class } + = image_tag @svg_path, alt: "", class: 'gl-dark-invert-keep-hue' + + - content_wrapper_class = @compact ? 'gl-flex-grow-1 gl-flex-basis-0 gl-px-4' : 'gl-max-w-full gl-m-auto pl-p-5' + %div{ class: content_wrapper_class } + - title_class = @compact ? 'gl-mt-0' : 'gl-my-3' + %h1.gl-font-size-h-display.gl-line-height-36{ class: title_class } + = @title + + - if description? + %p.gl-mt-3{ 'data-testid': 'empty-state-description' } + = description + + - if @primary_button_text.present? || @secondary_button_text.present? + - button_wrapper_class = @compact.present? ? '' : 'gl-justify-content-center' + .gl-display-flex.gl-flex-wrap{ class: button_wrapper_class } + + - if @primary_button_text.present? + = render Pajamas::ButtonComponent.new(variant: :confirm, href: @primary_button_link, button_options: { class: 'gl-ml-0!' }) do + = @primary_button_text + + - if @secondary_button_text.present? + = render Pajamas::ButtonComponent.new(variant: :default, href: @secondary_button_link, button_options: { class: ('gl-ml-0!' unless @primary_button_text.present?) }) do + = @secondary_button_text diff --git a/app/components/pajamas/empty_state_component.rb b/app/components/pajamas/empty_state_component.rb new file mode 100644 index 00000000000..d0c0da12d3b --- /dev/null +++ b/app/components/pajamas/empty_state_component.rb @@ -0,0 +1,35 @@ +# frozen_string_literal: true + +module Pajamas + class EmptyStateComponent < Pajamas::Component + # @param [Boolean] compact + # @param [String] title + # @param [String] svg_path + # @param [String] primary_button_text + # @param [String] primary_button_link + # @param [String] secondary_button_text + # @param [String] secondary_button_link + # @param [Hash] empty_state_options + def initialize( + compact: false, + title: nil, + svg_path: nil, + primary_button_text: nil, + primary_button_link: nil, + secondary_button_text: nil, + secondary_button_link: nil, + empty_state_options: {} + ) + @compact = compact + @title = title + @svg_path = svg_path.to_s + @primary_button_text = primary_button_text + @primary_button_link = primary_button_link + @secondary_button_text = secondary_button_text + @secondary_button_link = secondary_button_link + @empty_state_options = empty_state_options + end + + renders_one :description + end +end |