primer_view_components 0.0.29 → 0.0.34

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 (48) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +66 -0
  3. data/README.md +2 -2
  4. data/app/components/primer/auto_complete_component.rb +0 -2
  5. data/app/components/primer/auto_complete_item_component.rb +0 -2
  6. data/app/components/primer/avatar_stack_component.rb +0 -2
  7. data/app/components/primer/base_component.rb +115 -83
  8. data/app/components/primer/blankslate_component.html.erb +1 -1
  9. data/app/components/primer/blankslate_component.rb +0 -2
  10. data/app/components/primer/border_box_component.rb +0 -2
  11. data/app/components/primer/breadcrumb_component.rb +0 -1
  12. data/app/components/primer/button_component.rb +11 -11
  13. data/app/components/primer/button_group_component.rb +3 -5
  14. data/app/components/primer/button_marketing_component.rb +12 -12
  15. data/app/components/primer/component.rb +2 -0
  16. data/app/components/primer/details_component.rb +0 -1
  17. data/app/components/primer/dropdown/menu_component.rb +0 -2
  18. data/app/components/primer/dropdown_component.rb +0 -2
  19. data/app/components/primer/flash_component.html.erb +2 -2
  20. data/app/components/primer/flash_component.rb +10 -12
  21. data/app/components/primer/layout_component.rb +0 -2
  22. data/app/components/primer/link_component.rb +9 -9
  23. data/app/components/primer/menu_component.rb +2 -4
  24. data/app/components/primer/navigation/tab_component.html.erb +9 -0
  25. data/app/components/primer/navigation/tab_component.rb +102 -0
  26. data/app/components/primer/octicon_component.rb +5 -4
  27. data/app/components/primer/popover_component.rb +19 -3
  28. data/app/components/primer/progress_bar_component.rb +0 -1
  29. data/app/components/primer/spinner_component.html.erb +1 -3
  30. data/app/components/primer/spinner_component.rb +1 -0
  31. data/app/components/primer/state_component.rb +13 -13
  32. data/app/components/primer/subhead_component.rb +1 -3
  33. data/app/components/primer/tab_nav_component.html.erb +9 -11
  34. data/app/components/primer/tab_nav_component.rb +46 -73
  35. data/app/components/primer/time_ago_component.rb +2 -1
  36. data/app/components/primer/timeline_item_component.rb +1 -2
  37. data/app/components/primer/underline_nav_component.html.erb +19 -7
  38. data/app/components/primer/underline_nav_component.rb +80 -14
  39. data/app/lib/primer/classify.rb +5 -14
  40. data/app/lib/primer/classify/cache.rb +14 -4
  41. data/app/lib/primer/classify/functional_colors.rb +8 -6
  42. data/app/lib/primer/classify/spacing.rb +63 -0
  43. data/app/lib/primer/tabbed_component_helper.rb +35 -0
  44. data/app/lib/primer/view_helper.rb +2 -2
  45. data/lib/primer/view_components/version.rb +1 -1
  46. data/static/statuses.json +1 -1
  47. metadata +6 -3
  48. data/app/components/primer/slot.rb +0 -10
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2551f777382449acbc64d2035d8b906d1590257cbb1914e7d5fb0255d413259f
4
- data.tar.gz: 2a61871e5659d9a0f43a61e23281fa0ff2148ebc93dd55a4402d932a23757fbe
3
+ metadata.gz: b3251ede218a760e400098f3aab65c1f4bb91dedcc780efa32d0f7b814f35a7c
4
+ data.tar.gz: 32676c086a6e0ad4c585fa5cc5ddbe6b5296451974f4f892afb24786886bd8e0
5
5
  SHA512:
