1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
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
|
