primer_view_components 0.0.18 → 0.0.23

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 (72) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +101 -0
  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 +27 -9
  6. data/app/components/primer/avatar_stack_component.html.erb +10 -0
  7. data/app/components/primer/avatar_stack_component.rb +81 -0
  8. data/app/components/primer/base_component.rb +4 -4
  9. data/app/components/primer/blankslate_component.html.erb +3 -3
  10. data/app/components/primer/blankslate_component.rb +16 -24
  11. data/app/components/primer/border_box_component.html.erb +4 -18
  12. data/app/components/primer/border_box_component.rb +75 -72
  13. data/app/components/primer/box_component.rb +2 -2
  14. data/app/components/primer/breadcrumb_component.rb +1 -1
  15. data/app/components/primer/button_component.rb +2 -2
  16. data/app/components/primer/button_group_component.rb +4 -1
  17. data/app/components/primer/button_marketing_component.rb +2 -2
  18. data/app/components/primer/component.rb +9 -6
  19. data/app/components/primer/counter_component.rb +5 -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/menu_component.html.erb +12 -0
  23. data/app/components/primer/dropdown/menu_component.rb +48 -0
  24. data/app/components/primer/dropdown_component.html.erb +9 -0
  25. data/app/components/primer/dropdown_component.rb +75 -0
  26. data/app/components/primer/dropdown_menu_component.rb +8 -4
  27. data/app/components/primer/flash_component.html.erb +4 -7
  28. data/app/components/primer/flash_component.rb +18 -18
  29. data/app/components/primer/flex_component.rb +38 -1
  30. data/app/components/primer/flex_item_component.rb +15 -1
  31. data/app/components/primer/heading_component.rb +3 -1
  32. data/app/components/primer/label_component.rb +15 -25
  33. data/app/components/primer/layout_component.rb +2 -2
  34. data/app/components/primer/link_component.rb +6 -2
  35. data/app/components/primer/markdown_component.rb +293 -0
  36. data/app/components/primer/menu_component.html.erb +6 -0
  37. data/app/components/primer/menu_component.rb +71 -0
  38. data/app/components/primer/octicon_component.rb +9 -3
  39. data/app/components/primer/popover_component.rb +5 -5
  40. data/app/components/primer/primer.js +1 -0
  41. data/app/components/primer/primer.ts +1 -0
  42. data/app/components/primer/progress_bar_component.rb +5 -5
  43. data/app/components/primer/spinner_component.rb +7 -3
  44. data/app/components/primer/state_component.rb +21 -10
  45. data/app/components/primer/subhead_component.html.erb +3 -15
  46. data/app/components/primer/subhead_component.rb +45 -61
  47. data/app/components/primer/tab_container_component.js +1 -0
  48. data/app/components/primer/tab_container_component.rb +41 -0
  49. data/app/components/primer/tab_container_component.ts +1 -0
  50. data/app/components/primer/tab_nav_component.html.erb +17 -0
  51. data/app/components/primer/tab_nav_component.rb +108 -0
  52. data/app/components/primer/text_component.rb +1 -1
  53. data/app/components/primer/timeline_item_component.html.erb +4 -16
  54. data/app/components/primer/timeline_item_component.rb +41 -52
  55. data/app/components/primer/tooltip_component.rb +5 -5
  56. data/app/components/primer/truncate_component.rb +4 -4
  57. data/app/components/primer/underline_nav_component.rb +2 -2
  58. data/{lib → app/lib}/primer/class_name_helper.rb +0 -0
  59. data/{lib → app/lib}/primer/classify.rb +21 -10
  60. data/app/lib/primer/classify/cache.rb +125 -0
  61. data/{lib → app/lib}/primer/fetch_or_fallback_helper.rb +1 -1
  62. data/{lib → app/lib}/primer/join_style_arguments_helper.rb +1 -1
  63. data/app/lib/primer/view_helper.rb +22 -0
  64. data/app/lib/primer/view_helper/dsl.rb +34 -0
  65. data/lib/primer/view_components.rb +32 -1
  66. data/lib/primer/view_components/engine.rb +11 -3
  67. data/lib/primer/view_components/version.rb +5 -1
  68. data/lib/yard/renders_many_handler.rb +19 -0
  69. data/lib/yard/renders_one_handler.rb +19 -0
  70. data/static/statuses.json +1 -0
  71. metadata +61 -10
  72. data/app/components/primer/view_components.rb +0 -56
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3e5a191f5ef0c2e50f095bce5d68943ebdc38a28d0edd66334152e876045d9cd
4
- data.tar.gz: 8a103a45a9fed84736298a7b75c45b5f2bff3e78817fd4b02100853dbdf9003e
3
+ metadata.gz: 2c3deb4c623c9f6825193924584857ead4554a0a78003d60ed901f100bf454e3
4
+ data.tar.gz: d21529682ea0c4dabddb193d4f86bab373636f1f407a66945723d36339faa7d7
5
5
  SHA512:
6
- metadata.gz: 467aa20851a1b48cb605984b87a76f0297e5eddd32cee077a8f3cc7a06639829bf6f4dbf79fa81c4aa18f3b6b9cf697867cc8b347a9547d408a7c2aefddd3886
7
- data.tar.gz: 9ad2bd67f630a6e734d6b08da43cad5b94482d0ff93085e65f8e8a4ffcf36e150bc7e5ec3beaa542b54a7f9949ff6411da8c6a3db0df460c4e430b0471a03fda
6
+ metadata.gz: 2ea036cc17c4167cbf88306c9626e1a590ff668cde1eebf8aaba01d7a6f3c10d271dd74b16b362c83ecfe7fdc6be26000a0583c10aa6cf0d83ad7cc2f949ae53
7
+ data.tar.gz: 1bb92eb17ed62a6c718aff864fd3dea932de727cd08c8663116331b82b8cf07664cf223a0653c157b4553947151cbbf44a80812ec3594ac87a572b6e3267c1a9
data/CHANGELOG.md CHANGED
@@ -2,6 +2,107 @@
2
2
 
3
3
  ## main
4
4
 
5
+ ## 0.0.23
6
+
7
+ * Remove node and yarn version requirements from `@primer/view-components`.
8
+
9
+ *Manuel Puyol*
10
+
11
+ * **Breaking change**: Upgrade `SubheadComponent` to use Slots V2.
12
+
13
+ *Simon Taranto*
14
+
15
+ * **Breaking change**: Update `LabelComponent` to use only functional color
16
+ supportive scheme keys. The component no longer accepts colors (`:gray`, for
17
+ example) but only functional schemes (`primary`, for example).
18
+ `LabelComponent` is promoted to beta status.
19
+
20
+ *Simon Taranto*
21
+
22
+ ## 0.0.22
23
+
24
+ * Add view helpers to easily render Primer components.
25
+
26
+ *Manuel Puyol*
27
+
28
+ * Add `TabContainer` and `TabNav` components.
29
+
30
+ *Manuel Puyol*
31
+
32
+ * Promote `StateComponent` to beta.
33
+
34
+ *Simon Taranto*
35
+
36
+ * **Breaking change**: Upgrade `BorderBoxComponent` to use Slots V2.
37
+
38
+ *Manuel Puyol*
39
+
40
+ * **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.
41
+
42
+ *Simon Taranto*
43
+
44
+ * **Breaking change**: Upgrade `DetailsComponent` to use Slots V2.
45
+
46
+ *Simon Taranto*
47
+
48
+ ## 0.0.21
49
+
50
+ * **Breaking change**: Upgrade `FlashComponent` to use Slots V2.
51
+
52
+ *Joel Hawksley, Simon Taranto*
53
+
54
+ * **Breaking change**: Upgrade `BlankslateComponent` to use Slots V2.
55
+
56
+ *Manuel Puyol*
57
+
58
+ * **Breaking change**: Upgrade `TimelineItemComponent` to use Slots V2.
59
+
60
+ *Manuel Puyol*
61
+
62
+ ## 0.0.20
63
+
64
+ * Fix bug when empty string was passed to Classify.
65
+
66
+ *Manuel Puyol*
67
+
68
+ ## 0.0.19
69
+
70
+ * Add support for functional colors to `color` system argument.
71
+
72
+ *Jake Shorty*
73
+
74
+ * Add `AvatarStack`, `Dropdown`, `Markdown` and `Menu` components.
75
+
76
+ *Manuel Puyol*
77
+
78
+ * Deprecate `DropdownMenuComponent`.
79
+
80
+ *Manuel Puyol*
81
+
82
+ * Fix `Avatar` bug when used with links.
83
+
84
+ *Manuel Puyol*
85
+
86
+ * Add cache for common Primer values.
87
+
88
+ *Blake Williams*
89
+
90
+ * Add support for `octicons_helper` v12.
91
+
92
+ *Cole Bemis*
93
+
94
+ * Add support for `border: true` to apply the `border` class.
95
+
96
+ *Simon Taranto*
97
+
98
+ * Promote `Avatar`, `Link`, and `Counter` components to beta.
99
+
100
+ *Simon Taranto*
101
+
102
+ * **Breaking change**: Drop support for Ruby 2.4.
103
+
104
+ *Simon Taranto*
105
+
5
106
  ## 0.0.18