6
- metadata.gz: 2ad8995514cd8922ee4b71265ab098a2bbb1f8f46f6b146b5d8a735a98b1bdfa1ccd2d934a5c0b0916a9857a6cf4e26c0adbefae17bebe9dd61cd0e8e9a35f87
7
- data.tar.gz: 0f53a20697d391add39c71a06d219568c6104ba5e9e72e0638b10fa581fe7b305f645a9b3db4898cdee427efbc6d06a5faa59b05608a21b7b9b188972a2cd728
6
+ metadata.gz: b67005b172fc5b314bcd8f18a4340ca4b7c33e6eb88d4b469714fac0c25a5ca82819205c70e3bd3bdd21edb6c3a3bf56870bea68eb61a09c931a7cada5614f5c
7
+ data.tar.gz: b84b0c68ed718fdb8af16748215c763c87a3f26bea3d5e6ecd0e15d682f50d7849bac2290ebb0023d4770aa5ef47211b31f2f94f5590401410afa6ea2cda193a
data/CHANGELOG.md CHANGED
@@ -2,6 +2,72 @@
2
2
 
3
3
  ## main
4
4
 
5
+ ## 0.0.34
6
+
7
+ * Add `p: :responsive` and `m: :auto` system arguments.
8
+
9
+ *Manuel Puyol*
10
+
11
+ * Remove `my: :auto` and negative `m:` system arguments.
12
+
13
+ *Manuel Puyol*
14
+
15
+ * **Breaking change**: Rename `FlashComponent` `variant` argument to `scheme`.
16
+
17
+ *Manuel Puyol*
18
+
19
+ * **Breaking change**: Rename `LinkComponent` `variant` argument to `scheme`.
20
+
21
+ *Manuel Puyol*
22
+
23
+ * **Breaking change**: Rename `ButtonComponent` `button_type` argument to `scheme`.
24
+
25
+ *Manuel Puyol*
26
+
27
+ * **Breaking change**: Rename `ButtonMarketingComponent` `button_type` argument to `scheme`.
28
+
29
+ *Manuel Puyol*
30
+
31
+ * **Breaking change**: Rename `StateComponent` `color` argument to `scheme`.
32
+
33
+ *Manuel Puyol*
34
+
35
+ ## 0.0.33
36
+
37
+ * Remove `TabbedComponent` validation requiring a tab to be selected.
38
+
39
+ *Manuel Puyol*
40
+
41
+ ## 0.0.32
42
+
43
+ * Allow passing the icon name as a positional argument to `OcticonComponent`.
44
+
45
+ *Manuel Puyol*
46
+
47
+ * Promote `TimeAgoComponent` to beta.
48
+
49
+ *Manuel Puyol*
50
+
51
+ * **Breaking change**: Update `TabNav#tab` API to accept the tab content as a block and panel content as a slot.
52
+
53
+ *Manuel Puyol*
54
+
55
+ * **Breaking change**: Update `UnderlineNavComponent` API be more strict and support `TabContainer`.
56
+
57
+ *Manuel Puyol*
58
+
59
+ ## 0.0.31
60
+
61
+ * Fix `Popover` bug where body was only returning the last line of the HTML.
62
+
63
+ *Manuel Puyol, Blake Williams*
64
+
65
+ ## 0.0.30
66
+
67
+ * Make `color:`, `bg:` and `border_color:` accept string values.
68
+
69
+ *Manuel Puyol*
70
+
5
71
  ## 0.0.29
6
72
 
7
73
  * Add `primer_time_ago` helper.
data/README.md CHANGED
@@ -1,12 +1,12 @@
1
1
  <p align="center">
2
- <img width="300px" src="/static/assets/readme-components.png">
2
+ <img width="300px" src="/static/assets/view-components.svg">
3
3
  </p>
4
4
 
5
5
  <h1 align="center">Primer ViewComponents</h1>
6
6
 
7
7
  <p align="center">ViewComponents for the Primer Design System</p>
8
8
 
9
- _Note: This library is in pre-release development and should not be considered stable._
9
+ _Note: This library is under active pre-1.0 development. Breaking changes are likely in patch releases._
10
10
 
11
11
  ## Documentation
12
12
 
@@ -3,8 +3,6 @@
3
3
  module Primer
4
4
  # Use AutoComplete to populate input values from server search results.
5
5
  class AutoCompleteComponent < Primer::Component
6
- include ViewComponent::SlotableV2
7
-
8
6
  DEFAULT_INPUT_TYPE = :text
