openproject-primer_view_components 0.11.0 → 0.13.0

data/previews/primer/alpha/action_menu_preview/with_actions.html.erb

@@ -8,14 +8,15 @@
 
 <%= render(Primer::Alpha::ActionMenu.new) do |component| %>
   <% component.with_show_button { "Trigger" } %>
-  <% component.with_item(label: "Alert", tag: :button, id: "alert-item") %>
-  <% component.with_item(label: "Navigate", tag: :a, content_arguments: { href: action_menu_landing_path }) %>
-  <% component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }) %>
+  <% component.with_item(label: "Alert", tag: :button, id: "alert-item", disabled: disable_items) %>
+  <% component.with_item(label: "Navigate", tag: :a, content_arguments: { href: action_menu_landing_path }, disabled: disable_items) %>
+  <% component.with_item(label: "Copy text", tag: :"clipboard-copy", content_arguments: { value: "Text to copy" }, disabled: disable_items) %>
   <% component.with_item(
     label: "Submit form",
-    href: action_menu_form_action_path,
+    href: action_menu_form_action_path(format: route_format),
     form_arguments: {
       name: "foo", value: "bar", method: :post
-    }
+    },
+    disabled: disable_items
   ) %>
 <% end %>

data/previews/primer/alpha/action_menu_preview.rb

@@ -216,7 +216,10 @@ module Primer
 
       # @label With actions
       #
-      def with_actions; end
+      # @param disable_items toggle
+      def with_actions(disable_items: false, route_format: :html)
+        render_with_template(locals: { disable_items: disable_items, route_format: route_format })
+      end
 
       # @label Single select form
       #
@@ -224,6 +227,12 @@ module Primer
         render_with_template(locals: { route_format: route_format })
       end
 
+      # @label Single select form items
+      #
+      def single_select_form_items(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
+
       # @label Multiple select form
       #
       def multiple_select_form(route_format: :html)

data/previews/primer/alpha/check_box_group_preview.rb

@@ -9,17 +9,20 @@ module Primer
       # @param name text
       # @param label text
       # @param caption text
+      # @param validation_message text
       # @param disabled toggle
       def playground(
         name: "my-check-group",
         label: "I would go into battle with:",
         caption: "Qa'pla!",
+        validation_message: nil,
         disabled: false
       )
         system_arguments = {
           name: name,
           label: label,
           caption: caption,
+          validation_message: validation_message,
           disabled: disabled
         }
 
@@ -41,6 +44,16 @@ module Primer
         end
       end
 
+      # @label Invalid
+      def invalid
+        render(Primer::Alpha::CheckBoxGroup.new(validation_message: "Please choose at least one", name: "my-check-group", label: "I would go into battle with:")) do |component|
+          component.check_box(label: "Jean-Luc Picard", value: "picard4")
+          component.check_box(label: "Hikaru Sulu", value: "sulu4")
+          component.check_box(label: "Kathryn Janeway", value: "janeway4")
+          component.check_box(label: "Benjamin Sisko", value: "sisko4")
+        end
+      end
+
       # @!group Options
       # @snapshot
       #

data/previews/primer/alpha/check_box_preview.rb

@@ -24,6 +24,7 @@ module Primer
       )
         system_arguments = {
           name: name,
+          id: id,
           value: value,
           label: label,
           caption: caption,

data/previews/primer/alpha/dialog_preview/autofocus_element.html.erb

@@ -0,0 +1,8 @@
+<%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: "Dialog")) do |d| %>
+  <% d.with_show_button { "Show Dialog" } %>
+  <% d.with_body do %>
+    <form>
+      <input type="text" placeholder="This element is focused on open" autofocus>
+    </form>
+  <% end %>
+<% end %>

data/previews/primer/alpha/dialog_preview/with_header.html.erb

@@ -0,0 +1,5 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: title, subtitle: subtitle)) do |d| %>
+  <% d.with_show_button { button_text } %>
+  <% d.with_body { "Content" } %>
+  <% d.with_header(show_divider: show_divider, variant: header_variant) %>
+<% end %>

data/previews/primer/alpha/dialog_preview.rb

@@ -60,6 +60,23 @@ module Primer
         end
       end
 
