Add latest changes from gitlab-org/gitlab@15-3-stable-eev15.3.0-rc42

15 files changed, 518 insertions, 44 deletions

diff --git a/spec/components/diffs/overflow_warning_component_spec.rb b/spec/components/diffs/overflow_warning_component_spec.rb
index ee4014ee492..88c5de32de7 100644
--- a/spec/components/diffs/overflow_warning_component_spec.rb
+++ b/spec/components/diffs/overflow_warning_component_spec.rb
@@ -30,7 +30,7 @@ RSpec.describe Diffs::OverflowWarningComponent, type: :component do
   end
 
   describe "rendered component" do
-    subject { rendered_component }
+    subject { rendered_content }
 
     context "on a commit page" do
       before do
diff --git a/spec/components/diffs/stats_component_spec.rb b/spec/components/diffs/stats_component_spec.rb
index 2e5a5f2ca26..be55c23d040 100644
--- a/spec/components/diffs/stats_component_spec.rb
+++ b/spec/components/diffs/stats_component_spec.rb
@@ -19,7 +19,7 @@ RSpec.describe Diffs::StatsComponent, type: :component do
   let_it_be(:diff_files) { [diff_file] }
 
   describe "rendered component" do
-    subject { rendered_component }
+    subject { page }
 
     let(:element) { page.find(".js-diff-stats-dropdown") }
 
