primer_view_components 0.0.116 → 0.0.117

Sign up to get free protection for your applications and to get access to all the features.
Files changed (152) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +34 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +2 -2
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list.css +1 -1
  8. data/app/components/primer/alpha/action_list.css.json +1 -1
  9. data/app/components/primer/alpha/action_list.css.map +1 -1
  10. data/app/components/primer/alpha/auto_complete/item.rb +4 -4
  11. data/app/components/primer/alpha/auto_complete.rb +6 -6
  12. data/app/components/primer/alpha/dialog.rb +0 -2
  13. data/app/components/primer/alpha/dropdown.rb +53 -53
  14. data/app/components/primer/alpha/hellip_button.rb +41 -0
  15. data/app/components/primer/alpha/hidden_text_expander.rb +1 -1
  16. data/app/components/primer/alpha/layout.rb +48 -48
  17. data/app/components/primer/alpha/menu.css +1 -1
  18. data/app/components/primer/alpha/menu.css.json +1 -1
  19. data/app/components/primer/alpha/menu.css.map +1 -1
  20. data/app/components/primer/alpha/menu.rb +5 -5
  21. data/app/components/primer/alpha/segmented_control.rb +20 -20
  22. data/app/components/primer/{tab_container_component.d.ts → alpha/tab_container.d.ts} +0 -0
  23. data/app/components/primer/{tab_container_component.js → alpha/tab_container.js} +0 -0
  24. data/app/components/primer/alpha/tab_container.rb +43 -0
  25. data/app/components/primer/{tab_container_component.ts → alpha/tab_container.ts} +0 -0
  26. data/app/components/primer/alpha/tab_nav.css +1 -1
  27. data/app/components/primer/alpha/tab_nav.css.json +1 -1
  28. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  29. data/app/components/primer/alpha/tab_nav.rb +32 -32
  30. data/app/components/primer/alpha/tool_tip.js +3 -7
  31. data/app/components/primer/alpha/tool_tip.ts +3 -7
  32. data/app/components/primer/alpha/tooltip.rb +18 -18
  33. data/app/components/primer/alpha/underline_nav.css +1 -1
  34. data/app/components/primer/alpha/underline_nav.css.json +1 -1
  35. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  36. data/app/components/primer/alpha/underline_nav.rb +18 -18
  37. data/app/components/primer/beta/auto_complete/item.rb +2 -3
  38. data/app/components/primer/beta/auto_complete.rb +14 -16
  39. data/app/components/primer/beta/avatar_stack.rb +12 -14
  40. data/app/components/primer/beta/blankslate.rb +0 -1
  41. data/app/components/primer/beta/border_box/header.rb +0 -2
  42. data/app/components/primer/beta/border_box.rb +0 -2
  43. data/app/components/primer/beta/breadcrumbs.css +1 -1
  44. data/app/components/primer/beta/breadcrumbs.css.json +1 -1
  45. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  46. data/app/components/primer/beta/breadcrumbs.rb +0 -1
  47. data/app/components/primer/beta/button.rb +9 -10
  48. data/app/components/primer/beta/button_group.rb +0 -1
  49. data/app/components/primer/beta/details.rb +0 -1
  50. data/app/components/primer/beta/flash.rb +0 -1
  51. data/app/components/primer/beta/link.rb +2 -3
  52. data/app/components/primer/beta/octicon.rb +0 -1
  53. data/app/components/primer/beta/popover.rb +0 -1
  54. data/app/components/primer/{state_component.css → beta/state.css} +0 -0
  55. data/app/components/primer/beta/state.css.json +1 -0
  56. data/app/components/primer/beta/state.css.map +1 -0
  57. data/app/components/primer/{state_component.pcss → beta/state.pcss} +0 -0
  58. data/app/components/primer/beta/state.rb +76 -0
  59. data/app/components/primer/{subhead_component.css → beta/subhead.css} +0 -0
  60. data/app/components/primer/beta/subhead.css.json +1 -0
  61. data/app/components/primer/beta/subhead.css.map +1 -0
  62. data/app/components/primer/{subhead_component.html.erb → beta/subhead.html.erb} +0 -0
  63. data/app/components/primer/{subhead_component.pcss → beta/subhead.pcss} +0 -0
  64. data/app/components/primer/beta/subhead.rb +135 -0
  65. data/app/components/primer/{timeline_item_component.css → beta/timeline_item.css} +0 -0
  66. data/app/components/primer/beta/timeline_item.css.json +1 -0
  67. data/app/components/primer/beta/timeline_item.css.map +1 -0
  68. data/app/components/primer/{timeline_item_component.html.erb → beta/timeline_item.html.erb} +0 -0
  69. data/app/components/primer/{timeline_item_component.pcss → beta/timeline_item.pcss} +0 -0
  70. data/app/components/primer/beta/timeline_item.rb +90 -0
  71. data/app/components/primer/beta/truncate.css +1 -1
  72. data/app/components/primer/beta/truncate.css.json +1 -1
  73. data/app/components/primer/beta/truncate.css.map +1 -1
  74. data/app/components/primer/beta/truncate.rb +0 -1
  75. data/app/components/primer/button_component.rb +9 -9
  76. data/app/components/primer/component.rb +0 -1
  77. data/app/components/primer/hellip_button.rb +2 -34
  78. data/app/components/primer/navigation/tab_component.rb +16 -16
  79. data/app/components/primer/primer.d.ts +1 -1
  80. data/app/components/primer/primer.js +1 -1
  81. data/app/components/primer/primer.pcss +3 -3
  82. data/app/components/primer/primer.ts +1 -1
  83. data/app/components/primer/state_component.rb +2 -69
  84. data/app/components/primer/subhead_component.rb +2 -128
  85. data/app/components/primer/tab_container_component.rb +2 -36
  86. data/app/components/primer/timeline_item_component.rb +5 -78
  87. data/app/forms/example_toggle_switch_form/example_field_caption.html.erb +1 -0
  88. data/app/forms/example_toggle_switch_form.rb +8 -0
  89. data/app/forms/submit_button_form.rb +4 -4
  90. data/app/lib/primer/tabbed_component_helper.rb +1 -1
  91. data/lib/primer/deprecations.rb +7 -13
  92. data/lib/primer/deprecations.yml +24 -0
  93. data/lib/primer/forms/button.html.erb +2 -2
  94. data/lib/primer/forms/dsl/toggle_switch_input.rb +35 -0
  95. data/lib/primer/forms/toggle_switch.html.erb +17 -0
  96. data/lib/primer/forms/toggle_switch.rb +19 -0
  97. data/lib/primer/forms/toggle_switch_form.rb +74 -0
  98. data/lib/primer/view_components/linters/subhead_component_migration_counter.rb +1 -1
  99. data/lib/primer/view_components/version.rb +1 -1
  100. data/lib/rubocop/cop/primer/component_name_migration.rb +2 -1
  101. data/lib/tasks/docs.rake +6 -6
  102. data/previews/primer/alpha/action_list_preview.rb +44 -44
  103. data/previews/primer/alpha/dropdown_preview.rb +97 -97
  104. data/previews/primer/alpha/hellip_button_preview.rb +24 -0
  105. data/previews/primer/alpha/layout_preview.rb +63 -63
  106. data/previews/primer/alpha/menu_preview/default.html.erb +5 -5
  107. data/previews/primer/alpha/menu_preview/playground.html.erb +5 -5
  108. data/previews/primer/alpha/segmented_control_preview.rb +60 -60
  109. data/previews/primer/alpha/tab_nav_preview.rb +22 -22
  110. data/previews/primer/alpha/tab_panels_preview.rb +2 -2
  111. data/previews/primer/alpha/tooltip_preview/with_multiple_on_a_page.html.erb +6 -6
  112. data/previews/primer/alpha/tooltip_preview.rb +12 -12
  113. data/previews/primer/alpha/underline_nav_preview.rb +4 -4
  114. data/previews/primer/alpha/underline_panels_preview.rb +8 -8
  115. data/previews/primer/beta/auto_complete_item_preview/default.html.erb +2 -2
  116. data/previews/primer/beta/auto_complete_item_preview/playground.html.erb +2 -2
  117. data/previews/primer/beta/auto_complete_item_preview/with_description.html.erb +3 -3
  118. data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +2 -2
  119. data/previews/primer/beta/auto_complete_preview.rb +18 -18
  120. data/previews/primer/beta/avatar_stack_preview.rb +32 -32
  121. data/previews/primer/beta/blankslate_preview.rb +40 -40
  122. data/previews/primer/beta/border_box_preview.rb +38 -38
  123. data/previews/primer/beta/breadcrumbs_preview.rb +2 -2
  124. data/previews/primer/beta/button_group_preview.rb +10 -10
  125. data/previews/primer/beta/button_preview/all_schemes.html.erb +4 -4
  126. data/previews/primer/beta/button_preview/invisible_all_visuals.html.erb +16 -16
  127. data/previews/primer/beta/button_preview/leading_visual.html.erb +2 -2
  128. data/previews/primer/beta/button_preview/trailing_action.html.erb +2 -2
  129. data/previews/primer/beta/button_preview/trailing_visual.html.erb +2 -2
  130. data/previews/primer/beta/button_preview/with_tooltip.html.erb +2 -2
  131. data/previews/primer/beta/details_preview.rb +6 -6
  132. data/previews/primer/beta/state_preview.rb +66 -0
  133. data/previews/primer/beta/subhead_preview/actions.html.erb +14 -0
  134. data/previews/primer/beta/subhead_preview.rb +99 -0
  135. data/previews/primer/beta/timeline_item_preview.rb +30 -0
  136. data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +1 -0
  137. data/previews/primer/forms/forms_preview.rb +2 -0
  138. data/static/arguments.json +118 -118
  139. data/static/audited_at.json +6 -0
  140. data/static/constants.json +67 -54
  141. data/static/statuses.json +12 -6
  142. metadata +36 -23
  143. data/app/components/primer/state_component.css.json +0 -1
  144. data/app/components/primer/state_component.css.map +0 -1
  145. data/app/components/primer/subhead_component.css.json +0 -1
  146. data/app/components/primer/subhead_component.css.map +0 -1
  147. data/app/components/primer/timeline_item_component.css.json +0 -1
  148. data/app/components/primer/timeline_item_component.css.map +0 -1
  149. data/previews/primer/hellip_button_preview.rb +0 -22
  150. data/previews/primer/state_component_preview.rb +0 -26
  151. data/previews/primer/subhead_component_preview.rb +0 -40
  152. data/previews/primer/timeline_item_component_preview.rb +0 -28
