Move component documentation to its own folder in the lookbook

lookbook/docs/patterns/14-feedback-dialog-and-feedback-message.md.erb → lookbook/docs/components/feedback-dialog-and-feedback-message.md.erb

@@ -24,7 +24,7 @@ Whilst all options available to the `Dialog` component are available to the Feed
 - **With custom icon**: you can change the icon and the colour of the icon. This simple variation can be used for example to inform the user that a feature is Enterprise-only or to indicate an error.
 - **With additional content**: This is usually just additional text but can be almost any Primer component. The most common components that can be used here are text, a checkbox, a banner and a select panel.
 - **Footer buttons**: Usually, this is just a close action but it is possible to include custom footer with different actions.
-- **With loading spinner**: It's possible to display the animated SVG loading spinner instead of an icon. 
+- **With loading spinner**: It's possible to display the animated SVG loading spinner instead of an icon.
 - **With additional actions in the Blankslate**: the options afforded by Blankslate such as a primary or secondary action in the form of a button or a link are also available to FeedbackMessage.
 
 If you would need or would like to use a different variant, please contact the UX and Front-end Primer teams.
@@ -40,7 +40,7 @@ If you would need or would like to use a different variant, please contact the U
 
 - Add a border to the FeedbackMessage, even if Blankslate allows this.
 - Use it for immediate feedback on a common or simple action; use the `Banner` instead for this.
-- Add additional margins or spacing to the FeedbackDialog. 
+- Add additional margins or spacing to the FeedbackDialog.
 
 ### Used in
 
@@ -71,7 +71,6 @@ end
 * [`with_additional_actions`](../../inspect/primer/open_project/feedback_dialog/additional_content)
   * it is a generic slot that accepts any component inside
 
-
 ### Examples
 
 Please consult the the [previews](../../inspect/primer/open_project/feedback_dialog/playground) for a detailed overview of the possible options.
@@ -80,4 +79,4 @@ Please consult the the [previews](../../inspect/primer/open_project/feedback_dia
 <%= embed Patterns::FeedbackDialogPreview, :custom_icon, panels: %i[source] %>
 
 #### Loading
-<%= embed Patterns::FeedbackDialogPreview, :loading, panels: %i[source] %>
+<%= embed Patterns::FeedbackDialogPreview, :loading, panels: %i[source] %>

lookbook/docs/patterns/10-page-header.md.erb → lookbook/docs/components/page-header.md.erb

@@ -73,7 +73,6 @@ The PageHeader actions offer a set of predefined slots, to use specific componen
 * **Primer::Beta::Text** ([`with_action_text`](../../inspect/primer/open_project/page_header/actions)):
   * The text will be hidden on mobile.
 
-
 ### Code structure
 
 The PageHeader can be called directly in any `show`/`edit`/`index`/... `.html.erb` file.

lookbook/docs/patterns/11-sub-header.md.erb → lookbook/docs/components/sub-header.md.erb

@@ -20,7 +20,6 @@ This component is an own implementation for OpenProject requirements of contextu
 
 **Action buttons**: (Optional) A set of buttons that are shown on the right side
 
-
 ## Best practices
 
 **Do**
@@ -43,7 +42,6 @@ This component is an own implementation for OpenProject requirements of contextu
 
 ## Examples
 
-
 For detailed examples have a look at the other [preview examples](../../inspect/primer/open_project/sub_header/playground) of the component.
 
 This is an exemplary playground of the `Primer::OpenProject::SubHeader`.

lookbook/docs/patterns/13-tables.md.erb → lookbook/docs/components/tables.md.erb

@@ -33,8 +33,6 @@ end
 
 <%= embed OpPrimer::BorderBoxTableComponentPreview, :default, panels: %i[source] %>
 
-
-
 ### Border Box Table specifics
 
 #### Mobile behavior
@@ -54,8 +52,6 @@ mobile_columns :title, :users
 mobile_labels :users
 ```
 
-
-
 #### Mobile headers
 
 On mobile, the usual table headers are replaced with a single `mobile_title` property that you have to set on the table.

lookbook/previews/op_primer/border_box_table_component_preview.rb

@@ -4,14 +4,17 @@ module OpPrimer
   # @logical_path OpenProject/Primer
   # @display min_height 300px
   class BorderBoxTableComponentPreview < Lookbook::Preview
+    # See the [component documentation](/lookbook/pages/components/tables) for more details.
     def default
       render_with_template
     end
 
+    # See the [component documentation](/lookbook/pages/components/tables) for more details.
     def custom_column_widths
       render_with_template
     end
 
+    # See the [component documentation](/lookbook/pages/components/tables) for more details.
     def with_action_menu
       render_with_template
     end

lookbook/previews/op_primer/status_button_component_preview.rb

@@ -4,7 +4,7 @@ module OpPrimer
   # @logical_path OpenProject/Primer
   class StatusButtonComponentPreview < ViewComponent::Preview
     # See the [component documentation](/lookbook/pages/components/status_button) for more details.
-    # @display min_height 400px
+    # @display min_height 200px
     # @param readonly [Boolean]
     # @param disabled [Boolean]
     # @param size [Symbol] select [small, medium, large]
@@ -29,6 +29,8 @@ def playground(readonly: false, disabled: false, size: :medium)
       render(component)
     end
 
+    # See the [component documentation](/lookbook/pages/components/status_button) for more details.
+    # @display min_height 200px
     def with_icon(size: :medium)
       status = OpPrimer::StatusButtonOption.new(name: "Open", icon: :unlock, color: Color.new(hexcode: "#FF0000"))
 

lookbook/previews/open_project/work_packages/info_line_component_preview.rb

@@ -3,6 +3,7 @@
 module OpenProject::WorkPackages
   # @logical_path OpenProject/WorkPackages
   class InfoLineComponentPreview < ViewComponent::Preview
+    # See the [component documentation](/lookbook/pages/components/work_package_info_line) for more details.
     def playground
       render(WorkPackages::InfoLineComponent.new(work_package: WorkPackage.visible.first))
     end