9
7
  INPUT_TYPE_OPTIONS = [DEFAULT_INPUT_TYPE, :search].freeze
10
8
 
@@ -3,8 +3,6 @@
3
3
  module Primer
4
4
  # Use AutoCompleteItem to list results of an auto-completed search.
5
5
  class AutoCompleteItemComponent < Primer::Component
6
- include ViewComponent::SlotableV2
7
-
8
6
  # @example Default
9
7
  # <%= render(Primer::AutoCompleteItemComponent.new(selected: true, value: "value")) do |c| %>
10
8
  # Selected
@@ -3,8 +3,6 @@
3
3
  module Primer
4
4
  # Use AvatarStack to stack multiple avatars together.
5
5
  class AvatarStackComponent < Primer::Component
6
- include ViewComponent::SlotableV2
7
-
8
6
  ALIGN_DEFAULT = :left
9
7
  ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
10
8
 
@@ -22,94 +22,126 @@ module Primer
22
22
  # ```html
23
23
  # <h1 class="mt-0 mt-lg-4 mt-xl-2">Hello world</h1>
24
24
  # ```
25
- #
26
- # ## HTML attributes
27
- #
28
- # System arguments include most HTML attributes. For example:
29
- #
30
- # | Name | Type | Description |
31
- # | :- | :- | :- |
32
- # | `width` | `Integer` | Width. |
33
- # | `height` | `Integer` | Height. |
34
- # | `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |
35
- # | `aria` | `Hash` | Aria attributes: `aria: { label: "foo" }` renders `aria-label='foo'`. |
36
- # | `title` | `String` | The `title` attribute. |
37
- # | `style` | `String` | Inline styles. |
38
- # | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |
39
25
  class BaseComponent < Primer::Component
40
26
  status :beta
41
27
 
42
28
  include TestSelectorHelper
43
29
 