+      # @label With Header
+      #
+      # @param title [String] text
+      # @param subtitle [String] text
+      # @param header_variant [Symbol] select [medium, large]
+      # @param button_text [String] text
+      # @param show_divider [Boolean] toggle
+      def with_header(title: "Test Dialog", subtitle: nil, header_variant: :medium, button_text: "Show Dialog", show_divider: true)
+        render_with_template(locals: {
+                               title: title,
+                               subtitle: subtitle,
+                               header_variant: header_variant,
+                               button_text: button_text,
+                               show_divider: show_divider
+                             })
+      end
+
       # @label With Footer
       #
       # @param title [String] text
@@ -149,6 +166,11 @@ module Primer
                                show_divider: show_divider
                              })
       end
+
+      # @label Autofocus element with autofocus attribute
+      def autofocus_element
+        render_with_template(locals: {})
+      end
     end
   end
 end

data/previews/primer/alpha/overlay_preview.rb

@@ -165,7 +165,7 @@ module Primer
       end
 
       # @label In an ActionMenu
-      def in_an_action_menu()
+      def in_an_action_menu
         render_with_template(locals: {})
       end
 

data/previews/primer/alpha/radio_button_group_preview.rb

@@ -9,17 +9,20 @@ module Primer
       # @param name text
       # @param label text
       # @param caption text
+      # @param validation_message text
       # @param disabled toggle
       def playground(
         name: "my-radio-group",
         label: "Question: what kind of bear is best?",
         caption: "There are basically two schools of thought",
+        validation_message: nil,
         disabled: false
       )
         system_arguments = {
           name: name,
           label: label,
           caption: caption,
+          validation_message: validation_message,
           disabled: disabled
         }
 
@@ -40,6 +43,16 @@ module Primer
         end
       end
 
+      # @label Invalid
+      # @snapshot
+      def invalid
+        render(Primer::Alpha::RadioButtonGroup.new(validation_message: "Please select an option", name: "my-radio-group", label: "Question: what kind of bear is best?")) do |component|
+          component.radio_button(label: "Bears", value: "bears")
+          component.radio_button(label: "Beets", value: "beets")
+          component.radio_button(label: "Battlestar Galactica", value: "bsg")
+        end
+      end
+
       # @!group Options
       #
       # @label With caption

data/previews/primer/alpha/radio_button_preview.rb

@@ -24,6 +24,7 @@ module Primer
       )
         system_arguments = {
           name: name,
+          id: id,
           value: value,
           label: label,
           caption: caption,
@@ -51,7 +52,7 @@ module Primer
       # @label Checked
       # @snapshot
       def checked
-        render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2", checked: true ))
+        render(Primer::Alpha::RadioButton.new(name: "my-radio-button", label: "Battlestar Galactica", value: "bsg2", checked: true))
       end
 
       # @label Visually hidden label

data/previews/primer/alpha/segmented_control_preview.rb

@@ -100,6 +100,41 @@ module Primer
       end
       # @!endgroup
 
+      # @!group Trailing Label
+      # @label Size small
+      # @snapshot
+      def trailing_label_width_small
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :small)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+
+      # @label Size medium
+      # @snapshot
+      def trailing_label_width_medium
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :medium)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+
+      # @label Size large
+      # @snapshot
+      def trailing_label_width_large
+        render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :large)) do |component|
+          component.with_item(label: "Monthly")
+          component.with_item(label: "Yearly", selected: true) do |button|
+            button.with_trailing_visual_label(scheme: :accent) { "-8%" }
+          end
+        end
+      end
+      # @!endgroup
+
       # @!group Icons only
       # @label Size small
       # @snapshot

data/previews/primer/alpha/text_field_preview/input_group_leading_action_menu.html.erb

@@ -0,0 +1,21 @@
+ 
+<%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
+  <%= form_with(url: action_menu_form_action_path(format: route_format)) do |f| %>
+    <%= render(Primer::Alpha::ActionMenu.new(select_variant: :single, form_arguments: { builder: f, name: "foo" })) do |menu| %>
+      <% menu.with_show_button(classes: "rounded-right-0 border-right-0") { |button| button.with_trailing_action_icon(icon: :"triangle-down"); "Filter" } %>
+      <% menu.with_item(label: "Fast forward", data: { value: "fast_forward" }) %>
+      <% menu.with_item(label: "Recursive", data: { value: "recursive" }) %>
+      <% menu.with_item(label: "Ours", data: { value: "ours" }) %>
+      <% menu.with_item(label: "Resolve") %>
+    <% end %>
+  <% end %>
+  <%= render(Primer::Alpha::TextField.new(
+    name: "message",
+    placeholder: "What's happening?",
+    label: "What is your current status?",
+    classes: "rounded-left-0",
+    visually_hide_label: true,
+    value: "Some value",
+    inset: true,
+    )) %>
+<% end %>