diff --git a/spec/components/docs/01_overview.html.erb b/spec/components/docs/01_overview.html.erb
new file mode 100644
index 00000000000..da4178ebcb5
--- /dev/null
+++ b/spec/components/docs/01_overview.html.erb
@@ -0,0 +1,20 @@
+---
+title: Welcome to our Lookbook 👋
+---
+
+<p>With Lookbook we can navigate, inspect and interact with our ViewComponent previews.</p>
+
+<h2>Usage</h2>
+
+<ul>
+  <li>Use the sidebar on the left to navigate our component previews.</li>
+  <li>Many previews can be interacted with by making changes in the <em>Params</em> tab.</li>
+  <li>Some previews have additional usage instructions in their <em>Notes</em> tab.</li>
+</ul>
+
+<h2>Learn more</h2>
+
+<ul>
+  <li>Learn all about <a href="https://viewcomponent.org/">ViewComponent</a> and <a href="https://github.com/allmarkedup/lookbook">Lookbook</a>.</li>
+  <li>Have a look at our ViewComponent page in the <a href="https://docs.gitlab.com/ee/development/fe_guide/view_component.html">Frontend development docs</a>.</li>
+</ul>
diff --git a/spec/components/pajamas/avatar_component_spec.rb b/spec/components/pajamas/avatar_component_spec.rb
new file mode 100644
index 00000000000..3b4e4e49fc2
--- /dev/null
+++ b/spec/components/pajamas/avatar_component_spec.rb
@@ -0,0 +1,135 @@
+# frozen_string_literal: true
+require "spec_helper"
+
+RSpec.describe Pajamas::AvatarComponent, type: :component do
+  let_it_be(:user) { create(:user) }
+  let_it_be(:project) { create(:project) }
+  let_it_be(:group) { create(:group) }
+
+  let(:options) { {} }
+
+  before do
+    render_inline(described_class.new(record, **options))
+  end
+
+  describe "avatar shape" do
+    context "for a User" do
+      let(:record) { user }
+
+      it "has a circle shape" do
+        expect(page).to have_css ".gl-avatar.gl-avatar-circle"
+      end
+    end
+
+    context "for a Project" do
+      let(:record) { project }
+
+      it "has default shape (rect)" do
+        expect(page).to have_css ".gl-avatar"
+        expect(page).not_to have_css ".gl-avatar-circle"
+      end
+    end
+
+    context "for a Group" do
+      let(:record) { group }
+
+      it "has default shape (rect)" do
+        expect(page).to have_css ".gl-avatar"
+        expect(page).not_to have_css ".gl-avatar-circle"
+      end
+    end
+  end
+
+  describe "avatar image" do
+    context "when it has an uploaded image" do
+      let(:record) { project }
+
+      before do
+        allow(record).to receive(:avatar_url).and_return "/example.png"
+        render_inline(described_class.new(record, **options))
+      end
+
+      it "uses the avatar_url as image src" do
+        expect(page).to have_css "img.gl-avatar[src='/example.png?width=64']"
+      end
+
+      it "uses a srcset for higher resolution on retina displays" do
+        expect(page).to have_css "img.gl-avatar[srcset='/example.png?width=64 1x, /example.png?width=128 2x']"
+      end
+
+      it "uses lazy loading" do
+        expect(page).to have_css "img.gl-avatar[loading='lazy']"
+      end
+
+      context "with size option" do
+        let(:options) { { size: 16 } }
+
+        it "uses that size as param for image src and srcset" do
+          expect(page).to have_css(
+            "img.gl-avatar[src='/example.png?width=16'][srcset='/example.png?width=16 1x, /example.png?width=32 2x']"
+          )
+        end
+      end
+    end
+
+    context "when a project or group has no uploaded image" do
+      let(:record) { project }
+
+      it "uses an identicon with the record's initial" do
+        expect(page).to have_css "div.gl-avatar.gl-avatar-identicon", text: record.name[0].upcase
+      end
+
+      context "when the record has no id" do
+        let(:record) { build :group }
+
+        it "uses an identicon with default background color" do
+          expect(page).to have_css "div.gl-avatar.gl-avatar-identicon-bg1"
+        end
+      end
+    end
+
+    context "when a user has no uploaded image" do
+      let(:record) { user }
+
+      it "uses a gravatar" do
+        expect(rendered_component).to match /gravatar\.com/
+      end
+    end
+  end
+
+  describe "options" do
+    let(:record) { user }
+
+    describe "alt" do
+      context "with a value" do
+        let(:options) { { alt: "Profile picture" } }
+
+        it "uses given value as alt text" do
+          expect(page).to have_css ".gl-avatar[alt='Profile picture']"
+        end
+      end
+
+      context "without a value" do
+        it "uses the record's name as alt text" do
+          expect(page).to have_css ".gl-avatar[alt='#{record.name}']"
+        end
+      end
+    end
+
+    describe "class" do
+      let(:options) { { class: 'gl-m-4' } }
+
+      it 'has the correct custom class' do
+        expect(page).to have_css '.gl-avatar.gl-m-4'
+      end
+    end
+
+    describe "size" do
+      let(:options) { { size: 96 } }
+
+      it 'has the correct size class' do
+        expect(page).to have_css '.gl-avatar.gl-avatar-s96'
+      end
+    end
+  end
+end
diff --git a/spec/components/pajamas/banner_component_spec.rb b/spec/components/pajamas/banner_component_spec.rb
index 26468d80c77..861b10c3f69 100644
--- a/spec/components/pajamas/banner_component_spec.rb
+++ b/spec/components/pajamas/banner_component_spec.rb
@@ -7,7 +7,7 @@ RSpec.describe Pajamas::BannerComponent, type: :component do
   end
 
   let(:title) { "Banner title" }
-  let(:content) { "Banner content"}
+  let(:content) { "Banner content" }
   let(:options) { {} }
 
   describe 'basic usage' do
diff --git a/spec/components/pajamas/button_component_spec.rb b/spec/components/pajamas/button_component_spec.rb
index a8c96042580..00423fd22a4 100644
--- a/spec/components/pajamas/button_component_spec.rb
+++ b/spec/components/pajamas/button_component_spec.rb
@@ -9,7 +9,7 @@ RSpec.describe Pajamas::ButtonComponent, type: :component do
   let(:content) { "Button content" }
   let(:options) { {} }
 
-  describe 'basic usage' do
+  RSpec.shared_examples 'basic button behavior' do
     before do
       render_inline(subject) do |c|
         content
