primer_view_components 0.0.12 → 0.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +39 -1
- data/app/components/primer/avatar_component.rb +11 -11
- data/app/components/primer/base_component.rb +102 -9
- data/app/components/primer/blankslate_component.html.erb +5 -5
- data/app/components/primer/blankslate_component.rb +31 -6
- data/app/components/primer/border_box_component.html.erb +5 -5
- data/app/components/primer/border_box_component.rb +34 -34
- data/app/components/primer/box_component.rb +5 -5
- data/app/components/primer/breadcrumb_component.html.erb +2 -2
- data/app/components/primer/breadcrumb_component.rb +12 -12
- data/app/components/primer/button_component.rb +9 -9
- data/app/components/primer/component.rb +1 -0
- data/app/components/primer/counter_component.rb +16 -15
- data/app/components/primer/details_component.html.erb +1 -1
- data/app/components/primer/details_component.rb +15 -15
- data/app/components/primer/dropdown_menu_component.html.erb +1 -1
- data/app/components/primer/dropdown_menu_component.rb +6 -6
- data/app/components/primer/flash_component.html.erb +2 -2
- data/app/components/primer/flash_component.rb +14 -16
- data/app/components/primer/flex_component.rb +5 -5
- data/app/components/primer/flex_item_component.rb +5 -5
- data/app/components/primer/heading_component.rb +4 -4
- data/app/components/primer/label_component.rb +22 -16
- data/app/components/primer/layout_component.html.erb +1 -1
- data/app/components/primer/layout_component.rb +6 -6
- data/app/components/primer/link_component.rb +9 -9
- data/app/components/primer/octicon_component.rb +10 -10
- data/app/components/primer/popover_component.html.erb +1 -1
- data/app/components/primer/popover_component.rb +27 -27
- data/app/components/primer/progress_bar_component.html.erb +2 -2
- data/app/components/primer/progress_bar_component.rb +16 -16
- data/app/components/primer/slot.rb +1 -0
- data/app/components/primer/spinner_component.html.erb +1 -1
- data/app/components/primer/spinner_component.rb +9 -9
- data/app/components/primer/state_component.rb +8 -8
- data/app/components/primer/subhead_component.html.erb +4 -4
- data/app/components/primer/subhead_component.rb +26 -26
- data/app/components/primer/text_component.rb +5 -5
- data/app/components/primer/timeline_item_component.html.erb +4 -4
- data/app/components/primer/timeline_item_component.rb +28 -28
- data/app/components/primer/underline_nav_component.html.erb +1 -1
- data/app/components/primer/underline_nav_component.rb +5 -5
- data/app/components/primer/view_components.rb +1 -0
- data/lib/primer/classify.rb +7 -6
- data/lib/primer/fetch_or_fallback_helper.rb +8 -0
- data/lib/primer/join_style_arguments_helper.rb +13 -0
- data/lib/primer/view_components/version.rb +1 -1
- metadata +3 -2
@@ -1,16 +1,16 @@
|
|
1
|
-
<%= render Primer::BaseComponent.new(**
|
1
|
+
<%= render Primer::BaseComponent.new(**system_arguments) do %>
|
2
2
|
<% if avatar %>
|
3
|
-
<%= render Primer::AvatarComponent.new(alt: avatar.alt, src: avatar.src, size: avatar.size, square: avatar.square, **avatar.
|
3
|
+
<%= render Primer::AvatarComponent.new(alt: avatar.alt, src: avatar.src, size: avatar.size, square: avatar.square, **avatar.system_arguments) %>
|
4
4
|
<% end %>
|
5
5
|
|
6
6
|
<% if badge %>
|
7
|
-
<%= render Primer::BaseComponent.new(**badge.
|
7
|
+
<%= render Primer::BaseComponent.new(**badge.system_arguments) do %>
|
8
8
|
<%= octicon badge.icon %>
|
9
9
|
<% end %>
|
10
10
|
<% end %>
|
11
11
|
|
12
12
|
<% if body %>
|
13
|
-
<%= render Primer::BaseComponent.new(**body.
|
13
|
+
<%= render Primer::BaseComponent.new(**body.system_arguments) do %>
|
14
14
|
<%= body.content %>
|
15
15
|
<% end %>
|
16
16
|
<% end %>
|
@@ -9,7 +9,7 @@ module Primer
|
|
9
9
|
with_slot :badge, class_name: "Badge"
|
10
10
|
with_slot :body, class_name: "Body"
|
11
11
|
|
12
|
-
attr_reader :
|
12
|
+
attr_reader :system_arguments
|
13
13
|
|
14
14
|
# @example 75|Default
|
15
15
|
# <div style="padding-left: 60px">
|
@@ -21,14 +21,14 @@ module Primer
|
|
21
21
|
# </div>
|
22
22
|
#
|
23
23
|
# @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
|
24
|
-
# @param
|
25
|
-
def initialize(condensed: false, **
|
26
|
-
@
|
27
|
-
@
|
28
|
-
@
|
24
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
25
|
+
def initialize(condensed: false, **system_arguments)
|
26
|
+
@system_arguments = system_arguments
|
27
|
+
@system_arguments[:tag] = :div
|
28
|
+
@system_arguments[:classes] = class_names(
|
29
29
|
"TimelineItem",
|
30
30
|
condensed ? "TimelineItem--condensed" : "",
|
31
|
-
|
31
|
+
system_arguments[:classes]
|
32
32
|
)
|
33
33
|
end
|
34
34
|
|
@@ -37,55 +37,55 @@ module Primer
|
|
37
37
|
end
|
38
38
|
|
39
39
|
class Avatar < Primer::Slot
|
40
|
-
attr_reader :
|
40
|
+
attr_reader :system_arguments, :alt, :src, :size, :square
|
41
41
|
|
42
42
|
# @param alt [String] Alt text for avatar image.
|
43
43
|
# @param src [String] Src attribute for avatar image.
|
44
44
|
# @param size [Integer] Image size.
|
45
45
|
# @param square [Boolean] Whether to round the edges of the image.
|
46
|
-
# @param
|
47
|
-
def initialize(alt: nil, src: nil, size: 40, square: true, **
|
46
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
47
|
+
def initialize(alt: nil, src: nil, size: 40, square: true, **system_arguments)
|
48
48
|
@alt = alt
|
49
49
|
@src = src
|
50
50
|
@size = size
|
51
51
|
@square = square
|
52
52
|
|
53
|
-
@
|
54
|
-
@
|
55
|
-
@
|
53
|
+
@system_arguments = system_arguments
|
54
|
+
@system_arguments[:tag] = :div
|
55
|
+
@system_arguments[:classes] = class_names(
|
56
56
|
"TimelineItem-avatar",
|
57
|
-
|
57
|
+
system_arguments[:classes]
|
58
58
|
)
|
59
59
|
end
|
60
60
|
end
|
61
61
|
|
62
62
|
class Badge < Primer::Slot
|
63
|
-
attr_reader :
|
63
|
+
attr_reader :system_arguments, :icon
|
64
64
|
|
65
65
|
# @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
|
66
|
-
# @param
|
67
|
-
def initialize(icon: nil, **
|
66
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
67
|
+
def initialize(icon: nil, **system_arguments)
|
68
68
|
@icon = icon
|
69
69
|
|
70
|
-
@
|
71
|
-
@
|
72
|
-
@
|
70
|
+
@system_arguments = system_arguments
|
71
|
+
@system_arguments[:tag] = :div
|
72
|
+
@system_arguments[:classes] = class_names(
|
73
73
|
"TimelineItem-badge",
|
74
|
-
|
74
|
+
system_arguments[:classes]
|
75
75
|
)
|
76
76
|
end
|
77
77
|
end
|
78
78
|
|
79
79
|
class Body < Primer::Slot
|
80
|
-
attr_reader :
|
80
|
+
attr_reader :system_arguments
|
81
81
|
|
82
|
-
# @param
|
83
|
-
def initialize(**
|
84
|
-
@
|
85
|
-
@
|
86
|
-
@
|
82
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
83
|
+
def initialize(**system_arguments)
|
84
|
+
@system_arguments = system_arguments
|
85
|
+
@system_arguments[:tag] = :div
|
86
|
+
@system_arguments[:classes] = class_names(
|
87
87
|
"TimelineItem-body",
|
88
|
-
|
88
|
+
system_arguments[:classes]
|
89
89
|
)
|
90
90
|
end
|
91
91
|
end
|
@@ -7,13 +7,13 @@ module Primer
|
|
7
7
|
|
8
8
|
with_content_areas :body, :actions
|
9
9
|
|
10
|
-
def initialize(align: ALIGN_DEFAULT, **
|
10
|
+
def initialize(align: ALIGN_DEFAULT, **system_arguments)
|
11
11
|
@align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
|
12
12
|
|
13
|
-
@
|
14
|
-
@
|
15
|
-
@
|
16
|
-
@
|
13
|
+
@system_arguments = system_arguments
|
14
|
+
@system_arguments[:tag] = :nav
|
15
|
+
@system_arguments[:classes] = class_names(
|
16
|
+
@system_arguments[:classes],
|
17
17
|
"UnderlineNav",
|
18
18
|
"UnderlineNav--right" => @align == :right
|
19
19
|
)
|
data/lib/primer/classify.rb
CHANGED
@@ -9,7 +9,7 @@ module Primer
|
|
9
9
|
ALIGN_ITEMS_KEY = :align_items
|
10
10
|
DISPLAY_KEY = :display
|
11
11
|
RESPONSIVE_KEYS = ([DISPLAY_KEY, DIRECTION_KEY, JUSTIFY_CONTENT_KEY, ALIGN_ITEMS_KEY, :col, :float] + SPACING_KEYS).freeze
|
12
|
-
BREAKPOINTS = ["", "-sm", "-md", "-lg"]
|
12
|
+
BREAKPOINTS = ["", "-sm", "-md", "-lg", "-xl"]
|
13
13
|
|
14
14
|
# Keys where we can simply translate { key: value } into ".key-value"
|
15
15
|
CONCAT_KEYS = SPACING_KEYS + [:hide, :position, :v, :float, :col, :text, :box_shadow].freeze
|
@@ -29,7 +29,7 @@ module Primer
|
|
29
29
|
WIDTH_KEY = :width
|
30
30
|
HEIGHT_KEY = :height
|
31
31
|
BOX_SHADOW_KEY = :box_shadow
|
32
|
-
|
32
|
+
VISIBILITY_KEY = :visibility
|
33
33
|
|
34
34
|
BOOLEAN_MAPPINGS = {
|
35
35
|
underline: {
|
@@ -102,7 +102,8 @@ module Primer
|
|
102
102
|
ALIGN_SELF_KEY,
|
103
103
|
WIDTH_KEY,
|
104
104
|
HEIGHT_KEY,
|
105
|
-
BOX_SHADOW_KEY
|
105
|
+
BOX_SHADOW_KEY,
|
106
|
+
VISIBILITY_KEY
|
106
107
|
]
|
107
108
|
).freeze
|
108
109
|
|
@@ -131,9 +132,7 @@ module Primer
|
|
131
132
|
|
132
133
|
if invalid_class_names.any?
|
133
134
|
raise ArgumentError.new(
|
134
|
-
"Primer CSS class #{'name'.pluralize(invalid_class_names.length)}
|
135
|
-
#{invalid_class_names.to_sentence} #{'is'.pluralize(invalid_class_names.length)} \
|
136
|
-
not allowed, use style arguments instead (https://github.com/primer/view_components#built-in-styling-arguments). This warning will not be raised in production.",
|
135
|
+
"Use System Arguments (https://primer.style/view-components/system-arguments) instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. This warning will not be raised in production.",
|
137
136
|
)
|
138
137
|
end
|
139
138
|
end
|
@@ -233,6 +232,8 @@ module Primer
|
|
233
232
|
else
|
234
233
|
memo[:classes] << "box-shadow-#{dasherized_val}"
|
235
234
|
end
|
235
|
+
elsif key == VISIBILITY_KEY
|
236
|
+
memo[:classes] << "v-#{dasherized_val}"
|
236
237
|
else
|
237
238
|
memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{dasherized_val}"
|
238
239
|
end
|
@@ -0,0 +1,13 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
module JoinStyleArgumentsHelper
|
5
|
+
# Join two `style` arguments
|
6
|
+
#
|
7
|
+
# join_style_arguments("width: 100%", "height: 100%") =>
|
8
|
+
# "width: 100%;height: 100%"
|
9
|
+
def join_style_arguments(*args)
|
10
|
+
args.compact.join(";")
|
11
|
+
end
|
12
|
+
end
|
13
|
+
end
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: primer_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0.
|
4
|
+
version: 0.0.17
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-10
|
11
|
+
date: 2020-12-10 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -237,6 +237,7 @@ files:
|
|
237
237
|
- lib/primer/class_name_helper.rb
|
238
238
|
- lib/primer/classify.rb
|
239
239
|
- lib/primer/fetch_or_fallback_helper.rb
|
240
|
+
- lib/primer/join_style_arguments_helper.rb
|
240
241
|
- lib/primer/view_components.rb
|
241
242
|
- lib/primer/view_components/engine.rb
|
242
243
|
- lib/primer/view_components/version.rb
|