openproject-primer_view_components 0.10.0 → 0.11.0

data/app/components/primer/open_project/border_grid/cell.html.erb

@@ -0,0 +1,3 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <%= content %>
+<% end %>

data/app/components/primer/open_project/border_grid/cell.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class BorderGrid
+      # A single cell inside the BorderGrid
+      # A cell can contain for example an action list or a status badge
+      class Cell < Primer::Component
+        status :open_project
+
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(**system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:tag] = "div"
+
+          @system_arguments[:classes] =
+            class_names(
+              @system_arguments[:classes],
+              "BorderGrid-cell"
+            )
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/border_grid.css

@@ -0,0 +1 @@
+.BorderGrid{border-collapse:collapse;border-style:hidden;display:table;margin-bottom:-16px;margin-top:-16px;table-layout:fixed;width:100%}.BorderGrid .BorderGrid-cell{padding-bottom:16px;padding-top:16px}.BorderGrid--spacious{margin-bottom:-24px;margin-top:-24px}.BorderGrid--spacious .BorderGrid-cell{padding-bottom:24px;padding-top:24px}.BorderGrid-row{display:table-row}.BorderGrid-cell{border:1px solid var(--borderColor-muted,var(--color-border-muted));display:table-cell}

data/app/components/primer/open_project/border_grid.css.json

@@ -0,0 +1,11 @@
+{
+  "name": "open_project/border_grid",
+  "selectors": [
+    ".BorderGrid",
+    ".BorderGrid .BorderGrid-cell",
+    ".BorderGrid--spacious",
+    ".BorderGrid--spacious .BorderGrid-cell",
+    ".BorderGrid-row",
+    ".BorderGrid-cell"
+  ]
+}

data/app/components/primer/open_project/border_grid.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["border_grid.pcss"],"names":[],"mappings":"AAEA,YAMI,wBAAyB,CACzB,mBAAmB,CANnB,aAAc,CAGd,mBAAoB,CADpB,gBAAiB,CAEjB,kBAAmB,CAHnB,UAMJ,CAEA,6BAEI,mBAAmB,CADnB,gBAEJ,CAEA,sBAEI,mBAAmB,CADnB,gBAEJ,CAEA,uCAEI,mBAAmB,CADnB,gBAEJ,CAEA,gBACI,iBACJ,CAEA,iBAEI,mEAAyC,CADzC,kBAEJ","file":"border_grid.css","sourcesContent":["/* CSS for BorderGrid  */\n\n.BorderGrid {\n    display: table;\n    width: 100%;\n    margin-top: -16px;\n    margin-bottom: -16px;\n    table-layout: fixed;\n    border-collapse: collapse;\n    border-style: hidden\n}\n\n.BorderGrid .BorderGrid-cell {\n    padding-top: 16px;\n    padding-bottom: 16px\n}\n\n.BorderGrid--spacious {\n    margin-top: -24px;\n    margin-bottom: -24px\n}\n\n.BorderGrid--spacious .BorderGrid-cell {\n    padding-top: 24px;\n    padding-bottom: 24px\n}\n\n.BorderGrid-row {\n    display: table-row\n}\n\n.BorderGrid-cell {\n    display: table-cell;\n    border: 1px solid var(--borderColor-muted)\n}\n"]}

data/app/components/primer/open_project/border_grid.html.erb

@@ -0,0 +1,7 @@
+<%= render Primer::BaseComponent.new(**@system_arguments) do %>
+  <% rows.each do |row| %>
+    <%= render Primer::BaseComponent.new(tag: :div, classes: "BorderGrid-row") do %>
+      <%= row %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/primer/open_project/border_grid.pcss

