primer_view_components 0.0.4 → 0.0.5
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +8 -0
- data/README.md +1 -0
- data/app/components/primer/blankslate_component.html.erb +2 -2
- data/app/components/primer/blankslate_component.rb +1 -1
- data/app/components/primer/popover_component.html.erb +10 -0
- data/app/components/primer/popover_component.rb +75 -0
- data/app/components/primer/view_components.rb +1 -0
- data/lib/primer/classify.rb +11 -3
- data/lib/primer/view_components/version.rb +1 -1
- metadata +8 -6
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2ea13d4d8ce56ffb157e20f463e512f3f0b0d8f437202e9cee264edea500344c
|
4
|
+
data.tar.gz: 615a05c503420d654c6d5db7c772e9caca674af934aecc7c89100507d7dc405f
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 998e0a5a94c8e5a639d636b8a67b41a62fb596d4380d7b0f234709ae03599139df3c8a86d5854db8fc00b102a0b21ad3f0d1a854b1cf93141f9f1feafbfdf7dd
|
7
|
+
data.tar.gz: 9095e97ae9f8d0bcea88bc0ae239f30fb1484dae7ab8f4830f79500e7a122b2e6ecfc899ce28e0b38a0936799efc32af9dcf8ec611c25f8bdad1b429de9c68f4
|
data/CHANGELOG.md
CHANGED
data/README.md
CHANGED
@@ -81,6 +81,7 @@ Some components have their own specific arguments, but they can all be styled wi
|
|
81
81
|
| `direction` | `flex-<value>` | `direction: :row` → `.flex-row` |
|
82
82
|
| `justify_content` | `flex-justify-<value>` | `justify_content: :center` → `.flex-justify-center` |
|
83
83
|
| `align_items` | `flex-items-<value>` | `align_items: :baseline` → `.flex-items-baseline` |
|
84
|
+
| `box_shadow` | `box-shadow-<value>` | `box_shadow: :medium` → `.box-shadow-medium` |
|
84
85
|
|
85
86
|
#### Boolean arguments
|
86
87
|
| Component arguments | True | False |
|
@@ -16,11 +16,11 @@
|
|
16
16
|
<%= content %>
|
17
17
|
|
18
18
|
<% if @button_text.present? && @button_url.present? %>
|
19
|
-
<
|
19
|
+
<a class="btn <%= @button_classes %>" href="<%= @button_url %>"><%= @button_text %></a>
|
20
20
|
<% end %>
|
21
21
|
|
22
22
|
<% if @link_text.present? && @link_url.present? %>
|
23
|
-
<p
|
23
|
+
<p>
|
24
24
|
<%= link_to "#{@link_url}" do %><%= @link_text %><% end %>
|
25
25
|
</p>
|
26
26
|
<% end %>
|
@@ -0,0 +1,75 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
class PopoverComponent < Primer::Component
|
5
|
+
include ViewComponent::Slotable
|
6
|
+
|
7
|
+
with_slot :heading, class_name: "Heading"
|
8
|
+
with_slot :body, class_name: "Body"
|
9
|
+
|
10
|
+
def initialize(**kwargs)
|
11
|
+
@kwargs = kwargs
|
12
|
+
@kwargs[:tag] ||= :div
|
13
|
+
@kwargs[:classes] = class_names(
|
14
|
+
kwargs[:classes],
|
15
|
+
"Popover"
|
16
|
+
)
|
17
|
+
@kwargs[:position] ||= :relative
|
18
|
+
@kwargs[:right] = false unless kwargs.key?(:right)
|
19
|
+
@kwargs[:left] = false unless kwargs.key?(:left)
|
20
|
+
end
|
21
|
+
|
22
|
+
def render?
|
23
|
+
body.present?
|
24
|
+
end
|
25
|
+
|
26
|
+
class Heading < ViewComponent::Slot
|
27
|
+
def initialize(**kwargs)
|
28
|
+
@kwargs = kwargs
|
29
|
+
@kwargs[:mb] ||= 2
|
30
|
+
@kwargs[:tag] ||= :h4
|
31
|
+
end
|
32
|
+
|
33
|
+
def component
|
34
|
+
Primer::HeadingComponent.new(**@kwargs)
|
35
|
+
end
|
36
|
+
end
|
37
|
+
|
38
|
+
class Body < Slot
|
39
|
+
CARET_DEFAULT = :top
|
40
|
+
CARET_MAPPINGS = {
|
41
|
+
CARET_DEFAULT => "",
|
42
|
+
:bottom => "Popover-message--bottom",
|
43
|
+
:bottom_right => "Popover-message--bottom-right",
|
44
|
+
:bottom_left => "Popover-message--bottom-left",
|
45
|
+
:left => "Popover-message--left",
|
46
|
+
:left_bottom => "Popover-message--left-bottom",
|
47
|
+
:left_top => "Popover-message--left-top",
|
48
|
+
:right => "Popover-message--right",
|
49
|
+
:right_bottom => "Popover-message--right-bottom",
|
50
|
+
:right_top => "Popover-message--right-top",
|
51
|
+
:top_left => "Popover-message--top-left",
|
52
|
+
:top_right => "Popover-message--top-right"
|
53
|
+
}.freeze
|
54
|
+
|
55
|
+
def initialize(caret: CARET_DEFAULT, large: false, **kwargs)
|
56
|
+
@kwargs = kwargs
|
57
|
+
@kwargs[:classes] = class_names(
|
58
|
+
kwargs[:classes],
|
59
|
+
"Popover-message Box",
|
60
|
+
CARET_MAPPINGS[fetch_or_fallback(CARET_MAPPINGS.keys, caret, CARET_DEFAULT)],
|
61
|
+
"Popover-message--large" => large
|
62
|
+
)
|
63
|
+
@kwargs[:p] ||= 4
|
64
|
+
@kwargs[:mt] ||= 2
|
65
|
+
@kwargs[:mx] ||= :auto
|
66
|
+
@kwargs[:text_align] ||= :left
|
67
|
+
@kwargs[:box_shadow] ||= :large
|
68
|
+
end
|
69
|
+
|
70
|
+
def component
|
71
|
+
Primer::BoxComponent.new(**@kwargs)
|
72
|
+
end
|
73
|
+
end
|
74
|
+
end
|
75
|
+
end
|
@@ -39,6 +39,7 @@ require_relative "heading_component"
|
|
39
39
|
require_relative "label_component"
|
40
40
|
require_relative "layout_component"
|
41
41
|
require_relative "link_component"
|
42
|
+
require_relative "popover_component"
|
42
43
|
require_relative "progress_bar_component"
|
43
44
|
require_relative "state_component"
|
44
45
|
require_relative "subhead_component"
|
data/lib/primer/classify.rb
CHANGED
@@ -12,10 +12,10 @@ module Primer
|
|
12
12
|
BREAKPOINTS = ["", "-sm", "-md", "-lg"]
|
13
13
|
|
14
14
|
# Keys where we can simply translate { key: value } into ".key-value"
|
15
|
-
CONCAT_KEYS = SPACING_KEYS + [:hide, :position, :v, :float, :col, :text].freeze
|
15
|
+
CONCAT_KEYS = SPACING_KEYS + [:hide, :position, :v, :float, :col, :text, :box_shadow].freeze
|
16
16
|
|
17
17
|
INVALID_CLASS_NAME_PREFIXES =
|
18
|
-
(["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
|
18
|
+
(["bg-", "color-", "text-", "d-", "v-align-", "wb-", "text-", "box-shadow-"] + CONCAT_KEYS.map { |k| "#{k}-" }).freeze
|
19
19
|
|
20
20
|
COLOR_KEY = :color
|
21
21
|
BG_KEY = :bg
|
@@ -28,6 +28,7 @@ module Primer
|
|
28
28
|
ALIGN_SELF_KEY = :align_self
|
29
29
|
WIDTH_KEY = :width
|
30
30
|
HEIGHT_KEY = :height
|
31
|
+
BOX_SHADOW_KEY = :box_shadow
|
31
32
|
|
32
33
|
|
33
34
|
BOOLEAN_MAPPINGS = {
|
@@ -98,7 +99,8 @@ module Primer
|
|
98
99
|
FLEX_SHRINK_KEY,
|
99
100
|
ALIGN_SELF_KEY,
|
100
101
|
WIDTH_KEY,
|
101
|
-
HEIGHT_KEY
|
102
|
+
HEIGHT_KEY,
|
103
|
+
BOX_SHADOW_KEY
|
102
104
|
]
|
103
105
|
).freeze
|
104
106
|
|
@@ -221,6 +223,12 @@ module Primer
|
|
221
223
|
memo[:classes] << "f#{dasherized_val}"
|
222
224
|
elsif MARGIN_DIRECTION_KEYS.include?(key) && val < 0
|
223
225
|
memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}"
|
226
|
+
elsif key == BOX_SHADOW_KEY
|
227
|
+
if val == true
|
228
|
+
memo[:classes] << "box-shadow"
|
229
|
+
else
|
230
|
+
memo[:classes] << "box-shadow-#{dasherized_val}"
|
231
|
+
end
|
224
232
|
else
|
225
233
|
memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{dasherized_val}"
|
226
234
|
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.5
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
|
-
autorequire:
|
8
|
+
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-08-
|
11
|
+
date: 2020-08-19 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -126,7 +126,7 @@ dependencies:
|
|
126
126
|
- - "~>"
|
127
127
|
- !ruby/object:Gem::Version
|
128
128
|
version: 0.13.0
|
129
|
-
description:
|
129
|
+
description:
|
130
130
|
email:
|
131
131
|
- opensource+primer_view_components@github.com
|
132
132
|
executables: []
|
@@ -159,6 +159,8 @@ files:
|
|
159
159
|
- app/components/primer/layout_component.html.erb
|
160
160
|
- app/components/primer/layout_component.rb
|
161
161
|
- app/components/primer/link_component.rb
|
162
|
+
- app/components/primer/popover_component.html.erb
|
163
|
+
- app/components/primer/popover_component.rb
|
162
164
|
- app/components/primer/progress_bar_component.html.erb
|
163
165
|
- app/components/primer/progress_bar_component.rb
|
164
166
|
- app/components/primer/slot.rb
|
@@ -182,7 +184,7 @@ licenses:
|
|
182
184
|
- MIT
|
183
185
|
metadata:
|
184
186
|
allowed_push_host: https://rubygems.org
|
185
|
-
post_install_message:
|
187
|
+
post_install_message:
|
186
188
|
rdoc_options: []
|
187
189
|
require_paths:
|
188
190
|
- lib
|
@@ -198,7 +200,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
198
200
|
version: '0'
|
199
201
|
requirements: []
|
200
202
|
rubygems_version: 3.1.2
|
201
|
-
signing_key:
|
203
|
+
signing_key:
|
202
204
|
specification_version: 4
|
203
205
|
summary: ViewComponents for the Primer Design System
|
204
206
|
test_files: []
|