@@ -59,7 +59,7 @@ RSpec.describe Pajamas::ButtonComponent, type: :component do
     describe 'disabled' do
       context 'by default (false)' do
         it 'does not have  disabled styling and behavior' do
-          expect(page).not_to have_css ".disabled[disabled='disabled'][aria-disabled='true']"
+          expect(page).not_to have_css ".disabled[disabled][aria-disabled]"
         end
       end
 
@@ -67,7 +67,7 @@ RSpec.describe Pajamas::ButtonComponent, type: :component do
         let(:options) { { disabled: true } }
 
         it 'has disabled styling and behavior' do
-          expect(page).to have_css ".disabled[disabled='disabled'][aria-disabled='true']"
+          expect(page).to have_css ".disabled[disabled][aria-disabled]"
         end
       end
     end
@@ -75,7 +75,7 @@ RSpec.describe Pajamas::ButtonComponent, type: :component do
     describe 'loading' do
       context 'by default (false)' do
         it 'is not disabled' do
-          expect(page).not_to have_css ".disabled[disabled='disabled']"
+          expect(page).not_to have_css ".disabled[disabled]"
         end
 
         it 'does not render a spinner' do
@@ -87,7 +87,7 @@ RSpec.describe Pajamas::ButtonComponent, type: :component do
         let(:options) { { loading: true } }
 
         it 'is disabled' do
-          expect(page).to have_css ".disabled[disabled='disabled']"
+          expect(page).to have_css ".disabled[disabled]"
         end
 
         it 'renders a spinner' do
@@ -218,9 +218,13 @@ RSpec.describe Pajamas::ButtonComponent, type: :component do
         end
       end
     end
+  end
+
+  context 'button component renders a button' do
+    include_examples 'basic button behavior'
 
     describe 'type' do
-      context 'by default (without href)' do
+      context 'by default' do
         it 'has type "button"' do
           expect(page).to have_css "button[type='button']"
         end
@@ -238,34 +242,42 @@ RSpec.describe Pajamas::ButtonComponent, type: :component do
         end
       end
 
-      context 'when set to unkown type' do
+      context 'when set to unknown type' do
         let(:options) { { type: :madeup } }
 
         it 'has type "button"' do
           expect(page).to have_css "button[type='button']"
         end
       end
+    end
+  end
 
-      context 'for links (with href)' do
-        let(:options) { { href: 'https://example.com', type: :reset } }
+  context 'button component renders a link' do
+    let(:options) { { href: 'https://gitlab.com', target: '_blank' } }
 
-        it 'ignores type' do
-          expect(page).not_to have_css "[type]"
-        end
-      end
+    it "renders a link instead of the button" do
+      expect(page).not_to have_css "button[type='button']"
+      expect(page).to have_css "a[href='https://gitlab.com'][target='_blank']"
     end
 
-    describe 'link button' do
-      it 'renders a button tag with type="button" when "href" is not set' do
-        expect(page).to have_css "button[type='button']"
+    include_examples 'basic button behavior'
+
+    describe 'type' do
+      let(:options) { { href: 'https://example.com', type: :reset } }
+
+      it 'ignores type' do
+        expect(page).not_to have_css "[type]"
       end
+    end
+
+    describe 'method' do
+      where(:method) { [:get, :post, :put, :delete, :patch] }
 
-      context 'when "href" is provided' do
-        let(:options) { { href: 'https://gitlab.com', target: '_blank' } }
+      let(:options) { { href: 'https://gitlab.com', method: method } }
 
-        it "renders a link instead of the button" do
-          expect(page).not_to have_css "button[type='button']"
-          expect(page).to have_css "a[href='https://gitlab.com'][target='_blank']"
+      with_them do
+        it 'has the correct data-method attribute' do
+          expect(page).to have_css "a[data-method='#{method}']"
         end
       end
     end