data/previews/primer/alpha/text_field_preview/input_group_leading_button.html.erb

@@ -0,0 +1,18 @@
+
+<%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
+  <%= render(Primer::Beta::IconButton.new(
+    classes: "rounded-right-0 border-right-0",
+    icon: :smiley,
+    aria: { label: "Emoji" }
+    )
+  ) %>
+  <%= render(Primer::Alpha::TextField.new(
+    name: "message",
+    placeholder: "What's happening?",
+    label: "What is your current status?",
+    classes: "rounded-left-0",
+    visually_hide_label: true,
+    value: "Some value",
+    inset: true,
+    )) %>
+<% end %>

data/previews/primer/alpha/text_field_preview/input_group_trailing_button.html.erb

@@ -0,0 +1,18 @@
+
+<%= render(Primer::BaseComponent.new(tag: :div, flex_items: :center, display: :flex)) do %>
+  <%= render(Primer::Alpha::TextField.new(
+    name: "message",
+    placeholder: "What's happening?",
+    label: "What is your current status?",
+    classes: "rounded-right-0",
+    visually_hide_label: true,
+    value: "Some value",
+    inset: true,
+    )) %>
+    <%= render(Primer::Beta::IconButton.new(
+    classes: "rounded-left-0 border-left-0",
+    icon: :smiley,
+    aria: { label: "Emoji" }
+    )
+  ) %>
+<% end %>

data/previews/primer/alpha/text_field_preview.rb

@@ -189,6 +189,27 @@ module Primer
       end
       #
       # @!endgroup
+
+      # @label Input group with leading button
+      #
+      # @snapshot
+      def input_group_leading_button
+        render_with_template
+      end
+
+      # @label Input group with trailing button
+      #
+      # @snapshot
+      def input_group_trailing_button
+        render_with_template
+      end
+
+      # @label Input group with ActionMenu
+      #
+      # @snapshot
+      def input_group_leading_action_menu(route_format: :html)
+        render_with_template(locals: { route_format: route_format })
+      end
     end
   end
 end

data/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb

@@ -0,0 +1,23 @@
+<%= render(Primer::Alpha::Dialog.new(id: "my-dialog", title: "Confirm focus")) do |d| %>
+  <%= render(Primer::Alpha::Dialog::Body.new()) do %>
+    Are you sure you want to focus the input?
+  <% end %>
+  <%= render(Primer::Alpha::Dialog::Footer.new()) do %>
+    <%= render(Primer::Beta::Button.new(id: "yes-button", data: { "close-dialog-id": "my-dialog" })) { "Yes" } %>
+    <%= render(Primer::Beta::Button.new(scheme: :primary, data: { "close-dialog-id": "my-dialog" })) { "Yes but in green" } %>
+  <% end %>
+  <% d.with_show_button do |b| %>
+    Focus input
+    <% b.with_tooltip(text: "This is a tooltip in an Overlay") %>
+  <% end %>
+<% end %>
+<label>
+  An input
+  <input type="text" id="input">
+</label>
+<script>
+  document.querySelector('#my-dialog').addEventListener('cancel', function () {
+    console.log('!!')
+    setTimeout(() => document.querySelector('#input').focus(), 0);
+  });
+</script>

data/previews/primer/alpha/tooltip_preview.rb

@@ -78,11 +78,16 @@ module Primer
       # @!endgroup
 
       # @label Tooltip inside Primer::Alpha::Overlay
-      def tooltip_inside_primer_overlay(direction: :s, tooltip_text: "You can press a button")
+      def tooltip_inside_primer_overlay
         render_with_template(
           locals: {}
         )
       end
+
+      # @label Tooltip with button moving focus to input
+      def tooltip_with_dialog_moving_focus_to_input
+        render_with_template(locals: {})
+      end
     end
   end
 end

data/previews/primer/beta/button_group_preview.rb

@@ -55,16 +55,16 @@ module Primer
       # @snapshot
       def all_tags
         render(Primer::Beta::ButtonGroup.new) do |component|