44
- # @param test_selector [String] Adds `data-test-selector='given value'` in non-Production environments for testing purposes.
45
- #
46
- # @param m [Integer] Margin. <%= one_of((-6..6).to_a) %>
47
- # @param mt [Integer] Margin top. <%= one_of((-6..6).to_a) %>
48
- # @param mr [Integer] Margin right. <%= one_of((-6..6).to_a) %>
49
- # @param mb [Integer] Margin bottom. <%= one_of((-6..6).to_a) %>
50
- # @param ml [Integer] Margin left. <%= one_of((-6..6).to_a) %>
51
- # @param mx [Integer] Horizontal margins. <%= one_of((-6..6).to_a + [:auto]) %>
52
- # @param my [Integer] Vertical margins. <%= one_of((-6..6).to_a) %>
53
- # @param p [Integer] Padding. <%= one_of((0..6).to_a) %>
54
- # @param pt [Integer] Padding left. <%= one_of((0..6).to_a) %>
55
- # @param pr [Integer] Padding right. <%= one_of((0..6).to_a) %>
56
- # @param pb [Integer] Padding bottom. <%= one_of((0..6).to_a) %>
57
- # @param pl [Integer] Padding left. <%= one_of((0..6).to_a) %>
58
- # @param px [Integer] Horizontal padding. <%= one_of((0..6).to_a) %>
59
- # @param py [Integer] Vertical padding. <%= one_of((0..6).to_a) %>
60
- #
61
- # @param position [Symbol] <%= one_of([:relative, :absolute, :fixed]) %>
62
- #
63
- # @param top [Boolean] If `false`, sets `top: 0`.
64
- # @param right [Boolean] If `false`, sets `right: 0`.
65
- # @param bottom [Boolean] If `false`, sets `bottom: 0`.
66
- # @param left [Boolean] If `false`, sets `left: 0`.
67
- #
68
- # @param display [Symbol] <%= one_of([:none, :block, :flex, :inline, :inline_block, :table, :table_cell]) %>
69
- #
70
- # @param v [Symbol] Visibility. <%= one_of([:hidden, :visible]) %>
71
- #
72
- # @param hide [Symbol] Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %>
73
- #
74
- # @param vertical_align [Symbol] <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %>
75
- #
76
- # @param float [Symbol] <%= one_of([:left, :right]) %>
77
- #
78
- # @param col [Integer] Number of columns.
79
- #
80
- # @param underline [Boolean] Whether text should be underlined.
81
- #
82
- # @param color [Symbol] Text color. <br /> <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> <br /> Deprecated options: <%= one_of(Primer::Classify::FunctionalTextColors::DEPRECATED_OPTIONS) %>
83
- # @param bg [String, Symbol] Background color. Accepts either a hex value as a String or a color name as a Symbol.
84
- #
85
- # @param box_shadow [Boolean, Symbol] Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %>
86
- # @param border [Symbol] <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %>
87
- # @param border_color [Symbol] <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> <br /> Deprecated options: <%= one_of(Primer::Classify::FunctionalBorderColors::DEPRECATED_OPTIONS) %>
88
- # @param border_top [Integer] Set to `0` to remove the top border.
89
- # @param border_bottom [Integer] Set to `0` to remove the bottom border.
90
- # @param border_left [Integer] Set to `0` to remove the left border.
91
- # @param border_right [Integer] Set to `0` to remove the right border.
92
- # @param border_radius [Integer] <%= one_of([0, 1, 2, 3]) %>
93
- #
94
- # @param font_size [String, Integer] <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %>
95
- # @param text_align [Symbol] Text alignment. <%= one_of([:left, :right, :center]) %>
96
- # @param font_weight [Symbol] Font weight. <%= one_of([:light, :normal, :bold]) %>
97
- #
98
- # @param flex [Integer, Symbol] <%= one_of([1, :auto]) %>
99
- # @param flex_grow [Integer] To enable, set to `0`.
100
- # @param flex_shrink [Integer] To enable, set to `0`.
101
- # @param align_self [Symbol] <%= one_of([:auto, :start, :end, :center, :baseline, :stretch]) %>
102
- # @param justify_content [Symbol] <%= one_of([:flex_start, :flex_end, :center, :space_between, :space_around]) %>
103
- # @param align_items [Symbol] <%= one_of([:flex_start, :flex_end, :center, :baseline, :stretch]) %>
104
- # @param width [Symbol] <%= one_of([:fit, :fill]) %>
105
- # @param height [Symbol] <%= one_of([:fit, :fill]) %>
106
- #
107
- # @param word_break [Symbol] Whether to break words on line breaks. Can only be `:break_all`.
108
- #
109
- # @param animation [Symbol] <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %>
110
- #
111
- # @param tag [Symbol] HTML tag name to be passed to `tag.send`.
112
- # @param classes [String] CSS class name value to be concatenated with generated Primer CSS classes.
30
+ # ## HTML attributes
31
+ #
32
+ # System arguments include most HTML attributes. For example:
33
+ #
34
+ # | Name | Type | Description |
35
+ # | :- | :- | :- |
36
+ # | `aria` | `Hash` | Aria attributes: `aria: { label: "foo" }` renders `aria-label='foo'`. |
37
+ # | `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |
38
+ # | `height` | `Integer` | Height. |
39
+ # | `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |
40
+ # | `style` | `String` | Inline styles. |
41
+ # | `title` | `String` | The `title` attribute. |
42
+ # | `width` | `Integer` | Width. |
43
+ #
44
+ # ## Animation
45
+ #
46
+ # | Name | Type | Description |
47
+ # | :- | :- | :- |
48
+ # | `animation` | Symbol | <%= one_of([:fade_in, :fade_out, :fade_up, :fade_down, :scale_in, :pulse, :grow_x, :grow]) %> |
49
+ #
50
+ # ## Border
51
+ #
52
+ # | Name | Type | Description |
53
+ # | :- | :- | :- |
54
+ # | `border_bottom` | Integer | Set to `0` to remove the bottom border. |
55
+ # | `border_left` | Integer | Set to `0` to remove the left border. |
56
+ # | `border_radius` | Integer | <%= one_of([0, 1, 2, 3]) %> |
57
+ # | `border_right` | Integer | Set to `0` to remove the right border. |
58
+ # | `border_top` | Integer | Set to `0` to remove the top border. |
59
+ # | `border` | Symbol | <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %> |
60
+ # | `box_shadow` | Boolean, Symbol | Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %> |
61
+ #
62
+ # ## Color
63
+ #
64
+ # | Name | Type | Description |
65
+ # | :- | :- | :- |
66
+ # | `bg` | String, Symbol | Background color. Accepts either a hex value as a String or <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS, lower: true) %> |
67
+ # | `border_color` | Symbol | Border color. <%= one_of(Primer::Classify::FunctionalBorderColors::OPTIONS) %> |
68
+ # | `color` | Symbol | Text color. <%= one_of(Primer::Classify::FunctionalTextColors::OPTIONS) %> |
69
+ #
70
+ # ## Flex
71
+ #
72
+ # | Name | Type | Description |
73
+ # | :- | :- | :- |
74
+ # | `align_items` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :baseline, :stretch]) %> |
75
+ # | `align_self` | Symbol | <%= one_of([:auto, :start, :end, :center, :baseline, :stretch]) %> |
76
+ # | `flex_grow` | Integer | To enable, set to `0`. |
77
+ # | `flex_shrink` | Integer | To enable, set to `0`. |
78
+ # | `flex` | Integer, Symbol | <%= one_of([1, :auto]) %> |
79
+ # | `justify_content` | Symbol | <%= one_of([:flex_start, :flex_end, :center, :space_between, :space_around]) %> |
80
+ # | `width` | Symbol | <%= one_of([:fit, :fill]) %> |
81
+ #
82
+ # ## Grid
83
+ #
84
+ # | Name | Type | Description |
85
+ # | :- | :- | :- |
86
+ # | `col` | Integer | Number of columns. |
87
+ #
88
+ # ## Layout
89
+ #
90
+ # | Name | Type | Description |
91
+ # | :- | :- | :- |
92
+ # | `display` | Symbol | <%= one_of([:none, :block, :flex, :inline, :inline_block, :table, :table_cell]) %> |
93
+ # | `height` | Symbol | <%= one_of([:fit, :fill]) %> |
94
+ # | `hide` | Symbol | Hide the element at a specific breakpoint. <%= one_of([:sm, :md, :lg, :xl]) %> |
95
+ # | `v` | Symbol | Visibility. <%= one_of([:hidden, :visible]) %> |
96
+ # | `vertical_align` | Symbol | <%= one_of([:baseline, :top, :middle, :bottom, :text_top, :text_bottom]) %> |
97
+ #
98
+ # ## Position
99
+ #
100
+ # | Name | Type | Description |
101
+ # | :- | :- | :- |
102
+ # | `bottom` | Boolean | If `false`, sets `bottom: 0`. |
103
+ # | `float` | Symbol | <%= one_of([:left, :right]) %> |
104
+ # | `left` | Boolean | If `false`, sets `left: 0`. |
105
+ # | `position` | Symbol | <%= one_of([:relative, :absolute, :fixed]) %> |
106
+ # | `right` | Boolean | If `false`, sets `right: 0`. |
107
+ # | `top` | Boolean | If `false`, sets `top: 0`. |
108
+ #
109
+ # ## Spacing
110
+ #
111
+ # | Name | Type | Description |
112
+ # | :- | :- | :- |
113
+ # | `m` | Integer | Margin. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:m]) %> |
114
+ # | `mb` | Integer | Margin bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mb]) %> |
115
+ # | `ml` | Integer | Margin left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:ml]) %> |
116
+ # | `mr` | Integer | Margin right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mr]) %> |
117
+ # | `mt` | Integer | Margin top. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mt]) %> |
118
+ # | `mx` | Integer | Horizontal margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:mx]) %> |
119
+ # | `my` | Integer | Vertical margins. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:my]) %> |
120
+ # | `p` | Integer | Padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:p]) %> |
121
+ # | `pb` | Integer | Padding bottom. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pb]) %> |
122
+ # | `pl` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pl]) %> |
123
+ # | `pr` | Integer | Padding right. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pr]) %> |
124
+ # | `pt` | Integer | Padding left. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:pt]) %> |
125
+ # | `px` | Integer | Horizontal padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:px]) %> |
126
+ # | `py` | Integer | Vertical padding. <%= one_of(Primer::Classify::Spacing::MAPPINGS[:py]) %> |
127
+ #
128
+ # ## Typography
129
+ #
130
+ # | Name | Type | Description |
131
+ # | :- | :- | :- |
132
+ # | `font_size` | String, Integer | <%= one_of(["00", 0, 1, 2, 3, 4, 5, 6]) %> |
133
+ # | `font_weight` | Symbol | Font weight. <%= one_of([:light, :normal, :bold]) %> |
134
+ # | `text_align` | Symbol | Text alignment. <%= one_of([:left, :right, :center]) %> |
135
+ # | `underline` | Boolean | Whether text should be underlined. |
136
+ # | `word_break` | Symbol | Whether to break words on line breaks. Can only be `:break_all`. |
137
+ #
138
+ # ## Other
139
+ #
140
+ # | Name | Type | Description |
141
+ # | :- | :- | :- |
142
+ # | classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |
143
+ # | tag | Symbol | HTML tag name to be passed to `content_tag`. |
144
+ # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
113
145
  def initialize(tag:, classes: nil, **system_arguments)