6
107
 
7
108
  * Add `border_radius` system argument.
@@ -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,15 +7,23 @@ module Primer
7
7
  class AvatarComponent < Primer::Component
8
8
  SMALL_THRESHOLD = 24
9
9
 
10
- #
11
- # @example 34|Default
10
+ # @example Default
12
11
  # <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
13
12
  #
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
13
+ # @example Square
14
+ # <%= render(Primer::AvatarComponent.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", square: true)) %>
15
+ #
16
+ # @example Link
17
+ # <%= render(Primer::AvatarComponent.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
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.
17
22
  # @param square [Boolean] Used to create a square avatar.
18
- def initialize(src:, alt:, size: 20, square: false, **system_arguments)
23
+ # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
24
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
25
+ def initialize(src:, alt:, size: 20, square: false, href: nil, **system_arguments)
26
+ @href = href
19
27
  @system_arguments = system_arguments
20
28
  @system_arguments[:tag] = :img
21
29
  @system_arguments[:src] = src
@@ -25,15 +33,25 @@ module Primer
25
33
  @system_arguments[:width] = size
26
34
 
27
35
  @system_arguments[:classes] = class_names(
28
- "avatar",
29
36
  system_arguments[:classes],
37
+ "avatar" => !href,
30
38
  "avatar--small" => size < SMALL_THRESHOLD,
31
- "CircleBadge" => !square
39
+ "circle" => !square
32
40
  )
33
41
  end
34
42
 
35
43
  def call
36
- render(Primer::BaseComponent.new(**@system_arguments)) { content }
44
+ if @href
45
+ render(Primer::LinkComponent.new(href: @href, classes: "avatar")) do
46
+ render(Primer::BaseComponent.new(**@system_arguments)) { content }
47
+ end
48
+ else
49
+ render(Primer::BaseComponent.new(**@system_arguments)) { content }
50
+ end
51
+ end
52
+
53
+ def self.status
54
+ Primer::Component::STATUSES[:beta]
37
55
  end
38
56
  end
39
57
  end
