Lookbook: Docs for Feedback Dialog/Message

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

@@ -0,0 +1,65 @@
+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 Feedback Message is a sub-component (a variation of `Blankslate`) that is contained in the Feedback Dialog, but can also be used separately.
+
+### Overview
+
+[Live Example]
+
+### 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:
+
+- **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.
+
+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.
+
+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.
+
+### Options
+
+Whilst all options available to the `Dialog` component are available to the Feedback Message, 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.
+
+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 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.
+- 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. 
+
+### Used in
+
+The Feedback Dialog (or just the Feedback Message independently) is already used in a number of places:
+
+- **File storages,**
+    - to inform the user that the set-up was successful
+    - to ask the user to log in if the action they are trying to accomplish requires it
+    - to warn the user about the consequences of removing a file storage from a project when they try to do this
+- **API Token generation** process (success or error)
+- **PDF export**, to inform the user of the status of the export job (waiting or successful)
+
+### Technical notes
+
+[Notes from Henriette]
+
+### Examples
+
+[Live examples of a couple of variations]