114
146
  @tag = tag
115
147
  @result = Primer::Classify.call(**system_arguments.merge(classes: classes))
@@ -2,7 +2,7 @@
2
2
  <% if spinner.present? %>
3
3
  <%= spinner %>
4
4
  <% elsif @icon.present? %>
5
- <%= primer_octicon icon: @icon, size: @icon_size, classes: "blankslate-icon" %>
5
+ <%= primer_octicon @icon, size: @icon_size, classes: "blankslate-icon" %>
6
6
  <% elsif @image_src.present? && @image_alt.present? %>
7
7
  <%= image_tag "#{@image_src}", class: "mb-3", size: "56x56", alt: "#{@image_alt}" %>
8
8
  <% end %>
@@ -5,8 +5,6 @@ module Primer
5
5
  class BlankslateComponent < Primer::Component
6
6
  status :beta
7
7
 
8
- include ViewComponent::SlotableV2
9
-
10
8
  # Optional Spinner.
11
9
  #
12
10
  # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::SpinnerComponent) %>.
@@ -5,8 +5,6 @@ module Primer
5
5
  class BorderBoxComponent < Primer::Component
6
6
  status :beta
7
7
 
8
- include ViewComponent::SlotableV2
9
-
10
8
  DEFAULT_PADDING = :default