diff --git a/spec/components/pajamas/checkbox_component_spec.rb b/spec/components/pajamas/checkbox_component_spec.rb
index d79c537a30e..3d50509ef10 100644
--- a/spec/components/pajamas/checkbox_component_spec.rb
+++ b/spec/components/pajamas/checkbox_component_spec.rb
@@ -8,12 +8,6 @@ RSpec.describe Pajamas::CheckboxComponent, :aggregate_failures, type: :component
   let_it_be(:label) { "Show one file at a time on merge request's Changes tab" }
   let_it_be(:help_text) { 'Instead of all the files changed, show only one file at a time.' }
 
-  RSpec.shared_examples 'it renders unchecked checkbox with value of `1`' do
-    it 'renders unchecked checkbox with value of `1`' do
-      expect(page).to have_unchecked_field(label, with: '1')
-    end
-  end
-
   context 'with default options' do
     before do
       fake_form_for do |form|
diff --git a/spec/components/pajamas/checkbox_tag_component_spec.rb b/spec/components/pajamas/checkbox_tag_component_spec.rb
new file mode 100644
index 00000000000..bca7a6005d5
--- /dev/null
+++ b/spec/components/pajamas/checkbox_tag_component_spec.rb
@@ -0,0 +1,59 @@
+# frozen_string_literal: true
+require "spec_helper"
+
+RSpec.describe Pajamas::CheckboxTagComponent, :aggregate_failures, type: :component do
+  let_it_be(:name) { :view_diffs_file_by_file }
+  let_it_be(:label) { "Show one file at a time on merge request's Changes tab" }
+  let_it_be(:help_text) { 'Instead of all the files changed, show only one file at a time.' }
+
+  context 'with default options' do
+    before do
+      render_inline(described_class.new(name: name)) do |c|
+        c.label { label }
+      end
+    end
+
+    include_examples 'it renders unchecked checkbox with value of `1`'
+    include_examples 'it does not render help text'
+  end
+
+  context 'with custom options' do
+    let_it_be(:value) { 'yes' }
+    let_it_be(:checkbox_options) { { class: 'checkbox-foo-bar', checked: true } }
+    let_it_be(:label_options) { { class: 'label-foo-bar' } }
+
+    before do
+      render_inline(
+        described_class.new(
+          name: name,
+          value: value,
+          checked: true,
+          checkbox_options: checkbox_options,
+          label_options: label_options
+        )
+      ) do |c|
+        c.label { label }
+      end
+    end
+
+    it 'renders checked checkbox with value of `yes`' do
+      expect(page).to have_checked_field(label, with: value, class: checkbox_options[:class])
+    end
+
+    it 'adds CSS class to label' do
+      expect(page).to have_selector('label.label-foo-bar')
+    end
+  end
+
+  context 'with `help_text` slot' do
+    before do
+      render_inline(described_class.new(name: name)) do |c|
+        c.label { label }
+        c.help_text { help_text }
+      end
+    end
+
+    include_examples 'it renders unchecked checkbox with value of `1`'
+    include_examples 'it renders help text'
+  end
+end
diff --git a/spec/components/pajamas/concerns/checkbox_radio_label_with_help_text_spec.rb b/spec/components/pajamas/concerns/checkbox_radio_label_with_help_text_spec.rb
index 7a792592b3c..4994abcfb93 100644
--- a/spec/components/pajamas/concerns/checkbox_radio_label_with_help_text_spec.rb
+++ b/spec/components/pajamas/concerns/checkbox_radio_label_with_help_text_spec.rb
@@ -8,6 +8,7 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       attr_reader(
         :form,
         :method,
+        :name,
         :label_argument,
         :help_text_argument,
         :label_options,
@@ -16,8 +17,9 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       )
 
       def initialize(
-        form:,
-        method:,
+        form: nil,
+        method: nil,
+        name: nil,
         label: nil,
         help_text: nil,
         label_options: {},
@@ -26,6 +28,7 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       )
         @form = form
         @method = method
