Add latest changes from gitlab-org/gitlab@master

2 files changed, 32 insertions, 0 deletions

diff --git a/app/components/pajamas/spinner_component.html.haml b/app/components/pajamas/spinner_component.html.haml
new file mode 100644
index 00000000000..aab9c5fdbf7
--- /dev/null
+++ b/app/components/pajamas/spinner_component.html.haml
@@ -0,0 +1,5 @@
+.gl-spinner-container{ class: @class }
+  - if @inline
+    %span{ class: spinner_class, aria: {label: @label} }
+  - else
+    %div{ class: spinner_class, aria: {label: @label} }
diff --git a/app/components/pajamas/spinner_component.rb b/app/components/pajamas/spinner_component.rb
new file mode 100644
index 00000000000..c7ffc1ec3da
--- /dev/null
+++ b/app/components/pajamas/spinner_component.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Pajamas
+  class SpinnerComponent < Pajamas::Component
+    # @param [String] class
+    # @param [Symbol] color
+    # @param [Boolean] inline
+    # @param [String] label
+    # @param [Symbol] size
+    def initialize(class: '', color: :dark, inline: false, label: _("Loading"), size: :sm)
+      @class = binding.local_variable_get(:class)
+      @color = filter_attribute(color.to_sym, COLOR_OPTIONS)
+      @inline = inline
+      @label = label.presence
+      @size = filter_attribute(size.to_sym, SIZE_OPTIONS)
+    end
+
+    private
+
+    def spinner_class
+      ["gl-spinner", "gl-spinner-#{@size}", "gl-spinner-#{@color}"]
+    end
+
+    COLOR_OPTIONS = [:light, :dark].freeze
+    SIZE_OPTIONS = [:sm, :md, :lg, :xl].freeze
+  end
+end