diff options
Diffstat (limited to 'spec/components')
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 |