Add DragHandlerComponent

.changeset/unlucky-buses-knock.md

@@ -0,0 +1,7 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Add DragHandler component
+
+<!-- Changed components: Primer::OpenProject::DragHandler -->

app/components/primer/open_project/drag_handler.html.erb

@@ -0,0 +1,6 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= render(Primer::Beta::Octicon.new(
+    icon: :grabber,
+    size: @size
+    )) %>
+<% end %>

app/components/primer/open_project/drag_handler.pcss

@@ -0,0 +1,6 @@
+/* CSS for DragHandler  */
+
+.DragHandler {
+    cursor: move;
+    color: var(--fgColor-muted);
+}

app/components/primer/open_project/drag_handler.rb

@@ -0,0 +1,28 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # Add a general description of component here
+    # Add additional usage considerations or best practices that may aid the user to use the component correctly.
+    # @accessibility Add any accessibility considerations
+    class DragHandler < Primer::Component
+      status :open_project
+
+      DEFAULT_SIZE = Primer::Beta::Octicon::SIZE_DEFAULT
+      SIZE_OPTIONS = Primer::Beta::Octicon::SIZE_OPTIONS
+
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(size: Primer::OpenProject::DragHandler::DEFAULT_SIZE, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "div"
+        @system_arguments[:classes] =
+          class_names(
+            @system_arguments[:classes],
+            "DragHandler"
+          )
+
+        @size = fetch_or_fallback(Primer::OpenProject::DragHandler::SIZE_OPTIONS, size, Primer::OpenProject::DragHandler::DEFAULT_SIZE)
+      end
+    end
+  end
+end

app/components/primer/primer.pcss

@@ -43,3 +43,4 @@
 
 /* OP specifics */
 @import "./open_project/page_header.pcss";
+@import "./open_project/drag_handler.pcss";

previews/primer/open_project/drag_handler_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 DragHandler
+    class DragHandlerPreview < ViewComponent::Preview
+      # @label Default
+      # @snapshot
+      def default(size: :small)
+        render(Primer::OpenProject::DragHandler.new(size: size))
+      end
+
+      # @label Playground
+      # @param size [Symbol] select [xsmall, small, medium]
+      def playground(size: :small)
+        render(Primer::OpenProject::DragHandler.new(size: size))
+      end
+    end
+  end
+end

static/classes.json

@@ -233,6 +233,9 @@
   "Counter--secondary": [
     "Primer::Beta::Counter"
   ],
+  "DragHandler": [
+    "Primer::OpenProject::DragHandler"
+  ],
   "FormControl": [
     "Primer::Alpha::TextField"
   ],

test/components/component_test.rb

@@ -8,6 +8,7 @@ class PrimerComponentTest < Minitest::Test
 
   # Components with any arguments necessary to make them render
   COMPONENTS_WITH_ARGS = [
+    [Primer::OpenProject::DragHandler, {}],
     [Primer::OpenProject::PageHeader, {}, proc { |component|
       component.with_title { "Foo" }
     }],

test/components/primer/open_project/drag_handler_test.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+require "components/test_helper"
+
+class PrimerOpenProjectDragHandlerTest < Minitest::Test
+  include Primer::ComponentTestHelpers
+
+  def test_renders
+    render_inline(Primer::OpenProject::DragHandler.new)
+
+    assert_selector(".DragHandler .octicon")
+  end
+
+  def test_renders_larger_icon
+    render_inline(Primer::OpenProject::DragHandler.new(size: :medium))
+
+    assert_selector(".DragHandler .octicon[width='24']")
+  end
+end

test/system/open_project/drag_handler_test.rb

@@ -0,0 +1,11 @@
+# frozen_string_literal: true
+
+require "system/test_case"
+
+class IntegrationOpenProjectDragHandlerTest < System::TestCase
+  def test_renders_component
+    visit_preview(:default)
+
+    assert_selector(".DragHandler")
+  end
+end