openproject-primer_view_components 0.10.0 → 0.12.1

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/beta/button_preview.rb

@@ -166,7 +166,7 @@ module Primer
         disabled: false
       )
         render_with_template(locals: {
-                               disabled: disabled,
+                               disabled: disabled
                              })
       end
 

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/border_grid_preview.rb

@@ -0,0 +1,42 @@
+# 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 BorderGrid
+    class BorderGridPreview < ViewComponent::Preview
+
+      # @label Playground
+      # @param spacious [Boolean] toggle
+      def playground(spacious: false)
+        render(Primer::OpenProject::BorderGrid.new(spacious: spacious)) do |grid|
+          grid.with_row { "Block 1" }
+          grid.with_row { "Block 2" }
+          grid.with_row { "Block 3" }
+        end
+      end
+
+      # @label Default Options
+      #
+      # @snapshot
+      def default()
+        render(Primer::OpenProject::BorderGrid.new) do |grid|
+          grid.with_row { "Block 1" }
+          grid.with_row { "Block 2" }
+          grid.with_row { "Block 3" }
+        end
+      end
+
+      # @label Spacious
+      def spacious()
+        render(Primer::OpenProject::BorderGrid.new(spacious: true)) do |grid|
+          grid.with_row { "Block 1" }
+          grid.with_row { "Block 2" }
+          grid.with_row { "Block 3" }
+        end
+      end
+    end
+  end
+end

data/previews/primer/open_project/drag_handle_preview.rb

@@ -0,0 +1,23 @@
+# 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 DragHandle
+    class DragHandlePreview < ViewComponent::Preview
+      # @label Default
+      # @snapshot
+      def default(size: :small)
+        render(Primer::OpenProject::DragHandle.new(size: size))
+      end
+
+      # @label Playground
+      # @param size [Symbol] select [xsmall, small, medium]
+      def playground(size: :small)
+        render(Primer::OpenProject::DragHandle.new(size: size))
+      end
+    end
+  end
+end

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