primer_view_components 0.0.18 → 0.0.19
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 +38 -0
- data/app/components/primer/avatar_component.rb +24 -6
- data/app/components/primer/avatar_stack_component.html.erb +10 -0
- data/app/components/primer/avatar_stack_component.rb +81 -0
- data/app/components/primer/base_component.rb +3 -3
- data/app/components/primer/blankslate_component.rb +8 -8
- data/app/components/primer/border_box_component.rb +29 -17
- data/app/components/primer/box_component.rb +2 -2
- data/app/components/primer/breadcrumb_component.rb +1 -1
- data/app/components/primer/button_component.rb +2 -2
- data/app/components/primer/button_group_component.rb +4 -1
- data/app/components/primer/button_marketing_component.rb +2 -2
- data/app/components/primer/component.rb +5 -6
- data/app/components/primer/counter_component.rb +5 -1
- data/app/components/primer/dropdown/menu_component.html.erb +12 -0
- data/app/components/primer/dropdown/menu_component.rb +48 -0
- data/app/components/primer/dropdown_component.html.erb +9 -0
- data/app/components/primer/dropdown_component.rb +77 -0
- data/app/components/primer/dropdown_menu_component.rb +4 -0
- data/app/components/primer/flash_component.rb +10 -6
- data/app/components/primer/flex_component.rb +38 -1
- data/app/components/primer/flex_item_component.rb +15 -1
- data/app/components/primer/heading_component.rb +1 -1
- data/app/components/primer/label_component.rb +2 -2
- data/app/components/primer/layout_component.rb +2 -2
- data/app/components/primer/link_component.rb +6 -2
- data/app/components/primer/markdown_component.rb +293 -0
- data/app/components/primer/menu_component.html.erb +6 -0
- data/app/components/primer/menu_component.rb +71 -0
- data/app/components/primer/octicon_component.rb +7 -3
- data/app/components/primer/popover_component.rb +5 -5
- data/app/components/primer/progress_bar_component.rb +5 -5
- data/app/components/primer/spinner_component.rb +7 -3
- data/app/components/primer/state_component.rb +3 -3
- data/app/components/primer/subhead_component.rb +6 -6
- data/app/components/primer/text_component.rb +1 -1
- data/app/components/primer/timeline_item_component.rb +4 -4
- data/app/components/primer/tooltip_component.rb +5 -5
- data/app/components/primer/truncate_component.rb +4 -4
- data/app/components/primer/underline_nav_component.rb +2 -2
- data/app/components/primer/view_components.rb +4 -0
- data/lib/primer/classify.rb +22 -9
- data/lib/primer/classify/cache.rb +125 -0
- data/lib/primer/fetch_or_fallback_helper.rb +1 -1
- data/lib/primer/join_style_arguments_helper.rb +1 -1
- data/lib/primer/view_components.rb +32 -1
- data/lib/primer/view_components/engine.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/yard/renders_many_handler.rb +19 -0
- data/lib/yard/renders_one_handler.rb +19 -0
- data/static/statuses.json +1 -0
- metadata +46 -5
@@ -0,0 +1,71 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
# Use menus to create vertical lists of navigational links.
|
5
|
+
class MenuComponent < Primer::Component
|
6
|
+
include ViewComponent::SlotableV2
|
7
|
+
|
8
|
+
# Optional menu heading
|
9
|
+
#
|
10
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
11
|
+
renders_one :heading, lambda { |**system_arguments|
|
12
|
+
system_arguments[:tag] ||= :span
|
13
|
+
system_arguments[:classes] = class_names(
|
14
|
+
"menu-heading",
|
15
|
+
system_arguments[:classes]
|
16
|
+
)
|
17
|
+
|
18
|
+
Primer::BaseComponent.new(**system_arguments)
|
19
|
+
}
|
20
|
+
|
21
|
+
# Required list of navigational links
|
22
|
+
#
|
23
|
+
# @param href [String] URL to be used for the Link
|
24
|
+
# @param selected [Boolean] Whether the item is the current selection
|
25
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
26
|
+
renders_many :items, lambda { |href:, selected: false, **system_arguments|
|
27
|
+
system_arguments[:tag] = :a
|
28
|
+
system_arguments[:href] = href
|
29
|
+
system_arguments[:"aria-current"] = :page if selected
|
30
|
+
system_arguments[:classes] = class_names(
|
31
|
+
"menu-item",
|
32
|
+
system_arguments[:classes]
|
33
|
+
)
|
34
|
+
|
35
|
+
Primer::BaseComponent.new(**system_arguments)
|
36
|
+
}
|
37
|
+
|
38
|
+
# @example auto|Default
|
39
|
+
# <%= render(Primer::MenuComponent.new) do |c| %>
|
40
|
+
# <% c.heading do %>
|
41
|
+
# Heading
|
42
|
+
# <% end %>
|
43
|
+
# <% c.item(selected: true, href: "#url") do %>
|
44
|
+
# Item 1
|
45
|
+
# <% end %>
|
46
|
+
# <% c.item(href: "#url") do %>
|
47
|
+
# <%= render(Primer::OcticonComponent.new(icon: "check")) %>
|
48
|
+
# With Icon
|
49
|
+
# <% end %>
|
50
|
+
# <% c.item(href: "#url") do %>
|
51
|
+
# <%= render(Primer::OcticonComponent.new(icon: "check")) %>
|
52
|
+
# With Icon and Counter
|
53
|
+
# <%= render(Primer::CounterComponent.new(count: 25)) %>
|
54
|
+
# <% end %>
|
55
|
+
# <% end %>
|
56
|
+
#
|
57
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
58
|
+
def initialize(**system_arguments)
|
59
|
+
@system_arguments = system_arguments
|
60
|
+
@system_arguments[:tag] = :nav
|
61
|
+
@system_arguments[:classes] = class_names(
|
62
|
+
"menu",
|
63
|
+
@system_arguments[:classes]
|
64
|
+
)
|
65
|
+
end
|
66
|
+
|
67
|
+
def render?
|
68
|
+
items.any?
|
69
|
+
end
|
70
|
+
end
|
71
|
+
end
|
@@ -14,13 +14,13 @@ module Primer
|
|
14
14
|
}.freeze
|
15
15
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
16
16
|
|
17
|
-
# @example
|
17
|
+
# @example auto|Default
|
18
18
|
# <%= render(Primer::OcticonComponent.new(icon: "check")) %>
|
19
19
|
#
|
20
|
-
# @example
|
20
|
+
# @example auto|Medium
|
21
21
|
# <%= render(Primer::OcticonComponent.new(icon: "people", size: :medium)) %>
|
22
22
|
#
|
23
|
-
# @example
|
23
|
+
# @example auto|Large
|
24
24
|
# <%= render(Primer::OcticonComponent.new(icon: "x", size: :large)) %>
|
25
25
|
#
|
26
26
|
# @param icon [String] Name of [Octicon](https://primer.style/octicons/) to use.
|
@@ -42,5 +42,9 @@ module Primer
|
|
42
42
|
def call
|
43
43
|
octicon(@icon, { **@system_arguments })
|
44
44
|
end
|
45
|
+
|
46
|
+
def self.status
|
47
|
+
Primer::Component::STATUSES[:beta]
|
48
|
+
end
|
45
49
|
end
|
46
50
|
end
|
@@ -10,7 +10,7 @@ module Primer
|
|
10
10
|
with_slot :heading, class_name: "Heading"
|
11
11
|
with_slot :body, class_name: "Body"
|
12
12
|
|
13
|
-
# @example
|
13
|
+
# @example auto|Default
|
14
14
|
# <%= render Primer::PopoverComponent.new do |component| %>
|
15
15
|
# <% component.slot(:heading) do %>
|
16
16
|
# Activity feed
|
@@ -20,7 +20,7 @@ module Primer
|
|
20
20
|
# <% end %>
|
21
21
|
# <% end %>
|
22
22
|
#
|
23
|
-
# @example
|
23
|
+
# @example auto|Large
|
24
24
|
# <%= render Primer::PopoverComponent.new do |component| %>
|
25
25
|
# <% component.slot(:heading) do %>
|
26
26
|
# Activity feed
|
@@ -30,7 +30,7 @@ module Primer
|
|
30
30
|
# <% end %>
|
31
31
|
# <% end %>
|
32
32
|
#
|
33
|
-
# @example
|
33
|
+
# @example auto|Caret position
|
34
34
|
# <%= render Primer::PopoverComponent.new do |component| %>
|
35
35
|
# <% component.slot(:heading) do %>
|
36
36
|
# Activity feed
|
@@ -57,7 +57,7 @@ module Primer
|
|
57
57
|
body.present?
|
58
58
|
end
|
59
59
|
|
60
|
-
# :nodoc
|
60
|
+
# :nodoc:
|
61
61
|
class Heading < Primer::Slot
|
62
62
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
63
63
|
def initialize(**system_arguments)
|
@@ -71,7 +71,7 @@ module Primer
|
|
71
71
|
end
|
72
72
|
end
|
73
73
|
|
74
|
-
# :nodoc
|
74
|
+
# :nodoc:
|
75
75
|
class Body < Slot
|
76
76
|
CARET_DEFAULT = :top
|
77
77
|
CARET_MAPPINGS = {
|
@@ -16,22 +16,22 @@ module Primer
|
|
16
16
|
}.freeze
|
17
17
|
|
18
18
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
19
|
-
# @example
|
19
|
+
# @example auto|Default
|
20
20
|
# <%= render(Primer::ProgressBarComponent.new) do |component| %>
|
21
21
|
# <% component.slot(:item, percentage: 25) %>
|
22
22
|
# <% end %>
|
23
23
|
#
|
24
|
-
# @example
|
24
|
+
# @example auto|Small
|
25
25
|
# <%= render(Primer::ProgressBarComponent.new(size: :small)) do |component| %>
|
26
26
|
# <% component.slot(:item, bg: :blue_4, percentage: 50) %>
|
27
27
|
# <% end %>
|
28
28
|
#
|
29
|
-
# @example
|
29
|
+
# @example auto|Large
|
30
30
|
# <%= render(Primer::ProgressBarComponent.new(size: :large)) do |component| %>
|
31
31
|
# <% component.slot(:item, bg: :red_4, percentage: 75) %>
|
32
32
|
# <% end %>
|
33
33
|
#
|
34
|
-
# @example
|
34
|
+
# @example auto|Multiple items
|
35
35
|
# <%= render(Primer::ProgressBarComponent.new) do |component| %>
|
36
36
|
# <% component.slot(:item, percentage: 10) %>
|
37
37
|
# <% component.slot(:item, bg: :blue_4, percentage: 20) %>
|
@@ -54,7 +54,7 @@ module Primer
|
|
54
54
|
items.any?
|
55
55
|
end
|
56
56
|
|
57
|
-
# :nodoc
|
57
|
+
# :nodoc:
|
58
58
|
class Item < Primer::Slot
|
59
59
|
attr_reader :system_arguments
|
60
60
|
|
@@ -15,13 +15,13 @@ module Primer
|
|
15
15
|
DEFAULT_STYLE = "box-sizing: content-box; color: var(--color-icon-primary);"
|
16
16
|
|
17
17
|
#
|
18
|
-
# @example
|
18
|
+
# @example auto|Default
|
19
19
|
# <%= render(Primer::SpinnerComponent.new) %>
|
20
20
|
#
|
21
|
-
# @example
|
21
|
+
# @example auto|Small
|
22
22
|
# <%= render(Primer::SpinnerComponent.new(size: :small)) %>
|
23
23
|
#
|
24
|
-
# @example
|
24
|
+
# @example auto|Large
|
25
25
|
# <%= render(Primer::SpinnerComponent.new(size: :large)) %>
|
26
26
|
#
|
27
27
|
# @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
|
@@ -34,5 +34,9 @@ module Primer
|
|
34
34
|
@system_arguments[:viewBox] = "0 0 16 16"
|
35
35
|
@system_arguments[:fill] = :none
|
36
36
|
end
|
37
|
+
|
38
|
+
def self.status
|
39
|
+
Primer::Component::STATUSES[:beta]
|
40
|
+
end
|
37
41
|
end
|
38
42
|
end
|
@@ -22,16 +22,16 @@ module Primer
|
|
22
22
|
TAG_DEFAULT = :span
|
23
23
|
TAG_OPTIONS = [TAG_DEFAULT, :div, :a].freeze
|
24
24
|
|
25
|
-
# @example
|
25
|
+
# @example auto|Default
|
26
26
|
# <%= render(Primer::StateComponent.new(title: "title")) { "State" } %>
|
27
27
|
#
|
28
|
-
# @example
|
28
|
+
# @example auto|Colors
|
29
29
|
# <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
|
30
30
|
# <%= render(Primer::StateComponent.new(title: "title", color: :green)) { "Green" } %>
|
31
31
|
# <%= render(Primer::StateComponent.new(title: "title", color: :red)) { "Red" } %>
|
32
32
|
# <%= render(Primer::StateComponent.new(title: "title", color: :purple)) { "Purple" } %>
|
33
33
|
#
|
34
|
-
# @example
|
34
|
+
# @example auto|Sizes
|
35
35
|
# <%= render(Primer::StateComponent.new(title: "title")) { "Default" } %>
|
36
36
|
# <%= render(Primer::StateComponent.new(title: "title", size: :small)) { "Small" } %>
|
37
37
|
#
|
@@ -9,7 +9,7 @@ module Primer
|
|
9
9
|
with_slot :actions, class_name: "Actions"
|
10
10
|
with_slot :description, class_name: "Description"
|
11
11
|
|
12
|
-
# @example
|
12
|
+
# @example auto|Default
|
13
13
|
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
14
14
|
# <% component.slot(:heading) do %>
|
15
15
|
# My Heading
|
@@ -19,7 +19,7 @@ module Primer
|
|
19
19
|
# <% end %>
|
20
20
|
# <% end %>
|
21
21
|
#
|
22
|
-
# @example
|
22
|
+
# @example auto|Without border
|
23
23
|
# <%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
|
24
24
|
# <% component.slot(:heading) do %>
|
25
25
|
# My Heading
|
@@ -29,7 +29,7 @@ module Primer
|
|
29
29
|
# <% end %>
|
30
30
|
# <% end %>
|
31
31
|
#
|
32
|
-
# @example
|
32
|
+
# @example auto|With actions
|
33
33
|
# <%= render(Primer::SubheadComponent.new) do |component| %>
|
34
34
|
# <% component.slot(:heading) do %>
|
35
35
|
# My Heading
|
@@ -67,7 +67,7 @@ module Primer
|
|
67
67
|
heading.present?
|
68
68
|
end
|
69
69
|
|
70
|
-
# :nodoc
|
70
|
+
# :nodoc:
|
71
71
|
class Heading < ViewComponent::Slot
|
72
72
|
include ClassNameHelper
|
73
73
|
|
@@ -86,7 +86,7 @@ module Primer
|
|
86
86
|
end
|
87
87
|
end
|
88
88
|
|
89
|
-
# :nodoc
|
89
|
+
# :nodoc:
|
90
90
|
class Actions < ViewComponent::Slot
|
91
91
|
include ClassNameHelper
|
92
92
|
|
@@ -100,7 +100,7 @@ module Primer
|
|
100
100
|
end
|
101
101
|
end
|
102
102
|
|
103
|
-
# :nodoc
|
103
|
+
# :nodoc:
|
104
104
|
class Description < ViewComponent::Slot
|
105
105
|
include ClassNameHelper
|
106
106
|
|
@@ -3,7 +3,7 @@
|
|
3
3
|
module Primer
|
4
4
|
# The Text component is a wrapper component that will apply typography styles to the text inside.
|
5
5
|
class TextComponent < Primer::Component
|
6
|
-
# @example
|
6
|
+
# @example auto|Default
|
7
7
|
# <%= render(Primer::TextComponent.new(tag: :p, font_weight: :bold)) { "Bold Text" } %>
|
8
8
|
# <%= render(Primer::TextComponent.new(tag: :p, color: :red_5)) { "Red Text" } %>
|
9
9
|
#
|
@@ -11,7 +11,7 @@ module Primer
|
|
11
11
|
|
12
12
|
attr_reader :system_arguments
|
13
13
|
|
14
|
-
# @example
|
14
|
+
# @example auto|Default
|
15
15
|
# <div style="padding-left: 60px">
|
16
16
|
# <%= render(Primer::TimelineItemComponent.new) do |component| %>
|
17
17
|
# <% component.slot(:avatar, src: "https://github.com/github.png", alt: "github") %>
|
@@ -36,7 +36,7 @@ module Primer
|
|
36
36
|
avatar.present? || badge.present? || body.present?
|
37
37
|
end
|
38
38
|
|
39
|
-
# :nodoc
|
39
|
+
# :nodoc:
|
40
40
|
class Avatar < Primer::Slot
|
41
41
|
attr_reader :system_arguments, :alt, :src, :size, :square
|
42
42
|
|
@@ -60,7 +60,7 @@ module Primer
|
|
60
60
|
end
|
61
61
|
end
|
62
62
|
|
63
|
-
# :nodoc
|
63
|
+
# :nodoc:
|
64
64
|
class Badge < Primer::Slot
|
65
65
|
attr_reader :system_arguments, :icon
|
66
66
|
|
@@ -78,7 +78,7 @@ module Primer
|
|
78
78
|
end
|
79
79
|
end
|
80
80
|
|
81
|
-
# :nodoc
|
81
|
+
# :nodoc:
|
82
82
|
class Body < Primer::Slot
|
83
83
|
attr_reader :system_arguments
|
84
84
|
|
@@ -26,29 +26,29 @@ module Primer
|
|
26
26
|
se
|
27
27
|
]
|
28
28
|
|
29
|
-
# @example
|
29
|
+
# @example 55|Default
|
30
30
|
# <div class="pt-5">
|
31
31
|
# <%= render(Primer::TooltipComponent.new(label: "Even bolder")) { "Default Bold Text" } %>
|
32
32
|
# </div>
|
33
33
|
#
|
34
|
-
# @example
|
34
|
+
# @example 65|Wrapping another component
|
35
35
|
# <div class="pt-5">
|
36
36
|
# <%= render(Primer::TooltipComponent.new(label: "Even bolder")) do %>
|
37
37
|
# <%= render(Primer::ButtonComponent.new) { "Bold Button" } %>
|
38
38
|
# <% end %>
|
39
39
|
# </div>
|
40
40
|
#
|
41
|
-
# @example
|
41
|
+
# @example 65|With a direction
|
42
42
|
# <div class="pt-5">
|
43
43
|
# <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s)) { "Bold Text With a Direction" } %>
|
44
44
|
# </div>
|
45
45
|
#
|
46
|
-
# @example
|
46
|
+
# @example 65|With an alignment
|
47
47
|
# <div class="pt-5">
|
48
48
|
# <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, alignment: :right_1)) { "Bold Text With an Alignment" } %>
|
49
49
|
# </div>
|
50
50
|
#
|
51
|
-
# @example
|
51
|
+
# @example 65|Without a delay
|
52
52
|
# <div class="pt-5">
|
53
53
|
# <%= render(Primer::TooltipComponent.new(label: "Even bolder", direction: :s, no_delay: true)) { "Bold Text without a delay" } %>
|
54
54
|
# </div>
|
@@ -3,18 +3,18 @@
|
|
3
3
|
module Primer
|
4
4
|
# Use TruncateComponent to shorten overflowing text with an ellipsis.
|
5
5
|
class TruncateComponent < Primer::Component
|
6
|
-
# @example
|
6
|
+
# @example auto|Default
|
7
7
|
# <div class="col-2">
|
8
8
|
# <%= render(Primer::TruncateComponent.new(tag: :p)) { "branch-name-that-is-really-long" } %>
|
9
9
|
# </div>
|
10
10
|
#
|
11
|
-
# @example
|
11
|
+
# @example auto|Inline
|
12
12
|
# <%= render(Primer::TruncateComponent.new(tag: :span, inline: true)) { "branch-name-that-is-really-long" } %>
|
13
13
|
#
|
14
|
-
# @example
|
14
|
+
# @example auto|Expandable
|
15
15
|
# <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true)) { "branch-name-that-is-really-long" } %>
|
16
16
|
#
|
17
|
-
# @example
|
17
|
+
# @example auto|Custom size
|
18
18
|
# <%= render(Primer::TruncateComponent.new(tag: :span, inline: true, expandable: true, max_width: 100)) { "branch-name-that-is-really-long" } %>
|
19
19
|
#
|
20
20
|
# @param inline [Boolean] Whether the element is inline (or inline-block).
|
@@ -10,7 +10,7 @@ module Primer
|
|
10
10
|
|
11
11
|
with_content_areas :body, :actions
|
12
12
|
|
13
|
-
# @example
|
13
|
+
# @example auto|Default
|
14
14
|
# <%= render(Primer::UnderlineNavComponent.new) do |component| %>
|
15
15
|
# <% component.with(:body) do %>
|
16
16
|
# <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
|
@@ -20,7 +20,7 @@ module Primer
|
|
20
20
|
# <% end %>
|
21
21
|
# <% end %>
|
22
22
|
#
|
23
|
-
# @example
|
23
|
+
# @example auto|Align right
|
24
24
|
# <%= render(Primer::UnderlineNavComponent.new(align: :right)) do |component| %>
|
25
25
|
# <% component.with(:body) do %>
|
26
26
|
# <%= render(Primer::LinkComponent.new(href: "#url")) { "Item 1" } %>
|
@@ -26,6 +26,7 @@ require_relative "slot"
|
|
26
26
|
# Components
|
27
27
|
|
28
28
|
require_relative "avatar_component"
|
29
|
+
require_relative "avatar_stack_component"
|
29
30
|
require_relative "blankslate_component"
|
30
31
|
require_relative "border_box_component"
|
31
32
|
require_relative "box_component"
|
@@ -35,6 +36,7 @@ require_relative "button_group_component"
|
|
35
36
|
require_relative "button_marketing_component"
|
36
37
|
require_relative "counter_component"
|
37
38
|
require_relative "details_component"
|
39
|
+
require_relative "dropdown_component"
|
38
40
|
require_relative "dropdown_menu_component"
|
39
41
|
require_relative "flash_component"
|
40
42
|
require_relative "flex_component"
|
@@ -43,6 +45,8 @@ require_relative "heading_component"
|
|
43
45
|
require_relative "label_component"
|
44
46
|
require_relative "layout_component"
|
45
47
|
require_relative "link_component"
|
48
|
+
require_relative "markdown_component"
|
49
|
+
require_relative "menu_component"
|
46
50
|
require_relative "octicon_component"
|
47
51
|
require_relative "popover_component"
|
48
52
|
require_relative "progress_bar_component"
|
data/lib/primer/classify.rb
CHANGED
@@ -1,5 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
require_relative "classify/cache"
|
4
|
+
|
3
5
|
module Primer
|
4
6
|
# :nodoc:
|
5
7
|
class Classify
|
@@ -17,6 +19,7 @@ module Primer
|
|
17
19
|
|
18
20
|
INVALID_CLASS_NAME_PREFIXES =
|
19
21
|
(["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
|
22
|
+
FUNCTIONAL_COLOR_REGEX = /(primary|secondary|tertiary|link|success|warning|danger|info)/.freeze
|
20
23
|
|
21
24
|
COLOR_KEY = :color
|
22
25
|
BG_KEY = :bg
|
@@ -166,10 +169,10 @@ module Primer
|
|
166
169
|
raise ArgumentError, "#{key} does not support responsive values" unless RESPONSIVE_KEYS.include?(key)
|
167
170
|
|
168
171
|
value.each_with_index do |val, index|
|
169
|
-
extract_value(memo, key, val, BREAKPOINTS[index])
|
172
|
+
Primer::Classify::Cache.read(memo, key, val, BREAKPOINTS[index]) || extract_value(memo, key, val, BREAKPOINTS[index])
|
170
173
|
end
|
171
174
|
else
|
172
|
-
extract_value(memo, key, value, BREAKPOINTS[0])
|
175
|
+
Primer::Classify::Cache.read(memo, key, value, BREAKPOINTS[0]) || extract_value(memo, key, value, BREAKPOINTS[0])
|
173
176
|
end
|
174
177
|
end
|
175
178
|
|
@@ -194,7 +197,7 @@ module Primer
|
|
194
197
|
memo[:classes] << css_class
|
195
198
|
end
|
196
199
|
elsif key == BG_KEY
|
197
|
-
if val.to_s.
|
200
|
+
if val.to_s.start_with?("#")
|
198
201
|
memo[:styles] << "background-color: #{val};"
|
199
202
|
else
|
200
203
|
memo[:classes] << "bg-#{val.to_s.dasherize}"
|
@@ -202,11 +205,13 @@ module Primer
|
|
202
205
|
elsif key == COLOR_KEY
|
203
206
|
char_code = val[-1].ord
|
204
207
|
# Does this string end in a character that is NOT a number?
|
205
|
-
memo[:classes] <<
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
208
|
+
memo[:classes] <<
|
209
|
+
if (char_code >= 48 && char_code <= 57) || # 48 is the charcode for 0; 57 is the charcode for 9
|
210
|
+
FUNCTIONAL_COLOR_REGEX.match?(val)
|
211
|
+
"color-#{val.to_s.dasherize}"
|
212
|
+
else
|
213
|
+
"text-#{val.to_s.dasherize}"
|
214
|
+
end
|
210
215
|
elsif key == DISPLAY_KEY
|
211
216
|
memo[:classes] << "d#{breakpoint}-#{val.to_s.dasherize}"
|
212
217
|
elsif key == VERTICAL_ALIGN_KEY
|
@@ -214,7 +219,13 @@ module Primer
|
|
214
219
|
elsif key == WORD_BREAK_KEY
|
215
220
|
memo[:classes] << "wb-#{val.to_s.dasherize}"
|
216
221
|
elsif BORDER_KEYS.include?(key)
|
217
|
-
|
222
|
+
border_value = if val == true
|
223
|
+
"border"
|
224
|
+
else
|
225
|
+
"border-#{val.to_s.dasherize}"
|
226
|
+
end
|
227
|
+
|
228
|
+
memo[:classes] << border_value
|
218
229
|
elsif BORDER_MARGIN_KEYS.include?(key)
|
219
230
|
memo[:classes] << "#{key.to_s.dasherize}-#{val}"
|
220
231
|
elsif key == BORDER_RADIUS_KEY
|
@@ -265,5 +276,7 @@ module Primer
|
|
265
276
|
end
|
266
277
|
end
|
267
278
|
end
|
279
|
+
|
280
|
+
Cache.preload!
|
268
281
|
end
|
269
282
|
end
|