primer_view_components 0.0.19 → 0.0.24

Sign up to get free protection for your applications and to get access to all the features.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +78 -1
  3. data/app/assets/javascripts/primer_view_components.js +2 -0
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -0
  5. data/app/components/primer/avatar_component.rb +7 -7
  6. data/app/components/primer/avatar_stack_component.rb +3 -3
  7. data/app/components/primer/base_component.rb +1 -1
  8. data/app/components/primer/blankslate_component.html.erb +3 -3
  9. data/app/components/primer/blankslate_component.rb +16 -24
  10. data/app/components/primer/border_box_component.html.erb +4 -18
  11. data/app/components/primer/border_box_component.rb +58 -67
  12. data/app/components/primer/box_component.rb +2 -2
  13. data/app/components/primer/breadcrumb_component.html.erb +1 -2
  14. data/app/components/primer/breadcrumb_component.rb +24 -13
  15. data/app/components/primer/button_component.rb +2 -2
  16. data/app/components/primer/button_group_component.rb +1 -1
  17. data/app/components/primer/button_marketing_component.rb +2 -2
  18. data/app/components/primer/component.rb +4 -0
  19. data/app/components/primer/counter_component.rb +1 -1
  20. data/app/components/primer/details_component.html.erb +2 -6
  21. data/app/components/primer/details_component.rb +22 -35
  22. data/app/components/primer/dropdown_component.html.erb +2 -2
  23. data/app/components/primer/dropdown_component.rb +4 -6
  24. data/app/components/primer/dropdown_menu_component.rb +4 -4
  25. data/app/components/primer/flash_component.html.erb +4 -7
  26. data/app/components/primer/flash_component.rb +16 -20
  27. data/app/components/primer/flex_component.rb +4 -4
  28. data/app/components/primer/flex_item_component.rb +1 -1
  29. data/app/components/primer/heading_component.rb +3 -1
  30. data/app/components/primer/label_component.rb +15 -25
  31. data/app/components/primer/layout_component.rb +2 -2
  32. data/app/components/primer/link_component.rb +2 -2
  33. data/app/components/primer/markdown_component.rb +8 -8
  34. data/app/components/primer/menu_component.rb +1 -1
  35. data/app/components/primer/octicon_component.rb +5 -3
  36. data/app/components/primer/popover_component.rb +3 -3
  37. data/app/components/primer/primer.js +1 -0
  38. data/app/components/primer/primer.ts +1 -0
  39. data/app/components/primer/progress_bar_component.html.erb +1 -1
  40. data/app/components/primer/progress_bar_component.rb +27 -31
  41. data/app/components/primer/spinner_component.rb +3 -3
  42. data/app/components/primer/state_component.rb +21 -10
  43. data/app/components/primer/subhead_component.html.erb +3 -15
  44. data/app/components/primer/subhead_component.rb +45 -61
  45. data/app/components/primer/tab_container_component.js +1 -0
  46. data/app/components/primer/tab_container_component.rb +41 -0
  47. data/app/components/primer/tab_container_component.ts +1 -0
  48. data/app/components/primer/tab_nav_component.html.erb +17 -0
  49. data/app/components/primer/tab_nav_component.rb +108 -0
  50. data/app/components/primer/text_component.rb +1 -1
  51. data/app/components/primer/timeline_item_component.html.erb +4 -16
  52. data/app/components/primer/timeline_item_component.rb +41 -52
  53. data/app/components/primer/tooltip_component.rb +5 -5
  54. data/app/components/primer/truncate_component.rb +4 -4
  55. data/app/components/primer/underline_nav_component.rb +2 -2
  56. data/{lib → app/lib}/primer/class_name_helper.rb +0 -0
  57. data/{lib → app/lib}/primer/classify.rb +1 -3
  58. data/{lib → app/lib}/primer/classify/cache.rb +0 -0
  59. data/{lib → app/lib}/primer/fetch_or_fallback_helper.rb +0 -0
  60. data/{lib → app/lib}/primer/join_style_arguments_helper.rb +0 -0
  61. data/app/lib/primer/view_helper.rb +22 -0
  62. data/app/lib/primer/view_helper/dsl.rb +34 -0
  63. data/lib/primer/view_components/engine.rb +10 -2
  64. data/lib/primer/view_components/version.rb +5 -1
  65. data/static/statuses.json +1 -1
  66. metadata +18 -8
  67. data/app/components/primer/view_components.rb +0 -60
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2123d6cd3a227f0cf3df93cc601098dc6e6b0b59ba98bbc589ccdd6a4c8b0b4f
4
- data.tar.gz: b8b5075b18d79f10a385bb51b6f2d17d324a10fb3c5c5c961e841f96713a8c59
3
+ metadata.gz: fbd4dec44b8225065e2087b90d0e1fb26c9a883635129c2161c3feaf6a72decc
4
+ data.tar.gz: b441554ed718efc5d0884a7cabcc05c1aba7ad07e1eb269c4772a11dc7baeff3
5
5
  SHA512:
