Add latest changes from gitlab-org/gitlab@master

2 files changed, 110 insertions, 0 deletions

diff --git a/spec/components/layouts/horizontal_section_component_spec.rb b/spec/components/layouts/horizontal_section_component_spec.rb
new file mode 100644
index 00000000000..efc48213911
--- /dev/null
+++ b/spec/components/layouts/horizontal_section_component_spec.rb
@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+require "spec_helper"
+
+RSpec.describe Layouts::HorizontalSectionComponent, type: :component do
+  let(:title) { 'Naming, visibility' }
+  let(:description) { 'Update your group name, description, avatar, and visibility.' }
+  let(:body) { 'This is where the settings go' }
+
+  describe 'slots' do
+    it 'renders title' do
+      render_inline described_class.new do |c|
+        c.title { title }
+        c.body { body }
+      end
+
+      expect(page).to have_css('h4', text: title)
+    end
+
+    it 'renders body slot' do
+      render_inline described_class.new do |c|
+        c.title { title }
+        c.body { body }
+      end
+
+      expect(page).to have_content(body)
+    end
+
+    context 'when description slot is provided' do
+      before do
+        render_inline described_class.new do |c|
+          c.title { title }
+          c.description { description }
+          c.body { body }
+        end
+      end
+
+      it 'renders description' do
+        expect(page).to have_css('p', text: description)
+      end
+    end
+
+    context 'when description slot is not provided' do
+      before do
+        render_inline described_class.new do |c|
+          c.title { title }
+          c.body { body }
+        end
+      end
+
+      it 'does not render description' do
+        expect(page).not_to have_css('p', text: description)
+      end
+    end
+  end
+
+  describe 'arguments' do
+    describe 'border' do
+      it 'defaults to true and adds gl-border-b CSS class' do
+        render_inline described_class.new do |c|
+          c.title { title }
+          c.body { body }
+        end
+
+        expect(page).to have_css('.gl-border-b')
+      end
+
+      it 'does not add gl-border-b CSS class when set to false' do
+        render_inline described_class.new(border: false) do |c|
+          c.title { title }
+          c.body { body }
+        end
+
+        expect(page).not_to have_css('.gl-border-b')
+      end
+    end
+
+    describe 'options' do
+      it 'adds options to wrapping element' do
+        render_inline described_class.new(options: { data: { testid: 'foo-bar' }, class: 'foo-bar' }) do |c|
+          c.title { title }
+          c.body { body }
+        end
+
+        expect(page).to have_css('.foo-bar[data-testid="foo-bar"]')
+      end
+    end
+  end
+end
diff --git a/spec/components/previews/layouts/horizontal_section_component_preview.rb b/spec/components/previews/layouts/horizontal_section_component_preview.rb
new file mode 100644
index 00000000000..cc7e8c8c2b1
--- /dev/null
+++ b/spec/components/previews/layouts/horizontal_section_component_preview.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Layouts
+  class HorizontalSectionComponentPreview < ViewComponent::Preview
+    # @param border toggle
+    # @param title text
+    # @param description text
+    # @param body text
+    def default(
+      border: true,
+      title: 'Naming, visibility',
+      description: 'Update your group name, description, avatar, and visibility.',
+      body: 'Settings fields here.'
+    )
+      render(::Layouts::HorizontalSectionComponent.new(border: border, options: { class: 'gl-mb-6 gl-pb-3' })) do |c|
+        c.title { title }
+        c.description { description }
+        c.body { body }
+      end
+    end
+  end
+end