openproject-primer_view_components 0.39.1 → 0.41.0
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 +19 -0
- data/app/assets/javascripts/app/components/primer/alpha/toggle_switch.d.ts +4 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +1 -1
- data/app/components/primer/alpha/select_panel_element.js +43 -8
- data/app/components/primer/alpha/select_panel_element.ts +50 -9
- data/app/components/primer/alpha/toggle_switch.d.ts +4 -0
- data/app/components/primer/alpha/toggle_switch.js +16 -4
- data/app/components/primer/alpha/toggle_switch.rb +4 -2
- data/app/components/primer/alpha/toggle_switch.ts +19 -4
- data/app/components/primer/open_project/page_header/title.html.erb +7 -0
- data/app/components/primer/open_project/page_header/title.rb +69 -0
- data/app/components/primer/open_project/page_header.html.erb +1 -1
- data/app/components/primer/open_project/page_header.rb +13 -7
- data/lib/primer/view_components/version.rb +2 -2
- data/previews/primer/alpha/toggle_switch_preview.rb +4 -0
- data/previews/primer/open_project/page_header_preview/playground.html.erb +7 -2
- data/previews/primer/open_project/page_header_preview.rb +17 -2
- data/static/arguments.json +22 -0
- data/static/audited_at.json +1 -0
- data/static/constants.json +19 -10
- data/static/info_arch.json +73 -0
- data/static/previews.json +27 -0
- data/static/statuses.json +1 -0
- metadata +4 -2
@@ -4,9 +4,6 @@ module Primer
|
|
4
4
|
module OpenProject
|
5
5
|
# A ViewComponent PageHeader inspired by the primer react variant
|
6
6
|
class PageHeader < Primer::Component
|
7
|
-
HEADING_TAG_OPTIONS = [:h1, :h2, :h3, :h4, :h5, :h6].freeze
|
8
|
-
HEADING_TAG_FALLBACK = :h1
|
9
|
-
|
10
7
|
DEFAULT_HEADER_VARIANT = :medium
|
11
8
|
HEADER_VARIANT_OPTIONS = [
|
12
9
|
DEFAULT_HEADER_VARIANT,
|
@@ -27,21 +24,24 @@ module Primer
|
|
27
24
|
DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
|
28
25
|
DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
|
29
26
|
|
27
|
+
STATE_DEFAULT = :show
|
28
|
+
STATE_EDIT = :edit
|
29
|
+
STATE_OPTIONS = [STATE_DEFAULT, STATE_EDIT].freeze
|
30
|
+
|
30
31
|
status :open_project
|
31
32
|
|
32
33
|
# The title of the page header
|
33
34
|
#
|
34
35
|
# @param tag [Symbol] <%= one_of(Primer::Beta::Heading::TAG_OPTIONS) %>
|
35
36
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
36
|
-
renders_one :title, lambda { |
|
37
|
-
system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, HEADING_TAG_FALLBACK)
|
37
|
+
renders_one :title, lambda { |variant: DEFAULT_HEADER_VARIANT, **system_arguments|
|
38
38
|
system_arguments[:classes] = class_names(
|
39
39
|
system_arguments[:classes],
|
40
40
|
"PageHeader-title",
|
41
41
|
"PageHeader-title--#{variant}"
|
42
42
|
)
|
43
43
|
|
44
|
-
Primer::
|
44
|
+
Primer::OpenProject::PageHeader::Title.new(state: @state, **system_arguments)
|
45
45
|
}
|
46
46
|
|
47
47
|
# Optional description below the title row
|
@@ -235,7 +235,7 @@ module Primer
|
|
235
235
|
|
236
236
|
# @param mobile_menu_label [String] The tooltip label of the mobile menu
|
237
237
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
238
|
-
def initialize(mobile_menu_label: I18n.t("label_more"), **system_arguments)
|
238
|
+
def initialize(mobile_menu_label: I18n.t("label_more"), state: STATE_DEFAULT, **system_arguments)
|
239
239
|
@system_arguments = deny_tag_argument(**system_arguments)
|
240
240
|
@mobile_menu_label = mobile_menu_label
|
241
241
|
|
@@ -246,6 +246,8 @@ module Primer
|
|
246
246
|
"PageHeader"
|
247
247
|
)
|
248
248
|
|
249
|
+
@state = fetch_or_fallback(STATE_OPTIONS, state, STATE_DEFAULT)
|
250
|
+
|
249
251
|
@mobile_action_menu = Primer::Alpha::ActionMenu.new(
|
250
252
|
display: MOBILE_ACTIONS_DISPLAY,
|
251
253
|
anchor_align: :end
|
@@ -263,6 +265,10 @@ module Primer
|
|
263
265
|
actions.count > 1
|
264
266
|
end
|
265
267
|
|
268
|
+
def show_state?
|
269
|
+
@state == STATE_DEFAULT
|
270
|
+
end
|
271
|
+
|
266
272
|
private
|
267
273
|
|
268
274
|
def set_action_arguments(system_arguments, scheme: nil)
|
@@ -58,6 +58,10 @@ module Primer
|
|
58
58
|
def with_bad_csrf_token
|
59
59
|
render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, csrf_token: "i_am_a_criminal"))
|
60
60
|
end
|
61
|
+
|
62
|
+
def with_turbo
|
63
|
+
render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.toggle_switch_index_path, turbo: true))
|
64
|
+
end
|
61
65
|
end
|
62
66
|
end
|
63
67
|
end
|
@@ -1,5 +1,10 @@
|
|
1
|
-
<%= render Primer::OpenProject::PageHeader.new do |header| %>
|
2
|
-
<%=
|
1
|
+
<%= render Primer::OpenProject::PageHeader.new(state: in_edit_state ? :edit : :show) do |header| %>
|
2
|
+
<%= header.with_title(variant: variant) do |t| %>
|
3
|
+
<% if in_edit_state %>
|
4
|
+
<%= t.with_editable_form(model: nil, update_path: "/foo", cancel_path: "/bar") %>
|
5
|
+
<% end %>
|
6
|
+
<%= title %>
|
7
|
+
<% end %>
|
3
8
|
<%= header.with_description { description } %>
|
4
9
|
<%= header.with_leading_action(icon: with_leading_action, href: '#', 'aria-label': "A leading action") if with_leading_action && with_leading_action != :none %>
|
5
10
|
<%= header.with_breadcrumbs(breadcrumb_items) %>
|
@@ -24,13 +24,15 @@ module Primer
|
|
24
24
|
# @param with_leading_action [Symbol] octicon
|
25
25
|
# @param with_actions [Boolean]
|
26
26
|
# @param with_tab_nav [Boolean]
|
27
|
+
# @param in_edit_state [Boolean]
|
27
28
|
def playground(
|
28
29
|
variant: :medium,
|
29
30
|
title: "Hello",
|
30
31
|
description: "Last updated 5 minutes ago by XYZ.",
|
31
32
|
with_leading_action: :"none",
|
32
33
|
with_actions: true,
|
33
|
-
with_tab_nav: false
|
34
|
+
with_tab_nav: false,
|
35
|
+
in_edit_state: false
|
34
36
|
)
|
35
37
|
breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
|
36
38
|
|
@@ -40,7 +42,8 @@ module Primer
|
|
40
42
|
with_leading_action: with_leading_action,
|
41
43
|
with_actions: with_actions,
|
42
44
|
breadcrumb_items: breadcrumb_items,
|
43
|
-
with_tab_nav: with_tab_nav
|
45
|
+
with_tab_nav: with_tab_nav,
|
46
|
+
in_edit_state: in_edit_state })
|
44
47
|
end
|
45
48
|
|
46
49
|
# @label Large title
|
@@ -54,6 +57,18 @@ module Primer
|
|
54
57
|
end
|
55
58
|
end
|
56
59
|
|
60
|
+
# @label Editable title
|
61
|
+
def editable_title
|
62
|
+
breadcrumb_items = [{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"]
|
63
|
+
render(Primer::OpenProject::PageHeader.new(state: :edit)) do |header|
|
64
|
+
header.with_title do |title|
|
65
|
+
title.with_editable_form(model: nil, update_path: "/foo", cancel_path: "/bar")
|
66
|
+
"Hello"
|
67
|
+
end
|
68
|
+
header.with_breadcrumbs(breadcrumb_items)
|
69
|
+
end
|
70
|
+
end
|
71
|
+
|
57
72
|
# @label With actions
|
58
73
|
def actions
|
59
74
|
render_with_template(locals: {})
|
data/static/arguments.json
CHANGED
@@ -2986,6 +2986,12 @@
|
|
2986
2986
|
"default": "`:start`",
|
2987
2987
|
"description": "Which side of the toggle switch to render the status label. One of `:end` or `:start`."
|
2988
2988
|
},
|
2989
|
+
{
|
2990
|
+
"name": "turbo",
|
2991
|
+
"type": "Boolean",
|
2992
|
+
"default": "`false`",
|
2993
|
+
"description": "Whether or not to request a turbo stream and render the response as such."
|
2994
|
+
},
|
2989
2995
|
{
|
2990
2996
|
"name": "system_arguments",
|
2991
2997
|
"type": "Hash",
|
@@ -5193,6 +5199,22 @@
|
|
5193
5199
|
}
|
5194
5200
|
]
|
5195
5201
|
},
|
5202
|
+
{
|
5203
|
+
"component": "OpenProject::PageHeader::Title",
|
5204
|
+
"status": "open_project",
|
5205
|
+
"a11y_reviewed": false,
|
5206
|
+
"short_name": "OpenProjectPageHeaderTitle",
|
5207
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header/title.rb",
|
5208
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/title/default/",
|
5209
|
+
"parameters": [
|
5210
|
+
{
|
5211
|
+
"name": "system_arguments",
|
5212
|
+
"type": "Hash",
|
5213
|
+
"default": "N/A",
|
5214
|
+
"description": "[System arguments](/system-arguments)"
|
5215
|
+
}
|
5216
|
+
]
|
5217
|
+
},
|
5196
5218
|
{
|
5197
5219
|
"component": "OpenProject::SidePanel",
|
5198
5220
|
"status": "open_project",
|
data/static/audited_at.json
CHANGED
@@ -125,6 +125,7 @@
|
|
125
125
|
"Primer::OpenProject::PageHeader": "",
|
126
126
|
"Primer::OpenProject::PageHeader::Dialog": "",
|
127
127
|
"Primer::OpenProject::PageHeader::Menu": "",
|
128
|
+
"Primer::OpenProject::PageHeader::Title": "",
|
128
129
|
"Primer::OpenProject::SidePanel": "",
|
129
130
|
"Primer::OpenProject::SidePanel::Section": "",
|
130
131
|
"Primer::OpenProject::SubHeader": "",
|
data/static/constants.json
CHANGED
@@ -1479,25 +1479,34 @@
|
|
1479
1479
|
"medium",
|
1480
1480
|
"large"
|
1481
1481
|
],
|
1482
|
-
"HEADING_TAG_FALLBACK": "h1",
|
1483
|
-
"HEADING_TAG_OPTIONS": [
|
1484
|
-
"h1",
|
1485
|
-
"h2",
|
1486
|
-
"h3",
|
1487
|
-
"h4",
|
1488
|
-
"h5",
|
1489
|
-
"h6"
|
1490
|
-
],
|
1491
1482
|
"MOBILE_ACTIONS_DISPLAY": [
|
1492
1483
|
"flex",
|
1493
1484
|
"none"
|
1494
1485
|
],
|
1495
|
-
"Menu": "Primer::OpenProject::PageHeader::Menu"
|
1486
|
+
"Menu": "Primer::OpenProject::PageHeader::Menu",
|
1487
|
+
"STATE_DEFAULT": "show",
|
1488
|
+
"STATE_EDIT": "edit",
|
1489
|
+
"STATE_OPTIONS": [
|
1490
|
+
"show",
|
1491
|
+
"edit"
|
1492
|
+
],
|
1493
|
+
"Title": "Primer::OpenProject::PageHeader::Title"
|
1496
1494
|
},
|
1497
1495
|
"Primer::OpenProject::PageHeader::Dialog": {
|
1498
1496
|
},
|
1499
1497
|
"Primer::OpenProject::PageHeader::Menu": {
|
1500
1498
|
},
|
1499
|
+
"Primer::OpenProject::PageHeader::Title": {
|
1500
|
+
"HEADING_TAG_FALLBACK": "h1",
|
1501
|
+
"HEADING_TAG_OPTIONS": [
|
1502
|
+
"h1",
|
1503
|
+
"h2",
|
1504
|
+
"h3",
|
1505
|
+
"h4",
|
1506
|
+
"h5",
|
1507
|
+
"h6"
|
1508
|
+
]
|
1509
|
+
},
|
1501
1510
|
"Primer::OpenProject::SidePanel": {
|
1502
1511
|
"Section": "Primer::OpenProject::SidePanel::Section"
|
1503
1512
|
},
|
data/static/info_arch.json
CHANGED
@@ -9334,6 +9334,12 @@
|
|
9334
9334
|
"default": "`:start`",
|
9335
9335
|
"description": "Which side of the toggle switch to render the status label. One of `:end` or `:start`."
|
9336
9336
|
},
|
9337
|
+
{
|
9338
|
+
"name": "turbo",
|
9339
|
+
"type": "Boolean",
|
9340
|
+
"default": "`false`",
|
9341
|
+
"description": "Whether or not to request a turbo stream and render the response as such."
|
9342
|
+
},
|
9337
9343
|
{
|
9338
9344
|
"name": "system_arguments",
|
9339
9345
|
"type": "Hash",
|
@@ -9501,6 +9507,20 @@
|
|
9501
9507
|
"color-contrast"
|
9502
9508
|
]
|
9503
9509
|
}
|
9510
|
+
},
|
9511
|
+
{
|
9512
|
+
"preview_path": "primer/alpha/toggle_switch/with_turbo",
|
9513
|
+
"name": "with_turbo",
|
9514
|
+
"snapshot": "false",
|
9515
|
+
"skip_rules": {
|
9516
|
+
"wont_fix": [
|
9517
|
+
"region",
|
9518
|
+
"button-name"
|
9519
|
+
],
|
9520
|
+
"will_fix": [
|
9521
|
+
"color-contrast"
|
9522
|
+
]
|
9523
|
+
}
|
9504
9524
|
}
|
9505
9525
|
],
|
9506
9526
|
"subcomponents": [
|
@@ -17776,6 +17796,19 @@
|
|
17776
17796
|
]
|
17777
17797
|
}
|
17778
17798
|
},
|
17799
|
+
{
|
17800
|
+
"preview_path": "primer/open_project/page_header/editable_title",
|
17801
|
+
"name": "editable_title",
|
17802
|
+
"snapshot": "false",
|
17803
|
+
"skip_rules": {
|
17804
|
+
"wont_fix": [
|
17805
|
+
"region"
|
17806
|
+
],
|
17807
|
+
"will_fix": [
|
17808
|
+
"color-contrast"
|
17809
|
+
]
|
17810
|
+
}
|
17811
|
+
},
|
17779
17812
|
{
|
17780
17813
|
"preview_path": "primer/open_project/page_header/actions",
|
17781
17814
|
"name": "actions",
|
@@ -18004,6 +18037,46 @@
|
|
18004
18037
|
|
18005
18038
|
]
|
18006
18039
|
},
|
18040
|
+
{
|
18041
|
+
"fully_qualified_name": "Primer::OpenProject::PageHeader::Title",
|
18042
|
+
"description": "A Helper class to create a Title inside the PageHeader title slot\nIt should not be used standalone",
|
18043
|
+
"accessibility_docs": null,
|
18044
|
+
"is_form_component": false,
|
18045
|
+
"is_published": true,
|
18046
|
+
"requires_js": false,
|
18047
|
+
"component": "OpenProject::PageHeader::Title",
|
18048
|
+
"status": "open_project",
|
18049
|
+
"a11y_reviewed": false,
|
18050
|
+
"short_name": "OpenProjectPageHeaderTitle",
|
18051
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/page_header/title.rb",
|
18052
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/page_header/title/default/",
|
18053
|
+
"parameters": [
|
18054
|
+
{
|
18055
|
+
"name": "system_arguments",
|
18056
|
+
"type": "Hash",
|
18057
|
+
"default": "N/A",
|
18058
|
+
"description": "{{link_to_system_arguments_docs}}"
|
18059
|
+
}
|
18060
|
+
],
|
18061
|
+
"slots": [
|
18062
|
+
{
|
18063
|
+
"name": "editable_form",
|
18064
|
+
"description": null,
|
18065
|
+
"parameters": [
|
18066
|
+
|
18067
|
+
]
|
18068
|
+
}
|
18069
|
+
],
|
18070
|
+
"methods": [
|
18071
|
+
|
18072
|
+
],
|
18073
|
+
"previews": [
|
18074
|
+
|
18075
|
+
],
|
18076
|
+
"subcomponents": [
|
18077
|
+
|
18078
|
+
]
|
18079
|
+
},
|
18007
18080
|
{
|
18008
18081
|
"fully_qualified_name": "Primer::OpenProject::SidePanel",
|
18009
18082
|
"description": "Add a general description of component here\nAdd additional usage considerations or best practices that may aid the user to use the component correctly.",
|
data/static/previews.json
CHANGED
@@ -5391,6 +5391,19 @@
|
|
5391
5391
|
]
|
5392
5392
|
}
|
5393
5393
|
},
|
5394
|
+
{
|
5395
|
+
"preview_path": "primer/open_project/page_header/editable_title",
|
5396
|
+
"name": "editable_title",
|
5397
|
+
"snapshot": "false",
|
5398
|
+
"skip_rules": {
|
5399
|
+
"wont_fix": [
|
5400
|
+
"region"
|
5401
|
+
],
|
5402
|
+
"will_fix": [
|
5403
|
+
"color-contrast"
|
5404
|
+
]
|
5405
|
+
}
|
5406
|
+
},
|
5394
5407
|
{
|
5395
5408
|
"preview_path": "primer/open_project/page_header/actions",
|
5396
5409
|
"name": "actions",
|
@@ -7823,6 +7836,20 @@
|
|
7823
7836
|
"color-contrast"
|
7824
7837
|
]
|
7825
7838
|
}
|
7839
|
+
},
|
7840
|
+
{
|
7841
|
+
"preview_path": "primer/alpha/toggle_switch/with_turbo",
|
7842
|
+
"name": "with_turbo",
|
7843
|
+
"snapshot": "false",
|
7844
|
+
"skip_rules": {
|
7845
|
+
"wont_fix": [
|
7846
|
+
"region",
|
7847
|
+
"button-name"
|
7848
|
+
],
|
7849
|
+
"will_fix": [
|
7850
|
+
"color-contrast"
|
7851
|
+
]
|
7852
|
+
}
|
7826
7853
|
}
|
7827
7854
|
]
|
7828
7855
|
},
|
data/static/statuses.json
CHANGED
@@ -125,6 +125,7 @@
|
|
125
125
|
"Primer::OpenProject::PageHeader": "open_project",
|
126
126
|
"Primer::OpenProject::PageHeader::Dialog": "open_project",
|
127
127
|
"Primer::OpenProject::PageHeader::Menu": "open_project",
|
128
|
+
"Primer::OpenProject::PageHeader::Title": "open_project",
|
128
129
|
"Primer::OpenProject::SidePanel": "open_project",
|
129
130
|
"Primer::OpenProject::SidePanel::Section": "open_project",
|
130
131
|
"Primer::OpenProject::SubHeader": "open_project",
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: openproject-primer_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.41.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2024-
|
12
|
+
date: 2024-08-06 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionview
|
@@ -508,6 +508,8 @@ files:
|
|
508
508
|
- app/components/primer/open_project/page_header.rb
|
509
509
|
- app/components/primer/open_project/page_header/dialog.rb
|
510
510
|
- app/components/primer/open_project/page_header/menu.rb
|
511
|
+
- app/components/primer/open_project/page_header/title.html.erb
|
512
|
+
- app/components/primer/open_project/page_header/title.rb
|
511
513
|
- app/components/primer/open_project/page_header_element.d.ts
|
512
514
|
- app/components/primer/open_project/page_header_element.js
|
513
515
|
- app/components/primer/open_project/page_header_element.ts
|