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.
Files changed (33) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +71 -30
  3. data/README.md +1 -158
  4. data/app/components/primer/avatar_component.rb +11 -0
  5. data/app/components/primer/base_component.rb +7 -12
  6. data/app/components/primer/blankslate_component.html.erb +8 -2
  7. data/app/components/primer/blankslate_component.rb +70 -118
  8. data/app/components/primer/border_box_component.rb +16 -4
  9. data/app/components/primer/box_component.rb +2 -0
  10. data/app/components/primer/breadcrumb_component.rb +13 -20
  11. data/app/components/primer/button_component.rb +21 -4
  12. data/app/components/primer/component.rb +1 -0
  13. data/app/components/primer/counter_component.rb +5 -0
  14. data/app/components/primer/details_component.rb +4 -4
  15. data/app/components/primer/flash_component.html.erb +14 -0
  16. data/app/components/primer/flash_component.rb +73 -0
  17. data/app/components/primer/label_component.rb +17 -0
  18. data/app/components/primer/layout_component.rb +18 -1
  19. data/app/components/primer/link_component.rb +10 -0
  20. data/app/components/primer/octicon_component.rb +45 -0
  21. data/app/components/primer/popover_component.rb +38 -0
  22. data/app/components/primer/progress_bar_component.rb +29 -19
  23. data/app/components/primer/slot.rb +1 -0
  24. data/app/components/primer/spinner_component.html.erb +6 -0
  25. data/app/components/primer/spinner_component.rb +38 -0
  26. data/app/components/primer/state_component.rb +19 -7
  27. data/app/components/primer/subhead_component.rb +45 -20
  28. data/app/components/primer/text_component.rb +6 -0
  29. data/app/components/primer/timeline_item_component.rb +24 -0
  30. data/app/components/primer/view_components.rb +3 -0
  31. data/lib/primer/classify.rb +4 -0
  32. data/lib/primer/view_components/version.rb +1 -1
  33. metadata +27 -8
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: cc85888949a3628a056ecc2b0d6ee97267a5adb688498f2268dda1e54bcd72ce
4
- data.tar.gz: 915dcfcbc1033baf6c0c635cbdd37e759045bee86fc92c3fbe7671f316b3cb7c
3
+ metadata.gz: befa90070fd7a8cd5a5668c8ac39697fb4baf39d11ebc50f938f72eb1805543a
4
+ data.tar.gz: c9b3abe81ae870566a2a2decf6135b8f13158842c43fd46b40346aba6fcc6e45
5
5
  SHA512:
6
- metadata.gz: 47d296a7d90be6d0bf8794e68c3042a7ed5f1a70e0acabbef88a2f094e485a59910b96ee212e4ae77cf24695621f28ff149dfb2f444d839a4e5905e8e40d25d2
7
- data.tar.gz: db4e16e23b4ef0c65e1ba0457e99b7acf8ac95b403187e7dcf36692e2a4e5d678f8733655e5b8fbadecb00755a3b395dc3cd7d7c6247ce32260de6f6ee3ee3ff
6
+ metadata.gz: 16cbb49509d19431d5dba889847c350c5720b471452a62d5452de2ce454376826edc37628b5b65711255dbe4bd50357f7b7c0d158b2c595b15685db974e11607
7
+ data.tar.gz: aea1f3880d89157176c509eba04c7a79d9fd443e9f8ca8d5e3f40960e27ed94e100c69bfde39c86bba76471e76d6afca4f6ed7919d398e35b076a4ef5f659309
@@ -1,4 +1,46 @@
1
- # 0.0.6
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
- ## Breaking changes
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
- # 0.0.5
65
+ ## 0.0.5
26
66
 
27
67
  * Add support for box_shadow
28
68
  * Add components:
29
- * Popover
69
+ * Popover
30
70
 
31
71
  *Sarah Vessels*
32
72
 
33
- # 0.0.4
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
- # 0.0.3
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
- * Avatar
50
- * Blankslate
90
+ * Avatar
91
+ * Blankslate
51
92
 
52
93
  *Manuel Puyol, Ben Emdon*
53
94
 
54
- # 0.0.1
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
- * BorderBox
70
- * Box
71
- * Breadcrumb
72
- * Button
73
- * Counter
74
- * Details
75
- * Dropdown
76
- * Flex
77
- * FlexItem
78
- * Heading
79
- * Label
80
- * Layout
81
- * Link
82
- * ProgressBar
83
- * State
84
- * Subhead
85
- * Text
86
- * TimelineItem
87
- * UnderlineNav
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
- ## Design philosophy
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.public_send(
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
- <%= octicon @icon, height: @icon_height, class: "blankslate-icon" %>
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
- <<%= @title_tag %> class="mb-1"><%= @title %></<%= @title_tag %>>
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
- # Blankslates are for when there is a lack of content within a page or section. Use them as placeholders to tell users why something isn't there.
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
- # required
118
- title:,
119
-
120
- # optional
72
+ title: "",
121
73
  title_tag: :h3,
122
74
  icon: "",
123
- icon_height: 32,
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] = :div
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
- @icon_height = icon_height
104
+ @icon_size = icon_size
153
105
  @image_src = image_src
154
106
  @image_alt = image_alt
155
107
  @title = title