+        @name = name
         @label_argument = label
         @help_text_argument = help_text
         @label_options = label_options
@@ -46,19 +49,25 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       end
 
       include Pajamas::Concerns::CheckboxRadioLabelWithHelpText
+      include ActionView::Context
       include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::FormTagHelper
     end
   end
 
-  let_it_be(:method) { 'username' }
+  let_it_be(:method_or_name) { 'username' }
   let_it_be(:label_options) { { class: 'foo-bar' } }
   let_it_be(:value) { 'Foo bar' }
+  let_it_be(:expected_label_entry) { '<span>Label argument</span>' }
+  let_it_be(:expected_label_with_help_text_entry) do
+    '<span>Label argument</span><p class="help-text" data-testid="pajamas-component-help-text">Help text argument</p>'
+  end
 
   describe '#render_label_with_help_text' do
     it 'calls `#format_options` with correct arguments' do
       allow(form).to receive(:label)
 
-      component = component_class.new(form: form, method: method, label_options: label_options, value: value)
+      component = component_class.new(form: form, method: method_or_name, label_options: label_options, value: value)
 
       expect(component).to receive(:format_options).with(
         options: label_options,
@@ -73,16 +82,13 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       it 'calls `form.label` with `label` and `help_text` arguments used in the block' do
         component = component_class.new(
           form: form,
-          method: method,
+          method: method_or_name,
           label: 'Label argument',
           help_text: 'Help text argument'
         )
 
-        expected_label_entry = '<span>Label argument</span><p class="help-text"' \
-        ' data-testid="pajamas-component-help-text">Help text argument</p>'
-
-        expect(form).to receive(:label).with(method, {}) do |&block|
-          expect(block.call).to eq(expected_label_entry)
+        expect(form).to receive(:label).with(method_or_name, {}) do |&block|
+          expect(block.call).to eq(expected_label_with_help_text_entry)
         end
 
         component.render_label_with_help_text
@@ -93,13 +99,11 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       it 'calls `form.label` with `label` argument used in the block' do
         component = component_class.new(
           form: form,
-          method: method,
+          method: method_or_name,
           label: 'Label argument'
         )
 
-        expected_label_entry = '<span>Label argument</span>'
-
-        expect(form).to receive(:label).with(method, {}) do |&block|
+        expect(form).to receive(:label).with(method_or_name, {}) do |&block|
           expect(block.call).to eq(expected_label_entry)
         end
 
@@ -107,4 +111,49 @@ RSpec.describe Pajamas::Concerns::CheckboxRadioLabelWithHelpText do
       end
     end
   end
+
+  describe '#render_label_tag_with_help_text' do
+    it 'calls `#format_options` with correct arguments' do
+      component = component_class.new(name: method_or_name, label_options: label_options, value: value)
+
+      expect(component).to receive(:format_options).with(
+        options: label_options,
+        css_classes: ['custom-control-label'],
+        additional_options: { value: value }
+      )
+
+      component.render_label_tag_with_help_text
+    end
+
+    context 'when `help_text` argument is passed' do
+      it 'calls `label_tag` with `label` and `help_text` arguments used in the block' do
+        component = component_class.new(
+          name: method_or_name,
+          label: 'Label argument',
+          help_text: 'Help text argument'
+        )
+
+        expect(component).to receive(:label_tag).with(method_or_name, {}) do |&block|
+          expect(block.call).to eq(expected_label_with_help_text_entry)
+        end
+
+        component.render_label_tag_with_help_text
+      end
+    end
+
+    context 'when `help_text` argument is not passed' do
+      it 'calls `label_tag` with `label` argument used in the block' do
+        component = component_class.new(
+          name: method_or_name,
+          label: 'Label argument'
+        )
+
+        expect(component).to receive(:label_tag).with(method_or_name, {}) do |&block|
+          expect(block.call).to eq(expected_label_entry)
+        end
+
+        component.render_label_tag_with_help_text
+      end
+    end
+  end
 end
diff --git a/spec/components/previews/pajamas/alert_component_preview.rb b/spec/components/previews/pajamas/alert_component_preview.rb
new file mode 100644
index 00000000000..9a6b77715f5
--- /dev/null
+++ b/spec/components/previews/pajamas/alert_component_preview.rb
@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+module Pajamas
+  class AlertComponentPreview < ViewComponent::Preview
+    # @param body text
+    # @param dismissible toggle
+    # @param variant select [info, warning, success, danger, tip]
+    def default(body: nil, dismissible: true, variant: :info)
+      render(Pajamas::AlertComponent.new(
+               title: "Title",
+               dismissible: dismissible,
+               variant: variant.to_sym
+             )) do |c|
+        if body
+          c.with_body { body }
+        end
+      end
+    end
+  end
+end
diff --git a/spec/components/previews/pajamas/avatar_component_preview.rb b/spec/components/previews/pajamas/avatar_component_preview.rb
new file mode 100644
index 00000000000..e5cdde1ccef
--- /dev/null
+++ b/spec/components/previews/pajamas/avatar_component_preview.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+module Pajamas
+  class AvatarComponentPreview < ViewComponent::Preview
+    # Avatar
+    # ----
+    # See its design reference [here](https://design.gitlab.com/components/avatar).
+    def default
+      user
+    end
+
+    # We show user avatars in a circle.
+    # @param size select [16, 24, 32, 48, 64, 96]
+    def user(size: 64)
+      render(Pajamas::AvatarComponent.new(User.first, size: size))
+    end
+
+    # @param size select [16, 24, 32, 48, 64, 96]
+    def project(size: 64)
+      render(Pajamas::AvatarComponent.new(Project.first, size: size))
+    end
+
+    # @param size select [16, 24, 32, 48, 64, 96]
+    def group(size: 64)
+      render(Pajamas::AvatarComponent.new(Group.first, size: size))
+    end
+  end
+end
diff --git a/spec/components/previews/pajamas/banner_component_preview.rb b/spec/components/previews/pajamas/banner_component_preview.rb
new file mode 100644
index 00000000000..861e3ff95dc
--- /dev/null
+++ b/spec/components/previews/pajamas/banner_component_preview.rb
@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+module Pajamas
+  class BannerComponentPreview < ViewComponent::Preview
+    # Banner
+    # ----
+    # See its design reference [here](https://design.gitlab.com/components/banner).
+    #
+    # @param button_text text
+    # @param button_link text
+    # @param content textarea
+    # @param embedded toggle
+    # @param variant select [introduction, promotion]
+    def default(
+      button_text: "Learn more",
+      button_link: "https://about.gitlab.com/",
+      content: "Add your message here.",
+      embedded: false,
+      variant: :promotion
+    )
+      render(Pajamas::BannerComponent.new(
+               button_text: button_text,
+               button_link: button_link,
+               embedded: embedded,
+               svg_path: "illustrations/autodevops.svg",
+               variant: variant
+             )) do |c|
+        content_tag :p, content
+      end
+    end
+
+    # Use the `primary_action` slot instead of `button_text` and `button_link` if you need something more special,
+    # like rendering a partial that holds your button.
+    def with_primary_action_slot
+      render(Pajamas::BannerComponent.new) do |c|
+        c.primary_action do
+          # You could also `render` another partial here.
+          tag.button "I'm special", class: "btn btn-md btn-confirm gl-button"
+        end
+        content_tag :p, "This banner uses the primary_action slot."
+      end
+    end
+
+    # Use the `illustration` slot instead of `svg_path` if your illustration is not part or the asset pipeline,
+    # but for example, an inline SVG via `custom_icon`.
+    def with_illustration_slot
+      render(Pajamas::BannerComponent.new) do |c|
+        c.illustration do
+          '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="white" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-thumbs-up"><path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path></svg>'.html_safe # rubocop:disable Layout/LineLength
+        end
+        content_tag :p, "This banner uses the illustration slot."
+      end
+    end
+  end
+end
diff --git a/spec/components/previews/pajamas/button_component_preview.rb b/spec/components/previews/pajamas/button_component_preview.rb
new file mode 100644
index 00000000000..1f61d9cf2bc
--- /dev/null
+++ b/spec/components/previews/pajamas/button_component_preview.rb
@@ -0,0 +1,56 @@
+# frozen_string_literal: true
+module Pajamas
+  class ButtonComponentPreview < ViewComponent::Preview
+    # Button
+    # ----
+    # See its design reference [here](https://design.gitlab.com/components/banner).
+    #
+    # @param category select [primary, secondary, tertiary]
+    # @param variant select [default, confirm, danger, dashed, link, reset]
+    # @param size select [small, medium]
+    # @param type select [button, reset, submit]
+    # @param disabled toggle
+    # @param loading toggle
+    # @param block toggle
+    # @param selected toggle
+    # @param icon text
+    # @param text text
+    def default( # rubocop:disable Metrics/ParameterLists
+      category: :primary,
+      variant: :default,
+      size: :medium,
+      type: :button,
+      disabled: false,
+      loading: false,
+      block: false,
+      selected: false,
+      icon: "pencil",
+      text: "Edit"
+    )
+      render(Pajamas::ButtonComponent.new(
+               category: category,
+               variant: variant,
+               size: size,
+               type: type,
+               disabled: disabled,
+               loading: loading,
+               block: block,
+               selected: selected,
+               icon: icon
+             )) do
+        text.presence
+      end
+    end
+
+    # The component can also be used to create links that look and feel like buttons.
+    # Just provide a `href` and optionally a `target` to create an `<a>` tag.
+    def link
+      render(Pajamas::ButtonComponent.new(
+               href: "https://gitlab.com",
+               target: "_blank"
+             )) do
+        "This is a link"
+      end
+    end
+  end
+end
diff --git a/spec/components/previews/pajamas/card_component_preview.rb b/spec/components/previews/pajamas/card_component_preview.rb
new file mode 100644
index 00000000000..61d1f8db9e1
--- /dev/null
+++ b/spec/components/previews/pajamas/card_component_preview.rb
@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+module Pajamas
+  class CardComponentPreview < ViewComponent::Preview
+    # Card
+    # ----
+    # See its design reference [here](https://design.gitlab.com/components/card).
+    #
+    # @param header text
+    # @param body textarea
+    # @param footer text
+    def default(header: nil, body: "Every card has a body.", footer: nil)
+      render(Pajamas::CardComponent.new) do |c|
+        if header
+          c.with_header { header }
+        end
+
+        c.with_body do
+          content_tag(:p, body)
+        end
+
+        if footer
+          c.with_footer { footer }
+        end
+      end
+    end
+  end
+end
diff --git a/spec/components/previews/pajamas/spinner_component_preview.rb b/spec/components/previews/pajamas/spinner_component_preview.rb
new file mode 100644
index 00000000000..149bfddcfc2
--- /dev/null
+++ b/spec/components/previews/pajamas/spinner_component_preview.rb
@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+module Pajamas
+  class SpinnerComponentPreview < ViewComponent::Preview
+    # Spinner
+    # ----
+    # See its design reference [here](https://design.gitlab.com/components/spinner).
+    #
+    # @param inline toggle
+    # @param label text
+    # @param size select [[small, sm], [medium, md], [large, lg], [extra large, xl]]
+    def default(inline: false, label: "Loading", size: :md)
+      render(Pajamas::SpinnerComponent.new(inline: inline, label: label, size: size))
+    end
+
+    # Use a light spinner on dark backgrounds
+    #
+    # @display bg_color "#222"
+    def light
+      render(Pajamas::SpinnerComponent.new(color: :light))
+    end
+  end
+end