2 files changed, 83 insertions, 0 deletions
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