primer_view_components 0.0.3 → 0.0.8
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 +63 -0
- data/README.md +18 -0
- data/app/components/primer/base_component.rb +1 -3
- data/app/components/primer/blankslate_component.html.erb +10 -4
- data/app/components/primer/blankslate_component.rb +14 -9
- data/app/components/primer/button_component.rb +5 -5
- data/app/components/primer/counter_component.rb +7 -0
- data/app/components/primer/details_component.html.erb +5 -3
- data/app/components/primer/details_component.rb +37 -12
- data/app/components/primer/flash_component.html.erb +14 -0
- data/app/components/primer/flash_component.rb +43 -0
- data/app/components/primer/layout_component.html.erb +3 -3
- data/app/components/primer/layout_component.rb +10 -3
- data/app/components/primer/octicon_component.rb +27 -0
- 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 +3 -0
- data/lib/primer/classify.rb +19 -7
- data/lib/primer/fetch_or_fallback_helper.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- metadata +55 -8
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 25626f31190d4622e822db5eb8f435f103c0a77668cb78c1db16eec60ac4dfb9
|
4
|
+
data.tar.gz: e551785879e69a0bd7c2ae62a97a39f311dc3dbc415bc5dade637d97fa297910
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6a77219748e0c7018f789df844cd6f6e83159b2fef82a5b81985c277d0427d85442e4e14c6f9934e387afc3f1d2291f31a3d88c9630c8f4910bae992d39a0188
|
7
|
+
data.tar.gz: 15b0b2a9faa1603f57d263a2a6b18f2eb4e1aa325d8c261bfce9f803571ae9a5075b1d51f8a5f3bf31bc7f12662dbe914f7380f71518fe6896b947f2d000757b
|
data/CHANGELOG.md
CHANGED
@@ -1,5 +1,68 @@
|
|
1
1
|
# main
|
2
2
|
|
3
|
+
# 0.0.8
|
4
|
+
|
5
|
+
* Add support for border margins, such as: `border_top: 0`.
|
6
|
+
|
7
|
+
*Natasha Umer*
|
8
|
+
|
9
|
+
* Add FlashComponent and OcticonComponent.
|
10
|
+
|
11
|
+
*Joel Hawksley*
|
12
|
+
|
13
|
+
## Breaking changes
|
14
|
+
|
15
|
+
* BlankslateComponent accepts `icon_size` instead of `icon_height`.
|
16
|
+
|
17
|
+
*Joel Hawksley*
|
18
|
+
|
19
|
+
# 0.0.7
|
20
|
+
|
21
|
+
* Use `octicons_helper` v11.0.0.
|
22
|
+
|
23
|
+
*Joel Hawksley*
|
24
|
+
|
25
|
+
# 0.0.6
|
26
|
+
|
27
|
+
* Updated the invalid class name error message
|
28
|
+
|
29
|
+
*emplums*
|
30
|
+
|
31
|
+
* Updated README with testing instructions
|
32
|
+
|
33
|
+
*emplums*
|
34
|
+
|
35
|
+
* Add large and spacious option to BlankslateComponent
|
36
|
+
|
37
|
+
*simurai*
|
38
|
+
|
39
|
+
* Add option for `ButtonComponent` to render a `summary` tag
|
40
|
+
|
41
|
+
*Manuel Puyol*
|
42
|
+
|
43
|
+
## Breaking changes
|
44
|
+
|
45
|
+
* Changed `DetailsComponent` summary and body to be slots
|
46
|
+
|
47
|
+
*Manuel Puyol*
|
48
|
+
|
49
|
+
# 0.0.5
|
50
|
+
|
51
|
+
* Add support for box_shadow
|
52
|
+
* Add components:
|
53
|
+
* Popover
|
54
|
+
|
55
|
+
*Sarah Vessels*
|
56
|
+
|
57
|
+
# 0.0.4
|
58
|
+
|
59
|
+
* Added support for mx: and my: :auto.
|
60
|
+
|
61
|
+
*Christian Giordano*
|
62
|
+
|
63
|
+
* Added support for custom layout sizes.
|
64
|
+
|
65
|
+
*Manuel Puyol*
|
3
66
|
# 0.0.3
|
4
67
|
|
5
68
|
* Add support for responsive `float` style argument.
|
data/README.md
CHANGED
@@ -77,10 +77,15 @@ Some components have their own specific arguments, but they can all be styled wi
|
|
77
77
|
| `font_weight` | `text-<value>` | `font_weight: :bold` → `.text-bold` |
|
78
78
|
| `border` | `border-<value>` | `border: :bottom` → `.border-bottom` |
|
79
79
|
| `border_color` | `border-<value>` | `border: :green` → `.border-green` |
|
80
|
+
| `border_top` | `border-top-<value>` | `border_top: 0` → `.border-top-0` |
|
81
|
+
| `border_bottom` | `border-bottom-<value>` | `border_bottom: 0` → `.border-bottom-0` |
|
82
|
+
| `border_left` | `border-left-<value>` | `border_left: 0` → `.border-left-0` |
|
83
|
+
| `border_right` | `border-right-<value>` | `border_right: 0` → `.border-right-0` |
|
80
84
|
| `word_break` | `wb-<value>` | `word_break: :break_all` → `.wb-break-all` |
|
81
85
|
| `direction` | `flex-<value>` | `direction: :row` → `.flex-row` |
|
82
86
|
| `justify_content` | `flex-justify-<value>` | `justify_content: :center` → `.flex-justify-center` |
|
83
87
|
| `align_items` | `flex-items-<value>` | `align_items: :baseline` → `.flex-items-baseline` |
|
88
|
+
| `box_shadow` | `box-shadow-<value>` | `box_shadow: :medium` → `.box-shadow-medium` |
|
84
89
|
|
85
90
|
#### Boolean arguments
|
86
91
|
| Component arguments | True | False |
|
@@ -123,6 +128,15 @@ script/setup
|
|
123
128
|
|
124
129
|
to install all necessary dependencies
|
125
130
|
|
131
|
+
|
132
|
+
### Running tests
|
133
|
+
|
134
|
+
To run the full test suite:
|
135
|
+
|
136
|
+
```bash
|
137
|
+
bundle exec rake
|
138
|
+
```
|
139
|
+
|
126
140
|
### Storybook
|
127
141
|
|
128
142
|
*We recommend having [overmind](https://github.com/DarthSim/overmind) installed to run both rails and storybook, but it is not required.*
|
@@ -153,6 +167,10 @@ Remember that restarting the Rails server is necessary to see changes, as the ge
|
|
153
167
|
To minimize the number of restarts, we recommend checking the component in Storybook first, and then when it's in a good state,
|
154
168
|
you can check it in your app.
|
155
169
|
|
170
|
+
### Documentation
|
171
|
+
|
172
|
+
Document components with [YARD](https://yardoc.org/). Docs are published to [RubyDoc.info](https://rubydoc.info/github/primer/view_components).
|
173
|
+
|
156
174
|
## License
|
157
175
|
|
158
176
|
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
@@ -1,13 +1,19 @@
|
|
1
1
|
<%= render Primer::BaseComponent.new(**@kwargs) do %>
|
2
2
|
<% if @icon.present? %>
|
3
|
-
<%=
|
3
|
+
<%= render(Primer::OcticonComponent.new(
|
4
|
+
icon: @icon,
|
5
|
+
size: @icon_size,
|
6
|
+
class: "blankslate-icon"
|
7
|
+
)) %>
|
4
8
|
<% end %>
|
5
9
|
|
6
10
|
<% if @image_src.present? && @image_alt.present? %>
|
7
11
|
<%= image_tag "#{@image_src}", class: "mb-3", size: "56x56", alt: "#{@image_alt}" %>
|
8
12
|
<% end %>
|
9
13
|
|
10
|
-
|
14
|
+
<% if @title.present? %>
|
15
|
+
<%= render Primer::BaseComponent.new(tag: @title_tag, mb: 1) do %><%= @title %><% end %>
|
16
|
+
<% end %>
|
11
17
|
|
12
18
|
<% if @description.present? %>
|
13
19
|
<p><%= @description %></p>
|
@@ -16,11 +22,11 @@
|
|
16
22
|
<%= content %>
|
17
23
|
|
18
24
|
<% if @button_text.present? && @button_url.present? %>
|
19
|
-
<
|
25
|
+
<a class="btn <%= @button_classes %>" href="<%= @button_url %>"><%= @button_text %></a>
|
20
26
|
<% end %>
|
21
27
|
|
22
28
|
<% if @link_text.present? && @link_url.present? %>
|
23
|
-
<p
|
29
|
+
<p>
|
24
30
|
<%= link_to "#{@link_url}" do %><%= @link_text %><% end %>
|
25
31
|
</p>
|
26
32
|
<% end %>
|
@@ -7,7 +7,7 @@ module Primer
|
|
7
7
|
#
|
8
8
|
# The `Primer::BlankslateComponent` supports the following arguments to add a basic blankslate:
|
9
9
|
#
|
10
|
-
# 1. `title` (`String`
|
10
|
+
# 1. `title` (`String` optional). Text that appears in a larger bold font.
|
11
11
|
# 2. `description` (`String` optional). Text that appears below the title. Typically a whole sentence.
|
12
12
|
#
|
13
13
|
# ```ruby
|
@@ -98,6 +98,8 @@ module Primer
|
|
98
98
|
# There are a few variations of how the Blankslate appears:
|
99
99
|
#
|
100
100
|
# - `narrow` (`Boolean` optional). Adds a maximum width.
|
101
|
+
# - `large` (`Boolean` optional). Increaeses the font size.
|
102
|
+
# - `spacious` (`Boolean` optional). Adds extra padding.
|
101
103
|
#
|
102
104
|
# ```ruby
|
103
105
|
# <%= render Primer::BlankslateComponent.new(
|
@@ -106,42 +108,45 @@ module Primer
|
|
106
108
|
# description: "Wikis provide a place in your repository to lay out the roadmap of your project, show the current status, and document software better, together.",
|
107
109
|
#
|
108
110
|
# narrow: true,
|
111
|
+
# large: true,
|
112
|
+
# spacious: true,
|
109
113
|
# ) %>
|
110
114
|
# ```
|
111
115
|
class BlankslateComponent < Primer::Component
|
112
116
|
def initialize(
|
113
|
-
|
114
|
-
title:,
|
115
|
-
|
116
|
-
# optional
|
117
|
+
title: "",
|
117
118
|
title_tag: :h3,
|
118
119
|
icon: "",
|
119
|
-
|
120
|
+
icon_size: :medium,
|
120
121
|
image_src: "",
|
121
122
|
image_alt: " ",
|
122
123
|
description: "",
|
123
124
|
button_text: "",
|
124
125
|
button_url: "",
|
125
|
-
button_classes: "btn-
|
126
|
+
button_classes: "btn-primary my-3",
|
126
127
|
link_text: "",
|
127
128
|
link_url: "",
|
128
129
|
|
129
130
|
#variations
|
130
131
|
narrow: false,
|
132
|
+
large: false,
|
133
|
+
spacious: false,
|
131
134
|
|
132
135
|
**kwargs
|
133
136
|
)
|
134
137
|
@kwargs = kwargs
|
135
|
-
@kwargs[:tag]
|
138
|
+
@kwargs[:tag] ||= :div
|
136
139
|
@kwargs[:classes] = class_names(
|
137
140
|
@kwargs[:classes],
|
138
141
|
"blankslate",
|
139
142
|
"blankslate-narrow": narrow,
|
143
|
+
"blankslate-large": large,
|
144
|
+
"blankslate-spacious": spacious,
|
140
145
|
)
|
141
146
|
|
142
147
|
@title_tag = title_tag
|
143
148
|
@icon = icon
|
144
|
-
@
|
149
|
+
@icon_size = icon_size
|
145
150
|
@image_src = image_src
|
146
151
|
@image_alt = image_alt
|
147
152
|
@title = title
|
@@ -20,7 +20,7 @@ module Primer
|
|
20
20
|
VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
|
21
21
|
|
22
22
|
DEFAULT_TAG = :button
|
23
|
-
TAG_OPTIONS = [DEFAULT_TAG, :a].freeze
|
23
|
+
TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
|
24
24
|
|
25
25
|
DEFAULT_TYPE = :button
|
26
26
|
TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
|
@@ -34,20 +34,20 @@ module Primer
|
|
34
34
|
**kwargs
|
35
35
|
)
|
36
36
|
@kwargs = kwargs
|
37
|
-
@kwargs[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
|
37
|
+
@kwargs[:tag] = fetch_or_fallback(TAG_OPTIONS, tag.to_sym, DEFAULT_TAG)
|
38
38
|
|
39
39
|
if @kwargs[:tag] == :a
|
40
40
|
@kwargs[:role] = :button
|
41
41
|
else
|
42
|
-
@kwargs[:type] = type
|
42
|
+
@kwargs[:type] = type.to_sym
|
43
43
|
end
|
44
44
|
|
45
45
|
@kwargs[:classes] = class_names(
|
46
46
|
"btn",
|
47
47
|
kwargs[:classes],
|
48
48
|
BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type.to_sym, DEFAULT_BUTTON_TYPE)],
|
49
|
-
VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
|
50
|
-
|
49
|
+
VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant.to_sym, DEFAULT_VARIANT)],
|
50
|
+
"BtnGroup-item" => group_item
|
51
51
|
)
|
52
52
|
end
|
53
53
|
|
@@ -9,6 +9,13 @@ module Primer
|
|
9
9
|
:light_gray => "Counter Counter--gray-light",
|
10
10
|
}.freeze
|
11
11
|
|
12
|
+
# @param count [Integer, Float::INFINITY, nil] The number to be displayed (e.x. # of issues, pull requests)
|
13
|
+
# @param scheme [Symbol] Color scheme. One of `SCHEME_MAPPINGS.keys`.
|
14
|
+
# @param limit [Integer] Maximum value to display. (e.x. if count == 6,000 and limit == 5000, counter will display "5,000+")
|
15
|
+
# @param hide_if_zero [Boolean] If true, a `hidden` attribute is added to the counter if `count` is zero.
|
16
|
+
# @param text [String] Text to display instead of count.
|
17
|
+
# @param round [Boolean] Whether to apply our standard rounding logic to value.
|
18
|
+
# @param kwargs [Hash] Style arguments to be passed to Primer::Classify
|
12
19
|
def initialize(
|
13
20
|
count: 0,
|
14
21
|
scheme: DEFAULT_SCHEME,
|
@@ -1,6 +1,8 @@
|
|
1
1
|
<%= render Primer::BaseComponent.new(**@kwargs) do %>
|
2
|
-
<%= render
|
3
|
-
<%= summary %>
|
2
|
+
<%= render summary.component do %>
|
3
|
+
<%= summary.content %>
|
4
|
+
<% end %>
|
5
|
+
<%= render body.component do %>
|
6
|
+
<%= body.content %>
|
4
7
|
<% end %>
|
5
|
-
<%= body %>
|
6
8
|
<% end %>
|
@@ -7,6 +7,8 @@ module Primer
|
|
7
7
|
# reset will remove all styles from the <summary> element.
|
8
8
|
#
|
9
9
|
class DetailsComponent < Primer::Component
|
10
|
+
include ViewComponent::Slotable
|
11
|
+
|
10
12
|
OVERLAY_DEFAULT = :none
|
11
13
|
OVERLAY_MAPPINGS = {
|
12
14
|
OVERLAY_DEFAULT => "",
|
@@ -14,25 +16,48 @@ module Primer
|
|
14
16
|
:dark => "details-overlay details-overlay-dark",
|
15
17
|
}.freeze
|
16
18
|
|
17
|
-
|
18
|
-
|
19
|
-
BUTTON_OPTIONS = [BUTTON_DEFAULT, BUTTON_RESET]
|
20
|
-
|
21
|
-
with_content_areas :summary, :body
|
22
|
-
|
23
|
-
def initialize(overlay: OVERLAY_DEFAULT, button: BUTTON_DEFAULT, **kwargs)
|
24
|
-
@button = fetch_or_fallback(BUTTON_OPTIONS, button, BUTTON_DEFAULT)
|
19
|
+
with_slot :body, class_name: "Body"
|
20
|
+
with_slot :summary, class_name: "Summary"
|
25
21
|
|
22
|
+
def initialize(overlay: OVERLAY_DEFAULT, reset: false, **kwargs)
|
26
23
|
@kwargs = kwargs
|
27
24
|
@kwargs[:tag] = :details
|
28
25
|
@kwargs[:classes] = class_names(
|
29
26
|
kwargs[:classes],
|
30
|
-
OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay, OVERLAY_DEFAULT)],
|
31
|
-
"details-reset" =>
|
27
|
+
OVERLAY_MAPPINGS[fetch_or_fallback(OVERLAY_MAPPINGS.keys, overlay.to_sym, OVERLAY_DEFAULT)],
|
28
|
+
"details-reset" => reset
|
32
29
|
)
|
30
|
+
end
|
31
|
+
|
32
|
+
def render?
|
33
|
+
summary.present? && body.present?
|
34
|
+
end
|
35
|
+
|
36
|
+
class Summary < Primer::Slot
|
37
|
+
def initialize(button: true, **kwargs)
|
38
|
+
@button = button
|
39
|
+
|
40
|
+
@kwargs = kwargs
|
41
|
+
@kwargs[:tag] = :summary
|
42
|
+
@kwargs[:role] = "button"
|
43
|
+
end
|
44
|
+
|
45
|
+
def component
|
46
|
+
return Primer::BaseComponent.new(**@kwargs) unless @button
|
47
|
+
|
48
|
+
Primer::ButtonComponent.new(**@kwargs)
|
49
|
+
end
|
50
|
+
end
|
51
|
+
|
52
|
+
class Body < Primer::Slot
|
53
|
+
def initialize(**kwargs)
|
54
|
+
@kwargs = kwargs
|
55
|
+
@kwargs[:tag] ||= :div
|
56
|
+
end
|
33
57
|
|
34
|
-
|
35
|
-
|
58
|
+
def component
|
59
|
+
Primer::BaseComponent.new(**@kwargs)
|
60
|
+
end
|
36
61
|
end
|
37
62
|
end
|
38
63
|
end
|
@@ -0,0 +1,14 @@
|
|
1
|
+
<%= render Primer::BaseComponent.new(**@kwargs) do %>
|
2
|
+
<%= render(Primer::OcticonComponent.new(icon: @icon)) if @icon %>
|
3
|
+
<%= content %>
|
4
|
+
<% if @dismissible %>
|
5
|
+
<button class="flash-close js-flash-close" type="button" aria-label="Close">
|
6
|
+
<%= render(Primer::OcticonComponent.new(icon: "x")) %>
|
7
|
+
</button>
|
8
|
+
<% end %>
|
9
|
+
<% if actions.present? %>
|
10
|
+
<%= render Primer::BaseComponent.new(**actions.kwargs) do %>
|
11
|
+
<%= actions.content %>
|
12
|
+
<% end %>
|
13
|
+
<% end %>
|
14
|
+
<% end %>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
class FlashComponent < Primer::Component
|
5
|
+
include ViewComponent::Slotable
|
6
|
+
|
7
|
+
with_slot :actions, class_name: "Actions"
|
8
|
+
|
9
|
+
DEFAULT_VARIANT = :default
|
10
|
+
VARIANT_MAPPINGS = {
|
11
|
+
DEFAULT_VARIANT => "",
|
12
|
+
:warning => "flash-warn",
|
13
|
+
:danger => "flash-error",
|
14
|
+
:success => "flash-success"
|
15
|
+
}.freeze
|
16
|
+
|
17
|
+
def initialize(full: false, spacious: false, dismissible: false, icon: nil, variant: DEFAULT_VARIANT, **kwargs)
|
18
|
+
@icon = icon
|
19
|
+
@dismissible = dismissible
|
20
|
+
@kwargs = kwargs
|
21
|
+
@kwargs[:tag] = :div
|
22
|
+
@kwargs[:classes] = class_names(
|
23
|
+
@kwargs[:classes],
|
24
|
+
"flash",
|
25
|
+
VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_MAPPINGS.keys, variant.to_sym, DEFAULT_VARIANT)],
|
26
|
+
"flash-full": full
|
27
|
+
)
|
28
|
+
@kwargs[:mb] ||= spacious ? 4 : nil
|
29
|
+
end
|
30
|
+
|
31
|
+
class Actions < ViewComponent::Slot
|
32
|
+
include ClassNameHelper
|
33
|
+
|
34
|
+
attr_reader :kwargs
|
35
|
+
|
36
|
+
def initialize(**kwargs)
|
37
|
+
@kwargs = kwargs
|
38
|
+
@kwargs[:tag] = :div
|
39
|
+
@kwargs[:classes] = class_names(@kwargs[:classes], "flash-action")
|
40
|
+
end
|
41
|
+
end
|
42
|
+
end
|
43
|
+
end
|
@@ -1,16 +1,16 @@
|
|
1
1
|
<%= render(Primer::FlexComponent.new(**@kwargs)) do %>
|
2
2
|
<% if @side == :left %>
|
3
|
-
<%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil,
|
3
|
+
<%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @sidebar_col] : @sidebar_col), mb: (@responsive ? [4, nil, 0] : nil)) do %>
|
4
4
|
<%= sidebar %>
|
5
5
|
<% end %>
|
6
6
|
<% end %>
|
7
7
|
|
8
|
-
<%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil,
|
8
|
+
<%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @main_col] : @main_col), mb: (@responsive ? [4, nil, 0] : nil)) do %>
|
9
9
|
<%= main %>
|
10
10
|
<% end %>
|
11
11
|
|
12
12
|
<% if @side == :right %>
|
13
|
-
<%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil,
|
13
|
+
<%= render Primer::BaseComponent.new(tag: :div, classes: "flex-shrink-0", col: (@responsive ? [12, nil, @sidebar_col] : @sidebar_col)) do %>
|
14
14
|
<%= sidebar %>
|
15
15
|
<% end %>
|
16
16
|
<% end %>
|
@@ -5,17 +5,24 @@ module Primer
|
|
5
5
|
with_content_areas :main, :sidebar
|
6
6
|
|
7
7
|
DEFAULT_SIDE = :right
|
8
|
-
ALLOWED_SIDES = [DEFAULT_SIDE, :left]
|
8
|
+
ALLOWED_SIDES = [DEFAULT_SIDE, :left].freeze
|
9
9
|
|
10
|
-
|
10
|
+
MAX_COL = 12
|
11
|
+
DEFAULT_SIDEBAR_COL = 3
|
12
|
+
ALLOWED_SIDEBAR_COLS = (1..(MAX_COL - 1)).to_a.freeze
|
13
|
+
|
14
|
+
def initialize(responsive: false, side: DEFAULT_SIDE, sidebar_col: DEFAULT_SIDEBAR_COL, **kwargs)
|
11
15
|
@kwargs = kwargs
|
12
|
-
@side = fetch_or_fallback(ALLOWED_SIDES, side, DEFAULT_SIDE)
|
16
|
+
@side = fetch_or_fallback(ALLOWED_SIDES, side.to_sym, DEFAULT_SIDE)
|
13
17
|
@responsive = responsive
|
14
18
|
@kwargs[:classes] = class_names(
|
15
19
|
"gutter-condensed gutter-lg",
|
16
20
|
@kwargs[:classes]
|
17
21
|
)
|
18
22
|
@kwargs[:direction] = responsive ? [:column, nil, :row] : nil
|
23
|
+
|
24
|
+
@sidebar_col = fetch_or_fallback(ALLOWED_SIDEBAR_COLS, sidebar_col, DEFAULT_SIDEBAR_COL)
|
25
|
+
@main_col = MAX_COL - @sidebar_col
|
19
26
|
end
|
20
27
|
end
|
21
28
|
end
|
@@ -0,0 +1,27 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Primer
|
4
|
+
class OcticonComponent < Primer::Component
|
5
|
+
include Primer::ClassNameHelper
|
6
|
+
include OcticonsHelper
|
7
|
+
|
8
|
+
SIZE_DEFAULT = :small
|
9
|
+
SIZE_MAPPINGS = {
|
10
|
+
SIZE_DEFAULT => 16,
|
11
|
+
:medium => 32,
|
12
|
+
:large => 64,
|
13
|
+
}.freeze
|
14
|
+
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
15
|
+
|
16
|
+
def initialize(icon:, size: SIZE_DEFAULT, **kwargs)
|
17
|
+
@icon, @kwargs = icon, kwargs
|
18
|
+
|
19
|
+
@kwargs[:height] = SIZE_MAPPINGS[size.to_sym]
|
20
|
+
@kwargs[:class] = class_names(@kwargs[:class], Primer::Classify.call(**@kwargs)[:class])
|
21
|
+
end
|
22
|
+
|
23
|
+
def call
|
24
|
+
octicon(@icon, **@kwargs)
|
25
|
+
end
|
26
|
+
end
|
27
|
+
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
|
@@ -33,12 +33,15 @@ require_relative "button_component"
|
|
33
33
|
require_relative "counter_component"
|
34
34
|
require_relative "details_component"
|
35
35
|
require_relative "dropdown_menu_component"
|
36
|
+
require_relative "flash_component"
|
36
37
|
require_relative "flex_component"
|
37
38
|
require_relative "flex_item_component"
|
38
39
|
require_relative "heading_component"
|
39
40
|
require_relative "label_component"
|
40
41
|
require_relative "layout_component"
|
41
42
|
require_relative "link_component"
|
43
|
+
require_relative "octicon_component"
|
44
|
+
require_relative "popover_component"
|
42
45
|
require_relative "progress_bar_component"
|
43
46
|
require_relative "state_component"
|
44
47
|
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 = {
|
@@ -77,11 +78,13 @@ module Primer
|
|
77
78
|
}
|
78
79
|
}.freeze
|
79
80
|
BORDER_KEYS = [:border, :border_color].freeze
|
81
|
+
BORDER_MARGIN_KEYS = [:border_top, :border_bottom, :border_left, :border_right].freeze
|
80
82
|
TYPOGRAPHY_KEYS = [:font_size].freeze
|
81
83
|
VALID_KEYS = (
|
82
84
|
CONCAT_KEYS +
|
83
85
|
BOOLEAN_MAPPINGS.keys +
|
84
86
|
BORDER_KEYS +
|
87
|
+
BORDER_MARGIN_KEYS +
|
85
88
|
TYPOGRAPHY_KEYS +
|
86
89
|
TEXT_KEYS +
|
87
90
|
[
|
@@ -98,7 +101,8 @@ module Primer
|
|
98
101
|
FLEX_SHRINK_KEY,
|
99
102
|
ALIGN_SELF_KEY,
|
100
103
|
WIDTH_KEY,
|
101
|
-
HEIGHT_KEY
|
104
|
+
HEIGHT_KEY,
|
105
|
+
BOX_SHADOW_KEY
|
102
106
|
]
|
103
107
|
).freeze
|
104
108
|
|
@@ -129,7 +133,7 @@ module Primer
|
|
129
133
|
raise ArgumentError.new(
|
130
134
|
"Primer CSS class #{'name'.pluralize(invalid_class_names.length)} \
|
131
135
|
#{invalid_class_names.to_sentence} #{'is'.pluralize(invalid_class_names.length)} \
|
132
|
-
not allowed, use
|
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.",
|
133
137
|
)
|
134
138
|
end
|
135
139
|
end
|
@@ -161,9 +165,9 @@ module Primer
|
|
161
165
|
|
162
166
|
if SPACING_KEYS.include?(key)
|
163
167
|
if MARGIN_DIRECTION_KEYS.include?(key)
|
164
|
-
raise ArgumentError, "value must be between -6 and 6" if (val < -6 || val > 6)
|
165
|
-
|
166
|
-
raise ArgumentError, "value must be between 0 and 6" if (val < 0 || val > 6)
|
168
|
+
raise ArgumentError, "value of #{key} must be between -6 and 6" if (val < -6 || val > 6)
|
169
|
+
elsif !((key == :mx || key == :my) && val == :auto)
|
170
|
+
raise ArgumentError, "value of #{key} must be between 0 and 6" if (val < 0 || val > 6)
|
167
171
|
end
|
168
172
|
end
|
169
173
|
|
@@ -194,6 +198,8 @@ module Primer
|
|
194
198
|
memo[:classes] << "wb-#{dasherized_val}"
|
195
199
|
elsif BORDER_KEYS.include?(key)
|
196
200
|
memo[:classes] << "border-#{dasherized_val}"
|
201
|
+
elsif BORDER_MARGIN_KEYS.include?(key)
|
202
|
+
memo[:classes] << "#{key.to_s.dasherize}-#{val}"
|
197
203
|
elsif key == DIRECTION_KEY
|
198
204
|
memo[:classes] << "flex#{breakpoint}-#{dasherized_val}"
|
199
205
|
elsif key == JUSTIFY_CONTENT_KEY
|
@@ -221,6 +227,12 @@ module Primer
|
|
221
227
|
memo[:classes] << "f#{dasherized_val}"
|
222
228
|
elsif MARGIN_DIRECTION_KEYS.include?(key) && val < 0
|
223
229
|
memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-n#{val.abs}"
|
230
|
+
elsif key == BOX_SHADOW_KEY
|
231
|
+
if val == true
|
232
|
+
memo[:classes] << "box-shadow"
|
233
|
+
else
|
234
|
+
memo[:classes] << "box-shadow-#{dasherized_val}"
|
235
|
+
end
|
224
236
|
else
|
225
237
|
memo[:classes] << "#{key.to_s.dasherize}#{breakpoint}-#{dasherized_val}"
|
226
238
|
end
|
@@ -23,7 +23,7 @@ module Primer
|
|
23
23
|
if allowed_values.include?(given_value)
|
24
24
|
given_value
|
25
25
|
else
|
26
|
-
if fallback_raises && ENV["RAILS_ENV"] != "production"
|
26
|
+
if fallback_raises && ENV["RAILS_ENV"] != "production" && ENV["STORYBOOK"] != "true"
|
27
27
|
raise InvalidValueError, <<~MSG
|
28
28
|
fetch_or_fallback was called with an invalid value.
|
29
29
|
|
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.8
|
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-
|
11
|
+
date: 2020-09-14 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|
@@ -59,7 +59,7 @@ dependencies:
|
|
59
59
|
version: 9.0.0
|
60
60
|
- - "<"
|
61
61
|
- !ruby/object:Gem::Version
|
62
|
-
version:
|
62
|
+
version: 12.0.0
|
63
63
|
type: :runtime
|
64
64
|
prerelease: false
|
65
65
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -69,7 +69,7 @@ dependencies:
|
|
69
69
|
version: 9.0.0
|
70
70
|
- - "<"
|
71
71
|
- !ruby/object:Gem::Version
|
72
|
-
version:
|
72
|
+
version: 12.0.0
|
73
73
|
- !ruby/object:Gem::Dependency
|
74
74
|
name: minitest
|
75
75
|
requirement: !ruby/object:Gem::Requirement
|
@@ -126,7 +126,49 @@ dependencies:
|
|
126
126
|
- - "~>"
|
127
127
|
- !ruby/object:Gem::Version
|
128
128
|
version: 0.13.0
|
129
|
-
|
129
|
+
- !ruby/object:Gem::Dependency
|
130
|
+
name: simplecov
|
131
|
+
requirement: !ruby/object:Gem::Requirement
|
132
|
+
requirements:
|
133
|
+
- - "~>"
|
134
|
+
- !ruby/object:Gem::Version
|
135
|
+
version: 0.18.0
|
136
|
+
type: :development
|
137
|
+
prerelease: false
|
138
|
+
version_requirements: !ruby/object:Gem::Requirement
|
139
|
+
requirements:
|
140
|
+
- - "~>"
|
141
|
+
- !ruby/object:Gem::Version
|
142
|
+
version: 0.18.0
|
143
|
+
- !ruby/object:Gem::Dependency
|
144
|
+
name: simplecov-console
|
145
|
+
requirement: !ruby/object:Gem::Requirement
|
146
|
+
requirements:
|
147
|
+
- - "~>"
|
148
|
+
- !ruby/object:Gem::Version
|
149
|
+
version: 0.7.2
|
150
|
+
type: :development
|
151
|
+
prerelease: false
|
152
|
+
version_requirements: !ruby/object:Gem::Requirement
|
153
|
+
requirements:
|
154
|
+
- - "~>"
|
155
|
+
- !ruby/object:Gem::Version
|
156
|
+
version: 0.7.2
|
157
|
+
- !ruby/object:Gem::Dependency
|
158
|
+
name: yard
|
159
|
+
requirement: !ruby/object:Gem::Requirement
|
160
|
+
requirements:
|
161
|
+
- - "~>"
|
162
|
+
- !ruby/object:Gem::Version
|
163
|
+
version: 0.9.25
|
164
|
+
type: :development
|
165
|
+
prerelease: false
|
166
|
+
version_requirements: !ruby/object:Gem::Requirement
|
167
|
+
requirements:
|
168
|
+
- - "~>"
|
169
|
+
- !ruby/object:Gem::Version
|
170
|
+
version: 0.9.25
|
171
|
+
description:
|
130
172
|
email:
|
131
173
|
- opensource+primer_view_components@github.com
|
132
174
|
executables: []
|
@@ -152,6 +194,8 @@ files:
|
|
152
194
|
- app/components/primer/details_component.rb
|
153
195
|
- app/components/primer/dropdown_menu_component.html.erb
|
154
196
|
- app/components/primer/dropdown_menu_component.rb
|
197
|
+
- app/components/primer/flash_component.html.erb
|
198
|
+
- app/components/primer/flash_component.rb
|
155
199
|
- app/components/primer/flex_component.rb
|
156
200
|
- app/components/primer/flex_item_component.rb
|
157
201
|
- app/components/primer/heading_component.rb
|
@@ -159,6 +203,9 @@ files:
|
|
159
203
|
- app/components/primer/layout_component.html.erb
|
160
204
|
- app/components/primer/layout_component.rb
|
161
205
|
- app/components/primer/link_component.rb
|
206
|
+
- app/components/primer/octicon_component.rb
|
207
|
+
- app/components/primer/popover_component.html.erb
|
208
|
+
- app/components/primer/popover_component.rb
|
162
209
|
- app/components/primer/progress_bar_component.html.erb
|
163
210
|
- app/components/primer/progress_bar_component.rb
|
164
211
|
- app/components/primer/slot.rb
|
@@ -182,7 +229,7 @@ licenses:
|
|
182
229
|
- MIT
|
183
230
|
metadata:
|
184
231
|
allowed_push_host: https://rubygems.org
|
185
|
-
post_install_message:
|
232
|
+
post_install_message:
|
186
233
|
rdoc_options: []
|
187
234
|
require_paths:
|
188
235
|
- lib
|
@@ -198,7 +245,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
198
245
|
version: '0'
|
199
246
|
requirements: []
|
200
247
|
rubygems_version: 3.1.2
|
201
|
-
signing_key:
|
248
|
+
signing_key:
|
202
249
|
specification_version: 4
|
203
250
|
summary: ViewComponents for the Primer Design System
|
204
251
|
test_files: []
|