Add latest changes from gitlab-org/gitlab@15-4-stable-eev15.4.0-rc42

4 files changed, 319 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/pajamas/badge_component_spec.rb b/spec/components/pajamas/badge_component_spec.rb
new file mode 100644
index 00000000000..4c564121ba2
--- /dev/null
+++ b/spec/components/pajamas/badge_component_spec.rb
@@ -0,0 +1,148 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe Pajamas::BadgeComponent, type: :component do
+  let(:text) { "Hello" }
+  let(:options) { {} }
+  let(:html_options) { {} }
+
+  before do
+    render_inline(described_class.new(text, **options, **html_options))
+  end
+
+  describe "text param" do
+    it "is shown inside the badge" do
+      expect(page).to have_css ".gl-badge", text: text
+    end
+  end
+
+  describe "content slot" do
+    it "can be used instead of the text param" do
+      render_inline(described_class.new) do
+        "Slot content"
+      end
+      expect(page).to have_css ".gl-badge", text: "Slot content"
+    end
+
+    it "takes presendence over the text param" do
+      render_inline(described_class.new(text)) do
+        "Slot wins."
+      end
+      expect(page).to have_css ".gl-badge", text: "Slot wins."
+    end
+  end
+
+  describe "options" do
+    describe "icon" do
+      let(:options) { { icon: :tanuki } }
+
+      it "adds the correct icon and margin" do
+        expect(page).to have_css ".gl-icon.gl-badge-icon.gl-mr-2[data-testid='tanuki-icon']"
+      end
+    end
+
+    describe "icon_classes" do
+      let(:options) { { icon: :tanuki, icon_classes: icon_classes } }
+
+      context "as string" do
+        let(:icon_classes) { "js-special-badge-icon js-extra-special" }
+
+        it "combines custom classes and component classes" do
+          expect(page).to have_css \
+            ".gl-icon.gl-badge-icon.gl-mr-2.js-special-badge-icon.js-extra-special[data-testid='tanuki-icon']"
+        end
+      end
+
+      context "as array" do
+        let(:icon_classes) { %w[js-special-badge-icon js-extra-special] }
+
+        it "combines custom classes and component classes" do
+          expect(page).to have_css \
+            ".gl-icon.gl-badge-icon.gl-mr-2.js-special-badge-icon.js-extra-special[data-testid='tanuki-icon']"
+        end
+      end
+    end
+
+    describe "icon_only" do
+      let(:options) { { icon: :tanuki, icon_only: true } }
+
+      it "adds no extra margin to the icon" do
+        expect(page).not_to have_css ".gl-icon.gl-mr-2"
+      end
+
+      it "adds the text as ARIA label" do
+        expect(page).to have_css ".gl-badge[aria-label='#{text}'][role='img']"
+      end
+    end
+
+    describe "href" do
+      let(:options) { { href: "/foo" } }
+
+      it "makes the a badge a link" do
+        expect(page).to have_link text, class: "gl-badge", href: "/foo"
+      end
+    end
+
+    describe "size" do
+      where(:size) { [:sm, :md, :lg] }
+
+      with_them do
+        let(:options) { { size: size } }
+
+        it "adds size class" do
+          expect(page).to have_css ".gl-badge.#{size}"
+        end
+      end
+
+      context "with unknown size" do
+        let(:options) { { size: :xxl } }
+
+        it "adds the default size class" do
+          expect(page).to have_css ".gl-badge.md"
+        end
+      end
+    end
+
+    describe "variant" do
+      where(:variant) { [:muted, :neutral, :info, :success, :warning, :danger] }
+
+      with_them do
+        let(:options) { { variant: variant } }
+
+        it "adds variant class" do
+          expect(page).to have_css ".gl-badge.badge-#{variant}"
+        end
+      end
+
+      context "with unknown variant" do
+        let(:options) { { variant: :foo } }
+
+        it "adds the default variant class" do
+          expect(page).to have_css ".gl-badge.badge-muted"
+        end
+      end
+    end
+  end
+
+  describe "HTML options" do
+    let(:html_options) { { id: "badge-33", data: { foo: "bar" } } }
+
+    it "get added as HTML attributes" do
+      expect(page).to have_css ".gl-badge#badge-33[data-foo='bar']"
+    end
+
+    it "can be combined with component options in no particular order" do
+      render_inline(described_class.new(text, id: "badge-34", variant: :success, data: { foo: "baz" }, size: :sm))
+      expect(page).to have_css ".gl-badge.badge-success.sm#badge-34[data-foo='baz']"
+    end
+
+    context "with custom CSS classes" do
+      let(:html_options) { { id: "badge-35", class: "js-special-badge" } }
+
+      it "combines custom classes and component classes" do
+        expect(page).to have_css ".gl-badge.js-special-badge#badge-35"
+      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
diff --git a/spec/components/previews/pajamas/badge_component_preview.rb b/spec/components/previews/pajamas/badge_component_preview.rb
new file mode 100644
index 00000000000..e740a4a38aa
--- /dev/null
+++ b/spec/components/previews/pajamas/badge_component_preview.rb
@@ -0,0 +1,61 @@
+# frozen_string_literal: true
+
+module Pajamas
+  class BadgeComponentPreview < ViewComponent::Preview
+    # Badge
+    # ---
+    #
+    # See its design reference [here](https://design.gitlab.com/components/badge).
+    #
+    # @param icon select [~, star-o, issue-closed, tanuki]
+    # @param icon_only toggle
+    # @param href url
+    # @param size select [sm, md, lg]
+    # @param text text
+    # @param variant select [muted, neutral, info, success, warning, danger]
+    def default(icon: :tanuki, icon_only: false, href: nil, size: :md, text: "Tanuki", variant: :muted)
+      render Pajamas::BadgeComponent.new(
+        text,
+        icon: icon,
+        icon_only: icon_only,
+        href: href,
+        size: size,
+        variant: variant
+      )
+    end
+
+    # Using the content slot
+    # ---
+    #
+    # Use the content slot instead of the `text` param when things get more complicated than a plain string.
+    # All other options (`icon`, `size`, etc.) work as usual.
+    def slot
+      render Pajamas::BadgeComponent.new(size: :lg, variant: :info) do
+        "!ereht olleh".reverse.capitalize
+      end
+    end
+
+    # Custom HTML attributes and icon classes
+    # ---
+    #
+    # Any extra options passed into the component are treated as HTML attributes.
+    # This makes adding data or an id easy.
+    #
+    # CSS classes provided with the `class:` option are combined with the component classes.
+    #
+    # It is also possible to set custom `icon_classes:`.
+    #
+    # The order in which you provide these keywords doesn't matter.
+    def custom
+      render Pajamas::BadgeComponent.new(
+        "I'm special.",
+        class: "js-special-badge",
+        data: { count: 1 },
+        icon: :tanuki,
+        icon_classes: ["js-special-badge-icon"],
+        id: "special-badge-22",
+        variant: :success
+      )
+    end
+  end
+end