primer_view_components 0.0.6 → 0.0.11
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 +71 -30
- data/README.md +1 -158
- data/app/components/primer/avatar_component.rb +11 -0
- data/app/components/primer/base_component.rb +7 -12
- data/app/components/primer/blankslate_component.html.erb +8 -2
- data/app/components/primer/blankslate_component.rb +70 -118
- data/app/components/primer/border_box_component.rb +16 -4
- data/app/components/primer/box_component.rb +2 -0
- data/app/components/primer/breadcrumb_component.rb +13 -20
- data/app/components/primer/button_component.rb +21 -4
- data/app/components/primer/component.rb +1 -0
- data/app/components/primer/counter_component.rb +5 -0
- data/app/components/primer/details_component.rb +4 -4
- data/app/components/primer/flash_component.html.erb +14 -0
- data/app/components/primer/flash_component.rb +73 -0
- data/app/components/primer/label_component.rb +17 -0
- data/app/components/primer/layout_component.rb +18 -1
- data/app/components/primer/link_component.rb +10 -0
- data/app/components/primer/octicon_component.rb +45 -0
- data/app/components/primer/popover_component.rb +38 -0
- data/app/components/primer/progress_bar_component.rb +29 -19
- 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 +38 -0
- data/app/components/primer/state_component.rb +19 -7
- data/app/components/primer/subhead_component.rb +45 -20
- data/app/components/primer/text_component.rb +6 -0
- data/app/components/primer/timeline_item_component.rb +24 -0
- data/app/components/primer/view_components.rb +3 -0
- data/lib/primer/classify.rb +4 -0
- data/lib/primer/view_components/version.rb +1 -1
- metadata +27 -8
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: befa90070fd7a8cd5a5668c8ac39697fb4baf39d11ebc50f938f72eb1805543a
|
4
|
+
data.tar.gz: c9b3abe81ae870566a2a2decf6135b8f13158842c43fd46b40346aba6fcc6e45
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 16cbb49509d19431d5dba889847c350c5720b471452a62d5452de2ce454376826edc37628b5b65711255dbe4bd50357f7b7c0d158b2c595b15685db974e11607
|
7
|
+
data.tar.gz: aea1f3880d89157176c509eba04c7a79d9fd443e9f8ca8d5e3f40960e27ed94e100c69bfde39c86bba76471e76d6afca4f6ed7919d398e35b076a4ef5f659309
|
data/CHANGELOG.md
CHANGED
@@ -1,4 +1,46 @@
|
|
1
|
-
#
|
1
|
+
# CHANGELOG
|
2
|
+
|
3
|
+
## main
|
4
|
+
|
5
|
+
## 0.0.11
|
6
|
+
|
7
|
+
* Renames DetailsComponent::OVERLAY_DEFAULT to DetailsComponent::NO_OVERLAY to more correctly describe its value.
|
8
|
+
|
9
|
+
*Justin Kenyon*
|
10
|
+
|
11
|
+
## 0.0.10
|
12
|
+
|
13
|
+
* Add SpinnerComponent
|
14
|
+
|
15
|
+
*Cole Bemis*
|
16
|
+
|
17
|
+
## 0.0.9
|
18
|
+
|
19
|
+
* BREAKING CHANGE: OcticonComponent no longer accepts `class` parameter; use `classes` instead.
|
20
|
+
|
21
|
+
*heynan0*
|
22
|
+
|
23
|
+
## 0.0.8
|
24
|
+
|
25
|
+
* Add support for border margins, such as: `border_top: 0`.
|
26
|
+
|
27
|
+
*Natasha Umer*
|
28
|
+
|
29
|
+
* Add FlashComponent and OcticonComponent.
|
30
|
+
|
31
|
+
*Joel Hawksley*
|
32
|
+
|
33
|
+
* BREAKING CHANGE: BlankslateComponent accepts `icon_size` instead of `icon_height`.
|
34
|
+
|
35
|
+
*Joel Hawksley*
|
36
|
+
|
37
|
+
## 0.0.7
|
38
|
+
|
39
|
+
* Use `octicons_helper` v11.0.0.
|
40
|
+
|
41
|
+
*Joel Hawksley*
|
42
|
+
|
43
|
+
## 0.0.6
|
2
44
|
|
3
45
|
* Updated the invalid class name error message
|
4
46
|
|
@@ -16,21 +58,19 @@
|
|
16
58
|
|
17
59
|
*Manuel Puyol*
|
18
60
|
|
19
|
-
|
20
|
-
|
21
|
-
* Changed `DetailsComponent` summary and body to be slots
|
61
|
+
* BREAKING CHANGE: Changed `DetailsComponent` summary and body to be slots
|
22
62
|
|
23
63
|
*Manuel Puyol*
|
24
64
|
|
25
|
-
|
65
|
+
## 0.0.5
|
26
66
|
|
27
67
|
* Add support for box_shadow
|
28
68
|
* Add components:
|
29
|
-
|
69
|
+
* Popover
|
30
70
|
|
31
71
|
*Sarah Vessels*
|
32
72
|
|
33
|
-
|
73
|
+
## 0.0.4
|
34
74
|
|
35
75
|
* Added support for mx: and my: :auto.
|
36
76
|
|
@@ -39,19 +79,20 @@
|
|
39
79
|
* Added support for custom layout sizes.
|
40
80
|
|
41
81
|
*Manuel Puyol*
|
42
|
-
|
82
|
+
|
83
|
+
## 0.0.3
|
43
84
|
|
44
85
|
* Add support for responsive `float` style argument.
|
45
86
|
|
46
87
|
*Joel Hawksley*
|
47
88
|
|
48
89
|
* Add components:
|
49
|
-
|
50
|
-
|
90
|
+
* Avatar
|
91
|
+
* Blankslate
|
51
92
|
|
52
93
|
*Manuel Puyol, Ben Emdon*
|
53
94
|
|
54
|
-
|
95
|
+
## 0.0.1
|
55
96
|
|
56
97
|
* Add initial gem configuration.
|
57
98
|
|
@@ -66,24 +107,24 @@
|
|
66
107
|
*Manuel Puyol*
|
67
108
|
|
68
109
|
* Add components:
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
110
|
+
* BorderBox
|
111
|
+
* Box
|
112
|
+
* Breadcrumb
|
113
|
+
* Button
|
114
|
+
* Counter
|
115
|
+
* Details
|
116
|
+
* Dropdown
|
117
|
+
* Flex
|
118
|
+
* FlexItem
|
119
|
+
* Heading
|
120
|
+
* Label
|
121
|
+
* Layout
|
122
|
+
* Link
|
123
|
+
* ProgressBar
|
124
|
+
* State
|
125
|
+
* Subhead
|
126
|
+
* Text
|
127
|
+
* TimelineItem
|
128
|
+
* UnderlineNav
|
88
129
|
|
89
130
|
*Manuel Puyol*
|
data/README.md
CHANGED
@@ -8,164 +8,7 @@
|
|
8
8
|
|
9
9
|
_Note: This library is in pre-release development and should not be considered stable._
|
10
10
|
|
11
|
-
|
12
|
-
|
13
|
-
Primer ViewComponents aims to mimic the API of [Primer Components](https://github.com/primer/components), while using [Primer CSS](https://github.com/primer/css) under the hood.
|
14
|
-
|
15
|
-
## Installation
|
16
|
-
|
17
|
-
In `Gemfile`, add:
|
18
|
-
|
19
|
-
```ruby
|
20
|
-
gem "primer_view_components"
|
21
|
-
```
|
22
|
-
|
23
|
-
In `config/application.rb`, add **after the application definition**
|
24
|
-
|
25
|
-
```ruby
|
26
|
-
require "primer/view_components/engine"
|
27
|
-
```
|
28
|
-
|
29
|
-
## Usage
|
30
|
-
|
31
|
-
### Built-in styling arguments
|
32
|
-
|
33
|
-
Primer components should be styled using the built-in arguments when possible. Most Primer utility classes for spacing, alignment, display, and colors have equivalent component arguments.
|
34
|
-
|
35
|
-
Example label built with Primer CSS:
|
36
|
-
|
37
|
-
```html
|
38
|
-
<span title="Label: Suggested" class="Label Label--outline Label--outline-green ml-2 v-align-middle">Suggested</span>
|
39
|
-
```
|
40
|
-
|
41
|
-
The same label using `Primer::LabelComponent`:
|
42
|
-
|
43
|
-
```erb
|
44
|
-
<%= render Primer::LabelComponent.new(ml: 2, vertical_align: :middle, scheme: :green, title: "Label: Suggested") do %>
|
45
|
-
Suggested
|
46
|
-
<% end %>
|
47
|
-
```
|
48
|
-
|
49
|
-
Some components have their own specific arguments, but they can all be styled with the following arguments.
|
50
|
-
|
51
|
-
| Component argument | Primer class | Example |
|
52
|
-
| --------------- | --------------- | -------- |
|
53
|
-
| `m` | `m-<value>` | `m: 4` → `.m-4` |
|
54
|
-
| `my` | `my-<value>` | `my: 4` → `.my-4` |
|
55
|
-
| `mx` | `my-<value>` | `mx: 4` → `.mx-4` |
|
56
|
-
| `mt` | `mt-<value>` | `mt: 4` → `.mt-4` |
|
57
|
-
| `mb` | `mb-<value>` | `mb: 4` → `.mb-4` |
|
58
|
-
| `ml` | `ml-<value>` | `ml: 4` → `.ml-4` |
|
59
|
-
| `mr` | `mr-<value>` | `mr: 4` → `.mr-4` |
|
60
|
-
| `p` | `p-<value>` | `p: 4` → `.p-4` |
|
61
|
-
| `py` | `py-<value>` | `py: 4` → `.py-4` |
|
62
|
-
| `px` | `py-<value>` | `px: 4` → `.px-4` |
|
63
|
-
| `pt` | `pt-<value>` | `pt: 4` → `.pt-4` |
|
64
|
-
| `pb` | `pb-<value>` | `pb: 4` → `.pb-4` |
|
65
|
-
| `pl` | `pl-<value>` | `pl: 4` → `.pl-4` |
|
66
|
-
| `pr` | `pr-<value>` | `pr: 4` → `.pr-4` |
|
67
|
-
| `pr` | `pr-<value>` | `pr: 4` → `.pr-4` |
|
68
|
-
| `f` | `f-<value>` | `f: 4` → `.f-4` |
|
69
|
-
| `color` | `color-<value>` | `color: :red_500` → `.color-red-500` |
|
70
|
-
| `text` | `text-<value>` | `text: :green` → `.text-green` |
|
71
|
-
| `bg` | `bg-<value>` | `bg: :blue_light` → `.bg-blue-light` |
|
72
|
-
| `display` | `d-<value>` | `display: :none` → `.d-none` |
|
73
|
-
| `float` | `float-<value>` | `float: :right` → `.float-right` |
|
74
|
-
| `vertical_align` | `v-align-<value>` | `vertical_align: :baseline` → `.v-align-baseline` |
|
75
|
-
| `text_align` | `text-<value>` | `text_align: :right` → `.text-right` |
|
76
|
-
| `font_size` | `f<value>` | `font_size: 4` → `.f4` |
|
77
|
-
| `font_weight` | `text-<value>` | `font_weight: :bold` → `.text-bold` |
|
78
|
-
| `border` | `border-<value>` | `border: :bottom` → `.border-bottom` |
|
79
|
-
| `border_color` | `border-<value>` | `border: :green` → `.border-green` |
|
80
|
-
| `word_break` | `wb-<value>` | `word_break: :break_all` → `.wb-break-all` |
|
81
|
-
| `direction` | `flex-<value>` | `direction: :row` → `.flex-row` |
|
82
|
-
| `justify_content` | `flex-justify-<value>` | `justify_content: :center` → `.flex-justify-center` |
|
83
|
-
| `align_items` | `flex-items-<value>` | `align_items: :baseline` → `.flex-items-baseline` |
|
84
|
-
| `box_shadow` | `box-shadow-<value>` | `box_shadow: :medium` → `.box-shadow-medium` |
|
85
|
-
|
86
|
-
#### Boolean arguments
|
87
|
-
| Component arguments | True | False |
|
88
|
-
| -------------- | ------- | ------ |
|
89
|
-
| `underline` | `underline: true` → `.text-underline` | `underline: false` → `.no-underline` |
|
90
|
-
| `top` | n/a | `top: false` → `.top-0` |
|
91
|
-
| `bottom` | n/a | `bottom: false` → `.bottom-0` |
|
92
|
-
| `left` | n/a | `left: false` → `.left-0` |
|
93
|
-
| `right` | n/a | `right: false` → `.right-0` |
|
94
|
-
|
95
|
-
#### Responsive arguments
|
96
|
-
|
97
|
-
Different classes can be used for different breakpoints just like in Primer CSS. Simply use an array with the four values required for `[none, small, medium, large]`. If no breakpoint is needed for a breakpoint, pass `nil`.
|
98
|
-
|
99
|
-
Example heading built with Primer CSS:
|
100
|
-
|
101
|
-
```html
|
102
|
-
<h1 class="mt-0 mt-lg-4">Hello world</h1>
|
103
|
-
```
|
104
|
-
|
105
|
-
The same label using `Primer::HeadingComponent`:
|
106
|
-
|
107
|
-
```erb
|
108
|
-
<%= render Primer::HeadingComponent.new(mt: [0, nil, nil, 4]) do %>
|
109
|
-
Hello world
|
110
|
-
<% end %>
|
111
|
-
```
|
112
|
-
|
113
|
-
## Contributing
|
114
|
-
|
115
|
-
Bug reports and pull requests are welcome on GitHub at https://github.com/primer/view_components. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
|
116
|
-
|
117
|
-
### Setting up
|
118
|
-
|
119
|
-
Run
|
120
|
-
|
121
|
-
```bash
|
122
|
-
script/setup
|
123
|
-
```
|
124
|
-
|
125
|
-
to install all necessary dependencies
|
126
|
-
|
127
|
-
|
128
|
-
### Running tests
|
129
|
-
|
130
|
-
To run the full test suite:
|
131
|
-
|
132
|
-
```bash
|
133
|
-
bundle exec rake
|
134
|
-
```
|
135
|
-
|
136
|
-
### Storybook
|
137
|
-
|
138
|
-
*We recommend having [overmind](https://github.com/DarthSim/overmind) installed to run both rails and storybook, but it is not required.*
|
139
|
-
|
140
|
-
To run storybook:
|
141
|
-
|
142
|
-
```bash
|
143
|
-
script/storybook
|
144
|
-
```
|
145
|
-
|
146
|
-
### Developing with another app
|
147
|
-
|
148
|
-
In your `Gemfile`, change:
|
149
|
-
|
150
|
-
```ruby
|
151
|
-
gem "primer_view_components"
|
152
|
-
```
|
153
|
-
|
154
|
-
to
|
155
|
-
|
156
|
-
```ruby
|
157
|
-
gem "primer_view_components", path: "path_to_the_gem" # e.g. path: "~/primer/view_components"
|
158
|
-
```
|
159
|
-
|
160
|
-
Then, `bundle install` to update references. You'll now be able to see changes from the gem without having to build it.
|
161
|
-
Remember that restarting the Rails server is necessary to see changes, as the gem is loaded at boot time.
|
162
|
-
|
163
|
-
To minimize the number of restarts, we recommend checking the component in Storybook first, and then when it's in a good state,
|
164
|
-
you can check it in your app.
|
165
|
-
|
166
|
-
### Documentation
|
167
|
-
|
168
|
-
Document components with [YARD](https://yardoc.org/). Docs are published to [RubyDoc.info](https://rubydoc.info/github/primer/view_components).
|
11
|
+
Visit [https://view-components.primer.vercel.app/](https://view-components.primer.vercel.app/) to view documentation.
|
169
12
|
|
170
13
|
## License
|
171
14
|
|
@@ -1,9 +1,20 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
+
# Avatars are images used to represent users and organizations on GitHub.
|
5
|
+
# Use the default round avatar for users, and the `square` argument
|
6
|
+
# for organizations or any other non-human avatars.
|
4
7
|
class AvatarComponent < Primer::Component
|
5
8
|
SMALL_THRESHOLD = 24
|
6
9
|
|
10
|
+
#
|
11
|
+
# @example 34|Default
|
12
|
+
# <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
|
13
|
+
#
|
14
|
+
# @param src [String] The source url of the avatar image
|
15
|
+
# @param alt [String] Passed through to alt on img tag
|
16
|
+
# @param size [Integer] Adds the avatar-small class if less than 24
|
17
|
+
# @param square [Boolean] Used to create a square avatar.
|
7
18
|
def initialize(src:, alt:, size: 20, square: false, **kwargs)
|
8
19
|
@kwargs = kwargs
|
9
20
|
@kwargs[:tag] = :img
|
@@ -2,18 +2,15 @@
|
|
2
2
|
|
3
3
|
module Primer
|
4
4
|
# Base component used by other Primer components.
|
5
|
-
#
|
6
|
-
# tag(symbol): HTML tag name to be passed to tag.send(tag)
|
7
|
-
# class_names(string): CSS class name value to be concatenated with generated Primer CSS classes
|
8
|
-
# args(hash): Combination of arguments for classes_from_hash and content_tag
|
9
|
-
#
|
10
|
-
# Example usage:
|
11
|
-
# <%= render Primer::BaseComponent, tag: :a, href: "http://www.google.com", mt: 4 do %>Link<% end %>
|
12
|
-
# generates:
|
13
|
-
# <a href="http://www.google.com" class="mt-4">Link</a>
|
14
5
|
class BaseComponent < Primer::Component
|
15
6
|
TEST_SELECTOR_TAG = :test_selector
|
16
7
|
|
8
|
+
#
|
9
|
+
# @example 34|Default
|
10
|
+
# <%= render(Primer::BaseComponent.new(tag: :a, href: "http://www.google.com", mt: 4)) { "Link" } %>
|
11
|
+
#
|
12
|
+
# @param tag [Symbol] HTML tag name to be passed to tag.send(tag)
|
13
|
+
# @param classes [String] CSS class name value to be concatenated with generated Primer CSS classes
|
17
14
|
def initialize(tag:, classes: nil, **args)
|
18
15
|
@tag = tag
|
19
16
|
@result = Primer::Classify.call(**args.merge(classes: classes))
|
@@ -23,9 +20,7 @@ module Primer
|
|
23
20
|
end
|
24
21
|
|
25
22
|
def call
|
26
|
-
tag.
|
27
|
-
@tag, content, **@content_tag_args.merge(@result)
|
28
|
-
)
|
23
|
+
content_tag(@tag, content, **@content_tag_args.merge(@result))
|
29
24
|
end
|
30
25
|
|
31
26
|
private
|
@@ -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
|
+
classes: "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>
|
@@ -1,126 +1,78 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
module Primer
|
4
|
-
#
|
5
|
-
#
|
6
|
-
# ## Basic example
|
7
|
-
#
|
8
|
-
# The `Primer::BlankslateComponent` supports the following arguments to add a basic blankslate:
|
9
|
-
#
|
10
|
-
# 1. `title` (`String` required). Text that appears in a larger bold font.
|
11
|
-
# 2. `description` (`String` optional). Text that appears below the title. Typically a whole sentence.
|
12
|
-
#
|
13
|
-
# ```ruby
|
14
|
-
# <%= render Primer::BlankslateComponent.new(
|
15
|
-
# title: "Title",
|
16
|
-
# description: "Description",
|
17
|
-
# ) %>
|
18
|
-
# ```
|
19
|
-
#
|
20
|
-
# ## Icon or graphic (optional)
|
21
|
-
#
|
22
|
-
# Add an `icon` to give additional context. Please refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
|
23
|
-
#
|
24
|
-
# ```ruby
|
25
|
-
# <%= render Primer::BlankslateComponent.new(
|
26
|
-
# icon: "octoface",
|
27
|
-
# title: "Title",
|
28
|
-
# description: "Description",
|
29
|
-
# ) %>
|
30
|
-
# ```
|
31
|
-
#
|
32
|
-
# Alternatively you can also add a graphic by providing a path (`image_src`) to an image instead.Also, make sure to add an alternative description (`image_alt`). It will be used for the `alt` tag.
|
33
|
-
#
|
34
|
-
# ```ruby
|
35
|
-
# <%= render Primer::BlankslateComponent.new(
|
36
|
-
# image_src: "file.svg",
|
37
|
-
# image_alt: "Description of the image",
|
38
|
-
# title: "Title",
|
39
|
-
# description: "Description",
|
40
|
-
# ) %>
|
41
|
-
# ```
|
42
|
-
#
|
43
|
-
# Both icon and graphic will appear above the title.
|
44
|
-
#
|
45
|
-
#
|
46
|
-
# ## Custom content (optional)
|
47
|
-
#
|
48
|
-
# You can add any custom content that typically is used instead of the description:
|
49
|
-
#
|
50
|
-
# ```ruby
|
51
|
-
# <%= render Primer::BlankslateComponent.new(
|
52
|
-
# icon: "octoface",
|
53
|
-
# title: "Title",
|
54
|
-
# ) do %>
|
55
|
-
# <p>Your custom content here</p>
|
56
|
-
# <% end %>
|
57
|
-
# ```
|
58
|
-
#
|
59
|
-
# ## Action button (optional)
|
60
|
-
#
|
61
|
-
# You can provide an action button to help users replace the blankslate. The button will appear below the description and custom content. It takes the following arguments:
|
62
|
-
#
|
63
|
-
# - `button_text` (`String` optional). The text of the button.
|
64
|
-
# - `button_url` (`String` optional). The URL where the user will be taken after clicking the button.
|
65
|
-
#
|
66
|
-
# ```ruby
|
67
|
-
# <%= render Primer::BlankslateComponent.new(
|
68
|
-
# icon: "book",
|
69
|
-
# title: "Welcome to the mona wiki!",
|
70
|
-
# 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.",
|
71
|
-
#
|
72
|
-
# button_text: "Create the first page",
|
73
|
-
# button_url: "https://github.com/monalisa/mona/wiki/_new",
|
74
|
-
# ) %>
|
75
|
-
# ```
|
76
|
-
#
|
77
|
-
# ## Link (optional)
|
78
|
-
#
|
79
|
-
# Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
|
80
|
-
#
|
81
|
-
# - `link_text` (`String` optional). The text of the link.
|
82
|
-
# - `link_url` (`String` optional). The URL where the user will be taken after clicking the link.
|
83
|
-
#
|
84
|
-
# ```ruby
|
85
|
-
# <%= render Primer::BlankslateComponent.new(
|
86
|
-
# icon: "book",
|
87
|
-
# title: "Welcome to the mona wiki!",
|
88
|
-
# 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.",
|
89
|
-
# button_text: "Create the first page",
|
90
|
-
# button_url: "https://github.com/monalisa/mona/wiki/_new",
|
91
|
-
# link_text: "Learn more about wikis",
|
92
|
-
# link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
|
93
|
-
# ) %>
|
94
|
-
# ```
|
95
|
-
#
|
96
|
-
# ## Variations (optional)
|
97
|
-
#
|
98
|
-
# There are a few variations of how the Blankslate appears:
|
99
|
-
#
|
100
|
-
# - `narrow` (`Boolean` optional). Adds a maximum width.
|
101
|
-
# - `large` (`Boolean` optional). Increaeses the font size.
|
102
|
-
# - `spacious` (`Boolean` optional). Adds extra padding.
|
103
|
-
#
|
104
|
-
# ```ruby
|
105
|
-
# <%= render Primer::BlankslateComponent.new(
|
106
|
-
# icon: "book",
|
107
|
-
# title: "Welcome to the mona wiki!",
|
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.",
|
109
|
-
#
|
110
|
-
# narrow: true,
|
111
|
-
# large: true,
|
112
|
-
# spacious: true,
|
113
|
-
# ) %>
|
114
|
-
# ```
|
4
|
+
# Use Primer::BlankslateComponent when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.
|
115
5
|
class BlankslateComponent < Primer::Component
|
6
|
+
#
|
7
|
+
# @example 150|Basic
|
8
|
+
# <%= render Primer::BlankslateComponent.new(
|
9
|
+
# title: "Title",
|
10
|
+
# description: "Description",
|
11
|
+
# ) %>
|
12
|
+
#
|
13
|
+
# @example 190|Icon|Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
|
14
|
+
# <%= render Primer::BlankslateComponent.new(
|
15
|
+
# icon: "octoface",
|
16
|
+
# title: "Title",
|
17
|
+
# description: "Description",
|
18
|
+
# ) %>
|
19
|
+
#
|
20
|
+
# @example 150|Custom content|Pass custom content as a block in place of `description`.
|
21
|
+
# <%= render Primer::BlankslateComponent.new(
|
22
|
+
# title: "Title",
|
23
|
+
# ) do %>
|
24
|
+
# <em>Your custom content here</em>
|
25
|
+
# <% end %>
|
26
|
+
#
|
27
|
+
# @example 270|Action button|Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
|
28
|
+
# <%= render Primer::BlankslateComponent.new(
|
29
|
+
# icon: "book",
|
30
|
+
# title: "Welcome to the mona wiki!",
|
31
|
+
# 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.",
|
32
|
+
#
|
33
|
+
# button_text: "Create the first page",
|
34
|
+
# button_url: "https://github.com/monalisa/mona/wiki/_new",
|
35
|
+
# ) %>
|
36
|
+
#
|
37
|
+
# @example 225|Link|Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
|
38
|
+
# <%= render Primer::BlankslateComponent.new(
|
39
|
+
# icon: "book",
|
40
|
+
# title: "Welcome to the mona wiki!",
|
41
|
+
# 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.",
|
42
|
+
# link_text: "Learn more about wikis",
|
43
|
+
# link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
|
44
|
+
# ) %>
|
45
|
+
#
|
46
|
+
# @example 340|Variations|There are a few variations of how the Blankslate appears: `narrow` adds a maximum width, `large` increases the font size, and `spacious` adds extra padding.
|
47
|
+
# <%= render Primer::BlankslateComponent.new(
|
48
|
+
# icon: "book",
|
49
|
+
# title: "Welcome to the mona wiki!",
|
50
|
+
# 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.",
|
51
|
+
# narrow: true,
|
52
|
+
# large: true,
|
53
|
+
# spacious: true,
|
54
|
+
# ) %>
|
55
|
+
#
|
56
|
+
# @param title [String] Text that appears in a larger bold font.
|
57
|
+
# @param title_tag [Symbol] HTML tag to use for title.
|
58
|
+
# @param icon [String] Octicon icon to use at top of component.
|
59
|
+
# @param icon_size [Symbol] <%= one_of(Primer::OcticonComponent::SIZE_MAPPINGS.keys) %>
|
60
|
+
# @param image_src [String] Image to display.
|
61
|
+
# @param image_alt [String] Alt text for image.
|
62
|
+
# @param description [String] Text that appears below the title. Typically a whole sentence.
|
63
|
+
# @param button_text [String] The text of the button.
|
64
|
+
# @param button_url [String] The URL where the user will be taken after clicking the button.
|
65
|
+
# @param button_classes [String] Classes to apply to action button
|
66
|
+
# @param link_text [String] The text of the link.
|
67
|
+
# @param link_url [String] The URL where the user will be taken after clicking the link.
|
68
|
+
# @param narrow [Boolean] Adds a maximum width.
|
69
|
+
# @param large [Boolean] Increases the font size.
|
70
|
+
# @param spacious [Boolean] Adds extra padding.
|
116
71
|
def initialize(
|
117
|
-
|
118
|
-
title:,
|
119
|
-
|
120
|
-
# optional
|
72
|
+
title: "",
|
121
73
|
title_tag: :h3,
|
122
74
|
icon: "",
|
123
|
-
|
75
|
+
icon_size: :medium,
|
124
76
|
image_src: "",
|
125
77
|
image_alt: " ",
|
126
78
|
description: "",
|
@@ -138,7 +90,7 @@ module Primer
|
|
138
90
|
**kwargs
|
139
91
|
)
|
140
92
|
@kwargs = kwargs
|
141
|
-
@kwargs[:tag]
|
93
|
+
@kwargs[:tag] ||= :div
|
142
94
|
@kwargs[:classes] = class_names(
|
143
95
|
@kwargs[:classes],
|
144
96
|
"blankslate",
|
@@ -149,7 +101,7 @@ module Primer
|
|
149
101
|
|
150
102
|
@title_tag = title_tag
|
151
103
|
@icon = icon
|
152
|
-
@
|
104
|
+
@icon_size = icon_size
|
153
105
|
@image_src = image_src
|
154
106
|
@image_alt = image_alt
|
155
107
|
@title = title
|