Add preview examples for the FeedbackDialog

lookbook/docs/patterns/13-feedback-dialog-and-feedback-message.md.erb

@@ -1,53 +1,53 @@
-The Feedback Dialog is used to provide the user feedback on a multi-step process (or a complex process). Unlike the `Banner`/`Flash`, the Feedback dialog is intrusive and demands user attention. In some cases, it is the final step of a multi-step process, although it can also be triggered independently.
+The FeedbackDialog is used to provide the user feedback on a multi-step process (or a complex process). Unlike the `Banner`/`Flash`, the FeedbackDialog is intrusive and demands user attention. In some cases, it is the final step of a multi-step process, although it can also be triggered independently.
 
-The Feedback Message is a sub-component (a variation of `Blankslate`) that is contained in the Feedback Dialog, but can also be used separately.
+The FeedbackMessage is a sub-component (a variation of `Blankslate`) that is contained in the FeedbackDialog, but can also be used separately.
 
 ### Overview
 
-[Live Example]
+<%= embed Patterns::FeedbackDialogPreview, :default, panels: %i[source] %>
 
 ### Anatomy
 
-The Feedback Dialog is made up of three parts. The are variations of existing Primer components and the third is a blanket area for any additional content:
+The FeedbackDialog is made up of three parts. The are variations of existing Primer components and the third is a blanket area for any additional content:
 
-- **Feedback Dialog** is the dialog modal, itself a variation of the `Dialog`
-- **Feedback Message** is what is contained in the dialog, itself a variation of 'Blankslate'.
-- **Additional content** can be placed below the Feedback Message when you need to include other important elements like a checkbox, more text or a banner.
+- **FeedbackDialog** is the dialog modal, itself a variation of the `Dialog`
+- **FeedbackMessage** is what is contained in the dialog, itself a variation of 'Blankslate'.
+- **Additional content** can be placed below the FeedbackMessage when you need to include other important elements like a checkbox, more text or a banner.
 
 Both of these inherit all the properties of their original Primer components and as such can be adapted to a number of different use cases, as illustrated below. 
 
-Please note that although these are OpenProject-specific variants, there is no additional spacing added to these components. The spacing is derived from the dialog's `overlaybody`, and from Blankslate, which Feedback Message is based on.
+Please note that although these are OpenProject-specific variants, there is no additional spacing added to these components. The spacing is derived from the dialog's `overlayBody`, and from Blankslate, which FeedbackMessage is based on.
 
-In it's default form, the Feedback Message contains a Blankslate with a green success icon and a heading. The description is optional, the close icon in the top right edge is visible and there is one button to close the dialog in the footer.
+In it's default form, the FeedbackMessage contains a Blankslate with a green success icon and a heading. The description is optional, the close icon in the top right edge is visible and there is one button to close the dialog in the footer.
 
 ### Options
 
-Whilst all options available to the `Dialog` component are available to the Feedback Message, we recommend limiting our use to the following variations:
+Whilst all options available to the `Dialog` component are available to the FeedbackMessage, we recommend limiting our use to the following variations:
 
 - **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 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 Feedback Message.
+- **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.
 
 ### Best practices
 
 #### Do:
 
-- Use the Feedback Message to give feedback to the user as a part of a complex set of actions, whether that feedback is positive or negative.
+- Use the FeedbackMessage to give feedback to the user as a part of a complex set of actions, whether that feedback is positive or negative.
 - Use the simplest variant that will do the job, usually the default. Only choose variations or add additional elements if absolutely required.
 
 #### Don't:
 
-- Add a border to the Feedback Message, even if Blankslate allows this.
+- 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 Feedback Dialog. 
+- Add additional margins or spacing to the FeedbackDialog. 
 
 ### Used in
 
-The Feedback Dialog (or just the Feedback Message independently) is already used in a number of places:
+The FeedbackDialog (or just the FeedbackMessage independently) is already used in a number of places:
 
 - **File storages,**
     - to inform the user that the set-up was successful
@@ -58,8 +58,29 @@ The Feedback Dialog (or just the Feedback Message independently) is already used
 
 ### Technical notes
 
-[Notes from Henriette]
+The FeedbackDialog offer a set of additional slots, which the normal Dialog does not have
+
+* [`with_feedback_message`](../../inspect/primer/open_project/feedback_dialog/default)
+  * it can then receive the normal slots that a `Blankslate` can receive
+  * the only exception are the arguments for the icon which need to be passed as a hash
+
+```rb
+dialog.with_feedback_message(icon_arguments: { icon: :"x-circle", color: :danger }) do |message|
+   message.with_heading(tag: :h2) { "Ups, something went wrong" }
+   message.with_description { "Please try again or contact your administrator if the issue persists." }
+end
+```
+
+* [`with_additional_actions`](../../inspect/primer/open_project/feedback_dialog/additional_content)
+  * it is a generic slot that accepts any component inside
+
 
 ### Examples
 
-[Live examples of a couple of variations]
+Please visit the the [previews](../../inspect/primer/open_project/feedback_dialog/playground) for a detailed overview of the possible options.
+
+#### Custom icon
+<%= embed Patterns::FeedbackDialogPreview, :custom_icon, panels: %i[source] %>
+
+#### Loading
+<%= embed Patterns::FeedbackDialogPreview, :loading, panels: %i[source] %>

lookbook/previews/patterns/feedback_dialog_preview.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Patterns
+  # @hidden
+  class FeedbackDialogPreview < ViewComponent::Preview
+    # @display min_height 300px
+    def default
+      render_with_template
+    end
+
+    # @display min_height 300px
+    def loading
+      render_with_template
+    end
+
+    # @display min_height 300px
+    def custom_icon
+      render_with_template
+    end
+  end
+end

lookbook/previews/patterns/feedback_dialog_preview/custom_icon.html.erb

@@ -0,0 +1,8 @@
+<%=
+  render(Primer::OpenProject::FeedbackDialog.new(open: true)) do |dialog|
+    dialog.with_feedback_message(icon_arguments: { icon: :"x-circle", color: :danger }) do |message|
+      message.with_heading(tag: :h2) { "Ups, something went wrong" }
+      message.with_description { "Please try again or contact your administrator if the issue persists." }
+    end
+  end
+%>

lookbook/previews/patterns/feedback_dialog_preview/default.html.erb

@@ -0,0 +1,8 @@
+<%=
+  render(Primer::OpenProject::FeedbackDialog.new(open: true)) do |dialog|
+    dialog.with_feedback_message do |message|
+      message.with_heading(tag: :h2) { "Success" }
+      message.with_description { "Great! Everything worked well." }
+    end
+  end
+%>

lookbook/previews/patterns/feedback_dialog_preview/loading.html.erb

@@ -0,0 +1,8 @@
+<%=
+  render(Primer::OpenProject::FeedbackDialog.new(open: true)) do |dialog|
+    dialog.with_feedback_message(loading: true) do |message|
+      message.with_heading(tag: :h2) { "Waiting" }
+      message.with_description { "The job is currently running.." }
+    end
+  end
+%>