11
9
  PADDING_MAPPINGS = {
12
10
  DEFAULT_PADDING => "",
@@ -3,7 +3,6 @@
3
3
  module Primer
4
4
  # Use breadcrumbs to display page hierarchy within a section of the site. All of the items in the breadcrumb "trail" are links except for the final item, which is a plain string indicating the current page.
5
5
  class BreadcrumbComponent < Primer::Component
6
- include ViewComponent::SlotableV2
7
6
  status :beta
8
7
 
9
8
  # _Note: if both `href` and `selected: true` are passed in, `href` will be ignored and the item will not be rendered as a link._
@@ -3,14 +3,14 @@
3
3
  module Primer
4
4
  # Use buttons for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
5
5
  class ButtonComponent < Primer::Component
6
- DEFAULT_BUTTON_TYPE = :default
7
- BUTTON_TYPE_MAPPINGS = {
8
- DEFAULT_BUTTON_TYPE => "",
6
+ DEFAULT_SCHEME = :default
7
+ SCHEME_MAPPINGS = {
8
+ DEFAULT_SCHEME => "",
9
9
  :primary => "btn-primary",
10
10
  :danger => "btn-danger",
11
11
  :outline => "btn-outline"
12
12
  }.freeze
13
- BUTTON_TYPE_OPTIONS = BUTTON_TYPE_MAPPINGS.keys
13
+ SCHEME_OPTIONS = SCHEME_MAPPINGS.keys
14
14
 
15
15
  DEFAULT_VARIANT = :medium
16
16
  VARIANT_MAPPINGS = {
@@ -26,24 +26,24 @@ module Primer
26
26
  DEFAULT_TYPE = :button
27
27
  TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
28
28
 
29
- # @example Button types
29
+ # @example Schemes
30
30
  # <%= render(Primer::ButtonComponent.new) { "Default" } %>
31
- # <%= render(Primer::ButtonComponent.new(button_type: :primary)) { "Primary" } %>
32
- # <%= render(Primer::ButtonComponent.new(button_type: :danger)) { "Danger" } %>
33
- # <%= render(Primer::ButtonComponent.new(button_type: :outline)) { "Outline" } %>
31
+ # <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Primary" } %>
32
+ # <%= render(Primer::ButtonComponent.new(scheme: :danger)) { "Danger" } %>
33
+ # <%= render(Primer::ButtonComponent.new(scheme: :outline)) { "Outline" } %>
34
34
  #
35
35
  # @example Variants
36
36
  # <%= render(Primer::ButtonComponent.new(variant: :small)) { "Small" } %>
37
37
  # <%= render(Primer::ButtonComponent.new(variant: :medium)) { "Medium" } %>
38
38
  # <%= render(Primer::ButtonComponent.new(variant: :large)) { "Large" } %>
39
39
  #
40
- # @param button_type [Symbol] <%= one_of(Primer::ButtonComponent::BUTTON_TYPE_OPTIONS) %>
40
+ # @param scheme [Symbol] <%= one_of(Primer::ButtonComponent::SCHEME_OPTIONS) %>
41
41
  # @param variant [Symbol] <%= one_of(Primer::ButtonComponent::VARIANT_OPTIONS) %>
42
42
  # @param tag [Symbol] <%= one_of(Primer::ButtonComponent::TAG_OPTIONS) %>
43
43
  # @param type [Symbol] <%= one_of(Primer::ButtonComponent::TYPE_OPTIONS) %>
44
44
  # @param group_item [Boolean] Whether button is part of a ButtonGroup.
45
45
  def initialize(
46
- button_type: DEFAULT_BUTTON_TYPE,
46
+ scheme: DEFAULT_SCHEME,
47
47
  variant: DEFAULT_VARIANT,
48
48
  tag: DEFAULT_TAG,
49
49
  type: DEFAULT_TYPE,
@@ -62,7 +62,7 @@ module Primer
62
62
  @system_arguments[:classes] = class_names(
63
63
  "btn",
64
64
  system_arguments[:classes],
65
- BUTTON_TYPE_MAPPINGS[fetch_or_fallback(BUTTON_TYPE_OPTIONS, button_type, DEFAULT_BUTTON_TYPE)],
65
+ SCHEME_MAPPINGS[fetch_or_fallback(SCHEME_OPTIONS, scheme, DEFAULT_SCHEME)],
66
66
  VARIANT_MAPPINGS[fetch_or_fallback(VARIANT_OPTIONS, variant, DEFAULT_VARIANT)],
67
67
  "BtnGroup-item" => group_item
68
68
  )
@@ -3,8 +3,6 @@
3
3
  module Primer
4
4
  # Use ButtonGroupComponent to render a series of buttons.
5
5
  class ButtonGroupComponent < Primer::Component
6
- include ViewComponent::SlotableV2
7
-
8
6
  # Required list of buttons to be rendered.
9
7
  #
10
8
  # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %>.
@@ -13,9 +11,9 @@ module Primer
13
11
  # @example Default
14
12
  # <%= render(Primer::ButtonGroupComponent.new) do |component|
15
13
  # component.button { "Default" }
16
- # component.button(button_type: :primary) { "Primary" }
17
- # component.button(button_type: :danger) { "Danger" }
18
- # component.button(button_type: :outline) { "Outline" }
14
+ # component.button(scheme: :primary) { "Primary" }
15
+ # component.button(scheme: :danger) { "Danger" }
16
+ # component.button(scheme: :outline) { "Outline" }
19
17
  # component.button(classes: "my-class") { "Custom class" }
20
18
  # end %>
21
19
  #