@@ -0,0 +1,35 @@
+/* CSS for BorderGrid  */
+
+.BorderGrid {
+    display: table;
+    width: 100%;
+    margin-top: -16px;
+    margin-bottom: -16px;
+    table-layout: fixed;
+    border-collapse: collapse;
+    border-style: hidden
+}
+
+.BorderGrid .BorderGrid-cell {
+    padding-top: 16px;
+    padding-bottom: 16px
+}
+
+.BorderGrid--spacious {
+    margin-top: -24px;
+    margin-bottom: -24px
+}
+
+.BorderGrid--spacious .BorderGrid-cell {
+    padding-top: 24px;
+    padding-bottom: 24px
+}
+
+.BorderGrid-row {
+    display: table-row
+}
+
+.BorderGrid-cell {
+    display: table-cell;
+    border: 1px solid var(--borderColor-muted)
+}

data/app/components/primer/open_project/border_grid.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A set of blocks that are shown below each other with separator lines in between
+    class BorderGrid < Primer::Component
+      status :open_project
+
+      # Use to render a block inside the grid
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_many :rows, lambda { |**system_arguments|
+        Primer::OpenProject::BorderGrid::Cell.new(**system_arguments)
+      }
+
+      # @param spacious [Boolean] Whether to add margin to the bottom of the component.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(spacious: false, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "div"
+        @spacious = spacious
+
+        @system_arguments[:classes] =
+          class_names(
+            @system_arguments[:classes],
+            "BorderGrid",
+            "BorderGrid--spacious" => @spacious
+          )
+      end
+
+      def render?
+        rows.any?
+      end
+    end
+  end
+end

data/app/components/primer/open_project/drag_handle.css

@@ -0,0 +1 @@
+.DragHandle{color:var(--fgColor-muted,var(--color-fg-muted));cursor:move}

data/app/components/primer/open_project/drag_handle.css.json

@@ -0,0 +1,6 @@
+{
+  "name": "open_project/drag_handle",
+  "selectors": [
+    ".DragHandle"
+  ]
+}

data/app/components/primer/open_project/drag_handle.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["drag_handle.pcss"],"names":[],"mappings":"AAEA,YAEI,gDAA2B,CAD3B,WAEJ","file":"drag_handle.css","sourcesContent":["/* CSS for DragHandle  */\n\n.DragHandle {\n    cursor: move;\n    color: var(--fgColor-muted);\n}\n"]}

data/app/components/primer/open_project/drag_handle.html.erb

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

data/app/components/primer/open_project/drag_handle.pcss

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

data/app/components/primer/open_project/drag_handle.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 DragHandle < 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::DragHandle::DEFAULT_SIZE, **system_arguments)
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = "div"
+        @system_arguments[:classes] =
+          class_names(
+            @system_arguments[:classes],
+            "DragHandle"
+          )
+
+        @size = fetch_or_fallback(Primer::OpenProject::DragHandle::SIZE_OPTIONS, size, Primer::OpenProject::DragHandle::DEFAULT_SIZE)
+      end
+    end
+  end
+end

data/app/components/primer/primer.pcss

@@ -43,3 +43,5 @@
 
 /* OP specifics */
 @import "./open_project/page_header.pcss";
+@import "./open_project/drag_handle.pcss";
+@import "./open_project/border_grid.pcss";

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 10
+      MINOR = 11
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

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/static/arguments.json

@@ -4423,6 +4423,60 @@
       }
     ]
   },
