Add latest changes from gitlab-org/gitlab@master

7 files changed, 225 insertions, 0 deletions

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/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