6
- metadata.gz: b5ce375e1b8fa9d95cd784ea19565a6bfeb1024db7fdc5e010995f2a7085f5b03cfa163979c7b33648eacfd986b4339b1ca1bdba06e5ba581b8b20a006935d62
7
- data.tar.gz: 0d6124a56d36eb09075d4be8bc50b8d1e061c2e9137c030733f6b875488f3f15e0939dd5692116e7f2d29cc7ac81ed6adc5f27cdb442e57ad44b8d456e5c60cc
6
+ metadata.gz: 89b5aa5fb510b720756782bde172a510c039c0a5907f1225a433d4ff39eeea9ad92149fe9ba473796dfd33997650c9a791171e16e451925038316c20f0df9079
7
+ data.tar.gz: 6b0dc8e39581f66a08689206ada93f1791f14b26f3b5ac851e340ba403ad1fdeec9bb26d6d37c04c5f3d25d924c2d4ceb7eb0df60fc5e0e6322c9c507bf2fcae
data/CHANGELOG.md CHANGED
@@ -1,12 +1,89 @@
1
1
  # CHANGELOG
2
2
 
3
3
  ## main
4
+
5
+ ## 0.0.24
6
+
7
+ * Fix zeitwerk autoload integration.
8
+
9
+ *Manuel Puyol*
10
+
11
+ * **Breaking change**: Upgrade `ProgressBarComponent` to use Slots V2.
12
+
13
+ *Simon Taranto*
14
+
15
+ * **Breaking change**: Upgrade `BreadcrumbComponent` to use Slots V2.
16
+
17
+ *Manuel Puyol*
18
+
19
+ ## 0.0.23
20
+
21
+ * Remove node and yarn version requirements from `@primer/view-components`.
22
+
23
+ *Manuel Puyol*
24
+
25
+ * **Breaking change**: Upgrade `SubheadComponent` to use Slots V2.
26
+
27
+ *Simon Taranto*
28
+
29
+ * **Breaking change**: Update `LabelComponent` to use only functional color
30
+ supportive scheme keys. The component no longer accepts colors (`:gray`, for
31
+ example) but only functional schemes (`primary`, for example).
32
+ `LabelComponent` is promoted to beta status.
33
+
34
+ *Simon Taranto*
35
+
36
+ ## 0.0.22
37
+
38
+ * Add view helpers to easily render Primer components.
39
+
40
+ *Manuel Puyol*
41
+
42
+ * Add `TabContainer` and `TabNav` components.
43
+
44
+ *Manuel Puyol*
45
+
46
+ * Promote `StateComponent` to beta.
47
+
48
+ *Simon Taranto*
49
+
50
+ * **Breaking change**: Upgrade `BorderBoxComponent` to use Slots V2.
51
+
52
+ *Manuel Puyol*
53
+
54
+ * **Breaking change**: Upgrade `StateComponent` to support functional colors. This change requires using [@primer/css-next](https://www.npmjs.com/package/@primer/css-next). The required changes will be upstreamed to @primer/css at a later date.
55
+
56
+ *Simon Taranto*
57
+
58
+ * **Breaking change**: Upgrade `DetailsComponent` to use Slots V2.
59
+
60
+ *Simon Taranto*
61
+
62
+ ## 0.0.21
63
+
64
+ * **Breaking change**: Upgrade `FlashComponent` to use Slots V2.
65
+
66
+ *Joel Hawksley, Simon Taranto*
67
+
68
+ * **Breaking change**: Upgrade `BlankslateComponent` to use Slots V2.
69
+
70
+ *Manuel Puyol*
71
+
72
+ * **Breaking change**: Upgrade `TimelineItemComponent` to use Slots V2.
73
+
74
+ *Manuel Puyol*
75
+
76
+ ## 0.0.20
77
+
78
+ * Fix bug when empty string was passed to Classify.
79
+
80
+ *Manuel Puyol*
4
81
 
5
82
  ## 0.0.19
6
83
 
7
84
  * Add support for functional colors to `color` system argument.
8
85
 
9
- *Jake Shorty
86
+ *Jake Shorty*
10
87
 
11
88
  * Add `AvatarStack`, `Dropdown`, `Markdown` and `Menu` components.
12
89
 
@@ -0,0 +1,2 @@
1
+ class t extends HTMLElement{constructor(){super(),this.addEventListener("keydown",(t=>{const r=t.target;if(!(r instanceof HTMLElement))return;if("tab"!==r.getAttribute("role")&&!r.closest('[role="tablist"]'))return;const a=Array.from(this.querySelectorAll('[role="tablist"] [role="tab"]')),n=a.indexOf(a.find((t=>t.matches('[aria-selected="true"]'))));if("ArrowRight"===t.code){let t=n+1;t>=a.length&&(t=0),e(this,t)}else if("ArrowLeft"===t.code){let t=n-1;t<0&&(t=a.length-1),e(this,t)}else"Home"===t.code?(e(this,0),t.preventDefault()):"End"===t.code&&(e(this,a.length-1),t.preventDefault())})),this.addEventListener("click",(t=>{const r=Array.from(this.querySelectorAll('[role="tablist"] [role="tab"]'));if(!(t.target instanceof Element))return;const a=t.target.closest('[role="tab"]');if(!a||!a.closest('[role="tablist"]'))return;e(this,r.indexOf(a))}))}connectedCallback(){for(const t of this.querySelectorAll('[role="tablist"] [role="tab"]'))t.hasAttribute("aria-selected")||t.setAttribute("aria-selected","false"),t.hasAttribute("tabindex")||("true"===t.getAttribute("aria-selected")?t.setAttribute("tabindex","0"):t.setAttribute("tabindex","-1"))}}function e(t,e){const r=t.querySelectorAll('[role="tablist"] [role="tab"]'),a=t.querySelectorAll('[role="tabpanel"]'),n=r[e],i=a[e];if(!!t.dispatchEvent(new CustomEvent("tab-container-change",{bubbles:!0,cancelable:!0,detail:{relatedTarget:i}}))){for(const t of r)t.setAttribute("aria-selected","false"),t.setAttribute("tabindex","-1");for(const t of a)t.hidden=!0,t.hasAttribute("tabindex")||t.hasAttribute("data-tab-container-no-tabstop")||t.setAttribute("tabindex","0");n.setAttribute("aria-selected","true"),n.setAttribute("tabindex","0"),n.focus(),i.hidden=!1,t.dispatchEvent(new CustomEvent("tab-container-changed",{bubbles:!0,detail:{relatedTarget:i}}))}}window.customElements.get("tab-container")||(window.TabContainerElement=t,window.customElements.define("tab-container",t));
2
+ //# sourceMappingURL=primer_view_components.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"primer_view_components.js","sources":["../../../node_modules/@github/tab-container-element/dist/index.js"],"sourcesContent":["export default class TabContainerElement extends HTMLElement {\n constructor() {\n super();\n this.addEventListener('keydown', (event) => {\n const target = event.target;\n if (!(target instanceof HTMLElement))\n return;\n if (target.getAttribute('role') !== 'tab' && !target.closest('[role=\"tablist\"]'))\n return;\n const tabs = Array.from(this.querySelectorAll('[role=\"tablist\"] [role=\"tab\"]'));\n const currentIndex = tabs.indexOf(tabs.find(tab => tab.matches('[aria-selected=\"true\"]')));\n if (event.code === 'ArrowRight') {\n let index = currentIndex + 1;\n if (index >= tabs.length)\n index = 0;\n selectTab(this, index);\n }\n else if (event.code === 'ArrowLeft') {\n let index = currentIndex - 1;\n if (index < 0)\n index = tabs.length - 1;\n selectTab(this, index);\n }\n else if (event.code === 'Home') {\n selectTab(this, 0);\n event.preventDefault();\n }\n else if (event.code === 'End') {\n selectTab(this, tabs.length - 1);\n event.preventDefault();\n }\n });\n this.addEventListener('click', (event) => {\n const tabs = Array.from(this.querySelectorAll('[role=\"tablist\"] [role=\"tab\"]'));\n if (!(event.target instanceof Element))\n return;\n const tab = event.target.closest('[role=\"tab\"]');\n if (!tab || !tab.closest('[role=\"tablist\"]'))\n return;\n const index = tabs.indexOf(tab);\n selectTab(this, index);\n });\n }\n connectedCallback() {\n for (const tab of this.querySelectorAll('[role=\"tablist\"] [role=\"tab\"]')) {\n if (!tab.hasAttribute('aria-selected')) {\n tab.setAttribute('aria-selected', 'false');\n }\n if (!tab.hasAttribute('tabindex')) {\n if (tab.getAttribute('aria-selected') === 'true') {\n tab.setAttribute('tabindex', '0');\n }\n else {\n tab.setAttribute('tabindex', '-1');\n }\n }\n }\n }\n}\nfunction selectTab(tabContainer, index) {\n const tabs = tabContainer.querySelectorAll('[role=\"tablist\"] [role=\"tab\"]');\n const panels = tabContainer.querySelectorAll('[role=\"tabpanel\"]');\n const selectedTab = tabs[index];\n const selectedPanel = panels[index];\n const cancelled = !tabContainer.dispatchEvent(new CustomEvent('tab-container-change', {\n bubbles: true,\n cancelable: true,\n detail: { relatedTarget: selectedPanel }\n }));\n if (cancelled)\n return;\n for (const tab of tabs) {\n tab.setAttribute('aria-selected', 'false');\n tab.setAttribute('tabindex', '-1');\n }\n for (const panel of panels) {\n panel.hidden = true;\n if (!panel.hasAttribute('tabindex') && !panel.hasAttribute('data-tab-container-no-tabstop')) {\n panel.setAttribute('tabindex', '0');\n }\n }\n selectedTab.setAttribute('aria-selected', 'true');\n selectedTab.setAttribute('tabindex', '0');\n selectedTab.focus();\n selectedPanel.hidden = false;\n tabContainer.dispatchEvent(new CustomEvent('tab-container-changed', {\n bubbles: true,\n detail: { relatedTarget: selectedPanel }\n }));\n}\nif (!window.customElements.get('tab-container')) {\n window.TabContainerElement = TabContainerElement;\n window.customElements.define('tab-container', TabContainerElement);\n}\n//# sourceMappingURL=index.js.map"],"names":["TabContainerElement","HTMLElement","[object Object]","super","this","addEventListener","event","target","getAttribute","closest","tabs","Array","from","querySelectorAll","currentIndex","indexOf","find","tab","matches","code","index","length","selectTab","preventDefault","Element","hasAttribute","setAttribute","tabContainer","panels","selectedTab","selectedPanel","dispatchEvent","CustomEvent","bubbles","cancelable","detail","relatedTarget","panel","hidden","focus","window","customElements","get","define"],"mappings":"AAAe,MAAMA,UAA4BC,YAC7CC,cACIC,QACAC,KAAKC,iBAAiB,WAAYC,IAC9B,MAAMC,EAASD,EAAMC,OACrB,KAAMA,aAAkBN,aACpB,OACJ,GAAoC,QAAhCM,EAAOC,aAAa,UAAsBD,EAAOE,QAAQ,oBACzD,OACJ,MAAMC,EAAOC,MAAMC,KAAKR,KAAKS,iBAAiB,kCACxCC,EAAeJ,EAAKK,QAAQL,EAAKM,MAAKC,GAAOA,EAAIC,QAAQ,6BAC/D,GAAmB,eAAfZ,EAAMa,KAAuB,CAC7B,IAAIC,EAAQN,EAAe,EACvBM,GAASV,EAAKW,SACdD,EAAQ,GACZE,EAAUlB,KAAMgB,QAEf,GAAmB,cAAfd,EAAMa,KAAsB,CACjC,IAAIC,EAAQN,EAAe,EACvBM,EAAQ,IACRA,EAAQV,EAAKW,OAAS,GAC1BC,EAAUlB,KAAMgB,OAEI,SAAfd,EAAMa,MACXG,EAAUlB,KAAM,GAChBE,EAAMiB,kBAEc,QAAfjB,EAAMa,OACXG,EAAUlB,KAAMM,EAAKW,OAAS,GAC9Bf,EAAMiB,qBAGdnB,KAAKC,iBAAiB,SAAUC,IAC5B,MAAMI,EAAOC,MAAMC,KAAKR,KAAKS,iBAAiB,kCAC9C,KAAMP,EAAMC,kBAAkBiB,SAC1B,OACJ,MAAMP,EAAMX,EAAMC,OAAOE,QAAQ,gBACjC,IAAKQ,IAAQA,EAAIR,QAAQ,oBACrB,OAEJa,EAAUlB,KADIM,EAAKK,QAAQE,OAInCf,oBACI,IAAK,MAAMe,KAAOb,KAAKS,iBAAiB,iCAC/BI,EAAIQ,aAAa,kBAClBR,EAAIS,aAAa,gBAAiB,SAEjCT,EAAIQ,aAAa,cACwB,SAAtCR,EAAIT,aAAa,iBACjBS,EAAIS,aAAa,WAAY,KAG7BT,EAAIS,aAAa,WAAY,QAMjD,SAASJ,EAAUK,EAAcP,GAC7B,MAAMV,EAAOiB,EAAad,iBAAiB,iCACrCe,EAASD,EAAad,iBAAiB,qBACvCgB,EAAcnB,EAAKU,GACnBU,EAAgBF,EAAOR,GAM7B,KALmBO,EAAaI,cAAc,IAAIC,YAAY,uBAAwB,CAClFC,SAAS,EACTC,YAAY,EACZC,OAAQ,CAAEC,cAAeN,MAE7B,CAEA,IAAK,MAAMb,KAAOP,EACdO,EAAIS,aAAa,gBAAiB,SAClCT,EAAIS,aAAa,WAAY,MAEjC,IAAK,MAAMW,KAAST,EAChBS,EAAMC,QAAS,EACVD,EAAMZ,aAAa,aAAgBY,EAAMZ,aAAa,kCACvDY,EAAMX,aAAa,WAAY,KAGvCG,EAAYH,aAAa,gBAAiB,QAC1CG,EAAYH,aAAa,WAAY,KACrCG,EAAYU,QACZT,EAAcQ,QAAS,EACvBX,EAAaI,cAAc,IAAIC,YAAY,wBAAyB,CAChEC,SAAS,EACTE,OAAQ,CAAEC,cAAeN,OAG5BU,OAAOC,eAAeC,IAAI,mBAC3BF,OAAOxC,oBAAsBA,EAC7BwC,OAAOC,eAAeE,OAAO,gBAAiB3C"}
@@ -7,20 +7,20 @@ module Primer
7
7
  class AvatarComponent < Primer::Component
8
8
  SMALL_THRESHOLD = 24
9
9
 
10
- # @example auto|Default
10
+ # @example Default
11
11
  # <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
12
12
  #
13
- # @example auto|Square
13
+ # @example Square
14
14
  # <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", square: true)) %>
15
15
  #
16
- # @example auto|Link
16
+ # @example Link
17
17
  # <%= render(Primer::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
18
18
  #
19
- # @param src [String] The source url of the avatar image
20
- # @param alt [String] Passed through to alt on img tag
21
- # @param size [Integer] Adds the avatar-small class if less than 24
19
+ # @param src [String] The source url of the avatar image.
20
+ # @param alt [String] Passed through to alt on img tag.
21
+ # @param size [Integer] Adds the avatar-small class if less than 24.
22
22
  # @param square [Boolean] Used to create a square avatar.
23
- # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag
23
+ # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
24
24
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
25
25
  def initialize(src:, alt:, size: 20, square: false, href: nil, **system_arguments)
26
26
  @href = href
@@ -13,21 +13,21 @@ module Primer
13
13
  # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
14
14
  renders_many :avatars, Primer::AvatarComponent
15
15
 
16
- # @example auto|Default
16
+ # @example Default
17
17
  # <%= render(Primer::AvatarStackComponent.new) do |c| %>
18
18
  # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
19
19
  # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
20
20
  # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
21
21
  # <% end %>
22
22
  #
23
- # @example auto|Align right
23
+ # @example Align right
24
24
  # <%= render(Primer::AvatarStackComponent.new(align: :right)) do |c| %>
25
25
  # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
26
26
  # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
27
27
  # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
28
28
  # <% end %>
29
29
  #
30
- # @example auto|With tooltip
30
+ # @example With tooltip
31
31
  # <%= render(Primer::AvatarStackComponent.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
32
32
  # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
33
33
  # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
@@ -41,7 +41,7 @@ module Primer
41
41
  # @param test_selector [String] Adds `data-test-selector='given value'` in non-Production environments for testing purposes.
42
42
  #
43
43
  # @param m [Integer] Margin. <%= one_of((-6..6).to_a) %>
44
- # @param mt [Integer] Margin left. <%= one_of((-6..6).to_a) %>
44
+ # @param mt [Integer] Margin top. <%= one_of((-6..6).to_a) %>
45
45
  # @param mr [Integer] Margin right. <%= one_of((-6..6).to_a) %>
46
46
  # @param mb [Integer] Margin bottom. <%= one_of((-6..6).to_a) %>
47
47
  # @param ml [Integer] Margin left. <%= one_of((-6..6).to_a) %>
@@ -1,12 +1,12 @@
1
1
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
2
  <% if spinner.present? %>
3
- <%= render spinner.component %>
3
+ <%= spinner %>
4
4
  <% elsif @icon.present? %>
5
- <%= render(Primer::OcticonComponent.new(
5
+ <%= primer(:octicon,
6
6
  icon: @icon,
7
7
  size: @icon_size,
8
8
  classes: "blankslate-icon"
9
- )) %>
9
+ ) %>
10
10
  <% elsif @image_src.present? && @image_alt.present? %>
11
11
  <%= image_tag "#{@image_src}", class: "mb-3", size: "56x56", alt: "#{@image_alt}" %>
12
12
  <% end %>
@@ -3,40 +3,46 @@
3
3
  module Primer
4
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.
5
5
  class BlankslateComponent < Primer::Component
6
- include ViewComponent::Slotable
6
+ include ViewComponent::SlotableV2
7
7
 
8
- with_slot :spinner, class_name: "Spinner"
8
+ # Optional Spinner.
9
+ #
10
+ # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::SpinnerComponent) %>.
11
+ renders_one :spinner, lambda { |**system_arguments|
12
+ system_arguments[:mb] ||= 3
13
+ Primer::SpinnerComponent.new(**system_arguments)
14
+ }
9
15
 
10
16
  #
11
- # @example auto|Basic
17
+ # @example Basic
12
18
  # <%= render Primer::BlankslateComponent.new(
13
19
  # title: "Title",
14
20
  # description: "Description",
15
21
  # ) %>
16
22
  #
17
- # @example auto|Icon|Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
23
+ # @example Icon|Add an `icon` to give additional context. Refer to the [Octicons](https://primer.style/octicons/) documentation to choose an icon.
18
24
  # <%= render Primer::BlankslateComponent.new(
19
25
  # icon: "octoface",
20
26
  # title: "Title",
21
27
  # description: "Description",
22
28
  # ) %>
23
29
  #
24
- # @example auto|Loading|Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
30
+ # @example Loading|Add a [SpinnerComponent](https://primer.style/view-components/components/spinner) to the blankslate in place of an icon.
25
31
  # <%= render Primer::BlankslateComponent.new(
26
32
  # title: "Title",
27
33
  # description: "Description",
28
34
  # ) do |component| %>
29
- # <% component.slot(:spinner, size: :large) %>
35
+ # <% component.spinner(size: :large) %>
30
36
  # <% end %>
31
37
  #
32
- # @example auto|Custom content|Pass custom content as a block in place of `description`.
38
+ # @example Custom content|Pass custom content as a block in place of `description`.
33
39
  # <%= render Primer::BlankslateComponent.new(
34
40
  # title: "Title",
35
41
  # ) do %>
36
42
  # <em>Your custom content here</em>
37
43
  # <% end %>
38
44
  #
39
- # @example auto|Action button|Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
45
+ # @example Action button|Provide a button to guide users to take action from the blankslate. The button appears below the description and custom content.
40
46
  # <%= render Primer::BlankslateComponent.new(
41
47
  # icon: "book",
42
48
  # title: "Welcome to the mona wiki!",
@@ -46,7 +52,7 @@ module Primer
46
52
  # button_url: "https://github.com/monalisa/mona/wiki/_new",
47
53
  # ) %>
48
54
  #
49
- # @example auto|Link|Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
55
+ # @example Link|Add an additional link to help users learn more about a feature. The link will be shown at the very bottom:
50
56
  # <%= render Primer::BlankslateComponent.new(
51
57
  # icon: "book",
52
58
  # title: "Welcome to the mona wiki!",
@@ -55,7 +61,7 @@ module Primer
55
61
  # link_url: "https://docs.github.com/en/github/building-a-strong-community/about-wikis",
56
62
  # ) %>
57
63
  #
58
- # @example auto|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.
64
+ # @example 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.
59
65
  # <%= render Primer::BlankslateComponent.new(
60
66
  # icon: "book",
61
67
  # title: "Welcome to the mona wiki!",
@@ -124,19 +130,5 @@ module Primer
124
130
  @link_text = link_text
125
131
  @link_url = link_url
126
132
  end
127
-
128
- # :nodoc:
129
- class Spinner < Primer::Slot
130
- # @param size [Symbol] <%= one_of(Primer::SpinnerComponent::SIZE_MAPPINGS) %>
131
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
132
- def initialize(**system_arguments)
133
- @system_arguments = system_arguments
134
- @system_arguments[:mb] ||= 3
135
- end
136
-
137
- def component
138
- Primer::SpinnerComponent.new(**@system_arguments)
139
- end
140
- end
141
133
  end
142
134
  end
@@ -1,26 +1,12 @@
1
1
  <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
- <% if header %>
3
- <%= render Primer::BaseComponent.new(**header.system_arguments) do %>
4
- <%= header.content %>
5
- <% end %>
6
- <% end %>
7
- <% if body %>
8
- <%= render Primer::BaseComponent.new(**body.system_arguments) do %>
9
- <%= body.content %>
10
- <% end %>
11
- <% end %>
2
+ <%= header %>
3
+ <%= body %>
12
4
  <% if rows.any? %>
13
5
  <ul>
14
6
  <% rows.each do |row| %>
15
- <%= render Primer::BaseComponent.new(**row.system_arguments) do %>
16
- <%= row.content %>
17
- <% end %>
7
+ <%= row %>
18
8
  <% end %>
19
9
  </ul>
20
10
  <% end %>
21
- <% if footer %>
22
- <%= render Primer::BaseComponent.new(**footer.system_arguments) do %>
23
- <%= footer.content %>
24
- <% end %>
25
- <% end %>
11
+ <%= footer %>
26
12
  <% end %>
@@ -3,30 +3,77 @@
3
3
  module Primer
4
4
  # BorderBox is a Box component with a border.
5
5
  class BorderBoxComponent < Primer::Component
6
- include ViewComponent::Slotable
6
+ include ViewComponent::SlotableV2
7
7
 
8
- with_slot :header, class_name: "Header"
9
- with_slot :body, class_name: "Body"
10
- with_slot :footer, class_name: "Footer"
11
- with_slot :row, collection: true, class_name: "Row"
8
+ # Optional Header.
9
+ #
10
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
11
+ renders_one :header, lambda { |**system_arguments|
12
+ system_arguments[:tag] = :div
13
+ system_arguments[:classes] = class_names(
14
+ "Box-header",
15
+ system_arguments[:classes]
16
+ )
17
+
18
+ Primer::BaseComponent.new(**system_arguments)
19
+ }
20
+
21
+ # Optional Body.
22
+ #
23
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
24
+ renders_one :body, lambda { |**system_arguments|
25
+ system_arguments[:tag] = :div
26
+ system_arguments[:classes] = class_names(
27
+ "Box-body",
28
+ system_arguments[:classes]
29
+ )
12
30
 
13
- # @example auto|Header, body, rows, and footer
31
+ Primer::BaseComponent.new(**system_arguments)
32
+ }
33
+
34
+ # Optional Footer.
35
+ #
36
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
37
+ renders_one :footer, lambda { |**system_arguments|
38
+ system_arguments[:tag] = :div
39
+ system_arguments[:classes] = class_names(
40
+ "Box-footer",
41
+ system_arguments[:classes]
42
+ )
43
+
44
+ Primer::BaseComponent.new(**system_arguments)
45
+ }
46
+
47
+ # Use Rows to add rows with borders and maintain the same padding.
48
+ #
49
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
50
+ renders_many :rows, lambda { |**system_arguments|
51
+ system_arguments[:tag] = :li
52
+ system_arguments[:classes] = class_names(
53
+ "Box-row",
54
+ system_arguments[:classes]
55
+ )
56
+
57
+ Primer::BaseComponent.new(**system_arguments)
58
+ }
59
+
60
+ # @example Header, body, rows, and footer
14
61
  # <%= render(Primer::BorderBoxComponent.new) do |component| %>
15
- # <% component.slot(:header) do %>
62
+ # <% component.header do %>
16
63
  # Header
17
64
  # <% end %>
18
- # <% component.slot(:body) do %>
65
+ # <% component.body do %>
19
66
  # Body
20
67
  # <% end %>
21
- # <% component.slot(:row) do %>
68
+ # <% component.row do %>
22
69
  # <% if true %>
23
70
  # Row one
24
71
  # <% end %>
25
72
  # <% end %>
26
- # <% component.slot(:row) do %>
73
+ # <% component.row do %>
27
74
  # Row two
28
75
  # <% end %>
29
- # <% component.slot(:footer) do %>
76
+ # <% component.footer do %>
30
77
  # Footer
31
78
  # <% end %>
32
79
  # <% end %>
@@ -45,61 +92,5 @@ module Primer
45
92
  def self.status
46
93
  Primer::Component::STATUSES[:beta]
47
94
  end
48
-
49
- # :nodoc:
50
- class Header < Primer::Slot
51
- attr_reader :system_arguments
52
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
53
- def initialize(**system_arguments)
54
- @system_arguments = system_arguments
55
- @system_arguments[:tag] = :div
56
- @system_arguments[:classes] = class_names(
57
- "Box-header",
58
- system_arguments[:classes]
59
- )
60
- end
61
- end
62
-
63
- # :nodoc:
64
- class Body < Primer::Slot
65
- attr_reader :system_arguments
66
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
67
- def initialize(**system_arguments)
68
- @system_arguments = system_arguments
69
- @system_arguments[:tag] = :div
70
- @system_arguments[:classes] = class_names(
71
- "Box-body",
72
- system_arguments[:classes]
73
- )
74
- end
75
- end
76
-
77
- # :nodoc:
78
- class Footer < Primer::Slot
79
- attr_reader :system_arguments
80
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
81
- def initialize(**system_arguments)
82
- @system_arguments = system_arguments
83
- @system_arguments[:tag] = :div
84
- @system_arguments[:classes] = class_names(
85
- "Box-footer",
86
- system_arguments[:classes]
87
- )
88
- end
89
- end
90
-
91
- # :nodoc:
92
- class Row < Primer::Slot
93
- attr_reader :system_arguments
94
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
95
- def initialize(**system_arguments)
96
- @system_arguments = system_arguments
97
- @system_arguments[:tag] = :li
98
- @system_arguments[:classes] = class_names(
99
- "Box-row",
100
- system_arguments[:classes]
101
- )
102
- end
103
- end
104
95
  end
105
96
  end