+  {
+    "component": "OpenProject::BorderGrid",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectBorderGrid",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/border_grid.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/border_grid/default/",
+    "parameters": [
+      {
+        "name": "spacious",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to add margin to the bottom of the component."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::BorderGrid::Cell",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectBorderGridCell",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/border_grid/cell.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/border_grid/cell/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "OpenProject::DragHandle",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectDragHandle",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/drag_handle.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/drag_handle/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
   {
     "component": "OpenProject::PageHeader",
     "status": "open_project",

data/static/audited_at.json

@@ -102,6 +102,9 @@
   "Primer::IconButton": "",
   "Primer::LayoutComponent": "",
   "Primer::Navigation::TabComponent": "",
+  "Primer::OpenProject::BorderGrid": "",
+  "Primer::OpenProject::BorderGrid::Cell": "",
+  "Primer::OpenProject::DragHandle": "",
   "Primer::OpenProject::PageHeader": "",
   "Primer::Tooltip": "",
   "Primer::Truncate": ""

data/static/classes.json

@@ -101,6 +101,18 @@
   "Banner": [
     "Primer::Alpha::Banner"
   ],
+  "BorderGrid": [
+    "Primer::OpenProject::BorderGrid"
+  ],
+  "BorderGrid--spacious": [
+    "Primer::OpenProject::BorderGrid"
+  ],
+  "BorderGrid-cell": [
+    "Primer::OpenProject::BorderGrid"
+  ],
+  "BorderGrid-row": [
+    "Primer::OpenProject::BorderGrid"
+  ],
   "Box": [
     "Primer::Beta::BorderBox"
   ],
@@ -233,6 +245,9 @@
   "Counter--secondary": [
     "Primer::Beta::Counter"
   ],
+  "DragHandle": [
+    "Primer::OpenProject::DragHandle"
+  ],
   "FormControl": [
     "Primer::Alpha::TextField"
   ],

data/static/constants.json

@@ -1300,6 +1300,19 @@
   },
   "Primer::Navigation::TabComponent": {
   },
+  "Primer::OpenProject::BorderGrid": {
+    "Cell": "Primer::OpenProject::BorderGrid::Cell"
+  },
+  "Primer::OpenProject::BorderGrid::Cell": {
+  },
+  "Primer::OpenProject::DragHandle": {
+    "DEFAULT_SIZE": "small",
+    "SIZE_OPTIONS": [
+      "xsmall",
+      "small",
+      "medium"
+    ]
+  },
   "Primer::OpenProject::PageHeader": {
     "DEFAULT_HEADER_VARIANT": "medium",
     "HEADER_VARIANT_OPTIONS": [

data/static/info_arch.json

@@ -14377,6 +14377,188 @@
 
     ]
   },
+  {
+    "fully_qualified_name": "Primer::OpenProject::BorderGrid",
+    "description": "A set of blocks that are shown below each other with separator lines in between",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::BorderGrid",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectBorderGrid",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/border_grid.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/border_grid/default/",
+    "parameters": [
+      {
+        "name": "spacious",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to add margin to the bottom of the component."
+      },
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+      {
+        "name": "rows",
+        "description": "Use to render a block inside the grid",
+        "parameters": [
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "{{link_to_system_arguments_docs}}"
+          }
+        ]
+      }
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/border_grid/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/border_grid/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/border_grid/spacious",
+        "name": "spacious",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
+  {
+    "fully_qualified_name": "Primer::OpenProject::BorderGrid::Cell",
+    "description": "A single cell inside the BorderGrid\nA cell can contain for example an action list or a status badge",
+    "accessibility_docs": null,
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::BorderGrid::Cell",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectBorderGridCell",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/border_grid/cell.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/border_grid/cell/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+
+    ],
+    "subcomponents": [
+
+    ]
+  },
+  {
+    "fully_qualified_name": "Primer::OpenProject::DragHandle",
+    "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.",
+    "accessibility_docs": "Add any accessibility considerations",
+    "is_form_component": false,
+    "is_published": true,
+    "requires_js": false,
+    "component": "OpenProject::DragHandle",
+    "status": "open_project",
+    "a11y_reviewed": false,
+    "short_name": "OpenProjectDragHandle",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/drag_handle.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/drag_handle/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "{{link_to_system_arguments_docs}}"
+      }
+    ],
+    "slots": [
+
+    ],
+    "methods": [
+
+    ],
+    "previews": [
+      {
+        "preview_path": "primer/open_project/drag_handle/default",
+        "name": "default",
+        "snapshot": "true",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/drag_handle/playground",
+        "name": "playground",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      }
+    ],
+    "subcomponents": [
+
+    ]
+  },
   {
     "fully_qualified_name": "Primer::OpenProject::PageHeader",
     "description": "A ViewComponent PageHeader inspired by the primer react variant",