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.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +19 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/toggle_switch.d.ts +4 -0
  4. data/app/assets/javascripts/primer_view_components.js +1 -1
  5. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  6. data/app/assets/styles/primer_view_components.css +1 -1
  7. data/app/assets/styles/primer_view_components.css.map +1 -1
  8. data/app/components/primer/alpha/action_list.css +1 -1
  9. data/app/components/primer/alpha/action_list.css.map +1 -1
  10. data/app/components/primer/alpha/action_list.pcss +1 -1
  11. data/app/components/primer/alpha/select_panel_element.js +43 -8
  12. data/app/components/primer/alpha/select_panel_element.ts +50 -9
  13. data/app/components/primer/alpha/toggle_switch.d.ts +4 -0
  14. data/app/components/primer/alpha/toggle_switch.js +16 -4
  15. data/app/components/primer/alpha/toggle_switch.rb +4 -2
  16. data/app/components/primer/alpha/toggle_switch.ts +19 -4
  17. data/app/components/primer/open_project/page_header/title.html.erb +7 -0
  18. data/app/components/primer/open_project/page_header/title.rb +69 -0
  19. data/app/components/primer/open_project/page_header.html.erb +1 -1
  20. data/app/components/primer/open_project/page_header.rb +13 -7
  21. data/lib/primer/view_components/version.rb +2 -2
  22. data/previews/primer/alpha/toggle_switch_preview.rb +4 -0
  23. data/previews/primer/open_project/page_header_preview/playground.html.erb +7 -2
  24. data/previews/primer/open_project/page_header_preview.rb +17 -2
  25. data/static/arguments.json +22 -0
  26. data/static/audited_at.json +1 -0
  27. data/static/constants.json +19 -10
  28. data/static/info_arch.json +73 -0
  29. data/static/previews.json +27 -0
  30. data/static/statuses.json +1 -0
  31. metadata +4 -2
@@ -20,7 +20,7 @@
20
20
  <div class="PageHeader-titleBar">
21
21
  <%= leading_action %>
22
22
  <%= title %>
23
- <% if actions.any? %>
23
+ <% if actions.any? && show_state? %>
24
24
  <div class="PageHeader-actions">
25
25
  <% actions.each do |action| %>
26
26
  <%= action %>
@@ -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 { |tag: HEADING_TAG_FALLBACK, variant: DEFAULT_HEADER_VARIANT, **system_arguments|
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::BaseComponent.new(**system_arguments)
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)
@@ -5,8 +5,8 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 39
9
- PATCH = 1
8
+ MINOR = 41
9
+ PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
@@ -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
- <%= header.with_title(variant: variant) { title } %>
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: {})
@@ -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",
@@ -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": "",
@@ -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
  },
@@ -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.39.1
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-07-26 00:00:00.000000000 Z
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