@@ -0,0 +1,10 @@
1
+ <%= render Primer::BaseComponent.new(**@system_arguments) do %>
2
+ <%= render body_component do %>
3
+ <% avatars.each_with_index do |avatar, i| %>
4
+ <% if i == 2 %>
5
+ <div class="avatar avatar-more"></div>
6
+ <% end %>
7
+ <%= avatar %>
8
+ <% end %>
9
+ <% end %>
10
+ <% end %>
@@ -0,0 +1,81 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Primer
4
+ # Use AvatarStack to stack multiple avatars together.
5
+ class AvatarStackComponent < Primer::Component
6
+ include ViewComponent::SlotableV2
7
+
8
+ ALIGN_DEFAULT = :left
9
+ ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
10
+
11
+ # Required list of stacked avatars.
12
+ #
13
+ # @param kwargs [Hash] The same arguments as <%= link_to_component(Primer::AvatarComponent) %>.
14
+ renders_many :avatars, Primer::AvatarComponent
15
+
16
+ # @example Default
17
+ # <%= render(Primer::AvatarStackComponent.new) do |c| %>
18
+ # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
19
+ # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
20
+ # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
21
+ # <% end %>
22
+ #
23
+ # @example Align right
24
+ # <%= render(Primer::AvatarStackComponent.new(align: :right)) do |c| %>
25
+ # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
26
+ # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
27
+ # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
28
+ # <% end %>
29
+ #
30
+ # @example With tooltip
31
+ # <%= render(Primer::AvatarStackComponent.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
32
+ # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
33
+ # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
34
+ # <%= c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
35
+ # <% end %>
36
+ #
37
+ # @param align [Symbol] <%= one_of(Primer::AvatarStackComponent::ALIGN_OPTIONS) %>
38
+ # @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.
39
+ # @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Primer::TooltipComponent) %>.
40
+ # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
41
+ def initialize(align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
42
+ @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
43
+ @system_arguments = system_arguments
44
+ @tooltipped = tooltipped
45
+ @body_arguments = body_arguments
46
+
47
+ @body_arguments[:tag] ||= :div
48
+ @body_arguments[:classes] = class_names(
49
+ "AvatarStack-body",
50
+ @body_arguments[:classes]
51
+ )
52
+
53
+ @system_arguments[:tag] ||= :div
54
+ @system_arguments[:classes] = class_names(
55
+ "AvatarStack",
56
+ system_arguments[:classes],
57
+ "AvatarStack--right" => @align == :right
58
+ )
59
+ end
60
+
61
+ def body_component
62
+ if @tooltipped
63
+ Primer::TooltipComponent.new(**@body_arguments)
64
+ else
65
+ Primer::BaseComponent.new(**@body_arguments)
66
+ end
67
+ end
68
+
69
+ def before_render
70
+ @system_arguments[:classes] = class_names(
71
+ @system_arguments[:classes],
72
+ "AvatarStack--two" => avatars.size == 2,
73
+ "AvatarStack--three-plus" => avatars.size > 2
74
+ )
75
+ end
76
+
77
+ def render?
78
+ avatars.any?
79
+ end
80
+ end
81
+ end
@@ -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) %>
@@ -76,11 +76,11 @@ module Primer
76
76
  #
77
77
  # @param underline [Boolean] Whether text should be underlined.
78
78
  #
79
- # @param color [Symbol] Text color. <%= one_of([:blue, :red, :gray_light, :gray, :gray_dark, :green, :orange, :orange_light, :purple, :pink, :white, :inherit]) %> Note: this API is subject to change as we move to functional colors.
79
+ # @param color [Symbol] Text color. <%= one_of([:blue, :red, :gray_light, :gray, :gray_dark, :green, :orange, :orange_light, :purple, :pink, :white, :inherit, :text_primary, :text_secondary, :text_tertiary, :text_link, :text_success, :text_warning, :text_danger, :icon_primary, :icon_secondary, :icon_tertiary, :icon_info, :icon_success, :icon_warning, :icon_danger]) %>
80
80
  # @param bg [String, Symbol] Background color. Accepts either a hex value as a String or a color name as a Symbol.
81
81
  #
82
82
  # @param box_shadow [Boolean, Symbol] Box shadow. <%= one_of([true, :medium, :large, :extra_large, :none]) %>
83
- # @param border [Symbol] <%= one_of([:left, :top, :bottom, :right, :y, :x]) %>
83
+ # @param border [Symbol] <%= one_of([:left, :top, :bottom, :right, :y, :x, true]) %>
84
84
  # @param border_color [Symbol] <%= one_of([:blue, :blue_light, :gray, :gray_dark, :green, :purple, :red, :red_light, :white, :yellow, :black_fade]) %> Note: this API is subject to change as we move to functional colors.
85
85
  # @param border_top [Integer] Set to `0` to remove the top border.
86
86
  # @param border_bottom [Integer] Set to `0` to remove the bottom border.
@@ -116,7 +116,7 @@ module Primer
116
116
  end
117
117
 
118
118
  def call
119
- content_tag(@tag, content, { **@content_tag_args.merge(@result) })
119
+ content_tag(@tag, content, @content_tag_args.merge(@result))
120
120
  end
121
121
 
122
122
  private
@@ -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 150|Basic
17
+ # @example Basic
12
18
  # <%= render Primer::BlankslateComponent.new(
13
19
  # title: "Title",
14
20
  # description: "Description",
15
21
  # ) %>
16
22
  #
17
- # @example 190|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 220|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 150|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 270|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 225|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 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.
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 %>