@@ -1 +0,0 @@
1
- {"name":"subhead_component","selectors":[".Subhead",".Subhead--spacious",".Subhead-heading",".Subhead-heading--danger",".Subhead-description",".Subhead-actions",".Subhead-actions+.Subhead-description"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["subhead_component.pcss"],"names":[],"mappings":"AAEA,SAIE,gFAAkF,CAHlF,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,iDAAmD,CADnD,wDAKF,CAGA,mBACE,mCACF,CAGA,iBAGE,aAAc,CAFd,cAAe,CACf,8CAAgD,CAEhD,OACF,CAGA,yBAEE,4BAA6B,CAD7B,gDAEF,CAGA,qBAEE,2BAA4B,CAC5B,WAAY,CAFZ,kDAAoD,CAGpD,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,6EAAiF,CAGjF,OAKF,CAHE,sCACE,iCACF","file":"subhead_component.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n display: flex;\n padding-bottom: var(--primer-stack-padding-condensed, 8px);\n margin-bottom: var(--primer-stack-gap-normal, 16px);\n border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n flex-flow: row wrap;\n justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n margin-top: var(--base-size-40, 40px);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n font-size: 24px;\n font-weight: var(--base-text-weight-normal, 400);\n flex: 1 1 auto;\n order: 0;\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-danger-fg);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n font-size: var(--primer-text-body-size-medium, 14px);\n color: var(--color-fg-muted);\n flex: 1 100%;\n order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n margin: var(--base-size-4, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);\n align-self: center;\n justify-content: flex-end;\n order: 1;\n\n & + .Subhead-description {\n margin-top: var(--base-size-4, 4px);\n }\n}\n"]}
@@ -1 +0,0 @@
1
- {"name":"timeline_item_component","selectors":[".TimelineItem",".TimelineItem:before",".TimelineItem:target .TimelineItem-badge",".TimelineItem-badge",".TimelineItem-badge--success",".TimelineItem-body",".TimelineItem-avatar",".TimelineItem-break",".TimelineItem--condensed",".TimelineItem--condensed:last-child",".TimelineItem--condensed .TimelineItem-badge"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["timeline_item_component.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,+CAAiD,CADjD,iDAAmD,CAFnD,iBAqBF,CAfE,qBAQE,0CAA2C,CAL3C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,yCAGF,CAEA,yCACE,yCAA0C,CAC1C,6CACF,CAGF,oBASE,kBAAmB,CACnB,+CAAgD,CAChD,4EAA8E,CAC9E,iBAAkB,CAJlB,2BAA4B,CAL5B,YAAa,CAWb,aAAc,CATd,6CAA+C,CAQ/C,sBAAuB,CANvB,kEAAqE,CADrE,gEAAkE,CALlE,iBAAkB,CAGlB,4CAA8C,CAF9C,SAaF,CAEA,6BAEE,8CAA+C,CAC/C,qDAA6D,CAF7D,iCAGF,CAEA,mBAIE,2BAA4B,CAC5B,SAAU,CAFV,iCAAmC,CADnC,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,4CAA6C,CAC7C,QAAS,CACT,kFAAoF,CANpF,4CAA8C,CAC9C,QAAS,CACT,2DAA8D,CAC9D,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,kCAgBF,CAZE,oCACE,kDACF,CAEA,6CAKE,4CAA6C,CAC7C,QAAS,CAFT,2BAA4B,CAH5B,+BAAiC,CAEjC,oCAAsC,CADtC,iCAKF","file":"timeline_item_component.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n position: relative;\n display: flex;\n padding: var(--primer-stack-padding-normal, 16px) 0;\n margin-left: var(--primer-stack-gap-normal, 16px);\n\n /* The Timeline */\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n display: block;\n width: var(--primer-borderWidth-thick, 2px);\n content: '';\n background-color: var(--color-border-muted);\n }\n\n &:target .TimelineItem-badge {\n border-color: var(--color-accent-emphasis);\n box-shadow: 0 0 0.2em var(--color-accent-muted);\n }\n}\n\n.TimelineItem-badge {\n position: relative;\n z-index: 1;\n display: flex;\n width: var(--primer-control-medium-size, 32px);\n height: var(--primer-control-medium-size, 32px);\n margin-right: var(--primer-controlStack-medium-gap-condensed, 8px);\n margin-left: calc(var(--primer-control-medium-size, 32px) / -2 + 1px);\n color: var(--color-fg-muted);\n align-items: center;\n background-color: var(--color-timeline-badge-bg);\n border: var(--primer-borderWidth-thick, 2px) solid var(--color-canvas-default);\n border-radius: 50%;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-success-emphasis);\n border: var(--primer-borderWidth-thin, 1px) solid transparent;\n}\n\n.TimelineItem-body {\n min-width: 0;\n max-width: 100%;\n margin-top: var(--base-size-4, 4px);\n color: var(--color-fg-muted);\n flex: auto;\n}\n\n.TimelineItem-avatar {\n position: absolute;\n left: -72px;\n z-index: 1;\n}\n\n.TimelineItem-break {\n position: relative;\n z-index: 1;\n height: var(--primer-stack-gap-spacious, 24px);\n margin: 0;\n margin-bottom: calc(var(--primer-stack-gap-normal, 16px) * -1);\n margin-left: -56px;\n background-color: var(--color-canvas-default);\n border: 0;\n border-top: var(--primer-borderWidth-thicker, 4px) solid var(--color-border-default);\n}\n\n.TimelineItem--condensed {\n padding-top: var(--base-size-4, 4px);\n padding-bottom: 0;\n\n /* TimelineItem--condensed is often grouped. (commits) */\n &:last-child {\n padding-bottom: var(--primer-stack-gap-normal, 16px);\n }\n\n & .TimelineItem-badge {\n height: var(--base-size-16, 16px);\n margin-top: var(--base-size-8, 8px);\n margin-bottom: var(--base-size-8, 8px);\n color: var(--color-fg-muted);\n background-color: var(--color-canvas-default);\n border: 0;\n }\n}\n"]}
@@ -1,22 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Primer
4
- # @label HellipButton
5
- class HellipButtonPreview < ViewComponent::Preview
6
- # @label Default Options
7
- #
8
- # @param aria_label [String]
9
- # @param inline [Boolean]
10
- def default(inline: false, aria_label: "No effect")
11
- render(Primer::HellipButton.new(inline: inline, "aria-label": aria_label))
12
- end
13
-
14
- # @label Playground
15
- #
16
- # @param aria_label [String]
17
- # @param inline [Boolean]
18
- def playground(inline: false, aria_label: "No effect")
19
- render(Primer::HellipButton.new(inline: inline, "aria-label": aria_label))
20
- end
21
- end
22
- end
@@ -1,26 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Primer
4
- # @label StateComponent
5
- class StateComponentPreview < ViewComponent::Preview
6
- # @label Playground
7
- #
8
- # @param title [String]
9
- # @param tag [Symbol] select [span, div]
10
- # @param size [Symbol] select [default, small]
11
- # @param scheme [Symbol] select [default, open, closed, merged]
12
- def playground(title: "State", scheme: :default, size: :default, tag: :span)
13
- render(Primer::StateComponent.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" }
14
- end
15
-
16
- # @label Default
17
- #
18
- # @param title [String]
19
- # @param tag [Symbol] select [span, div]
20
- # @param size [Symbol] select [default, small]
21
- # @param scheme [Symbol] select [default, open, closed, merged]
22
- def default(title: "State", scheme: :default, size: :default, tag: :span)
23
- render(Primer::StateComponent.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" }
24
- end
25
- end
26
- end
@@ -1,40 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Primer
4
- # @label SubheadComponent
5
- class SubheadComponentPreview < ViewComponent::Preview
6
- # @label Playground
7
- #
8
- # @param spacious [Boolean]
9
- # @param hide_border [Boolean]
10
- # @param heading_danger [Boolean]
11
- # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
12
- def playground(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
13
- render(Primer::SubheadComponent.new(spacious: spacious, hide_border: hide_border)) do |component|
14
- component.with_heading(tag: heading_tag, danger: heading_danger) do
15
- "My Heading"
16
- end
17
- component.with_description do
18
- "My Description"
19
- end
20
- end
21
- end
22
-
23
- # @label Default Options
24
- #
25
- # @param spacious [Boolean]
26
- # @param hide_border [Boolean]
27
- # @param heading_danger [Boolean]
28
- # @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
29
- def default(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
30
- render(Primer::SubheadComponent.new(spacious: spacious, hide_border: hide_border)) do |component|
31
- component.with_heading(tag: heading_tag, danger: heading_danger) do
32
- "My Heading"
33
- end
34
- component.with_description do
35
- "My Description"
36
- end
37
- end
38
- end
39
- end
40
- end
@@ -1,28 +0,0 @@
1
- # frozen_string_literal: true
2
-
3
- module Primer
4
- # @label TimelineItemComponent
5
- class TimelineItemComponentPreview < ViewComponent::Preview
6
- # @label Playground
7
- #
8
- # @param condensed [Boolean]
9
- def playground(condensed: false)
10
- render(Primer::TimelineItemComponent.new(condensed: condensed)) do |component|
11
- component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
12
- component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
13
- component.with_body { "Success!" }
14
- end
15
- end
16
-
17
- # @label Default
18
- #
19
- # @param condensed [Boolean]
20
- def default(condensed: false)
21
- render(Primer::TimelineItemComponent.new(condensed: condensed)) do |component|
22
- component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
23
- component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
24
- component.with_body { "Success!" }
25
- end
26
- end
27
- end
28
- end