diff options
Diffstat (limited to 'spec/components/previews')
-rw-r--r-- | spec/components/previews/layouts/horizontal_section_component_preview.rb | 22 | ||||
-rw-r--r-- | spec/components/previews/pajamas/badge_component_preview.rb | 61 |
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 |