-          component.with_button(id: "button-1", tag: :button) do |component|
-            component.with_tooltip(text: "Button Tooltip")
+          component.with_button(id: "button-1", tag: :button) do |button|
+            button.with_tooltip(text: "Button Tooltip")
             "Button 1"
           end
-          component.with_button(id: "button-2", tag: :a) do |component|
-            component.with_tooltip(text: "Button Tooltip")
+          component.with_button(id: "button-2", tag: :a) do |button|
+            button.with_tooltip(text: "Button Tooltip")
             "Button 2"
           end
-          component.with_button(id: "button-3", tag: :summary) do |component|
-            component.with_tooltip(text: "Button Tooltip")
+          component.with_button(id: "button-3", tag: :summary) do |button|
+            button.with_tooltip(text: "Button Tooltip")
             "Button 3"
           end
         end

data/previews/primer/beta/button_preview.rb

@@ -18,6 +18,7 @@ module Primer
       # @param size select [small, medium, large]
       # @param block toggle
       # @param disabled toggle
+      # @param inactive toggle
       # @param align_content select [center, start]
       # @param tag select [a, summary, button]
       def playground(
@@ -27,7 +28,8 @@ module Primer
         id: "button-preview",
         align_content: :center,
         tag: :button,
-        disabled: false
+        disabled: false,
+        inactive: false
       )
         render(Primer::Beta::Button.new(
                  scheme: scheme,
@@ -36,7 +38,8 @@ module Primer
                  id: id,
                  align_content: align_content,
                  tag: tag,
-                 disabled: disabled
+                 disabled: disabled,
+                 inactive: inactive
                )) do |_c|
           "Button"
         end
@@ -166,7 +169,7 @@ module Primer
         disabled: false
       )
         render_with_template(locals: {
-                               disabled: disabled,
+                               disabled: disabled
                              })
       end
 
@@ -341,6 +344,21 @@ module Primer
                                align_content: align_content
                              })
       end
+
+      # @label Inactive
+      # @param inactive toggle
+      # @snapshot
+      def inactive(
+        id: "button-preview",
+        inactive: true
+      )
+        render(Primer::Beta::Button.new(
+                 id: id,
+                 inactive: inactive
+               )) do |_c|
+          "Button"
+        end
+      end
     end
   end
 end

data/previews/primer/beta/icon_button_preview.rb

@@ -9,6 +9,7 @@ module Primer
       # @param size select [small, medium, large]
       # @param aria_label text
       # @param disabled toggle
+      # @param inactive toggle
       # @param tag select [a, summary, button]
       # @param icon [Symbol] octicon
       # @param show_tooltip toggle
@@ -18,6 +19,7 @@ module Primer
         id: "button-preview",
         tag: :button,
         disabled: false,
+        inactive: false,
         icon: :plus,
         aria_label: "Button",
         show_tooltip: true
@@ -28,6 +30,7 @@ module Primer
                  id: id,
                  tag: tag,
                  disabled: disabled,
+                 inactive: inactive,
                  icon: icon,
                  "aria-label": aria_label,
                  show_tooltip: show_tooltip

data/previews/primer/{alpha → beta}/nav_list_preview/trailing_action.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::Alpha::NavList.new(aria: { label: "Workflow results" })) do |list| %>
+<%= render(Primer::Beta::NavList.new(aria: { label: "Workflow results" })) do |list| %>
   <% list.with_group do |group| %>
     <% group.with_heading(title: "Workflows") %>
     <% group.with_item(label: "Build and Test", href: "/workflows/1") do |item| %>

data/previews/primer/{alpha → beta}/nav_list_preview.rb

@@ -1,12 +1,12 @@
 # frozen_string_literal: true
 
 module Primer
-  module Alpha
+  module Beta
     # @label NavList
     class NavListPreview < ViewComponent::Preview
       # @label Playground
       def playground
