primer_view_components 0.0.13 → 0.0.18
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 +50 -0
- data/app/components/primer/base_component.rb +63 -15
- data/app/components/primer/blankslate_component.html.erb +4 -4
- data/app/components/primer/blankslate_component.rb +28 -2
- data/app/components/primer/border_box_component.rb +4 -0
- data/app/components/primer/box_component.rb +10 -0
- data/app/components/primer/breadcrumb_component.rb +2 -1
- data/app/components/primer/button_component.rb +1 -1
- data/app/components/primer/button_group_component.html.erb +5 -0
- data/app/components/primer/button_group_component.rb +34 -0
- data/app/components/primer/button_marketing_component.rb +73 -0
- data/app/components/primer/component.rb +14 -0
- data/app/components/primer/counter_component.rb +16 -12
- data/app/components/primer/details_component.rb +10 -6
- data/app/components/primer/dropdown_menu_component.rb +31 -3
- data/app/components/primer/flash_component.rb +2 -3
- data/app/components/primer/flex_component.rb +10 -9
- data/app/components/primer/flex_item_component.rb +2 -1
- data/app/components/primer/heading_component.rb +7 -0
- data/app/components/primer/label_component.rb +15 -9
- data/app/components/primer/link_component.rb +1 -1
- data/app/components/primer/octicon_component.rb +4 -3
- data/app/components/primer/popover_component.rb +3 -1
- data/app/components/primer/progress_bar_component.rb +5 -5
- data/app/components/primer/slot.rb +1 -0
- data/app/components/primer/spinner_component.rb +3 -4
- data/app/components/primer/state_component.rb +3 -3
- data/app/components/primer/subhead_component.rb +3 -0
- data/app/components/primer/timeline_item_component.rb +3 -0
- data/app/components/primer/tooltip_component.rb +88 -0
- data/app/components/primer/truncate_component.rb +41 -0
- data/app/components/primer/underline_nav_component.rb +26 -1
- data/app/components/primer/view_components.rb +5 -0
- data/lib/primer/class_name_helper.rb +1 -0
- data/lib/primer/classify.rb +129 -107
- data/lib/primer/fetch_or_fallback_helper.rb +9 -0
- data/lib/primer/join_style_arguments_helper.rb +14 -0
- data/lib/primer/view_components.rb +1 -0
- data/lib/primer/view_components/engine.rb +1 -0
- data/lib/primer/view_components/version.rb +1 -1
- metadata +42 -22
@@ -6,5 +6,19 @@ module Primer
|
|
6
6
|
include ClassNameHelper
|
7
7
|
include FetchOrFallbackHelper
|
8
8
|
include OcticonsHelper
|
9
|
+
include JoinStyleArgumentsHelper
|
10
|
+
|
11
|
+
# sourced from https://primer.style/doctocat/usage/front-matter#status
|
12
|
+
STATUSES = {
|
13
|
+
deprecated: :deprecated,
|
14
|
+
review: :review,
|
15
|
+
experimental: :experimental,
|
16
|
+
new: :new,
|
17
|
+
stable: :stable
|
18
|
+
}.freeze
|
19
|
+
|
20
|
+
def self.status
|
21
|
+
STATUSES[:experimental]
|
22
|
+
end
|
9
23
|
end
|
10
24
|
end
|
@@ -7,7 +7,7 @@ module Primer
|
|
7
7
|
SCHEME_MAPPINGS = {
|
8
8
|
DEFAULT_SCHEME => "Counter",
|
9
9
|
:gray => "Counter Counter--gray",
|
10
|
-
:light_gray => "Counter Counter--gray-light"
|
10
|
+
:light_gray => "Counter Counter--gray-light"
|
11
11
|
}.freeze
|
12
12
|
|
13
13
|
#
|
@@ -16,7 +16,7 @@ module Primer
|
|
16
16
|
#
|
17
17
|
# @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
|
18
18
|
# @param scheme [Symbol] Color scheme. One of `SCHEME_MAPPINGS.keys`.
|
19
|
-
# @param limit [Integer] Maximum value to display. (e.x. if count == 6,000 and limit == 5000, counter will display "5,000+")
|
19
|
+
# @param limit [Integer, nil] Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display "5,000+")
|
20
20
|
# @param hide_if_zero [Boolean] If true, a `hidden` attribute is added to the counter if `count` is zero.
|
21
21
|
# @param text [String] Text to display instead of count.
|
22
22
|
# @param round [Boolean] Whether to apply our standard rounding logic to value.
|
@@ -30,17 +30,21 @@ module Primer
|
|
30
30
|
round: false,
|
31
31
|
**system_arguments
|
32
32
|
)
|
33
|
-
@count
|
33
|
+
@count = count
|
34
|
+
@limit = limit
|
35
|
+
@hide_if_zero = hide_if_zero
|
36
|
+
@text = text
|
37
|
+
@round = round
|
38
|
+
@system_arguments = system_arguments
|
34
39
|
|
40
|
+
@has_limit = !@limit.nil?
|
35
41
|
@system_arguments[:title] = title
|
36
42
|
@system_arguments[:tag] = :span
|
37
43
|
@system_arguments[:classes] = class_names(
|
38
44
|
@system_arguments[:classes],
|
39
45
|
SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)]
|
40
46
|
)
|
41
|
-
if count == 0 && hide_if_zero
|
42
|
-
@system_arguments[:hidden] = true
|
43
|
-
end
|
47
|
+
@system_arguments[:hidden] = true if count == 0 && hide_if_zero # rubocop:disable Style/NumericPredicate
|
44
48
|
end
|
45
49
|
|
46
50
|
def call
|
@@ -58,8 +62,8 @@ module Primer
|
|
58
62
|
"Infinity"
|
59
63
|
else
|
60
64
|
count = @count.to_i
|
61
|
-
str = number_with_delimiter([count, @limit].min)
|
62
|
-
str += "+" if count > @limit
|
65
|
+
str = number_with_delimiter(@has_limit ? [count, @limit].min : count)
|
66
|
+
str += "+" if @has_limit && count > @limit
|
63
67
|
str
|
64
68
|
end
|
65
69
|
end
|
@@ -73,16 +77,16 @@ module Primer
|
|
73
77
|
"∞"
|
74
78
|
else
|
75
79
|
if @round
|
76
|
-
count = [@count.to_i, @limit].min
|
80
|
+
count = @has_limit ? [@count.to_i, @limit].min : @count.to_i
|
77
81
|
precision = count.between?(100_000, 999_999) ? 0 : 1
|
78
|
-
units = {thousand: "k", million: "m", billion: "b"}
|
82
|
+
units = { thousand: "k", million: "m", billion: "b" }
|
79
83
|
str = number_to_human(count, precision: precision, significant: false, units: units, format: "%n%u")
|
80
84
|
else
|
81
85
|
@count = @count.to_i
|
82
|
-
str = number_with_delimiter([@count, @limit].min)
|
86
|
+
str = number_with_delimiter(@has_limit ? [@count, @limit].min : @count)
|
83
87
|
end
|
84
88
|
|
85
|
-
str += "+" if @count.to_i > @limit
|
89
|
+
str += "+" if @has_limit && @count.to_i > @limit
|
86
90
|
str
|
87
91
|
end
|
88
92
|
end
|
@@ -1,11 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
#
|
5
|
-
# overlay - options are `none`, `default` and `dark`. Dictates the type of overlay to render with.
|
6
|
-
# button - options are `default` and `reset`. default will make the target a default primer ``.btn`
|
7
|
-
# reset will remove all styles from the <summary> element.
|
8
|
-
#
|
4
|
+
# Use DetailsComponent to reveal content after clicking a button.
|
9
5
|
class DetailsComponent < Primer::Component
|
10
6
|
include ViewComponent::Slotable
|
11
7
|
|
@@ -13,12 +9,15 @@ module Primer
|
|
13
9
|
OVERLAY_MAPPINGS = {
|
14
10
|
NO_OVERLAY => "",
|
15
11
|
:default => "details-overlay",
|
16
|
-
:dark => "details-overlay details-overlay-dark"
|
12
|
+
:dark => "details-overlay details-overlay-dark"
|
17
13
|
}.freeze
|
18
14
|
|
19
15
|
with_slot :body, class_name: "Body"
|
20
16
|
with_slot :summary, class_name: "Summary"
|
21
17
|
|
18
|
+
# @param overlay [Symbol] Dictates the type of overlay to render with. <%= one_of(Primer::DetailsComponent::OVERLAY_MAPPINGS.keys) %>
|
19
|
+
# @param reset [Boolean] Defatuls to false. If set to true, it will remove the default caret and remove style from the summary element
|
20
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
22
21
|
def initialize(overlay: NO_OVERLAY, reset: false, **system_arguments)
|
23
22
|
@system_arguments = system_arguments
|
24
23
|
@system_arguments[:tag] = :details
|
@@ -33,7 +32,10 @@ module Primer
|
|
33
32
|
summary.present? && body.present?
|
34
33
|
end
|
35
34
|
|
35
|
+
# Use the Summary slot as a trigger to reveal the content.
|
36
36
|
class Summary < Primer::Slot
|
37
|
+
# @param button [Boolean] Whether to render the Summary as a button or not.
|
38
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
37
39
|
def initialize(button: true, **system_arguments)
|
38
40
|
@button = button
|
39
41
|
|
@@ -49,7 +51,9 @@ module Primer
|
|
49
51
|
end
|
50
52
|
end
|
51
53
|
|
54
|
+
# Use the Body slot as the main content to be shown when triggered by the Summary.
|
52
55
|
class Body < Primer::Slot
|
56
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
53
57
|
def initialize(**system_arguments)
|
54
58
|
@system_arguments = system_arguments
|
55
59
|
@system_arguments[:tag] ||= :div
|
@@ -1,18 +1,46 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
+
# DropdownMenus are lightweight context menus for housing navigation and actions.
|
5
|
+
# They're great for instances where you don't need the full power (and code)
|
6
|
+
# of the select menu.
|
4
7
|
class DropdownMenuComponent < Primer::Component
|
5
8
|
SCHEME_DEFAULT = :default
|
6
9
|
SCHEME_MAPPINGS = {
|
7
10
|
SCHEME_DEFAULT => "",
|
8
|
-
:dark => "dropdown-menu-dark"
|
11
|
+
:dark => "dropdown-menu-dark"
|
9
12
|
}.freeze
|
10
13
|
|
11
14
|
DIRECTION_DEFAULT = :se
|
12
|
-
DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s]
|
15
|
+
DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :sw, :w, :e, :ne, :s].freeze
|
13
16
|
|
17
|
+
# @example 200|With a header
|
18
|
+
# <div style="margin-bottom: 150px">
|
19
|
+
# <%= render(Primer::DetailsComponent.new(overlay: :default, reset: true, position: :relative)) do |c| %>
|
20
|
+
# <% c.slot(:summary) do %>
|
21
|
+
# Dropdown
|
22
|
+
# <% end %>
|
23
|
+
#
|
24
|
+
# <% c.slot(:body) do %>
|
25
|
+
# <%= render(Primer::DropdownMenuComponent.new(header: "Options")) do %>
|
26
|
+
# <ul>
|
27
|
+
# <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
28
|
+
# <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
29
|
+
# <li><a class="dropdown-item" href="#url">Dropdown item</a></li>
|
30
|
+
# </ul>
|
31
|
+
# <% end %>
|
32
|
+
# <% end %>
|
33
|
+
# <% end %>
|
34
|
+
# </div>
|
35
|
+
#
|
36
|
+
# @param direction [Symbol] <%= one_of(Primer::DropdownMenuComponent::DIRECTION_OPTIONS) %>
|
37
|
+
# @param scheme [Symbol] Pass :dark for dark mode theming
|
38
|
+
# @param header [String] Optional string to display as the header
|
39
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
14
40
|
def initialize(direction: DIRECTION_DEFAULT, scheme: SCHEME_DEFAULT, header: nil, **system_arguments)
|
15
|
-
@header
|
41
|
+
@header = header
|
42
|
+
@direction = direction
|
43
|
+
@system_arguments = system_arguments
|
16
44
|
|
17
45
|
@system_arguments[:tag] = "details-menu"
|
18
46
|
@system_arguments[:role] = "menu"
|
@@ -57,9 +57,8 @@ module Primer
|
|
57
57
|
@system_arguments[:mb] ||= spacious ? 4 : nil
|
58
58
|
end
|
59
59
|
|
60
|
-
|
61
|
-
|
62
|
-
|
60
|
+
# :nodoc
|
61
|
+
class Actions < Primer::Slot
|
63
62
|
attr_reader :system_arguments
|
64
63
|
|
65
64
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
@@ -1,6 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
+
# :nodoc
|
4
5
|
class FlexComponent < Primer::Component
|
5
6
|
JUSTIFY_CONTENT_DEFAULT = nil
|
6
7
|
JUSTIFY_CONTENT_MAPPINGS = {
|
@@ -8,9 +9,9 @@ module Primer
|
|
8
9
|
flex_end: "flex-justify-end",
|
9
10
|
center: "flex-justify-center",
|
10
11
|
space_between: "flex-justify-between",
|
11
|
-
space_around: "flex-justify-around"
|
12
|
-
}
|
13
|
-
JUSTIFY_CONTENT_OPTIONS = [JUSTIFY_CONTENT_DEFAULT, *JUSTIFY_CONTENT_MAPPINGS.keys]
|
12
|
+
space_around: "flex-justify-around"
|
13
|
+
}.freeze
|
14
|
+
JUSTIFY_CONTENT_OPTIONS = [JUSTIFY_CONTENT_DEFAULT, *JUSTIFY_CONTENT_MAPPINGS.keys].freeze
|
14
15
|
|
15
16
|
ALIGN_ITEMS_DEFAULT = nil
|
16
17
|
ALIGN_ITEMS_MAPPINGS = {
|
@@ -18,18 +19,18 @@ module Primer
|
|
18
19
|
end: "flex-items-end",
|
19
20
|
center: "flex-items-center",
|
20
21
|
baseline: "flex-items-baseline",
|
21
|
-
stretch: "flex-items-stretch"
|
22
|
-
}
|
23
|
-
ALIGN_ITEMS_OPTIONS = [ALIGN_ITEMS_DEFAULT, *ALIGN_ITEMS_MAPPINGS.keys]
|
22
|
+
stretch: "flex-items-stretch"
|
23
|
+
}.freeze
|
24
|
+
ALIGN_ITEMS_OPTIONS = [ALIGN_ITEMS_DEFAULT, *ALIGN_ITEMS_MAPPINGS.keys].freeze
|
24
25
|
|
25
26
|
INLINE_DEFAULT = false
|
26
|
-
INLINE_OPTIONS = [INLINE_DEFAULT, true]
|
27
|
+
INLINE_OPTIONS = [INLINE_DEFAULT, true].freeze
|
27
28
|
|
28
29
|
FLEX_WRAP_DEFAULT = nil
|
29
|
-
FLEX_WRAP_OPTIONS = [FLEX_WRAP_DEFAULT, true, false]
|
30
|
+
FLEX_WRAP_OPTIONS = [FLEX_WRAP_DEFAULT, true, false].freeze
|
30
31
|
|
31
32
|
DEFAULT_DIRECTION = nil
|
32
|
-
ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse]
|
33
|
+
ALLOWED_DIRECTIONS = [DEFAULT_DIRECTION, :column, :column_reverse, :row, :row_reverse].freeze
|
33
34
|
|
34
35
|
def initialize(
|
35
36
|
justify_content: JUSTIFY_CONTENT_DEFAULT,
|
@@ -1,9 +1,10 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
+
# :nodoc
|
4
5
|
class FlexItemComponent < Primer::Component
|
5
6
|
FLEX_AUTO_DEFAULT = false
|
6
|
-
FLEX_AUTO_ALLOWED_VALUES = [FLEX_AUTO_DEFAULT, true]
|
7
|
+
FLEX_AUTO_ALLOWED_VALUES = [FLEX_AUTO_DEFAULT, true].freeze
|
7
8
|
|
8
9
|
def initialize(flex_auto: FLEX_AUTO_DEFAULT, **system_arguments)
|
9
10
|
@system_arguments = system_arguments
|
@@ -1,7 +1,14 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
+
# Use the Heading component to wrap a component that will create a heading element
|
4
5
|
class HeadingComponent < Primer::Component
|
6
|
+
# @example 70|Default
|
7
|
+
# <%= render(Primer::HeadingComponent.new) { "H1 Text" } %>
|
8
|
+
# <%= render(Primer::HeadingComponent.new(tag: :h2)) { "H2 Text" } %>
|
9
|
+
# <%= render(Primer::HeadingComponent.new(tag: :h3)) { "H3 Text" } %>
|
10
|
+
#
|
11
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
5
12
|
def initialize(**system_arguments)
|
6
13
|
@system_arguments = system_arguments
|
7
14
|
@system_arguments[:tag] ||= :h1
|
@@ -3,12 +3,18 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use labels to add contextual metadata to a design.
|
5
5
|
class LabelComponent < Primer::Component
|
6
|
-
|
7
|
-
|
6
|
+
NEW_SCHEME_MAPPINGS = {
|
7
|
+
primary: "Label--primary",
|
8
|
+
secondary: "Label--secondary",
|
9
|
+
info: "Label--info",
|
10
|
+
success: "Label--success",
|
11
|
+
warning: "Label--warning",
|
12
|
+
danger: "Label--danger"
|
13
|
+
}.freeze
|
14
|
+
|
15
|
+
DEPRECATED_SCHEME_MAPPINGS = {
|
8
16
|
gray: "Label--gray",
|
9
17
|
dark_gray: "Label--gray-darker",
|
10
|
-
|
11
|
-
# colored
|
12
18
|
yellow: "Label--yellow",
|
13
19
|
orange: "Label--orange",
|
14
20
|
red: "Label--red",
|
@@ -16,16 +22,16 @@ module Primer
|
|
16
22
|
blue: "Label--blue",
|
17
23
|
purple: "Label--purple",
|
18
24
|
pink: "Label--pink",
|
19
|
-
|
20
|
-
# Deprecated
|
21
25
|
outline: "Label--outline",
|
22
|
-
green_outline: "Label--outline-green"
|
26
|
+
green_outline: "Label--outline-green"
|
23
27
|
}.freeze
|
28
|
+
|
29
|
+
SCHEME_MAPPINGS = NEW_SCHEME_MAPPINGS.merge(DEPRECATED_SCHEME_MAPPINGS)
|
24
30
|
SCHEME_OPTIONS = SCHEME_MAPPINGS.keys << nil
|
25
31
|
|
26
32
|
VARIANT_MAPPINGS = {
|
27
33
|
large: "Label--large",
|
28
|
-
inline: "Label--inline"
|
34
|
+
inline: "Label--inline"
|
29
35
|
}.freeze
|
30
36
|
VARIANT_OPTIONS = VARIANT_MAPPINGS.keys << nil
|
31
37
|
|
@@ -42,7 +48,7 @@ module Primer
|
|
42
48
|
# <%= render(Primer::LabelComponent.new(title: "Label: Label", variant: :large)) { "Large" } %>
|
43
49
|
#
|
44
50
|
# @param title [String] `title` attribute for the component element.
|
45
|
-
# @param scheme [Symbol] <%= one_of(Primer::LabelComponent::
|
51
|
+
# @param scheme [Symbol] <%= one_of(Primer::LabelComponent::DEPRECATED_SCHEME_MAPPINGS.keys) %>
|
46
52
|
# @param variant [Symbol] <%= one_of(Primer::LabelComponent::VARIANT_OPTIONS) %>
|
47
53
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
48
54
|
def initialize(title:, scheme: nil, variant: nil, **system_arguments)
|
@@ -18,7 +18,7 @@ module Primer
|
|
18
18
|
@system_arguments[:href] = href
|
19
19
|
@system_arguments[:classes] = class_names(
|
20
20
|
@system_arguments[:classes],
|
21
|
-
"muted-link" =>
|
21
|
+
"muted-link" => fetch_or_fallback_boolean(muted, false)
|
22
22
|
)
|
23
23
|
end
|
24
24
|
|
@@ -10,7 +10,7 @@ module Primer
|
|
10
10
|
SIZE_MAPPINGS = {
|
11
11
|
SIZE_DEFAULT => 16,
|
12
12
|
:medium => 32,
|
13
|
-
:large => 64
|
13
|
+
:large => 64
|
14
14
|
}.freeze
|
15
15
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
16
16
|
|
@@ -27,7 +27,8 @@ module Primer
|
|
27
27
|
# @param size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS) %>
|
28
28
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
29
29
|
def initialize(icon:, size: SIZE_DEFAULT, **system_arguments)
|
30
|
-
@icon
|
30
|
+
@icon = icon
|
31
|
+
@system_arguments = system_arguments
|
31
32
|
|
32
33
|
@system_arguments[:class] = Primer::Classify.call(**@system_arguments)[:class]
|
33
34
|
@system_arguments[:height] ||= SIZE_MAPPINGS[size]
|
@@ -39,7 +40,7 @@ module Primer
|
|
39
40
|
end
|
40
41
|
|
41
42
|
def call
|
42
|
-
octicon(@icon, **@system_arguments)
|
43
|
+
octicon(@icon, { **@system_arguments })
|
43
44
|
end
|
44
45
|
end
|
45
46
|
end
|
@@ -57,7 +57,8 @@ module Primer
|
|
57
57
|
body.present?
|
58
58
|
end
|
59
59
|
|
60
|
-
|
60
|
+
# :nodoc
|
61
|
+
class Heading < Primer::Slot
|
61
62
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
62
63
|
def initialize(**system_arguments)
|
63
64
|
@system_arguments = system_arguments
|
@@ -70,6 +71,7 @@ module Primer
|
|
70
71
|
end
|
71
72
|
end
|
72
73
|
|
74
|
+
# :nodoc
|
73
75
|
class Body < Slot
|
74
76
|
CARET_DEFAULT = :top
|
75
77
|
CARET_MAPPINGS = {
|
@@ -12,7 +12,7 @@ module Primer
|
|
12
12
|
SIZE_MAPPINGS = {
|
13
13
|
SIZE_DEFAULT => "",
|
14
14
|
:small => "Progress--small",
|
15
|
-
:large => "Progress--large"
|
15
|
+
:large => "Progress--large"
|
16
16
|
}.freeze
|
17
17
|
|
18
18
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
@@ -48,15 +48,14 @@ module Primer
|
|
48
48
|
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
|
49
49
|
)
|
50
50
|
@system_arguments[:tag] = :span
|
51
|
-
|
52
51
|
end
|
53
52
|
|
54
53
|
def render?
|
55
54
|
items.any?
|
56
55
|
end
|
57
56
|
|
58
|
-
|
59
|
-
|
57
|
+
# :nodoc
|
58
|
+
class Item < Primer::Slot
|
60
59
|
attr_reader :system_arguments
|
61
60
|
|
62
61
|
# @param percentage [Integer] Percentage completion of item.
|
@@ -68,7 +67,8 @@ module Primer
|
|
68
67
|
|
69
68
|
@system_arguments[:tag] = :span
|
70
69
|
@system_arguments[:bg] = bg
|
71
|
-
@system_arguments[:style] =
|
70
|
+
@system_arguments[:style] =
|
71
|
+
join_style_arguments(@system_arguments[:style], "width: #{@percentage}%;")
|
72
72
|
@system_arguments[:classes] = class_names("Progress-item", @system_arguments[:classes])
|
73
73
|
end
|
74
74
|
end
|
@@ -3,12 +3,11 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use Primer::SpinnerComponent to let users know that content is being loaded.
|
5
5
|
class SpinnerComponent < Primer::Component
|
6
|
-
|
7
6
|
DEFAULT_SIZE = :medium
|
8
7
|
SIZE_MAPPINGS = {
|
9
8
|
:small => 16,
|
10
9
|
DEFAULT_SIZE => 32,
|
11
|
-
:large => 64
|
10
|
+
:large => 64
|
12
11
|
}.freeze
|
13
12
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
14
13
|
# Setting `box-sizing: content-box` allows consumers to add padding
|
@@ -26,14 +25,14 @@ module Primer
|
|
26
25
|
# <%= render(Primer::SpinnerComponent.new(size: :large)) %>
|
27
26
|
#
|
28
27
|
# @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
|
29
|
-
def initialize(size: DEFAULT_SIZE,
|
28
|
+
def initialize(size: DEFAULT_SIZE, **system_arguments)
|
30
29
|
@system_arguments = system_arguments
|
31
30
|
@system_arguments[:tag] = :svg
|
31
|
+
@system_arguments[:style] ||= DEFAULT_STYLE
|
32
32
|
@system_arguments[:width] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
|
33
33
|
@system_arguments[:height] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)]
|
34
34
|
@system_arguments[:viewBox] = "0 0 16 16"
|
35
35
|
@system_arguments[:fill] = :none
|
36
|
-
@system_arguments[:style] = DEFAULT_STYLE unless style.nil?
|
37
36
|
end
|
38
37
|
end
|
39
38
|
end
|