primer_view_components 0.0.9 → 0.0.14
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 +31 -1
- data/README.md +2 -175
- data/app/components/primer/avatar_component.rb +22 -11
- data/app/components/primer/base_component.rb +56 -11
- data/app/components/primer/blankslate_component.html.erb +1 -1
- data/app/components/primer/blankslate_component.rb +71 -116
- data/app/components/primer/border_box_component.html.erb +5 -5
- data/app/components/primer/border_box_component.rb +45 -33
- data/app/components/primer/box_component.rb +6 -4
- data/app/components/primer/breadcrumb_component.html.erb +2 -2
- data/app/components/primer/breadcrumb_component.rb +23 -30
- data/app/components/primer/button_component.rb +26 -9
- data/app/components/primer/component.rb +1 -0
- data/app/components/primer/counter_component.rb +13 -9
- data/app/components/primer/details_component.html.erb +1 -1
- data/app/components/primer/details_component.rb +18 -18
- 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 +42 -12
- 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 +37 -14
- data/app/components/primer/layout_component.html.erb +1 -1
- data/app/components/primer/layout_component.rb +22 -5
- data/app/components/primer/link_component.rb +17 -7
- data/app/components/primer/octicon_component.rb +20 -7
- data/app/components/primer/popover_component.html.erb +1 -1
- data/app/components/primer/popover_component.rb +61 -23
- data/app/components/primer/progress_bar_component.html.erb +2 -2
- data/app/components/primer/progress_bar_component.rb +40 -30
- data/app/components/primer/slot.rb +1 -0
- data/app/components/primer/spinner_component.html.erb +6 -0
- data/app/components/primer/spinner_component.rb +39 -0
- data/app/components/primer/state_component.rb +26 -14
- data/app/components/primer/subhead_component.html.erb +4 -4
- data/app/components/primer/subhead_component.rb +68 -43
- data/app/components/primer/text_component.rb +10 -4
- data/app/components/primer/timeline_item_component.html.erb +4 -4
- data/app/components/primer/timeline_item_component.rb +48 -24
- 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 +2 -4
- data/lib/primer/view_components/version.rb +1 -1
- metadata +4 -2
@@ -1,6 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
+
# Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.
|
4
5
|
class TimelineItemComponent < Primer::Component
|
5
6
|
include ViewComponent::Slotable
|
6
7
|
|
@@ -8,14 +9,26 @@ module Primer
|
|
8
9
|
with_slot :badge, class_name: "Badge"
|
9
10
|
with_slot :body, class_name: "Body"
|
10
11
|
|
11
|
-
attr_reader :
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
12
|
+
attr_reader :system_arguments
|
13
|
+
|
14
|
+
# @example 75|Default
|
15
|
+
# <div style="padding-left: 60px">
|
16
|
+
# <%= render(Primer::TimelineItemComponent.new) do |component| %>
|
17
|
+
# <% component.slot(:avatar, src: "https://github.com/github.png", alt: "github") %>
|
18
|
+
# <% component.slot(:badge, bg: :green, color: :white, icon: :check) %>
|
19
|
+
# <% component.slot(:body) { "Success!" } %>
|
20
|
+
# <% end %>
|
21
|
+
# </div>
|
22
|
+
#
|
23
|
+
# @param condensed [Boolean] Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits.
|
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(
|
16
29
|
"TimelineItem",
|
17
30
|
condensed ? "TimelineItem--condensed" : "",
|
18
|
-
|
31
|
+
system_arguments[:classes]
|
19
32
|
)
|
20
33
|
end
|
21
34
|
|
@@ -24,44 +37,55 @@ module Primer
|
|
24
37
|
end
|
25
38
|
|
26
39
|
class Avatar < Primer::Slot
|
27
|
-
attr_reader :
|
28
|
-
|
40
|
+
attr_reader :system_arguments, :alt, :src, :size, :square
|
41
|
+
|
42
|
+
# @param alt [String] Alt text for avatar image.
|
43
|
+
# @param src [String] Src attribute for avatar image.
|
44
|
+
# @param size [Integer] Image size.
|
45
|
+
# @param square [Boolean] Whether to round the edges of the image.
|
46
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
47
|
+
def initialize(alt: nil, src: nil, size: 40, square: true, **system_arguments)
|
29
48
|
@alt = alt
|
30
49
|
@src = src
|
31
50
|
@size = size
|
32
51
|
@square = square
|
33
52
|
|
34
|
-
@
|
35
|
-
@
|
36
|
-
@
|
53
|
+
@system_arguments = system_arguments
|
54
|
+
@system_arguments[:tag] = :div
|
55
|
+
@system_arguments[:classes] = class_names(
|
37
56
|
"TimelineItem-avatar",
|
38
|
-
|
57
|
+
system_arguments[:classes]
|
39
58
|
)
|
40
59
|
end
|
41
60
|
end
|
42
61
|
|
43
62
|
class Badge < Primer::Slot
|
44
|
-
attr_reader :
|
45
|
-
|
63
|
+
attr_reader :system_arguments, :icon
|
64
|
+
|
65
|
+
# @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
|
66
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
67
|
+
def initialize(icon: nil, **system_arguments)
|
46
68
|
@icon = icon
|
47
69
|
|
48
|
-
@
|
49
|
-
@
|
50
|
-
@
|
70
|
+
@system_arguments = system_arguments
|
71
|
+
@system_arguments[:tag] = :div
|
72
|
+
@system_arguments[:classes] = class_names(
|
51
73
|
"TimelineItem-badge",
|
52
|
-
|
74
|
+
system_arguments[:classes]
|
53
75
|
)
|
54
76
|
end
|
55
77
|
end
|
56
78
|
|
57
79
|
class Body < Primer::Slot
|
58
|
-
attr_reader :
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
@
|
80
|
+
attr_reader :system_arguments
|
81
|
+
|
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(
|
63
87
|
"TimelineItem-body",
|
64
|
-
|
88
|
+
system_arguments[:classes]
|
65
89
|
)
|
66
90
|
end
|
67
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
|
)
|
@@ -43,6 +43,7 @@ require_relative "link_component"
|
|
43
43
|
require_relative "octicon_component"
|
44
44
|
require_relative "popover_component"
|
45
45
|
require_relative "progress_bar_component"
|
46
|
+
require_relative "spinner_component"
|
46
47
|
require_relative "state_component"
|
47
48
|
require_relative "subhead_component"
|
48
49
|
require_relative "text_component"
|
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
|
@@ -131,9 +131,7 @@ module Primer
|
|
131
131
|
|
132
132
|
if invalid_class_names.any?
|
133
133
|
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.",
|
134
|
+
"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
135
|
)
|
138
136
|
end
|
139
137
|
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.14
|
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-
|
11
|
+
date: 2020-11-16 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -223,6 +223,8 @@ files:
|
|
223
223
|
- app/components/primer/progress_bar_component.html.erb
|
224
224
|
- app/components/primer/progress_bar_component.rb
|
225
225
|
- app/components/primer/slot.rb
|
226
|
+
- app/components/primer/spinner_component.html.erb
|
227
|
+
- app/components/primer/spinner_component.rb
|
226
228
|
- app/components/primer/state_component.rb
|
227
229
|
- app/components/primer/subhead_component.html.erb
|
228
230
|
- app/components/primer/subhead_component.rb
|