-        render(Primer::Alpha::NavList.new(selected_item_id: :collaborators)) do |list|
+        render(Primer::Beta::NavList.new(selected_item_id: :collaborators)) do |list|
           list.with_heading(title: "Repository settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -34,7 +34,7 @@ module Primer
       # @label Default
       # @snapshot
       def default
-        render(Primer::Alpha::NavList.new(selected_item_id: :code_review_limits)) do |list|
+        render(Primer::Beta::NavList.new(selected_item_id: :code_review_limits)) do |list|
           list.with_heading(title: "Repository settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -77,7 +77,7 @@ module Primer
       # @label Top-level items
       #
       def top_level_items
-        render(Primer::Alpha::NavList.new) do |list|
+        render(Primer::Beta::NavList.new) do |list|
           list.with_heading(title: "Account settings")
 
           list.with_item(label: "General", href: "/general") do |item|
@@ -105,7 +105,7 @@ module Primer
       # @label Show more item
       # @snapshot
       def show_more_item
-        render(Primer::Alpha::NavList.new(aria: { label: "My favorite foods" })) do |list|
+        render(Primer::Beta::NavList.new(aria: { label: "My favorite foods" })) do |list|
           list.with_group do |group|
             group.with_heading(title: "My favorite foods")
             group.with_item(label: "Popplers", href: "/foods/popplers")

data/previews/primer/open_project/flex_layout_preview.rb

@@ -0,0 +1,73 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module OpenProject
+    # @label FlexLayout
+    class FlexLayoutPreview < ViewComponent::Preview
+      # @label Playground
+      # @param direction [Symbol] select [column, column_reverse, row, row_reverse]
+      # @param justify_content [Symbol] select [space_between, space_around, center, flex_start, flex_end]
+      def playground(direction: :row, justify_content: :flex_start)
+        render(Primer::OpenProject::FlexLayout.new(direction: direction, justify_content: justify_content)) do |component|
+          component.with_box(bg: :attention, p: 6) do
+            "Block 1"
+          end
+          component.with_box(bg: :accent, p: 6) do
+            "Block 2"
+          end
+        end
+      end
+
+      # @label Default
+      def default
+        render(Primer::OpenProject::FlexLayout.new) do |component|
+          component.with_column(bg: :attention, p: 6) do
+            "Block 1"
+          end
+          component.with_column(bg: :accent, p: 6) do
+            "Block 2"
+          end
+        end
+      end
+
+      # @label Row layout
+      def row_layout
+        render(Primer::OpenProject::FlexLayout.new) do |component|
+          component.with_row(bg: :attention, p: 6) do
+            "Block 1"
+          end
+          component.with_row(bg: :accent, p: 6) do
+            "Block 2"
+          end
+        end
+      end
+
+      # @label Column layout
+      def column_layout
+        render(Primer::OpenProject::FlexLayout.new) do |component|
+          component.with_column(bg: :attention, p: 6) do
+            "Block 1"
+          end
+          component.with_column(bg: :accent, p: 6) do
+            "Block 2"
+          end
+        end
+      end
+
+      # @label Nested layout
+      def nested_layout
+        render(Primer::OpenProject::FlexLayout.new) do |component|
+          component.with_row(flex_layout: true) do |flex_child|
+            flex_child.with_column(bg: :attention, p: 3) { "Block 1" }
+            flex_child.with_column(bg: :success, p: 3) { "Block 2" }
+          end
+
+          component.with_row(bg: :accent, p: 6) { "Block 3" }
+        end
+      end
+    end
+  end
+end

data/previews/primer/open_project/grid_layout_preview.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+# Setup Playground to use all available component props
+# Setup Features to use individual component props and combinations
+
+module Primer
+  module OpenProject
+    # @label GridLayout
+    class GridLayoutPreview < ViewComponent::Preview
+      # @label Playground
+      def playground
+        render(Primer::OpenProject::GridLayout.new(css_class: "grid-layout", tag: :div)) do |component|
+          component.with_area(:area1, bg: :attention, p: 6) do
+            "Block 1"
+          end
+          component.with_area(:area2, bg: :accent, p: 6) do
+            "Block 2"
+          end
+        end
+      end
+
+      # The component can be used for easy layouting of multiple child components.
+      # The component sets classes as well the grid-area definitions. The actual grid template can then be defined a separate CSS file.
+      # @label Default
+      def default
+        render(Primer::OpenProject::GridLayout.new(css_class: "grid-layout", tag: :div)) do |component|
+          component.with_area(:area1, bg: :attention, p: 6) do
+            "Block 1"
+          end
+          component.with_area(:area2, bg: :accent, p: 6) do
+            "Block 2"
+          end
+        end
+      end
+    end
+  end
+end