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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +101 -0
- data/app/assets/javascripts/primer_view_components.js +2 -0
- data/app/assets/javascripts/primer_view_components.js.map +1 -0
- data/app/components/primer/avatar_component.rb +27 -9
- data/app/components/primer/avatar_stack_component.html.erb +10 -0
- data/app/components/primer/avatar_stack_component.rb +81 -0
- data/app/components/primer/base_component.rb +4 -4
- data/app/components/primer/blankslate_component.html.erb +3 -3
- data/app/components/primer/blankslate_component.rb +16 -24
- data/app/components/primer/border_box_component.html.erb +4 -18
- data/app/components/primer/border_box_component.rb +75 -72
- data/app/components/primer/box_component.rb +2 -2
- data/app/components/primer/breadcrumb_component.rb +1 -1
- data/app/components/primer/button_component.rb +2 -2
- data/app/components/primer/button_group_component.rb +4 -1
- data/app/components/primer/button_marketing_component.rb +2 -2
- data/app/components/primer/component.rb +9 -6
- data/app/components/primer/counter_component.rb +5 -1
- data/app/components/primer/details_component.html.erb +2 -6
- data/app/components/primer/details_component.rb +22 -35
- data/app/components/primer/dropdown/menu_component.html.erb +12 -0
- data/app/components/primer/dropdown/menu_component.rb +48 -0
- data/app/components/primer/dropdown_component.html.erb +9 -0
- data/app/components/primer/dropdown_component.rb +75 -0
- data/app/components/primer/dropdown_menu_component.rb +8 -4
- data/app/components/primer/flash_component.html.erb +4 -7
- data/app/components/primer/flash_component.rb +18 -18
- data/app/components/primer/flex_component.rb +38 -1
- data/app/components/primer/flex_item_component.rb +15 -1
- data/app/components/primer/heading_component.rb +3 -1
- data/app/components/primer/label_component.rb +15 -25
- data/app/components/primer/layout_component.rb +2 -2
- data/app/components/primer/link_component.rb +6 -2
- data/app/components/primer/markdown_component.rb +293 -0
- data/app/components/primer/menu_component.html.erb +6 -0
- data/app/components/primer/menu_component.rb +71 -0
- data/app/components/primer/octicon_component.rb +9 -3
- data/app/components/primer/popover_component.rb +5 -5
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.ts +1 -0
- data/app/components/primer/progress_bar_component.rb +5 -5
- data/app/components/primer/spinner_component.rb +7 -3
- data/app/components/primer/state_component.rb +21 -10
- data/app/components/primer/subhead_component.html.erb +3 -15
- data/app/components/primer/subhead_component.rb +45 -61
- data/app/components/primer/tab_container_component.js +1 -0
- data/app/components/primer/tab_container_component.rb +41 -0
- data/app/components/primer/tab_container_component.ts +1 -0
- data/app/components/primer/tab_nav_component.html.erb +17 -0
- data/app/components/primer/tab_nav_component.rb +108 -0
- data/app/components/primer/text_component.rb +1 -1
- data/app/components/primer/timeline_item_component.html.erb +4 -16
- data/app/components/primer/timeline_item_component.rb +41 -52
- data/app/components/primer/tooltip_component.rb +5 -5
- data/app/components/primer/truncate_component.rb +4 -4
- data/app/components/primer/underline_nav_component.rb +2 -2
- data/{lib → app/lib}/primer/class_name_helper.rb +0 -0
- data/{lib → app/lib}/primer/classify.rb +21 -10
- data/app/lib/primer/classify/cache.rb +125 -0
- data/{lib → app/lib}/primer/fetch_or_fallback_helper.rb +1 -1
- data/{lib → app/lib}/primer/join_style_arguments_helper.rb +1 -1
- data/app/lib/primer/view_helper.rb +22 -0
- data/app/lib/primer/view_helper/dsl.rb +34 -0
- data/lib/primer/view_components.rb +32 -1
- data/lib/primer/view_components/engine.rb +11 -3
- data/lib/primer/view_components/version.rb +5 -1
- data/lib/yard/renders_many_handler.rb +19 -0
- data/lib/yard/renders_one_handler.rb +19 -0
- data/static/statuses.json +1 -0
- metadata +61 -10
- data/app/components/primer/view_components.rb +0 -56
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2c3deb4c623c9f6825193924584857ead4554a0a78003d60ed901f100bf454e3
|
4
|
+
data.tar.gz: d21529682ea0c4dabddb193d4f86bab373636f1f407a66945723d36339faa7d7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
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
|
-
# @
|
15
|
-
#
|
16
|
-
#
|
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
|
-
|
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
|
-
"
|
39
|
+
"circle" => !square
|
32
40
|
)
|
33
41
|
end
|
34
42
|
|
35
43
|
def call
|
36
|
-
|
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
|
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
|
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,
|
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
|
-
<%=
|
3
|
+
<%= spinner %>
|
4
4
|
<% elsif @icon.present? %>
|
5
|
-
<%=
|
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::
|
6
|
+
include ViewComponent::SlotableV2
|
7
7
|
|
8
|
-
|
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
|
17
|
+
# @example Basic
|
12
18
|
# <%= render Primer::BlankslateComponent.new(
|
13
19
|
# title: "Title",
|
14
20
|
# description: "Description",
|
15
21
|
# ) %>
|
16
22
|
#
|
17
|
-
# @example
|
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
|
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.
|
35
|
+
# <% component.spinner(size: :large) %>
|
30
36
|
# <% end %>
|
31
37
|
#
|
32
|
-
# @example
|
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
|
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
|
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
|
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
|
-
|
3
|
-
|
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
|
-
<%=
|
16
|
-
<%= row.content %>
|
17
|
-
<% end %>
|
7
|
+
<%= row %>
|
18
8
|
<% end %>
|
19
9
|
</ul>
|
20
10
|
<% end %>
|
21
|
-
|
22
|
-
<%= render Primer::BaseComponent.new(**footer.system_arguments) do %>
|
23
|
-
<%= footer.content %>
|
24
|
-
<% end %>
|
25
|
-
<% end %>
|
11
|
+
<%= footer %>
|
26
12
|
<% end %>
|