Add latest changes from gitlab-org/gitlab@master

7 files changed, 168 insertions, 0 deletions

diff --git a/app/components/pajamas/checkbox_component.html.haml b/app/components/pajamas/checkbox_component.html.haml
new file mode 100644
index 00000000000..9e3d4e68a42
--- /dev/null
+++ b/app/components/pajamas/checkbox_component.html.haml
@@ -0,0 +1,6 @@
+.gl-form-checkbox.custom-control.custom-checkbox
+  = form.check_box(method,
+      formatted_input_options,
+      checked_value,
+      unchecked_value)
+  = render_label_with_help_text
diff --git a/app/components/pajamas/checkbox_component.rb b/app/components/pajamas/checkbox_component.rb
new file mode 100644
index 00000000000..ae78d0453f8
--- /dev/null
+++ b/app/components/pajamas/checkbox_component.rb
@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+
+# Renders a Pajamas compliant checkbox element
+# Must be used in an instance of `ActionView::Helpers::FormBuilder`
+module Pajamas
+  class CheckboxComponent < Pajamas::Component
+    include Pajamas::Concerns::CheckboxRadioLabelWithHelpText
+    include Pajamas::Concerns::CheckboxRadioOptions
+
+    renders_one :label
+    renders_one :help_text
+
+    def initialize(
+      form:,
+      method:,
+      label: nil,
+      help_text: nil,
+      label_options: {},
+      checkbox_options: {},
+      checked_value: '1',
+      unchecked_value: '0'
+    )
+      @form = form
+      @method = method
+      @label_argument = label
+      @help_text_argument = help_text
+      @label_options = label_options
+      @input_options = checkbox_options
+      @checked_value = checked_value
+      @unchecked_value = unchecked_value
+      @value = checked_value if checkbox_options[:multiple]
+    end
+
+    attr_reader(
+      :form,
+      :method,
+      :label_argument,
+      :help_text_argument,
+      :label_options,
+      :input_options,
+      :checked_value,
+      :unchecked_value,
+      :value
+    )
+
+    private
+
+    def label_content
+      label? ? label : label_argument
+    end
+
+    def help_text_content
+      help_text? ? help_text : help_text_argument
+    end
+  end
+end
diff --git a/app/components/pajamas/component.rb b/app/components/pajamas/component.rb
index 70c5f5be596..3b1826a646c 100644
--- a/app/components/pajamas/component.rb
+++ b/app/components/pajamas/component.rb
@@ -16,5 +16,14 @@ module Pajamas
 
       default
     end
+
+    # Add CSS classes and additional options to an existing options hash
+    #
+    # @param [Hash] options
+    # @param [Array] css_classes
+    # @param [Hash] additional_option
+    def format_options(options:, css_classes: [], additional_options: {})
+      options.merge({ class: [*css_classes, options[:class]].flatten.compact }, additional_options)
+    end
   end
 end
diff --git a/app/components/pajamas/concerns/checkbox_radio_label_with_help_text.rb b/app/components/pajamas/concerns/checkbox_radio_label_with_help_text.rb
new file mode 100644
index 00000000000..4ece904fb85
--- /dev/null
+++ b/app/components/pajamas/concerns/checkbox_radio_label_with_help_text.rb
@@ -0,0 +1,30 @@
+# frozen_string_literal: true
+
+module Pajamas
+  module Concerns
+    module CheckboxRadioLabelWithHelpText
+      def render_label_with_help_text
+        form.label(method, formatted_label_options) { label_entry }
+      end
+
+      private
+
+      def label_entry
+        if help_text_content
+          content_tag(:span, label_content) +
+          content_tag(:p, help_text_content, class: 'help-text', data: { testid: 'pajamas-component-help-text' })
+        else
+          content_tag(:span, label_content)
+        end
+      end
+
+      def formatted_label_options
+        format_options(
+          options: label_options,
+          css_classes: ['custom-control-label'],
+          additional_options: { value: value }
+        )
+      end
+    end
+  end
+end
diff --git a/app/components/pajamas/concerns/checkbox_radio_options.rb b/app/components/pajamas/concerns/checkbox_radio_options.rb
new file mode 100644
index 00000000000..e79fdb7b601
--- /dev/null
+++ b/app/components/pajamas/concerns/checkbox_radio_options.rb
@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+module Pajamas
+  module Concerns
+    module CheckboxRadioOptions
+      def formatted_input_options
+        format_options(options: input_options, css_classes: ['custom-control-input'])
+      end
+    end
+  end
+end
diff --git a/app/components/pajamas/radio_component.html.haml b/app/components/pajamas/radio_component.html.haml
new file mode 100644
index 00000000000..6bf57b0b187
--- /dev/null
+++ b/app/components/pajamas/radio_component.html.haml
@@ -0,0 +1,5 @@
+.gl-form-radio.custom-control.custom-radio
+  = form.radio_button(method,
+    value,
+    formatted_input_options)
+  = render_label_with_help_text
diff --git a/app/components/pajamas/radio_component.rb b/app/components/pajamas/radio_component.rb
new file mode 100644
index 00000000000..52a761b9d7d
--- /dev/null
+++ b/app/components/pajamas/radio_component.rb
@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+# Renders a Pajamas compliant radio button element
+# Must be used in an instance of `ActionView::Helpers::FormBuilder`
+module Pajamas
+  class RadioComponent < Pajamas::Component
+    include Pajamas::Concerns::CheckboxRadioLabelWithHelpText
+    include Pajamas::Concerns::CheckboxRadioOptions
+
+    renders_one :label
+    renders_one :help_text
+
+    def initialize(
+      form:,
+      method:,
+      label: nil,
+      help_text: nil,
+      label_options: {},
+      radio_options: {},
+      value: nil
+    )
+      @form = form
+      @method = method
+      @label_argument = label
+      @help_text_argument = help_text
+      @label_options = label_options
+      @input_options = radio_options
+      @value = value
+    end
+
+    attr_reader(
+      :form,
+      :method,
+      :label_argument,
+      :help_text_argument,
+      :label_options,
+      :input_options,
+      :value
+    )
+
+    private
+
+    def label_content
+      label? ? label : label_argument
+    end
+
+    def help_text_content
+      help_text? ? help_text : help_text_argument
+    end
+  end
+end