primer_view_components 0.0.22 → 0.0.23
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +18 -1
- data/app/components/primer/label_component.rb +13 -23
- data/app/components/primer/subhead_component.html.erb +3 -15
- data/app/components/primer/subhead_component.rb +42 -58
- data/lib/primer/view_components/version.rb +1 -1
- data/static/statuses.json +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2c3deb4c623c9f6825193924584857ead4554a0a78003d60ed901f100bf454e3
|
4
|
+
data.tar.gz: d21529682ea0c4dabddb193d4f86bab373636f1f407a66945723d36339faa7d7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 2ea036cc17c4167cbf88306c9626e1a590ff668cde1eebf8aaba01d7a6f3c10d271dd74b16b362c83ecfe7fdc6be26000a0583c10aa6cf0d83ad7cc2f949ae53
|
7
|
+
data.tar.gz: 1bb92eb17ed62a6c718aff864fd3dea932de727cd08c8663116331b82b8cf07664cf223a0653c157b4553947151cbbf44a80812ec3594ac87a572b6e3267c1a9
|
data/CHANGELOG.md
CHANGED
@@ -1,7 +1,24 @@
|
|
1
1
|
# CHANGELOG
|
2
2
|
|
3
3
|
## main
|
4
|
-
|
4
|
+
|
5
|
+
## 0.0.23
|
6
|
+
|
7
|
+
* Remove node and yarn version requirements from `@primer/view-components`.
|
8
|
+
|
9
|
+
*Manuel Puyol*
|
10
|
+
|
11
|
+
* **Breaking change**: Upgrade `SubheadComponent` to use Slots V2.
|
12
|
+
|
13
|
+
*Simon Taranto*
|
14
|
+
|
15
|
+
* **Breaking change**: Update `LabelComponent` to use only functional color
|
16
|
+
supportive scheme keys. The component no longer accepts colors (`:gray`, for
|
17
|
+
example) but only functional schemes (`primary`, for example).
|
18
|
+
`LabelComponent` is promoted to beta status.
|
19
|
+
|
20
|
+
*Simon Taranto*
|
21
|
+
|
5
22
|
## 0.0.22
|
6
23
|
|
7
24
|
* Add view helpers to easily render Primer components.
|
@@ -3,7 +3,7 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use labels to add contextual metadata to a design.
|
5
5
|
class LabelComponent < Primer::Component
|
6
|
-
|
6
|
+
SCHEME_MAPPINGS = {
|
7
7
|
primary: "Label--primary",
|
8
8
|
secondary: "Label--secondary",
|
9
9
|
info: "Label--info",
|
@@ -12,21 +12,6 @@ module Primer
|
|
12
12
|
danger: "Label--danger"
|
13
13
|
}.freeze
|
14
14
|
|
15
|
-
DEPRECATED_SCHEME_MAPPINGS = {
|
16
|
-
gray: "Label--gray",
|
17
|
-
dark_gray: "Label--gray-darker",
|
18
|
-
yellow: "Label--yellow",
|
19
|
-
orange: "Label--orange",
|
20
|
-
red: "Label--red",
|
21
|
-
green: "Label--green",
|
22
|
-
blue: "Label--blue",
|
23
|
-
purple: "Label--purple",
|
24
|
-
pink: "Label--pink",
|
25
|
-
outline: "Label--outline",
|
26
|
-
green_outline: "Label--outline-green"
|
27
|
-
}.freeze
|
28
|
-
|
29
|
-
SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
|
30
15
|
SCHEME_OPTIONS = SCHEME_MAPPINGS.keys << nil
|
31
16
|
|
32
17
|
VARIANT_MAPPINGS = {
|
@@ -36,19 +21,20 @@ module Primer
|
|
36
21
|
VARIANT_OPTIONS = VARIANT_MAPPINGS.keys << nil
|
37
22
|
|
38
23
|
# @example Schemes
|
39
|
-
# <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "
|
40
|
-
# <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :
|
41
|
-
# <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :
|
42
|
-
# <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :
|
43
|
-
# <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :
|
44
|
-
# <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :
|
24
|
+
# <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "Default" } %>
|
25
|
+
# <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :primary)) { "Primary" } %>
|
26
|
+
# <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :secondary)) { "Secondary" } %>
|
27
|
+
# <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :info)) { "Info" } %>
|
28
|
+
# <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :success)) { "Success" } %>
|
29
|
+
# <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :warning)) { "Warning" } %>
|
30
|
+
# <%= render(Primer::LabelComponent.new(title: "Label: Label", scheme: :danger)) { "Danger" } %>
|
45
31
|
#
|
46
32
|
# @example Variants
|
47
33
|
# <%= render(Primer::LabelComponent.new(title: "Label: Label")) { "Default" } %>
|
48
34
|
# <%= render(Primer::LabelComponent.new(title: "Label: Label", variant: :large)) { "Large" } %>
|
49
35
|
#
|
50
36
|
# @param title [String] `title` attribute for the component element.
|
51
|
-
# @param scheme [Symbol] <%= one_of(Primer::LabelComponent::
|
37
|
+
# @param scheme [Symbol] <%= one_of(Primer::LabelComponent::SCHEME_MAPPINGS.keys) %>
|
52
38
|
# @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
|
53
39
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
54
40
|
def initialize(title:, scheme: nil, variant: nil, **system_arguments)
|
@@ -67,5 +53,9 @@ module Primer
|
|
67
53
|
def call
|
68
54
|
render(Primer::BaseComponent.new(**@system_arguments)) { content }
|
69
55
|
end
|
56
|
+
|
57
|
+
def self.status
|
58
|
+
Primer::Component::STATUSES[:beta]
|
59
|
+
end
|
70
60
|
end
|
71
61
|
end
|
@@ -1,17 +1,5 @@
|
|
1
1
|
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
<% end %>
|
6
|
-
<% end %>
|
7
|
-
<% if actions.present? %>
|
8
|
-
<%= render Primer::BaseComponent.new(**actions.system_arguments) do %>
|
9
|
-
<%= actions.content %>
|
10
|
-
<% end %>
|
11
|
-
<% end %>
|
12
|
-
<% if description.present? %>
|
13
|
-
<%= render Primer::BaseComponent.new(**description.system_arguments) do %>
|
14
|
-
<%= description.content %>
|
15
|
-
<% end %>
|
16
|
-
<% end %>
|
2
|
+
<%= heading %>
|
3
|
+
<%= actions %>
|
4
|
+
<%= description %>
|
17
5
|
<% end %>
|
@@ -3,41 +3,72 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use the Subhead component for page headings.
|
5
5
|
class SubheadComponent < Primer::Component
|
6
|
-
include ViewComponent::
|
6
|
+
include ViewComponent::SlotableV2
|
7
7
|
|
8
|
-
|
9
|
-
|
10
|
-
|
8
|
+
# The heading
|
9
|
+
#
|
10
|
+
# @param danger [Boolean] Whether to style the heading as dangerous.
|
11
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
12
|
+
renders_one :heading, lambda { |danger: false, **system_arguments|
|
13
|
+
system_arguments[:tag] ||= :div
|
14
|
+
system_arguments[:classes] = class_names(
|
15
|
+
system_arguments[:classes],
|
16
|
+
"Subhead-heading",
|
17
|
+
"Subhead-heading--danger": danger
|
18
|
+
)
|
19
|
+
|
20
|
+
Primer::BaseComponent.new(**system_arguments)
|
21
|
+
}
|
22
|
+
|
23
|
+
# Actions
|
24
|
+
#
|
25
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
26
|
+
renders_one :actions, lambda { |**system_arguments|
|
27
|
+
system_arguments[:tag] = :div
|
28
|
+
system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-actions")
|
29
|
+
|
30
|
+
Primer::BaseComponent.new(**system_arguments)
|
31
|
+
}
|
32
|
+
|
33
|
+
# The description
|
34
|
+
#
|
35
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
36
|
+
renders_one :description, lambda { |**system_arguments|
|
37
|
+
system_arguments[:tag] = :div
|
38
|
+
system_arguments[:classes] = class_names(system_arguments[:classes], "Subhead-description")
|
39
|
+
|
40
|
+
Primer::BaseComponent.new(**system_arguments)
|
41
|
+
}
|
11
42
|
|
12
43
|
# @example Default
|
13
44
|
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
14
|
-
# <% component.
|
45
|
+
# <% component.heading do %>
|
15
46
|
# My Heading
|
16
47
|
# <% end %>
|
17
|
-
# <% component.
|
48
|
+
# <% component.description do %>
|
18
49
|
# My Description
|
19
50
|
# <% end %>
|
20
51
|
# <% end %>
|
21
52
|
#
|
22
53
|
# @example Without border
|
23
54
|
# <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
|
24
|
-
# <% component.
|
55
|
+
# <% component.heading do %>
|
25
56
|
# My Heading
|
26
57
|
# <% end %>
|
27
|
-
# <% component.
|
58
|
+
# <% component.description do %>
|
28
59
|
# My Description
|
29
60
|
# <% end %>
|
30
61
|
# <% end %>
|
31
62
|
#
|
32
63
|
# @example With actions
|
33
64
|
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
34
|
-
# <% component.
|
65
|
+
# <% component.heading do %>
|
35
66
|
# My Heading
|
36
67
|
# <% end %>
|
37
|
-
# <% component.
|
68
|
+
# <% component.description do %>
|
38
69
|
# My Description
|
39
70
|
# <% end %>
|
40
|
-
# <% component.
|
71
|
+
# <% component.actions do %>
|
41
72
|
# <%= render(
|
42
73
|
# Primer::ButtonComponent.new(
|
43
74
|
# tag: :a, href: "http://www.google.com", button_type: :danger
|
@@ -66,52 +97,5 @@ module Primer
|
|
66
97
|
def render?
|
67
98
|
heading.present?
|
68
99
|
end
|
69
|
-
|
70
|
-
# :nodoc:
|
71
|
-
class Heading < ViewComponent::Slot
|
72
|
-
include ClassNameHelper
|
73
|
-
|
74
|
-
attr_reader :system_arguments
|
75
|
-
|
76
|
-
# @param danger [Boolean] Whether to style the heading as dangerous.
|
77
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
78
|
-
def initialize(danger: false, **system_arguments)
|
79
|
-
@system_arguments = system_arguments
|
80
|
-
@system_arguments[:tag] ||= :div
|
81
|
-
@system_arguments[:classes] = class_names(
|
82
|
-
@system_arguments[:classes],
|
83
|
-
"Subhead-heading",
|
84
|
-
"Subhead-heading--danger": danger
|
85
|
-
)
|
86
|
-
end
|
87
|
-
end
|
88
|
-
|
89
|
-
# :nodoc:
|
90
|
-
class Actions < ViewComponent::Slot
|
91
|
-
include ClassNameHelper
|
92
|
-
|
93
|
-
attr_reader :system_arguments
|
94
|
-
|
95
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
96
|
-
def initialize(**system_arguments)
|
97
|
-
@system_arguments = system_arguments
|
98
|
-
@system_arguments[:tag] = :div
|
99
|
-
@system_arguments[:classes] = class_names(@system_arguments[:classes], "Subhead-actions")
|
100
|
-
end
|
101
|
-
end
|
102
|
-
|
103
|
-
# :nodoc:
|
104
|
-
class Description < ViewComponent::Slot
|
105
|
-
include ClassNameHelper
|
106
|
-
|
107
|
-
attr_reader :system_arguments
|
108
|
-
|
109
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
110
|
-
def initialize(**system_arguments)
|
111
|
-
@system_arguments = system_arguments
|
112
|
-
@system_arguments[:tag] = :div
|
113
|
-
@system_arguments[:classes] = class_names(@system_arguments[:classes], "Subhead-description")
|
114
|
-
end
|
115
|
-
end
|
116
100
|
end
|
117
101
|
end
|
data/static/statuses.json
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"alpha","Primer::BlankslateComponent":"alpha","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"alpha","Primer::ButtonComponent":"alpha","Primer::ButtonGroupComponent":"alpha","Primer::ButtonMarketingComponent":"alpha","Primer::CounterComponent":"beta","Primer::DetailsComponent":"alpha","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"alpha","Primer::LabelComponent":"
|
1
|
+
{"Primer::AvatarComponent":"beta","Primer::AvatarStackComponent":"alpha","Primer::BaseComponent":"alpha","Primer::BlankslateComponent":"alpha","Primer::BorderBoxComponent":"beta","Primer::BoxComponent":"stable","Primer::BreadcrumbComponent":"alpha","Primer::ButtonComponent":"alpha","Primer::ButtonGroupComponent":"alpha","Primer::ButtonMarketingComponent":"alpha","Primer::CounterComponent":"beta","Primer::DetailsComponent":"alpha","Primer::Dropdown::MenuComponent":"alpha","Primer::DropdownComponent":"alpha","Primer::DropdownMenuComponent":"deprecated","Primer::FlashComponent":"beta","Primer::FlexComponent":"alpha","Primer::FlexItemComponent":"alpha","Primer::HeadingComponent":"alpha","Primer::LabelComponent":"beta","Primer::LayoutComponent":"alpha","Primer::LinkComponent":"beta","Primer::MarkdownComponent":"alpha","Primer::MenuComponent":"alpha","Primer::OcticonComponent":"beta","Primer::PopoverComponent":"alpha","Primer::ProgressBarComponent":"alpha","Primer::SpinnerComponent":"beta","Primer::StateComponent":"beta","Primer::SubheadComponent":"alpha","Primer::TabContainerComponent":"alpha","Primer::TabNavComponent":"alpha","Primer::TabNavComponent::TabComponent":"alpha","Primer::TextComponent":"alpha","Primer::TimelineItemComponent":"alpha","Primer::TimelineItemComponent::BadgeComponent":"alpha","Primer::TooltipComponent":"alpha","Primer::TruncateComponent":"alpha","Primer::UnderlineNavComponent":"alpha"}
|